/* Front Counter AI, front page v2: "The Counter".
   One drawn front counter in a walnut room. Every bay of the counter is one piece of the
   business with its posted prices. Modes:
     phone (under 900 px): the bays stack, each object drawn above its own bit of counter.
     desktop, html.still (static=1, reduced motion, no GSAP): the bays wrap into rows of counter.
     desktop with motion: the stage is pinned and the camera pans along the counter (page.js).
   Everything on the counter is sized in --u so the drawing scales as one piece. */

:root {
  --walnut: #2b1d14;
  --walnut-deep: #1c120c;
  --walnut-2: #36251a;
  --walnut-3: #4a311f;
  --lamp: #ffcf8a;
  --brass: #c9a04d;
  --brass-lt: #e4c482;
  --brass-dk: #8a6a2e;
  --brass-ink: #7a5a20;
  --cream: #f5ecd9;
  --cream-2: #d9ccb4;
  --mute: #bfae92;
  --ink: #2b1d14;
  --ink-2: #5e4a39;
  --rule: #dccaa6;
  --open: #2f9e6a;
  --display: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4.4vw, 64px);

  --sl-font: var(--body);
  --sl-font-display: var(--display);
  --sl-ink: var(--walnut);
  --sl-muted: var(--ink-2);
  --sl-bg: var(--cream);
  --sl-bg-2: #ede2cb;
  --sl-line: rgba(43, 29, 20, .2);
  --sl-accent: var(--brass);
  --sl-accent-ink: var(--walnut-deep);
  --sl-me: var(--walnut);
  --sl-me-ink: var(--cream);
  --sl-radius: 16px;
  --sl-radius-sm: 10px;
  --sl-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  --sl-focus: 0 0 0 3px rgba(201, 160, 77, .65);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--walnut); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--walnut); color: var(--cream); font: 400 17px/1.55 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 200; background: var(--cream); color: var(--walnut); padding: 12px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, 100% - 2 * var(--gut)); margin-inline: auto; }
.eyebrow { font: 700 12.5px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt); }

/* ---------- the shared components, worn in walnut and brass ---------- */
.sl-chip-ai { background: var(--open); color: #0b1f15; }
.sam-fab { background: var(--cream); color: var(--walnut); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--brass); }
.sam-fab .sam-dot { background: var(--open); animation: none; box-shadow: 0 0 0 4px rgba(47, 158, 106, .22); }
.mock { --m-ink: #22170f; --m-bg: #fffaf0; --m-bg-2: #f1e7d2; --m-accent: var(--brass); --m-accent-ink: #1c120c; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font: 650 16.5px/1.1 var(--body); text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-lamp { background: var(--lamp); color: var(--walnut-deep); }
.btn-lamp:hover { background: #ffdcab; }
.btn-ink { background: var(--walnut); color: var(--cream); }
.btn-ink:hover { background: #3d2a1d; }
.btn-line { background: transparent; border-color: currentColor; color: inherit; }
.btn-sm { min-height: 46px; padding: 0 18px; font-size: 15.5px; }

/* ---------- header ---------- */
.top { position: absolute; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gut); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -.015em; color: var(--cream); white-space: nowrap; }
.brand svg { width: 30px; height: 30px; flex: none; }
.top nav { display: flex; align-items: center; gap: 2px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--cream); }
.top nav a:hover { color: var(--lamp); }
.btn-sam { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 8px; padding: 0 14px 0 18px; border-radius: 999px; border: 1.5px solid rgba(245, 236, 217, .4); background: rgba(20, 12, 7, .55); color: var(--cream); font: 650 15px/1 var(--body); cursor: pointer; }
.btn-sam:hover { border-color: var(--lamp); }
@media (max-width: 600px) {
  .btn-sam { display: none; }
  .brand { font-size: 17px; gap: 8px; }
  .brand svg { width: 26px; height: 26px; }
  .top nav a { padding: 0 9px; }
}

/* =========================================================================
   THE COUNTER (hero and the three steps)
   ========================================================================= */
.counter { position: relative; --u: 1px; --slab-h: 90; }
.stage { position: relative; background: var(--walnut); }
.room { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #150d08 0, var(--walnut) 700px); }
.track { position: relative; }
.bay { position: relative; isolation: isolate; }
.bay-hero { z-index: 2; }

/* The counter itself: top face, brass edge, front panels, foot rail. Flat bands only.
   --n is the number of panels in this run, so runs placed side by side meet at a stile. */
.slab {
  --n: 2; --p-top: 66; --p-bot: 62;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc(var(--u) * var(--slab-h));
  background:
    linear-gradient(#120a06, #120a06) 0 100% / 100% calc(var(--u) * 12) no-repeat,
    linear-gradient(180deg, #553824 0, #553824 calc(var(--u) * 3), #4c3220 calc(var(--u) * 3), #4c3220 calc(var(--u) * 34), #8a6038 calc(var(--u) * 34), #8a6038 calc(var(--u) * 36), var(--brass) calc(var(--u) * 36), var(--brass) calc(var(--u) * 43), #140b07 calc(var(--u) * 43), #140b07 calc(var(--u) * 47), #36251a calc(var(--u) * 47));
}
.slab::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--u) * var(--p-top)); bottom: calc(var(--u) * var(--p-bot));
  background: linear-gradient(90deg, transparent calc(var(--u) * 12), #45301f calc(var(--u) * 12), #45301f calc(var(--u) * 14), #2a1c13 calc(var(--u) * 14), #2a1c13 calc(100% - var(--u) * 12), transparent calc(100% - var(--u) * 12)) 0 0 / calc(100% / var(--n)) 100% repeat-x;
}
.slab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 12); height: calc(var(--u) * 36);
  background:
    linear-gradient(var(--brass-lt), var(--brass-lt)) 0 0 / 100% calc(var(--u) * 3) no-repeat,
    linear-gradient(var(--brass), var(--brass)) 0 0 / 100% calc(var(--u) * 11) no-repeat,
    linear-gradient(90deg, transparent calc(50% - var(--u) * 4), var(--brass-dk) calc(50% - var(--u) * 4), var(--brass-dk) calc(50% + var(--u) * 4), transparent calc(50% + var(--u) * 4)) 0 calc(var(--u) * 11) / calc(100% / var(--n)) calc(var(--u) * 25) repeat-x;
}

