:root{color-scheme:dark;--bg:#080808;--surface:#101010;--fg:#efeeeb;--muted:#aaa9a6;--line:#343434;--gutter:clamp(1.35rem,5vw,6rem);font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;background:var(--bg);color:var(--fg);line-height:1.65;-webkit-font-smoothing:antialiased}p,h1,h2,h3,figure{margin:0}p+p{margin-top:1.25rem}h1,h2,h3{line-height:1.05;font-weight:500;letter-spacing:-.055em;text-wrap:balance}h2{font-size:clamp(2.5rem,5vw,5.4rem)}a{color:inherit;text-decoration:none}button,input{font:inherit}img{display:block;max-width:100%}a,button,input,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #fff;outline-offset:6px}a:hover{color:#c5c5c5}button:disabled{cursor:not-allowed}::selection{background:#eee;color:#111}.skip-link{position:fixed;z-index:99;left:1rem;top:1rem;background:white;color:black;padding:.8rem;transform:translateY(-200%)}.skip-link:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.header{position:fixed;z-index:20;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem var(--gutter)}.brand{display:flex;align-items:center;gap:.8rem}.brand img{width:2.6rem;height:auto}.brand span{font-weight:800;font-size:1.25rem;letter-spacing:-.06em}.header nav{display:flex;gap:2rem;font-size:.875rem}.header nav a{padding:.7rem 0}.eyebrow{font-size:.75rem;letter-spacing:.15em;color:var(--muted);line-height:1.6;margin-bottom:1.5rem}.chapter{position:relative}.concept-note{font-size:.8125rem;line-height:1.65;color:#b1b0ad;max-width:30rem}.muted{color:var(--muted)}.small{font-size:.875rem;line-height:1.6}.garment{position:relative;aspect-ratio:561/1402;width:auto;height:100%;overflow:hidden;isolation:isolate;mask-image:linear-gradient(0deg,transparent 0%,#000 8%,#000 94%,transparent 100%)}.garment>img{width:200%;max-width:none;height:100%;object-fit:fill}.garment.rear>img{transform:translateX(-50%)}.hip-stamp{position:absolute;top:29.7%;left:64%;width:8%;display:flex;flex-direction:column;align-items:center;gap:1px;transform:rotate(-6deg);color:#e1e1de}.hip-stamp img{width:100%;height:auto}.hip-stamp b{font-size:clamp(5px,.52vw,8px);line-height:1;letter-spacing:.01em}.reveal-stage{position:relative;min-height:calc(var(--scene-vh, 1vh) * 100);overflow:hidden;background:#080808}.intro{min-height:calc(var(--scene-vh, 1vh) * 100);display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:6rem var(--gutter);position:relative;z-index:2;background:#080808}.intro h1{font-weight:800;letter-spacing:-.075em;font-size:clamp(7rem,23vw,24rem);line-height:.88;padding-right:.08em}.intro>p{font-size:clamp(.75rem,1.05vw,.9375rem);letter-spacing:.19em;text-transform:uppercase;max-width:35rem;margin-top:2.7rem}.scroll-cue{font-size:.75rem;letter-spacing:.12em;display:flex;flex-direction:column;gap:1rem;position:absolute;bottom:3rem;align-items:center;color:#b0b0ad}.scroll-cue span{font-size:1.25rem}.reveal-product{height:calc(var(--scene-vh, 1vh) * 80);min-height:30rem;display:flex;align-items:center;justify-content:center;background:#080808}.reveal-caption{text-align:center;padding:2rem 1rem 3rem}.reveal-caption h2{font-size:clamp(1.8rem,3vw,3rem)}.reveal-caption .eyebrow{margin-bottom:.6rem}.reveal-caption>p:last-child{color:var(--muted);font-size:.875rem;margin-top:.7rem}.reveal-foot{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem var(--gutter);font-size:.75rem;letter-spacing:.09em;color:var(--muted)}.product-story{border-top:1px solid #202020}.story-stage{padding:5rem var(--gutter)}.story-visual{display:flex;flex-direction:column;align-items:center;position:relative;height:calc(var(--scene-vh, 1vh) * 80);min-height:32rem}.story-visual .garment{height:94%}.story-visual .concept-note{margin-top:1rem;text-align:center}.story-frames{max-width:38rem;margin:4rem auto 0}.story-beat{padding:3rem 0;border-bottom:1px solid var(--line)}.story-beat h2{font-size:clamp(2.5rem,4.3vw,4.8rem);margin-bottom:1.5rem}.story-beat>p:last-child{max-width:28rem;color:#c0bfbb;font-size:1.0625rem}.story-progress{display:none}.vector-stage{padding:5rem var(--gutter);display:grid;grid-template-columns:1.2fr 1fr;gap:6%;align-items:center;overflow:hidden;min-height:calc(var(--scene-vh, 1vh) * 100);background:#101010}.vector-visual{height:calc(var(--scene-vh, 1vh) * 75);min-height:30rem;overflow:hidden;display:flex;justify-content:center;align-items:center}.vector-visual .garment{height:120%;transform:scale(1.5) translateY(17%)}.vector-copy{position:relative;z-index:2}.vector-copy h2{font-size:clamp(2rem,3.7vw,4.3rem);letter-spacing:-.055em;white-space:nowrap;margin-bottom:2rem}.vector-copy>p:not(.eyebrow){max-width:28rem}.vector-copy .quiet-line{font-size:1.25rem;color:#deddd9;margin-top:2rem}.vector-copy .concept-note{margin-top:2rem}.packaging{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:5%;padding:9rem var(--gutter);background:#0b0b0b}.packaging h2{font-size:clamp(3.5rem,6.5vw,7rem);margin-bottom:2rem}.packaging-copy>p:not(.eyebrow){max-width:29rem}.packaging .concept-note{margin-top:2rem}.packaging figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.packaging figcaption{font-size:.75rem;letter-spacing:.13em;color:var(--muted);margin-top:1rem}.signup{padding:8rem var(--gutter);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10%;background:#131313}.signup h2{font-size:clamp(3.4rem,6.5vw,7rem);margin-bottom:2rem}.signup>div>p{max-width:31rem;color:#cccac6}.og-benefits{padding:0;list-style:none;margin:2rem 0 0}.og-benefits li{padding:.5rem 0;color:#c4c3bf}.og-benefits li:before{content:'—';margin-right:.8rem;color:#777}.signup-panel{max-width:36rem;align-self:center}.signup-panel>p{margin-top:2rem}.signup label{display:block;font-size:.9375rem;margin-bottom:.7rem}.signup label span{color:var(--muted)}.signup input:not([type=checkbox]){width:100%;background:transparent;border:0;border-bottom:1px solid #747474;border-radius:0;padding:.7rem 0 1rem;color:white;min-height:3.5rem;margin-bottom:1.5rem}.signup input::placeholder{color:#888}.sms-consent{display:grid;grid-template-columns:1.2rem 1fr;align-items:start;gap:.8rem;margin:.6rem 0}.sms-consent input{appearance:auto;width:1.1rem;height:1.1rem;margin:.3rem 0;accent-color:#ddd}.sms-consent label{font-size:.8125rem;line-height:1.6;color:#b5b4b0;margin:0}.sms-consent:has(input:disabled){opacity:.8}#sms-availability{margin-top:.5rem}#privacy-link a{text-decoration:underline;text-underline-offset:3px}.button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#efeeeb;color:#080808;border:0;padding:1.1rem 1.4rem;min-height:3.75rem;font-size:.875rem;letter-spacing:.07em;margin:2rem 0 1rem;cursor:pointer}.button:hover:not(:disabled){background:#cfcecb}.button:disabled{background:#696966;color:#101010}#form-status:not(:empty){margin-top:1rem;padding:1rem;border:1px solid #777}#form-status[data-error=true]{border-color:#c99c89;color:#f3d6ca}.future-opening{min-height:calc(var(--scene-vh, 1vh) * 85);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:7rem var(--gutter)}.future-opening h2{font-size:clamp(3rem,7.5vw,8rem);margin-bottom:2rem}.future-opening>p:not(.eyebrow){color:#c0bfbb}.future-opening .concept-note{margin-top:2rem}.future-pillar{min-height:calc(var(--scene-vh, 1vh) * 100);position:relative;isolation:isolate;display:flex;align-items:flex-end;padding:7rem var(--gutter);overflow:hidden}.future-pillar picture{position:absolute;inset:0;z-index:-2}.future-pillar img{width:100%;height:100%;object-fit:cover;object-position:60% center;filter:grayscale(1)}.future-pillar:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.96),rgba(0,0,0,.4) 55%,rgba(0,0,0,.05));z-index:-1}.future-copy{width:100%;max-width:65rem}.future-copy h3{font-size:clamp(3.1rem,8vw,9rem);font-weight:500;letter-spacing:-.06em;margin-bottom:1.5rem;overflow-wrap:anywhere}.future-copy>p:last-child{max-width:30rem;font-size:1.125rem;color:#d0cfcb}.future-disclaimer{position:absolute;bottom:2rem;left:var(--gutter);font-size:.75rem;letter-spacing:.1em;color:#bcbcb8}.future-counter{display:none}.final-statement{padding:10rem var(--gutter) 7rem}.final-statement h2{font-size:clamp(2.6rem,5.6vw,6.5rem);max-width:80rem}.final-statement h2 span{color:#8d8d8b}.final-statement>p:not(.eyebrow){margin-top:2rem;color:#c4c3bf}.philosophy-details{max-width:62rem;border-top:1px solid var(--line);margin-top:4rem;padding-top:1.5rem}.philosophy-details summary,.expanded-socials summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9375rem;min-height:2.75rem}.philosophy-details summary::-webkit-details-marker,.expanded-socials summary::-webkit-details-marker{display:none}.philosophy-details>p{color:#b8b7b3;margin-top:1.5rem;max-width:48rem}.name-meaning{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:2rem 0;color:#b8b7b3}.name-meaning p+p{margin:0}.name-meaning strong{display:block;margin-bottom:.8rem;color:var(--fg);font-size:.875rem;letter-spacing:.1em}.footer{padding:3rem var(--gutter) 2rem;border-top:1px solid var(--line)}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:2rem}.footer-brand{display:flex;align-items:center;gap:1rem}.footer-brand img{width:4rem;height:auto}.footer-brand b{font-size:2.6rem;letter-spacing:-.07em}.footer-top p{font-size:.875rem;color:#b8b7b3}.footer-top>a:last-child{font-size:.875rem}.socials{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;font-size:.9375rem;margin:2.5rem 0}.socials a,.socials>span{padding:.5rem 0}.socials a span{font-size:.75rem;color:#aaa}.social-pending{color:#949490}.expanded-socials{border-top:1px solid var(--line);padding-top:.75rem}.expanded-socials summary{font-size:.75rem;letter-spacing:.13em;color:#bab9b5}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#aaa9a6;font-size:.75rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
/* Progressive enhancement: native scrolling, one sticky stage per chapter. */
.motion .reveal-chapter{height:calc(var(--scene-vh, 1vh) * 350)}.motion .reveal-stage{height:calc(var(--scene-vh, 1vh) * 100);position:sticky;top:0;min-height:0}.motion .intro{position:absolute;inset:0;min-height:0;background:transparent;opacity:var(--intro-opacity,1);transform:translateY(var(--intro-y,0));pointer-events:none}.motion .intro a{pointer-events:auto}.motion .reveal-product{position:absolute;inset:0;height:100%;min-height:0;opacity:var(--reveal-opacity,0);overflow:hidden;padding-top:calc(var(--scene-vh, 1vh) * 2);padding-bottom:calc(var(--scene-vh, 1vh) * 16)}.motion .reveal-product .hero-set-figure{transform:translate3d(var(--reveal-x,0px),var(--reveal-y,0px),0) scale(var(--reveal-scale,1));transform-origin:center;will-change:transform}.motion .reveal-caption{position:absolute;bottom:calc(var(--scene-vh, 1vh) * 5.5);left:1rem;right:1rem;padding:0;opacity:var(--caption-opacity,0)}.motion .reveal-foot{position:absolute;bottom:0;left:0;right:0;padding:1.25rem var(--gutter);font-size:.75rem}.motion .product-story{height:calc(var(--scene-vh, 1vh) * 680)}.motion .story-stage{position:sticky;top:0;height:calc(var(--scene-vh, 1vh) * 100);display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;padding-top:calc(var(--scene-vh, 1vh) * 5);padding-bottom:calc(var(--scene-vh, 1vh) * 8);overflow:hidden}.motion .story-visual{height:calc(var(--scene-vh, 1vh) * 85);min-height:0}.motion .story-frames{position:relative;align-self:stretch;margin:0;max-width:36rem}.motion .story-beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0;border:0;opacity:0;pointer-events:none;transform:translateY(18px)}.motion .story-beat.active{pointer-events:auto}.motion .story-progress{position:absolute;bottom:2rem;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);letter-spacing:.1em}.motion .vector-chapter{height:calc(var(--scene-vh, 1vh) * 250)}.motion .vector-stage{height:calc(var(--scene-vh, 1vh) * 100);min-height:0;position:sticky;top:0}.motion .vector-visual .garment{transform:scale(var(--rear-scale,1)) translateY(var(--rear-y,0)) rotateY(var(--rear-orbit,5deg))}.motion .future-sequence{height:calc(var(--scene-vh, 1vh) * 600)}.motion .future-stage{position:sticky;top:0;height:calc(var(--scene-vh, 1vh) * 100);overflow:hidden}.motion .future-pillar{position:absolute;inset:0;opacity:0;min-height:0;pointer-events:none}.motion .future-counter{display:block;position:absolute;right:var(--gutter);bottom:2rem;z-index:3;font-size:.75rem;letter-spacing:.12em;color:#c5c4c0}
@media(min-width:1600px){.story-stage,.vector-stage,.packaging,.signup,.final-statement,.footer{padding-left:max(var(--gutter),calc((100vw - 1500px)/2));padding-right:max(var(--gutter),calc((100vw - 1500px)/2))}}
@media(max-width:700px){.header{padding-top:1.25rem}.header nav{gap:1.1rem;font-size:.8125rem}.brand img{width:2rem}.brand span{font-size:1.1rem}.intro h1{font-size:30vw}.intro>p{font-size:.75rem;max-width:20rem;line-height:1.8;letter-spacing:.14em;margin-top:2rem}.reveal-foot{font-size:.75rem}.reveal-foot>span:first-child{display:none}.reveal-foot>span:last-child{width:100%;text-align:center;font-size:.75rem;letter-spacing:.02em}.motion .reveal-product{padding-top:calc(var(--scene-vh, 1vh) * 4);padding-bottom:calc(var(--scene-vh, 1vh) * 22)}.reveal-caption h2{font-size:1.75rem}.reveal-caption .eyebrow{font-size:.75rem}.motion .reveal-caption{bottom:calc(var(--scene-vh, 1vh) * 7.5)}.reveal-caption>p:last-child{font-size:.8125rem}.story-stage{padding:3rem var(--gutter)}.story-visual{height:calc(var(--scene-vh, 1vh) * 65);min-height:25rem}.story-frames{margin:2rem 0 0}.story-beat{padding:2.5rem 0}.story-beat h2{font-size:2.4rem}.story-beat>p:last-child{font-size:1rem}.motion .product-story{height:calc(var(--scene-vh, 1vh) * 750)}.motion .story-stage{display:grid;grid-template-columns:1fr;grid-template-rows:53% 47%;gap:0;padding:1.25rem var(--gutter) 3rem}.motion .story-visual{height:100%;min-height:0}.motion .story-visual .garment{height:100%}.motion .story-visual .concept-note{display:none}.motion .story-frames{margin:0;max-width:none;align-self:stretch}.motion .story-beat{justify-content:center}.motion .story-beat .eyebrow{margin-bottom:.7rem}.motion .story-beat h2{font-size:clamp(1.9rem,6.8vw,2.7rem);margin-bottom:.85rem}.motion .story-beat>p:last-child{font-size:.9375rem;line-height:1.6;max-width:32rem}.motion .story-progress{bottom:.9rem;font-size:.75rem}.vector-stage{grid-template-columns:1fr;gap:1.75rem;padding:3rem var(--gutter)}.vector-visual{height:calc(var(--scene-vh, 1vh) * 55);min-height:23rem}.vector-copy h2{font-size:clamp(1.8rem,7.3vw,3rem);margin-bottom:1rem}.vector-copy .eyebrow{margin-bottom:.75rem}.vector-copy>p:not(.eyebrow){font-size:.9375rem;line-height:1.6}.vector-copy .quiet-line{margin-top:1rem}.vector-copy .concept-note{font-size:.8125rem!important;margin-top:1rem}.motion .vector-stage{grid-template-rows:52% 48%;gap:0;padding:1.25rem var(--gutter) 2rem}.motion .vector-visual{height:100%;min-height:0}.motion .vector-copy{align-self:center}.packaging{grid-template-columns:1fr;padding:5rem var(--gutter);gap:3rem}.packaging h2{font-size:3.8rem}.packaging figure{margin:0 calc(-1 * var(--gutter))}.packaging figcaption{padding:0 var(--gutter)}.signup{grid-template-columns:1fr;padding:5rem var(--gutter);gap:3rem}.signup h2{font-size:clamp(2.7rem,10.2vw,3.8rem)}.signup-panel{max-width:none}.future-opening{min-height:calc(var(--scene-vh, 1vh) * 80);padding:5rem var(--gutter)}.future-opening h2{font-size:clamp(2.7rem,9.4vw,4rem)}.future-pillar{padding:6rem var(--gutter) 7rem;align-items:flex-end}.future-pillar img{object-position:58% center}.future-copy h3{font-size:clamp(2.6rem,10vw,4.5rem);letter-spacing:-.06em}.future-copy>p:last-child{font-size:1rem;max-width:25rem}.future-copy .eyebrow{margin-bottom:1rem}.future-disclaimer{font-size:.75rem;letter-spacing:.03em;max-width:16rem;bottom:1.5rem}.motion .future-counter{bottom:1.5rem}.final-statement{padding:6rem var(--gutter) 4rem}.final-statement h2{font-size:clamp(2rem,7.7vw,3.3rem)}.name-meaning{grid-template-columns:1fr;gap:1.5rem}.footer-top{flex-wrap:wrap;gap:1.5rem}.footer-top p{order:3;width:100%}.footer-brand b{font-size:2rem}.footer-brand img{width:3rem}.footer-top>a:last-child{font-size:.8125rem}.socials{gap:.8rem 1.7rem}.footer-bottom{flex-direction:column}.philosophy-details{margin-top:3rem}}
/* Reduced motion uses the complete normal-flow sequence, including every story beat. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.packaging figure img{filter:grayscale(1)}

/* Stable small viewport units, with a JS pixel fallback for older Safari. */
@supports(height:100svh){:root{--scene-vh:1svh}}
.garment{-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 8%,#000 94%,transparent 100%)}
/* The readable fallback follows the same intro → product → caption sequence. */
.reveal-stage{display:flex;flex-direction:column}.intro{order:-1}.motion .reveal-stage{display:block}
@media(max-width:700px){
 .motion .story-stage{grid-template-rows:45% 55%}
 .motion .vector-stage{grid-template-rows:46% 54%}
}
/* Only overflowing copy chapters return to normal document flow. The opening
   retains its scroll-controlled framing even in short/enlarged viewports. */
.motion.story-flow .product-story{height:auto}
.motion.story-flow .story-stage{position:relative;height:auto;display:block;padding:3rem var(--gutter);overflow:visible}
.motion.story-flow .story-visual{height:calc(var(--scene-vh,1vh) * 65);min-height:20rem}
.motion.story-flow .story-frames{height:auto;margin:2rem auto 0;max-width:38rem}
.motion.story-flow .story-beat{position:relative;inset:auto;display:block;padding:2.5rem 0;border-bottom:1px solid var(--line);opacity:1!important;transform:none!important;pointer-events:auto}
.motion.story-flow .story-progress{display:none}
.motion.rear-flow .vector-chapter{height:auto}
.motion.rear-flow .vector-stage{height:auto;min-height:calc(var(--scene-vh,1vh) * 100);position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:2rem;padding:3rem var(--gutter);overflow:visible}
.motion.rear-flow .vector-visual{height:calc(var(--scene-vh,1vh) * 55);min-height:20rem}
.motion.rear-flow .vector-visual .garment{transform:scale(1.5) translateY(17%)}
.motion.future-flow .future-sequence{height:auto}
.motion.future-flow .future-stage{position:relative;height:auto;overflow:visible}
.motion.future-flow .future-pillar{position:relative;min-height:calc(var(--scene-vh,1vh) * 100);opacity:1!important;transform:none!important;pointer-events:auto}
.motion.future-flow .future-counter{display:none}
@media(max-height:550px) and (min-width:701px){
 .motion .vector-stage{padding:1.25rem var(--gutter)}
 .motion .vector-visual{height:100%;min-height:0}
 .vector-copy h2{margin-bottom:1rem}
 .vector-copy .eyebrow{margin-bottom:.75rem}
 .vector-copy>p:not(.eyebrow){font-size:.9375rem;line-height:1.5}
 .vector-copy .quiet-line,.vector-copy .concept-note{margin-top:1rem}
 .motion .future-pillar{padding:2rem var(--gutter) 4.5rem}
}
.vector-copy h2{white-space:normal;overflow-wrap:anywhere}
.header{flex-wrap:wrap}.header nav{flex-wrap:wrap;justify-content:flex-end}
.future-opening h2{max-width:100%;overflow-wrap:anywhere}
h2{overflow-wrap:anywhere}

/* Supplied Hero Set: full transparent canvas, no board crop, masks or added logo. */
.hero-set-figure{position:relative;height:100%;width:auto;aspect-ratio:2/3;max-width:100%;flex:none}
.hero-set-figure picture{display:block;width:100%;height:100%}
.hero-set-figure img{display:block;width:100%;height:100%;object-fit:contain}
.motion .reveal-product{padding-bottom:var(--hero-bottom-space,22vh)}

/* The visible stage follows browser chrome; only the larger bleed layer clips.
   Keep the original image and scroll choreography independent of that clip. */
:root{--hero-height:var(--hero-visible-height,100vh);--hero-bleed:calc(256px + env(safe-area-inset-bottom,0px))}
@supports(height:max(1px,2px)){:root{--hero-bleed:calc(max(160px,100vh - var(--hero-visible-height,100vh) + 64px) + env(safe-area-inset-bottom,0px))}}
@supports(height:100svh){:root{--hero-height:var(--hero-visible-height,100svh)}}
@supports(height:100dvh){:root{--hero-height:100dvh}}
@supports(height:100lvh){:root{--hero-bleed:calc(max(160px,100lvh - 100svh + 64px,100lvh - var(--hero-visible-height,100svh) + 64px) + env(safe-area-inset-bottom,0px))}}
html,body,#root,#app,main,.ngp-page-content{margin:0;padding:0;background:#000}
.reveal-chapter,.reveal-stage{margin:0;padding:0;top:0}
/* Keep the page canvas black through safe areas and browser overscroll. */
html,body,#root,#app,.ngp-page-content{background-color:#000}
@supports(padding-left:max(1px,2px)){.header{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}}
.reveal-chapter,.reveal-stage,.reveal-product,.intro{background:#000}
.reveal-chapter + .product-story{background:#000;border-top:0}
.motion .reveal-stage{height:var(--hero-height);min-height:var(--hero-visible-height,0px);overflow:visible;isolation:isolate}
.motion .reveal-bleed{position:absolute;top:0;left:0;right:0;height:calc(100% + var(--hero-bleed));overflow:hidden;background:#000;pointer-events:none}
.motion .reveal-product{height:calc(100% - var(--hero-bleed));bottom:auto;overflow:visible}
.motion .intro{background:transparent}
.motion .reveal-caption{bottom:calc(5.5% + env(safe-area-inset-bottom,0px))}
.motion .reveal-foot{bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:700px){.motion .reveal-caption{bottom:calc(7.5% + env(safe-area-inset-bottom,0px))}}
.header{padding-top:calc(1.5rem + env(safe-area-inset-top,0px))}
.motion .reveal-product{padding-top:calc(var(--scene-vh,1vh) * 2)}
@media(max-width:700px){.header{padding-top:calc(1.25rem + env(safe-area-inset-top,0px))}.motion .reveal-product{padding-top:calc(var(--scene-vh,1vh) * 4)}}

/* Confirmed body-level overlay: permanent black-to-transparent top fade. */
:root{--ngp-fade-height:clamp(140px,22vh,240px)}
@supports(height:100svh){:root{--ngp-fade-height:clamp(140px,22svh,240px)}}
@supports(height:100dvh){:root{--ngp-fade-height:clamp(140px,22dvh,240px)}}
.ngp-page-content{position:relative;isolation:isolate;z-index:0}
.ngp-global-top-fade{position:fixed!important;top:0!important;left:0!important;right:0!important;height:25vh!important;height:25dvh!important;min-height:150px!important;max-height:none!important;background:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,.95) 32%,rgba(0,0,0,.80) 48%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.30) 78%,rgba(0,0,0,.10) 90%,rgba(0,0,0,0) 100%)!important;opacity:1!important;pointer-events:none!important;user-select:none;z-index:2147483000!important}
.header,.skip-link{z-index:2147483647!important}
html{scroll-padding-top:calc(var(--ngp-fade-height) + 1rem)}
:focus-visible{scroll-margin-top:calc(var(--ngp-fade-height) + 1rem)}
.vector-stage,.packaging,.signup{background:#000}
.signup,.footer{border-top:0}.signup{border-bottom:0}

/* First Hero composition: centered visual with an independent typography layer.
   Existing dynamic viewport and overscan remain responsible for stage coverage. */
.motion .reveal-product{padding:3%;padding-top:3%;padding-bottom:calc(3% + env(safe-area-inset-bottom,0px))}
.motion .reveal-caption{position:absolute;z-index:3;left:1rem;right:1rem;bottom:calc(2rem + env(safe-area-inset-bottom,0px));padding:0;opacity:1;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.reveal-caption .hero-pair{font-size:.875rem;line-height:1.5;color:#d1d0cd;margin:.7rem auto 0;max-width:26rem}
.reveal-caption .hero-concept{font-size:.75rem;line-height:1.5;letter-spacing:.1em;color:#aaa9a6;margin-top:1rem}
.motion .reveal-caption [data-hero-copy]{opacity:var(--hero-copy-opacity,0);transform:translateY(var(--hero-copy-y,4px))}
@media(max-width:700px){.reveal-caption .hero-pair{font-size:.8125rem;max-width:20rem}.reveal-caption .hero-concept{margin-top:.75rem}.motion .reveal-caption{bottom:calc(1.75rem + env(safe-area-inset-bottom,0px))}}

/* Keep the two Hero title lines together without changing the overlay anchor. */
.reveal-caption .eyebrow{margin-bottom:.4rem}

/* Float the title group within the existing dynamic Hero stage. */
.motion .reveal-caption{top:calc(57% - 4.5vh);top:calc(57% - 4.5dvh);bottom:auto;transform:translateY(-50%)}

/* Exact supplied symbol; retain the original heading slot and copy spacing. */
.intro h1.intro-symbol{position:relative;width:100%;height:.88em;padding:0;flex:none}
.intro-symbol img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88vw;max-width:650px;height:auto;object-fit:contain}

/* Keep the existing lower scroll cue clear of the mobile safe area. */
.intro .scroll-cue{bottom:calc(3rem + env(safe-area-inset-bottom,0px))}

/* Bounded reserve for future scenes; the existing sticky stage releases at
   this chapter's bottom. Stable viewport units avoid chrome-driven travel. */
.motion .reveal-chapter{--hero-reveal-units:350;--hero-hold-units:300;height:calc(var(--scene-vh,1vh) * (var(--hero-reveal-units) + var(--hero-hold-units)))}

/* Unprocessed rear master, contained in the same stationary viewing stage.
   Without motion enhancement it remains a readable image in normal flow. */
.hero-image-two{height:calc(var(--scene-vh,1vh) * 80);background:#000}
.hero-image-two img{display:block;width:100%;height:100%;object-fit:contain}
.motion .hero-image-two{position:absolute;inset:0;z-index:1;height:100%;padding:3%;padding-top:3%;padding-bottom:calc(3% + env(safe-area-inset-bottom,0px));opacity:var(--image-two-opacity,0);pointer-events:none}

/* Front master: full original canvas, stationary contain sizing, opacity only.
   Retain the viewport coverage guard; no image masks or reveal transforms. */
.hero-set-figure{width:100%;aspect-ratio:auto}
.motion .hero-set-figure img{position:absolute;left:50%;top:50%;width:var(--front-crop-width);height:var(--front-crop-height);max-width:none;transform:translate(var(--front-crop-x),var(--front-crop-y));object-fit:contain}
.hero-callouts{display:none;opacity:0;visibility:hidden}
.motion .hero-callouts{display:block;position:absolute;z-index:4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 400ms ease-out,visibility 0s linear 400ms}
.motion .callouts-revealed .hero-callouts{opacity:1;visibility:visible;transition-duration:850ms,0s;transition-delay:0s,0s}
@media(prefers-reduced-motion:reduce){.motion .hero-callouts{transition:none}}
.hero-callouts svg{display:block;width:100%;height:100%;overflow:visible}
.hero-callouts path{fill:none;stroke:#bcbcbc;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-callouts text{fill:#ddd;font-family:Arial,Helvetica,sans-serif}
.hero-callouts .callout-name{font-size:24px;letter-spacing:1px}
.hero-callouts .callout-description{font-size:22px}
/* Reduce only the blank space before the OG introduction by 45%. */
.signup{padding-top:4.4rem}
@media(max-width:700px){.signup{padding-top:2.75rem}}
/* The philosophy copy follows the cinematic stage without an image slot. */
.story-frames,.motion.story-flow .story-frames{margin-top:0}
.motion .story-stage{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}
/* Rear imagery now lives only in the cinematic stage. Let the retained
   architecture copy determine its own height, without the image's scroll slot. */
.vector-chapter,.motion .vector-chapter,.motion.rear-flow .vector-chapter{height:auto}
.vector-stage,.motion .vector-stage,.motion.rear-flow .vector-stage{position:relative;height:auto;min-height:0;display:block;grid-template-columns:1fr;grid-template-rows:auto;gap:0}
.callout-card{position:absolute;margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:left;color:#eee}
.callout-card-right{text-align:right}
html[data-motion-state]:not([data-motion-state="scroll"]):not(.motion) .hero-callouts{display:block;opacity:1;visibility:visible;padding:1.5rem}
html:not(.motion) .hero-callouts svg{display:none}
html:not(.motion) .callout-card{position:static;width:auto!important;margin:0 0 1.5rem;text-align:left}
.callout-card h3{margin:0 0 .45rem;font:500 .75rem/1.35 Arial,Helvetica,sans-serif;letter-spacing:.025em;word-break:normal;overflow-wrap:normal;hyphens:none;-webkit-hyphens:none}
.callout-card p{margin:0;color:#aaa;font:400 .6875rem/1.45 Arial,Helvetica,sans-serif;overflow-wrap:break-word}
@media(min-width:701px){.callout-card h3{font-size:.875rem}.callout-card p{font-size:.8125rem}}
.motion .reveal-product .hero-set-figure{--image-one-safe-bottom:env(safe-area-inset-bottom,0px);transform:translate(var(--image-one-offset-x,0px),var(--image-one-offset-y,0px)) scale(var(--image-one-scale,1));will-change:auto;clip-path:none;mask-image:none;-webkit-mask-image:none}
/* Stable image coordinates; only black coverage tracks browser chrome. */
.motion .reveal-stage{height:var(--hero-anchor-height,var(--hero-height));min-height:0}
.motion .reveal-bleed{height:calc(max(var(--hero-anchor-height,var(--hero-height)),var(--hero-visible-height,0px)) + var(--hero-bleed))}
.motion .reveal-product{height:var(--hero-anchor-height,var(--hero-height))}
.motion .reveal-chapter{height:var(--hero-chapter-height,calc(var(--scene-vh,1vh) * 650))}
.motion .hero-callouts,.motion .callouts-revealed .hero-callouts{opacity:var(--callout-opacity,0);transition:none}
.socials.social-icons{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:clamp(4px,2vw,16px);align-items:center}
.socials.social-icons>a,.socials.social-icons>.social-pending{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;flex:0 0 44px;color:#ddd;background:transparent;border:0}
.socials.social-icons svg{display:block;width:24px;height:24px;fill:currentColor}
/* Preserve the existing header/wordmark alignment after removing its links. */
.header nav{min-height:calc(1.4rem + 1.65em)}
.header .menu-toggle{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin:0;padding:.7rem 0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:pointer}
.header .menu-toggle:hover{opacity:.75}
.header .menu-toggle:focus-visible{opacity:.85;outline:2px solid #fff;outline-offset:6px}
.ngp-menu-layer{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:2147483200;display:grid;place-items:center;background:transparent;pointer-events:auto}
.ngp-menu-items{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3dvh,32px);max-width:100%;padding:0 1.5rem}
.ngp-menu-item:not(:disabled){cursor:pointer}
.ngp-menu-item{display:block;min-height:44px;margin:0;padding:.25rem 0;border:0;border-radius:0;background:transparent;color:#fff;-webkit-text-fill-color:#fff;opacity:0;visibility:hidden;transition:opacity 300ms ease-out,visibility 0s linear 300ms;font:400 clamp(1.75rem,5vw,2.75rem)/1.25 Arial,Helvetica,sans-serif;letter-spacing:.045em;text-align:center;cursor:default}
.ngp-menu-layer::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.72);pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:opacity 500ms ease-out,-webkit-backdrop-filter 500ms ease-out,backdrop-filter 500ms ease-out}
.ngp-menu-layer.is-open::before{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ngp-menu-layer:not(.is-open){pointer-events:none}
.ngp-menu-item:nth-child(1){--menu-delay:100ms}
.ngp-menu-item:nth-child(2){--menu-delay:160ms}
.ngp-menu-item:nth-child(3){--menu-delay:220ms}
.ngp-menu-item:nth-child(4){--menu-delay:280ms}
.ngp-menu-item:nth-child(5){--menu-delay:340ms}
.ngp-menu-layer.is-open .ngp-menu-item{opacity:1;visibility:visible;transition:opacity 380ms ease-out var(--menu-delay,100ms),visibility 0s linear 0s}
.ngp-menu-items{width:min(760px,calc(100% - 48px));padding:0;align-items:stretch}
.ngp-menu-item{display:grid;grid-template-columns:2ch auto minmax(20px,1fr) 12px;align-items:center;column-gap:clamp(12px,2.2vw,28px);width:100%;min-height:52px;text-align:left;font-size:clamp(1.125rem,4.8vw,2.75rem)}
.ngp-menu-index{font-size:.75rem;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#888;-webkit-text-fill-color:currentColor}
.ngp-menu-label{white-space:nowrap;color:#dedede;-webkit-text-fill-color:currentColor;transition:color 200ms ease-out}
.ngp-menu-rail{height:1px;background:#fff;opacity:.22;transform:scaleX(.92);transform-origin:right center;transition:transform 240ms ease-out,opacity 240ms ease-out}
.ngp-menu-vector{width:12px;height:16px;fill:none;stroke:currentColor;stroke-width:1;opacity:.45;transition:opacity 240ms ease-out}
.ngp-menu-item:focus-visible{outline:1px solid #999;outline-offset:8px}
.ngp-menu-item:focus-visible .ngp-menu-label{color:#fff}
.ngp-menu-item:focus-visible .ngp-menu-rail{transform:scaleX(1);opacity:.6}
.ngp-menu-item:focus-visible .ngp-menu-vector{opacity:1}
@media(hover:hover){.ngp-menu-item:hover .ngp-menu-label{color:#fff}.ngp-menu-item:hover .ngp-menu-rail{transform:scaleX(1);opacity:.6}.ngp-menu-item:hover .ngp-menu-vector{opacity:1}}
@media(prefers-reduced-motion:reduce){.ngp-menu-label,.ngp-menu-rail,.ngp-menu-vector{transition:none}}
@media(prefers-reduced-motion:reduce){.ngp-menu-layer::before,.ngp-menu-item,.ngp-menu-layer.is-open .ngp-menu-item{transition:none}}

/* Separate Early Access action; primary navigation stays in place. */
.ngp-menu-items{position:relative}
.ngp-menu-access{position:absolute;top:100%;left:0;margin-top:clamp(36px,5dvh,56px);font-size:clamp(.875rem,3.6vw,1.375rem);--menu-delay:340ms;pointer-events:auto}
.ngp-menu-access-copy{display:flex;flex-direction:column;gap:8px}
.ngp-menu-access .ngp-menu-label{color:#fff}
.ngp-menu-access-note{font-size:.625rem;line-height:1.4;letter-spacing:.16em;color:#888;-webkit-text-fill-color:currentColor}
/* Mobile Image 1: lower only the rear render within its unchanged image box. */
@media(max-width:700px){.motion .hero-image-two img{object-position:50% calc(50% + 30px)}}
/* Mobile Image 2: adjust only the existing image translation, leaving callouts anchored. */
@media(max-width:700px){.motion .hero-set-figure img{transform:translate(var(--front-crop-x),calc(var(--front-crop-y) + 30px / var(--image-one-scale,1)))}}