/* ============================================================
   MAKARA WORKS — shared site styles
   Dark, bronze-glow, bilingual (ZH/EN). ZENAQ-inspired calm.
   ============================================================ */
:root{
  --void:#08080A; --void-2:#0D0D10; --panel:#141418; --panel-2:#1A1A20;
  --bronze:#C9A07E; --bronze-bri:#EAC9A1; --bronze-deep:#8A6647; --walnut:#4A3527;
  --white:#F4F2ED; --fog:#CCC9C4; --fog-2:#97948F; --fog-3:#67645F;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17); --line-bronze:rgba(201,160,126,.34);
  --maxw:1320px; --gut:clamp(20px,5vw,80px);
  /* 字体自托管（见 assets/fonts.css 与 scripts/fonts.sh）。Inter 已移除：栈里 Noto Sans SC
     自带拉丁字形，Inter 永远轮不到，实测整站下载 0 字节。衬线的下一档换成同样自托管的
     Noto Sans SC，这样窄字表之外的字不会跳到系统衬线体。 */
  --display:'Michroma',sans-serif; --sans:'Noto Sans SC',system-ui,sans-serif; --serif:'Noto Serif SC','Noto Sans SC',serif;
  --jp:'Noto Sans JP','Noto Sans SC',system-ui,sans-serif; --jp-serif:'Noto Serif JP','Noto Serif SC',serif;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:1s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--void);color:var(--fog);font-family:var(--sans);font-weight:300;line-height:1.8;
  letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* 站上没有真正的 700 字面（自托管子集只到 400，之前走 Google 也只到 500）——
   任何没显式设字重的标题或 <b> 都会被浏览器合成粗体、笔画发糊。统一兜底：
   标题跟 body 一样 300，<b> 用 400。组件里显式写了字重的（如 .cta-band h2 的 100）照旧生效。 */
h1,h2,h3,h4,h5,h6{font-weight:300}
b,strong{font-weight:400}
::selection{background:var(--bronze);color:#0a0a0a}

/* faint grain for depth */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--display);font-size:clamp(10px,1vw,12px);letter-spacing:.32em;text-transform:uppercase;color:var(--bronze)}
.latin{font-family:var(--display);letter-spacing:.18em;text-transform:uppercase}

/* trilingual visibility (ZH / EN / JA) */
html[data-lang="zh"] .en,html[data-lang="zh"] .ja{display:none}
html[data-lang="en"] .zh,html[data-lang="en"] .ja{display:none}
html[data-lang="ja"] .zh,html[data-lang="ja"] .en{display:none}
:lang(en),.en{font-family:var(--sans)}
:lang(ja),.ja{font-family:var(--jp)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important};html{scroll-behavior:auto}}

/* ---------- NAV ---------- */
/* 3-col grid (1fr auto 1fr) so the centre nav block is TRUE-centred on the viewport,
   independent of the differing logo / right-group widths (flex space-between pushed it left). */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(14px,2.2vw,24px) var(--gut);transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent}
.nav > a{justify-self:start}
.nav.solid{background:rgba(8,8,10,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
/* faint top scrim so nav stays legible over bright hero content (fades once the bar goes solid) */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:148px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.16) 46%,transparent 100%);transition:opacity .5s var(--ease)}
.nav.solid::before{opacity:0}
.nav-logo{height:clamp(30px,3.1vw,44px);width:auto;opacity:.96}
.nav-mid{display:flex;gap:clamp(16px,2.2vw,34px);align-items:center;justify-self:center}
.nav-item{position:relative}
.nav-link{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:6px 0;transition:color .3s;cursor:pointer}
.nav-item:hover > .nav-link,.nav-link:focus-visible{color:var(--white)}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .35s var(--ease)}
.nav-item:hover > .nav-link::after,.nav-link:focus-visible::after{right:0}

/* nav label flip: tabs read English; in 中文/日本語 mode, hovering a tab flips it up to the
   local label (English mode never flips). EN stays in flow so the column width never jumps. */
.nl{position:relative;display:inline-block;overflow:hidden;line-height:1.25}
.nl-en{display:inline-block;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.nl-zh,.nl-ja{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;letter-spacing:.06em;
  transform:translateY(115%);opacity:0;transition:transform .42s var(--ease),opacity .42s var(--ease)}
html[data-lang="zh"] .nav-item:hover .nl-en,html[data-lang="ja"] .nav-item:hover .nl-en{transform:translateY(-115%);opacity:0}
html[data-lang="zh"] .nav-item:hover .nl-zh{transform:translateY(0);opacity:1}
html[data-lang="ja"] .nav-item:hover .nl-ja{transform:translateY(0);opacity:1}

/* PRODUCT caret + hover/focus dropdown */
.nl-caret{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);opacity:.75}
.nav-dd:hover .nl-caret,.nav-dd:focus-within .nl-caret{transform:translateY(0) rotate(225deg)}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding-top:16px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease)}
.nav-dd:hover .nav-menu,.nav-dd:focus-within .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-menu-inner{display:flex;flex-direction:column;min-width:214px;padding:8px;
  background:rgba(16,16,20,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 26px 60px rgba(0,0,0,.55)}
.nav-menu-inner a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:8px;transition:background .25s}
.nav-menu-inner a:hover{background:rgba(255,255,255,.05)}
.nm-name{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);transition:color .25s}
.nav-menu-inner a:hover .nm-name{color:var(--bronze-bri)}
.nm-desc{font-size:11px;letter-spacing:.04em;color:var(--fog-3)}
.nav-right{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);justify-self:end}
/* online-store pill (top-right CTA, ZENAQ-style outline; store launching later) */
.store-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:100px;
  padding:9px 20px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);white-space:nowrap;cursor:default;transition:border-color .4s var(--ease),color .4s}