/* ---------- the hero copy ---------- */
.hero-copy { position: relative; z-index: 7; }
.hero-copy h1 { font: 800 clamp(40px, 11vw, 58px)/.98 var(--display); letter-spacing: -.035em; color: var(--cream); }
.h1-b { display: block; color: color-mix(in srgb, var(--lamp) calc(var(--word, 1) * 100%), #7a6650); }
.lede { margin-top: 16px; font-size: 16.5px; line-height: 1.5; color: var(--cream-2); }
.biz { margin-top: 22px; }
.biz label { display: block; margin-bottom: 8px; font-weight: 650; font-size: 15px; color: var(--cream); }
.biz-row { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--cream); border-radius: 18px; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8); }
.biz-row:focus-within { box-shadow: 0 0 0 3px var(--lamp), 0 24px 40px -22px rgba(0, 0, 0, .8); }
.biz-row input { flex: 1; min-width: 0; height: 52px; border: 0; border-radius: 14px; background: transparent; padding: 0 14px; font: 500 17px var(--body); color: var(--walnut-deep); }
.biz-row input::placeholder { color: #8a7560; }
.biz-row input:focus { outline: none; }
.biz-row .btn { border-radius: 14px; white-space: nowrap; }
.hero-more { margin-top: 10px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; font-size: 16.5px; color: var(--cream); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.link-arrow svg { width: 20px; height: 12px; color: var(--brass-lt); transition: transform .15s ease; }
.link-arrow:hover svg { transform: translateX(3px); }
.preview-note { display: flex; gap: 10px; align-items: baseline; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.pv-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--brass); transform: translateY(-1px); }

/* ---------- the drawn scene in the hero ---------- */
.scene { position: relative; }
.glow { position: absolute; z-index: 2; border-radius: 50%; background: var(--lamp); opacity: calc(.2 * var(--glow, 1)); transform: scale(calc(.72 + .28 * var(--glow, 1))); filter: blur(calc(var(--u) * 90)); pointer-events: none; }
.lamp { position: absolute; z-index: 2; overflow: visible; }
.lamp .cone { fill: var(--lamp); opacity: calc(.06 * var(--glow, 1)); }
.lamp .bulb { opacity: var(--bulb, 1); }
.lamp-switch { transform: translateY(calc(var(--sw, 0) * -3px)); }
.tablet { position: absolute; z-index: 3; background: #140d08; border-radius: calc(var(--u) * 26); padding: calc(var(--u) * 16); box-shadow: 0 0 0 calc(var(--u) * 2) #3d2a1d, 0 calc(var(--u) * 40) calc(var(--u) * 60) calc(var(--u) * -24) rgba(0, 0, 0, .85); }
.tablet::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: calc(var(--u) * -14); height: calc(var(--u) * 14); background: var(--brass); border-radius: 0 0 calc(var(--u) * 6) calc(var(--u) * 6); box-shadow: inset 0 calc(var(--u) * 3) 0 var(--brass-lt); }
.tablet-tag { position: absolute; z-index: 2; left: calc(var(--u) * 24); top: calc(var(--u) * -11); font: 700 max(10.5px, calc(var(--u) * 11))/1 var(--body); letter-spacing: .12em; text-transform: uppercase; background: var(--brass); color: var(--walnut-deep); padding: calc(var(--u) * 5) calc(var(--u) * 8); border-radius: 4px; }
.screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 10); overflow: hidden; background: #fffaf0; }
.frame { width: 100%; height: 100%; font-size: calc(var(--u) * 10); }
.screen-off { position: absolute; inset: 0; background: #070403; opacity: var(--screen, 0); pointer-events: none; }
.open-sign { position: absolute; z-index: 3; width: calc(var(--u) * 134); }
.open-sign .chain { width: 100%; height: auto; }
.open-sign span { display: block; margin-top: calc(var(--u) * -2); padding: calc(var(--u) * 9) 0 calc(var(--u) * 10); text-align: center; background: #120b07; border: calc(var(--u) * 3) solid var(--brass-dk); border-radius: calc(var(--u) * 8); font: 700 calc(var(--u) * 25)/1 var(--display); letter-spacing: .05em; color: color-mix(in srgb, var(--open) calc(var(--open-on, 1) * 100%), #3a3226); text-shadow: 0 0 calc(var(--u) * 14) rgba(47, 158, 106, calc(.55 * var(--open-on, 1))); }
.nameplate { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 24) calc(var(--u) * 10); }
.nameplate::before { content: ""; position: absolute; inset: 0 0 calc(var(--u) * 10) 0; background: #1a100a; border: calc(var(--u) * 4) solid var(--brass); border-radius: calc(var(--u) * 4); box-shadow: inset 0 0 0 calc(var(--u) * 2) #0d0805; }
.nameplate::after { content: ""; position: absolute; left: calc(var(--u) * -8); right: calc(var(--u) * -8); bottom: 0; height: calc(var(--u) * 12); background: var(--brass-dk); border-radius: calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 12) rgba(0, 0, 0, .55); }
.np { position: relative; z-index: 1; display: block; width: 100%; overflow: hidden; white-space: nowrap; text-align: center; font: 700 calc(var(--u) * 24)/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt); }
.cue { display: none; }
.room-dim { position: absolute; inset: 0; z-index: 6; background: #0b0603; opacity: var(--dim, 0); pointer-events: none; }

/* ---------- the boards: posted prices pinned to the wall ---------- */
.board { position: relative; z-index: 3; background: var(--cream); color: var(--ink); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 28) calc(var(--u) * 30) calc(var(--u) * 26); box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 44) calc(var(--u) * -20) rgba(0, 0, 0, .8); font-size: max(14.5px, calc(var(--u) * 15)); line-height: 1.45; }
.tacks::before, .tacks::after { content: ""; position: absolute; top: calc(var(--u) * 11); width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: var(--brass); box-shadow: inset calc(var(--u) * -2) calc(var(--u) * -2) 0 var(--brass-dk), 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .3); }
.tacks::before { left: calc(var(--u) * 12); }
.tacks::after { right: calc(var(--u) * 12); }
.board .eyebrow { margin-bottom: calc(var(--u) * 6); font-size: max(11.5px, calc(var(--u) * 12)); color: var(--brass-ink); }
.board h3 { font: 800 max(23px, calc(var(--u) * 29))/1.06 var(--display); letter-spacing: -.025em; color: var(--walnut-deep); }
.board h3 .sl-chip-ai { font-size: max(11px, calc(var(--u) * 12)); vertical-align: calc(var(--u) * 6); }
.rates { margin-top: calc(var(--u) * 14); }
.rate { display: grid; grid-template-columns: calc(var(--u) * 122) minmax(0, 1fr); gap: calc(var(--u) * 16); padding: calc(var(--u) * 14) 0; border-top: 1.5px solid var(--rule); }
.rate-price { font: 800 max(25px, calc(var(--u) * 31))/1 var(--display); letter-spacing: -.03em; color: var(--walnut-deep); }
.rate-price small { display: block; margin-top: calc(var(--u) * 6); font: 650 max(11px, calc(var(--u) * 11.5))/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); }
.rate dd { color: var(--ink-2); }
.rate dd b { display: block; margin-bottom: calc(var(--u) * 3); font-weight: 700; font-size: max(15px, calc(var(--u) * 16)); line-height: 1.3; color: var(--walnut-deep); }
.rate-wide { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 6); }
.rate-wide .rate-price { font-size: max(22px, calc(var(--u) * 26)); }
.board-text { margin-top: calc(var(--u) * 10); color: var(--ink-2); }
@media (max-width: 480px) {
  .rate { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rate-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .rate-price small { margin-top: 0; }
}
.board-foot { padding-top: calc(var(--u) * 10); border-top: 1.5px solid var(--rule); font-weight: 650; color: var(--walnut-deep); }
.board-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--u) * 16); }
.board .btn-line { color: var(--walnut); }
.board .btn-sm { font-size: max(14.5px, calc(var(--u) * 15)); }

