@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/hanken-grotesk-latin.woff2) format("woff2")}

/* CLEAR RUO v2 "Spectrum". Single deliberate look (not theme-switched): cobalt + porcelain + jewel spectrum. */
:root{
  color-scheme: light;
  --cobalt:#1F34C8; --cobalt-deep:#111C73; --cobalt-ink:#0A1150;
  --porcelain:#F4F5F9; --paper:#FFFFFF; --ink:#0D1433; --ink-2:#434A68; --ink-3:#7B8098;
  --rule:#DADDE8; --silver:#C8CCD6; --foil:#62D8EA; --foil-2:#A9EEF6;
  --on-dark:#FFFFFF; --on-dark-2:rgba(255,255,255,.74); --on-dark-3:rgba(255,255,255,.5);
  --amethyst:#4A2A8F; --teal:#0B6B63; --emerald:#1D5E43; --gold:#A8812C; --copper:#B4672F; --graphite:#4A5160; --garnet:#7A1F32; --midnight:#1B2238;
  --f:"Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gut:clamp(20px, 5vw, 72px);
  --max:1360px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--f);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foil);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3{font-weight:200;letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}
p{margin:0}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink-2);max-width:34em}

/* buttons: pill for primary action, text link for secondary */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:54px;padding:0 30px;border-radius:999px;border:0;cursor:pointer;
  font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-1px)}
.btn--light{background:var(--paper);color:var(--cobalt-ink)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.link{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--on-dark);transition:background .4s,color .4s,box-shadow .4s}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:76px}
.hdr.is-solid{background:rgba(244,245,249,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);box-shadow:0 1px 0 var(--rule)}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.mark__w{font-weight:300;font-size:19px;letter-spacing:.42em;margin-right:-.42em}
.mark__r{font-size:9.5px;font-weight:500;letter-spacing:.14em;border:1.2px solid currentColor;padding:2px 4px 1px 5px;line-height:1.3}
.nav{display:flex;gap:36px;font-size:14.5px;font-weight:400}
.nav a{text-decoration:none;opacity:.86}
.nav a:hover{opacity:1}
.hdr .btn{height:42px;padding:0 22px;font-size:14px}
.hdr.is-solid .btn--light{background:var(--ink);color:var(--paper)}
.hdr.is-solid.on-prism{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:var(--on-dark)}
.hdr.is-solid.on-prism.on-light{color:var(--ink)}
.hdr.is-solid.on-prism .btn--light{background:var(--paper);color:var(--ink)}
.hdr.is-solid.on-prism.on-light .btn--light{background:var(--ink);color:var(--paper)}
@media (max-width:860px){.nav{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--cobalt);color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;z-index:-2}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,28,115,.55) 0%,rgba(17,28,115,.18) 42%,rgba(17,28,115,0) 60%)}
.hero__in{min-height:min(100svh,980px);display:grid;grid-template-rows:1fr auto;padding-top:120px}
.hero__copy{align-self:center;max-width:620px;display:grid;gap:28px;padding-bottom:40px}
.hero h1{font-size:clamp(52px,7.4vw,118px)}
.hero .lede{color:var(--on-dark-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
@media (max-width:860px){
  .hero__img img{object-position:50% 100%}
  .hero__shade{background:linear-gradient(180deg,rgba(17,28,115,.72) 0%,rgba(17,28,115,.25) 45%,rgba(17,28,115,0) 70%)}
  .hero__in{min-height:auto;padding-top:108px}
  .hero__copy{align-self:start;padding-bottom:min(92vw,520px)}
}
@media (prefers-reduced-motion:no-preference){
}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes fade{to{opacity:1}}

/* ---------- specification plate ---------- */
.plate{background:var(--paper);border-bottom:1px solid var(--rule)}
.plate__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.plate__i{padding:44px 28px 40px 0;display:grid;gap:10px;align-content:start}
.plate__i + .plate__i{padding-left:28px;border-left:1px solid var(--rule)}
.plate__v{font-size:clamp(34px,3.4vw,52px);font-weight:200;letter-spacing:-.03em;line-height:1}
.plate__k{font-size:14.5px;color:var(--ink-2);line-height:1.45;max-width:17em}
@media (max-width:860px){
  .plate__grid{grid-template-columns:1fr 1fr}
  .plate__i{padding:28px 16px 26px 0}
  .plate__i + .plate__i{padding-left:16px}
  .plate__i:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .plate__i:nth-child(4){border-top:1px solid var(--rule)}
}

/* ---------- section heads ---------- */
.sec{padding-block:clamp(88px,11vw,168px)}
.head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 64px;align-items:end;margin-bottom:clamp(44px,5vw,76px)}
.head h2{font-size:clamp(42px,5.6vw,88px)}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* ---------- collection: a filterable grid that scales to any size ---------- */
.shop__bar{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;margin-bottom:36px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{all:unset;cursor:pointer;height:40px;padding:0 18px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:400;box-shadow:inset 0 0 0 1px var(--rule);transition:background .3s,color .3s,box-shadow .3s}
.chip small{font-size:12px;color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.chip[aria-pressed="true"] small{color:rgba(255,255,255,.6)}
.chip:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.shop__count{font-size:14px;color:var(--ink-3)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:44px 18px}
.card{--c:var(--cobalt);text-decoration:none;color:var(--ink);display:grid;gap:16px;transition:opacity .4s,transform .4s}
.card[hidden]{display:none}
.card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--c);border-radius:4px;isolation:isolate;transition:box-shadow .6s var(--ease),transform .6s var(--ease)}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 74%;transform:scale(1.32);transform-origin:50% 78%;transition:transform 1.4s var(--ease),opacity .6s}
.card__media video{opacity:0}
.card.is-playing .card__media video{opacity:1}
.card__view{position:absolute;left:14px;right:14px;bottom:14px;height:46px;border-radius:99px;background:rgba(255,255,255,.94);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:500;
  transform:translateY(130%);transition:transform .5s var(--ease)}