.store-btn:hover{border-color:var(--line-bronze)}
.store-btn i{font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--fog-3);
  padding-left:10px;border-left:1px solid var(--line-2)}
.lang{display:flex;gap:2px;font-family:var(--display);font-size:11px;letter-spacing:.1em}
.lang button{padding:6px 7px;color:var(--fog-3);transition:color .3s}
.lang button.on{color:var(--bronze)}
.lang span{color:var(--fog-3);align-self:center}
.burger{display:none}
@media(max-width:820px){
  .nav-mid{display:none}
  .store-btn{display:none}
  .burger{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center}
  .burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5}
}
/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:120;background:rgba(8,8,10,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.sheet.open{opacity:1;visibility:visible}
.sheet a{font-family:var(--display);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);padding:16px 0;border-bottom:1px solid var(--line)}
.sheet a.sheet-sub{font-size:13px;letter-spacing:.14em;color:var(--fog-2);padding:11px 0 11px 22px}
.sheet .close{position:absolute;top:24px;right:var(--gut);width:36px;height:36px}
.sheet .close svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.4}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);border:1px solid var(--line-2);border-radius:100px;padding:15px 28px;
  transition:border-color .3s,color .3s,background .3s}
.btn:hover{border-color:var(--bronze);color:var(--bronze)}
.btn .arrow{width:16px;height:1px;background:currentColor;position:relative}
.btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn-fill{background:var(--white);color:#000;border-color:var(--white)}
.btn-fill:hover{background:var(--bronze);border-color:var(--bronze);color:#000}

/* section heads */
.sec{padding-block:clamp(72px,11vh,160px)}

/* full-screen panels (.snap) are positioned by the GSAP Observer snap in script.js;
   no CSS scroll-snap — it would fight the scripted scroll animation */
/* visible keyboard focus (mouse focus stays subtle) */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.news input:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(96% 76% at 50% 50%,rgba(8,8,10,.52) 0%,rgba(8,8,10,.2) 46%,transparent 74%),
  linear-gradient(180deg,rgba(8,8,10,.5) 0%,transparent 24%,transparent 55%,rgba(8,8,10,.9) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 var(--gut)}
.hero-logo{height:clamp(32px,3.4vw,56px);width:auto;margin:0 auto;filter:drop-shadow(0 4px 24px rgba(0,0,0,.75))}
.hero-tag{margin-top:clamp(16px,2.2vw,28px);font-family:var(--sans);font-weight:100;color:#fff;
  font-size:clamp(20px,2.6vw,38px);letter-spacing:.14em;line-height:1.32;
  text-shadow:0 1px 28px rgba(0,0,0,.88),0 0 3px rgba(0,0,0,.6)}
.hero-tag .en{font-weight:200;font-style:italic;font-family:var(--serif);letter-spacing:.02em}
.hero-sub{margin-top:18px;font-family:var(--display);font-size:clamp(9px,1vw,11px);letter-spacing:.34em;text-transform:uppercase;color:var(--bronze-bri)}
.hero-cue{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--display);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero-cue .stem{width:1px;height:42px;background:linear-gradient(var(--bronze),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-dots{position:absolute;right:var(--gut);bottom:clamp(22px,4vh,40px);z-index:2;display:flex;gap:10px}
.hero-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s,transform .3s}
.hero-dots button.on{background:var(--bronze);transform:scale(1.2)}

/* ---------- FILM ---------- */
.film{background:var(--void-2);border-block:1px solid var(--line)}
/* two-column: copy on the left, film on the right (video ≈ 2/3 width, gutter kept) */
.film-grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,4vw,64px);align-items:center;max-width:none}
.film-copy .eyebrow{display:block;margin-bottom:18px}
.film-copy h2{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(24px,2.5vw,36px);letter-spacing:.04em;line-height:1.4}
.film-copy p{margin-top:clamp(16px,1.8vw,24px);font-family:var(--serif);font-weight:300;font-size:clamp(14px,1.4vw,17px);line-height:1.9;color:var(--fog)}
.film .player{max-width:none}   /* fill the 2/3 column (override the 980px cap) */
@media(max-width:900px){.film-grid{grid-template-columns:1fr;gap:30px;text-align:center;max-width:var(--maxw)}.film-copy p{margin-inline:auto;max-width:52ch}}
.player{position:relative;width:100%;max-width:980px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:#000;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.player video{width:100%;height:100%;object-fit:cover;display:block}
.player .poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .5s}
.player .playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .4s}
.player .playbtn span{width:78px;height:78px;border-radius:50%;background:rgba(18,18,18,.4);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transition:transform .3s,background .3s}
.player .playbtn:hover span{transform:scale(1.08);background:rgba(201,160,126,.3)}
.player .playbtn svg{width:24px;height:24px;fill:#fff;margin-left:4px}
.player.playing .playbtn,.player.playing .poster{opacity:0;pointer-events:none}

/* ---------- RANGE ---------- */
.range{position:relative}
/* featured KRAKEN Pro */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,80px);margin-top:clamp(36px,5vw,64px)}
.feature-media{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#111}
.feature-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.feature:hover .feature-media img{transform:scale(1.03)}
.feature-mark{font-family:var(--display);font-size:clamp(26px,3.4vw,44px);letter-spacing:.06em;color:var(--white)}
.feature-mark sup{font-size:.4em;vertical-align:super;color:var(--bronze);margin-left:.2em}
.feature-zh{display:block;margin-top:8px;font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.4vw,18px);color:var(--bronze)}
.feature-price{margin-top:18px;font-family:var(--display);font-size:14px;letter-spacing:.12em;color:var(--fog)}
.feature-body{margin-top:18px;max-width:440px;color:var(--fog)}
.feature-specs{display:flex;gap:clamp(20px,3vw,40px);margin-top:26px;flex-wrap:wrap}
.feature-specs div{}
.feature-specs b{display:block;font-family:var(--display);font-size:clamp(20px,2.2vw,28px);color:var(--bronze);letter-spacing:.02em}
.feature-specs span{font-size:12px;color:var(--fog-2);letter-spacing:.04em}
.feature-cta{margin-top:32px}
@media(max-width:820px){.feature{grid-template-columns:1fr;gap:30px}.feature-media{order:-1}}

