/* Gurlaxy — "Orbit" design system
   One palette of six hues, each with a light and a dark tone:
   Porcelain (ground), Chalk (raised), Graphite (ink), Stone (muted ink),
   Ember (the only action colour), Slate (meaning colour: specs and model codes).
   Dark mode sits on Soot #212121, never pure black. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk.4c8b93f431.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree.4ba7d3d096.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono.cb182feeed.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #ECEAE6;
  --ground-2: #E4E1DC;
  --raised: #F8F7F4;
  --raised-2: #FFFFFF;
  --ink: #1F1E1C;
  --ink-2: #4A4743;
  --muted: #635E57;
  --ember: #9C4D1A;
  --ember-ink: #FFFFFF;
  --ember-soft: rgba(156, 77, 26, .12);
  --ember-glow: rgba(214, 120, 52, .55);
  --slate: #4F5A64;
  --slate-soft: rgba(79, 90, 100, .10);
  --logo: #161514;

  --sh-1: 0 1px 2px rgba(40, 32, 24, .06), 0 2px 6px rgba(40, 32, 24, .05);
  --sh-2: 0 2px 4px rgba(40, 32, 24, .05), 0 8px 18px rgba(40, 32, 24, .07), 0 22px 40px -18px rgba(40, 32, 24, .18);
  --sh-3: 0 4px 10px rgba(40, 32, 24, .06), 0 18px 40px rgba(40, 32, 24, .10), 0 48px 80px -30px rgba(40, 32, 24, .28);
  --sh-press: inset 0 2px 6px rgba(40, 32, 24, .12), inset 0 -1px 0 rgba(255, 255, 255, .6);
  --sh-well: inset 0 2px 5px rgba(40, 32, 24, .09), inset 0 -2px 0 rgba(255, 255, 255, .7);
  --drop: drop-shadow(0 14px 18px rgba(40, 30, 20, .20)) drop-shadow(0 3px 4px rgba(40, 30, 20, .14));
  --drop-lit: var(--drop);
  --glass: rgba(248, 247, 244, .72);
  --pool-a: rgba(214, 128, 64, .20);
  --pool-b: rgba(120, 136, 150, .16);
  --grain: .05;

  --f-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-text: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-hero: clamp(2.5rem, 1.35rem + 3.6vw, 4.6rem);
  --t-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem);
  --t-h3: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --t-lead: clamp(1.06rem, 1rem + .35vw, 1.28rem);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --r-1: 10px; --r-2: 18px; --r-3: 28px; --r-pill: 999px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-wipe: cubic-bezier(.76, 0, .24, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --bar-h: 0px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #212121;
  --ground-2: #1C1C1C;
  --raised: #2A2A29;
  --raised-2: #323231;
  --ink: #ECE9E4;
  --ink-2: #C9C4BD;
  --muted: #A39D95;
  --ember: #E08A50;
  --ember-ink: #1E1B18;
  --ember-soft: rgba(224, 138, 80, .14);
  --ember-glow: rgba(240, 150, 80, .6);
  --slate: #A3AFB9;
  --slate-soft: rgba(163, 175, 185, .10);
  --logo: #FFFFFF;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .2);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .22), 0 10px 22px rgba(0, 0, 0, .26), 0 24px 44px -18px rgba(0, 0, 0, .5);
  --sh-3: 0 4px 12px rgba(0, 0, 0, .25), 0 20px 44px rgba(0, 0, 0, .34), 0 52px 90px -30px rgba(0, 0, 0, .6);
  --sh-press: inset 0 2px 6px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --sh-well: inset 0 2px 6px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --drop: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)) drop-shadow(0 3px 5px rgba(0, 0, 0, .35)) brightness(.8);
  --drop-lit: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)) drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
  --glass: rgba(42, 42, 41, .74);
  --pool-a: rgba(224, 138, 80, .13);
  --pool-b: rgba(130, 150, 170, .10);
  --grain: .06;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1rem/1.62 var(--f-text); font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color 1.2s ease, color 1.2s ease;
  padding-bottom: var(--bar-h);
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ember); color: var(--ember-ink); padding: 10px 16px; border-radius: var(--r-1); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.022em; line-height: 1.06; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.012em; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: var(--t-lead); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section-head { display: grid; gap: var(--s2); margin-bottom: clamp(32px, 5vw, 56px); max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* Pilot light: the small glowing indicator borrowed from GL-007 */
.pilot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft), 0 0 12px var(--ember-glow); flex: none; }
.pilot.pulse { animation: pilot 2.6s ease-in-out infinite; }
@keyframes pilot { 50% { box-shadow: 0 0 0 5px var(--ember-soft), 0 0 20px var(--ember-glow); } }

