/* Nick Ho: letter roll and directional icon handoff only on primary actions. */
html{scrollbar-gutter:stable}
.header .brand{transition:width .5s var(--ease)}
.button.roll-button>.button-label{display:inline-flex;gap:0;align-items:center;width:auto;height:auto;border:0;border-radius:0;transform:none;padding-block:.12em;margin-block:-.12em;overflow:hidden;white-space:nowrap}
.roll-glyph{display:inline-grid;overflow:hidden;white-space:pre}
.roll-glyph>span{grid-area:1/1;display:block}
.roll-next{visibility:hidden}
.button.roll-button>.button-icon{display:grid;overflow:hidden;transform:none}
.button-icon svg{grid-area:1/1}
.button-icon .arrow-next{visibility:hidden}
.button.roll-button:active{transform:scale(.975)}
.text-link{position:relative;border-bottom-color:color-mix(in srgb,currentColor 25%,transparent)}
.text-link::after{content:'';position:absolute;inset:auto 0 -1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.text-link:is(:hover,:focus-visible)::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .roll-glyph>span{transition:transform .48s var(--ease),opacity .48s;transition-delay:var(--roll-delay,0s)}
  .roll-next{visibility:visible;transform:translateY(115%);opacity:0}
  .roll-button:is(:hover,:focus-visible) .roll-current{transform:translateY(-115%);opacity:0}
  .roll-button:is(:hover,:focus-visible) .roll-next{transform:translateY(0);opacity:1}
  .button-icon svg{transition:transform .48s var(--ease)}
  .button-icon .arrow-next{visibility:visible;transform:translate(-140%,140%)}
  .roll-button:is(:hover,:focus-visible) .button-icon svg:first-child{transform:translate(140%,-140%)}
  .roll-button:is(:hover,:focus-visible) .button-icon .arrow-next{transform:translate(0,0)}
}
/* Menu field and link masks have separate clocks. Close is owned by JS. */
.menu-label{display:block;overflow:clip;padding-block:.12em;margin-block:-.12em}
.menu-label-inner{display:block;will-change:transform}
.menu-dialog[open] .menu-label-inner{animation:menuLabelIn .7s var(--ease) both;animation-delay:var(--menu-delay,.12s)}
.menu-dialog nav a:nth-child(2){--menu-delay:.17s}
.menu-dialog nav a:nth-child(3){--menu-delay:.22s}
.menu-dialog nav a:nth-child(4){--menu-delay:.27s}
.menu-dialog nav a .menu-label-inner,.menu-dialog nav a svg{transition:translate .4s var(--ease)}
.menu-dialog nav a:is(:hover,:focus-visible) .menu-label-inner{translate:12px 0}
.menu-dialog nav a:is(:hover,:focus-visible) svg{translate:4px -4px}
.menu-dialog.is-closing,.demo-dialog.is-closing{animation-play-state:paused}
.demo-dialog[open]::backdrop{animation:backdropIn .3s ease both}
.demo-dialog.is-closing::backdrop{animation:backdropOut .35s ease both}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes backdropOut{from{opacity:1}to{opacity:0}}
@keyframes menuLabelIn{from{transform:translateY(115%)}to{transform:translateY(0)}}
/* Preview remains a readable original mockup, not an interactive commerce claim. */
.format-stage{position:relative;isolation:isolate;overflow-anchor:none}
.format-ghost{position:absolute;pointer-events:none;z-index:3;transform-origin:center;contain:layout}
.format-ghost .demo-window{margin:0}
.format-line{display:block;overflow:clip;padding-block:.12em;margin-block:-.12em}
.format-line>span{display:block}
.format-info h3>.format-line:first-child{color:var(--ink)}
.format-info h3>.format-line:last-child{color:var(--blue)}
.format-tabs>button{transition:color .3s,border-color .3s}
.format-tabs>button svg{transition:transform .45s var(--ease)}
.format-tabs>button[aria-selected=true] svg{transform:rotate(45deg)}
.demo-nav{font-size:12px}
.demo-copy p{font-size:14px;max-width:230px;line-height:1.45}
.demo-button{font-size:12px;gap:16px}
.demo-search{font-size:12px}
.demo-dialog-content>.demo-window{transform:none}
.process-glyph{display:grid;place-items:start center;padding-top:5px}
.process-glyph svg{width:32px;height:32px}
.process-row{transition:background .4s}
.process-row h3{transition:color .4s,translate .4s var(--ease)}
.process-row p{transition:translate .4s var(--ease)}
.form-field input,.form-field select,.form-field textarea{transition:border-color .3s}
.form-field:focus-within label{color:#b8c8eb}
.form-field:focus-within input,.form-field:focus-within select,.form-field:focus-within textarea{border-color:var(--paper)}
.opening.opening-finish{display:flex;position:fixed;inset:0;background:var(--paper);z-index:100;align-items:center;justify-content:center;pointer-events:none}
/* The preview hover is meaningful on a mouse; touch never leaves a tilted sticky hover. */
@media(hover:none),(pointer:coarse){.preview-open:hover .demo-window{transform:rotate(-2deg)}}
@media(hover:hover) and (pointer:fine){.process-row:hover h3{color:var(--blue);translate:8px 0}.process-row:hover p{translate:8px 0}}
@media(max-width:760px){
  .enhanced .statement-surface{clip-path:inset(var(--window-y,0%) var(--window-x,0%) round var(--window-r,0px))!important;will-change:auto!important}
  .demo-nav{font-size:9px}
  .demo-copy p{font-size:11px;max-width:150px}
  .demo-button{font-size:10px;gap:10px}
  .demo-search{font-size:10px}
  .process-glyph svg{width:25px;height:25px}
  .menu-dialog nav a:is(:hover,:focus-visible) .menu-label-inner{translate:4px 0}
}
@media(prefers-reduced-motion:reduce){
  .opening.opening-finish{display:none}
  .enhanced .statement-surface{clip-path:none!important}
  .menu-label-inner{will-change:auto}
  .format-ghost{display:none}
  .roll-next,.button-icon .arrow-next{display:none}
  .roll-current{transform:none!important;opacity:1!important}
}


.menu-dialog nav{grid-template-rows:repeat(var(--menu-items,5),minmax(min-content,1fr))}.menu-dialog nav a:nth-child(5){--menu-delay:.32s}

/* Five real destinations, including client access, fit the available viewport. */
@media(max-width:760px){
  .menu-dialog{padding: max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom))}
  .menu-dialog nav{margin-top:clamp(16px,4svh,32px);flex:1 0 auto}
  .menu-dialog nav a{min-height:60px;padding:clamp(10px,2svh,18px) 0;font-size:clamp(24px,8vw,40px)}
  .menu-toggle{width:44px;min-height:44px;padding:10px}
  .brief-grid,.form-pair{grid-template-columns:minmax(0,1fr)}
  .brief-grid>*,.form-field,.footer-main>*{min-width:0}
  .statement-surface{min-width:0}
  .statement-tail .button{gap:16px;padding-inline:20px}
  .footer-main nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .footer-main nav a{font-size:clamp(16px,4.6vw,22px);min-height:48px;padding-block:8px;align-items:flex-start}
  .footer-main nav a svg{flex:none;margin-top:.22em}
  .footer .legal-links{display:flex;flex-wrap:wrap;gap:4px 24px}
  .footer .legal-links a,.footer .legal-links button{font-size:15px;line-height:1.4;text-align:left}
  .footer-bottom{font-size:12px;align-items:center;flex-wrap:wrap}
  .footer-signature{font-size:clamp(32px,10.5vw,80px)}
}
@media(max-width:380px){
  .footer-main nav{grid-template-columns:minmax(0,1fr);gap:12px}
  .footer-main nav>div+div{border-top:1px solid var(--line);padding-top:12px}
  .footer-main nav a{font-size:22px}
}
@media(max-width:760px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .enhanced .statement-track{height:165vh;height:165svh}
  .enhanced .statement-sticky{height:100vh;height:100svh;min-height:0;position:sticky;top:0;overflow:clip}
  .enhanced .statement-surface{height:100%;min-height:0;padding:96px var(--pad) 48px}
  .statement-tail{margin-top:28px}
  .statement-tail .button{margin-top:24px}
  .statement-mark{transform:rotate(var(--mark-rotation,0deg))}
}

