/* =====================================================================================================================
   OBSIDIAN Detail Studio: the design system (site/css/site.css, owned by the foundation)
   A detailing studio at night: black walls, white LED strips on the ceiling, glossy black paint, glass, water beads.
   Black and white first; ice cyan (--ice) is the light in the room and the only action colour. Gold (--gold) is for
   golden-hour moments only (the payoff, the k4 still). Live examples of everything below: /kit/

   CLASS INDEX (copy the markup from /kit/)
   Layout     .wrap (.narrow .wide)  .sec (.tight .flush .rule)  .head (.center .row)  .split (.flip .wide-left .wide-right .top)
              .stack  .grid (.g2 .g3 .g4)  .cta-row (.center)
   Sections   .bg-black  .bg-char  .bg-studio (ceiling LED glow)  .bg-glass  .bg-floor (glossy floor glow)  .bg-ice
   Type       h1.mega  h2.display  h3 / .h3  .lead (<i> = Instrument Serif accent)  .serif  .eyebrow  .tag  .mono  .small  .dim
              second beat: <em> inside .mega / .display / .h3 = ice outline with a soft glow.  .outline  .ice  .gold
              .display inside .split steps down a size by itself. Under 900 px site.js shrinks a beat that is too wide so it stays on one line.
   Buttons    .btn + .btn-ice | .btn-line | .btn-glass   size .btn-sm | .btn-xl   .btn-block   <i class="arr"></i> arrow
              .link-arrow (<a class="link-arrow"><span>Text</span><i aria-hidden="true"></i></a>)
   Header     .hdr .brand .nav .svc-btn .svc-menu .hdr-call .hdr-book .menu-btn   phone menu .menu   phone dock .dock
   Page hero  .phero (.short .center) > .phero-media + .wrap > .crumbs + h1.mega + .lead + .cta-row
   Cards      .tiles (.two .three .four) > a.tile (.big .tall) > img + .tile-tag + h3 + p + .tile-go
              .cards (.two .three) > .card > .card-media > img + .card-body     .facts (.two .four) > .fact
              .glass (frosted panel)  .checks (ticked list)  .kv (label / value rows)
   Media      .frame (.tall .wide .cine .square) > img|video + .credit | .caption
   Bits       .pill (.live)  .chips > button.chip[aria-pressed]  .notif (instant text-back)  hr.led  .kbd
   Steps      ol.steps > li > .step-n + h3 + p   (the LED rail fills as you scroll)
   FAQ        .faq > details > summary + .ans
   Slots      .slot (.tall .wide)  .slots   placeholders for what only the shop can give (reviews, prices, team)
   Marquee    .marquee[data-marquee] (.ice) > .marquee-track > span (.o outlined word, .d light dot)
   Forms      label.field > span + input|select|textarea (.bad)   .choice (.cols-2 .cols-3 .cols-4) > label > input + .opt > b + small
   Magic      .reflect (headline mirrored in glossy black, one per page)  .lightsweep (light sweeps on hover)
              [data-lightsweep] (an LED strip sweeps across once as it enters; ="inner" lights only its .ls-lit child)
              [data-gloss] (light follows the pointer)
   Bands      .band-book (closing call to book, partial book-band; .band-book-lit on /services/ and /our-work/)  .foot (footer)
   Cover      .lights (page change: the screen goes dark and the ceiling strips switch on)
   Helpers    .sr  .skip  .center  .nowrap
   Don't put data-gloss or data-lightsweep on an element that uses ::after itself (.btn, .fact, .slot, .faq summary).
   ===================================================================================================================== */

@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-var.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* the light sweep's position, animatable */
@property --ls { syntax: "<percentage>"; inherits: true; initial-value: -30%; }

:root {
  /* colour */
  --bg: #040506;
  --bg-2: #07080a;
  --char: #0c0e11;
  --char-2: #13161a;
  --ink: #f3f5f7;
  --dim: rgba(243, 245, 247, 0.62);
  --mute: rgba(243, 245, 247, 0.52); /* small text: at least 5:1 on every background here (WCAG AA) */
  --faint: rgba(243, 245, 247, 0.16);
  --line: rgba(243, 245, 247, 0.09);
  --ice: #8be9ff;
  --ice-hi: #d6f9ff;
  --ice-lo: #5fd2ee;
  --ice-deep: #0a3a46;
  --ice-ink: #03161b;
  --ice-glow: rgba(139, 233, 255, 0.32);
  --gold: #ffb55a;
  --glass: rgba(14, 16, 19, 0.6);

  /* type */
  --display: "Archivo", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-body: clamp(17px, 1.25vw, 19px);
  --fs-lead: clamp(19px, 1.6vw, 24px);
  --fs-h3: clamp(21px, 1.8vw, 30px);
  --fs-display: clamp(33px, 6.3vw, 96px);
  /* stops growing where the column stops (--max, at about 1450 px wide), so a hero beat that fits at 1440 fits at 1920 */
  --fs-mega: clamp(38px, 8.6vw, 124px);

  /* space and shape */
  --pad: clamp(20px, 4.4vw, 64px);
  --max: 1320px;
  --hdr-h: 84px;
  --r: 16px;
  --r-lg: clamp(20px, 1.9vw, 28px);
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.25, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --led: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 22px rgba(139, 233, 255, 0.45);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); background: var(--bg); scrollbar-color: #2b3036 var(--bg); }
body {
  min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
/* house grade for the stock photos: less colour, a touch more contrast, so warm shots (a red polisher, beige carpet)
   sit in the black-and-ice studio. A page rule with its own filter replaces it. */
img[src*="/img/photos/"] { filter: saturate(0.5) contrast(1.06) brightness(0.93); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ice); color: var(--ice-ink); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
p a:not(.btn), .lead a { color: var(--ice); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.skip { position: fixed; z-index: 200; left: 16px; top: -90px; padding: 14px 20px; border-radius: 12px; background: var(--ice); color: var(--ice-ink); font-weight: 700; }
.skip:focus { top: 16px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- type ---------- */
.mega, .display, h1, h2 { font-family: var(--display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; text-wrap: balance; }
.mega { font-size: var(--fs-mega); line-height: 0.86; }
.display { font-size: var(--fs-display); }
h3, .h3 { font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: var(--fs-h3); line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; }
/* the second beat: an ice outline with a soft glow, like a lit sign */
.mega em, .display em, h1 em, h2 em, h3 em, .h3 em, .outline {
  font-style: normal; color: transparent; -webkit-text-stroke: max(1.5px, 0.021em) var(--ice);
  text-shadow: 0 0 0.24em rgba(139, 233, 255, 0.3);
}
.ice { color: var(--ice); }
.gold { color: var(--gold); }
.mega em.gold, .display em.gold { -webkit-text-stroke-color: var(--gold); text-shadow: 0 0 0.24em rgba(255, 181, 90, 0.3); }
.lead { font-size: var(--fs-lead); line-height: 1.42; color: var(--dim); max-width: 32em; text-wrap: pretty; }
.lead strong, p strong { color: var(--ink); font-weight: 650; }
/* a quiet word in a lead line: <i>new</i> (sparingly) */
.lead i, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.14em; line-height: 1; letter-spacing: -0.005em; color: var(--ink); }
/* small mono label above a headline: "01 · Arrive" */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 13px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ice); }
.eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px currentColor, 0 0 18px rgba(139, 233, 255, 0.5); }
.eyebrow.plain::before { display: none; }
.tag { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--dim); text-transform: uppercase; }
.mono { font-family: var(--mono); }
.small { font-size: 15px; }
.dim { color: var(--dim); }
.ln { padding-bottom: 0.06em; margin-bottom: -0.06em; }
/* SplitText masks: side room for the outline glow while a line rises (site.js lets the masks go once it has risen) */
.ln-mask { padding: 0.08em 0.26em 0.04em; margin: -0.08em -0.26em -0.04em; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; }
.wrap.narrow { max-width: 920px; }
.wrap.wide { max-width: 1560px; }
.sec { position: relative; isolation: isolate; padding: clamp(88px, 10vw, 160px) var(--pad); overflow-x: clip; }
.sec.tight { padding-block: clamp(60px, 6.5vw, 100px); }
.sec.flush { padding-block: 0; }
/* a hairline with one lit point in the middle, between two sections of the same colour */
.sec.rule::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: linear-gradient(90deg, transparent, var(--faint) 20%, rgba(255, 255, 255, 0.5) 50%, var(--faint) 80%, transparent); }
.head { display: grid; gap: 22px; justify-items: start; margin-bottom: clamp(44px, 5.6vw, 84px); }
.head.center { justify-items: center; text-align: center; }
.head.center .lead { margin-inline: auto; }
.head.row { grid-template-columns: 1.25fr 1fr; align-items: end; gap: 26px 64px; }
.head.row > .eyebrow, .head.row > h2 { grid-column: 1; }
.head.row > .lead, .head.row > .cta-row { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: center; }
.split.wide-left { grid-template-columns: 1.25fr 1fr; }
.split.wide-right { grid-template-columns: 1fr 1.25fr; }
.split.top { align-items: start; }
.split.flip > :first-child { order: 2; }
/* a headline in half the width: one step down so it doesn't break word by word */
.split .display { font-size: clamp(32px, 4.6vw, 72px); }
.stack { display: grid; gap: 22px; justify-items: start; align-content: start; }
.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cta-row.center { justify-content: center; }