/* accessory pair */
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);margin-top:clamp(28px,4vw,52px)}
.acc{position:relative;display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);
  transition:transform .5s var(--ease),border-color .5s}
.acc:hover{transform:translateY(-6px);border-color:var(--line-bronze)}
.acc-media{aspect-ratio:4/5;overflow:hidden}
.acc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.acc:hover .acc-media img{transform:scale(1.05)}
.acc-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.4vw,30px);
  background:linear-gradient(transparent,rgba(8,8,10,.86) 60%)}
.acc-mark{font-family:var(--display);font-size:clamp(16px,1.8vw,22px);letter-spacing:.08em;color:var(--white)}
.acc-mark sup{font-size:.45em;vertical-align:super;color:var(--bronze);margin-left:.2em}
.acc-zh{display:block;margin-top:6px;font-size:13px;color:var(--bronze)}
.acc-desc{margin-top:8px;font-size:12.5px;color:var(--fog-2);line-height:1.6;max-width:34ch}
@media(max-width:560px){.acc-grid{grid-template-columns:1fr}}

/* ---------- BRAND ---------- */
.brand{background:var(--void-2);border-block:1px solid var(--line);text-align:center}
.brand .wrap{max-width:880px}
.brand .eyebrow{display:block;margin-bottom:22px}
.brand h2{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(24px,3.6vw,46px);line-height:1.4;letter-spacing:.06em}
.brand p{margin:26px auto 0;max-width:600px;font-family:var(--serif);font-weight:300;font-size:clamp(15px,1.5vw,18px);line-height:1.95;color:var(--fog)}
.brand .btn{margin-top:38px}

/* ---------- NEWSLETTER ---------- */
.news{text-align:center}
.news .wrap{max-width:680px}
.news .eyebrow{display:block;margin-bottom:18px}
/* headline stays on ONE line — vw-driven size shrinks it to fit narrow screens
   (nowrap also stops SplitText/reveal-lines from baking in a frozen 2-line break) */
.news h2{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(21px,4.4vw,44px);letter-spacing:.04em;white-space:nowrap}
.news p{margin-top:18px;color:var(--fog)}
.news form{margin-top:38px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.news input{flex:1;min-width:260px;max-width:420px;background:transparent;border:1px solid var(--line-2);border-radius:100px;
  padding:16px 24px;color:var(--white);font-family:var(--sans);font-size:14px;transition:border-color .3s}
.news input::placeholder{color:var(--fog-3)}
.news input:focus{outline:none;border-color:var(--bronze)}
.news .ok{margin-top:24px;color:var(--bronze);font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:none}
.news.done .ok{display:block}
.news.done form{display:none}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px);background:var(--void)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,60px);padding-bottom:clamp(36px,4vw,52px);border-bottom:1px solid var(--line)}
.foot-logo{height:48px;opacity:.92}
/* centre the logo vertically against the link columns (align-items:flex-start keeps the
   img left-aligned and at its natural size; justify-content:center drops it to the middle) */
