/* ============================================================
   SCENT OF LUMORA — "Instrument"
   Brushed-aluminium light ground, graphite ink, the logo's teal,
   and one signal red used the way a device uses an LED.
   Archivo (variable width) + Geist Mono.
   Earlier themes: _archive/style-noir.css
   ============================================================ */

:root{
  /* dark "Instrument" — same system, inverted */
  --paper:   #0E1012;
  --paper-2: #15181B;
  --card:    #1A1E21;
  --ink:     #ECECE7;
  --ink-2:   #B7BAB6;
  --mute:    #868B88;
  --hair:    #2C3134;
  --hair-2:  #1F2427;
  --rule:    #4A504D;
  --teal:    #7CC7CC;
  --teal-2:  #A5DCDF;
  --signal:  #FF5A3C;
  --graphite:#08090A;
  --plate:   #F2F0EC;
  --onlight: #121413;

  --text:#ECECE7; --text-2:#B7BAB6; --text-3:#868B88;
  --line:var(--hair); --line-2:var(--hair-2);
  --white:var(--card); --stone:var(--paper-2); --sage-2:var(--paper-2);
  --mint:var(--teal); --teal-soft:var(--teal); --brass:var(--teal);

  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: var(--sans); --body: var(--sans);

  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-full:999px;
  --pad: clamp(1rem, 3.2vw, 2.5rem);
  --maxw: 1480px;
  --header-h: 60px;

  --ease: cubic-bezier(.2,.7,.1,1);
  --t-fast:.18s var(--ease);
  --t: .4s var(--ease);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); color-scheme:dark; }
html.no-scroll, body.no-scroll{ overflow:hidden; }
body{
  font-family:var(--sans); font-weight:400; font-stretch:100%;
  font-size:15px; line-height:1.55; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"ss01","tnum";
}
@media (min-width:1400px){ body{ font-size:16px; } }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
::selection{ background:var(--ink); color:var(--paper); }
kbd{ font-family:var(--mono); font-size:.68rem; padding:.05rem .3rem; border:1px solid var(--hair); border-radius:3px; color:var(--mute); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:880px; }
.section{ padding-block:clamp(3.5rem,7vw,6.5rem); position:relative; }
.section--tight{ padding-block:clamp(2.5rem,5vw,4rem); }
.stack > * + *{ margin-top:1rem; }

/* ---------- type ---------- */
.label{ display:block; }
.label, .kicker{
  font-family:var(--mono); font-size:.7rem; font-weight:400; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mute); gap:.55rem;
}
.kicker{ display:inline-flex; align-items:center; }
.kicker::before{ content:''; width:6px; height:6px; background:var(--signal); border-radius:50%; flex:none; }
.kicker--plain::before{ display:none; }
.label b{ color:var(--ink); font-weight:500; }

.h1,.h2,.h3,.h4{ font-family:var(--sans); color:var(--ink); letter-spacing:-.025em; line-height:1; font-weight:500; }
.h1{ font-size:clamp(2.4rem,5.4vw,5rem); font-stretch:112%; letter-spacing:-.035em; }
.h2{ font-size:clamp(1.9rem,3.8vw,3.4rem); font-stretch:108%; letter-spacing:-.03em; }
.h3{ font-size:clamp(1.35rem,2.2vw,1.9rem); font-stretch:104%; }
.h4{ font-size:clamp(1.05rem,1.3vw,1.2rem); letter-spacing:-.01em; line-height:1.2; }
.h1 em,.h2 em,.h3 em{ font-style:normal; color:var(--teal); }
.lead{ font-size:clamp(1rem,.35vw + .95rem,1.15rem); color:var(--ink-2); max-width:52ch; line-height:1.5; }
.muted{ color:var(--mute); }
.small{ font-size:.85rem; }
.mono{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

.section-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1rem 2rem; margin-bottom:clamp(1.75rem,3.5vw,2.75rem); padding-top:1.1rem; border-top:1px solid var(--rule); }
.section-head__text{ max-width:760px; }
.section-head .h2, .section-head .h3{ margin-top:.9rem; }
.section-head > [data-reveal]:last-child:not(.section-head__text){ justify-self:end; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  height:46px; padding:0 1.25rem; border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--ink); color:var(--paper);
  font-size:.92rem; font-weight:500; letter-spacing:-.005em; white-space:nowrap; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn::after{ content:'→'; font-family:var(--mono); transition:transform var(--t-fast); }
.btn:hover{ background:var(--teal); border-color:var(--teal); }
.btn:hover::after{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }
.btn--ghost, .btn--on-dark{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--teal, .btn--mint, .btn--light{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn--teal:hover, .btn--mint:hover, .btn--light:hover{ background:var(--ink); border-color:var(--ink); }
.section--dark .btn--on-dark, .page-head .btn--on-dark{ color:var(--paper); border-color:rgba(231,230,225,.45); }
.section--dark .btn--on-dark:hover, .page-head .btn--on-dark:hover{ background:var(--paper); color:var(--ink); }
.btn--sm{ height:38px; padding:0 .95rem; font-size:.84rem; }
.btn--lg{ height:54px; padding:0 1.6rem; font-size:1rem; }
.btn--block{ width:100%; white-space:normal; text-align:center; height:auto; min-height:46px; padding-block:.7rem; line-height:1.25; }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

.link-u{ display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:500; border-bottom:1px solid currentColor; padding-bottom:.1rem; transition:color var(--t-fast); }
.link-u:hover{ color:var(--teal); }
.link-u svg{ transition:transform var(--t-fast); }
.link-u:hover svg{ transform:translateX(3px); }

.skip-link{ position:fixed; top:.5rem; left:.5rem; z-index:999; background:var(--ink); color:var(--paper); padding:.5rem .9rem; transform:translateY(-200%); }
.skip-link:focus{ transform:none; }

.led{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px rgba(224,69,43,.15); animation:led 2.4s ease-in-out infinite; flex:none; }
@keyframes led{ 50%{ box-shadow:0 0 0 6px rgba(224,69,43,0); opacity:.7; } }

/* ============================================================
   CHROME
   ============================================================ */
.status{ background:var(--ink); color:#B9BCB9; font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; }
.status__in{ height:32px; display:flex; align-items:center; gap:2rem; }
.status__in > span{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; }
.status__r{ margin-left:auto; color:#7E827F; }

.site-header{ position:sticky; top:0; z-index:70; background:rgba(231,230,225,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); transition:transform .35s var(--ease); }
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header__inner{ height:var(--header-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; }
.brand img{ height:24px; width:auto; }
.brand--footer img{ height:30px; }
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav > a, .nav__trigger{ font-size:.92rem; font-weight:450; color:var(--ink-2); display:inline-flex; align-items:center; gap:.3rem; padding:.4rem 0; position:relative; transition:color var(--t-fast); }
.nav > a:hover, .nav__trigger:hover, .nav > a[aria-current="page"]{ color:var(--ink); }
.nav > a[aria-current="page"]::before{ content:''; position:absolute; left:-.8rem; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--signal); }
.nav__trigger svg{ transition:transform var(--t-fast); }
.nav__item[data-open="true"] .nav__trigger svg{ transform:rotate(180deg); }
.nav__item{ position:static; }
.header-tools{ display:flex; align-items:center; gap:.4rem; }
.tool{ display:inline-flex; align-items:center; gap:.5rem; height:36px; padding:0 .7rem; border-radius:var(--r-sm); font-size:.88rem; font-weight:450; color:var(--ink-2); transition:background var(--t-fast), color var(--t-fast); }
.tool:hover{ background:var(--paper-2); color:var(--ink); }
.tool svg{ width:16px; height:16px; stroke-width:1.5; }
.tool--bag{ border:1px solid var(--rule); color:var(--ink); }
.tool--bag:hover{ background:var(--ink); color:var(--paper); }
.cart-count{ font-family:var(--mono); font-size:.72rem; min-width:1.4em; text-align:center; }
.cart-count.pop{ animation:pop .45s var(--ease); }
@keyframes pop{ 40%{ transform:scale(1.5); color:var(--signal); } }
.burger{ display:none; width:40px; height:36px; place-items:center; border-radius:var(--r-sm); }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); transition:transform var(--t), opacity var(--t-fast); }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mega{ position:absolute; left:0; right:0; top:100%; background:var(--paper-2); border-bottom:1px solid var(--rule); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--t-fast), transform var(--t), visibility var(--t-fast); }
.nav__item[data-open="true"] .mega{ opacity:1; visibility:visible; transform:none; }
.mega__inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:3rem; padding-block:2rem 2.25rem; }
.mega__links{ display:grid; border-top:1px solid var(--rule); align-content:start; }
.mega__links a{ display:flex; align-items:baseline; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--hair); transition:padding var(--t-fast); }
.mega__links a:hover{ padding-left:.5rem; }
.mega__links b{ font-weight:500; font-size:1rem; }
.mega__links i{ font-style:normal; font-family:var(--mono); font-size:.7rem; color:var(--mute); margin-left:auto; }
.mega__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.mega__card img{ aspect-ratio:4/5; width:100%; object-fit:cover; border-radius:var(--r-sm); }
.mega__card span{ display:block; padding-top:.6rem; font-size:.92rem; font-weight:500; }
.mega__card em{ display:block; font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--mute); text-transform:uppercase; }

.mnav{ position:fixed; inset:calc(var(--header-h) + 32px) 0 0; z-index:65; background:var(--paper); padding:1rem var(--pad) 3rem; overflow-y:auto; transform:translateY(-102%); visibility:hidden; transition:transform .5s var(--ease), visibility .5s; }
.mnav.is-open{ transform:none; visibility:visible; }
.mnav a{ display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid var(--hair); font-size:1.6rem; font-weight:500; font-stretch:108%; letter-spacing:-.02em; }
.mnav .btn{ margin-top:1.5rem; font-size:1rem; font-stretch:100%; }
.mnav__group{ margin-top:1.75rem; }
.mnav__group h5{ font-family:var(--mono); font-size:.7rem; font-weight:400; text-transform:uppercase; color:var(--mute); }
.mnav__group a{ font-size:1rem; font-weight:400; font-stretch:100%; }