/* ---------- section backgrounds: a lit studio, not a flat page ---------- */
.bg-black { background: var(--bg); }
.bg-char { background: linear-gradient(180deg, #0b0d10, #08090b); }
/* ceiling light: three LED strips at the top of the section and the soft light they throw down the wall */
.bg-studio { background: radial-gradient(64% 46% at 50% 0%, rgba(206, 236, 255, 0.085), transparent 72%), linear-gradient(180deg, #090b0e, var(--bg) 70%); }
.bg-studio::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: min(1100px, 92%); height: 46px; transform: translateX(-50%); pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75) 18%, #fff 50%, rgba(255, 255, 255, 0.75) 82%, transparent) 50% 0 / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38) 24%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.38) 76%, transparent) 50% 18px / 78% 1.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.18) 70%, transparent) 50% 32px / 60% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(190, 240, 255, 0.55));
}
.bg-glass { background: linear-gradient(180deg, #0d1013, #0a0c0e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.04); }
.bg-glass::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.03) 44%, transparent 58%); }
/* glossy floor: the room's light pooling and reflecting at the bottom */
.bg-floor { background: radial-gradient(70% 38% at 50% 100%, rgba(170, 225, 245, 0.1), transparent 72%), linear-gradient(180deg, var(--bg), #0a0d10); }
.bg-floor::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); }
.bg-ice { background: radial-gradient(60% 55% at 50% 0%, rgba(139, 233, 255, 0.16), transparent 70%), radial-gradient(40% 40% at 90% 100%, rgba(139, 233, 255, 0.06), transparent 70%), #05090b; }

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; text-align: center;
  font: 750 14px/1 var(--display); font-stretch: 118%; letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform 0.3s var(--ease), box-shadow 0.35s, background-color 0.35s, color 0.3s;
}
.btn > * { position: relative; z-index: 2; }
/* glossy light sweep: a band of studio light slides across on hover */
.btn::after {
  content: ""; position: absolute; z-index: 1; top: -40%; bottom: -40%; left: -36%; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent); transform: translateX(0) skewX(-20deg); opacity: 0;
}
@media (hover: hover) { .btn:hover::after { opacity: 1; transform: translateX(560%) skewX(-20deg); transition: transform 0.85s var(--ease), opacity 0.15s; } }
.btn:active { transform: scale(0.97); }
.btn-ice {
  background: linear-gradient(180deg, #c8f6ff 0%, var(--ice) 48%, #6ad8f2 100%); color: var(--ice-ink);
  box-shadow: 0 0 0 1px rgba(139, 233, 255, 0.55), 0 10px 32px rgba(139, 233, 255, 0.24), 0 0 60px rgba(139, 233, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 70, 90, 0.18);
}
.btn-ice:hover { box-shadow: 0 0 0 1px rgba(170, 240, 255, 0.8), 0 14px 44px rgba(139, 233, 255, 0.4), 0 0 80px rgba(139, 233, 255, 0.2), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 70, 90, 0.18); }
.btn-ice::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent); }
.btn-line { background: rgba(255, 255, 255, 0.03); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(243, 245, 247, 0.34); }
.btn-line:hover { color: var(--ice-hi); box-shadow: inset 0 0 0 1px rgba(139, 233, 255, 0.8), 0 0 26px rgba(139, 233, 255, 0.16); }
.btn-line::after, .btn-glass::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 50%, transparent); }
.btn-glass { background: rgba(255, 255, 255, 0.08); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.13); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 12.5px; gap: 9px; }
.btn-xl { min-height: 64px; padding: 0 36px; font-size: 15px; gap: 14px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
/* arrow: <i class="arr" aria-hidden="true"></i> after the label */
.arr { display: inline-block; flex: none; width: 17px; height: 12px; background: currentColor; transition: transform 0.45s var(--spring);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) { .btn:hover .arr, a:hover > .arr { transform: translateX(4px); } }
.link-arrow { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font: 750 14px/1 var(--display); font-stretch: 118%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.link-arrow i { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--faint); transition: background 0.3s, box-shadow 0.3s, transform 0.45s var(--spring); }
.link-arrow i::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 12px; background: currentColor; -webkit-mask: inherit; mask: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) { .link-arrow:hover { color: var(--ice-hi); } .link-arrow:hover i { transform: translateX(5px); background: var(--ice); color: var(--ice-ink); box-shadow: 0 0 24px var(--ice-glow); } }