.foot-logo-col{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.fcol h5{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog-3);margin-bottom:16px}
.fcol a,.fcol span{display:block;font-size:13.5px;color:var(--fog);margin-bottom:11px;transition:color .3s}
.fcol a:hover{color:var(--bronze)}
.fcol .soon{color:var(--fog-3);font-size:12px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:28px}
.foot-bottom span,.foot-bottom a{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-3)}
.foot-bottom a{transition:color .3s}
.foot-bottom a:hover{color:var(--bronze)}
@media(max-width:720px){.foot-top{grid-template-columns:1fr 1fr}.foot-logo-col{grid-column:1/-1}}

/* ============================================================
   RANGE / FLAGSHIP — mockup-style vitrine + info, black section
   ============================================================ */
.kfeature{display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
@media(max-width:900px){.kfeature{grid-template-columns:1fr;gap:38px}}

/* left — bare product detail on the section, no frame / no background */
.kf-stage{position:relative;aspect-ratio:587/1287;max-height:84vh;margin:0 auto;
  display:flex;align-items:center;justify-content:center}
.kf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .6s var(--ease)}
.kf-img.on{opacity:1}
.kf-stage.placeholder .kf-img{opacity:0}
/* placeholder (colour sample not yet shot) */
.kf-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:24px}
.kf-stage.placeholder .kf-ph{display:flex}
.kf-ph::before{content:"";position:absolute;width:clamp(120px,22vw,168px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line-bronze);opacity:.4}
.kf-ph-name{position:relative;font-family:var(--sans);font-weight:200;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.08em;color:var(--fog-2)}
.kf-ph-note{position:relative;font-family:var(--display);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fog-3)}
.kf-label{position:absolute;left:6px;bottom:6px;z-index:3;font-family:var(--display);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fog-3)}
.kf-stage.placeholder .kf-label{display:none}
.kf-label .latin{color:var(--fog)}

/* right info */
.kf-eyebrow{display:flex;align-items:center;gap:14px}
.kf-eyebrow .latin{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.kf-pill{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--bronze-bri);
  border:1px solid var(--line-bronze);border-radius:100px;padding:4px 12px}
.kf-title{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(30px,4vw,52px);letter-spacing:.05em;margin:18px 0 0}
.kf-desc{margin-top:18px;max-width:440px;color:var(--fog)}
.kf-block{margin-top:clamp(24px,3vw,38px)}
.kf-sub{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fog-3);
  padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:18px;position:relative}
.kf-sub::before{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:1px;background:var(--bronze)}
.kf-swatches{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px)}
.kf-sw{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;background:none;border:none;position:relative}
.kf-sw>span{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);transition:transform .3s,box-shadow .3s}
.kf-sw>em{font-style:normal;font-size:12px;color:var(--fog-2);letter-spacing:.04em;transition:color .3s}
.kf-sw:hover>span{transform:scale(1.06)}
.kf-sw.on>span{box-shadow:0 0 0 3px var(--void),0 0 0 4px var(--bronze)}
.kf-sw.on>em{color:var(--white)}
/* colours awaiting a final sample shot */
.kf-sw.soon>span{opacity:.5;border-style:dashed}
.kf-sw.soon>em{opacity:.62}
.kf-sw.soon::after{content:"";position:absolute;top:-2px;right:50%;transform:translateX(20px);
  width:6px;height:6px;border-radius:50%;background:var(--fog-3)}
.kf-specs{margin:0}
.kf-specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.kf-specs dt{font-family:var(--display);font-size:11px;letter-spacing:.14em;color:var(--fog-3)}
.kf-specs dd{font-size:14px;color:var(--fog);text-align:right}
.kf-more-row{display:none!important}
.kf-specs.open .kf-more-row{display:flex!important}
.kf-more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fog-2);letter-spacing:.04em;background:none;border:none}
.kf-more:hover{color:var(--bronze)}
.kf-more i{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);display:inline-block;margin-bottom:3px;transition:transform .3s}
.kf-more[aria-expanded="true"] i{transform:rotate(-135deg);margin-bottom:-1px}
.kf-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,3.5vw,44px)}
@media(max-width:480px){.kf-actions{flex-direction:column}.kf-actions .btn{justify-content:center}}

/* ---------- full-screen snap: each screen = one viewport, one wheel = one stop ----------
   Single source of truth. Active ONLY when a viewport can hold a full screen AND the
   user hasn't asked to reduce motion — otherwise the page is normal flowing sections. */
