/* Geekly theme · Daylight Studio (ported from design variation 6). Components are scoped under .gk. */
/* =========================================================
   V6 · DAYLIGHT STUDIO
   Studio Noir relit for daytime: a warm-grey cyclorama,
   soft key light, long soft contact shadows.
   ========================================================= */
:root{
  --bg: oklch(0.955 0.006 78);
  --bg-2: oklch(0.938 0.007 76);
  --wall: oklch(0.962 0.005 80);
  --floor: oklch(0.895 0.009 70);
  --plate: oklch(0.986 0.004 85);
  --plate-2: oklch(0.968 0.005 82);
  --sunk: oklch(0.93 0.007 76);
  --line: oklch(0.88 0.008 72);
  --line-2: oklch(0.8 0.01 68);
  --ink: oklch(0.26 0.012 60);
  --ink-2: oklch(0.4 0.012 60);
  --muted: oklch(0.5 0.012 65);
  --accent: oklch(0.66 0.19 45);
  --accent-hi: oklch(0.75 0.16 55);
  --accent-lo: oklch(0.53 0.16 40);
  --accent-soft: oklch(0.94 0.035 60);
  --on-accent: oklch(0.2 0.02 45);
  --sh-1: 0 1px 1px oklch(0.3 0.02 60 / .07), 0 3px 8px -3px oklch(0.3 0.02 60 / .12);
  --sh-2: 0 1px 2px oklch(0.3 0.02 60 / .07), 0 18px 40px -20px oklch(0.3 0.02 60 / .32);
  --sh-3: 0 2px 4px oklch(0.3 0.02 60 / .07), 0 44px 70px -34px oklch(0.3 0.02 60 / .45);
  --hl: inset 0 1px 0 oklch(1 0 0 / .85);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease: cubic-bezier(.22,.61,.36,1);
  --display: var(--wp--preset--font-family--display);
  --body: var(--wp--preset--font-family--body);
  --mono: var(--wp--preset--font-family--mono);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1400px;
  --r: 7px;
  color-scheme: light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{overflow-x:clip;-webkit-font-smoothing:antialiased}
:where(.gk) img,:where(.gk) svg{display:block;max-width:100%}
:where(.gk) a{color:inherit;text-decoration:none}
:where(.gk) button,:where(.gk) input,:where(.gk) select{font:inherit;color:inherit}
:where(.gk) button{cursor:pointer;background:none;border:0;padding:0}
:where(.gk) :is(h1,h2,h3,h4,p){margin:0}
:where(.gk) ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:120;background:var(--ink);color:var(--plate);padding:10px 16px;border-radius:var(--r)}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mono{font-family:var(--mono)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- eyebrow ---------- */
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:.7em}
.eyebrow b{font-family:var(--mono);color:var(--accent-lo);font-weight:700;letter-spacing:.04em}
.eyebrow::before{content:"";inline-size:22px;block-size:1px;background:currentColor;opacity:.6}

/* ---------- brick palettes (CSS vars feed the SVG sprite) ---------- */
.bk-p{--bt:oklch(0.985 0.004 85);--bl:oklch(0.91 0.007 78);--br:oklch(0.8 0.01 70);--st:oklch(0.995 0.003 85);--ss:oklch(0.86 0.008 75)}
.bk-g{--bt:oklch(0.44 0.012 60);--bl:oklch(0.34 0.012 60);--br:oklch(0.26 0.012 60);--st:oklch(0.5 0.012 60);--ss:oklch(0.31 0.012 60)}
.bk-o{--bt:oklch(0.72 0.18 50);--bl:oklch(0.62 0.18 43);--br:oklch(0.52 0.16 38);--st:oklch(0.77 0.16 54);--ss:oklch(0.57 0.17 40)}

/* ---------- brick buttons ---------- */
.studs{position:absolute;inset-inline:14%;top:-5px;height:5px;display:flex;justify-content:space-around;pointer-events:none}
.studs i{inline-size:clamp(10px,18%,16px);block-size:5px;border-radius:3px 3px 0 0;background:var(--stud,var(--accent-hi));box-shadow:inset 0 1px 0 oklch(1 0 0 / .45)}
.btn-brick{
  --body-c:var(--accent);--edge:var(--accent-lo);--stud:var(--accent-hi);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.85em 1.6em .95em;border-radius:var(--r);
  background:var(--body-c);color:var(--on-accent);font-weight:600;font-size:1rem;letter-spacing:.01em;
  box-shadow:inset 0 -5px 0 var(--edge),inset 0 1px 0 oklch(1 0 0 / .35),0 2px 3px oklch(0.45 0.12 40 / .18),0 16px 28px -14px oklch(0.55 0.17 42 / .6);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.btn-brick:hover{transform:translateY(-2px);box-shadow:inset 0 -5px 0 var(--edge),inset 0 1px 0 oklch(1 0 0 / .35),0 3px 5px oklch(0.45 0.12 40 / .16),0 24px 34px -16px oklch(0.55 0.17 42 / .62)}
.btn-brick:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--edge),inset 0 1px 0 oklch(1 0 0 / .3),0 4px 10px -6px oklch(0.55 0.17 42 / .5)}
.btn-brick svg{inline-size:18px;block-size:18px}
.btn-ghost{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:.85em .4em;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2);border-radius:0;transition:border-color .3s var(--ease)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-ghost .arr{transition:transform .35s var(--ease-out)}
.btn-ghost:hover .arr{transform:translateX(-4px)}