/* ---------- header ---------- */
.hdr { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--hdr-h); padding: 0 var(--pad); transition: transform 0.5s var(--ease); }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 6, 0.62), rgba(4, 5, 6, 0)); transition: opacity 0.4s; }
/* glass once scrolled, with a hairline of light along its bottom edge */
.hdr::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 30%, rgba(214, 249, 255, 0.4) 50%, rgba(255, 255, 255, 0.16) 70%, transparent) 0 100% / 100% 1px no-repeat, rgba(7, 8, 10, 0.66);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.hdr.is-scrolled::after, .svc-open.hdr::after { opacity: 1; }
.hdr.is-scrolled::before { opacity: 0; }
.hdr.is-hidden { transform: translateY(calc(-100% - 60px)); } /* clear of the ice button's glow too */
.hdr-in { position: relative; height: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.brand { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; align-items: center; flex: none; }
.brand-mark { font: 800 15px/1 var(--sans); letter-spacing: 0.32em; margin-right: -0.32em; }
.brand-tag { font: 400 11px/1 var(--mono); color: var(--dim); letter-spacing: 0.02em; padding-top: 2px; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav > a, .svc-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 var(--sans); color: var(--dim); white-space: nowrap; transition: color 0.25s; }
.nav > a:hover, .svc-btn:hover, .nav > a[aria-current="page"], .svc-btn.is-current, .svc-btn[aria-expanded="true"] { color: var(--ink); }
.chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.35s var(--ease); opacity: 0.8; }
.svc-btn[aria-expanded="true"] .chev { transform: translateY(2px) rotate(225deg); }
/* the LED bar under the nav: rests under the page you're on, slides to whatever you point at */
.nav-led { position: absolute; left: 0; bottom: 14px; width: var(--w, 20px); height: 2px; border-radius: 2px; background: var(--ice); box-shadow: 0 0 8px var(--ice), 0 0 20px rgba(139, 233, 255, 0.6);
  transform: translateX(calc(var(--x, 0px) - 50%)); opacity: var(--o, 0); pointer-events: none; transition: transform 0.55s var(--spring), width 0.4s var(--ease), opacity 0.3s; }
.hdr-call { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px; font: 500 14px/1 var(--mono); color: var(--dim); white-space: nowrap; transition: color 0.25s; }
.hdr-call svg { width: 17px; height: 17px; fill: var(--ice); flex: none; }
.hdr-call:hover { color: var(--ink); }
.hdr-book { flex: none; }
.menu-btn { display: none; position: relative; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.menu-btn i { position: absolute; left: 15px; right: 15px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform 0.45s var(--spring), top 0.3s var(--ease), width 0.3s; }
.menu-btn i:first-child { top: 19px; }
.menu-btn i:last-child { top: 27px; left: 21px; }
.menu-open .menu-btn i { top: 23px; left: 15px; }
.menu-open .menu-btn i:first-child { transform: rotate(45deg); }
.menu-open .menu-btn i:last-child { transform: rotate(-45deg); }

/* services menu: a glass panel, the list on the left and a picture that changes with the link you point at */
.svc-menu {
  position: absolute; z-index: 2; top: calc(100% - 6px); left: 50%; width: min(820px, calc(100vw - 2 * var(--pad)));
  display: grid; grid-template-columns: 1fr 0.78fr; gap: 10px; padding: 10px; border-radius: 26px;
  background: rgba(10, 12, 15, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(0.985); transform-origin: 50% 0;
  transition: opacity 0.25s, transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.svc-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; } /* the pointer can cross the gap */
.svc-menu.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s, transform 0.45s var(--ease), visibility 0s; }
.svc-list { display: grid; gap: 2px; align-content: start; }
.svc-list a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px; padding: 16px 18px; border-radius: 18px; transition: background 0.25s; }
.svc-list a:hover, .svc-list a:focus-visible, .svc-list a.is-on { background: rgba(255, 255, 255, 0.05); }
.svc-list a small { grid-row: 1 / span 2; font: 500 12px var(--mono); color: var(--ice); }
.svc-list a b { font: 800 17px/1.1 var(--display); font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.01em; }
.svc-list a span { grid-column: 2; font-size: 14.5px; line-height: 1.35; color: var(--dim); }
.svc-list a .arr { grid-column: 3; grid-row: 1 / span 2; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.4s var(--spring); color: var(--ice); }
.svc-list a:hover .arr, .svc-list a:focus-visible .arr, .svc-list a.is-on .arr { opacity: 1; transform: none; }
.svc-list a[aria-current="page"] b { color: var(--ice); }
.svc-list .svc-all { margin-top: 6px; padding: 14px 18px; box-shadow: inset 0 1px 0 var(--line); border-radius: 0 0 18px 18px; }
.svc-list .svc-all b { font-size: 13px; letter-spacing: 0.08em; color: var(--dim); }
.svc-preview { position: relative; overflow: hidden; border-radius: 18px; min-height: 300px; background: var(--char); }
.svc-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.5s, transform 1.2s var(--ease); }
.svc-preview img.is-on { opacity: 1; transform: none; }
.svc-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 5, 6, 0.75), transparent 50%); pointer-events: none; }
.svc-preview p { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; font: 500 12px/1.4 var(--mono); color: var(--dim); }

/* phone menu: lights switch on across the top, then the links rise */
.menu {
  position: fixed; z-index: 55; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 28px; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--hdr-h) + 58px) var(--pad) calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(90% 40% at 50% 0%, rgba(206, 236, 255, 0.1), transparent 70%), var(--bg);
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s linear 0.35s;
}
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }
.menu-ceiling { position: absolute; top: calc(var(--hdr-h) + 2px); left: 0; right: 0; height: 40px; pointer-events: none; }
.menu-ceiling i { position: absolute; left: 50%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent); box-shadow: var(--led); transform: translateX(-50%); opacity: 0; }
.menu-ceiling i:nth-child(1) { top: 0; width: 100%; }
.menu-ceiling i:nth-child(2) { top: 14px; width: 74%; height: 1.5px; }
.menu-ceiling i:nth-child(3) { top: 25px; width: 54%; height: 1px; }
.menu-open .menu-ceiling i { animation: switch-on 0.36s linear forwards; }
.menu-open .menu-ceiling i:nth-child(2) { animation-delay: 0.08s; }
.menu-open .menu-ceiling i:nth-child(3) { animation-delay: 0.16s; }
@keyframes switch-on { 0% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: 0.25; } 55% { opacity: 0.9; } 70% { opacity: 0.5; } 100% { opacity: 1; } }
.menu-links { display: grid; align-content: start; gap: 2px; }
.menu-links > a { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; font: 900 clamp(32px, 9.4vw, 58px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(22px); transition: opacity 0.35s, transform 0.6s var(--ease); }
.menu-links > a small { font: 500 12px var(--mono); color: var(--ice); letter-spacing: 0.04em; transform: translateY(-0.6em); }
.menu-links > a[aria-current="page"] { color: transparent; -webkit-text-stroke: 1.5px var(--ice); }
.menu-links > a[aria-current="page"] small { -webkit-text-stroke: 0; }
.menu-open .menu-links > a, .menu-open .menu-svc { opacity: 1; transform: none; transition-delay: calc(0.14s + var(--i, 0) * 0.05s); }
.menu-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; opacity: 0; transform: translateY(18px); transition: opacity 0.35s, transform 0.6s var(--ease); }
.menu-svc a { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; min-height: 84px; padding: 12px 14px; border-radius: 16px; background: var(--char);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); font: 700 14px/1.15 var(--sans); }
.menu-svc a img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.menu-svc a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 5, 6, 0.9), rgba(4, 5, 6, 0.2)); }
.menu-svc a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--ice); }
.menu-foot { display: grid; gap: 14px; opacity: 0; transition: opacity 0.4s 0.35s; }
.menu-open .menu-foot { opacity: 1; }
.menu-foot .cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.menu-foot .btn { min-height: 56px; padding: 0 20px; }
.menu-foot p { font: 500 12.5px/1.5 var(--mono); color: var(--dim); }
.menu-foot p a { color: var(--ink); text-decoration: none; }
.menu-open { overflow: hidden; }

