/* Product direction: quiet framing, tactile materials, one neon accent. */
:root{--rail-width:0px;--surface-ink:#151b16;--copy-soft:#aebca9;--line-soft:#59684f66}
.portfolio-nav{pointer-events:auto;display:flex;align-items:center;gap:28px;margin-right:60px;font-size:12px;color:#fff}
.portfolio-nav a{padding:12px 0;text-shadow:0 1px 8px #14241299}.portfolio-nav a:last-child{border-bottom:1px solid #ffffff66}
.reference-rail{width:180px;transform:translateX(calc(100% + 10px));transition:transform .3s ease;box-shadow:0 20px 60px #0003}
.reference-rail a,.reference-rail button{min-height:44px}
.rail-toggle{opacity:1!important;visibility:visible!important;top:18px;right:22px;width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#172013dc;font:11px monospace;letter-spacing:.5px}
.rail-open .rail-toggle{right:200px}.rail-open .reference-rail{transform:translateX(0)}
.hero.story-stage{width:calc(100% - 18px)}
.story-stage:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#10231655,transparent 65%)}
.story-stage h1{top:22%;left:6%;width:57%;text-align:left;font-size:clamp(50px,6.1vw,100px);line-height:1.02;letter-spacing:-4px}
.story-stage h1 span{font-family:Georgia,serif;letter-spacing:-3px;font-size:1.03em}
.story-stage .hero-copy{left:6%;bottom:12%;width:auto;max-width:380px;text-align:left}
.story-stage .hero-copy p{display:block;font-size:15px;line-height:1.9;color:#f2f5ec;margin:0 0 24px;text-shadow:0 1px 12px #20321c}
.story-stage .pill{min-height:48px;padding:6px 6px 6px 20px;border-radius:3px;gap:30px;font-weight:600}
.story-stage .hero-top{display:flex;position:absolute;left:6%;top:15%;z-index:5;color:#eaf2e1}
.story-stage .hero-top .eyebrow{font:11px monospace;letter-spacing:1.7px}.story-stage .hero-top .edition{display:none}
.scroll-cue{min-height:44px;bottom:1%;color:#fff}.cinematic-skip{padding:12px;bottom:10px;color:#fff}
.model-loading{inset:auto 6% 10%;text-align:left;font:12px monospace;color:#f2f5ec;padding:16px;background:#162015bf;max-width:320px;border-top:2px solid var(--lime)}
.render-error{position:absolute;inset:40% 10% auto;text-align:center;line-height:1.8}
.lineup-number{line-height:1.6}.lineup-colors button{min-width:44px;min-height:44px}.lineup-colors>div{gap:3px}
.lineup-colors>.lineup-color-name{font-size:11px!important}.lineup-product>p{min-height:2.8em}
.swatches{flex-wrap:wrap}.swatch{width:44px;height:44px;border-width:10px}
.music-toggle{left:auto;right:24px;bottom:24px;font-size:10px}
.music-status{left:auto;right:24px;bottom:78px}
/* Demonstration: pressure mechanics paired with a companion-app concept. */
.stride-lab{margin-top:110px;scroll-margin-top:95px}
.lab-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:38px}
.lab-eyebrow{font:11px monospace;letter-spacing:1.4px;color:var(--lime)}
.lab-intro h3{font:400 clamp(36px,4vw,60px)/1.18 'DM Sans','Noto Sans KR',sans-serif;letter-spacing:-2px;margin:24px 0 0}
.lab-intro h3 em{font-style:normal;color:var(--lime)}.lab-intro>p{font-size:14px;line-height:1.9;color:var(--copy-soft);margin:0}
.lab-shell{display:grid;grid-template-columns:1.06fr 1fr;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
.lab-pressure,.lab-session{padding:28px 32px}.lab-pressure{background:#111a15;border-right:1px solid var(--line-soft)}.lab-session{background:#1b241c}
.lab-panel-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font:10px/1.6 monospace;letter-spacing:.6px;color:#b4c4ac}
.lab-demo-label{color:var(--lime);padding:4px 7px;border:1px solid #baff0044;white-space:nowrap}
.lab-feet{height:340px;max-width:440px;margin:25px auto 16px}.lab-feet svg{width:100%;height:100%}.lab-feet text{fill:#98ad94;font:9px monospace;letter-spacing:2px}
.heat{opacity:.12;transition:opacity .7s ease}.stride-lab[data-phase="0"] .heat-heel,.stride-lab[data-phase="1"] .heat-mid,.stride-lab[data-phase="2"] .heat-toe{opacity:1}
.lab-phase-copy{min-height:118px}.lab-phase-copy>span{font:10px monospace;letter-spacing:1px;color:var(--lime)}.lab-phase-copy h4{font-size:22px;font-weight:500;letter-spacing:-.7px;margin:12px 0}.lab-phase-copy p{font-size:13px;line-height:1.8;color:var(--copy-soft);margin:0}
.lab-phase-controls{display:flex;gap:6px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.lab-phase-controls button{flex:1;border:1px solid #516149;background:transparent;color:#b7c5af;min-height:44px;font:11px 'DM Sans','Noto Sans KR',sans-serif;border-radius:3px;cursor:pointer;white-space:nowrap}
.lab-phase-controls button span{margin-left:5px}.lab-phase-controls [aria-pressed=true]{color:#151c0d;background:var(--lime);border-color:var(--lime)}.lab-phase-controls .lab-play{flex:1.2}
.lab-activities{display:flex;gap:7px;margin:24px 0}.lab-activities button{border:1px solid #516149;background:transparent;color:#b7c5af;border-radius:24px;padding:10px 17px;min-height:44px;cursor:pointer;font-size:12px}.lab-activities [aria-pressed=true]{background:#eaf0de;color:#25331d;border-color:#eaf0de}
.lab-app{max-width:400px;margin:0 auto;background:#ecf0e3;color:#26341f;padding:28px;border-radius:16px;box-shadow:0 20px 50px #0002}
.lab-app-heading{display:flex;justify-content:space-between;align-items:center;font:9px monospace;letter-spacing:.7px;color:#5a6c50}.lab-app-mark{font-size:30px;color:#476a28}
.lab-distance{display:flex;align-items:center;gap:16px;margin-top:14px}.lab-distance strong{font:500 clamp(54px,5vw,72px)/1.1 'DM Sans',sans-serif;letter-spacing:-4px}.lab-distance>span{font:9px/1.9 monospace;color:#67785a}
.lab-session-caption{font-size:12px;line-height:1.7;color:#5b6c50;margin:9px 0 22px}
.lab-chart{border-top:1px solid #c7cfba;padding-top:17px}.lab-chart>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font:9px monospace;color:#607253}.lab-chart strong{font-size:16px;color:#2d4320}.lab-chart svg{width:100%;height:72px;margin-top:14px}.lab-chart-range{display:flex;justify-content:space-between;font:8px monospace;color:#6c7e61}
.lab-app-metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:22px;padding-top:19px;border-top:1px solid #c7cfba}.lab-app-metrics>div{display:flex;flex-direction:column;gap:7px}.lab-app-metrics>div+div{border-left:1px solid #c7cfba;padding-left:20px}.lab-app-metrics span{font-size:11px;color:#5c6e50}.lab-app-metrics strong{font-size:23px;font-weight:500;letter-spacing:-1px}.lab-app-metrics small{font:9px monospace;color:#637957}
.lab-balance{margin-top:24px}.lab-balance>div:first-child{display:flex;justify-content:space-between;font-size:11px}.lab-balance strong{font:12px monospace}.lab-balance-track{height:5px;background:#b9c6a9;margin-top:12px}.lab-balance-track i{display:block;height:100%;background:#486d27;transition:width .35s ease}.lab-balance>span{display:flex;justify-content:space-between;font:8px monospace;color:#637957;margin-top:7px}
.lab-data-note{font-size:11px;line-height:1.8;color:#afbea5;margin:20px auto 0;max-width:400px}.lab-activity-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lab-shell button{transition:background .2s,border-color .2s,color .2s}.lab-shell button:hover{border-color:var(--lime)}.lab-shell button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media(max-width:1000px){.portfolio-nav{gap:18px}.lab-pressure,.lab-session{padding:24px}.lab-panel-top{font-size:9px}.lab-feet{height:300px}.lab-phase-copy h4{font-size:20px}.lab-phase-controls button span{display:none}}
@media(max-width:700px){
 .portfolio-nav{display:none}.rail-toggle{top:12px;right:16px}.hero.story-stage{width:calc(100% - 12px)}
 .story-stage h1{top:20%;left:4%;width:92%;text-align:center;font-size:10.3vw;letter-spacing:-2px}.story-stage h1 span{font-size:1.05em;letter-spacing:-2px}
 .story-stage .hero-top{top:13%;left:0;width:100%;justify-content:center}.story-stage .hero-top .eyebrow{font-size:9px;letter-spacing:1px}
 .story-stage .hero-copy{left:6%;right:6%;bottom:10%;max-width:none;text-align:center}.story-stage .hero-copy p{font-size:12px;line-height:1.7;margin-bottom:16px}
 .cinematic-skip{bottom:8px;font-size:8px}.scroll-cue{display:none}.story-stage:after{background:linear-gradient(180deg,#12221322,transparent 65%,#12221366)}
 .music-toggle{right:16px;left:auto;bottom:max(16px,env(safe-area-inset-bottom))}.music-status{right:16px;left:auto}
 .stride-lab{margin-top:72px}.lab-intro{display:block;margin-bottom:25px}.lab-intro>p{margin-top:22px;font-size:13px}.lab-intro h3{font-size:38px}
 .lab-shell{grid-template-columns:1fr}.lab-pressure{border-right:0;border-bottom:1px solid var(--line-soft)}.lab-pressure,.lab-session{padding:22px 18px}.lab-panel-top{font-size:8px;letter-spacing:.2px}
 .lab-feet{height:280px;margin-top:18px}.lab-phase-copy{min-height:110px}.lab-phase-copy h4{font-size:21px}.lab-phase-copy p{font-size:12px}.lab-phase-controls button span{display:inline}
 .lab-app{padding:24px 22px}.lab-activities{gap:6px}.lab-activities button{padding:10px 15px}.lineup-colors{gap:8px}.lineup-colors button{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.heat,.lab-balance-track i,.reference-rail,.lab-shell button{transition:none}}

/* The heading follows scroll progress; its layout box remains stable. */
.lab-intro-motion .lab-title-line{display:block;overflow:hidden;line-height:1.3;padding-bottom:.04em;margin-bottom:-.04em}
.lab-intro-motion .lab-letter{display:inline-block;opacity:var(--letter-reveal,1);transform:translateY(calc((1 - var(--letter-reveal,1))*.8em));will-change:auto}
.lab-intro-motion .lab-eyebrow{display:inline-block;opacity:var(--lab-heading-reveal,1);transform:translateY(calc((1 - var(--lab-heading-reveal,1))*12px))}
.lab-intro-motion>p{opacity:var(--lab-copy-reveal,1);transform:translateY(calc((1 - var(--lab-copy-reveal,1))*20px))}
@media(prefers-reduced-motion:reduce){.lab-intro-motion .lab-letter,.lab-intro-motion .lab-eyebrow,.lab-intro-motion>p{opacity:1;transform:none}}

/* Keep narrow screens inside the viewport, including the product detail nav. */
html{overflow-x:clip}
.detail-steps{width:auto;top:auto;padding:0;background:transparent;border:0}
.detail-steps button,.detail-steps a{min-height:44px}
@media(max-width:700px){.detail-steps{flex-wrap:wrap}.detail-steps a{margin-left:auto}}

/* Contrast follows the light section under the fixed header. */
header{transition:background .2s,color .2s}
.header-on-light header{background:#f0f1e9f2;border-bottom:1px solid #c5cdba;backdrop-filter:blur(12px)}
.header-on-light header .logo,.header-on-light .portfolio-nav{color:#23321c}
.header-on-light header .brand-mark{color:#547200}
.header-on-light .portfolio-nav a{text-shadow:none}
.header-on-light .portfolio-nav a:last-child{border-color:#526344}
@media(max-width:700px){
 /* A 44px music control shares the header; graphs and bottom links stay clear. */
 .music-toggle{top:max(12px,env(safe-area-inset-top));right:76px;bottom:auto;left:auto;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0;font-size:0;letter-spacing:0;border-radius:50%}
 .music-toggle span{font-size:21px;line-height:1}
 .music-toggle:after{content:'';position:absolute;right:6px;bottom:6px;width:5px;height:5px;border-radius:50%;background:#9aab8f}
 .music-toggle[aria-pressed=true]:after{background:#1b2c12}
 .music-status{top:66px;bottom:auto;right:16px;max-width:min(280px,calc(100vw - 32px))}
 .rail-open .music-toggle{right:76px;visibility:hidden}
 .rail-toggle{font-size:12px}
 .story-stage .hero-top .eyebrow,.cinematic-skip,.passing-photo figcaption{font-size:12px;letter-spacing:.3px}
 .lineup-eyebrow,.lineup-intro span,.lineup-number,.lineup-swipe-hint,.lineup-note,.lineup-link{font-size:12px;line-height:1.6;letter-spacing:0}
 .lineup-filters button,.lineup-shared-rows>div{font-size:12px}
 .lineup-colors>.lineup-color-name{font-size:12px!important}
 .lineup-colors>div{flex-wrap:wrap;max-width:100%;flex-shrink:1}
 .lab-eyebrow,.lab-panel-top,.lab-app-heading,.lab-distance>span,.lab-chart>div,.lab-chart-range,.lab-app-metrics small,.lab-balance>span,.lab-data-note,.lab-phase-copy>span,.lab-phase-controls button{font-size:12px;line-height:1.6;letter-spacing:0}
 .lab-panel-top{flex-wrap:wrap;gap:6px 12px}
 .lab-app-heading{gap:12px}.lab-app-heading>span:first-child{min-width:0;overflow-wrap:anywhere}
 .lab-distance{gap:10px}.lab-distance>span{font-size:12px;min-width:0;overflow-wrap:anywhere}
 .lab-feet text{font-size:18px}
 .lab-app-metrics span,.lab-balance>div:first-child{font-size:12px}
 .detail-heading>span,.detail-callouts article>span,.detail-disclaimer{font-size:12px;line-height:1.6;letter-spacing:0}
 .detail-steps{flex-wrap:nowrap;gap:4px}
 .detail-steps button,.detail-steps a{flex:1 1 0;min-width:0;font-size:12px;line-height:1.4;padding:8px 4px}
 .detail-steps a{flex-grow:1.6;display:flex;align-items:center;justify-content:center;margin-left:0;text-align:center}
 .photo-note,.spec-title,.footer-bottom,footer>a:last-of-type{font-size:12px;line-height:1.6;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){header{transition:none}}

@media(max-width:700px){header{background:#121a13ed;backdrop-filter:blur(12px)}.rail-open .rail-toggle{right:16px;top:12px}}