/* ---------- top bar & header ---------- */
.topbar{background:var(--ink);color:oklch(0.88 0.008 75);font-size:.8rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
.topbar .live{display:inline-flex;align-items:center;gap:.55em}
.topbar .live::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px oklch(0.66 0.19 45 / .3)}
.topbar .hide-sm{color:oklch(0.75 0.01 70)}
.site-header{position:sticky;top:0;z-index:50;background:oklch(0.968 0.005 80 / .97);border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease)}
.site-header.scrolled{box-shadow:0 14px 30px -24px oklch(0.3 0.02 60 / .45)}
.site-header .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;letter-spacing:.01em;padding-top:4px;color:var(--ink)}
.logo svg{inline-size:34px;block-size:34px;margin-top:-6px;filter:drop-shadow(0 5px 4px oklch(0.3 0.02 60 / .22))}
.nav{display:flex;gap:4px;margin-inline-start:16px}
.nav a{padding:.5em .9em;border-radius:var(--r);color:var(--ink-2);font-size:.95rem;transition:color .25s var(--ease),background-color .25s var(--ease)}
.nav a:hover{color:var(--ink);background:var(--plate)}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";display:block;block-size:2px;background:var(--accent);margin-top:2px;border-radius:2px}
.head-tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.search{display:flex;align-items:center;gap:8px;block-size:42px;padding-inline:14px;border-radius:999px;color:var(--muted);min-inline-size:230px;font-size:.9rem;background:var(--plate);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);transition:box-shadow .25s var(--ease)}
.search:hover{box-shadow:var(--sh-2),inset 0 0 0 1px var(--line-2)}
.icon-btn{position:relative;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--r);color:var(--ink);transition:background-color .25s var(--ease)}
.icon-btn:hover{background:var(--plate)}
.icon-btn svg{inline-size:22px;block-size:22px}
.cart-count{position:absolute;top:4px;inset-inline-end:2px;min-inline-size:18px;block-size:18px;padding-inline:4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:600;display:grid;place-items:center;line-height:1;box-shadow:0 3px 6px -2px oklch(0.55 0.17 42 / .6)}
.cart-count.pop{animation:pop .5s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.site-header .nav-sm{display:none}

/* ---------- hero: cyclorama ---------- */
.hero{position:relative;overflow:clip;isolation:isolate;
  background:
    radial-gradient(36% 48% at 27% 46%, oklch(0.995 0.003 85 / .95) 0%, oklch(0.99 0.004 85 / 0) 100%),
    radial-gradient(30% 34% at 80% 28%, oklch(0.985 0.004 85 / .7) 0%, oklch(0.985 0.004 85 / 0) 100%),
    radial-gradient(140% 95% at 42% 34%, oklch(0.84 0.01 68 / 0) 52%, oklch(0.84 0.01 68 / .5) 100%),
    linear-gradient(to bottom, oklch(0.958 0.005 80) 0%, oklch(0.95 0.006 78) 50%, oklch(0.925 0.008 73) 70%, oklch(0.9 0.009 70) 100%);}
.keylight{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg at 6% -24%, transparent 141deg, oklch(1 0 0 / .42) 148deg, oklch(1 0 0 / .62) 152deg, oklch(1 0 0 / .42) 156deg, transparent 163deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 88%);mask-image:linear-gradient(to bottom,#000 10%,transparent 88%)}
.sweep{position:absolute;inset:auto 0 0 0;block-size:40%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 40% at 30% 10%, oklch(0.985 0.004 84 / .7) 0%, transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,64px);
  min-height:min(880px,calc(100svh - 108px));padding-block:clamp(48px,7vw,96px) 160px}
.hero-copy{position:relative;z-index:3}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(5.2rem,12.4vw,12.2rem);line-height:.8;letter-spacing:-.005em;margin-block:22px 28px;color:var(--ink)}
.hero h1 .ln{display:block}
.hero h1 .ln-3{position:relative;display:inline-block;color:var(--accent)}
.hero h1 .ln-3 svg{position:absolute;inset-inline:0;bottom:-.06em;inline-size:100%;block-size:.12em;overflow:visible}
.hero-lede{max-inline-size:38ch;font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--ink-2);font-weight:300}
.hero-lede strong{color:var(--ink);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2);font-size:.85rem;color:var(--ink-2)}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta svg{inline-size:16px;block-size:16px;color:var(--accent-lo)}

/* stage (geometry in a 600×600 square, left-to-right) */
.stage{position:relative;aspect-ratio:1/1;inline-size:100%;max-inline-size:680px;margin-inline:auto;z-index:2}
.stage > *{position:absolute}
.stage .pool{inset:4%;border-radius:50%;
  background:radial-gradient(closest-side at 50% 50%, oklch(0.988 0.004 85) 0%, oklch(0.982 0.004 84) 80%, oklch(0.975 0.005 82 / 0) 100%)}