.art svg { width: calc(var(--u) * var(--aw)); height: auto; max-width: 100%; }
.bell-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; }
.bell-btn .dome { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .15s ease; }
.bell-btn:hover .dome { transform: translateY(-2px); }
.bell-btn .ding { opacity: 0; transform-box: view-box; transform-origin: 110px 90px; }
.bell-btn.ring .dome { animation: ring .65s ease-out; }
.bell-btn.ring .ding { animation: ding .75s ease-out; }
@keyframes ring { 0% { transform: rotate(0); } 15% { transform: rotate(-6deg); } 32% { transform: rotate(5deg); } 48% { transform: rotate(-3.5deg); } 64% { transform: rotate(2deg); } 82% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes ding { 0% { opacity: 0; transform: scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }
.bay-book .ink { stroke-dasharray: 90; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease .25s; }
.bay-book .ink-dot { transition: opacity .3s ease; }
html.motion .bay-book:not(.is-here) .ink { stroke-dashoffset: 90; }
html.motion .bay-book:not(.is-here) .ink-dot { opacity: 0; }
html.motion .bay-phone.is-here .led { animation: blink .5s steps(1) 4; }
@keyframes blink { 50% { fill: #5a4630; } }

/* ---------- the door at the end of the counter ---------- */
.floor { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: calc(var(--u) * 40); background: #140c07; box-shadow: 0 calc(var(--u) * -6) 0 #3a2719; }
.door { position: relative; z-index: 3; }
.door svg { width: 100%; height: auto; }
.glass { position: absolute; left: 16.5%; top: 10.6%; width: 66.5%; height: 43%; display: grid; align-content: center; justify-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10); text-align: center; color: #f0d6a0; font-size: max(13.5px, calc(var(--u) * 14)); line-height: 1.38; }
.glass .eyebrow { font-size: max(10.5px, calc(var(--u) * 11)); color: var(--brass); }
.glass h3 { font: 800 max(26px, calc(var(--u) * 32))/1 var(--display); letter-spacing: -.02em; color: #f5d995; margin-bottom: calc(var(--u) * 4); }
.glass-price { margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 8); border-top: 1px solid rgba(240, 214, 160, .35); font: 700 max(13.5px, calc(var(--u) * 14.5))/1.35 var(--display); color: #f5d995; }
.door-side { position: relative; z-index: 3; display: grid; gap: calc(var(--u) * 20); }
.note { display: grid; gap: calc(var(--u) * 10); justify-items: start; background: var(--cream); color: var(--ink); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 20) calc(var(--u) * 22); font-size: max(15px, calc(var(--u) * 16)); font-weight: 600; line-height: 1.4; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 36) calc(var(--u) * -18) rgba(0, 0, 0, .8); }
.tag-coming { display: inline-block; font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; background: var(--lamp); color: var(--walnut-deep); }
.note .tag-coming { background: var(--walnut); color: var(--lamp); }
.plaque { display: grid; gap: calc(var(--u) * 6); padding: calc(var(--u) * 22) calc(var(--u) * 26); border-radius: calc(var(--u) * 6); background: var(--brass); color: var(--walnut-deep); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--brass-lt), inset 0 0 0 calc(var(--u) * 5) var(--brass-dk), 0 calc(var(--u) * 20) calc(var(--u) * 36) calc(var(--u) * -18) rgba(0, 0, 0, .8); font-weight: 650; font-size: max(15px, calc(var(--u) * 16)); line-height: 1.4; }
.plaque-k { font: 700 max(11px, calc(var(--u) * 11.5))/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #3d2a12; }

/* ---------- the hero beat on load: the lamp clicks on. page.js steps these variables on
   timers (so the beat also finishes in headless renders) and removes them when done; with
   no variables set, everything is in its final state. ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.still):not(.lamp-done) .counter { --dim: .66; --glow: 0; --bulb: 0; --sw: 1; --screen: 1; --word: 0; --open-on: 0; }
}
.nameplate.glint .np { animation: glint .7s ease-out; }
@keyframes glint { from { color: #fff6e2; } }

/* ---------- phone and tablet portrait: everything stacks ---------- */
@media (max-width: 899px) {
  .bay-hero { display: flex; flex-direction: column; padding-top: 72px; overflow-x: clip; }
  .biz-row input { flex: none; }
  .scene { order: 1; --u: calc(min(100vw, 620px) / 600); width: calc(var(--u) * 600); height: calc(var(--u) * 540); margin: 0 auto; }
  .hero-copy { order: 2; display: flex; flex-direction: column; width: min(100%, 620px); margin: 0 auto; padding: 20px 16px 0; }
  .hero-copy h1 { order: 1; }
  .biz { order: 2; margin-top: 18px; }
  .preview-note { order: 3; margin-top: 10px; }
  .lede { order: 4; margin-top: 18px; }
  .hero-more { order: 5; margin-top: 8px; }
  .scene .slab { --slab-h: 116; --p-top: 54; --p-bot: 18; left: calc(50% - 50vw); right: calc(50% - 50vw); }
  .scene .slab::after { display: none; }
  .scene .room-dim { left: calc(50% - 50vw); right: calc(50% - 50vw); }
  .scene .tablet { left: calc(var(--u) * 16); bottom: calc(var(--u) * 104); width: calc(var(--u) * 470); height: calc(var(--u) * 312); }
  .scene .frame { font-size: calc(var(--u) * 11); }
  .scene .lamp { z-index: 4; left: calc(var(--u) * 229); bottom: calc(var(--u) * 96); width: calc(var(--u) * 391); height: calc(var(--u) * 442); }
  .scene .nameplate { left: calc(var(--u) * 100); bottom: calc(var(--u) * 8); width: calc(var(--u) * 400); height: calc(var(--u) * 58); }
  .scene .nameplate::after { display: none; }
  .scene .nameplate::before { inset: 0; }
  .scene .nameplate { padding-bottom: 0; }
  .scene .open-sign { left: calc(var(--u) * 30); top: calc(var(--u) * 12); width: calc(var(--u) * 118); }
  .scene .glow { left: calc(var(--u) * -60); bottom: calc(var(--u) * 40); width: calc(var(--u) * 720); height: calc(var(--u) * 480); }
  .scene .tablet-tag { font-size: 10px; }

  .bay:not(.bay-hero) { padding: 64px 16px 0; }
  .bay .board { max-width: 520px; margin: 0 auto; }
  .bay .art { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-end; margin: 30px auto -14px; }
  .bay .art svg { width: calc(var(--aw) * .8px); }
  .bay:not(.bay-hero) .slab { position: relative; margin: 0 -16px; --slab-h: 92; --p-top: 58; --p-bot: 14; }
  .bay:not(.bay-hero) .slab::after { display: none; }
  .slab-desk { --n: 2 !important; }
  .bay.bay-site { padding-top: 40px; }
  .bay-door { display: flex; flex-direction: column; padding-bottom: 0; }
  .bay-door .door { order: 1; width: min(310px, 82vw); margin: 0 auto; }
  .bay-door .floor { order: 2; position: relative; display: block; height: 26px; margin: 0 -16px; }
  .bay-door .slab-end { display: none; }
  .bay-door .door-side { order: 3; width: min(100%, 520px); margin: 36px auto 0; }
}

/* ---------- desktop: rows of counter (static), or the pinned pan (below) ---------- */
@media (min-width: 900px) {
  .counter { --u: clamp(.62px, calc(100vw / 1440), 1.34px); --slab-h: 210; }
  .track { display: flex; flex-wrap: wrap; justify-content: center; }
  .bay { flex: none; width: calc(var(--u) * var(--bw, 720)); height: calc(var(--u) * 880); }
  .bay-hero { --bw: 1440; height: calc(var(--u) * 900); }
  .bay-door { --bw: 1440; }
  .scene { position: absolute; inset: 0; }
  .hero-copy { position: absolute; left: calc(var(--u) * 64); bottom: calc(var(--u) * (var(--slab-h) + 70)); width: calc(var(--u) * 640); }
  .hero-copy h1 { font-size: calc(var(--u) * 78); }
  .lede { margin-top: calc(var(--u) * 20); font-size: max(15px, calc(var(--u) * 18.5)); max-width: calc(var(--u) * 600); }
  .biz { margin-top: calc(var(--u) * 26); }
  .biz label { margin-bottom: calc(var(--u) * 8); font-size: max(14px, calc(var(--u) * 15)); }
  .biz-row { flex-direction: row; max-width: calc(var(--u) * 630); border-radius: 999px; }
  .biz-row input { height: max(48px, calc(var(--u) * 54)); border-radius: 999px; padding: 0 calc(var(--u) * 20); }
  .biz-row .btn { min-height: max(48px, calc(var(--u) * 54)); border-radius: 999px; }
  .hero-more { margin-top: calc(var(--u) * 12); }
  .preview-note { margin-top: 0; }

  .tablet { left: calc(var(--u) * 760); bottom: calc(var(--u) * (var(--slab-h) - 16)); width: calc(var(--u) * 512); height: calc(var(--u) * 340); }
  .lamp { left: calc(var(--u) * 980); bottom: calc(var(--u) * (var(--slab-h) - 12)); width: calc(var(--u) * 460); height: calc(var(--u) * 520); }
  .nameplate { left: calc(var(--u) * 64); bottom: calc(var(--u) * (var(--slab-h) - 34)); width: calc(var(--u) * 360); height: calc(var(--u) * 76); }
  .open-sign { left: calc(var(--u) * 836); bottom: calc(var(--u) * (var(--slab-h) + 400)); }
  .glow { left: calc(var(--u) * 470); bottom: calc(var(--u) * (var(--slab-h) - 190)); width: calc(var(--u) * 1100); height: calc(var(--u) * 700); }

  .bay .board { position: absolute; left: calc(var(--u) * ((var(--bw, 720) - 500) / 2)); width: calc(var(--u) * 500); bottom: calc(var(--u) * (var(--slab-h) + 190)); }
  .bay .art { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--u) * (var(--slab-h) - 18)); display: flex; justify-content: center; }
  .bay-door .slab-end { right: auto; width: calc(var(--u) * 220); box-shadow: calc(var(--u) * 10) 0 0 #24170f; }
  .bay-door .door { position: absolute; left: calc(var(--u) * 330); bottom: calc(var(--u) * 40); width: calc(var(--u) * 360); }
  .bay-door .door-side { position: absolute; left: calc(var(--u) * 760); width: calc(var(--u) * 420); bottom: calc(var(--u) * (var(--slab-h) + 30)); }
}

/* ---------- desktop with motion: the stage is pinned and the camera pans ---------- */
@media (min-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  html:not(.still) .counter { --u: clamp(.62px, min(calc(100vh / 900), calc(100vw / 1300)), 1.1px); --slab-h: 250; }
  html:not(.still) .stage { position: sticky; top: 0; height: 100vh; overflow: clip; }
  html:not(.still) .track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; height: 100%; }
  html:not(.still) .bay { --bw: 900; height: 100%; }
  html:not(.still) .bay[data-stop] .slab { --n: 3; }
  html:not(.still) .bay-hero { --bw: 1440; }
  html:not(.still) .bay-door { --bw: 1480; }
  html:not(.still) .cue { display: flex; align-items: center; gap: calc(var(--u) * 12); position: absolute; z-index: 5; right: calc(var(--u) * 70); bottom: calc(var(--u) * 132); font: 700 calc(var(--u) * 13)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lt); }
  html:not(.still) .cue svg { width: calc(var(--u) * 34); height: calc(var(--u) * 12); animation: nudge 1.8s ease-in-out infinite; }
}
@keyframes nudge { 50% { transform: translateX(6px); } }
/* short desktop screens: a lower counter leaves room for the headline under the header */
@media (min-width: 900px) and (min-height: 600px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
  html:not(.still) .counter { --slab-h: 196; }
  html:not(.still) .cue { bottom: calc(var(--u) * 104); }
}

/* =========================================================================
   FOUND BY AI ASSISTANTS
   ========================================================================= */
.found { padding: clamp(84px, 10vw, 130px) 0 0; }
.found-grid { display: grid; gap: 36px; align-items: center; }
.found h2 { margin-top: 14px; font: 800 clamp(34px, 4.6vw, 58px)/1.02 var(--display); letter-spacing: -.03em; }
.found-lines { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.found-lines li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.5; color: var(--cream-2); }
.found-lines li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 3px; border-radius: 2px; background: var(--brass); }
.ask { display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: var(--walnut-deep); border: 1px solid rgba(201, 160, 77, .35); }
.ask p { font-size: 16px; line-height: 1.45; }
.ask .ask-tag { justify-self: start; font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lt); border: 1.5px solid rgba(201, 160, 77, .6); padding: 5px 8px; border-radius: 4px; }
.ask-me { justify-self: end; max-width: 86%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--cream); color: var(--walnut-deep); font-weight: 500; }
.ask-ai { justify-self: start; max-width: 92%; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--walnut-2); color: var(--cream); border: 1px solid rgba(245, 236, 217, .12); }
.ask-ai .sl-chip-ai { margin-right: 6px; }
@media (min-width: 960px) { .found-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } }

/* =========================================================================
   SECTION HEADS, PRICES
   ========================================================================= */
.sec-head { display: grid; gap: 16px 56px; margin-bottom: 36px; align-items: end; }
.sec-head h2 { font: 800 clamp(40px, 5.6vw, 76px)/.98 var(--display); letter-spacing: -.035em; }
.sec-head p { max-width: 540px; font-size: 18px; line-height: 1.5; color: var(--cream-2); }
@media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.prices { padding: clamp(96px, 12vw, 150px) 0 0; scroll-margin-top: 16px; }
.prices:focus { outline: none; }
.quote-card { background: var(--cream); color: var(--ink); border-radius: 22px; padding: clamp(18px, 3vw, 40px); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), inset 0 0 0 1.5px rgba(201, 160, 77, .55); }
.quote-card .q-label { color: var(--brass-ink); }
.quote-card .q-sum { background: var(--walnut); box-shadow: inset 0 0 0 1.5px rgba(201, 160, 77, .5); }
.quote-card .q-tot .q-v { color: var(--brass-lt); }
.quote-card .q-tot .q-k { display: block; margin-bottom: 4px; opacity: .85; }
.quote-card .q-tot .q-v { display: block; }
.quote-card .q-sum.tick .q-v { animation: tick .7s ease-out; }
@keyframes tick { from { color: #fff6e2; } }
@media (min-width: 1040px) {
  .quote-card .q { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; align-items: start; }
  .quote-card .q > .q-group { grid-column: 1; }
  .quote-card .q > .q-sum { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 28px; }
}

/* =========================================================================
   STEP UP TO THE COUNTER: Sam, the voice, a person
   ========================================================================= */
.desk { position: relative; padding: clamp(96px, 12vw, 150px) 0 0; }
.desk-row { position: relative; z-index: 2; width: min(1320px, 100% - 2 * var(--gut)); margin: 0 auto; display: grid; gap: 20px; }
.desk-sam { order: -1; position: relative; }
.window { padding: 8px; border-radius: 22px; background: var(--walnut-deep); box-shadow: inset 0 0 0 3px var(--brass), 0 40px 80px -36px rgba(0, 0, 0, .9); }
.window [data-sam-inline] .sam-ui { height: min(600px, 78vh); min-height: 460px; border: 0; border-radius: 16px; }
.sam-plate { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; margin: 14px auto 0; padding: 8px 16px; border-radius: 6px; background: var(--brass); color: var(--walnut-deep); font: 800 17px/1 var(--display); box-shadow: inset 0 0 0 2px var(--brass-lt), inset 0 0 0 4px var(--brass-dk); }
.sam-plate-sub { font: 650 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.desk-voice { display: grid; gap: 12px; justify-items: start; padding: 24px; border-radius: 18px; background: var(--walnut-2); border: 1px solid rgba(201, 160, 77, .4); }
.mic { width: 64px; height: auto; margin-bottom: 4px; }
.desk-voice h3 { font: 800 24px/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.desk-voice h3 .sl-chip-ai { vertical-align: 4px; }
.desk-voice p:not(.tag-coming) { font-size: 15.5px; line-height: 1.5; color: var(--cream-2); }
.desk-voice .btn { min-height: 48px; margin-top: 4px; color: var(--lamp); }
.desk-call { padding: 24px; border-radius: 18px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.tag-person { display: inline-block; margin-bottom: 12px; font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; background: var(--walnut); color: var(--cream); }
.slab-desk { position: relative; --u: 1px; --slab-h: 150; --p-top: 62; --p-bot: 56; margin-top: -24px; }
@media (min-width: 1100px) {
  .desk-row { grid-template-columns: 290px minmax(0, 1fr) 340px; align-items: end; gap: 26px; }
  .desk-sam { order: 0; }
  .sam-plate { position: absolute; z-index: 3; left: 50%; bottom: -92px; margin: 0; transform: translateX(-50%); }
  .slab-desk { --slab-h: 170; --p-top: 66; --p-bot: 60; }
}

/* =========================================================================
   THE FREE SAMPLE
   ========================================================================= */
.sample { padding: clamp(96px, 12vw, 150px) 0 0; scroll-margin-top: 16px; }
.sample:focus { outline: none; }
.sample-grid { display: grid; gap: 44px; }
.sample-copy h2 { margin: 12px 0 18px; font: 800 clamp(38px, 5.2vw, 70px)/1 var(--display); letter-spacing: -.035em; }
.sample-copy > p:not(.eyebrow) { max-width: 640px; margin-bottom: 12px; font-size: 18px; line-height: 1.5; color: var(--cream-2); }
.lead-card { margin-top: 26px; padding: clamp(18px, 3vw, 32px); border-radius: 22px; background: var(--cream); color: var(--ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), inset 0 0 0 1.5px rgba(201, 160, 77, .55); }
.lead-card .lead-acts .sl-btn { background: var(--walnut); border-color: var(--walnut); color: var(--cream); }
.sample-art { display: grid; justify-items: center; }
.device { width: 250px; height: 510px; padding: 12px; border-radius: 42px; background: #120c08; box-shadow: 0 0 0 2px #3d2a1d, 0 50px 90px -30px rgba(0, 0, 0, .9); }
.device { position: relative; }
.device-tag { left: 34px; top: -10px; font-size: 11px; padding: 5px 8px; }
.device-screen { height: 100%; overflow: hidden; border-radius: 31px; background: #fffaf0; }
.device .frame { font-size: 8.4px; }
.device-note { margin-top: 14px; font-size: 14px; color: var(--mute); }
@media (min-width: 1000px) {
  .sample-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: center; }
  .device { width: 300px; height: 612px; padding: 13px; border-radius: 46px; }
  .device-screen { border-radius: 34px; }
  .device .frame { font-size: 10px; }
}

/* =========================================================================
   SIX THINGS WE WILL NEVER DO: a card on the counter
   ========================================================================= */
.nevers { padding: clamp(96px, 12vw, 150px) 0 clamp(110px, 12vw, 160px); }
.counter-card { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(28px, 5vw, 60px); border-radius: 8px; background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 10px var(--cream), inset 0 0 0 11px rgba(122, 90, 32, .6), 0 50px 90px -40px rgba(0, 0, 0, .85); }
.counter-card::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: min(64%, 460px); height: 30px; transform: translateX(-50%); clip-path: polygon(0 100%, 6% 0, 94% 0, 100% 100%); background: linear-gradient(var(--brass-lt), var(--brass-lt)) 0 0 / 100% 3px no-repeat, var(--brass); }
.counter-card { margin-bottom: 22px; }
.counter-card h2 { margin-bottom: 26px; text-align: center; font: 800 clamp(30px, 4.4vw, 54px)/1.04 var(--display); letter-spacing: -.03em; color: var(--walnut-deep); }
.never-list { list-style: none; padding: 0; display: grid; column-gap: 52px; }
.never-list li { position: relative; padding: 18px 0 18px 44px; border-top: 1.5px solid var(--rule); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.never-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--brass-ink); background: linear-gradient(135deg, transparent calc(50% - 1.5px), var(--brass-ink) calc(50% - 1.5px), var(--brass-ink) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.never-list b { display: block; color: var(--walnut-deep); font-weight: 700; font-size: 17.5px; }
@media (min-width: 760px) { .never-list { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot { padding: 56px 0 120px; background: var(--walnut-deep); border-top: 1px solid rgba(201, 160, 77, .3); }
.foot-grid { display: grid; gap: 28px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display); letter-spacing: -.015em; }
.foot-brand svg { width: 30px; height: 30px; }
.foot-tag { text-wrap: balance; margin-top: 14px; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -.02em; color: var(--brass-lt); }
.foot-info p { margin-bottom: 6px; color: var(--cream-2); }
.foot-info a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-weight: 700; }
.foot-fine { max-width: 520px; margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--mute); }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; align-items: end; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}