/* phone dock: Call and Book, one thumb away (shows after the hero) */
.dock { display: none; }
[data-page="book"] .dock, [data-page="dashboard"] .dock, [data-page="kit"] .dock { display: none !important; }

/* ---------- page change: the lights ----------
   The screen goes dark, the ceiling LED strips switch on one by one (with their reflections in the glossy floor),
   and the next page arrives under them. site.js plays it with Web Animations on opacity only (runs off the main thread).
   html.lights-in (set by the head script) has the next page covered from its very first frame. */
.lights { position: fixed; z-index: 150; inset: 0; pointer-events: none; visibility: hidden; contain: strict; }
html.motion .lights, html.lights-in .lights { visibility: visible; }
html.lights-in .lights { pointer-events: auto; } /* arriving, it catches taps until it has lifted */
.lights-dark { position: absolute; inset: 0; opacity: 0; will-change: opacity;
  background: radial-gradient(90% 55% at 50% 0%, #0d1115, transparent 70%), radial-gradient(80% 40% at 50% 100%, #0b0f12, transparent 70%), var(--bg); }
.lights-ceiling { position: absolute; inset: 0; will-change: opacity; }
.lights-ceiling i { position: absolute; left: 50%; top: var(--y); width: var(--w); height: var(--t); margin-left: calc(var(--w) / -2); border-radius: 99px; opacity: 0; will-change: opacity;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 7%, #fff 50%, rgba(255, 255, 255, 0.9) 93%, transparent);
  box-shadow: 0 0 calc(var(--t) * 3) rgba(255, 255, 255, 0.8), 0 0 calc(var(--t) * 12) rgba(139, 233, 255, 0.4); }
/* six strips receding to the back wall; the floor below mirrors them, dimmer */
.lights-ceiling i:nth-child(1) { --y: 5%; --w: 128%; --t: 5px; }
.lights-ceiling i:nth-child(2) { --y: 17%; --w: 100%; --t: 4px; }
.lights-ceiling i:nth-child(3) { --y: 26.5%; --w: 80%; --t: 3px; }
.lights-ceiling i:nth-child(4) { --y: 33.5%; --w: 66%; --t: 2.4px; }
.lights-ceiling i:nth-child(5) { --y: 38.6%; --w: 56%; --t: 1.8px; }
.lights-ceiling i:nth-child(6) { --y: 42.2%; --w: 49%; --t: 1.4px; }
.lights-ceiling i.r { background: linear-gradient(90deg, transparent, rgba(214, 249, 255, 0.35) 15%, rgba(255, 255, 255, 0.5) 50%, rgba(214, 249, 255, 0.35) 85%, transparent);
  box-shadow: 0 0 calc(var(--t) * 6) rgba(139, 233, 255, 0.22); }
.lights-ceiling i.r:nth-child(7) { --y: 93%; --w: 128%; --t: 4px; }
.lights-ceiling i.r:nth-child(8) { --y: 80%; --w: 100%; --t: 3px; }
.lights-ceiling i.r:nth-child(9) { --y: 70.5%; --w: 80%; --t: 2.4px; }
.lights-ceiling i.r:nth-child(10) { --y: 63.5%; --w: 66%; --t: 1.8px; }
.lights-ceiling i.r:nth-child(11) { --y: 58.4%; --w: 56%; --t: 1.4px; }
.lights-ceiling i.r:nth-child(12) { --y: 54.8%; --w: 49%; --t: 1px; }
/* the name at the horizon: it switches on with the last strip, then keeps drifting toward you while the next page loads
   (site.js on the way out, the CSS animation below on the way in), so the held frame is never still */
.lights-mark { position: absolute; left: 0; right: 0; top: 48.5%; margin-top: -0.5em; text-align: center; font: 800 clamp(14px, 1.1vw, 17px)/1 var(--sans); letter-spacing: 0.62em; text-indent: 0.62em;
  color: #fff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 0 14px rgba(139, 233, 255, 0.55), 0 0 34px rgba(139, 233, 255, 0.25); opacity: 0; will-change: opacity, transform; }
html.lights-in .lights-dark, html.lights-in .lights-ceiling i, html.lights-in .lights-mark { opacity: 1; }
html.lights-in .lights-mark { animation: lights-drift 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes lights-drift { from { transform: scale(1.04); } to { transform: scale(1.1); } }
/* Lenis clips the page while it is stopped (under the cover), which takes the scrollbar away on Windows and shifts the
   page sideways. Keep it; wheel and touch stay blocked by Lenis itself. The phone menu still locks scrolling. */
html.lenis.lenis-stopped:not(.menu-open) { overflow: visible; }

/* ---------- reveal states (only when motion runs; a failsafe shows everything if it doesn't) ---------- */
html.js:not(.no-motion) [data-reveal] { opacity: 0; }
html.js:not(.no-motion) [data-stagger] > * { opacity: 0; }
html.js:not(.no-motion) [data-split] { visibility: hidden; }
html.no-motion [data-reveal], html.no-motion [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
html.no-motion [data-split] { visibility: visible !important; }

/* ---------- page hero (inner pages) ---------- */
.phero { position: relative; isolation: isolate; min-height: max(620px, 92svh); display: grid; align-items: end; overflow: hidden;
  padding: calc(var(--hdr-h) + 72px) var(--pad) clamp(64px, 8vw, 124px); background: var(--bg); }
.phero.short { min-height: max(520px, 70svh); }
.phero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.phero-media img, .phero-media video { width: 100%; height: 112%; object-fit: cover; object-position: 50% 50%; }
/* the words sit on the left: a shade from the left keeps the thin ice outline off the brightest paint (grille, lights) */
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 6, 0.84) 0%, rgba(4, 5, 6, 0.62) 36%, rgba(4, 5, 6, 0.2) 60%, transparent 76%),
    radial-gradient(75% 70% at 12% 92%, rgba(4, 5, 6, 0.86), transparent 72%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.7) 0%, rgba(4, 5, 6, 0.12) 30%, rgba(4, 5, 6, 0.28) 62%, var(--bg) 100%); }
/* the floor line: where the hero meets the page, a faint reflection of the light */
.phero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.14) 70%, transparent); }
.phero .wrap { display: grid; gap: 26px; justify-items: start; }
.phero .mega { max-width: 14ch; text-shadow: 0 6px 44px rgba(4, 5, 6, 0.45); }
/* a split headline rises out of clipping masks, which would cut a dark shadow into boxes over the photo: none there */
.phero .mega[data-split] { text-shadow: none; }
.phero .lead { color: rgba(243, 245, 247, 0.84); }
.phero.center .wrap { justify-items: center; text-align: center; }
.phero.center .lead { margin-inline: auto; }
.phero.center::before { background: radial-gradient(70% 60% at 50% 70%, rgba(4, 5, 6, 0.7), transparent 75%), linear-gradient(180deg, rgba(4, 5, 6, 0.7), rgba(4, 5, 6, 0.2) 34%, rgba(4, 5, 6, 0.4) 66%, var(--bg)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
/* 44 px to tap, even "Home": padding widens the target, the negative margin keeps the words where they were */
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -14px -8px; padding: 0 8px; transition: color 0.2s; }
.crumbs a:hover { color: var(--ice); }
.crumbs span::before, .crumbs a + a::before { content: "/"; margin-right: 10px; color: var(--mute); }
.crumbs span { color: var(--ink); }

/* ---------- photo tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 10px; min-height: clamp(380px, 33vw, 540px); padding: clamp(22px, 2vw, 32px);
  border-radius: var(--r-lg); background: var(--char); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px rgba(0, 0, 0, 0.45); color: var(--ink); }
.tile > img, .tile > video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.3s var(--ease), filter 0.6s; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 5, 6, 0.94) 0%, rgba(4, 5, 6, 0.5) 38%, rgba(4, 5, 6, 0.04) 70%), linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 28%); }
@media (hover: hover) { a.tile:hover > img, a.tile:hover > video { transform: scale(1.07); } }
.tile h3 { font-size: clamp(22px, 1.75vw, 30px); font-weight: 900; font-stretch: 125%; }
.tile p { color: rgba(243, 245, 247, 0.78); font-size: 16px; line-height: 1.45; max-width: 26em; }
.tile-tag { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink);
  background: rgba(4, 5, 6, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tile-go { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--ice); color: var(--ice-ink); box-shadow: 0 0 28px var(--ice-glow);
  display: grid; place-items: center; transform: scale(0.6) rotate(-45deg); opacity: 0; transition: transform 0.5s var(--spring), opacity 0.3s; }
.tile-go::before { content: ""; width: 16px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
a.tile:hover .tile-go, a.tile:focus-visible .tile-go { transform: none; opacity: 1; }
.tile.big { min-height: clamp(460px, 44vw, 720px); }
.tile.tall { min-height: clamp(520px, 50vw, 780px); }

/* ---------- cards (photo on top, words below) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(180deg, #101317, #0b0d10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--line), 0 26px 60px rgba(0, 0, 0, 0.4); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--char); }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { a.card:hover .card-media img { transform: scale(1.05); } }
.card-body { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.2vw, 32px); }
.card-body h3 { font-size: clamp(20px, 1.5vw, 25px); }
.card-body p { color: var(--dim); font-size: 16.5px; line-height: 1.5; }
.card-body .link-arrow { margin-top: 6px; }

/* ---------- glass panels and gloss cards ---------- */
.glass { position: relative; border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 40px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.facts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--r-lg);
  background: linear-gradient(170deg, #12161a, #0b0d10 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px var(--line); }
.fact .tag { color: var(--ice); }
.fact h3 { font-size: clamp(20px, 1.5vw, 25px); }
.fact p { color: var(--dim); font-size: 16.5px; line-height: 1.5; }
/* light on paint: an LED-shaped highlight follows the pointer (site.js sets --mx / --my) */
.fact::after, [data-gloss]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; border-radius: inherit;
  background: radial-gradient(240px 110px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.13), transparent 70%), radial-gradient(520px 260px at var(--mx, 50%) var(--my, 0%), rgba(139, 233, 255, 0.06), transparent 70%); }