/* ============================================================
   HOME · 01 · THE INSTRUMENT (hero)
   ============================================================ */
.inst{ position:relative; border-bottom:1px solid var(--rule); background:var(--paper);
  background-image:linear-gradient(var(--hair-2) 1px, transparent 1px), linear-gradient(90deg, var(--hair-2) 1px, transparent 1px);
  background-size:56px 56px; background-position:-1px -1px; }
.inst__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); min-height:calc(100svh - var(--header-h) - 32px); max-width:var(--maxw); margin-inline:auto; }
.inst__left{ display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:clamp(1.5rem,2.6vw,2.4rem) var(--pad); border-right:1px solid var(--rule); background:var(--paper); }
.inst__title{ font-size:clamp(2.4rem,3.8vw,3.7rem); font-stretch:118%; font-weight:500; letter-spacing:-.045em; line-height:.94; margin:1rem 0 1.1rem; }
.inst__title span{ color:var(--teal); }
.inst__intro{ font-size:1rem; color:var(--ink-2); max-width:40ch; }

.ctl-group{ border-top:1px solid var(--rule); }
.ctl{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--hair); }
.ctl > label, .ctl > span{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; color:var(--mute); }
.num{ display:flex; align-items:center; gap:.4rem; }
.num input{ width:5.2ch; text-align:right; border:0; background:transparent; font-size:1.55rem; font-weight:500; font-stretch:90%; letter-spacing:-.02em; outline:none; -moz-appearance:textfield; border-bottom:1px dashed transparent; }
.num input:focus{ border-bottom-color:var(--ink); }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.num i{ font-style:normal; font-family:var(--mono); font-size:.78rem; color:var(--mute); width:1.8rem; }
.num button{ width:30px; height:30px; border:1px solid var(--hair); border-radius:var(--r-sm); font-family:var(--mono); color:var(--ink-2); background:var(--card); transition:all var(--t-fast); }
.num button:hover{ border-color:var(--ink); color:var(--ink); }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:.9rem; border:1px solid var(--rule); border-radius:var(--r-sm); overflow:hidden; }
.seg button{ padding:.6rem .4rem; font-size:.86rem; font-weight:450; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--card); transition:background var(--t-fast), color var(--t-fast); }
.seg button:nth-child(3n){ border-right:0; }
.seg button:nth-last-child(-n+3){ border-bottom:0; }
.seg button:hover{ background:var(--paper-2); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

.inst__right{ display:grid; grid-template-rows:auto auto 1fr; padding:clamp(1.5rem,3vw,2.5rem) var(--pad) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3.5vw,3rem); position:relative; min-width:0; }
.inst__readhead{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.inst__num{ display:flex; align-items:flex-start; gap:.4rem; margin:.4rem 0 .2rem; cursor:ew-resize; user-select:none; -webkit-user-select:none; touch-action:pan-y; width:max-content; max-width:100%; }
.inst__num:active{ cursor:grabbing; }
.odo{ display:inline-flex; font-size:clamp(6.5rem,17vw,16.5rem); line-height:.82; font-weight:300; font-stretch:62%; letter-spacing:-.04em; height:.82em; overflow:hidden; }
.odo__d{ display:inline-block; height:.82em; overflow:hidden; }
.odo__d > span{ display:flex; flex-direction:column; transition:transform .75s cubic-bezier(.3,1.25,.4,1); }
.odo__d > span > i{ font-style:normal; height:.82em; display:block; line-height:.82; }
.odo__c{ display:inline-block; }
.inst__unit{ font-size:clamp(1.5rem,3vw,2.6rem); font-weight:400; font-stretch:80%; padding-top:.35em; color:var(--teal); }
.inst__hint{ font-family:var(--mono); font-size:.7rem; color:var(--mute); text-transform:uppercase; display:inline-flex; gap:.5rem; align-items:center; }

.scale{ position:relative; height:94px; margin:1.6rem 0 1.4rem; }
.scale__line{ position:absolute; left:0; right:0; top:34px; height:1px; background:var(--ink); }
.scale__tick{ position:absolute; top:22px; width:1px; height:24px; background:var(--ink); transform:translateX(-.5px); }
.scale__tick.is-rec{ background:var(--signal); width:2px; }
.scale__tick b{ position:absolute; top:28px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.62rem; font-weight:400; color:var(--mute); white-space:nowrap; }
.scale__tick em{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-style:normal; font-family:var(--mono); font-size:.62rem; color:var(--signal); white-space:nowrap; opacity:0; transition:opacity .3s; }
.scale__tick.is-rec em{ opacity:1; }
.scale__tick.is-rec b{ color:var(--signal); }
.scale__mark{ position:absolute; top:6px; width:0; transition:left .8s cubic-bezier(.3,1.2,.4,1); }
.scale__mark::before{ content:''; position:absolute; left:-6px; top:0; border:6px solid transparent; border-top:8px solid var(--signal); }
.scale__mark::after{ content:''; position:absolute; left:-.5px; top:10px; width:1px; height:40px; background:var(--signal); }
.scale__ends{ position:absolute; top:74px; left:0; right:0; display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; color:var(--mute); }

.spec{ display:grid; grid-template-columns:minmax(150px,230px) minmax(0,1fr); gap:clamp(1.25rem,3vw,2.5rem); align-items:end; align-self:end; border-top:1px solid var(--rule); padding-top:1.4rem; }
.frame{ position:relative; padding:12px 34px 12px 12px; }
.frame::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)) left top/14px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) left top/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right top/14px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) right top/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom/14px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right bottom/14px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) right bottom/1px 14px no-repeat; }
.frame img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:opacity .3s; }
.frame img.is-swap{ opacity:0; }
.dim{ position:absolute; top:12px; bottom:12px; right:16px; width:1px; background:var(--ink-2); }
.dim::before,.dim::after{ content:''; position:absolute; left:-4px; width:9px; height:1px; background:var(--ink-2); }
.dim::before{ top:0; } .dim::after{ bottom:0; }
.dim span{ position:absolute; top:50%; left:-6px; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-family:var(--mono); font-size:.62rem; color:var(--ink-2); white-space:nowrap; background:var(--paper); padding:.3rem 0; }
.spec__txt{ min-width:0; }
.spec__rec{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; color:var(--signal); display:flex; align-items:center; gap:.5rem; }
.spec__name{ font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:500; font-stretch:112%; letter-spacing:-.035em; line-height:1; margin:.6rem 0 1rem; }
.spec__rows{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--hair); margin-bottom:1.1rem; }
.spec__rows div{ padding:.6rem .6rem .6rem 0; border-right:1px solid var(--hair); }
.spec__rows div + div{ padding-left:.7rem; }
.spec__rows div:last-child{ border-right:0; }
.spec__rows dt{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; color:var(--mute); }
.spec__rows dd{ font-size:1rem; font-weight:500; margin:0; white-space:nowrap; }
.spec__alts{ font-size:.84rem; color:var(--mute); margin-top:.8rem; }
.spec__alts a{ color:var(--ink); border-bottom:1px solid var(--hair); margin-left:.35rem; }
.spec__alts a:hover{ border-color:var(--ink); }

/* ============================================================
   HOME · shared block head
   ============================================================ */
.blk{ padding-block:clamp(3.5rem,7vw,6rem); border-bottom:1px solid var(--rule); }
.blk__head{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr); gap:1.5rem clamp(1rem,3vw,2.5rem); align-items:start; margin-bottom:clamp(2rem,4vw,3.25rem); }
.blk__no{ font-family:var(--mono); font-size:.72rem; color:var(--mute); text-transform:uppercase; padding-top:.5rem; display:flex; gap:.9rem; }
.blk__no b{ color:var(--ink); font-weight:500; }
.blk__head .h2{ font-size:clamp(2rem,4vw,3.6rem); }
.blk__head p{ color:var(--ink-2); margin-top:1rem; max-width:48ch; }
.blk__aside{ justify-self:end; text-align:right; padding-top:.5rem; font-size:.9rem; color:var(--ink-2); }

/* ============================================================
   HOME · 02 · LEDGER
   ============================================================ */
.lg{ border-top:1px solid var(--rule); }
.lg__row, .lg__hd{ display:grid; grid-template-columns:2.6rem 52px minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,2fr) minmax(0,.8fr) minmax(0,.75fr) minmax(0,1fr) 1.5rem; gap:1rem; align-items:center; }
.lg__th img{ width:52px; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block; transition:transform var(--t); }
.lg__row:hover .lg__th img{ transform:scale(1.08); }
.lg__row{ padding-block:.6rem !important; }
.lg__hd{ padding:.7rem 0; border-bottom:1px solid var(--rule); }
.lg__hd button, .lg__hd span{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; color:var(--mute); text-align:left; display:inline-flex; gap:.35rem; align-items:center; }
.lg__hd button:hover{ color:var(--ink); }
.lg__hd button[aria-sort]{ color:var(--ink); }
.lg__hd button[aria-sort="ascending"]::after{ content:'↑'; }
.lg__hd button[aria-sort="descending"]::after{ content:'↓'; }
.lg__row{ padding:1rem 0; border-bottom:1px solid var(--hair); transition:background var(--t-fast), padding var(--t); position:relative; }
.lg__row:hover{ background:var(--card); padding-inline:.6rem; }
.lg__no{ font-family:var(--mono); font-size:.72rem; color:var(--mute); }
.lg__model b{ display:block; font-size:1.15rem; font-weight:500; font-stretch:108%; letter-spacing:-.02em; line-height:1.1; }
.lg__model small{ display:block; font-size:.82rem; color:var(--mute); }
.lg__form{ font-size:.86rem; color:var(--ink-2); }
.lg__cov{ display:grid; grid-template-columns:minmax(0,1fr) 5.2rem; gap:.8rem; align-items:center; }
.lg__cov i{ display:block; height:8px; background:repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px); width:calc(var(--w) * 1%); transform-origin:0 50%; transform:scaleX(0); transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 35ms); }
.lg.is-in .lg__cov i{ transform:scaleX(1); }
.lg__row:hover .lg__cov i{ background:repeating-linear-gradient(90deg, var(--teal) 0 3px, transparent 3px 5px); }
.lg__cov b{ font-weight:500; font-size:.95rem; text-align:right; }
.lg__cov b small{ font-family:var(--mono); font-size:.62rem; color:var(--mute); font-weight:400; margin-left:.15rem; }
.lg__c{ font-size:.92rem; }
.lg__price{ font-weight:500; font-size:.98rem; white-space:nowrap; }
.lg__price.is-poa{ font-weight:400; color:var(--mute); font-size:.86rem; }
.lg__go{ font-family:var(--mono); color:var(--mute); transition:transform var(--t-fast), color var(--t-fast); }
.lg__row:hover .lg__go{ transform:translateX(3px); color:var(--ink); }
.peek{ position:fixed; z-index:50; left:0; top:0; width:210px; pointer-events:none; opacity:0; transform:translate3d(0,0,0) scale(.94); transition:opacity .2s, transform .2s; }
.peek.is-on{ opacity:1; }
.peek img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-sm); box-shadow:0 20px 40px -18px rgba(0,0,0,.45); }
.peek span{ position:absolute; left:8px; bottom:8px; font-family:var(--mono); font-size:.62rem; background:var(--ink); color:var(--paper); padding:.15rem .4rem; border-radius:2px; }