/* Atmosphere: grain and drifting light pools */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pools { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pools i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(56px); opacity: 1; }
.pools i:nth-child(1) { background: radial-gradient(closest-side, var(--pool-a), transparent); left: -18vmax; top: -12vmax; animation: drift 24s ease-in-out infinite alternate; }
.pools i:nth-child(2) { background: radial-gradient(closest-side, var(--pool-b), transparent); right: -22vmax; bottom: -20vmax; animation: drift 21s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); } }

/* Buttons */
.btn { --bg: var(--raised); --fg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); font: 600 .98rem/1 var(--f-text); text-decoration: none; cursor: pointer; box-shadow: var(--sh-2);
  transition: transform .25s var(--e-out), box-shadow .25s var(--e-out), background-color .3s; will-change: transform; }
.btn:hover { box-shadow: var(--sh-3); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: var(--sh-press); }
.btn.primary { --bg: var(--ember); --fg: var(--ember-ink); }
.btn.ghost { box-shadow: var(--sh-1); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .arrow { transition: transform .3s var(--e-out); }
.btn:hover .arrow { transform: translateX(3px); }
.link { color: var(--ember); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--e-out); padding-bottom: 2px; }
.link:hover { background-size: 100% 1.5px; }

/* Header */
.top { position: fixed; inset: 12px 0 auto; z-index: 50; pointer-events: none; }
.top .bar { pointer-events: auto; display: flex; align-items: center; gap: var(--s2); padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sh-2);
  transition: transform .45s var(--e-out), background-color .5s; }
.top.hide .bar { transform: translateY(-140%); }
.brand { display: inline-flex; color: var(--logo); line-height: 0; margin-right: auto; }
.brand svg { width: 132px; height: 47px; fill: currentColor; }
.nav { display: none; gap: 4px; align-items: center; }
.nav a, .nav button.nav-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--ink-2); background: none; border: 0; cursor: pointer; transition: background-color .2s, color .2s; }
.nav a:hover, .nav button.nav-btn:hover { background: var(--ember-soft); color: var(--ink); }
.nav a[aria-current="page"], .nav .has-sub.current > button { color: var(--ink); }
.nav a[aria-current="page"]::after, .nav .has-sub.current > button::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember-glow); }
.has-sub { position: relative; }
.has-sub .chev { width: 12px; height: 12px; transition: transform .3s var(--e-out); }
.has-sub:hover .chev, .has-sub:focus-within .chev { transform: rotate(180deg); }
.sub { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border-radius: var(--r-2);
  background: var(--raised); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--e-out), visibility .25s; }
.sub::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-1); color: var(--ink); }
.sub a img { width: 44px; height: 44px; object-fit: contain; filter: var(--drop); }
.sub a small { display: block; color: var(--muted); font-size: .78rem; }
.sub a.all { grid-column: 1 / -1; justify-content: center; color: var(--ember); font-weight: 600; }
.call-pill { display: none; }

/* Theme switch: a modular rocker, like the product */
.theme { position: relative; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--raised); box-shadow: var(--sh-1); cursor: pointer; display: grid; place-items: center; flex: none; }
.theme .rocker { width: 18px; height: 28px; border-radius: 5px; background: var(--ground); box-shadow: var(--sh-well); position: relative; overflow: hidden; }
.theme .rocker::before { content: ""; position: absolute; inset: 2px; border-radius: 3px; background: linear-gradient(180deg, var(--raised-2) 0 50%, var(--ground-2) 50% 100%); box-shadow: 0 1px 2px rgba(0,0,0,.18); transform: perspective(60px) rotateX(14deg); transition: transform .35s var(--e-spring), background .35s; }
:root[data-theme="dark"] .theme .rocker::before { background: linear-gradient(180deg, var(--ground-2) 0 50%, var(--raised-2) 50% 100%); transform: perspective(60px) rotateX(-14deg); }
.theme .rocker::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 6px var(--ember-glow); transition: top .35s var(--e-spring); }
:root[data-theme="dark"] .theme .rocker::after { top: 18px; }

/* Mobile bottom bar */
.dock { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 50; display: flex; gap: 2px; padding: 6px; border-radius: 22px; width: min(100% - 24px, 420px);
  background: var(--glass); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sh-3); }