.fact:hover::after, [data-gloss]:hover::after { opacity: 1; }
[data-gloss] { position: relative; }
.checks { list-style: none; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 36px; line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(139, 233, 255, 0.7), 0 0 14px rgba(139, 233, 255, 0.18);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%238be9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kv dt, .kv > div > span:first-child { font: 500 12.5px/1.6 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.kv dd, .kv > div > b { font-weight: 600; text-align: right; }

/* ---------- media frames ---------- */
.frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); background: var(--char); box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px rgba(0, 0, 0, 0.5); }
.frame > img, .frame > video, .frame > picture img { width: 100%; height: 100%; object-fit: cover; }
/* a gloss edge: light catching the top of the glass */
.frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 26%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.frame.tall { aspect-ratio: 4 / 5; }
.frame.wide { aspect-ratio: 16 / 10; }
.frame.cine { aspect-ratio: 21 / 9; }
.frame.square { aspect-ratio: 1; }
.credit { position: absolute; z-index: 2; right: 12px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(4, 5, 6, 0.6); font: 500 11px/1.2 var(--mono); color: rgba(243, 245, 247, 0.72); }
.credit a { text-decoration: underline; text-underline-offset: 2px; }
.caption { position: absolute; z-index: 2; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: 0.04em;
  background: rgba(4, 5, 6, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- pills, chips, text-back, LED rule ---------- */
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.03em; color: var(--dim);
  background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pill b { font-weight: 500; color: var(--ink); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); flex: none; }
.pill.live i { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 233, 255, 0.6), 0 0 10px var(--ice); } 60% { box-shadow: 0 0 0 7px rgba(139, 233, 255, 0), 0 0 10px var(--ice); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px/1 var(--sans); color: var(--dim);
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--faint); transition: color 0.2s, box-shadow 0.25s, background 0.25s; }
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.chip[aria-pressed="true"], .chip.on { color: var(--ice-ink); background: var(--ice); box-shadow: 0 0 0 1px var(--ice), 0 0 22px rgba(139, 233, 255, 0.3); }
/* the instant text-back, phone-notification style */
.notif { display: flex; gap: 13px; width: min(400px, 100%); padding: 14px 16px; border-radius: 22px; text-align: left;
  background: rgba(30, 33, 37, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }
.notif-app { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(180deg, #c8f6ff, var(--ice)); color: var(--ice-ink); font: 900 19px/1 var(--display); font-stretch: 125%; }
.notif-body { flex: 1; min-width: 0; }
.notif-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 650; }
.notif-top span { font-weight: 400; color: var(--dim); font-size: 13px; }
.notif p { margin-top: 3px; font-size: 15px; line-height: 1.42; color: rgba(243, 245, 247, 0.9); }
hr.led { height: 2px; border: 0; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff 15%, #fff 85%, transparent); box-shadow: var(--led); opacity: 0.9; }
.kbd { display: inline-block; min-width: 1.8em; padding: 3px 7px; border-radius: 6px; font: 500 0.82em/1.2 var(--mono); text-align: center; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ---------- steps: an LED rail that fills as you scroll (site.js sets --fill, lights each li with .on) ---------- */
.steps { --fill: 0; position: relative; list-style: none; display: grid; }
.steps::before, .steps::after { content: ""; position: absolute; left: 11px; top: 14px; bottom: 30px; width: 2px; border-radius: 2px; }
.steps::before { background: var(--faint); }
.steps::after { background: linear-gradient(180deg, #fff, var(--ice)); box-shadow: 0 0 10px var(--ice), 0 0 24px rgba(139, 233, 255, 0.5); transform-origin: 50% 0; transform: scaleY(var(--fill)); }
.steps > li { position: relative; display: grid; gap: 10px; padding: 0 0 clamp(40px, 4.6vw, 64px) clamp(52px, 5vw, 76px); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before { content: ""; position: absolute; z-index: 1; left: 3px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--faint);
  transition: box-shadow 0.45s, background 0.45s; }
.steps > li.on::before { background: var(--ice); box-shadow: 0 0 0 5px rgba(139, 233, 255, 0.14), 0 0 22px var(--ice); }
.step-n { font: 500 13px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--mute); transition: color 0.45s; }
.steps > li.on .step-n { color: var(--ice); }
.steps h3 { font-size: clamp(22px, 2vw, 32px); }
.steps p { color: var(--dim); max-width: 34em; }
html.no-motion .steps { --fill: 1; }
html.no-motion .steps > li::before { background: var(--ice); box-shadow: 0 0 18px var(--ice); }
html.no-motion .step-n { color: var(--ice); }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); transition: background 0.3s; }
.faq summary { position: relative; list-style: none; cursor: pointer; display: block; padding: 28px 72px 28px 4px; font: 600 clamp(19px, 1.45vw, 23px)/1.3 var(--sans); letter-spacing: -0.01em; transition: color 0.25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ice-hi); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 14px; height: 1.5px; margin-top: -0.75px; border-radius: 2px; background: currentColor; transition: transform 0.45s var(--spring), background 0.3s; }
.faq summary::after { transform: rotate(90deg); }
.faq summary { background: radial-gradient(circle at calc(100% - 25px) 50%, transparent 21px, var(--faint) 21.5px, transparent 22.5px) no-repeat; }
.faq details[open] summary { color: var(--ice); background-image: radial-gradient(circle at calc(100% - 25px) 50%, rgba(139, 233, 255, 0.1) 21px, var(--ice) 21.5px, transparent 22.5px); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq .ans { padding: 0 72px 30px 4px; color: var(--dim); max-width: 50em; }
.faq .ans p + p { margin-top: 12px; }

/* ---------- slots: elegant placeholders for what only the shop can give (reviews, prices, team photos) ---------- */
.slot { position: relative; display: grid; align-content: center; justify-items: center; gap: 10px; min-height: 240px; padding: 40px 30px; border-radius: var(--r-lg); text-align: center; color: var(--mute);
  background: radial-gradient(90% 70% at 50% 0%, rgba(139, 233, 255, 0.07), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 11px), #08090c;
  box-shadow: inset 0 0 0 1px rgba(243, 245, 247, 0.08); }
/* viewfinder corners: the space is framed and waiting, not missing */
.slot::after { content: ""; position: absolute; inset: 14px; pointer-events: none; opacity: 0.75;
  background:
    linear-gradient(var(--ice), var(--ice)) 0 0 / 20px 1.5px, linear-gradient(var(--ice), var(--ice)) 0 0 / 1.5px 20px,
    linear-gradient(var(--ice), var(--ice)) 100% 0 / 20px 1.5px, linear-gradient(var(--ice), var(--ice)) 100% 0 / 1.5px 20px,
    linear-gradient(var(--ice), var(--ice)) 0 100% / 20px 1.5px, linear-gradient(var(--ice), var(--ice)) 0 100% / 1.5px 20px,
    linear-gradient(var(--ice), var(--ice)) 100% 100% / 20px 1.5px, linear-gradient(var(--ice), var(--ice)) 100% 100% / 1.5px 20px;
  background-repeat: no-repeat; }
.slot .tag { color: var(--ice); }
.slot b { font: 800 clamp(17px, 1.3vw, 21px)/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; color: var(--ink); letter-spacing: 0.01em; max-width: 26ch; text-wrap: balance; }
.slot small { font-size: 15px; line-height: 1.45; color: var(--dim); max-width: 30em; }
.slot.tall { min-height: 420px; }
.slot.wide { min-height: 200px; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }

/* ---------- marquee ---------- */
.marquee { position: relative; overflow: hidden; padding: clamp(22px, 2.8vw, 38px) 0; background: var(--bg); border-block: 1px solid var(--line); }
.marquee::before, .marquee::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(40px, 8vw, 140px); pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--mq-bg, var(--bg)), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--mq-bg, var(--bg)), transparent); }
.marquee-track { display: flex; width: max-content; align-items: center; gap: clamp(28px, 3.2vw, 56px); will-change: transform; }
.marquee-track > * { flex: none; font: 900 clamp(34px, 4.8vw, 76px)/0.95 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap; }
.marquee-track .o { color: transparent; -webkit-text-stroke: max(1.5px, 0.022em) var(--ice); text-shadow: 0 0 0.24em rgba(139, 233, 255, 0.28); }
.marquee-track .d { width: clamp(12px, 1.2vw, 18px); height: clamp(12px, 1.2vw, 18px); border-radius: 50%; font-size: 0;
  background: radial-gradient(circle at 35% 30%, #fff, var(--ice) 45%, #2a8fa8); box-shadow: 0 0 18px rgba(139, 233, 255, 0.7); }
.marquee.ice { --mq-bg: var(--ice); background: var(--ice); color: var(--ice-ink); border-color: transparent; }
.marquee.ice .o { -webkit-text-stroke-color: var(--ice-ink); text-shadow: none; }
.marquee.ice .d { background: var(--ice-ink); box-shadow: none; }

/* ---------- forms ---------- */
.field { display: grid; gap: 10px; }
.field > span { font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--mute); -webkit-text-stroke: 0; text-shadow: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 58px; padding: 16px 18px; border: 0; border-radius: 14px; font-size: 17px; color: var(--ink);
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--faint); transition: box-shadow 0.25s, background 0.25s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243, 245, 247, 0.32); }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238be9ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 20px center / 12px 8px no-repeat; }
.field select option { background: #101317; color: var(--ink); }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(243, 245, 247, 0.3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: rgba(139, 233, 255, 0.05); box-shadow: inset 0 0 0 1.5px var(--ice), 0 0 0 4px rgba(139, 233, 255, 0.12); }
.field .bad, .field input.bad, .field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff8f7a; }
.field .hint { font-size: 14px; color: var(--mute); }
fieldset.choice, fieldset.field { min-width: 0; border: 0; }
.choice legend { margin-bottom: 12px; font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.choice { display: grid; gap: 10px; }
.choice.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice label { position: relative; cursor: pointer; display: grid; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt { position: relative; display: grid; gap: 5px; align-content: center; min-height: 72px; padding: 16px 48px 16px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--faint); transition: box-shadow 0.25s, background 0.25s, transform 0.2s; }
.opt b { font-weight: 650; font-size: 16.5px; line-height: 1.25; }
.opt small { font-size: 14px; line-height: 1.4; color: var(--dim); }
.opt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
/* the tick ring on the right */
.opt::after { content: ""; position: absolute; right: 16px; top: 18px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(243, 245, 247, 0.3); transition: box-shadow 0.25s, background 0.25s; }
.choice label:hover .opt { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(243, 245, 247, 0.32); }
.choice input:checked + .opt { background: rgba(139, 233, 255, 0.08); box-shadow: inset 0 0 0 1.5px var(--ice), 0 0 28px rgba(139, 233, 255, 0.14); }
.choice input:checked + .opt::after { background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2303161b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 14px var(--ice-glow); }
.choice input:focus-visible + .opt { outline: 2px solid var(--ice); outline-offset: 3px; }
.choice input:disabled + .opt { opacity: 0.38; cursor: not-allowed; }
.choice input[type="checkbox"] + .opt::after { border-radius: 6px; }

/* ---------- magic ---------- */
/* a headline mirrored in glossy black paint below itself (one per page) */
.reflect { -webkit-box-reflect: below -0.04em linear-gradient(transparent 60%, rgba(255, 255, 255, 0.22)); margin-bottom: 0.36em; }
/* .lightsweep: a soft band of light glides across on hover (photos, cards, frames) */
.lightsweep { position: relative; isolation: isolate; overflow: hidden; }
.lightsweep::after { content: ""; position: absolute; z-index: 3; top: -20%; bottom: -20%; left: -60%; width: 46%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(139, 233, 255, 0.08) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(139, 233, 255, 0.08) 70%, transparent); transform: translateX(0) skewX(-16deg); }
@media (hover: hover) { .lightsweep:hover::after { opacity: 1; transform: translateX(370%) skewX(-16deg); transition: transform 1.1s var(--ease-io), opacity 0.2s; } }
/* [data-lightsweep]: an LED strip sweeps across once as it enters and leaves it lit (site.js adds .ls-run, then .ls-done).
   data-lightsweep="inner": only its .ls-lit child dims and lights up; the strip itself is never masked. Use it when the
   element (or a parent) has a reflection or a glow, which a mask on the same element shows as a box (the footer name). */