/* ============================================================
   HOME · 03 · COMPARE
   ============================================================ */
.cmp{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr); border-top:1px solid var(--rule); }
.cmp > div{ padding:1rem 1.25rem 1rem 0; border-bottom:1px solid var(--hair); font-size:.95rem; }
.cmp > div:nth-child(3n+2), .cmp > div:nth-child(3n){ padding-left:1.25rem; border-left:1px solid var(--hair); }
.cmp__k{ font-family:var(--mono); font-size:.7rem !important; text-transform:uppercase; color:var(--mute); padding-top:1.15rem !important; }
.cmp__h{ padding-block:1.5rem !important; }
.cmp__h b{ display:block; font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:500; font-stretch:112%; letter-spacing:-.03em; line-height:1; }
.cmp__h span{ display:block; font-size:.9rem; color:var(--mute); margin-top:.5rem; }
.cmp__h .btn{ margin-top:1.2rem; }
.cmp .yes::before{ content:'●'; color:var(--teal); margin-right:.55rem; font-size:.7rem; vertical-align:.1em; }
.cmp .no{ color:var(--mute); }
.cmp .no::before{ content:'○'; margin-right:.55rem; font-size:.7rem; vertical-align:.1em; }
.cmp__plan{ background:var(--card); }

/* ============================================================
   HOME · 04 · PERIODIC TABLE OF SCENT
   ============================================================ */
.pt-wrap{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(1rem,3vw,2.5rem); }
.pt-legend{ display:grid; gap:0; align-content:start; border-top:1px solid var(--rule); }
.pt-legend button{ display:grid; grid-template-columns:14px 1fr auto; gap:.7rem; align-items:center; text-align:left; padding:.6rem 0; border-bottom:1px solid var(--hair); font-size:.92rem; transition:padding var(--t-fast); }
.pt-legend button:hover, .pt-legend button[aria-pressed="true"]{ padding-left:.4rem; }
.pt-legend button[aria-pressed="true"]{ font-weight:600; }
.pt-legend i{ width:14px; height:14px; border:1px solid rgba(0,0,0,.25); }
.pt-legend span{ font-family:var(--mono); font-size:.7rem; color:var(--mute); }
.pt-legend p{ font-size:.84rem; color:var(--mute); padding-top:1rem; }
.ptable{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.pt{ position:relative; aspect-ratio:1/1.02; padding:.7rem .8rem; text-align:left; background:var(--tint); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; flex-direction:column; transition:background var(--t-fast), color var(--t-fast), opacity var(--t); overflow:hidden; }
.pt:hover, .pt:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink); z-index:2; }
.pt.is-dim{ opacity:.22; }
.pt__n{ font-family:var(--mono); font-size:.68rem; color:var(--ink-2); display:flex; justify-content:space-between; }
.pt__n i{ width:8px; height:8px; border-radius:50%; background:var(--dot); margin-top:3px; }
.pt__sym{ font-size:clamp(2rem,4.2vw,3.8rem); font-weight:500; font-stretch:100%; letter-spacing:-.04em; line-height:1; margin-top:auto; }
.pt__name{ font-size:.86rem; font-weight:500; margin-top:.35rem; line-height:1.15; }
.pt__note{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; color:var(--mute); margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt img{ position:absolute; right:-3%; top:-3%; width:56%; mix-blend-mode:multiply; pointer-events:none; }
.pt > span, .pt > b{ position:relative; z-index:1; }
.pt:hover img{ transform:none; }

/* ============================================================
   HOME · 05 · SECTORS
   ============================================================ */
.sec{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.sec__list{ border-top:1px solid var(--rule); }
.sec__list button{ width:100%; display:grid; grid-template-columns:2.4rem 1fr auto; align-items:center; text-align:left; padding:1rem 0; border-bottom:1px solid var(--hair); font-size:1.15rem; font-weight:500; font-stretch:106%; letter-spacing:-.015em; color:var(--mute); transition:color var(--t-fast), padding var(--t); }
.sec__list button span{ font-family:var(--mono); font-size:.68rem; font-weight:400; font-stretch:100%; }
.sec__list button::after{ content:'→'; font-family:var(--mono); opacity:0; transition:opacity var(--t-fast); }
.sec__list button:hover{ color:var(--ink); }
.sec__list button[aria-selected="true"]{ color:var(--ink); padding-left:.5rem; }
.sec__list button[aria-selected="true"]::after{ opacity:1; color:var(--signal); }
.sec__panel{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:1.5rem; }
.sec__img{ position:relative; aspect-ratio:4/3.2; overflow:hidden; border-radius:var(--r-sm); background:var(--hair-2); }
.sec__img img{ width:100%; height:100%; object-fit:cover; transition:opacity .35s; }
.sec__img img.is-swap{ opacity:0; }
.sec__img figcaption{ position:absolute; left:.6rem; bottom:.6rem; font-family:var(--mono); font-size:.6rem; text-transform:uppercase; background:rgba(18,20,19,.72); color:#DADAD6; padding:.2rem .45rem; border-radius:2px; }
.sec__info h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:500; font-stretch:112%; letter-spacing:-.03em; line-height:1.02; }
.sec__info > p{ color:var(--ink-2); margin:.9rem 0 1.4rem; }
.sec__pair{ display:grid; border-top:1px solid var(--rule); }
.sec__pair a{ display:grid; grid-template-columns:5.5rem 1fr auto; gap:.6rem; align-items:center; padding:.8rem 0; border-bottom:1px solid var(--hair); transition:padding var(--t-fast); }
.sec__pair a:hover{ padding-left:.4rem; }
.sec__pair em{ font-style:normal; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; color:var(--mute); }
.sec__pair b{ font-weight:500; }
.sec__pair i{ font-style:normal; font-family:var(--mono); color:var(--mute); }

/* ============================================================
   HOME · 06 · TRIAL TICKET
   ============================================================ */
.ticket{ display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg); position:relative; }
.ticket__stub{ background:var(--ink); color:var(--paper); padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem; border-radius:var(--r-lg) 0 0 var(--r-lg); position:relative; }
.ticket__stub::after{ content:''; position:absolute; right:-1px; top:14px; bottom:14px; border-right:2px dashed var(--paper); opacity:.35; }
.ticket__stub .label{ color:#9DA19E; }
.ticket__big{ font-size:clamp(6rem,11vw,9.5rem); font-weight:300; font-stretch:62%; line-height:.8; letter-spacing:-.05em; }
.ticket__big small{ display:block; font-size:1.1rem; font-weight:500; font-stretch:108%; letter-spacing:-.01em; margin-top:.6rem; line-height:1.2; }
.ticket__stub p{ font-size:.84rem; color:#B9BCB9; }
.ticket__body{ padding:clamp(1.5rem,3vw,2.5rem); }
.ticket__body h2{ font-size:clamp(1.7rem,3vw,2.6rem); font-weight:500; font-stretch:112%; letter-spacing:-.035em; line-height:1; max-width:22ch; }
.ticket__body > p{ color:var(--ink-2); margin:.9rem 0 1.6rem; max-width:56ch; }
.ticket .form{ gap:1rem; }
.ticket .form__row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ticket__vol{ display:flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; padding:.7rem .9rem; background:var(--paper-2); border:1px dashed var(--hair); border-radius:var(--r-sm); }
.ticket__vol b{ color:var(--ink); font-weight:500; }
.ticket__vol a{ margin-left:auto; color:var(--mute); border-bottom:1px solid var(--hair); }

/* ============================================================
   PAGE HEAD (inner pages)
   ============================================================ */
.page-head{ background:var(--paper); padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule); position:relative;
  background-image:linear-gradient(var(--hair-2) 1px, transparent 1px), linear-gradient(90deg, var(--hair-2) 1px, transparent 1px); background-size:56px 56px; }
.page-head .wrap{ position:relative; }
.page-head h1{ margin:1rem 0 1rem; max-width:18ch; }
.page-head p{ color:var(--ink-2); max-width:56ch; font-size:1.05rem; }
.crumbs{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--mute); margin-bottom:1.25rem; }
.crumbs a:hover{ color:var(--ink); }

/* ============================================================
   CARDS / GRIDS (collection, related)
   ============================================================ */
.grid{ display:grid; gap:clamp(.75rem,1.5vw,1.25rem); }
.grid--4{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.card{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--t-fast); }
.card:hover{ border-color:var(--ink); }
.card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--hair-2); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), opacity .4s; }
.card__media img.is-alt{ position:absolute; inset:0; opacity:0; }
.card:hover .card__media img:first-child{ transform:scale(1.03); }
.card:hover .card__media img.is-alt{ opacity:1; }
.card__badge{ position:absolute; top:.6rem; left:.6rem; z-index:2; font-family:var(--mono); font-size:.62rem; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:.2rem .45rem; border-radius:2px; }
.card__quick{ position:absolute; left:.6rem; right:.6rem; bottom:.6rem; z-index:2; opacity:0; transform:translateY(8px); transition:opacity var(--t-fast), transform var(--t); }
.card:hover .card__quick, .card:focus-within .card__quick{ opacity:1; transform:none; }
.card__quick .btn{ background:var(--card); color:var(--ink); border-color:var(--ink); }
.card__quick .btn:hover{ background:var(--ink); color:var(--paper); }
.card__body{ padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.15rem; flex:1; }
.card__model{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; color:var(--mute); }
.card__name{ font-size:1.1rem; font-weight:500; font-stretch:106%; letter-spacing:-.02em; line-height:1.15; }
.card__meta{ font-family:var(--mono); font-size:.7rem; color:var(--ink-2); margin-top:.2rem; }
.card__foot{ margin-top:auto; padding-top:.8rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-top:1px solid var(--hair-2); margin-top:.8rem; }
.price{ font-weight:500; font-size:1rem; }
.price small{ font-family:var(--mono); font-size:.66rem; color:var(--mute); margin-right:.2rem; font-weight:400; }
.price--poa{ font-size:.86rem; color:var(--mute); font-weight:400; }
.swatches{ display:flex; gap:.25rem; }
.swatch{ width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.2); }
.card__link{ position:absolute; inset:0; z-index:1; }
.rail__track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rail__nav{ display:flex; gap:.4rem; }
.rail__btn{ width:38px; height:38px; border:1px solid var(--rule); border-radius:var(--r-sm); display:grid; place-items:center; }
.rail__btn[disabled]{ opacity:.3; }