.dock a { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 16px; text-decoration: none; font-size: .7rem; font-weight: 600; color: var(--muted); min-height: 48px; }
.dock a svg { width: 22px; height: 22px; }
.dock a[aria-current="page"] { color: var(--ink); background: var(--raised); box-shadow: var(--sh-1); }
.dock a.cta { color: var(--ember-ink); background: var(--ember); }
:root { --bar-h: 84px; }

@media (min-width: 960px) {
  :root { --bar-h: 0px; }
  .dock { display: none; }
  .nav { display: flex; }
  .call-pill { display: inline-flex; min-height: 44px; padding: 0 18px; }
  .brand svg { width: 150px; height: 53px; }
}

/* Reveal */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--e-out), transform 1.1s var(--e-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .words .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--e-out); transition-delay: calc(var(--d, 0) * 90ms + 150ms); }
.js .words.in .w > span { transform: none; }

/* ===== HERO: the orbit ===== */
.hero { position: relative; }
.hero .stage { position: relative; min-height: 100svh; min-height: 100dvh; overflow: hidden; display: grid; }
.hero .lights-off { position: absolute; inset: 0; z-index: 6; background: var(--ground-2); pointer-events: none; opacity: 0; }
.js .hero .lights-off { opacity: .92; animation: lights-on 1.15s .15s steps(1, end) forwards, lights-fade .9s 1.2s var(--e-out) forwards; }
@keyframes lights-on { 0% { opacity: .92 } 18% { opacity: .35 } 26% { opacity: .85 } 38% { opacity: .2 } 46% { opacity: .6 } 60%, 100% { opacity: .12 } }
@keyframes lights-fade { from { opacity: .12 } to { opacity: 0 } }
.hero .glow { position: absolute; left: 50%; top: 62%; width: 120vmin; height: 120vmin; translate: -50% -50%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, var(--pool-a), transparent 70%); }
.orbit { position: absolute; left: 50%; top: 64%; width: min(118vw, 980px); aspect-ratio: 1.9; translate: -50% -50%; z-index: 2; transform: rotate(-12deg) scale(var(--push, 1)); }
.orbit .trail { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 86%, var(--ember-soft) 96%, transparent 100%); filter: blur(4px); opacity: .9; }
.orbit .sat { position: absolute; left: var(--x); top: var(--y); width: var(--size, 22%); translate: -50% -50%; transform: rotate(12deg) scale(var(--s, 1)); z-index: var(--z, 1); opacity: var(--o, 1); will-change: transform, left, top; }
.orbit .sat img { width: 100%; filter: var(--drop); }
.orbit .core { position: absolute; left: 50%; top: 50%; width: 34%; translate: -50% -50%; transform: rotate(12deg); z-index: 50; }
.orbit .core img { width: 100%; filter: var(--drop); }
.hero .copy { position: relative; z-index: 5; align-self: start; padding-top: clamp(104px, 15vh, 150px); text-align: center; display: grid; justify-items: center; }
.hero h1 { font-size: var(--t-hero); max-width: 13ch; }
.hero .support { margin: var(--s2) auto var(--s3); max-width: 34ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero .stage-cap { position: absolute; inset: auto 0 clamp(96px, 14vh, 140px); z-index: 5; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.hero .cap { grid-area: 1 / 1; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--e-out), transform .8s var(--e-out); max-width: 30ch; }
.hero .cap.on { opacity: 1; transform: none; }
.hero .cap strong { display: block; font: 700 var(--t-h2)/1.05 var(--f-display); letter-spacing: -.02em; }
.hero .cap span { color: var(--ink-2); }
.hero .cue { position: absolute; left: 50%; bottom: calc(var(--bar-h) + 18px); translate: -50% 0; z-index: 5; display: grid; justify-items: center; gap: 6px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero .cue i { width: 2px; height: 30px; border-radius: 2px; background: linear-gradient(var(--ember), transparent); animation: cue 1.8s var(--e-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0) } 60% { transform: scaleY(1); opacity: 1 } 100% { opacity: 0 } }
@media (min-width: 960px) {
  .hero .copy { text-align: left; justify-items: start; align-self: center; padding-top: 40px; }
  .hero .copy h1 { max-width: 11ch; }
  .hero .support { margin-left: 0; }
  .hero .ctas { justify-content: flex-start; }
  .orbit { left: 67%; top: 55%; width: min(56vw, 860px); }
  .hero .glow { left: 67%; top: 55%; }
  .hero .stage-cap { justify-items: start; text-align: left; inset: auto 0 auto 0; top: 50%; translate: 0 -50%; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .hero .cap { max-width: 22ch; }
}
@media (max-width: 700px) {
  .orbit { top: 68%; width: 150vw; }
  .orbit .core { width: 38%; }
  .hero .copy { padding-top: 96px; }
  .hero .cue { display: none; }
}
@media (max-height: 640px) and (max-width: 700px) { .orbit { top: 74%; } }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fact { padding: 22px 20px; border-radius: var(--r-2); background: var(--raised); box-shadow: var(--sh-2); }
.fact b { display: block; font: 700 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fact span { color: var(--muted); font-size: .92rem; }
@media (min-width: 800px) { .facts { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* Editorial intro */
.editorial { font: 600 clamp(1.35rem, 1rem + 1.5vw, 2.2rem)/1.3 var(--f-display); letter-spacing: -.018em; max-width: 30ch; }
.editorial em { font-style: normal; color: var(--ember); }
.editorial-grid { display: grid; gap: var(--s4); align-items: end; }
.editorial-grid .side { color: var(--ink-2); max-width: 46ch; }
@media (min-width: 900px) { .editorial-grid { grid-template-columns: 1.4fr 1fr; gap: var(--s6); } }

/* Module tiles (cards): raised plates, depth only, no borders */
.module { position: relative; display: block; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-2); text-decoration: none; color: inherit; isolation: isolate;
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out); transform-style: preserve-3d; }
a.module:hover { box-shadow: var(--sh-3); }
.module .plate { position: relative; aspect-ratio: 1; border-radius: calc(var(--r-3) - 8px); margin: 8px; background: radial-gradient(120% 90% at 50% 20%, var(--raised-2), var(--ground) 120%); box-shadow: var(--sh-well); display: grid; place-items: center; overflow: hidden; }
.module .plate img { width: 76%; height: 76%; object-fit: contain; filter: var(--drop); transition: transform .7s var(--e-out); }
a.module:hover .plate img { transform: scale(1.05) translateY(-4px); }
.module .meta { padding: 10px 18px 18px; display: grid; gap: 4px; }
.module .meta h3 { font-size: 1.02rem; }
.module .code { font: 500 .74rem/1 var(--f-mono); color: var(--slate); letter-spacing: .04em; }
.module .pilot { position: absolute; top: 20px; right: 20px; z-index: 2; opacity: 0; transition: opacity .3s; }
a.module:hover .pilot, a.module:focus-visible .pilot { opacity: 1; }

/* Category rail */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--gutter) 28px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: thin; }
.cats > * { scroll-snap-align: start; }
.cat .meta { padding: 6px 20px 22px; }
.cat .meta h3 { font-size: 1.2rem; }
.cat .tag { color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.cat .count { font: 500 .74rem/1 var(--f-mono); color: var(--slate); margin-top: 6px; }
@media (min-width: 640px) { .cats { grid-auto-columns: 42%; } }
@media (min-width: 1000px) { .cats { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: 12px 0 0; margin: 0; } .cats > :first-child { grid-column: span 2; grid-row: span 2; } .cats > :first-child .plate { aspect-ratio: auto; height: calc(100% - 16px - 110px); min-height: 300px; } .cats > :first-child .plate img { width: 64%; height: 64%; } }

/* Features */
.features { display: grid; gap: 14px; grid-template-columns: 1fr; }
.feature { padding: 26px 24px; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-2); display: grid; gap: 10px; align-content: start; }
.feature .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--ground); box-shadow: var(--sh-well); display: grid; place-items: center; color: var(--ember); margin-bottom: 6px; }
.feature .ico svg { width: 24px; height: 24px; }
.feature p { color: var(--ink-2); margin: 0; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* Switchboards showcase */
.boards { display: grid; gap: 18px; }
.boards .viewer { position: relative; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-3); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.boards .viewer .shot { grid-area: 1 / 1; width: 78%; opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .6s var(--e-out), transform .9s var(--e-out); }
.boards .viewer .shot.on { opacity: 1; transform: none; }
.boards .viewer .shot img { filter: var(--drop); }
.boards .viewer .label { position: absolute; left: 20px; bottom: 18px; right: 20px; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-weight: 600; z-index: 3; }
.thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.thumbs button { border: 0; padding: 8px; border-radius: var(--r-2); background: var(--raised); box-shadow: var(--sh-1); cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; transition: box-shadow .3s, transform .3s var(--e-out); }
.thumbs button[aria-pressed="true"] { box-shadow: var(--sh-press); transform: scale(.97); }
.thumbs button img { width: 90%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
@media (min-width: 900px) { .boards { grid-template-columns: 1fr 120px; } .boards .viewer { aspect-ratio: 16 / 10; } .boards .thumbs { grid-auto-flow: row; grid-auto-rows: auto; overflow: visible; padding: 0; } }

/* Frame picker */
.frames { display: grid; gap: 22px; align-items: center; }
.frames .stagebox { aspect-ratio: 1; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-3); display: grid; place-items: center; position: relative; overflow: hidden; }
.frames .stagebox .shot { opacity: 0; transform: rotate(-4deg) scale(.92); transition: opacity .5s var(--e-out), transform .9s var(--e-spring); }
.frames .stagebox .shot.on { opacity: 1; transform: none; }
.frames .stagebox img { filter: var(--drop); }
.swatches { display: grid; gap: 12px; }
.swatch { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; border: 0; padding: 12px 16px 12px 12px; border-radius: var(--r-2); background: var(--raised); box-shadow: var(--sh-1); cursor: pointer; min-height: 72px; transition: box-shadow .3s, transform .3s var(--e-out); }
.swatch .chip { width: 48px; height: 48px; border-radius: 14px; flex: none; box-shadow: var(--sh-well); background-size: 220%; background-position: center; }
.swatch[aria-pressed="true"] { box-shadow: var(--sh-press); }
.swatch[aria-pressed="true"] .pilot { opacity: 1; }
.swatch .pilot { margin-left: auto; opacity: 0; transition: opacity .3s; }
.swatch b { font-weight: 600; }
@media (min-width: 900px) { .frames { grid-template-columns: 1.2fr 1fr; gap: 56px; } }

/* Testimonials */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--gutter) 28px; margin-inline: calc(-1 * var(--gutter)); }
.quote { scroll-snap-align: center; margin: 0; padding: 28px 24px 24px; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-2); display: grid; gap: 18px; align-content: space-between; }
.quote blockquote { margin: 0; font: 500 1.08rem/1.5 var(--f-text); color: var(--ink); }
.quote blockquote::before { content: "\201C"; display: block; font: 700 3.2rem/.6 var(--f-display); color: var(--ember); height: 24px; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.quote figcaption .av { width: 48px; height: 48px; border-radius: 14px; background: var(--ground); box-shadow: var(--sh-well); display: grid; place-items: center; flex: none; }
.quote figcaption .av img { width: 80%; }
@media (min-width: 700px) { .quotes { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .quotes { grid-auto-columns: 31.5%; } }
.rail-ctl { display: flex; gap: 8px; }
.rail-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--raised); box-shadow: var(--sh-1); cursor: pointer; display: grid; place-items: center; }
.rail-ctl button svg { width: 18px; height: 18px; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px, 4vw, 40px); flex-wrap: wrap; }
.head-row .section-head { margin: 0; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery a { aspect-ratio: 1; border-radius: var(--r-2); background: var(--raised); box-shadow: var(--sh-1); display: grid; place-items: center; transition: transform .5s var(--e-out), box-shadow .5s; }
.gallery a:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.gallery img { width: 78%; filter: var(--drop); }
@media (min-width: 900px) { .gallery { gap: 18px; } }

/* Family banner */
.family { position: relative; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-3); padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); overflow: hidden; display: grid; gap: 14px; text-align: center; justify-items: center; }
.family .big { font: 700 clamp(3.4rem, 2rem + 6vw, 7rem)/.9 var(--f-display); letter-spacing: -.05em; color: var(--ember); font-variant-numeric: tabular-nums; }