html.js:not(.no-motion) [data-lightsweep]:not(.ls-done):not([data-lightsweep="inner"]),
html.js:not(.no-motion) [data-lightsweep="inner"]:not(.ls-done) .ls-lit {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--ls) - 1%), rgba(0, 0, 0, 0.3) calc(var(--ls) + 12%));
  mask-image: linear-gradient(100deg, #000 calc(var(--ls) - 1%), rgba(0, 0, 0, 0.3) calc(var(--ls) + 12%));
  /* the mask reaches past the box, so a glow or a reflection around it isn't cut off while the strip sweeps */
  -webkit-mask-size: calc(100% + 1em) 300%; mask-size: calc(100% + 1em) 300%;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-clip: no-clip; mask-clip: no-clip; }
[data-lightsweep] { position: relative; }
html.js:not(.no-motion) [data-lightsweep]:not(.ls-done)::after { content: ""; position: absolute; z-index: 3; top: -6%; bottom: -6%; left: var(--ls); width: 3px; margin-left: -2px; pointer-events: none; border-radius: 3px;
  background: #fff; box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.9), 0 0 36px 6px rgba(139, 233, 255, 0.45); opacity: 0; transform: skewX(-10deg); }
[data-lightsweep].ls-run { animation: ls-sweep 1.5s var(--ease-io) forwards; }
[data-lightsweep].ls-run::after { animation: ls-beam 1.5s linear forwards; }
@keyframes ls-sweep { from { --ls: -12%; } to { --ls: 112%; } }
@keyframes ls-beam { 0% { opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- book band: the closing call to book, with the clean line wiping across the car ---------- */
.band-book { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 12vw, 190px) var(--pad) clamp(70px, 8vw, 120px); text-align: center;
  background: radial-gradient(62% 36% at 50% 0%, rgba(206, 236, 255, 0.09), transparent 72%), radial-gradient(50% 30% at 50% 100%, rgba(139, 233, 255, 0.08), transparent 70%), var(--bg); }
.band-book::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: min(1200px, 94%); height: 40px; transform: translateX(-50%); pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8) 18%, #fff 50%, rgba(255, 255, 255, 0.8) 82%, transparent) 50% 0 / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 24%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.4) 76%, transparent) 50% 16px / 76% 1.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 70%, transparent) 50% 29px / 56% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(190, 240, 255, 0.6)); }
.band-book-in { display: grid; justify-items: center; gap: 26px; max-width: 1320px; margin: 0 auto; container-type: inline-size; }
/* a lockup sized to the band's width, so each beat stays on one line at every width: "BRING IT DIRTY." (10.04em wide)
   over "DRIVE IT HOME NEW." (13.17em, set at 0.762em so both lines run the same width). New words need new numbers. */
.band-book .mega { font-size: min(120px, 9.55cqi); }
.band-book .mega em { display: block; font-size: 0.762em; } /* its own block, so its line is as tall as its own type */
.band-book .lead { margin-inline: auto; }
.band-book .cta-row { justify-content: center; margin-top: 6px; }
.band-book-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.band-book-car { --wipe: 50%; --nudge: 0%; position: relative; isolation: isolate; overflow: hidden; max-width: 1480px; margin: clamp(56px, 6.5vw, 96px) auto 0; aspect-ratio: 16 / 7.4; border-radius: var(--r-lg);
  background: var(--char); box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px rgba(0, 0, 0, 0.6); touch-action: pan-y; cursor: ew-resize; }
.band-book-car img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.band-book-car .clean { clip-path: inset(0 0 0 clamp(0%, calc(var(--wipe) + var(--nudge)), 100%)); }
.band-book-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: clamp(0%, calc(var(--wipe) + var(--nudge)), 100%); width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.9), 0 0 34px 6px rgba(139, 233, 255, 0.55); pointer-events: none; }
.band-book-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(4, 5, 6, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 24px rgba(139, 233, 255, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.band-book-car::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 6, 0.3), transparent 30%, transparent 75%, rgba(4, 5, 6, 0.45)); }
.band-book-car .caption { z-index: 3; bottom: 16px; }
.band-book-car .caption.after { left: auto; right: 16px; }
.band-book-car .caption.after i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
/* the lit version: the golden-hour car (k4) with one LED strip sweeping across, on pages that already have their own
   dirty/clean wipe, so the same trick doesn't show twice on one page */