.form-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
#proposal-challenge{min-height:65px;margin:8px 0 22px;max-width:100%}

/* Keep the navigation available during startup; public copy is embedded in the HTML. */
.menu-toggle .menu-caption{display:none}
@media(max-width:760px){
  html{scrollbar-gutter:auto}
  html:not(.enhanced) .menu-toggle{display:grid}
  .header{left:16px;right:16px;top:max(12px,env(safe-area-inset-top))}
  .header .nav-shell{gap:16px;justify-content:space-between}
  .header nav{display:none}
  .header .brand{width:128px}
  .menu-toggle{width:92px;height:48px;grid-template-columns:1fr 22px;grid-template-rows:repeat(2,6px);gap:0 10px;padding:12px 8px;margin-left:auto;align-content:center}
  .menu-toggle .menu-caption{display:block;grid-row:1/3;grid-column:1;align-self:center;font-size:14px;font-weight:650;line-height:1;height:auto;width:auto;background:none}
  .menu-toggle:hover .menu-caption{width:auto}
  .menu-toggle span:not(.menu-caption){grid-column:2;width:22px;height:1.5px;align-self:center}
  .header.compact .nav-shell{padding:0 12px 0 18px}
  .header.compact .brand{width:115px}
  .hero{padding-top:120px;padding-bottom:36px}
  .process{padding-top:96px}
  .hero h1{max-width:100%;font-size:clamp(43px,12vw,86px)}
  .hero-art{height:clamp(320px,96vw,450px);margin:0 -24px;overflow:clip}
  .hero-bag-entry{width:150%;height:auto;aspect-ratio:1;left:-25%;top:50%;margin-top:-75%}
  .hero-bag-float{will-change:auto}
  .cross-two{bottom:48px}
  .handoff-track{position:relative;display:flow-root;background:var(--paper)}
}
/* Uanzin handoff: read the full surface, hold it, then let the next field cover it. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .enhanced .handoff-track::after{content:'';display:block;height:124vh;height:124svh;pointer-events:none}
  .enhanced .handoff-track>.hero,.enhanced .handoff-track>.process{position:sticky;top:min(0px,calc(100vh - var(--surface-height,100vh)));top:min(0px,calc(100svh - var(--surface-height,100svh)));overflow:clip}
  .enhanced .handoff-next{margin-top:-100vh;margin-top:-100svh;position:relative}
}
@media(max-width:760px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .enhanced .statement-track{height:265vh;height:265svh}
  .enhanced .statement-track+.handoff-track{margin-top:-100vh;margin-top:-100svh}
}

/* Brand/promise composition (Plnty/Ballance): one field carries the mark,
   with an independent reading region. Mobile places the mark beside line two. */
