/* V6 — legible product-first typography; imagery never sits behind the copy. */
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{font-family:Manrope,"Segoe UI",sans-serif;--text:#c4cddb;--dark-text:#c4cddb}
body,button,input,select,textarea{font-family:Manrope,"Segoe UI",sans-serif}
h1,h2,h3{font-family:Manrope,"Segoe UI",sans-serif;letter-spacing:-.04em}
.eyebrow,.hero-bottom,.detail-coordinate,.detail-visual figcaption,.hero-image figcaption,#motion-toggle,.steps li>span{font-family:Manrope,"Segoe UI",sans-serif}
.eyebrow{font-size:.875rem;font-weight:700;letter-spacing:.085em;line-height:1.6;color:#a8cbff}
.header nav>a:not(.button){font-size:.9375rem;font-weight:600;color:#d6dfea}
.wordmark{letter-spacing:-.05em;font-weight:700}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:2%;row-gap:20px;min-height:0;padding-top:56px;padding-bottom:24px;align-items:center}
.hero-copy{width:auto;min-width:0;pointer-events:auto}
.hero .badge{font-size:.875rem;font-weight:700;letter-spacing:.07em;color:#b8d4ff;line-height:1.6}
.hero h1{font-size:clamp(2.9rem,4.7vw,4.5rem);line-height:1.06;font-weight:750;letter-spacing:-.045em;margin:24px 0 20px;color:#fff}
.hero h1>span{color:#a9cbff;background:none;-webkit-text-fill-color:currentColor}
.kinetic-ready .hero.scene-visible h1>span{animation:none}
.kinetic-ready .hero-copy{animation:none}
.hero .hero-subtitle{font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:600;color:#f5f8ff;line-height:1.4;letter-spacing:-.02em}
.hero-range{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:20px 0}
.hero-range li{padding:8px 12px;border:1px solid #43536b;border-radius:6px;background:#101a2a;color:#f0f5ff;font-size:.875rem;line-height:1.5;font-weight:600}
.hero .lead{font-size:1.0625rem;line-height:1.65;font-weight:450;color:#c8d3e2;margin-top:18px;max-width:500px}
.hero .actions{gap:10px;margin-top:24px;flex-wrap:wrap}
.hero .actions .button{font-size:.9375rem;padding:14px 20px;min-height:50px;font-weight:700}
.hero .fit-note{font-size:.8125rem;line-height:1.65;color:#aebed3;margin:16px 0 0;max-width:470px}
.hero-image{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%;margin:0;opacity:1;overflow:hidden;min-width:0;align-self:center}
.hero-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;transform:none}
.hero-image::after{display:none}
.hero-image::before{inset:5% 0 20%;mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.hero-image figcaption{position:relative;inset:auto;font-size:.8125rem;line-height:1.6;color:#b7c6db;text-align:center;padding:16px 12px 0;letter-spacing:0;max-width:none}
.hero::before{opacity:.1;inset:15% -5% 5% 50%}
.hero::after{inset:5% -8% 5% 45%;opacity:.45}
.hero-bottom{position:relative;inset:auto;grid-column:1/-1;width:100%;margin-top:20px;padding-top:18px;font-size:.8125rem;letter-spacing:.02em;gap:16px;color:#b0c0d5;flex-wrap:wrap}
.hero-bottom>span:first-child{display:none}
.hero-bottom a{font-weight:600;color:#d0e2ff}
#motion-toggle{font-size:.8125rem;color:#d3e2f7;min-height:44px;font-weight:600}
.order-strip strong{font-weight:650}
.order-strip span{font-size:.9375rem;color:#b9c8dc}
.section-heading>p,.product-copy>p:not(.eyebrow),.detail-step>p:not(.eyebrow),.steps p,details p{color:#c0ccdc}
.product-copy h3{font-weight:700;letter-spacing:-.035em}
.product-card figcaption{font-family:Manrope,"Segoe UI",sans-serif;font-size:.8125rem;line-height:1.6}
.detail-coordinate,.detail-visual figcaption{font-size:.8125rem;letter-spacing:.025em;color:#b2c5df}
.kinetic-ready .detail-step:not(.is-active) h3{color:#d0d9e6}
.collection-note,.footer .trademark-note{color:#acbdd3;font-size:.8125rem;line-height:1.7}
.motion-ready .reveal:not(.in-view){opacity:1}
@media(max-width:1100px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:42px}
 .hero h1{font-size:clamp(2.8rem,4.6vw,3.5rem)}
 .hero .actions .button{font-size:.875rem;padding:13px 16px}
 .hero-range{gap:7px}.hero-range li{font-size:.8125rem;padding:7px 10px}
}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;gap:20px;padding-top:38px}
 .hero-copy{max-width:650px;width:100%}
 .hero h1{font-size:clamp(2.7rem,7.6vw,4.2rem)}
 .hero-range li{font-size:.875rem}
 .hero-image{width:100%;max-width:760px;margin:0 auto}
 .hero-image img{max-height:440px}
 .hero::after{inset:45% -10% 5% 10%}
 .hero::before{display:none}
 .hero-bottom{margin-top:0}
}
@media(max-width:720px){
 .hero{display:grid;padding-top:32px;padding-bottom:20px;gap:16px}
 .hero h1{font-size:clamp(2.5rem,9.4vw,4rem);line-height:1.08;margin:20px 0 16px}
 .hero .badge{font-size:.8125rem;letter-spacing:.045em}
 .hero .hero-subtitle{font-size:1.25rem}
 .hero .lead{font-size:1rem}
 .hero .actions{display:flex;flex-direction:row;gap:10px}
 .hero .actions .button{width:auto;font-size:.875rem;padding:13px 16px}
 .hero-range{margin:16px 0;gap:7px}
 .hero-range li{font-size:.8125rem;padding:7px 9px}
 .hero-image{width:100%;inset:auto;margin:4px 0 0}
 .hero-image img{width:100%;aspect-ratio:3/2;max-height:none}
 .hero-image figcaption{font-size:.8125rem;padding:8px 0 0}
 .hero-bottom{gap:10px;align-items:center;justify-content:space-between}
 .hero .fit-note{font-size:.8125rem;margin-top:13px}
 .hero .actions .button span{margin-left:6px}
}
@media(max-width:380px){.hero .actions{display:grid;grid-template-columns:1fr}.hero .actions .button{width:100%}.hero h1{font-size:2.4rem}.hero-range li{font-size:.8125rem}}