/* chips / filters */
.chip{ display:inline-flex; align-items:center; height:34px; padding:0 .85rem; border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--card); font-size:.86rem; color:var(--ink-2); transition:all var(--t-fast); }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filters{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.filters .chip i{ flex:none; }

/* ============================================================
   SCENTS PAGE GRID
   ============================================================ */
.scent-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:clamp(.75rem,1.4vw,1.1rem); }
.scent{ position:relative; text-align:left; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--t-fast); }
.scent:hover{ border-color:var(--ink); }
.scent.is-hidden{ display:none; }
.scent__media{ aspect-ratio:1; overflow:hidden; background:var(--card); }
.scent__media img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .8s var(--ease); }
.scent:hover .scent__media img{ transform:scale(1.04); }
.scent__no{ position:absolute; top:.6rem; left:.7rem; font-family:var(--mono); font-size:.68rem; color:var(--mute); }
.scent__dot{ position:absolute; top:.75rem; right:.75rem; width:8px; height:8px; border-radius:50%; }
.scent__body{ padding:.8rem .9rem 1rem; display:grid; gap:.15rem; border-top:1px solid var(--hair-2); }
.scent__name{ font-size:1.05rem; font-weight:500; font-stretch:106%; letter-spacing:-.015em; }
.scent__profile{ font-size:.82rem; color:var(--ink-2); }
.scent__fam{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; color:var(--mute); margin-top:.3rem; }

/* scent drawer */
.sd__head{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; }
.sd__sym{ width:112px; aspect-ratio:1; background:var(--tint,var(--paper-2)); border:1px solid var(--rule); padding:.55rem .6rem; display:flex; flex-direction:column; justify-content:space-between; }
.sd__sym span{ font-family:var(--mono); font-size:.64rem; }
.sd__sym b{ font-size:2.8rem; font-weight:500; letter-spacing:-.04em; line-height:1; }
.sd__img{ margin-top:1.25rem; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-sm); }
.sd__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; mix-blend-mode:multiply; }
.sd__notes{ display:grid; grid-template-columns:1fr 1fr; margin-top:1.25rem; border-top:1px solid var(--rule); }
.sd__note{ padding:.8rem 0; border-bottom:1px solid var(--hair); }
.sd__note + .sd__note{ padding-left:1rem; border-left:1px solid var(--hair); }
.sd__note em{ font-style:normal; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; color:var(--mute); }
.sd__note p{ font-size:1.05rem; font-weight:500; margin-top:.2rem; }
.sd__spaces{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.sd__spaces span{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; padding:.3rem .55rem; border:1px solid var(--hair); border-radius:2px; }

/* ============================================================
   DRAWER / SEARCH
   ============================================================ */
.scrim{ position:fixed; inset:0; z-index:80; background:rgba(18,20,19,.35); opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t); }
.scrim.is-open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(440px,100vw); background:var(--paper); border-left:1px solid var(--rule); display:flex; flex-direction:column; transform:translateX(101%); visibility:hidden; transition:transform .45s var(--ease), visibility .45s; }
.drawer.is-open{ transform:none; visibility:visible; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 var(--pad); height:var(--header-h); border-bottom:1px solid var(--rule); }
.drawer__head h2{ font-size:1rem; font-weight:500; }
.drawer__body{ flex:1; overflow-y:auto; padding:1.25rem var(--pad); }
.drawer__foot{ border-top:1px solid var(--rule); padding:1rem var(--pad) calc(1rem + env(safe-area-inset-bottom)); display:grid; gap:.6rem; background:var(--paper-2); }
.icon-btn{ width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--ink-2); }
.icon-btn:hover{ background:var(--paper-2); color:var(--ink); }
.icon-btn svg{ width:18px; height:18px; stroke-width:1.5; }
.ship-bar{ margin-bottom:1rem; }
.ship-bar p{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; margin-bottom:.45rem; }
.ship-bar__track{ height:6px; background:repeating-linear-gradient(90deg,var(--hair) 0 3px,transparent 3px 5px); }
.ship-bar__fill{ display:block; height:100%; background:repeating-linear-gradient(90deg,var(--teal) 0 3px,transparent 3px 5px); transition:width .6s var(--ease); }
.line{ display:grid; grid-template-columns:68px 1fr auto; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--hair); align-items:start; }
.line img{ width:68px; height:85px; object-fit:cover; border-radius:2px; }
.line__name{ display:block; font-weight:500; line-height:1.25; }
.line__opt{ display:block; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; color:var(--mute); }
.line__price{ display:block; font-size:.9rem; margin-top:.3rem; }
.qty{ display:inline-flex; align-items:center; vertical-align:middle; border:1px solid var(--rule); border-radius:var(--r-sm); margin-top:.5rem; background:var(--card); }
.qty button{ width:28px; height:28px; font-family:var(--mono); }
.qty button:hover{ background:var(--paper-2); }
.qty span{ min-width:26px; text-align:center; font-family:var(--mono); font-size:.8rem; }
.line__x{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; color:var(--mute); border-bottom:1px solid var(--hair); }
.line__x:hover{ color:var(--signal); }
.line.is-leaving{ opacity:0; transform:translateX(12px); transition:opacity .25s, transform .25s; }
.totals{ display:grid; gap:.3rem; }
.totals div{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--ink-2); }
.totals div.is-total{ font-size:1.2rem; font-weight:500; color:var(--ink); padding-top:.5rem; margin-top:.3rem; border-top:1px solid var(--rule); }
.empty{ text-align:center; padding:3rem 1rem; color:var(--mute); }
.empty svg{ margin:0 auto 1rem; color:var(--hair); }

.search{ position:fixed; inset:0; z-index:95; background:var(--paper); opacity:0; visibility:hidden; transition:opacity var(--t-fast), visibility var(--t-fast); overflow-y:auto; }
.search.is-open{ opacity:1; visibility:visible; }
.search__bar{ display:flex; align-items:center; gap:1rem; border-bottom:1px solid var(--rule); height:84px; }
.search__bar input{ flex:1; border:0; background:none; outline:none; font-size:clamp(1.6rem,4vw,2.8rem); font-weight:500; font-stretch:110%; letter-spacing:-.03em; }
.search__bar input::placeholder{ color:var(--hair); }
.search__res{ padding-block:1.5rem 4rem; }
.search__hint{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; color:var(--mute); margin-bottom:.75rem; }
.search__list{ display:grid; border-top:1px solid var(--hair); max-width:860px; }
.search__item{ display:flex; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--hair); transition:padding var(--t-fast); }
.search__item:hover{ padding-left:.5rem; }
.search__item img{ width:44px; height:55px; object-fit:cover; border-radius:2px; flex:none; }
.search__item > span{ flex:1; min-width:0; }
.search__item b{ display:block; font-weight:500; }
.search__item span span{ font-size:.82rem; color:var(--mute); }
.search__item i{ font-style:normal; font-family:var(--mono); font-size:.72rem; color:var(--ink-2); }

/* ============================================================
   COLLECTION
   ============================================================ */