@media (min-width:901px) and (min-height:800px) and (prefers-reduced-motion:no-preference){
  /* screens 2–4 match the hero's height, content vertically centred */
  .film.snap,.range.snap,.brand.snap{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(80px,10vh,100px);padding-bottom:clamp(38px,5vh,56px)}
  /* RANGE centres when it fits but stays scrollable downward when "All specs" is open
     (margin auto centres without the justify-content overflow-clipping trap) */
  .range.snap{justify-content:flex-start;padding-top:clamp(70px,9vh,92px);padding-bottom:clamp(28px,4vh,44px)}
  .range.snap > .wrap{margin-block:auto}
  /* closing screen: newsletter centred, footer pinned to its base */
  .closing{min-height:100svh;display:flex;flex-direction:column}
  .closing .news{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
  .closing .foot{flex:0 0 auto}
  /* compression so each screen fits one viewport */
  /* RANGE right column — compact enough that the EXPANDED spec list (all 8 rows)
     still fits one viewport alongside the colourways. Smaller type + tighter rhythm,
     vh-aware spacing so it self-tightens on shorter screens. */
  .range.snap .kf-title{font-size:clamp(22px,2.4vw,34px);margin-top:clamp(6px,1vh,12px)}
  .range.snap .kf-desc{margin-top:clamp(10px,1.5vh,18px);font-size:clamp(13px,1vw,14px);line-height:1.62;max-width:430px}
  .range.snap .kf-block{margin-top:clamp(13px,2.4vh,30px)}
  .range.snap .kf-sub{padding-bottom:clamp(7px,1vh,11px);margin-bottom:clamp(9px,1.4vh,16px)}
  .range.snap .kf-swatches{gap:clamp(14px,1.8vw,26px)}
  .range.snap .kf-sw>span{width:38px;height:38px}
  .range.snap .kf-sw{gap:9px}
  .range.snap .kf-sw>em{font-size:12px}
  .range.snap .kf-specs>div{padding:clamp(5px,0.9vh,11px) 0}
  .range.snap .kf-specs dt{font-size:11px}
  .range.snap .kf-specs dd{font-size:14px}
  .range.snap .kf-more{margin-top:clamp(8px,1.1vh,14px);font-size:12px}
  .range.snap .kf-actions{margin-top:clamp(16px,2.2vh,30px)}
  .closing .news{padding-block:clamp(20px,3.5vh,40px)}
  .closing .foot{padding-block:clamp(24px,3vw,40px)}
}

/* ============ SUBPAGES — KRAKEN Pro / AEGIS / KLAW / Support / About ============
   Reuses the shared shell (nav, footer, .wrap, .sec, .eyebrow, .btn, .kf-specs, reveals).
   Content pages: normal free scroll (no .snap), so the light snap stays off here. */

/* active nav item (current page) keeps the underline + white label */
.nav-link.on{color:var(--white)}
.nav-link.on::after{right:0}

/* page hero — shorter than the home hero, image + scrim, title bottom-left (or centred) */
.page-hero{position:relative;min-height:60vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(124px,20vh,210px) var(--gut) clamp(46px,7vh,82px);overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero.center{justify-content:center;text-align:center;align-items:center}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(180deg,rgba(8,8,10,.74) 0%,rgba(8,8,10,.4) 42%,rgba(8,8,10,.93) 100%)}
.page-hero > *:not(.page-hero-bg){position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;width:100%}
.page-hero.center > *:not(.page-hero-bg){margin-inline:auto}
.page-eyebrow{font-family:var(--display);font-size:clamp(10px,1vw,12px);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);display:block;margin-bottom:clamp(14px,2vw,22px)}
.page-title{font-family:var(--sans);font-weight:100;color:var(--white);letter-spacing:.03em;line-height:1.14;font-size:clamp(34px,6vw,74px)}
.page-title .latin{font-family:var(--display);font-weight:400;letter-spacing:.05em;font-size:.92em}
.page-sub{margin-top:clamp(14px,2vw,22px);max-width:58ch;color:var(--fog);font-size:clamp(15px,1.4vw,18px);line-height:1.85}
.page-hero.center .page-sub{margin-inline:auto}

/* KLAW hero — full-height; the exploded render is shown whole (contain), its black
   ground blends into the page so there is no visible frame. Title sits bottom-left. */
.klaw-hero{position:relative;height:100vh;min-height:600px;overflow:hidden;background:var(--void);border-bottom:1px solid var(--line)}
.klaw-hero .kh-bg{position:absolute;inset:0;z-index:0}
.klaw-hero .kh-bg img{width:100%;height:100%;object-fit:contain;object-position:50% 46%;display:block}
.klaw-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(118% 92% at 100% 0%, rgba(8,8,10,.64) 0%, rgba(8,8,10,.22) 38%, rgba(8,8,10,0) 64%),
    linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,0) 62%,rgba(8,8,10,.4) 84%,rgba(8,8,10,.9) 100%)}
/* hero copy sits in the upper-right negative space of the exploded render */
.klaw-hero .kh-copy{position:absolute;z-index:2;top:clamp(104px,17vh,200px);right:clamp(48px,11vw,250px);left:auto;bottom:auto;
  width:min(440px,46vw);margin:0;padding:0}
.klaw-hero .page-eyebrow{margin-bottom:clamp(12px,1.6vw,18px)}
.klaw-hero .page-title{font-size:clamp(46px,8vw,104px);letter-spacing:.06em}
.klaw-hero .page-sub{max-width:46ch}
@media(max-width:860px){
  .klaw-hero .kh-bg img{object-fit:cover;object-position:32% 42%}
  .klaw-hero::after{background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.15) 34%,rgba(8,8,10,.7) 76%,rgba(8,8,10,.97) 100%)}
  .klaw-hero .kh-copy{top:auto;bottom:clamp(40px,8vh,84px);right:auto;left:0;width:100%;padding-inline:var(--gut)}
}