.band-book-lit { display: none; position: relative; isolation: isolate; overflow: hidden; max-width: 1480px; margin: clamp(56px, 6.5vw, 96px) auto 0; aspect-ratio: 16 / 7.4; border-radius: var(--r-lg);
  background: var(--char); box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px rgba(0, 0, 0, 0.6); }
.band-book-lit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.band-book-lit::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 6, 0.3), transparent 30%, transparent 75%, rgba(4, 5, 6, 0.45)); }
.band-book-lit .caption { z-index: 4; bottom: 16px; }
.band-book-lit .caption i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
[data-page="services"] .band-book-car, [data-page="our-work"] .band-book-car { display: none; }
[data-page="services"] .band-book-lit, [data-page="our-work"] .band-book-lit { display: block; }

/* ---------- footer ---------- */
.foot { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 8vw, 120px) var(--pad) calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #08090b, var(--bg)); border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: clamp(44px, 6vw, 100px); }
.foot-brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.foot-brand .brand-mark { font-size: 17px; }
.foot-brand p { color: var(--dim); max-width: 24em; font-size: 16.5px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.foot-cols > div { display: grid; gap: 0; align-content: start; justify-items: start; }
.foot-cols h2 { margin-bottom: 6px; font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.05em; color: var(--ice); text-transform: none; }
.foot-cols a, .foot-cols span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--dim); font-size: 16px; line-height: 1.3; transition: color 0.2s; }
.foot-cols a:hover { color: var(--ink); }
.foot-cols .owner { margin-top: 8px; padding: 0 14px; min-height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--faint); color: var(--ink); font-size: 14px; }
.foot-cols .owner i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); }
.foot-cols .owner:hover { box-shadow: inset 0 0 0 1px var(--ice); }
/* the name, huge, in glossy black, with its reflection in the floor */
/* sized to the column (not the screen), so it spans the column and stays centred on wide screens too */
.foot-mark { margin: clamp(56px, 7vw, 110px) 0 0.46em; text-align: center; white-space: nowrap; font: 900 calc(min(100vw - 2 * var(--pad), var(--max)) / 6.6)/0.8 var(--display); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; user-select: none;
  color: transparent; -webkit-text-stroke: 1px rgba(243, 245, 247, 0.13);
  -webkit-box-reflect: below 0.04em linear-gradient(transparent 50%, rgba(255, 255, 255, 0.34)); }