.hero-art{overflow:clip}
.hero-art::before{content:'';position:absolute;inset:14% 10% 18% 4%;background:var(--soft);border-radius:46% 54% 58% 42%;transform:rotate(-12deg);z-index:-1}
.hero-art .art-grid,.hero-art .art-word,.hero-art .orbit,.hero-art .art-cross{display:none}
.hero-bag-entry{width:132%;left:-20%;top:-17%}
@media(max-width:760px){
  .hero{padding-top:116px;padding-bottom:28px}
  .hero h1{font-size:clamp(43px,13.4vw,82px);line-height:.97}
  .hero-bottom-copy{margin-top:110px}
  .hero-art{position:absolute;width:52%;height:190px;right:0;top:152px;margin:0;align-self:auto;z-index:2;overflow:visible}
  .hero-art::before{inset:13% 8% 15% 2%;border-radius:46% 54% 58% 42%;transform:rotate(-12deg)}
  .hero-bag-entry{width:150%;height:auto;left:-25%;top:50%;margin-top:-75%;aspect-ratio:1}
  .hero-bottom-copy>p{font-size:17px;max-width:100%;margin-bottom:22px}
}
@media(max-width:370px){
  .hero-art{height:170px;top:146px}
  .hero-bottom-copy{margin-top:100px}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .enhanced main>.handoff-track:first-child::after{height:100vh;height:100svh}
}
.brief-data-use{font-size:18px;line-height:1.5;max-width:48ch;margin-bottom:24px}
.brief-data-use a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.brief-data-use{font-size:17px;margin-bottom:22px}}