/* Forms */
.contact-grid { display: grid; gap: 22px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: start; } }
.panel { border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-2); padding: clamp(22px, 4vw, 40px); }
.person { display: grid; gap: 18px; }
.person .who { display: flex; gap: 14px; align-items: center; }
.person .avatar { width: 56px; height: 56px; border-radius: 18px; background: var(--ground); box-shadow: var(--sh-well); display: grid; place-items: center; font: 700 1.2rem var(--f-display); color: var(--ember); }
.person .phone { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.01em; text-decoration: none; font-variant-numeric: tabular-nums; }
.person .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--ground); box-shadow: var(--sh-well); font-size: .86rem; font-weight: 600; color: var(--ink-2); }
form .grid { display: grid; gap: 14px; }
@media (min-width: 600px) { form .grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .9rem; }
.field label .req { color: var(--ember); }
.field input, .field textarea { width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 14px; background: var(--ground); box-shadow: var(--sh-well); outline: none; transition: box-shadow .2s; font-size: 1rem; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: var(--sh-well), 0 0 0 2.5px var(--ember); }
.field .err { color: #B3261E; font-size: .84rem; min-height: 0; }
:root[data-theme="dark"] .field .err { color: #F2B8B5; }
.field[data-invalid] input, .field[data-invalid] textarea { box-shadow: var(--sh-well), 0 0 0 2px #B3261E; }
.form-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.form-foot .note { font-size: .86rem; color: var(--muted); flex: 1 1 220px; }
.review { display: none; gap: 14px; }
.review pre { white-space: pre-wrap; margin: 0; padding: 16px; border-radius: 14px; background: var(--ground); box-shadow: var(--sh-well); font: 400 .95rem/1.5 var(--f-text); }
form.reviewing .grid, form.reviewing .form-foot { display: none; }
form.reviewing .review { display: grid; }
.newsletter { display: grid; gap: 22px; }
.newsletter form { display: grid; gap: 12px; }
@media (min-width: 900px) { .newsletter { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; } }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form .field { flex: 1 1 240px; }

/* Page hero (inner pages) */
.page-hero { position: relative; padding: clamp(120px, 16vw, 180px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.page-hero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); max-width: 18ch; }
.page-hero .lead { max-width: 60ch; margin-top: var(--s3); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .86rem; color: var(--muted); margin-bottom: var(--s3); padding: 0; list-style: none; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ember); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }

/* Category page */
.cat-hero { display: grid; gap: 28px; align-items: center; }
.cat-hero .art { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-3); display: grid; place-items: center; }
.cat-hero .art img { width: 70%; filter: var(--drop); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.cat-hero .tagline { font: 600 var(--t-lead)/1.3 var(--f-display); color: var(--ember); margin: 14px 0 12px; }
@media (min-width: 900px) { .cat-hero { grid-template-columns: 1.2fr 1fr; gap: 56px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip-btn { border: 0; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--raised); box-shadow: var(--sh-1); cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-2); transition: box-shadow .25s, color .25s; }
.chip-btn[aria-pressed="true"] { box-shadow: var(--sh-press); color: var(--ink); }
.chip-btn .n { font: 500 .72rem var(--f-mono); color: var(--slate); margin-left: 6px; }
.grid-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-products .module .meta { padding: 6px 14px 16px; }
.grid-products .module .meta h3 { font-size: .96rem; }
.grid-products .module[hidden] { display: none; }
@media (min-width: 720px) { .grid-products { grid-template-columns: repeat(3, 1fr); gap: 18px; } .grid-products .module .meta { padding: 8px 18px 20px; } }
@media (min-width: 1100px) { .grid-products { grid-template-columns: repeat(4, 1fr); } }

/* Categories index */
.cat-rows { display: grid; gap: 18px; }
.cat-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 14px; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-2); text-decoration: none; transition: box-shadow .4s, transform .5s var(--e-out); }
.cat-row:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.cat-row .plate { aspect-ratio: 1; border-radius: var(--r-2); background: radial-gradient(120% 90% at 50% 20%, var(--raised-2), var(--ground) 120%); box-shadow: var(--sh-well); display: grid; place-items: center; }
.cat-row .plate img { width: 78%; filter: var(--drop); }
.cat-row h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); }
.cat-row .tag { color: var(--ember); font-weight: 600; margin: 4px 0 6px; }
.cat-row .blurb { color: var(--ink-2); display: none; margin: 0; }
.cat-row .go { display: flex; gap: 12px; align-items: center; margin-top: 8px; font: 500 .76rem var(--f-mono); color: var(--slate); }
@media (min-width: 760px) { .cat-row { grid-template-columns: 220px 1fr; padding: 18px; gap: 32px; } .cat-row .blurb { display: block; } }
.search { position: relative; max-width: 520px; margin-bottom: 22px; }
.search input { width: 100%; min-height: 52px; padding: 0 18px 0 48px; border: 0; border-radius: var(--r-pill); background: var(--raised); box-shadow: var(--sh-well); font-size: 1rem; outline: none; }
.search input:focus-visible { box-shadow: var(--sh-well), 0 0 0 2.5px var(--ember); }
.search svg { position: absolute; left: 17px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; color: var(--muted); }
.empty { padding: 32px; text-align: center; color: var(--muted); }