.shop{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
.facets{ position:sticky; top:calc(var(--header-h) + 1rem); display:grid; gap:1.5rem; }
.facet h4{ font-family:var(--mono); font-size:.68rem; font-weight:400; text-transform:uppercase; color:var(--mute); padding-bottom:.5rem; border-bottom:1px solid var(--rule); margin-bottom:.3rem; }
.facet label{ display:flex; align-items:center; gap:.6rem; padding:.35rem 0; cursor:pointer; font-size:.9rem; }
.facet input{ appearance:none; width:14px; height:14px; border:1px solid var(--rule); border-radius:2px; display:grid; place-items:center; flex:none; background:var(--card); }
.facet input:checked{ background:var(--ink); }
.facet input:checked::after{ content:''; width:6px; height:6px; background:var(--paper); }
.facet label span{ margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--mute); }
.shop__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; padding-bottom:.8rem; border-bottom:1px solid var(--rule); }
.shop__count{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; color:var(--mute); }
.select{ position:relative; }
.select select{ appearance:none; height:36px; padding:0 2.2rem 0 .8rem; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--card); font-size:.86rem; cursor:pointer; }
.select::after{ content:'↓'; position:absolute; right:.75rem; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:.75rem; pointer-events:none; }
.facets-toggle{ display:none; }
.no-res{ padding:3rem 1rem; text-align:center; color:var(--mute); grid-column:1/-1; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; padding-block:clamp(1.25rem,3vw,2rem) clamp(2rem,4vw,3rem); }
.gallery{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:.75rem; position:sticky; top:calc(var(--header-h) + 1rem); }
.gallery__thumbs{ display:grid; gap:.5rem; align-content:start; }
.gallery__thumbs button{ aspect-ratio:4/5; border:1px solid var(--hair); border-radius:2px; overflow:hidden; opacity:.6; transition:opacity var(--t-fast), border-color var(--t-fast); }
.gallery__thumbs button:hover{ opacity:1; }
.gallery__thumbs button[aria-current="true"]{ opacity:1; border-color:var(--ink); }
.gallery__thumbs img{ width:100%; height:100%; object-fit:cover; }
.gallery__main{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--hair-2); border-radius:var(--r-md); cursor:zoom-in; }
.gallery__main img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.gallery__main.is-zoom img{ transform:scale(1.9); cursor:zoom-out; }
.gallery__main img.is-swapping{ opacity:0; }
.pdp__model{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; color:var(--mute); }
.pdp h1{ font-size:clamp(2rem,3.6vw,3.2rem); font-weight:500; font-stretch:114%; letter-spacing:-.04em; line-height:.98; margin:.7rem 0 .6rem; }
.pdp__tagline{ font-size:1.15rem; color:var(--teal); font-weight:500; }
.pdp__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; margin:1.4rem 0; padding-block:1rem; border-block:1px solid var(--rule); }
.pdp__price b{ flex:none; white-space:nowrap; font-size:2rem; font-weight:500; font-stretch:90%; letter-spacing:-.02em; }
.pdp__price i{ font-style:normal; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--mute); }
.pdp__opt{ margin-bottom:1.3rem; }
.pdp__opt > h4{ font-family:var(--mono); font-size:.7rem; font-weight:400; text-transform:uppercase; color:var(--mute); margin-bottom:.6rem; display:flex; gap:.5rem; }
.pdp__opt > h4 b{ color:var(--ink); font-weight:500; }
.colours{ display:flex; gap:.5rem; flex-wrap:wrap; }
.colours button{ width:34px; height:34px; border-radius:50%; border:1px solid transparent; padding:3px; }
.colours button[aria-checked="true"]{ border-color:var(--ink); }
.colours button i{ display:block; width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.pdp__buy{ display:flex; gap:.6rem; margin-bottom:.6rem; }
.pdp__buy .qty{ margin:0; }
.pdp__buy .qty button{ width:40px; height:100%; }
.pdp__note{ display:flex; gap:.6rem; font-size:.86rem; color:var(--ink-2); padding:.85rem 1rem; border:1px dashed var(--hair); border-radius:var(--r-sm); background:var(--paper-2); margin-top:.4rem; }
.pdp__note svg{ flex:none; margin-top:2px; color:var(--signal); }
.pdp__note a{ border-bottom:1px solid currentColor; }
.acc{ border-top:1px solid var(--rule); margin-top:2rem; }
.acc__item{ border-bottom:1px solid var(--hair); }
.acc__btn{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:1rem 0; text-align:left; font-size:1.02rem; font-weight:500; }
.acc__btn i{ font-style:normal; font-family:var(--mono); }
.acc__btn i::before{ content:'+'; }
.acc__btn[aria-expanded="true"] i::before{ content:'−'; }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel-in{ padding-bottom:1.2rem; color:var(--ink-2); font-size:.92rem; }
.acc__panel-in a{ border-bottom:1px solid currentColor; }
.spec-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.spec-table th,.spec-table td{ text-align:left; padding:.55rem 0; border-bottom:1px solid var(--hair-2); vertical-align:top; }
.spec-table th{ font-family:var(--mono); font-size:.68rem; font-weight:400; text-transform:uppercase; color:var(--mute); width:42%; }
.spec-table td{ font-weight:500; }
.feat-list{ display:grid; gap:1rem; }
.feat-list li{ display:grid; grid-template-columns:2.2rem 1fr; gap:.5rem; padding-top:1rem; border-top:1px solid var(--hair); }
.feat-list b{ font-family:var(--mono); font-size:.72rem; font-weight:400; color:var(--signal); }
.feat-list strong{ display:block; font-weight:500; margin-bottom:.15rem; }
.feat-list p{ font-size:.9rem; color:var(--ink-2); }
.sticky-buy{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; background:var(--paper); border-top:1px solid var(--rule); padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom)); transform:translateY(102%); transition:transform var(--t); }
.sticky-buy.is-on{ transform:none; }
.sticky-buy__inner{ display:flex; align-items:center; gap:1rem; }
.sticky-buy b{ display:block; font-weight:500; }
.sticky-buy span{ font-family:var(--mono); font-size:.68rem; color:var(--mute); }
.sticky-buy .btn{ margin-left:auto; }

/* ============================================================
   GENERIC BLOCKS (business / about / contact)
   ============================================================ */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(1.5rem,4vw,4rem); align-items:start; }
.split__media{ position:relative; overflow:hidden; aspect-ratio:4/3.3; border-radius:var(--r-md); background:var(--hair-2); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split--reverse .split__media{ order:2; }
.steps{ counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); border-top:1px solid var(--rule); }
.step{ padding:1.1rem 1.25rem 1.25rem 0; border-bottom:1px solid var(--hair); }
.step + .step{ padding-left:1.25rem; border-left:1px solid var(--hair); }
.step::before{ counter-increment:s; content:'0' counter(s); display:block; font-family:var(--mono); font-size:.72rem; color:var(--signal); margin-bottom:1.6rem; }
.step h4{ margin-bottom:.4rem; }
.step p{ font-size:.9rem; color:var(--ink-2); }
.section--sage{ background:var(--paper-2); border-block:1px solid var(--hair); }
.section--stone{ background:var(--card); border-block:1px solid var(--hair); }
.section--dark{ background:var(--graphite); color:#B9BCB9; }
.section--dark .h1,.section--dark .h2,.section--dark .h3,.section--dark .h4{ color:var(--paper); }
.section--dark .kicker{ color:#8D918E; }
.section--dark .lead, .section--dark .muted{ color:#B9BCB9; }
.section--dark .section-head{ border-top-color:var(--paper); }
.section--dark .step, .section--dark .stat{ border-color:#3A3E3C; }
.section--dark .steps{ border-top-color:var(--paper); }
.section--dark .feat-list li{ border-color:#3A3E3C; }
.section--dark .feat-list strong{ color:var(--paper); }
.section--dark .btn--mint{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.section--dark .btn--mint:hover{ background:var(--signal); border-color:var(--signal); color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:1px solid var(--rule); }
.section--dark .stats{ border-top-color:var(--paper); }
.stat{ padding:1.25rem 1.25rem 1.25rem 0; border-bottom:1px solid var(--hair); }
.stat + .stat{ padding-left:1.25rem; border-left:1px solid var(--hair); }
.stat b{ display:block; font-size:clamp(2.6rem,5vw,4.2rem); font-weight:300; font-stretch:62%; letter-spacing:-.04em; line-height:.9; }
.section--dark .stat b{ color:var(--paper); }
.stat > span{ display:block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--mute); margin-top:.7rem; }
.section--dark .stat > span{ color:#8D918E; }
.stat > p{ font-size:.88rem; margin-top:.5rem; }
#vert-grid .card{ padding:1.25rem !important; }
#vert-grid .card__foot{ border-top:1px solid var(--hair) !important; }

/* forms */
.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.1rem; }
.form label{ display:block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--mute); margin-bottom:.35rem; }
.form input, .form select, .form textarea{ width:100%; height:46px; padding:0 .85rem; border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--card); font-size:.95rem; outline:none; transition:border-color var(--t-fast); }
.form textarea{ height:auto; min-height:110px; padding:.7rem .85rem; resize:vertical; }
.form select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--ink); }
.form input::placeholder, .form textarea::placeholder{ color:#A3A6A3; }
.form input:user-invalid, .form textarea:user-invalid{ border-color:var(--signal); }
.form .err{ font-size:.74rem; color:var(--signal); margin-top:.3rem; display:none; }
.form input:user-invalid ~ .err, .form textarea:user-invalid ~ .err{ display:block; }
.form__note{ font-size:.8rem; color:var(--mute); }
.form-ok{ border:1px solid var(--rule); border-radius:var(--r-md); padding:1.5rem; display:none; background:var(--card); }
.form-ok.is-on{ display:block; }
.form-ok a{ border-bottom:1px solid currentColor; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#9DA19E; padding-block:clamp(3rem,6vw,4.5rem) 1.5rem; }
.footer__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid #2C302E; }
.footer h5{ font-family:var(--mono); font-size:.68rem; font-weight:400; text-transform:uppercase; color:#6E726F; margin-bottom:.9rem; }
.footer ul{ display:grid; gap:.45rem; }
.footer a{ color:#D3D5D2; font-size:.92rem; transition:color var(--t-fast); }
.footer a:hover{ color:#fff; }
.footer__intro p{ font-size:.92rem; margin:1rem 0 1.4rem; max-width:36ch; }
.nl{ display:flex; max-width:360px; border:1px solid #3A3E3C; border-radius:var(--r-sm); }
.nl input{ flex:1; height:44px; padding:0 .8rem; border:0; background:transparent; color:#fff; outline:none; font-size:.9rem; }
.nl input::placeholder{ color:#6E726F; }
.nl button{ width:44px; height:44px; color:#fff; display:grid; place-items:center; border-left:1px solid #3A3E3C; }
.nl button:hover{ background:var(--signal); }
.footer__bot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; padding-top:1.5rem; font-size:.8rem; }
.footer__bot .mono{ color:#6E726F; font-size:.66rem; }
.pay{ display:flex; gap:.35rem; flex-wrap:wrap; }
.pay span{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; padding:.2rem .45rem; border:1px solid #3A3E3C; border-radius:2px; color:#8D918E; }
.social{ display:flex; gap:.35rem; }
.social a{ width:34px; height:34px; border:1px solid #3A3E3C; border-radius:var(--r-sm); display:grid; place-items:center; }
.social a:hover{ border-color:#fff; }

/* misc */
.toasts{ position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); z-index:120; display:grid; gap:.5rem; justify-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); padding:.7rem 1rem; border-radius:var(--r-sm); font-size:.88rem; animation:toastIn .3s var(--ease); }
.toast svg{ color:#7FD1B8; flex:none; }
.toast.is-out{ animation:toastOut .25s forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(6px); } }
.to-top{ position:fixed; right:var(--pad); bottom:1.25rem; z-index:55; width:40px; height:40px; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--paper); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity var(--t-fast), visibility var(--t-fast); }
.to-top.is-on{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--ink); color:var(--paper); }
[data-reveal]{ opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0ms); }
[data-reveal].is-in{ opacity:1; transform:none; }
.rule{ height:1px; background:var(--hair); border:0; }



/* ---------- hero photo stage ---------- */
.inst__left{ gap:1.25rem; }
.inst__read{ border-top:1px solid var(--rule); padding-top:.9rem; }
.inst__read .odo{ font-size:clamp(5rem,8vw,8.6rem); }
.inst__read .scale{ margin:1rem 0 .4rem; height:66px; }
.inst__ctl .seg{ margin-top:1rem; }
.inst__right{ padding:0; position:relative; min-height:560px; display:block; }
.stage{ position:absolute; inset:0; margin:0; overflow:hidden; background:var(--hair-2); }
.stage__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; opacity:0; transform:scale(1.05); transition:opacity .9s var(--ease), transform 2.4s var(--ease); }
.stage__img.is-on{ opacity:1; transform:none; }
.stage__marks{ position:absolute; inset:20px; pointer-events:none; z-index:2;
  background:
    linear-gradient(var(--ink),var(--ink)) left top/22px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) left top/1px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right top/22px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) right top/1px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom/22px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) left bottom/1px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right bottom/22px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) right bottom/1px 22px no-repeat; opacity:.7; }
.stage__tag{ position:absolute; top:34px; left:34px; z-index:3; display:inline-flex; align-items:center; gap:.55rem; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.72rem; text-transform:uppercase; padding:.5rem .75rem; border-radius:2px; }
.stage__dim{ position:absolute; right:40px; top:18%; bottom:34%; width:1px; background:var(--ink); z-index:3; }
.stage__dim::before,.stage__dim::after{ content:''; position:absolute; left:-5px; width:11px; height:1px; background:var(--ink); }
.stage__dim::before{ top:0; } .stage__dim::after{ bottom:0; }
.stage__dim span{ position:absolute; top:50%; left:-9px; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-family:var(--mono); font-size:.66rem; background:var(--card); color:var(--ink); padding:.45rem .2rem; border:1px solid var(--rule); border-radius:2px; white-space:nowrap; }
.stage__cap{ position:absolute; left:34px; right:34px; bottom:34px; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1.25rem; align-items:center; background:rgba(247,247,244,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--rule); border-radius:var(--r-md); padding:1rem 1.1rem; }
.stage__txt{ display:grid; gap:.1rem; min-width:0; }
.stage__model{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--signal); }
.stage__txt b{ font-size:clamp(1.25rem,2vw,1.7rem); font-weight:500; font-stretch:112%; letter-spacing:-.03em; line-height:1.05; }
.stage__txt > span:last-child{ font-family:var(--mono); font-size:.72rem; color:var(--ink-2); }
.stage__act{ display:flex; gap:.4rem; }
.stage__alts{ grid-column:1/-1; font-size:.82rem; color:var(--mute); }
.stage__alts:empty{ display:none; }
.stage__alts a{ color:var(--ink); border-bottom:1px solid var(--hair); margin-left:.3rem; }

/* compare column images */
.cmp__img{ margin:0 0 1.1rem; aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-sm); background:var(--hair-2); }
.cmp__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.cmp__h:hover .cmp__img img{ transform:scale(1.04); }

/* sectors: larger photo + pin */
.sec__panel{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
.sec__img{ aspect-ratio:4/3; }
.pin{ position:absolute; z-index:2; width:0; height:0; }
.pin > i{ position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(247,247,244,.85); }
.pin > i::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--signal); animation:pinPulse 2s ease-out infinite; }
@keyframes pinPulse{ to{ transform:scale(2.4); opacity:0; } }
.pin__card{ position:absolute; left:22px; top:0; transform:translateY(-50%); background:var(--card); border:1px solid var(--rule); border-radius:2px; padding:.45rem .65rem; font-family:var(--mono); font-size:.64rem; color:var(--ink-2); white-space:nowrap; }
.pin__card b{ display:block; font-family:var(--sans); font-size:.98rem; font-weight:500; color:var(--ink); }
.pin.is-left .pin__card{ left:auto; right:22px; }