.foot-mark > span, .foot-mark .ls-lit { display: inline-block; }
.foot-mark .ls-lit { background: linear-gradient(180deg, #59626b 0%, #20252a 34%, #0b0c0e 60%, #1a1e22 100%); -webkit-background-clip: text; background-clip: text; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.foot-legal p { max-width: 62em; }
.foot-legal strong { color: var(--dim); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .hdr-call span { display: none; }
  .brand-tag { display: none; }
  .nav > a, .svc-btn { padding: 0 12px; }
}
@media (max-width: 1080px) {
  :root { --hdr-h: 72px; }
  .nav, .hdr-call, .hdr-book { display: none; }
  .menu-btn { display: block; }
  .hdr-in { justify-content: space-between; }
  .brand-tag { display: inline; }
  .tiles, .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts, .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: 1fr; }
}
@media (min-width: 1081px) { .menu { display: none; } }
@media (max-width: 900px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .head.row { grid-template-columns: 1fr; }
  .head.row > .lead, .head.row > .cta-row { grid-column: 1; grid-row: auto; }
  .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --fs-body: 17px; --fs-lead: 19px; --hdr-h: 66px; --fs-mega: 11.4vw; --fs-display: 9.4vw; }
  .brand-tag { display: none; }
  .menu-btn { width: 46px; height: 46px; }
  .menu-btn i { left: 14px; right: 14px; }
  .menu-btn i:first-child { top: 18px; }
  .menu-btn i:last-child { top: 26px; left: 20px; }
  .menu-open .menu-btn i { top: 22px; left: 14px; }
  .tiles, .tiles.two, .tiles.four, .cards, .cards.two, .facts, .facts.two, .facts.four, .slots, .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 420px; }
  .tile-go { opacity: 1; transform: none; width: 44px; height: 44px; }
  .choice.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .phero { min-height: max(560px, 88svh); padding-top: calc(var(--hdr-h) + 56px); }
  .phero.short { min-height: max(460px, 64svh); }
  .phero::before { background: radial-gradient(120% 60% at 20% 95%, rgba(4, 5, 6, 0.9), transparent 75%), linear-gradient(180deg, rgba(4, 5, 6, 0.72), rgba(4, 5, 6, 0.15) 28%, rgba(4, 5, 6, 0.4) 55%, var(--bg)); }
  .phero .cta-row, .band-book .cta-row { width: 100%; }
  .phero .cta-row .btn, .band-book .cta-row .btn { flex: 1 1 100%; }
  .btn-xl { min-height: 60px; padding: 0 28px; font-size: 14px; }
  .faq summary { padding: 24px 62px 24px 0; }
  .faq .ans { padding: 0 0 26px; }
  .band-book-car, .band-book-lit { aspect-ratio: 5 / 4.6; margin-inline: calc(var(--pad) * -1); border-radius: 0; }
  .band-book-car img { object-position: 46% 60%; }
  .band-book-lit img { object-position: 32% 62%; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-cols > div:last-child { grid-column: 1 / -1; }
  .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* phone dock */
  .dock { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.65fr; gap: 8px; padding: 7px; border-radius: 999px;
    background: rgba(12, 14, 17, 0.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); transform: translateY(170%); transition: transform 0.55s var(--ease); }
  .dock.show { transform: none; }
  .menu-open .dock { transform: translateY(170%); }
  .dock .btn { min-height: 50px; padding: 0 14px; font-size: 12.5px; }
  .dock svg { width: 16px; height: 16px; fill: currentColor; }
}
@media (max-width: 380px) {
  :root { --pad: 18px; }
  .brand-mark { font-size: 14px; letter-spacing: 0.28em; margin-right: -0.28em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reflect { -webkit-box-reflect: below -0.04em linear-gradient(transparent 56%, rgba(255, 255, 255, 0.2)); }
}