/* Product page */
.product { display: grid; gap: 28px; }
.pgallery { display: grid; gap: 12px; }
.pgallery .main { position: relative; aspect-ratio: 1; border-radius: var(--r-3); background: radial-gradient(110% 80% at 50% 15%, var(--raised-2), var(--raised) 60%); box-shadow: var(--sh-3); display: grid; place-items: center; overflow: hidden; }
.pgallery .main .view { display: grid; place-items: center; width: 100%; height: 100%; grid-area: 1 / 1; opacity: 0; transition: opacity .45s var(--e-out), transform .8s var(--e-out); transform: scale(.96); }
.pgallery .main .view.on { opacity: 1; transform: none; }
.pgallery .main img { width: 74%; filter: var(--drop); margin: auto; }
.pgallery .main .pilot { position: absolute; top: 22px; right: 22px; }
.pgallery .thumbs { grid-auto-columns: 92px; justify-content: start; }
.pinfo .code { display: inline-flex; align-items: center; gap: 10px; font: 500 .82rem/1 var(--f-mono); color: var(--slate); padding: 9px 13px; border-radius: var(--r-pill); background: var(--slate-soft); margin-bottom: 16px; }
.pinfo h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }
.pinfo .cat-link { display: inline-block; margin-top: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.pinfo .cat-link:hover { color: var(--ember); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0; padding: 0; }
.specs div { padding: 14px 16px; border-radius: var(--r-2); background: var(--raised); box-shadow: var(--sh-1); }
.specs dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.specs dd { margin: 0; font-weight: 600; }
.pinfo .desc { color: var(--ink-2); font-size: 1.04rem; }
.pinfo .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pinfo .ship { margin-top: 20px; }
@media (min-width: 900px) { .product { grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; } .pgallery { position: sticky; top: 100px; } }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pager a { padding: 16px 18px; border-radius: var(--r-2); background: var(--raised); box-shadow: var(--sh-1); text-decoration: none; display: grid; gap: 2px; transition: box-shadow .3s; }
.pager a:hover { box-shadow: var(--sh-2); }
.pager a small { color: var(--muted); font-size: .78rem; }
.pager a.next { text-align: right; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--gutter) 28px; margin-inline: calc(-1 * var(--gutter)); }
.rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .rail { grid-auto-columns: 30%; } }
@media (min-width: 1100px) { .rail { grid-auto-columns: 23%; } }