/* content section rhythm */
.pg{padding-block:clamp(64px,10vh,128px)}
.pg + .pg{border-top:1px solid var(--line)}
.lede{font-family:var(--serif);font-weight:300;color:var(--white);font-size:clamp(20px,2.7vw,34px);line-height:1.5;letter-spacing:.01em;max-width:26ch}
.prose{max-width:62ch;color:var(--fog);line-height:1.95}
.prose p + p{margin-top:1.15em}

/* KRAKEN Pro overview — editorial lead + supporting line, aligned under the title */
.overview .ov-eyebrow{display:block;margin-bottom:clamp(18px,2.6vw,30px)}
.ov-lead{font-family:var(--serif);font-weight:300;color:var(--white);font-size:clamp(20px,2.3vw,29px);line-height:1.62;letter-spacing:.01em;max-width:620px}
.ov-text{margin-top:clamp(18px,2.6vw,30px);font-weight:300;color:var(--fog-2);font-size:clamp(15px,1.15vw,17px);line-height:1.95;max-width:520px}

/* KRAKEN Pro first screen — copy left, product render fills the right half (dark-on-dark) */
.hero-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;height:100vh;min-height:600px;border-bottom:1px solid var(--line)}
/* copy sits shifted into the open centre-right of its half (not flush to the left edge) */
.hs-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,15vh,150px) clamp(20px,2.5vw,48px) clamp(56px,9vh,108px) max(44px, min(20vw, calc(100% - 400px)))}
.hs-eyebrow{font-family:var(--display);font-size:clamp(10px,1vw,12px);letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);display:block;margin-bottom:clamp(16px,2.2vw,24px)}
.hs-title{font-family:var(--sans);font-weight:100;color:#fff;font-size:clamp(40px,5vw,66px);letter-spacing:.03em;line-height:1.05;margin:0}
.hs-title .latin{font-family:var(--display);font-weight:400;letter-spacing:.04em;font-size:.82em}
.hs-title .tm{font-size:.34em;vertical-align:top;position:relative;top:.16em;font-weight:300;letter-spacing:0;margin-left:.05em}
.hs-lead{font-family:var(--serif);font-weight:300;color:var(--white);font-size:clamp(16px,1.45vw,21px);line-height:1.7;margin-top:clamp(24px,3vw,38px);max-width:44ch}
.hs-text{margin-top:clamp(14px,1.6vw,20px);font-weight:300;color:var(--fog-2);font-size:clamp(14px,1.05vw,16px);line-height:1.9;max-width:42ch}
.hs-media{order:2;margin:0;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 17%,#000 100%);
  mask-image:linear-gradient(to left,transparent 0,#000 17%,#000 100%)}
.hs-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;height:auto;min-height:0}
  .hs-media{order:0;height:52vh;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%)}
  .hs-copy{order:1;padding:clamp(34px,8vw,54px) clamp(26px,7vw,46px) clamp(48px,11vw,66px)}
}

/* alternating image / copy rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center}
.frow + .frow{margin-top:clamp(56px,9vh,118px)}
.frow.flip .frow-media{order:2}
.frow-media{aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.frow-media img{width:100%;height:100%;object-fit:cover}
.frow .eyebrow{display:block;margin-bottom:14px}
.frow h3{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(22px,2.6vw,34px);letter-spacing:.03em;line-height:1.32}
.frow p{margin-top:16px;color:var(--fog);line-height:1.9;max-width:48ch}
@media(max-width:860px){.frow{grid-template-columns:1fr;gap:26px}.frow.flip .frow-media{order:0}}

/* three-up cards (highlights / modules / support topics) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.card{padding:clamp(22px,3vw,34px);background:var(--panel);border:1px solid var(--line);border-radius:12px}
.card h4{font-family:var(--display);font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:12px}
.card p{color:var(--fog-2);font-size:14px;line-height:1.85}
.card a.cardlink{display:inline-flex;margin-top:16px;font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-bri)}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* FAQ (support) */
.faq{max-width:780px}
.faq-item{border-bottom:1px solid var(--line);padding:clamp(16px,2.4vw,26px) 0}
.faq-q{font-family:var(--sans);font-weight:400;color:var(--white);font-size:clamp(15px,1.5vw,18px);letter-spacing:.02em}
.faq-a{margin-top:10px;color:var(--fog-2);line-height:1.9;max-width:66ch}

/* section heading block */
.pg-head{margin-bottom:clamp(32px,5vh,60px)}
.pg-head h2{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(26px,3.4vw,46px);letter-spacing:.03em;line-height:1.25;margin-top:10px}
.pg-head .eyebrow{display:block}

/* closing CTA band */
.cta-band{text-align:center;padding:clamp(60px,11vh,140px) var(--gut);border-top:1px solid var(--line)}
.cta-band h2{font-family:var(--sans);font-weight:100;color:var(--white);font-size:clamp(26px,3.8vw,48px);letter-spacing:.04em;line-height:1.28}
.cta-band p{margin-top:16px;color:var(--fog-2);max-width:52ch;margin-inline:auto}
.cta-band .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,4vw,42px)}
/* contact line (replaces button): email is an inline bronze link, not a pill */
.cta-band .cta-contact{max-width:52ch;margin-inline:auto;color:var(--fog);font-weight:300;font-size:clamp(15px,1.4vw,17px);line-height:1.95;text-wrap:balance}
.cta-band .cta-contact a{color:var(--bronze-bri);white-space:nowrap;border-bottom:1px solid var(--line-bronze);padding-bottom:1px;transition:color .3s,border-color .3s}
.cta-band .cta-contact a:hover{color:var(--white);border-color:var(--bronze)}

