/* Production hardening layer — intentionally preserves the approved desktop design. */
html,body{max-width:100%;overflow-x:hidden}
body.no-scroll{overflow:hidden;touch-action:none}
img,svg{height:auto}
button,input,textarea{font:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid rgba(243,238,230,.92);outline-offset:3px}
.skip:focus-visible{outline-color:#10090b}
.menu{touch-action:manipulation}
.enquiry-dialog{max-height:min(88dvh,760px);overflow:auto;overscroll-behavior:contain}
.enquiry-field input,.enquiry-field textarea{font-size:16px}

@media(max-width:820px){
  /* A backdrop-filter on the fixed header becomes a containing block for the
     fixed mobile nav in some browsers. Disable it on mobile so the menu always
     owns the full viewport, even when opened after the page has been scrolled. */
  .site-header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(16,9,11,.96)}
  .nav{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .navlinks{position:fixed!important;top:74px!important;right:0!important;bottom:0!important;left:0!important;height:calc(100dvh - 74px);max-height:calc(100dvh - 74px);padding-bottom:calc(4rem + env(safe-area-inset-bottom));overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .navlinks.open{display:flex;visibility:visible}
  .navlinks a{min-height:48px;display:flex;align-items:center;flex:0 0 auto}
  .menu{min-width:44px;min-height:44px}
  .hero-actions .button,.close-section .button{min-height:48px;padding:.85rem 1rem}
  .engine-node{min-height:230px}
  .page-hero{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

@media(max-width:560px){
  .nav-brand{min-width:0;gap:.65rem}
  .nav-brand img{flex:0 0 auto}
  .nav-wordmark{min-width:0;font-size:.78rem;letter-spacing:.15em;white-space:nowrap}
  .hero-inner{padding-bottom:72px}
  /* The SVG artwork is optically right-heavy inside its own viewBox. Correct
     only the hero lotus; the wordmark/subbrand remain geometrically centered. */
  .hero-mark-wrap{transform:translateX(-23px)}
  .hero-wordmark,.hero-subbrand{transform:none}
  .hero h1{overflow-wrap:anywhere}
  .hero-copy,.page-hero p,.section-intro,.prose p{overflow-wrap:anywhere}
  .hero-actions{width:100%}
  .hero-actions .button{width:100%;max-width:360px}
  .hero-status>div{min-width:0}
  .ledger-row{min-width:0}
  .ledger-title{overflow-wrap:anywhere}
  .section-title,.manifesto-line{overflow-wrap:anywhere}
  /* Keep the institutional-enquiries headline editorial on phones: words may
     wrap naturally, but never split "Conversations" into "Conversation" + "s". */
  .page-title{overflow-wrap:normal;word-break:normal;font-size:clamp(3.25rem,15vw,4.6rem);line-height:.94}
  .enquiry-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .enquiry-panel{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

@media(max-width:380px){
  .nav-wordmark{font-size:.7rem;letter-spacing:.12em}
  .hero h1{font-size:3.25rem}
  .page-title{font-size:3.25rem}
}

@media(hover:none){
  .button:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .ambient-dot{display:none}
}