/* About */
.about-grid { display: grid; gap: 32px; }
.about-grid .body p { color: var(--ink-2); font-size: 1.06rem; }
.about-grid .body p:first-child { font: 600 var(--t-lead)/1.45 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.collage div { aspect-ratio: 1; border-radius: var(--r-3); background: var(--raised); box-shadow: var(--sh-2); display: grid; place-items: center; }
.collage div:first-child { grid-column: span 2; aspect-ratio: 2 / 1.1; }
.collage img { width: 70%; filter: var(--drop); }
.collage div:first-child img { width: 44%; }
.pull { font: 700 clamp(1.6rem, 1.1rem + 2vw, 2.8rem)/1.15 var(--f-display); letter-spacing: -.025em; text-align: center; max-width: 22ch; margin: 0 auto; }
.pull em { font-style: normal; color: var(--ember); }
@media (min-width: 960px) { .about-grid { grid-template-columns: 1.2fr 1fr; gap: 64px; } .collage { position: sticky; top: 110px; } }

/* Footer */
.foot { position: relative; margin-top: clamp(48px, 8vw, 96px); padding: clamp(48px, 7vw, 88px) 0 calc(40px + var(--bar-h)); background: var(--ground-2); }
.foot-grid { display: grid; gap: 36px; }
.foot .brand svg { width: 170px; height: 60px; }
.foot h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--f-text); font-weight: 600; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot ul a { text-decoration: none; color: var(--ink-2); display: inline-block; padding: 6px 0; }
.foot ul a:hover { color: var(--ember); }
.foot .line { font: 600 1.15rem/1.35 var(--f-display); max-width: 22ch; margin: 18px 0; }
.foot .base { margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: var(--muted); font-size: .86rem; box-shadow: 0 -1px 0 0 rgba(128,128,128,.0); }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* 404 */
.nf { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 120px 0 60px; }
.nf .big { font: 800 clamp(5rem, 3rem + 10vw, 10rem)/.9 var(--f-display); letter-spacing: -.06em; color: var(--ember); }