/* detail panels — ONE high-res render per screen + an explanation, image/text split,
   alternating sides. Each panel is roughly one viewport tall. */
.detail-panel{border-top:1px solid var(--line)}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;height:100vh;min-height:600px}
/* image fills its whole half of the screen (full-bleed cover); inner edge feathers into the black */
.dp-media{order:1;margin:0;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(to left,transparent 0,#000 16%,#000 100%)}
.dp-media img{width:100%;height:100%;object-fit:cover;display:block}
.dp-copy{order:2;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(40px,6vh,96px) clamp(28px,4vw,56px)}
/* keep the copy as a left-aligned column, but centre that whole column within its half
   (so it reads centred whether the image is on the left or the right) */
.dp-copy > *{width:100%;max-width:clamp(340px,30vw,460px)}
/* panel 01's second title line (是封印北大西洋暖流的机械冰川。, 14 chars) is longer than the
   other panels' — give just this panel a wider copy column so it holds on one line (two lines total),
   keeping its title + body left-aligned together. Other panels keep the narrower default. */
#detail .dp-copy > *{max-width:clamp(340px,42vw,560px)}
.detail-panel.flip .dp-media{order:2;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 100%)}
.detail-panel.flip .dp-copy{order:1}
/* --soft: a wider, eased feather for renders that stay bright right up to the inner
   edge (no built-in vignette). The 16% linear ramp cuts those off too abruptly; this
   eases the metal into the black over ~40% so it reads like a natural falloff. */
.dp-media--soft{
  -webkit-mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.10) 9%,rgba(0,0,0,.34) 18%,rgba(0,0,0,.66) 27%,rgba(0,0,0,.9) 34%,#000 40%,#000 100%);
  mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.10) 9%,rgba(0,0,0,.34) 18%,rgba(0,0,0,.66) 27%,rgba(0,0,0,.9) 34%,#000 40%,#000 100%)}
.detail-panel.flip .dp-media--soft{
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.10) 9%,rgba(0,0,0,.34) 18%,rgba(0,0,0,.66) 27%,rgba(0,0,0,.9) 34%,#000 40%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.10) 9%,rgba(0,0,0,.34) 18%,rgba(0,0,0,.66) 27%,rgba(0,0,0,.9) 34%,#000 40%,#000 100%)}
.dp-eyebrow{font-family:var(--display);font-size:clamp(10px,1vw,12px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze);display:flex;align-items:center;gap:13px;margin-bottom:clamp(14px,2vw,20px)}
.dp-eyebrow::before{content:attr(data-n);color:var(--fog-3);letter-spacing:.1em;font-size:.9em}
.dp-copy h2{font-family:var(--sans);font-weight:200;color:var(--white);font-size:clamp(22px,2.7vw,36px);letter-spacing:.02em;line-height:1.34;text-wrap:balance}
.dp-copy p{margin-top:clamp(16px,2vw,26px);color:var(--fog-2);line-height:1.95}
@media(max-width:860px){
  .dp-grid{grid-template-columns:1fr;height:auto;min-height:0}
  .dp-media,.detail-panel.flip .dp-media{order:0;height:56vh;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%)}
  .dp-copy,.detail-panel.flip .dp-copy{order:1;padding:clamp(30px,7vw,52px)}
}

/* configuration lineup — the modular system, shown holding different gear.
   Towers are bottom-aligned; per-figure heights preserve their relative scale. */
.cfg-lineup{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  gap:clamp(36px,7vw,120px);margin-top:clamp(44px,7vh,96px)}
.cfg-col{display:flex;flex-direction:column;align-items:center}
/* sit the renders on a deliberate black display box — their backgrounds are pure #000
   (page is #08080A), so without a box each render reads as a stray darker rectangle. */
.cfg-row{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(12px,2.2vw,40px);height:clamp(320px,54vh,580px);
  background:#000;border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px) clamp(18px,2.4vw,32px)}
.cfg-row figure{margin:0;height:100%;display:flex;align-items:flex-end}
.cfg-row img{width:auto;height:100%;object-fit:contain;display:block}
.cfg-label{display:block;margin-top:clamp(22px,3.4vh,40px);text-align:center;
  font-family:var(--display);font-size:clamp(10px,1vw,12px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--fog-2);position:relative;padding-top:18px}
.cfg-label::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:1px;background:var(--line-2)}
@media(max-width:760px){
  .cfg-row{height:clamp(240px,42vh,360px);gap:8px}
  .cfg-lineup{gap:clamp(28px,8vw,60px)}
}