/* ticket stub photo */
.ticket__stub{ overflow:hidden; isolation:isolate; }
.ticket__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.6; }
.ticket__stub::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(18,20,19,.2), rgba(18,20,19,.75)); }
.ticket__stub::after{ right:0; }

@media (max-width:1080px){
  .inst__left{ display:contents; }
  .inst__head{ order:1; padding:1.75rem var(--pad) 1.25rem; }
  .inst__right{ order:2; min-height:0; height:clamp(440px, 72svh, 760px); margin:0 var(--pad); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; }
  .inst__read{ order:3; padding:1.25rem var(--pad) 0; border-top:0; }
  .inst__ctl{ order:4; padding:.5rem var(--pad) 2rem; }
  .sec__panel{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .stage__marks{ inset:12px; }
  .stage__tag{ top:22px; left:22px; font-size:.64rem; }
  .stage__dim{ right:28px; }
  .stage__cap{ left:14px; right:14px; bottom:14px; grid-template-columns:1fr; padding:.8rem .85rem; }
  .stage__act .btn{ flex:1; }
  .pt img{ width:52%; right:-4%; top:-4%; }
  .pt__sym{ font-size:1.9rem; }
  .pt__note{ display:none; }
  .pt{ padding:.55rem .6rem; }
}

@media (max-width:640px){
  .odo{ font-size:clamp(5.5rem,30vw,9rem); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .lg__row, .lg__hd{ grid-template-columns:2rem 48px minmax(0,1.5fr) minmax(0,2fr) minmax(0,.8fr) minmax(0,1fr) 1.2rem; }
  .lg__form, .lg__hd .c-form, .lg__c.c-noise, .lg__hd .c-noise{ display:none; }
}
@media (max-width:1080px){
  .inst__grid{ grid-template-columns:1fr; min-height:0; }
  .blk__head{ grid-template-columns:1fr; }
  .blk__aside{ justify-self:start; text-align:left; }
  .pt-wrap{ grid-template-columns:1fr; }
  .pt-legend{ grid-template-columns:repeat(4,minmax(0,1fr)); border-top:0; }
  .pt-legend button{ border:1px solid var(--hair); margin:-1px 0 0 -1px; padding:.5rem .6rem; font-size:.84rem; }
  .pt-legend p{ grid-column:1/-1; }
  .sec{ grid-template-columns:1fr; }
  .shop{ grid-template-columns:1fr; }
  .facets{ position:static; display:none; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); padding:1rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--card); }
  .facets.is-open{ display:grid; }
  .facets-toggle{ display:inline-flex; }
}
@media (max-width:960px){
  .nav, .tool--search span, .tool--search kbd{ display:none; }
  .burger{ display:grid; }
  .site-header__inner{ grid-template-columns:auto 1fr auto; }
  .header-tools{ grid-column:3; }
  .status__mid{ display:none; }
  .pdp{ grid-template-columns:1fr; }
  .gallery{ position:static; grid-template-columns:1fr; }
  .gallery__main{ aspect-ratio:1; }
  .gallery__thumbs{ grid-auto-flow:column; grid-auto-columns:56px; overflow-x:auto; order:2; }
  .sticky-buy{ display:block; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__intro{ grid-column:1/-1; }
  .sec__panel{ grid-template-columns:1fr; }
  .ticket{ grid-template-columns:1fr; }
  .ticket__stub{ border-radius:var(--r-lg) var(--r-lg) 0 0; flex-direction:row; align-items:flex-end; }
  .ticket__stub::after{ right:14px; left:14px; top:auto; bottom:-1px; border-right:0; border-bottom:2px dashed var(--paper); }
  .ticket .form__row{ grid-template-columns:1fr; }
  .cmp{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .cmp > .cmp__k{ grid-column:1/-1; padding-bottom:0 !important; border-bottom:0; }
  .cmp > .cmp__k:first-child{ display:none; }
  .cmp > div:nth-child(3n+2){ padding-left:0; border-left:0; }
  .step + .step, .stat + .stat{ padding-left:0; border-left:0; }
  .split--reverse .split__media{ order:0; }
}
@media (max-width:640px){
  :root{ --header-h:56px; }
  .status__r{ display:none; }
  .ptable{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pt-legend{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spec__rows{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spec__rows div:nth-child(2){ border-right:0; }
  .spec__rows div:nth-child(3){ padding-left:0; }
  .spec__rows div:nth-child(n+3){ border-top:1px solid var(--hair); }
  .scale__tick em{ display:none; }
  .lg__row, .lg__hd{ grid-template-columns:44px minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.9fr); gap:.6rem; }
  .lg__th img{ width:44px; }
  .lg__no, .lg__hd .c-no, .lg__go, .lg__hd .c-go, .lg__c.c-oil, .lg__hd .c-oil{ display:none; }
  .lg__cov{ grid-template-columns:1fr; gap:.3rem; }
  .lg__cov b{ text-align:left; }
  .grid--4, .scent-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .card__quick{ opacity:1; transform:none; position:static; margin:.5rem .6rem 0; }
  .footer__top{ grid-template-columns:1fr; }
  .mega{ display:none; }
  .drawer{ width:100%; }
  .to-top{ bottom:5rem; }
  .ticket__stub{ flex-direction:column; align-items:flex-start; }
}
@media (hover:none){ .peek{ display:none; } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .lg__cov i{ transform:none; }
}


/* ============================================================
   DARK THEME — fixes for spots that assumed a light ground
   ============================================================ */
.status{ background:var(--graphite); color:#9DA19E; border-bottom:1px solid var(--hair-2); }
.site-header{ background:rgba(14,16,18,.84); border-bottom-color:var(--hair); }
.footer{ background:var(--graphite); border-top:1px solid var(--hair); }
.btn--teal, .btn--mint, .btn--light{ color:var(--onlight); }
.btn--teal:hover, .btn--mint:hover, .btn--light:hover{ color:var(--onlight); background:var(--ink); }
.btn:hover{ color:var(--onlight); }
.btn--ghost:hover{ color:var(--onlight); }
.card__quick .btn{ background:var(--paper); color:var(--ink); }
.card__quick .btn:hover{ background:var(--ink); color:var(--onlight); }

/* hero stage — photos are light, so overlays on them stay dark-on-light */
.stage__marks{ background:
    linear-gradient(#121413,#121413) left top/22px 1px no-repeat, linear-gradient(#121413,#121413) left top/1px 22px no-repeat,
    linear-gradient(#121413,#121413) right top/22px 1px no-repeat, linear-gradient(#121413,#121413) right top/1px 22px no-repeat,
    linear-gradient(#121413,#121413) left bottom/22px 1px no-repeat, linear-gradient(#121413,#121413) left bottom/1px 22px no-repeat,
    linear-gradient(#121413,#121413) right bottom/22px 1px no-repeat, linear-gradient(#121413,#121413) right bottom/1px 22px no-repeat; }
.stage__dim, .stage__dim::before, .stage__dim::after{ background:#121413; }
.stage__cap{ background:rgba(16,19,21,.82); border-color:rgba(236,236,231,.2); }
.stage__tag{ background:var(--graphite); color:var(--ink); border:1px solid rgba(236,236,231,.2); }
.inst__right{ border-left:0; }

/* periodic table: pastel tiles keep dark lettering */
.pt{ color:var(--onlight); border-color:var(--paper) !important; }
.ptable{ border-color:var(--paper); gap:0; }
.pt__n{ color:#3A3E3C; }
.pt__note{ color:#5E625F; }
.pt:hover, .pt:focus-visible{ box-shadow:inset 0 0 0 2px var(--onlight); }
.pt-legend i{ border-color:rgba(255,255,255,.25); }

/* scent photos have white studio backgrounds: sit them on a light plate */
.scent__media, .sd__img{ background:var(--plate); }
.sd__sym{ color:var(--onlight); }
.search__item img{ background:var(--plate); }

/* section--dark is now "darker than the page" */
.section--dark{ background:var(--graphite); color:var(--ink-2); border-block:1px solid var(--hair-2); }
.section--dark .h1,.section--dark .h2,.section--dark .h3,.section--dark .h4,
.section--dark .stat b, .section--dark .feat-list strong{ color:var(--ink); }
.section--dark .section-head, .section--dark .steps, .section--dark .stats{ border-top-color:var(--rule); }
.section--dark .btn--on-dark, .page-head .btn--on-dark{ color:var(--ink); border-color:var(--rule); }
.section--dark .btn--on-dark:hover, .page-head .btn--on-dark:hover{ background:var(--ink); color:var(--onlight); }
.section--dark .btn--mint{ background:var(--teal); border-color:var(--teal); color:var(--onlight); }

/* ticket stub is the darkest thing on the page */
.ticket{ background:var(--card); }
.ticket__stub{ background:var(--graphite); color:var(--ink); }

/* toasts and sticky surfaces */
.toast{ background:var(--ink); color:var(--onlight); }
.toast svg{ color:#1C7A6E; }
.sticky-buy{ background:rgba(14,16,18,.94); backdrop-filter:blur(10px); }
.nl, .nl button{ border-color:var(--hair); }
.footer__top{ border-bottom-color:var(--hair); }
.pay span, .social a{ border-color:var(--hair); }
::selection{ background:var(--teal); color:var(--onlight); }

.page-head .crumbs{ font-size:.68rem; color:var(--mute); max-width:none; }

/* ============================================================
   HOME · 02 · range strip (replaces the 17-row ledger)
   ============================================================ */
.rg__bar{ display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.25rem; }
.rg__tabs{ display:flex; border:1px solid var(--rule); border-radius:var(--r-sm); overflow-x:auto; scrollbar-width:none; }
.rg__tabs::-webkit-scrollbar{ display:none; }
.rg__tabs button{ display:grid; grid-template-columns:auto auto; column-gap:.6rem; align-items:baseline; text-align:left; padding:.65rem 1rem; border-right:1px solid var(--hair); white-space:nowrap; transition:background var(--t-fast), color var(--t-fast); }
.rg__tabs button:last-child{ border-right:0; }
.rg__tabs b{ font-weight:500; font-size:.95rem; }
.rg__tabs span{ grid-column:1; font-family:var(--mono); font-size:.64rem; color:var(--mute); }
.rg__tabs i{ grid-row:1 / span 2; grid-column:2; align-self:center; font-style:normal; font-family:var(--mono); font-size:.66rem; color:var(--mute); border:1px solid var(--hair); border-radius:99px; padding:.05rem .45rem; }
.rg__tabs button:hover{ background:var(--paper-2); }
.rg__tabs button[aria-selected="true"]{ background:var(--ink); color:var(--onlight, var(--paper)); }
.rg__tabs button[aria-selected="true"] span, .rg__tabs button[aria-selected="true"] i{ color:inherit; opacity:.7; border-color:currentColor; }
.rg__track{ grid-auto-columns:clamp(210px, 21vw, 270px) !important; padding-bottom:.25rem; }
.rg__track .card{ transition:opacity .45s var(--ease), transform .45s var(--ease), border-color var(--t-fast); transition-delay:var(--d,0ms); }
.rail__btn{ border-color:var(--rule); color:var(--ink); }
.rail__btn:hover:not([disabled]){ background:var(--ink); color:var(--onlight, var(--paper)); }
@media (max-width:640px){
  .rg__bar{ flex-direction:column; align-items:stretch; }
  .rg__bar .rail__nav{ display:none; }
  .rg__track{ grid-auto-columns:68% !important; }
}

/* ============================================================
   HERO v3 — full-width ambient banner, whole machine on the right
   ============================================================ */
.inst{ position:relative; overflow:hidden; isolation:isolate; background:var(--paper); background-image:none; }
.inst__bg{ position:absolute; inset:0; z-index:-1; }
.inst__bg img{ position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; filter:blur(48px) saturate(1.25) brightness(.55); opacity:0; transition:opacity 1.2s var(--ease); }
.inst__bg img.is-on{ opacity:1; }
.inst__bg::after{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(14,16,18,.94) 0%, rgba(14,16,18,.78) 38%, rgba(14,16,18,.35) 70%, rgba(14,16,18,.25) 100%),
    linear-gradient(0deg, rgba(14,16,18,.9) 0%, transparent 18%),
    linear-gradient(rgba(236,236,231,.035) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(236,236,231,.035) 1px, transparent 1px) 0 0/56px 56px; }
.inst__left{ background:transparent; border-right:0; }
.inst__read{ border-top-color:rgba(236,236,231,.18); }
.inst__right{ display:grid; place-items:center; padding:clamp(1.5rem,3vw,2.5rem) var(--pad) clamp(1.5rem,3vw,2.5rem) 0; min-height:0; }
.stage{ position:relative; inset:auto; height:clamp(460px, calc(100svh - 170px), 780px); aspect-ratio:4/5; max-width:100%;
  border:1px solid rgba(236,236,231,.22); border-radius:var(--r-md); box-shadow:0 40px 90px -40px rgba(0,0,0,.85); }
.stage__img{ object-position:center; transform:scale(1.03); }
.stage__cap{ left:18px; right:18px; bottom:18px; grid-template-columns:1fr; }
.stage__act .btn{ flex:1; }
.stage__tag{ top:30px; left:30px; }
.stage__dim{ right:34px; }
@media (max-width:1080px){
  .inst__right{ order:2; height:auto; margin:0; border:0; border-radius:0; overflow:visible; padding:0 var(--pad); }
  .stage{ height:auto; width:100%; max-width:520px; }
  .inst__bg::after{ background:linear-gradient(180deg, rgba(14,16,18,.9) 0%, rgba(14,16,18,.55) 40%, rgba(14,16,18,.92) 100%); }
}

/* ============================================================
   HERO v4 — machine full-height on the right, specs on the image,
   compact controls on the left
   ============================================================ */
.inst{ min-height:clamp(640px, calc(100svh - 92px), 940px); display:flex; }
.inst__bg{ display:none; }
.inst__grid{ position:static; display:block; width:100%; min-height:0; }
.inst__left{ position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  width:min(520px, 42%); min-height:100%; padding:clamp(2rem,4vw,3.5rem) 0 clamp(2rem,4vw,3.5rem) var(--pad); }
.inst__head .inst__intro{ max-width:44ch; }
.inst__read{ padding-top:1rem; }
.inst__read .scale{ margin:.6rem 0 0; height:62px; }
.inst__right{ position:static; padding:0; display:block; }

.stage{ position:absolute; top:0; right:0; bottom:0; left:auto; width:64%; height:auto; aspect-ratio:auto; max-width:none;
  border:0; border-radius:0; box-shadow:none; background:var(--paper); z-index:1;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%); mask-image:linear-gradient(90deg, transparent 0%, #000 30%); }
.stage::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(14,16,18,.85) 0%, rgba(14,16,18,0) 30%), linear-gradient(90deg, rgba(14,16,18,.55) 0%, rgba(14,16,18,0) 45%); }
.stage__img{ object-fit:cover; object-position:60% 45%; transform:scale(1.02); }
.stage__marks{ display:none; }
.stage__tag{ top:28px; left:auto; right:28px; }
.stage__dim{ top:16%; bottom:30%; right:32px; }
.stage__dim, .stage__dim::before, .stage__dim::after{ background:rgba(18,20,19,.7); }

/* spec callouts floating on the photo */
.stage__specs{ position:absolute; z-index:3; left:7%; top:50%; transform:translateY(-50%); display:grid; gap:.55rem; list-style:none; padding:0; margin:0; }
.stage__specs li{ display:grid; grid-template-columns:auto; background:rgba(14,16,18,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(236,236,231,.16); border-left:2px solid var(--teal); border-radius:3px; padding:.55rem .8rem .55rem .75rem; min-width:150px;
  animation:specIn .6s var(--ease) both; }
.stage__specs li:nth-child(2){ animation-delay:.06s; } .stage__specs li:nth-child(3){ animation-delay:.12s; } .stage__specs li:nth-child(4){ animation-delay:.18s; }
@keyframes specIn{ from{ opacity:0; transform:translateX(-10px); } }
.stage__specs span{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; color:var(--mute); }
.stage__specs b{ font-size:1.15rem; font-weight:500; font-stretch:95%; color:var(--ink); }

/* name + price + actions, bottom-right of the photo */
.stage__cap{ left:auto; right:28px; bottom:28px; width:min(420px, calc(100% - 56px)); grid-template-columns:1fr auto; background:rgba(14,16,18,.78); }
.stage__txt > span:last-child{ font-family:var(--sans); font-size:1.15rem; font-weight:500; color:var(--ink); margin-top:.15rem; }
.stage__act{ grid-column:1 / -1; }
.stage__alts{ grid-column:1 / -1; }

@media (max-width:1080px){
  .inst{ display:block; min-height:0; }
  .inst__grid{ display:flex; flex-direction:column; }
  .inst__left{ display:contents; }
  .inst__right{ order:2; position:relative; padding:0; }
  .stage{ position:relative; width:100%; height:clamp(480px, 138vw, 760px); -webkit-mask-image:none; mask-image:none; }
  .stage::after{ background:linear-gradient(0deg, rgba(14,16,18,.9) 0%, rgba(14,16,18,0) 45%); }
  .stage__specs{ display:none; }
  .stage__img{ object-position:50% 30%; }
  .stage__cap{ left:16px; right:16px; bottom:16px; width:auto; }
  .stage__tag{ right:16px; top:16px; }
  .stage__dim{ display:none; }
}

/* ============================================================
   HERO v5 — everything inside the page margins
   ============================================================ */
.inst{ display:block; min-height:0; }
.inst__grid{ position:relative; max-width:var(--maxw); margin-inline:auto; padding:clamp(1.25rem,2.4vw,2rem) var(--pad);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,3.5vw,3.5rem); align-items:stretch;
  min-height:clamp(620px, calc(100svh - 92px), 900px); }
.inst__left{ position:static; width:auto; min-height:0; padding:clamp(.5rem,2vw,1.5rem) 0; justify-content:center; }
.inst__right{ position:relative; display:block; padding:0; min-height:520px; }
.stage{ position:absolute; inset:0; width:auto; height:auto; border-radius:10px; overflow:hidden;
  border:1px solid var(--hair); -webkit-mask-image:none; mask-image:none; }
.stage::after{ background:
  linear-gradient(90deg, rgba(14,16,18,.72) 0%, rgba(14,16,18,.25) 32%, rgba(14,16,18,0) 55%),
  linear-gradient(0deg, rgba(14,16,18,.7) 0%, rgba(14,16,18,0) 32%); }
.stage__img{ object-position:55% 45%; transform:none; }
.stage__specs{ left:24px; }
.stage__specs li{ background:rgba(14,16,18,.78); }
.stage__tag{ top:24px; right:24px; left:auto; }
.stage__dim{ right:28px; }
.stage__cap{ right:24px; bottom:24px; width:min(400px, calc(100% - 48px)); }

@media (max-width:1080px){
  .inst__grid{ display:flex; flex-direction:column; gap:0; min-height:0; padding:0; }
  .inst__left{ display:contents; }
  .inst__head{ order:1; padding:1.75rem var(--pad) 1.25rem; }
  .inst__right{ order:2; min-height:0; margin:0 var(--pad); }
  .stage{ position:relative; inset:auto; height:clamp(480px, 130vw, 720px); }
  .stage::after{ background:linear-gradient(0deg, rgba(14,16,18,.9) 0%, rgba(14,16,18,0) 45%); }
  .stage__specs{ display:none; }
  .stage__cap{ left:14px; right:14px; bottom:14px; width:auto; }
  .stage__tag{ top:14px; right:14px; }
  .inst__read{ order:3; padding:1.25rem var(--pad) 0; }
  .inst__ctl{ order:4; padding:.5rem var(--pad) 2rem; }
}

/* ============================================================
   LAYOUT SYSTEM — one 12-column grid, one gutter, used by the
   hero and every section head so their edges line up
   ============================================================ */
:root{ --cols:12; --gut:clamp(1rem, 2.4vw, 2.5rem); }
.l-grid{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); column-gap:var(--gut); }

/* section heads: label 1–3 · heading 4–9 · aside 10–12 */
.blk__head{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); }
.blk__no{ grid-column:1 / span 3; }
.blk__head > div{ grid-column:4 / span 6; }
.blk__aside{ grid-column:10 / span 3; }

/* hero: controls 1–5 · machine 6–12, same gutter, same outer margin as .wrap */
.inst__grid{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); gap:0 var(--gut);
  padding:var(--gut) var(--pad); }
.inst__left{ grid-column:1 / span 5; padding:0; }
.inst__right{ grid-column:6 / span 7; }
.stage__specs{ left:var(--gut); }
.stage__tag{ top:var(--gut); right:var(--gut); }
.stage__cap{ right:var(--gut); bottom:var(--gut); width:min(400px, calc(100% - var(--gut) * 2)); }
.stage__dim{ right:calc(var(--gut) + 4px); top:calc(var(--gut) + 56px); }

@media (max-width:1080px){
  .blk__no, .blk__head > div, .blk__aside{ grid-column:1 / -1; }
  .inst__grid{ padding:0; }
  .inst__right{ width:auto; }
  .stage{ width:100%; }
}


/* ============================================================
   HERO banner mode — used when a GPT hero image exists for the
   recommended machine (js/hero-manifest.js)
   ============================================================ */
@media (min-width:1081px){
  .inst.has-banner .inst__right{ grid-column:1 / -1; grid-row:1; }
  .inst.has-banner .inst__left{ grid-column:1 / span 5; grid-row:1; position:relative; z-index:4; padding:var(--gut) 0 var(--gut) var(--gut); }
  .inst.has-banner .stage::after{ background:
    linear-gradient(90deg, rgba(14,16,18,.92) 0%, rgba(14,16,18,.78) 30%, rgba(14,16,18,.2) 52%, rgba(14,16,18,0) 62%),
    linear-gradient(0deg, rgba(14,16,18,.6) 0%, rgba(14,16,18,0) 28%); }
  .inst.has-banner .stage__img{ object-position:center; }
  .inst.has-banner .stage__specs{ left:auto; right:var(--gut); top:calc(var(--gut) + 52px); bottom:auto; transform:none; grid-template-columns:repeat(2, minmax(0,1fr)); width:min(320px, 30%); }
  .inst.has-banner .stage__specs li{ min-width:0; }
  .inst.has-banner .stage__dim{ display:none; }
}
@media (max-width:1080px){
  .inst.has-banner .stage{ height:auto; aspect-ratio:4/3.4; }
  .inst.has-banner .stage__img{ object-position:72% center; }
}

/* banner mode v2 — keep the machine clear: specs along the top, slim action bar along the bottom */
@media (min-width:1081px){
  .inst.has-banner .stage__specs{ top:var(--gut); right:calc(var(--gut) + 150px); left:auto; bottom:auto; width:auto;
    grid-template-columns:repeat(4, auto); gap:.4rem; }
  .inst.has-banner .stage__specs li{ padding:.45rem .7rem; }
  .inst.has-banner .stage__specs b{ font-size:1rem; }
  .inst.has-banner .stage__cap{ left:calc(41.666% + var(--gut) / 2); right:var(--gut); bottom:var(--gut); width:auto;
    display:flex; align-items:center; gap:1.25rem; padding:.7rem .8rem .7rem 1.1rem; }
  .inst.has-banner .stage__txt{ display:flex; align-items:baseline; gap:.9rem; flex:1; min-width:0; }
  .inst.has-banner .stage__txt b{ font-size:1.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inst.has-banner .stage__txt > span:last-child{ font-size:1rem; margin:0; white-space:nowrap; }
  .inst.has-banner .stage__act{ flex:none; }
  .inst.has-banner .stage__act .btn{ flex:none; }
  .inst.has-banner .stage__alts{ display:none; }
  .inst.has-banner .stage::after{ background:
    linear-gradient(90deg, rgba(14,16,18,.92) 0%, rgba(14,16,18,.72) 30%, rgba(14,16,18,.15) 50%, rgba(14,16,18,0) 60%),
    linear-gradient(180deg, rgba(14,16,18,.45) 0%, rgba(14,16,18,0) 18%),
    linear-gradient(0deg, rgba(14,16,18,.55) 0%, rgba(14,16,18,0) 18%); }
}


/* draggable coverage scale */
.inst__read .scale{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; margin-top:1.6rem; height:70px; outline:none; }
.inst__read .scale.is-drag{ cursor:grabbing; }
.inst__read .scale.is-drag .scale__mark{ transition:none; }
.inst__read .scale:focus-visible .scale__mark i{ box-shadow:0 0 0 4px rgba(255,90,60,.35); }
.scale__mark i{ position:absolute; left:-8px; top:20px; width:16px; height:16px; border-radius:50%; background:var(--signal);
  border:3px solid var(--paper); box-shadow:0 0 0 1px var(--signal); transition:transform .15s var(--ease); }
.inst__read .scale:hover .scale__mark i, .inst__read .scale.is-drag .scale__mark i{ transform:scale(1.25); }
.scale__tick em{ top:-26px; bottom:auto; }

/* card hover shows the machine's own banner, framed on the product */
.card__media img.is-hero{ object-position:70% center; }