/* Tilt on fine pointers */
@media (hover: hover) and (pointer: fine) { .tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(0); } }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero { height: auto; }
  .hero .stage { position: relative; height: auto; min-height: 100svh; }
  .js .rv, .js .words .w > span { opacity: 1; transform: none; }
  .pools i { animation: none; }
}

/* viewer centring */
.boards .viewer .shot, .frames .stagebox .shot { display: grid; place-items: center; }
.boards .viewer .shot img, .frames .stagebox .shot img { width: 100%; }
.boards .viewer .shot { width: min(78%, 620px); }
@media (min-width: 1000px) { .cats > :nth-child(6), .cats > :last-child { grid-column: span 2; } .cats > :nth-child(6) .plate, .cats > :last-child .plate { aspect-ratio: auto; height: calc(100% - 16px - 110px); min-height: 200px; } .cats > :nth-child(6) .plate img, .cats > :last-child .plate img { width: 40%; height: 76%; } }

/* ===== Lights: the wall switch, the slow fade and the lamps ===== */
:root.theming::view-transition-old(root), :root.theming::view-transition-new(root) { animation-duration: 1.6s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
.lit-base, img.lit { grid-area: 1 / 1; }
.orbit .core { display: grid; }
.orbit .core img { width: 100%; }
img.lit { opacity: 0; filter: var(--drop-lit); pointer-events: none; transition: opacity .4s ease; }
:root[data-theme="dark"] img.lit { opacity: 1; transition: opacity 1.8s cubic-bezier(.3, 0, .2, 1) .7s; animation: lamp 5s ease-in-out 2.5s infinite; }
@keyframes lamp { 0%, 100% { opacity: 1; } 48% { opacity: .9; } 50% { opacity: .97; } }
.plate img.lit, .pgallery .main img.lit, .cat-hero .art img.lit, .gallery img.lit, .collage img.lit, .boards .viewer .shot img.lit { width: inherit; }

.wallswitch { display: inline-flex; align-items: center; gap: 14px; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.ws-plate { position: relative; display: grid; place-items: center; width: 64px; height: 84px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-2); transition: box-shadow .2s, transform .2s var(--e-spring); }
.ws-plate picture { display: contents; }
.ws-plate img { grid-area: 1 / 1; width: 40px; height: auto; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .22)); transition: opacity .18s ease; }
.ws-plate .ws-off img { transform: rotate(180deg); opacity: 0; }
:root[data-theme="dark"] .ws-plate .ws-on img { opacity: 0; }
:root[data-theme="dark"] .ws-plate .ws-off img { opacity: 1; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .4)) brightness(.75); }
.ws-pilot { position: absolute; top: 7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--muted); opacity: .45; transition: background .3s, box-shadow .6s, opacity .3s; }
:root[data-theme="dark"] .ws-pilot { background: #FF7A3A; opacity: 1; box-shadow: 0 0 6px 2px rgba(255, 110, 50, .7), 0 0 16px 4px rgba(255, 110, 50, .35); transition-delay: .5s; }
.wallswitch:hover .ws-plate { box-shadow: var(--sh-3); }
.wallswitch.press .ws-plate { animation: press .26s var(--e-spring); }
@keyframes press { 40% { transform: scale(.94); box-shadow: var(--sh-press); } }
.ws-label { display: grid; line-height: 1.2; }
.ws-label b { font: 600 .92rem/1.2 var(--f-text); }
.ws-state { font: 500 .74rem var(--f-mono); color: var(--slate); letter-spacing: .06em; text-transform: uppercase; }
.wallswitch.small .ws-plate { width: 52px; height: 68px; border-radius: 13px; }
.wallswitch.small .ws-plate img { width: 32px; }
@media (min-width: 960px) { .ws-plate { width: 76px; height: 100px; border-radius: 18px; } .ws-plate img { width: 48px; } }

/* Hero v2: page scrolls normally; on phones the orbit sits in its own row below the copy */
@media (max-width: 959px) {
  .hero .stage { display: flex; flex-direction: column; align-items: center; min-height: 0; padding-bottom: calc(var(--bar-h) + 24px); }
  .hero .copy { order: -1; padding-top: 112px; }
  .hero .orbit { position: relative; left: auto; top: auto; translate: none; flex: none; width: 118vw; max-width: 900px; margin: 72px 0 64px; }
  .hero .glow { top: 70%; }
}
/* the wall switch in the header: same plate, no label */
.wallswitch.mini .ws-label { display: none; }
.wallswitch.mini .ws-plate, .top .wallswitch.mini .ws-plate { width: 44px; height: 44px; border-radius: 14px; box-shadow: var(--sh-1); }
.wallswitch.mini .ws-plate img { width: 24px; }
.wallswitch.mini .ws-pilot { top: 4px; width: 4px; height: 4px; margin-left: -2px; }
.wallswitch.mini { flex: none; }