/* four nameless cradle forms, shown as a row (they combine into the sets below) */
.forms-row{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(16px,3.2vw,60px);height:clamp(200px,30vh,340px);margin-top:clamp(40px,6vh,84px)}
.forms-row figure{margin:0;height:100%;display:flex;align-items:flex-end}
.forms-row img{width:auto;height:100%;object-fit:contain;display:block}
.form-ph{height:86%;aspect-ratio:0.82/1;border:1px dashed var(--line-2);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--fog-3);text-align:center}
.form-ph .ph-mark{font-family:var(--sans);font-weight:100;font-size:30px;line-height:1}
.form-ph .ph-label{font-family:var(--display);font-size:9px;letter-spacing:.16em;text-transform:uppercase;max-width:11ch;line-height:1.5}
@media(max-width:680px){
  .forms-row{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:20px;align-items:end;justify-items:center}
  .forms-row figure{height:auto}
  .forms-row img{height:auto;width:auto;max-height:30vh;max-width:100%}
  .form-ph{height:auto;width:100%;max-width:180px}
}
.forms-cap{display:block;text-align:center;margin-top:clamp(20px,3vh,34px);
  font-family:var(--display);font-size:clamp(10px,1vw,12px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--fog-2);position:relative;padding-top:18px}
.forms-cap::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:1px;background:var(--line-2)}

/* set catalog — icon · name · gear · max rod diameter */
.setlist{margin-top:clamp(46px,7vh,96px);border-top:1px solid var(--line)}
.setlist-row{display:grid;grid-template-columns:124px minmax(104px,1fr) 1.9fr minmax(86px,auto);
  gap:clamp(14px,2.6vw,44px);align-items:center;padding:clamp(16px,2.4vh,28px) 0;border-bottom:1px solid var(--line)}
.setlist-ic{display:flex;align-items:center;justify-content:flex-start}
.setlist-ic img{width:100%;max-height:62px;object-fit:contain;object-position:left center;display:block}
.setlist-name{font-family:var(--sans);font-weight:300;color:var(--white);font-size:clamp(16px,1.55vw,21px);letter-spacing:.02em}
.setlist-gear{color:var(--fog-2);font-size:clamp(13px,1.05vw,15px);line-height:1.7}
.setlist-dia{font-family:var(--display);font-size:clamp(11px,1vw,13px);letter-spacing:.06em;
  color:var(--bronze);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.setlist-dia.none{color:var(--fog-3)}
@media(max-width:680px){
  .setlist-row{grid-template-columns:46px 1fr auto;gap:3px 14px;align-items:center}
  .setlist-ic{grid-row:1/3}
  .setlist-ic img{max-height:40px}
  .setlist-name{grid-column:2;align-self:end}
  .setlist-dia{grid-column:3;grid-row:1;align-self:end}
  .setlist-gear{grid-column:2/-1;grid-row:2;align-self:start}
}

/* reel-seat version cards — KRAKEN / screw / pegboard */
.vers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,72px)}
.vers-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:10px}
.vers-media{aspect-ratio:4/3;margin:0 0 6px;border-radius:8px;overflow:hidden;background:var(--void)}
.vers-media img{width:100%;height:100%;object-fit:contain;display:block}
/* sample-in-progress placeholder (matches the colourway placeholder treatment) */
.vers-ph{display:flex;align-items:center;justify-content:center;position:relative}
.vers-ph::before{content:"";position:absolute;width:clamp(72px,14vw,96px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line-bronze);opacity:.4}
.vers-ph-note{position:relative;font-family:var(--display);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fog-3)}
.vers-name{font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.vers-card h4{font-family:var(--sans);font-weight:300;color:var(--white);font-size:clamp(16px,1.5vw,20px);letter-spacing:.02em}
.vers-card p{color:var(--fog-2);font-size:14px;line-height:1.85}
.vers-dim{margin-top:auto;font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--fog-3);font-variant-numeric:tabular-nums}
.vers-note{margin-top:7px;font-size:11px;line-height:1.55;color:var(--fog-3)}
@media(max-width:860px){.vers{grid-template-columns:1fr}}

/* ---------- COLOURWAY live body preview (KRAKEN Pro) ----------
   The body crop fills the empty right side of the section and crossfades with the
   swatch selection. It is absolutely positioned against the section, so the
   section keeps its existing height (driven by the head + swatches on the left). */
.cw-section{position:relative;overflow:hidden}
.cw-stage{position:absolute;top:0;bottom:0;right:clamp(20px,5vw,80px);width:clamp(300px,37vw,520px);pointer-events:none;z-index:0}
.cw-stage::before{content:"";position:absolute;left:50%;top:32%;width:126%;height:64%;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,160,126,.11),transparent 72%);pointer-events:none}
.cw-body{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  opacity:0;transition:opacity .7s var(--ease);filter:drop-shadow(0 26px 52px rgba(0,0,0,.55))}
.cw-body.on{opacity:1}
.cw-section .wrap{position:relative;z-index:1}   /* keep swatches/head above the render */
@media(max-width:900px){
  .cw-section{overflow:visible}
  .cw-stage{position:static;right:auto;width:100%;max-width:420px;margin:36px auto 0;height:clamp(260px,60vw,360px)}
  .cw-body{filter:drop-shadow(0 16px 34px rgba(0,0,0,.5))}
}