.card__tag{position:absolute;left:14px;top:14px;font-size:12px;font-weight:500;color:#fff;background:rgba(0,0,0,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px}
.card--light .card__tag{color:var(--ink);background:rgba(255,255,255,.6)}
@media (hover:hover){
  .card:hover .card__media{box-shadow:0 34px 60px -28px var(--c);transform:translateY(-4px)}
  .card:hover .card__media img,.card:hover .card__media video{transform:scale(1.39)}
  .card:hover .card__view{transform:none}
}
.card__info{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.card__name{font-size:22px;font-weight:400;letter-spacing:-.01em}
.card__price{font-size:16px;font-variant-numeric:tabular-nums}
.card__sizes{grid-column:1 / -1;font-size:14px;color:var(--ink-3)}
.card__sw{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
@media (max-width:640px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10px}
  .card__name{font-size:17px}.card__price{font-size:14px}.card__sizes{font-size:12.5px}
  .card__info{grid-template-columns:1fr}
  .card__tag{font-size:11px;left:10px;top:10px}
}

/* film grain on the dark, cinematic sections */
.hero::after,.turn::after,.trace::before,.close::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.07;mix-blend-mode:overlay;z-index:2}
.trace::before{z-index:0}
/* hero headline: one orchestrated entrance */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero h1 .ln > span{display:block}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln > span{animation:rise 1.1s var(--ease) both}
  .hero h1 .ln + .ln > span{animation-delay:.12s}
  .hero .lede,.hero__cta{animation:fade 1s .5s both}
}
@keyframes rise{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
/* hero: live detector run along the bottom */
.hero__trace{position:relative;height:clamp(150px,22vw,280px);margin-inline:calc(var(--gut) * -1);z-index:1}
.hero__trace canvas{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){.hero__trace{height:150px}}
/* hero: 4K still with a slow breath */
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
@media (max-width:860px){.hero__img img{object-position:50% 100%}}
@media (prefers-reduced-motion:no-preference){
  .hero__img picture{display:block;width:100%;height:100%;animation:breathe 18s ease-in-out infinite alternate}
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
/* hero video + scroll push-in */
.hero__img video{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
@media (max-width:860px){.hero__img video{object-position:50% 100%}}
.hero__img,.hero__copy{will-change:transform}

/* chromatogram draws itself when it comes into view */
.chart.pre .tr{clip-path:inset(0 100% 0 0)}
.chart .tr{transition:clip-path 2.4s var(--ease)}

/* ---------- read the trace: the instrument ---------- */
.trace{position:relative;background:radial-gradient(120% 80% at 70% 0%,#1B2A9E 0%,#0A1150 45%,#050935 100%);color:var(--on-dark);overflow:hidden}
.trace .lede{color:var(--on-dark-2)}
.scope{position:relative;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 120px -40px rgba(0,0,0,.7)}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(255,255,255,.1)}
.hud__i{padding:18px 22px;display:grid;gap:4px;transition:background .5s}
.hud__i + .hud__i{border-left:1px solid rgba(255,255,255,.1)}
.hud__k{font-size:12.5px;color:var(--on-dark-3)}
.hud__v{font-size:clamp(22px,2.4vw,34px);font-weight:200;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hud__i.is-hot{background:rgba(98,216,234,.1)}
.hud__i.is-hot .hud__v{color:var(--foil-2)}
.hud__pass{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;color:#062b33;background:var(--foil);border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.scope__plot{position:relative;aspect-ratio:16/7;touch-action:pan-y;cursor:crosshair}
.scope__plot canvas{position:absolute;inset:0;width:100%;height:100%}
.scope__tag{position:absolute;pointer-events:none;transform:translate(-50%,-130%);background:rgba(5,9,53,.86);border:1px solid rgba(98,216,234,.5);color:#fff;font-size:12.5px;padding:5px 10px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums}
.scope__tag.on{opacity:1}
.scope__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:12px 22px 16px;font-size:12.5px;color:var(--on-dark-3);border-top:1px solid rgba(255,255,255,.08)}
.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.tab{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 16px 0 0;display:grid;gap:6px;position:relative}
.tab::before{content:"";position:absolute;left:0;right:12px;top:-1px;height:2px;background:var(--foil);transform:scaleX(0);transform-origin:left}
.tab[aria-selected="true"]::before{transform:scaleX(var(--prog,1))}
.tab__n{font-size:13px;font-weight:500;color:var(--on-dark-3)}
.tab__t{font-size:18px;font-weight:300;line-height:1.25;color:var(--on-dark-2)}
.tab[aria-selected="true"] .tab__n{color:var(--foil)}
.tab[aria-selected="true"] .tab__t{color:#fff}
.tab:focus-visible{outline:2px solid var(--foil);outline-offset:4px}
.explain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;margin-top:30px;min-height:6.5em}
.explain p{font-size:18px;line-height:1.6;color:var(--on-dark-2);max-width:36em}
.explain .calc{font-size:15.5px;color:var(--on-dark-2);border-left:2px solid var(--foil);padding:4px 0 4px 16px;align-self:start;font-variant-numeric:tabular-nums}
.explain .calc b{color:#fff;font-weight:500}
@media (max-width:860px){
  .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hud__i:nth-child(3){border-left:0}
  .hud__i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .hud__i{padding:14px 16px}
  .scope{margin-inline:calc(var(--gut) * -1 + 8px)}
  .scope__plot{aspect-ratio:4/4.2}
  .scope__foot{padding:10px 16px 14px}
  .tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{scroll-snap-align:start}
  .explain{grid-template-columns:1fr;min-height:0}
  .explain p{font-size:16.5px}
}
.pending{position:relative;border:1px solid var(--rule);background:var(--paper);padding:22px 18px 12px 12px}
/* ---------- real vs fake COA ---------- */
.coa{background:var(--cobalt-deep);color:var(--on-dark)}
.coa .lede{color:var(--on-dark-2)}
.coa__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.coa__col{padding:clamp(28px,3.4vw,52px);background:rgba(255,255,255,.05)}
.coa__col--good{background:var(--cobalt)}
.coa__col h3{font-size:clamp(26px,2.4vw,36px);font-weight:300;letter-spacing:-.02em;margin-bottom:26px}
.coa__col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.coa__col li{padding:16px 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:16px;line-height:1.5;color:var(--on-dark-2)}
.coa__col li b{font-weight:500;color:var(--on-dark);display:block}
.ic{width:18px;height:18px;margin-top:3px}
@media (max-width:860px){.coa__grid{grid-template-columns:1fr}}

/* ---------- process: a cinematic stage with chapters ---------- */
.proc{background:var(--paper)}
.stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.screen{position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px;background:#dfe2ea;isolation:isolate}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 7s linear}
.screen video.is-on{opacity:1;transform:scale(1)}
.screen__cap{position:absolute;left:0;right:0;bottom:0;padding:90px 28px 26px;background:linear-gradient(180deg,transparent,rgba(5,9,53,.62));color:#fff;display:flex;align-items:baseline;gap:18px;z-index:2}
.screen__n{font-size:clamp(56px,7vw,112px);font-weight:200;letter-spacing:-.04em;line-height:.8;font-variant-numeric:tabular-nums}
.screen__w{font-size:clamp(20px,2vw,28px);font-weight:300}
.screen__cap span{display:inline-block}
.screen__cap.swap span{animation:rise .7s var(--ease) both}
.chapters{list-style:none;margin:0;padding:0;display:grid}
.chap button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:44px 1fr;gap:6px 8px;padding:22px 0 20px;position:relative}
.chap button:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.chap{border-top:1px solid var(--rule);position:relative}
.chap:last-child{border-bottom:1px solid var(--rule)}
.chap__bar{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--cobalt);transform-origin:left;transform:scaleX(0)}
.chap.is-on .chap__bar{transform:scaleX(var(--p,0))}
.chap__n{font-size:14px;font-weight:500;color:var(--ink-3);padding-top:6px;font-variant-numeric:tabular-nums}
.chap__t{font-size:clamp(22px,2vw,28px);font-weight:300;letter-spacing:-.015em;line-height:1.2;color:var(--ink-3);transition:color .4s}
.chap__d{grid-column:2;font-size:16px;color:var(--ink-2);line-height:1.6;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s}
.chap.is-on .chap__n{color:var(--cobalt)}
.chap.is-on .chap__t{color:var(--ink)}
.chap.is-on .chap__d{max-height:8em;opacity:1}
.certs{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.certs span{padding:22px 20px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.certs span + span{padding-left:20px;border-left:1px solid var(--rule)}
.certs b{display:block;font-weight:400;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
@media (max-width:860px){
  .stage{grid-template-columns:1fr;gap:8px}
  .screen{margin-inline:calc(var(--gut) * -1);border-radius:0}
  .screen__cap{padding:70px var(--gut) 20px}
  .chap button{padding:18px 0 16px;grid-template-columns:36px 1fr}
  .certs{grid-template-columns:1fr 1fr}
  .certs span:nth-child(3){padding-left:0;border-left:0}
  .certs span{padding-bottom:20px}
}

/* ---------- lot: a scroll-driven turntable of the real vial ---------- */
.turn{position:relative;height:280svh;background:radial-gradient(90% 70% at 30% 40%,#0E5A54 0%,#073733 55%,#04211F 100%);color:var(--on-dark)}
.turn__stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,72px);padding-inline:var(--gut);max-width:var(--max);margin-inline:auto;overflow:hidden}
.turn__stage{position:relative;aspect-ratio:1;max-height:84svh;width:100%;justify-self:center;border-radius:6px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
.turn__stage canvas{position:absolute;inset:0;width:100%;height:100%}
.turn__scan{position:absolute;left:24%;right:30%;height:2px;background:linear-gradient(90deg,transparent,#A9EEF6,transparent);box-shadow:0 0 18px 4px rgba(98,216,234,.55);opacity:0;transition:top .8s var(--ease),opacity .5s}
.turn__call{position:absolute;left:69%;transform:translateY(-50%);background:rgba(4,33,31,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(169,238,246,.5);color:#fff;border-radius:99px;padding:8px 14px;font-size:13.5px;font-weight:500;opacity:0;transition:opacity .5s,top .8s var(--ease);white-space:nowrap}
.turn h2{font-size:clamp(40px,4.8vw,76px);margin-bottom:34px}
.turn ol{list-style:none;margin:0;padding:0}
.turn li{display:grid;grid-template-columns:44px 1fr;padding:20px 0;border-top:1px solid rgba(255,255,255,.14);color:var(--on-dark-3);transition:color .5s}
.turn li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.turn li::before{content:attr(data-n);font-size:14px;font-weight:500;padding-top:4px}
.turn li b{display:block;font-weight:300;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.01em;margin-bottom:4px}
.turn li span{font-size:15.5px;line-height:1.55}
.turn li.is-on{color:var(--on-dark-2)}
.turn li.is-on b{color:#fff}
.turn li.is-on::before{color:var(--foil)}
@media (max-width:860px){
  .turn{height:260svh}
  .turn__stick{grid-template-columns:1fr;align-content:start;padding-top:84px;gap:18px}
  .turn__stage{max-height:none;width:min(100%,52svh)}
  .turn h2{font-size:30px;margin-bottom:10px}
  .turn li{padding:12px 0;display:none}
  .turn li.is-on{display:grid}
  .turn__call{left:50%;transform:translate(-50%,0);top:auto!important;bottom:5%}
  .turn li:last-child{border-bottom:0}
}

/* ---------- faq ---------- */
.faq{background:var(--porcelain)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:20px;font-weight:400;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 26px;color:var(--ink-2);max-width:40em}
@media (max-width:860px){.faq__grid{grid-template-columns:1fr}}

/* ---------- closing + footer ---------- */
.close{position:relative;background:var(--cobalt);color:var(--on-dark);text-align:left;overflow:hidden;isolation:isolate}
.close__bg{position:absolute;inset:0;z-index:-1}
.close__bg picture,.close__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:85% 50%}
.close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,28,115,.82) 0%,rgba(17,28,115,.35) 55%,rgba(17,28,115,.1) 100%)}
@media (max-width:860px){.close__bg img{object-position:50% 100%}.close__bg::after{background:linear-gradient(180deg,rgba(17,28,115,.85) 0%,rgba(17,28,115,.45) 60%,rgba(17,28,115,.2) 100%)}}
.close h2{font-size:clamp(46px,6.4vw,104px);max-width:6.2em}
.close .wrap{position:relative;z-index:3}
@media (min-width:861px){.close__row{flex-direction:column;align-items:flex-start;max-width:560px}}
@media (max-width:860px){.close{padding-bottom:min(118vw,560px)}}
.close__row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-start;justify-content:space-between;margin-top:48px}
.close form{display:flex;gap:10px;flex-wrap:nowrap}
@media (max-width:560px){.close form{flex-wrap:wrap}}
.close input{height:54px;min-width:0;width:min(320px,100%);border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:var(--on-dark);padding:0 22px;font:inherit;font-size:15px}
.close input::placeholder{color:var(--on-dark-3)}
.close__msg{font-size:14px;color:var(--foil-2);min-height:1.4em;margin-top:8px}
.ftr{background:var(--cobalt-ink);color:var(--on-dark-2);font-size:14px;padding-block:64px 40px}
.ftr__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);color:var(--on-dark)}
.ftr__cols{display:flex;gap:56px;flex-wrap:wrap}
.ftr__cols a{display:block;text-decoration:none;margin-top:8px;color:var(--on-dark-2)}
.ftr__legal{padding-top:28px;display:grid;gap:12px;font-size:12.5px;line-height:1.6;color:var(--on-dark-3);max-width:80em}

/* ---------- product view ---------- */
.pv{display:none}
body.is-product .home{display:none}
body.is-product .pv{display:block}
.pv__hero{--c:var(--emerald);background:var(--c);color:var(--on-dark);padding-top:76px}
.pv__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:min(92svh,900px)}
.pv__img{position:relative;overflow:hidden}
.pv__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.pv__buy{padding:clamp(32px,5vw,80px) var(--gut);display:grid;gap:28px;align-content:center}
.crumb{font-size:14px;color:var(--on-dark-2);text-decoration:none}
.pv__buy h1{font-size:clamp(56px,6.6vw,104px)}
.pv__sub{font-size:17px;color:var(--on-dark-2)}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size{height:48px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;cursor:pointer;font-size:15px;font-weight:400}
.size[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.price{font-size:40px;font-weight:200;letter-spacing:-.02em}
.pv__ship{font-size:14.5px;color:var(--on-dark-2);display:grid;gap:6px}
.pv__ruo{font-size:13px;color:var(--on-dark-3);max-width:34em;line-height:1.55}
.pv__bar{display:none}
@media (max-width:860px){
  .pv__grid{grid-template-columns:1fr;min-height:0}
  .pv__img{aspect-ratio:4/4.4}
  .pv__bar{display:flex;position:fixed;inset:auto 0 0;z-index:40;gap:12px;align-items:center;justify-content:space-between;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--rule)}
  .pv__bar .btn{height:48px;flex:1}
  body.is-product{padding-bottom:76px}
  .pv__bar b{font-size:20px;font-weight:300}
}
.spec{background:var(--paper)}
.spec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px)}
.seq{display:flex;flex-wrap:wrap;gap:24px 6px;margin:8px 0 26px}
.aa{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:500;background:var(--porcelain);border:1px solid var(--rule);position:relative}
.aa small{position:absolute;bottom:-17px;font-size:10px;font-weight:400;color:var(--ink-3)}
.aa--h{background:#E6F0EB;border-color:#C5DCD0}
.aa--c{background:#E9ECFB;border-color:#CCD3F4}
.aa--n{background:#FBEDEE;border-color:#EFD0D4}
.seq__three{font-size:13.5px;color:var(--ink-3);margin-top:18px;word-break:break-word}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
table.kv{width:100%;border-collapse:collapse;font-size:16px}
.kv th,.kv td{text-align:left;padding:15px 0;border-top:1px solid var(--rule);vertical-align:top}
.kv th{font-weight:400;color:var(--ink-3);width:44%;padding-right:16px}
.kv td{font-weight:400}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:1px solid var(--rule)}
.kv sub{font-size:.72em}
.h3{font-size:clamp(26px,2.4vw,34px);font-weight:300;letter-spacing:-.02em;margin-bottom:18px}
.small{font-size:13.5px;color:var(--ink-3);margin-top:12px;line-height:1.55}
.lotcoa{background:var(--porcelain)}
.lotcoa__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.pending{position:relative;border:1px solid var(--rule);background:var(--paper);padding:22px 18px 12px 12px}
.pending svg{width:100%;height:auto;display:block}
.pending text{font-family:var(--f);font-size:11px;fill:var(--ink-3)}
.pending__msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.pending__msg div{background:var(--paper);padding:18px 22px;max-width:25em;font-size:15px;color:var(--ink-2);box-shadow:0 0 0 1px var(--rule)}
.pending__msg b{display:block;font-weight:500;color:var(--ink);font-size:17px;margin-bottom:4px}
@media (max-width:860px){.spec__grid,.lotcoa__grid{grid-template-columns:1fr}}
.more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 18px}
@media (max-width:860px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.close__msg--err{color:#FFD2D8}