.stage .floorpool{inset:66% -6% 0;border-radius:50%;background:radial-gradient(closest-side, oklch(0.995 0.003 85 / .9), oklch(0.995 0.003 85 / 0))}
.stage .beam{inset:-24% 14% 22%;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%, transparent 166deg, oklch(1 0 0 / .5) 174deg, oklch(1 0 0 / .7) 180deg, oklch(1 0 0 / .5) 186deg, transparent 194deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);mask-image:linear-gradient(to bottom,#000 20%,transparent 92%)}
.stage .plinth,.stage .rings,.stage .co-lines{inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}
.spool-shadow{left:30%;width:40%;top:74.6%;height:5%;border-radius:50%;
  background:radial-gradient(closest-side, oklch(0.28 0.02 60 / .42), oklch(0.28 0.02 60 / .12) 60%, oklch(0.28 0.02 60 / 0));
  animation:shadow-breathe 7s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes shadow-breathe{from{transform:scale(1);opacity:1}to{transform:scale(.84);opacity:.62}}
.spool{left:23%;width:54%;top:24%;aspect-ratio:1/1;mix-blend-mode:multiply;animation:hover-float 7s cubic-bezier(.45,0,.55,1) infinite alternate}
.spool img{inline-size:100%;block-size:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(farthest-side, #000 82%, transparent 100%);mask-image:radial-gradient(farthest-side, #000 82%, transparent 100%)}
@keyframes hover-float{from{transform:translateY(5px)}to{transform:translateY(-14px)}}
.ring{fill:none;stroke-linecap:round;animation:orbit linear infinite}
.ring.shade{stroke:oklch(0.3 0.02 60 / .16)}
.ring.hl{stroke:oklch(1 0 0 / .7)}
@keyframes orbit{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
.tail{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s var(--ease-out) .5s forwards}
.tail.shade{stroke:oklch(0.3 0.02 60 / .14);stroke-width:7}
@keyframes draw{to{stroke-dashoffset:0}}

/* call-outs (borrowed from the blueprint) */
.co-lines path{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease-out) forwards}
.co-lines .c1{animation-delay:1.1s}.co-lines .c2{animation-delay:1.3s}.co-lines .c3{animation-delay:1.5s}
.co-lines circle.dot{fill:var(--ink)}
.co-lines circle.ring-o{fill:none;stroke:var(--ink);stroke-opacity:.35;stroke-width:1}
.co{display:flex;flex-direction:column;gap:1px;padding-bottom:5px;transform:translateY(-100%);white-space:nowrap;direction:ltr;line-height:1.2;z-index:4}
.co .k{font-size:.72rem;color:var(--muted)}
.co .v{font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--ink);letter-spacing:.01em}
.co-a{right:2.4%;top:20%;align-items:flex-end;text-align:right}
.co-b{left:2.4%;top:37%;align-items:flex-start;text-align:left}
.co-c{right:2.4%;top:68.7%;align-items:flex-end;text-align:right}
.js .co{opacity:0;transition:opacity .9s var(--ease-out)}
.js .hero.ready .co{opacity:1}
.js .hero.ready .co-a{transition-delay:1.7s}
.js .hero.ready .co-b{transition-delay:1.9s}
.js .hero.ready .co-c{transition-delay:2.1s}

.stage-tag{left:0;bottom:3%;z-index:5;direction:rtl;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:var(--plate);border-radius:10px;font-size:.85rem;box-shadow:var(--sh-2),var(--hl);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.stage-tag:hover{transform:translateY(-3px);box-shadow:var(--sh-3),var(--hl)}
.stage-tag .k{font-size:.7rem;letter-spacing:.12em;color:var(--accent-lo);text-transform:uppercase;font-weight:500}
.stage-tag .n{font-weight:500}
.stage-tag .p{font-family:var(--display);font-size:2.1rem;line-height:1;padding-inline-start:14px;border-inline-start:1px solid var(--line-2)}

.floater{position:absolute;pointer-events:none;will-change:transform;z-index:1}
.floater svg{inline-size:100%;block-size:auto;overflow:visible;filter:drop-shadow(0 4px 3px oklch(0.3 0.02 60 / .12)) drop-shadow(0 28px 22px oklch(0.3 0.02 60 / .2))}
.floater.far svg{filter:blur(1.6px) drop-shadow(0 18px 16px oklch(0.3 0.02 60 / .14))}
.hero .f1{inline-size:116px;top:11%;inset-inline-end:3%}
.hero .f2{inline-size:70px;bottom:24%;inset-inline-end:45%}
.hero .f3{inline-size:58px;top:7%;inset-inline-start:39%;opacity:.85}
.hero .f4{inline-size:92px;bottom:20%;inset-inline-end:-1%}
.hero .f5{inline-size:46px;top:56%;inset-inline-start:2%;opacity:.7}
.hero .strand-bg{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none}
.strand-bg path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 4.5s var(--ease-out) forwards}
.strand-bg path.sd{stroke:oklch(0.3 0.02 60 / .08);stroke-width:4;transform:translateY(14px)}

/* printer strip */
.printer{position:absolute;inset-inline:var(--gutter);bottom:72px;block-size:60px;z-index:3;pointer-events:none}
.printer .bed{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.printer .layer{fill:none;stroke-width:4;stroke-dasharray:1 1;stroke-dashoffset:1}
.printer .l1{animation:l1 15s linear infinite}
.printer .l2{animation:l2 15s linear infinite}
.printer .l3{animation:l3 15s linear infinite}
@keyframes l1{0%{stroke-dashoffset:1;opacity:1}30%{stroke-dashoffset:0}97%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes l2{0%,33%{stroke-dashoffset:1;opacity:1}63%{stroke-dashoffset:0}97%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes l3{0%,66%{stroke-dashoffset:1;opacity:1}96%{stroke-dashoffset:0}97%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.carriage{position:absolute;inset:0;animation:carriage 15s linear infinite}
@keyframes carriage{
  0%{transform:translate(0,0)}30%{transform:translate(-100%,0)}33%{transform:translate(-100%,-5px)}
  63%{transform:translate(0,-5px)}66%{transform:translate(0,-10px)}96%{transform:translate(-100%,-10px)}100%{transform:translate(0,0)}}
.nozzle{position:absolute;inset-inline-start:0;bottom:12px;inline-size:46px;block-size:72px;transform:translateX(50%);overflow:visible;filter:drop-shadow(0 10px 8px oklch(0.3 0.02 60 / .2))}
.printer-label{position:absolute;inset-inline-start:0;top:-28px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted)}

/* trust plate overlapping the hero floor */
.trust{position:relative;z-index:6;margin-top:-46px}
.trust-plate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--plate);border-radius:16px;box-shadow:var(--sh-3),var(--hl)}
.trust-plate li{display:flex;align-items:center;gap:14px;padding:22px 24px;font-size:.92rem;color:var(--ink-2)}
.trust-plate li + li{border-inline-start:1px solid var(--line)}
.trust-plate strong{display:block;color:var(--ink);font-weight:500}
.trust-plate .t-ico{flex:none;inline-size:28px;block-size:28px;color:var(--accent-lo)}

/* ---------- section heads ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(4rem,9vw,8.6rem);line-height:.82;margin-top:16px}
.sec-head h2 em{font-style:normal;color:var(--muted);font-weight:300}
.sec-head p{color:var(--ink-2);max-inline-size:44ch;font-weight:300;font-size:1.05rem}
.sec-stats{display:flex;gap:32px;margin-top:22px}
.sec-stats div{display:flex;flex-direction:column}
.sec-stats b{font-family:var(--display);font-size:3rem;line-height:.9;font-weight:400;color:var(--ink)}
.sec-stats span{font-size:.8rem;color:var(--muted)}

/* ---------- material lab ---------- */
.lab{position:relative;padding-block:clamp(96px,11vw,150px) clamp(64px,8vw,110px);overflow:clip;
  background:
    radial-gradient(50% 32% at 72% 0%, oklch(0.99 0.004 85 / .9) 0%, oklch(0.99 0.004 85 / 0) 100%),
    linear-gradient(to bottom, var(--wall), var(--bg) 30%)}
.lab .wrap{position:relative;z-index:2}
.lab .f6{inline-size:84px;top:140px;inset-inline-start:4%}
.lab .f7{inline-size:56px;top:44%;inset-inline-end:1%}

.selector{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:14px 30px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.selector::-webkit-scrollbar{display:none}
.mat{
  --body-c:var(--plate);--edge:oklch(0.87 0.008 72);--stud:var(--plate-2);
  position:relative;flex:1 0 auto;min-inline-size:118px;scroll-snap-align:start;text-align:start;
  padding:16px 16px 18px;border-radius:var(--r);background:var(--body-c);color:var(--ink);
  box-shadow:inset 0 -5px 0 var(--edge),var(--hl),0 1px 2px oklch(0.3 0.02 60 / .08),0 12px 22px -14px oklch(0.3 0.02 60 / .35);
  transition:transform .35s var(--ease-out),background-color .3s var(--ease),box-shadow .35s var(--ease-out);
}
.mat .studs i{box-shadow:inset 0 1px 0 oklch(1 0 0 / .9),0 -1px 2px oklch(0.3 0.02 60 / .1)}
.mat:hover{transform:translateY(-3px);box-shadow:inset 0 -5px 0 var(--edge),var(--hl),0 2px 3px oklch(0.3 0.02 60 / .08),0 22px 30px -16px oklch(0.3 0.02 60 / .4)}
.mat[aria-pressed="true"]{--body-c:var(--accent);--edge:var(--accent-lo);--stud:var(--accent-hi);color:var(--on-accent);transform:translateY(2px);
  box-shadow:inset 0 -2px 0 var(--edge),inset 0 1px 0 oklch(1 0 0 / .3),0 1px 2px oklch(0.45 0.12 40 / .2),0 12px 22px -12px oklch(0.55 0.17 42 / .6)}
.mat .m-name{display:block;font-family:var(--display);font-size:2rem;line-height:.9;font-weight:700;white-space:nowrap}
.mat .m-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:.72rem;opacity:.8;white-space:nowrap}
.mat .m-meta .ltr{font-family:var(--mono)}

.readout{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 40px;align-items:center;margin-block:8px 40px;padding:24px 28px;border-radius:14px;
  background:linear-gradient(to bottom, var(--plate), var(--plate-2));box-shadow:var(--sh-2),var(--hl)}
.readout .r-name{font-family:var(--display);font-size:clamp(3rem,5vw,4.4rem);line-height:.85;font-weight:700;min-inline-size:4ch}
.readout .r-desc{color:var(--ink-2);max-inline-size:52ch}
.readout .r-specs{display:flex;gap:28px;font-size:.78rem;color:var(--muted)}
.readout .r-specs b{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;font-weight:400;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-block-size:36px;margin-bottom:20px;font-size:.85rem;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;block-size:34px;padding-inline:12px 8px;border-radius:999px;background:var(--plate);color:var(--ink);font-size:.82rem;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);transition:box-shadow .25s var(--ease)}
.chip:hover{box-shadow:var(--sh-1),inset 0 0 0 1px var(--accent)}
.chip .sw{inline-size:12px;block-size:12px;border-radius:50%;box-shadow:inset 0 0 0 1px oklch(0.3 0.02 60 / .2)}
.chip .x{inline-size:18px;block-size:18px;display:grid;place-items:center;border-radius:50%;background:var(--sunk);font-size:.8rem;line-height:1}

/* product cards: light plinth + spotlight + contact shadow */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.card{position:relative;display:flex;flex-direction:column;background:var(--plate);border-radius:16px;
  box-shadow:var(--sh-2),var(--hl);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.card:hover{transform:translateY(-3px);box-shadow:0 3px 6px oklch(0.3 0.02 60 / .07),0 50px 70px -36px oklch(0.3 0.02 60 / .5),var(--hl)}
.js .card.enter{opacity:0;transform:translateY(18px)}
.card.enter-on{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.card-media{position:relative;display:block;aspect-ratio:1/1;isolation:isolate;margin:8px 8px 0;border-radius:11px;overflow:hidden;
  background:
    radial-gradient(70% 55% at 50% 30%, oklch(0.995 0.003 85) 0%, oklch(0.995 0.003 85 / 0) 100%),
    linear-gradient(to bottom, oklch(0.968 0.005 82) 0%, oklch(0.958 0.006 80) 58%, oklch(0.915 0.008 73) 100%)}
.card-media .cs{position:absolute;left:18%;right:18%;bottom:7%;height:10%;z-index:0;pointer-events:none}
.card-media .cs::before,.card-media .cs::after{content:"";position:absolute;inset:0;border-radius:50%;transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
.card-media .cs::before{background:radial-gradient(closest-side, oklch(0.28 0.02 60 / .34), oklch(0.28 0.02 60 / 0));transform:scaleX(.9)}
.card-media .cs::after{inset:-40% -14%;background:radial-gradient(closest-side, oklch(0.28 0.02 60 / .1), oklch(0.28 0.02 60 / 0));opacity:.5}
.card-media img{position:absolute;inset:6% 8% 11%;inline-size:84%;block-size:83%;object-fit:contain;mix-blend-mode:multiply;z-index:1;transition:opacity .5s var(--ease),transform .8s var(--ease-out)}
.card-media .m2{opacity:0}
.card:hover .card-media img{transform:translateY(-12px) scale(1.025)}
.card:hover .card-media .cs::before{transform:scaleX(.74);opacity:.55}
.card:hover .card-media .cs::after{opacity:1;transform:scale(1.08)}
.card:hover .card-media .m2{opacity:1}
.card:hover .card-media .m1.has-alt{opacity:0}
.stock{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--plate);color:var(--ink-2);font-size:.72rem;font-weight:500;box-shadow:var(--sh-1)}
.stock::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:oklch(0.62 0.09 150)}
.stock.low{color:var(--ink)}
.stock.low::before{background:var(--accent);box-shadow:0 0 0 3px oklch(0.66 0.19 45 / .22)}
.card-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px;flex:1}
.card-brand{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card-name{font-family:var(--display);font-weight:700;font-size:2rem;line-height:.95;letter-spacing:.005em}
.card-spec{font-size:.78rem;color:var(--muted)}
.card-spec .ltr{font-family:var(--mono);font-size:.74rem}
.dots{display:flex;align-items:center;gap:5px;margin-top:10px;min-block-size:16px}
.dots i{inline-size:14px;block-size:14px;border-radius:50%;box-shadow:inset 0 -2px 3px oklch(0 0 0 / .14),inset 0 1px 2px oklch(1 0 0 / .5),0 0 0 1px oklch(0.3 0.02 60 / .14),0 3px 4px -2px oklch(0.3 0.02 60 / .3)}
.dots span{font-size:.72rem;color:var(--muted);margin-inline-start:4px;font-family:var(--mono)}
.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}
.price{font-family:var(--display);font-size:2.3rem;line-height:.8;font-weight:400}
.add{--body-c:var(--accent);--edge:var(--accent-lo);--stud:var(--accent-hi);
  position:relative;display:inline-flex;align-items:center;gap:6px;min-block-size:42px;padding:8px 14px 11px;border-radius:6px;
  background:var(--body-c);color:var(--on-accent);font-weight:600;font-size:.85rem;
  box-shadow:inset 0 -4px 0 var(--edge),inset 0 1px 0 oklch(1 0 0 / .35),0 8px 14px -8px oklch(0.55 0.17 42 / .55);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.add .studs{top:-4px;block-size:4px;inset-inline:18%}
.add .studs i{block-size:4px;inline-size:12px}
.add:hover{transform:translateY(-2px);box-shadow:inset 0 -4px 0 var(--edge),inset 0 1px 0 oklch(1 0 0 / .35),0 14px 20px -10px oklch(0.55 0.17 42 / .6)}
.add:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 var(--edge)}
.add svg{inline-size:14px;block-size:14px}
.add.done{--body-c:var(--ink);--edge:oklch(0.18 0.01 60);--stud:oklch(0.4 0.012 60);color:var(--plate)}
.grid-more{display:flex;justify-content:center;margin-top:40px}
.btn-line{display:inline-flex;align-items:center;gap:10px;min-block-size:48px;padding-inline:22px;border-radius:var(--r);font-weight:500;background:var(--plate);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--ease),transform .4s var(--ease-out)}
.btn-line:hover{transform:translateY(-2px);box-shadow:var(--sh-2),inset 0 0 0 1px var(--line-2)}
.empty{grid-column:1/-1;padding:48px 24px;text-align:center;color:var(--ink-2);border:1px dashed var(--line-2);border-radius:14px}
.empty button{color:var(--accent-lo);text-decoration:underline;text-underline-offset:3px}

/* colourway */
.colourway{position:relative;margin-top:clamp(80px,10vw,130px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:24px 56px;align-items:center}
.cw-copy h3,.brands-head h3,.specs-head h3,.shelf-head h3{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,5vw,4.4rem);line-height:.85;margin-top:12px}
.cw-copy p{margin-top:14px;color:var(--ink-2);font-weight:300;max-inline-size:34ch}
.cw-read{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);min-block-size:92px}
.cw-read .nm{font-family:var(--display);font-size:2.4rem;line-height:.9}
.cw-read .meta{font-size:.82rem;color:var(--muted);margin-top:6px}
.cw-read .meta .ltr{font-family:var(--mono);letter-spacing:.02em}
.cw-stage{position:relative;padding:24px clamp(16px,3vw,40px) 30px;border-radius:18px;
  background:radial-gradient(60% 70% at 50% 20%, oklch(0.995 0.003 85) 0%, oklch(0.995 0.003 85 / 0) 100%),linear-gradient(to bottom, var(--plate-2), oklch(0.94 0.007 76));
  box-shadow:var(--sh-2),var(--hl)}
.strand-wrap{position:relative;block-size:clamp(150px,18vw,230px)}
.strand-float{position:absolute;inset:0;animation:strand-bob 8s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes strand-bob{from{transform:translateY(-6px) rotate(-.6deg)}to{transform:translateY(8px) rotate(.6deg)}}
.strand{inline-size:100%;block-size:100%;overflow:visible}
.strand path{fill:none;stroke-linecap:round}
.strand .s-shadow{stroke:oklch(0.3 0.02 60 / .2);stroke-width:18;filter:blur(9px);transform:translateY(30px)}
.strand .s-base{stroke-width:16}
.strand .s-new{stroke-width:16;stroke-dasharray:1 1;stroke-dashoffset:0}
.strand .s-hl{stroke:oklch(1 0 0 / .5);stroke-width:3;transform:translate(0,-4px)}
.strand .s-dk{stroke:oklch(0 0 0 / .14);stroke-width:4;transform:translate(0,5px)}
.swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.swatch{position:relative;inline-size:32px;block-size:32px;border-radius:50%;
  box-shadow:inset 0 -3px 6px oklch(0 0 0 / .16),inset 0 2px 3px oklch(1 0 0 / .45),0 0 0 1px oklch(0.3 0.02 60 / .14),0 7px 10px -5px oklch(0.3 0.02 60 / .4);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.swatch:hover,.swatch:focus-visible{transform:translateY(-4px) scale(1.08)}
.swatch[aria-pressed="true"]{box-shadow:inset 0 -3px 6px oklch(0 0 0 / .16),0 0 0 2px var(--plate-2),0 0 0 4px var(--accent),0 10px 14px -6px oklch(0.3 0.02 60 / .4)}
.swatch::after{content:"";position:absolute;inset:5px 9px auto auto;inline-size:8px;block-size:5px;border-radius:50%;background:oklch(1 0 0 / .5);transform:rotate(-30deg)}
.cw-hint{margin-top:14px;font-size:.78rem;color:var(--muted)}

/* brands: raised plates */
.brands{margin-top:clamp(80px,10vw,130px)}
.brands-head,.specs-head,.shelf-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.brands-head p,.specs-head p,.shelf-head p{color:var(--ink-2);font-weight:300;max-inline-size:44ch}
.brand-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.brand{position:relative;display:flex;flex-direction:column;text-align:start;padding:24px;border-radius:16px;background:var(--plate);
  box-shadow:var(--sh-2),var(--hl);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.brand:hover{transform:translateY(-4px);box-shadow:var(--sh-3),var(--hl)}
.brand[aria-pressed="true"]{box-shadow:var(--sh-2),var(--hl),inset 0 0 0 2px var(--accent)}
.brand .b-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.brand .b-name{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,4vw,3.6rem);line-height:.85;letter-spacing:.01em}
.brand .b-count{font-size:.78rem;color:var(--muted);text-align:end}
.brand .b-count b{display:block;font-family:var(--display);font-size:2.2rem;line-height:.9;font-weight:400;color:var(--ink)}
.brand .b-thumbs{display:flex;gap:8px;margin-top:22px}
.brand .b-thumbs span{flex:1;aspect-ratio:1/1;border-radius:9px;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 55% at 50% 30%, oklch(0.995 0.003 85), oklch(0.995 0.003 85 / 0)),linear-gradient(to bottom, var(--plate-2), oklch(0.915 0.008 73));
  box-shadow:inset 0 1px 2px oklch(0.3 0.02 60 / .08)}
.brand .b-thumbs span::after{content:"";position:absolute;left:20%;right:20%;bottom:7%;height:9%;border-radius:50%;background:radial-gradient(closest-side, oklch(0.28 0.02 60 / .3), transparent);z-index:-1}
.brand .b-thumbs img{position:absolute;inset:6% 6% 10%;inline-size:88%;block-size:84%;object-fit:contain;mix-blend-mode:multiply}
.brand .b-foot{display:flex;justify-content:space-between;margin-top:16px;font-size:.82rem;color:var(--ink-2)}
.brand .b-foot .go{color:var(--accent-lo);font-weight:500}

/* spec sheet (v1 temperature scale + v3 comparison) */
.specs{margin-top:clamp(80px,10vw,130px)}
.sheet{background:var(--plate);border-radius:16px;box-shadow:var(--sh-2),var(--hl);overflow:hidden}
.sheet-head{display:flex;justify-content:space-between;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);background:var(--plate-2)}
.sheet-scroll{overflow-x:auto}
.spec-table{inline-size:100%;border-collapse:collapse;font-size:.9rem}
.spec-table th{font-weight:500;font-size:.72rem;letter-spacing:.08em;color:var(--muted);text-align:start;padding:14px 14px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.spec-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}
.spec-table tbody th{padding:10px 14px 10px 14px;border-bottom:1px solid var(--line)}
.spec-table tbody tr{cursor:pointer;transition:background-color .25s var(--ease)}
.spec-table tbody tr:hover{background:var(--plate-2)}
.spec-table tbody tr.is-active{background:var(--accent-soft)}
.spec-table .t-mat{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;white-space:nowrap;color:var(--ink);letter-spacing:0}
.spec-table .t-mat button{text-align:start}
.spec-table .t-temp,.spec-table .t-bed{white-space:nowrap;font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.spec-table .t-n{color:var(--muted);white-space:nowrap;font-size:.82rem}
.scale{position:relative;direction:ltr;block-size:26px;min-inline-size:200px}
.scale .track{position:absolute;inset:12px 0 auto;block-size:2px;background:var(--line);border-radius:2px}
.scale .tick{position:absolute;top:8px;inline-size:1px;block-size:10px;background:var(--line-2)}
.scale .bar{position:absolute;top:7px;block-size:12px;border-radius:6px;background:linear-gradient(to bottom, var(--accent-hi), var(--accent));
  box-shadow:inset 0 -2px 0 var(--accent-lo),0 4px 8px -3px oklch(0.55 0.17 42 / .55);transform-origin:left center;transform:scaleX(var(--sx,1));transition:transform 1.1s var(--ease-out)}
.js .specs:not(.is-in) .scale .bar{--sx:0}
.scale-legend{position:relative;direction:ltr;block-size:16px;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.scale-legend span{position:absolute;transform:translateX(-50%)}
.segs{display:inline-flex;gap:3px;direction:ltr;vertical-align:middle}
.segs i{inline-size:12px;block-size:6px;border-radius:2px;background:var(--line)}
.segs i.on{background:var(--ink-2)}
.spec-note{margin-top:16px;font-size:.8rem;color:var(--muted)}

/* shelf */
.shelf{margin-top:clamp(80px,10vw,130px)}
.shelf-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.shelf-item{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:14px;background:var(--plate);box-shadow:var(--sh-2),var(--hl);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.shelf-item:hover{transform:translateY(-3px);box-shadow:var(--sh-3),var(--hl)}
.shelf-item .ph{position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;isolation:isolate;background:radial-gradient(70% 55% at 50% 30%, oklch(0.995 0.003 85), oklch(0.995 0.003 85 / 0)),linear-gradient(to bottom, var(--plate-2), oklch(0.915 0.008 73))}
.shelf-item img{position:absolute;inset:6%;inline-size:88%;block-size:88%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s var(--ease-out)}
.shelf-item:hover img{transform:translateY(-5px)}
.shelf-item .b{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.shelf-item .n{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:.95}
.shelf-item .left{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;color:var(--ink)}
.shelf-item .left::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--accent)}

/* ---------- collectibles ---------- */
.collect{position:relative;padding-block:clamp(80px,10vw,130px);background:linear-gradient(to bottom, var(--bg-2), var(--bg) 60%);border-top:1px solid var(--line)}
.tiles{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(14px,1.8vw,28px)}
.tile{position:relative;display:flex;flex-direction:column;border-radius:18px;background:var(--plate);box-shadow:var(--sh-2),var(--hl);overflow:hidden;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh-3),var(--hl)}
.tile .set{position:relative;display:grid;place-items:center;block-size:300px;margin:8px 8px 0;border-radius:13px;overflow:hidden;
  background:
    radial-gradient(50% 60% at 50% 22%, oklch(0.995 0.003 85) 0%, oklch(0.995 0.003 85 / 0) 100%),
    linear-gradient(to bottom, oklch(0.962 0.005 80) 0%, oklch(0.952 0.006 78) 55%, oklch(0.9 0.009 70) 100%)}
.tile .comp{display:grid;place-items:center;inline-size:100%;transition:transform .8s var(--ease-out)}
.tile:hover .comp{transform:translateY(-8px)}
.tile .comp > svg{inline-size:min(80%,330px);block-size:auto;overflow:visible}
.tile .t-idx{position:absolute;top:16px;inset-inline-start:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
.tile .t-text{padding:20px 24px 22px}
.tile h3{font-family:var(--display);font-weight:700;font-size:clamp(3rem,4.4vw,4.2rem);line-height:.85}
.tile .t-tag{color:var(--ink-2);font-size:.92rem;margin-top:6px}
.tile .t-go{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem}
.tile .t-go .arr{transition:transform .4s var(--ease-out);color:var(--accent-lo)}
.tile:hover .t-go .arr{transform:translateX(-6px)}
.fan g{transform-box:view-box;transform-origin:160px 330px;transform:rotate(var(--a));transition:transform .8s var(--ease-out)}
.tile:hover .fan g{transform:rotate(calc(var(--a) * 1.35))}
.stack .lift{transition:transform .8s var(--ease-out)}
.tile:hover .stack .lift{transform:translateY(-14px)}
.comp .gsh{transition:transform .8s var(--ease-out),opacity .8s var(--ease-out);transform-box:fill-box;transform-origin:center}
.tile:hover .comp .gsh{transform:scaleX(.9);opacity:.75}

/* ---------- service ---------- */
.service{padding-block:clamp(80px,10vw,130px)}
.service-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.alert h2{font-family:var(--display);font-weight:700;font-size:clamp(3.6rem,7vw,6.6rem);line-height:.82;margin-top:16px}
.alert > p{margin-top:18px;color:var(--ink-2);font-weight:300;max-inline-size:42ch;font-size:1.05rem}
.alert form{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:end;padding:22px;border-radius:16px;background:var(--plate);box-shadow:var(--sh-2),var(--hl)}
.field{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--muted)}
.field input,.field select{block-size:52px;padding-inline:14px;background:var(--plate-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font-size:1rem;box-shadow:inset 0 1px 2px oklch(0.3 0.02 60 / .07);transition:border-color .25s var(--ease)}
.field input::placeholder{color:oklch(0.62 0.01 68)}
.field input:hover,.field select:hover{border-color:var(--line-2)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.form-msg{grid-column:1/-1;min-block-size:22px;font-size:.88rem;color:var(--ink-2)}
.form-msg.ok{color:var(--ink)}
.form-msg.ok::before{content:"";display:inline-block;inline-size:8px;block-size:8px;border-radius:2px;background:var(--accent);margin-inline-end:8px}
.form-fine{margin-top:10px;font-size:.78rem;color:var(--muted)}
.ledger{padding:22px 26px 10px;border-radius:16px;background:var(--plate);box-shadow:var(--sh-2),var(--hl)}
.ledger h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:4px}
.ledger + .ledger{margin-top:22px}
.ledger li{display:flex;align-items:baseline;gap:12px;padding-block:14px;border-bottom:1px solid var(--line)}
.ledger li:last-child{border-bottom:0}
.ledger li .lbl{font-weight:500}
.ledger li .sub{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.ledger li .lead{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.ledger li .val{font-family:var(--display);font-size:2.2rem;line-height:.8}
.ledger li .val.acc{color:var(--accent-lo)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:64px 32px;overflow:clip}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px}
.foot-grid li + li{margin-top:8px}
.foot-grid a{color:var(--ink-2);transition:color .2s var(--ease)}
.foot-grid a:hover{color:var(--ink)}
.foot-about p{color:var(--ink-2);font-weight:300;max-inline-size:34ch;margin-top:14px}
.foot-mark{font-family:var(--display);font-weight:700;font-size:clamp(9rem,26vw,24rem);line-height:.7;margin-top:56px;letter-spacing:-.01em;user-select:none;direction:ltr;text-align:left;
  color:oklch(0.925 0.007 75);text-shadow:0 2px 0 oklch(1 0 0 / .85),0 -1px 0 oklch(0.78 0.01 68 / .7)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;border-top:1px solid var(--line-2);font-size:.8rem;color:var(--muted)}

.toast{position:fixed;inset-inline-start:50%;bottom:24px;z-index:80;transform:translate(50%,140%);opacity:0;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--plate);font-weight:500;font-size:.92rem;box-shadow:0 24px 40px -18px oklch(0.25 0.02 60 / .6);transition:transform .5s var(--ease-out),opacity .4s var(--ease)}
.toast.show{transform:translate(50%,0);opacity:1}
.toast i{inline-size:10px;block-size:10px;border-radius:2px;background:var(--accent)}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .hero h1 .ln{opacity:0;transform:translateY(.25em)}
.js .hero.ready h1 .ln{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.js .hero.ready h1 .ln-2{transition-delay:.12s}
.js .hero.ready h1 .ln-3{transition-delay:.24s}
.uline{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease-out) .9s forwards}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shelf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search{min-inline-size:0}
  .search span{display:none}
  .spec-table .t-r{display:none}
}
@media (max-width:960px){
  .site-header .nav{display:none}
  .site-header .nav-sm{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);padding-block:6px}
  .site-header .nav-sm::-webkit-scrollbar{display:none}
  .nav-sm a{flex:none;padding:.4em .8em;font-size:.88rem;color:var(--ink-2);border-radius:var(--r)}
  .nav-sm a[aria-current]{color:var(--ink);background:var(--plate);box-shadow:var(--sh-1)}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-bottom:170px}
  .stage{max-inline-size:560px}
  .keylight{background:conic-gradient(from 0deg at 10% -10%, transparent 150deg, oklch(1 0 0 / .4) 157deg, oklch(1 0 0 / .55) 161deg, oklch(1 0 0 / .4) 165deg, transparent 172deg)}
  .sec-head{grid-template-columns:1fr}
  .colourway{grid-template-columns:1fr}
  .trust-plate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-plate li:nth-child(3){border-inline-start:0}
  .trust-plate li:nth-child(n+3){border-top:1px solid var(--line)}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .tile:first-child{grid-column:1/-1}
  .service-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .readout{grid-template-columns:auto minmax(0,1fr)}
  .readout .r-specs{grid-column:1/-1}
}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-row{grid-template-columns:1fr}
  .shelf-list{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .tile .set{block-size:260px}
  .alert form{grid-template-columns:1fr}
  .alert form .btn-brick{inline-size:100%}
  .topbar .hide-sm{display:none}
  .scale{min-inline-size:120px}
  .spec-table .t-n,.spec-table .t-bed{display:none}
  .hero .f1{inline-size:80px}
  .hero .f4{inline-size:64px}
  .co .k{font-size:.66rem}
  .co .v{font-size:.72rem}
}
@media (max-width:520px){
  .site-header .wrap{gap:12px;min-height:62px}
  .logo{font-size:2.1rem}
  .search{box-shadow:none;background:none;padding:0;inline-size:44px;justify-content:center}
  .hero h1{font-size:clamp(4.6rem,24vw,6.6rem)}
  .hero-cta .btn-brick{flex:1 1 100%}
  .card-media{margin:6px 6px 0}
  .card-body{padding:12px 12px 14px}
  .card-name{font-size:1.6rem}
  .card-spec{font-size:.7rem}
  .card-spec .ltr{font-size:.66rem}
  .price{font-size:1.9rem}
  .add{padding-inline:10px}
  .add .lbl{display:none}
  .stock{inset-block-start:8px;inset-inline-start:8px;font-size:.64rem;padding:3px 8px}
  .dots i{inline-size:12px;block-size:12px}
  .dots i:nth-child(n+5){display:none}
  .readout{grid-template-columns:1fr;padding:20px}
  .readout .r-specs{gap:20px}
  .stage-tag{bottom:0;padding:10px 12px 10px 10px}
  .stage-tag .p{font-size:1.8rem}
  .co-c{display:none}
  .co-lines .c3,.co-lines .g3{display:none}
  .spec-table td,.spec-table th{padding-inline:8px}
  .scale{min-inline-size:96px}
  .spec-table .t-mat{font-size:1.6rem}
  .hero .f3,.hero .f5{display:none}
  .foot-grid{grid-template-columns:1fr}
  .trust-plate li{padding:16px 12px;font-size:.82rem;gap:10px}
  .trust-plate .t-ico{inline-size:22px;block-size:22px}
  .ledger{padding-inline:18px}
  .ledger li .val{font-size:1.9rem}
  .alert form{padding:16px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}
  .spool,.spool-shadow,.strand-float,.ring{animation:none!important}
  .tail,.strand-bg path,.uline,.co-lines path{animation:none!important;stroke-dashoffset:0}
  .carriage{animation:none!important;transform:translate(-100%,-10px)}
  .printer .layer{animation:none!important;stroke-dashoffset:0;opacity:1}
  .js [data-reveal],.js .hero h1 .ln,.js .card.enter{opacity:1;transform:none}
  .js .co{opacity:1}
  .js .specs:not(.is-in) .scale .bar{--sx:1}
}