/* =============================================================================
   NOCTIS AUTO INTERIORS
   Scene: an owner at 11pm, phone in hand on the couch, picturing their own car
   parked in a dark garage. The UI stays near-black and quiet so the photographed
   light is the only color that glows. Crimson = tail-light, reserved for action.
   Type: Archivo variable. Width axis does the brand work: 125% wide caps for
   display (automotive badging), 100% for reading.
   ========================================================================== */

/* Archivo (SIL Open Font License), self-hosted variable latin subset: width 100–125%, weight 300–900.
   Preloaded in <head> so first paint uses it; this removed the font-swap layout shift under the hero. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Starlit Studio palette (2026-09-17): night indigo base taken from the photos, chrome-white ink from the logo,
     one ultraviolet action color, and an ice-cyan accent (the logo's star glint) for highlights and selection.
     Magenta only ever appears as a low-opacity glow in backgrounds. Token names are historical:
     --red = primary action color, --fiber = accent, --red-text = error text. */
  --bg: oklch(0.14 0.022 280);
  --bg-raise: oklch(0.185 0.026 280);
  --bg-tint: oklch(0.16 0.024 280);
  --bg-sunk: oklch(0.11 0.02 280);
  --line: oklch(0.9 0.03 280 / 0.11);
  --line-strong: oklch(0.9 0.03 280 / 0.22);
  --ink: oklch(0.97 0.006 270);
  --ink-2: oklch(0.83 0.018 275);
  --ink-3: oklch(0.72 0.022 275);
  --red: oklch(0.55 0.19 288);
  --red-hover: oklch(0.61 0.19 288);
  --red-text: oklch(0.75 0.13 15);
  --fiber: oklch(0.86 0.1 205);
  --focus: oklch(0.86 0.1 205);
  --glow-violet: oklch(0.55 0.2 298);
  --glow-magenta: oklch(0.6 0.21 345);
  --glow-cyan: oklch(0.72 0.13 215);

  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 86rem;
  --sec: clamp(3.25rem, 7vw, 6rem);
  --header-h: 4.5rem;
  --r: 3px;

  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-dialog: 50;
  --z-skip: 60;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 1.0625rem; line-height: 1.7; font-stretch: 100%; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: oklch(0.55 0.19 288 / 0.6); color: #fff; }
html.menu-open { overflow: hidden; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: var(--z-skip); background: var(--ink); color: var(--bg); padding: 0.75rem 1rem; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
.ic { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------------------------------------------------------- type */
h1, h2 {
  font-stretch: 125%; font-weight: 760; text-transform: uppercase; line-height: 1;
  letter-spacing: -0.012em; text-wrap: balance;
}
h2 { font-size: clamp(1.9rem, 1.15rem + 3vw, 3.9rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); font-stretch: 110%; font-weight: 640; line-height: 1.25; text-wrap: balance; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.225rem); color: var(--ink-2); max-width: 60ch; line-height: 1.7; }
.prose { display: grid; gap: 1.15em; color: var(--ink-2); max-width: 64ch; }
.prose p:first-child { color: var(--ink); font-size: 1.15rem; }

/* ---------------------------------------------------------------- buttons & links */
.btn {
  --h: 3.25rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: var(--h); padding: 0 1.45rem; border-radius: var(--r);
  font-stretch: 112%; font-weight: 640; font-size: 0.95rem; letter-spacing: 0.01em; line-height: 1.1;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s, transform 0.2s var(--ease-out);
}
.btn .ic { transition: transform 0.4s var(--ease-out); }
.btn:hover .ic:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: oklch(1 0 0 / 0.55); background: oklch(1 0 0 / 0.04); }
.btn-line .ic:first-child:not(:last-child) { transform: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem; font-stretch: 110%; font-weight: 620; font-size: 0.95rem;
  text-decoration: none; padding-block: 0.55rem; border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s, gap 0.4s var(--ease-out);
  white-space: nowrap;
}
.link-arrow:hover { border-color: var(--ink); gap: 0.8rem; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease-out), border-color 0.45s, backdrop-filter 0.45s;
}
.hdr.is-solid { background: oklch(0.13 0.022 280 / 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: var(--line); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; margin-right: auto; padding-block: 0.3rem; flex: none; }
.logo img { display: block; height: 3.15rem; width: auto; }
@media (max-width: 30rem) { .logo img { height: 2.5rem; } }
.nav { display: flex; gap: clamp(1.1rem, 1.8vw, 1.9rem); }
.nav a { position: relative; font-size: 0.9rem; text-decoration: none; color: var(--ink-2); padding-block: 0.6rem; transition: color 0.25s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr-phone { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdr-phone .ic { color: var(--ink-3); }
.hdr .btn { --h: 2.75rem; padding: 0 1.1rem; font-size: 0.875rem; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; margin-right: -0.5rem; background: none; border: 0; border-radius: var(--r); }
.menu-btn .ic { width: 1.6rem; height: 1.6rem; }

@media (max-width: 80rem) { .hdr-phone span { display: none; } .hdr-phone { padding: 0.5rem; } }
@media (max-width: 70rem) { .nav, .hdr-phone { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 30rem) { .hdr [data-hdr-cta] { display: none; } }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--ink); z-index: var(--z-drawer); flex-direction: column;
  opacity: 0; transition: opacity 0.35s var(--ease-out), overlay 0.35s allow-discrete, display 0.35s allow-discrete;
}
.drawer[open] { display: flex; opacity: 1; }
@starting-style { .drawer[open] { opacity: 0; } }
.drawer::backdrop { background: transparent; }
.drawer-top { height: var(--header-h); display: flex; align-items: center; flex: none; }
.drawer-nav { display: flex; flex-direction: column; padding-block: 2rem; flex: 1; overflow-y: auto; }
.drawer-nav a {
  font-stretch: 125%; font-weight: 740; text-transform: uppercase; font-size: clamp(1.75rem, 8vw, 2.6rem); line-height: 1;
  text-decoration: none; padding-block: 0.8rem; border-bottom: 1px solid var(--line);
}
.drawer[open] .drawer-nav a { animation: drawerIn 0.55s var(--ease-expo) both; }
.drawer-nav a:nth-child(2) { animation-delay: 0.03s !important; }
.drawer-nav a:nth-child(3) { animation-delay: 0.06s !important; }
.drawer-nav a:nth-child(4) { animation-delay: 0.09s !important; }
.drawer-nav a:nth-child(5) { animation-delay: 0.12s !important; }
.drawer-nav a:nth-child(6) { animation-delay: 0.15s !important; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(14px); } }
.drawer-foot { display: grid; gap: 0.6rem; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); flex: none; }

/* mobile action bar */
.mbar { display: none; }
@media (max-width: 47.99rem) {
  .mbar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    padding: 0.6rem var(--gutter) max(0.6rem, env(safe-area-inset-bottom));
    background: oklch(0.12 0.022 280 / 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 0.45s var(--ease-expo);
  }
  .mbar.is-on { transform: none; }
  .mbar .btn { --h: 3rem; padding: 0 0.9rem; }
  body { padding-bottom: 4.5rem; }
  body.page-book { padding-bottom: 0; }
  body.page-book .mbar { display: none; }
}

/* ---------------------------------------------------------------- hero (home) */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 5vw, 3rem)); padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
/* starfield: a plain element whose background image is painted once by site.js (no live canvas, no mask) */
.sky { position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%; }
.glint {
  position: absolute; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: #eef6ff; box-shadow: 0 0 6px 1px oklch(0.9 0.08 210 / 0.5);
  opacity: 0; animation: glint 6s ease-in-out infinite;
}
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(0.6); } 45%, 55% { opacity: 0.9; transform: scale(1); } }
.shoot {
  position: absolute; top: 14%; left: 8%; width: 120px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #eef6ff); opacity: 0; transform: rotate(18deg);
  animation: shoot 13s ease-out 4s infinite;
}
@keyframes shoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  1% { opacity: 0.9; }
  7%, 100% { opacity: 0; transform: translate(420px, 136px) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) { .glint { animation: none; opacity: 0.7; } .shoot { display: none; } }
.hero-grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: center;
}
.hero-copy { padding-top: clamp(1rem, 4vw, 3rem); }
.hero h1 { display: grid; gap: 1.4rem; }
.h1-lede {
  display: block; font-size: 0.8rem; font-stretch: 112%; font-weight: 640; letter-spacing: 0.16em; line-height: 1.5; color: oklch(0.8 0.12 296);
  animation: rise 0.9s var(--ease-expo) 0.25s both;
}
.h1-main { display: block; font-size: clamp(2.55rem, 1.2rem + 4.6vw, 5.6rem); line-height: 0.94; animation: rise 1.1s var(--ease-expo) 0.35s both; }
.h1-main em { font-style: normal; color: var(--fiber); }
.hero-sub { margin-top: 1.75rem; max-width: 50ch; color: var(--ink-2); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); animation: rise 1.1s var(--ease-expo) 0.5s both; }
.hero .actions { margin-top: 2.25rem; animation: rise 1.1s var(--ease-expo) 0.6s both; }
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem 1.8rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-2); animation: rise 1.1s var(--ease-expo) 0.75s both; }
.hero-proof li { display: flex; align-items: center; gap: 0.55rem; }
.hero-proof .ic { width: 0.8rem; height: 0.8rem; color: var(--fiber); }
.hero-fig { position: relative; align-self: stretch; display: flex; align-items: flex-end; min-height: 0; }
.hero-fig img {
  width: 100%; height: min(78svh, 50rem); object-fit: cover; border-radius: 2px;
  animation: lightsOn 2.6s var(--ease-expo) 0.2s both;
}
.hero-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.14 0.022 280 / 0.6), transparent 35%); pointer-events: none; border-radius: 2px; }
.hero-fig figcaption { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1; font-size: 0.8rem; color: var(--ink); display: flex; gap: 0.6rem; align-items: center; }
.hero-fig figcaption::before { content: ""; width: 1.75rem; height: 1px; background: var(--fiber); }
@keyframes lightsOn { from { filter: brightness(0.25) saturate(0.4); transform: scale(1.08); } to { filter: none; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 61.99rem) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .hero-copy { padding-top: clamp(1rem, 6vw, 2.5rem); }
  .hero-fig img { height: auto; aspect-ratio: 4 / 3.4; }
}

/* ---------------------------------------------------------------- sections */
.sec { padding-block: var(--sec); position: relative; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head > :first-child { max-width: 52rem; }
.sec-head .lead { margin-top: 1.25rem; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 61.99rem) { .split { grid-template-columns: minmax(0, 1fr); } }

/* scroll-linked image settle. Never hides content: the "from" state is a slightly zoomed, fully visible frame */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal="img"] { overflow: hidden; }
    [data-reveal="img"] img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------------------------------------------------------------- ambient (home) */
.sec-amb { padding-block: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.amb-media { grid-area: 1 / 1; min-height: clamp(34rem, 62vw, 52rem); position: relative; margin-right: 38%; }
.amb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amb-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--bg) 99%); }
.amb-grid { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr); align-items: center; padding-block: var(--sec); }
.amb-copy { grid-column: 2; display: grid; gap: 1.5rem; justify-items: start; position: relative; }
.zones { list-style: none; width: 100%; border-top: 1px solid var(--line); margin-top: 0.5rem; }
.zones li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding-block: 0.95rem; border-bottom: 1px solid var(--line); }
.zones h3 { font-size: 0.95rem; }
.zones p { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 61.99rem) {
  .amb-media { grid-area: auto; margin-right: 0; min-height: 0; aspect-ratio: 16 / 10; }
  .amb-media::after { background: linear-gradient(to bottom, transparent 55%, var(--bg)); }
  .amb-grid { grid-area: auto; grid-template-columns: minmax(0, 1fr); padding-block: 2.5rem var(--sec); }
  .amb-copy { grid-column: 1; }
}
@media (max-width: 36rem) { .zones li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }


/* ---------------------------------------------------------------- gallery */
/* Four columns of pre-cropped real photos: portrait tiles are 3:4, landscape tiles (g-l) are 3:2 across two columns,
   which lands on the same row height, so rows line up without holes. */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(0.5rem, 1vw, 0.85rem); }
.gal-item {
  position: relative; overflow: hidden; padding: 0; margin: 0; border: 0; border-radius: 3px; background: var(--bg-raise);
  aspect-ratio: 3 / 4; cursor: zoom-in; text-align: left;
}
.g-l { grid-column: span 2; aspect-ratio: auto; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-expo), filter 0.6s var(--ease-out); }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.04); }
.gal:has(.gal-item:hover) .gal-item:not(:hover) img { filter: brightness(0.55) saturate(0.85); }
.gal-item:focus-visible { outline-offset: -3px; }
.gal-cap {
  position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding: 2.75rem 1rem 0.9rem; font-size: 0.875rem; line-height: 1.35; color: #fff; text-shadow: 0 1px 3px oklch(0.06 0.02 280 / 0.9); background: linear-gradient(transparent, oklch(0.07 0.02 280 / 0.6) 45%, oklch(0.05 0.015 280 / 0.95));
  opacity: 0; transform: translateY(0.6rem); transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-expo);
}
.gal-cat { color: oklch(0.8 0.03 275); font-size: 0.75rem; white-space: nowrap; }
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; transform: none; }
@media (hover: none) { .gal-cap { opacity: 1; transform: none; } .gal:has(.gal-item:hover) .gal-item:not(:hover) img { filter: none; } }
@media (max-width: 47.99rem) {
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-l { aspect-ratio: 3 / 2; }
  .gal-cap { padding: 1.75rem 0.7rem 0.6rem; font-size: 0.78rem; }
  .gal-cat { display: none; }
}

.gal-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(1rem, 3vw, 2rem); }
.gal-hero h1 { font-size: clamp(2.1rem, 1rem + 4vw, 4.6rem); max-width: 16ch; }
.gal-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 3rem; align-items: end; }
@media (max-width: 61.99rem) { .gal-hero-in { grid-template-columns: minmax(0, 1fr); } }
.sec-gal { padding-top: clamp(2rem, 4vw, 3rem); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.chip { min-height: 2.75rem; padding: 0 1.1rem; border-radius: 2rem; border: 1px solid var(--line-strong); background: transparent; font-size: 0.9rem; color: var(--ink-2); transition: all 0.25s; }
.chip:hover { color: var(--ink); border-color: oklch(1 0 0 / 0.45); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips-count { margin-left: auto; color: var(--ink-3); font-size: 0.875rem; }
.gal-item.is-in { animation: galIn 0.6s var(--ease-expo) both; }

@keyframes galIn { from { opacity: 0; transform: scale(0.97); } }

/* lightbox */
.lb { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: oklch(0.07 0.018 280 / 0.985); color: var(--ink); z-index: var(--z-dialog); }
.lb[open] { animation: fade 0.3s var(--ease-out); }
.lb::backdrop { background: transparent; }
@keyframes fade { from { opacity: 0; } }
.lb-in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: clamp(3.75rem, 7vw, 5rem) clamp(0.5rem, 6vw, 6rem); }
.lb-fig { display: grid; gap: 0.9rem; max-width: 100%; max-height: 100%; }
.lb-img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; margin-inline: auto; border-radius: 2px; }
.lb-img.is-swap { animation: fade 0.4s var(--ease-out); }
.lb-cap { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--ink-2); padding-inline: 0.25rem; }
.lb-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: oklch(1 0 0 / 0.07); border: 1px solid var(--line); transition: background-color 0.25s; }
.lb-btn:hover { background: oklch(1 0 0 / 0.16); }
.lb-btn .ic { width: 1.35rem; height: 1.35rem; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-next { right: 1rem; top: 50%; translate: 0 -50%; }
@media (max-width: 47.99rem) { .lb-prev, .lb-next { top: auto; bottom: 1rem; translate: none; } .lb-prev { left: calc(50% - 3.5rem); } .lb-next { right: calc(50% - 3.5rem); } }

/* ---------------------------------------------------------------- process */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 3vw, 2.5rem); counter-reset: s; }
.steps li { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--line-strong); display: grid; gap: 0.7rem; align-content: start; }
.steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--fiber); box-shadow: 0 0 12px var(--fiber); }
.step-n { font-stretch: 125%; font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.steps p { color: var(--ink-2); font-size: 0.975rem; }
@media (max-width: 64rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

.flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.flow li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 2rem 2rem 2rem 0; border-bottom: 1px solid var(--line); }
.flow li:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.flow li:not(:nth-child(3n+1)) { padding-left: 2rem; }
.flow .step-n { font-size: 1.6rem; margin: 0; color: var(--fiber); font-weight: 400; }
.flow h3 { margin-bottom: 0.5rem; }
.flow p { color: var(--ink-2); font-size: 0.975rem; }
@media (max-width: 64rem) {
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow li, .flow li:not(:nth-child(3n+1)) { padding: 1.75rem 1.5rem 1.75rem 0; border-right: 0; }
  .flow li:nth-child(odd) { border-right: 1px solid var(--line); }
  .flow li:nth-child(even) { padding-left: 1.5rem; }
}
@media (max-width: 40rem) { .flow { grid-template-columns: minmax(0, 1fr); } .flow li, .flow li:nth-child(even) { padding: 1.5rem 0; border-right: 0 !important; } }

/* ---------------------------------------------------------------- specs / craft */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.specs > div { padding-block: 1.6rem; border-top: 1px solid var(--line); }
.specs dt { font-stretch: 110%; font-weight: 640; font-size: 1.1rem; margin-bottom: 0.5rem; }
.specs dd { color: var(--ink-2); font-size: 0.975rem; }
.specs-stack { grid-template-columns: minmax(0, 1fr); }
.specs-stack > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0.5rem 2rem; }
.specs-stack dt { margin: 0; }
@media (max-width: 40rem) { .specs-stack > div { grid-template-columns: minmax(0, 1fr); } }

.craft-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.craft-side { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 2rem; }
.craft-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.craft-list > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0.5rem 2rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.craft-list > div:last-child { border-bottom: 1px solid var(--line); }
.craft-list dt { font-stretch: 110%; font-weight: 640; font-size: 1.1rem; }
.craft-list dd { color: var(--ink-2); }
@media (max-width: 61.99rem) { .craft-grid { grid-template-columns: minmax(0, 1fr); } .craft-side { position: static; } }
@media (max-width: 40rem) { .craft-list > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- reviews */
.rv-empty { border-block: 1px solid var(--line); }
.rv-empty-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.rv-empty-cta { margin-top: 2rem; }
@media (max-width: 61.99rem) { .rv-empty-in { grid-template-columns: minmax(0, 1fr); } }
/* reviews: two full-bleed marquee rows moving in opposite directions.
   Spacing uses margin-right on every card (not flex gap) so both copies are identical widths and -50% loops seamlessly. */
.sec-rv { overflow: hidden; }
.rv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 3rem; margin-bottom: clamp(1.5rem, 4svh, 2.75rem); }
.rv-head .lead { margin-top: 0.75rem; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rv-pause { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: transparent; color: var(--ink-2); font-size: 0.875rem; transition: color 0.2s, border-color 0.2s; }
.rv-pause:hover { color: var(--ink); border-color: oklch(1 0 0 / 0.45); }
.rv-pause .ic { width: 1rem; height: 1rem; }
.rv-pause .ic-play, .rv-pause[aria-pressed="true"] .ic-pause { display: none; }
.rv-pause[aria-pressed="true"] .ic-play { display: block; }
.rv-rows {
  display: grid; gap: clamp(0.7rem, 1.8svh, 1.1rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rv-row { overflow: hidden; }
.rv-track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: rvLeft 75s linear infinite; will-change: transform; }
.rv-rev .rv-track { animation-name: rvRight; animation-duration: 85s; }
.rv-rows:hover .rv-track, .rv-rows:focus-within .rv-track, .rv-rows.is-paused .rv-track { animation-play-state: paused; }
@keyframes rvLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rvRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rv-track > li { flex: none; display: flex; width: clamp(16.5rem, 23vw, 23rem); margin-right: clamp(0.7rem, 1.1vw, 1.1rem); }
.rv { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; padding: clamp(1.1rem, 2.4svh, 1.5rem); border: 1px solid var(--line); border-radius: 4px; background: var(--bg-raise); }
.rv-stars { display: flex; gap: 0.2rem; color: var(--fiber); }
.rv-star { width: 0.9rem; height: 0.9rem; }
.rv blockquote p { font-size: 0.95rem; line-height: 1.6; color: var(--ink); }
.rv figcaption { display: grid; gap: 0.1rem; margin-top: auto; font-size: 0.85rem; color: var(--ink-3); }
.rv figcaption strong { color: var(--ink); font-weight: 620; font-stretch: 106%; }
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none !important; transform: none !important; }
  .rv-row { overflow-x: auto; scrollbar-width: thin; }
  .rv-rows { -webkit-mask-image: none; mask-image: none; }
  .rv-track > li[aria-hidden="true"] { display: none; }
  .rv-pause { display: none; }
}

/* ---------------------------------------------------------------- FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-grid > div:first-child { display: grid; gap: 1.5rem; justify-items: start; position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 61.99rem) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-grid > div:first-child { position: static; } }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-stretch: 106%; font-weight: 600; font-size: clamp(1.02rem, 1rem + 0.2vw, 1.12rem); line-height: 1.4; transition: color 0.25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--fiber); }
.faq-ic { width: 1.25rem; height: 1.25rem; color: var(--ink-3); transition: transform 0.45s var(--ease-out), color 0.25s; }
.faq-item[open] .faq-ic { transform: rotate(45deg); color: var(--fiber); }
.faq-a { padding: 0 3rem 1.5rem 0; color: var(--ink-2); max-width: 68ch; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}
/* ---------------------------------------------------------------- CTA band + forms */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-sunk); border-top: 1px solid var(--line); }
.cta-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%; }
.cta-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: center; padding-block: var(--sec); }
.cta-copy { display: grid; gap: 1.5rem; }
.cta-copy h2 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem); max-width: 12ch; }
.cta-call { color: var(--ink-3); }
.cta-call a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.quick { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: color-mix(in oklch, var(--bg-sunk) 88%, transparent); border: 1px solid var(--line); border-radius: 4px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.quick .btn { width: 100%; }
.quick-note { font-size: 0.85rem; color: var(--ink-3); text-align: center; }
@media (max-width: 61.99rem) { .cta-in { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 0.45rem; align-content: start; }
.field > label, .lbl { font-size: 0.9rem; font-weight: 600; font-stretch: 106%; }
.opt { color: var(--ink-3); font-weight: 400; }
.hint { font-size: 0.85rem; color: var(--ink-3); margin-top: -0.2rem; }
.input {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 0.95rem; background: var(--bg-sunk); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 1rem; line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.input::placeholder { color: oklch(0.64 0.02 275); }
.input:hover { border-color: oklch(1 0 0 / 0.34); }
.input:focus { outline: none; border-color: var(--fiber); box-shadow: 0 0 0 3px oklch(0.86 0.1 205 / 0.2); }
.input[aria-invalid="true"] { border-color: var(--red-text); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px oklch(0.75 0.13 15 / 0.25); }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c4bd' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem;
}
textarea.input { min-height: 7.5rem; resize: vertical; }
.err { display: flex; align-items: flex-start; gap: 0.4rem; color: var(--red-text); font-size: 0.875rem; line-height: 1.45; }
.err::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin-top: 0.45rem; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- book page */
.book { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); padding-bottom: var(--sec); }
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.book-side { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 2rem); }
.book-side h1 { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.4rem); }
.next { list-style: none; display: grid; border-top: 1px solid var(--line); margin-top: 0.5rem; counter-reset: n; }
.next li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; padding-block: 1rem; border-bottom: 1px solid var(--line); counter-increment: n; }
.next li::before { content: counter(n); grid-row: span 2; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 0.8rem; color: var(--ink-2); }
.next h2 { font-size: 1rem; font-stretch: 108%; text-transform: none; font-weight: 620; letter-spacing: 0; line-height: 1.4; }
.next p { color: var(--ink-3); font-size: 0.925rem; }
.book-contact { display: grid; gap: 0.6rem; justify-items: start; font-size: 0.95rem; color: var(--ink-2); }
.book-phone, .book-mail { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.book-phone { font-stretch: 112%; font-weight: 700; font-size: 1.35rem; }
.book-area { color: var(--ink-3); font-size: 0.875rem; }
@media (max-width: 61.99rem) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .book-side { position: static; }
  .book-side .next, .book-contact { display: none; }
  .book-main { order: 0; }
}
.book-main { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.25rem, 3.5vw, 2.75rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (max-width: 61.99rem) { .book-mobile-contact { display: grid; } }

.qform { display: grid; gap: 1.75rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qprog { display: grid; gap: 0.7rem; }
.qprog-t { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }
.qprog-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.qprog-bar span { display: block; height: 100%; width: 100%; background: var(--fiber); transform: scaleX(0.5); transform-origin: left; transition: transform 0.6s var(--ease-expo); }
.qform[data-at="2"] .qprog-bar span { transform: none; }
html:not(.js) .qprog { display: none; }
.qstep { display: grid; gap: 1.5rem; }
.qstep:not([hidden]) { animation: rise 0.55s var(--ease-expo) both; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 1rem; }
.row3 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 1rem; }
@media (max-width: 36rem) {
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .row3 { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); }
  .row3 > :last-child { grid-column: 1 / -1; }
}
.svc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; margin-top: 0.2rem; }
.svc { position: relative; display: grid; }
.svc input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.svc-card { position: relative; display: grid; gap: 0.1rem; min-height: 4.4rem; padding: 0.8rem 2.5rem 0.8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-sunk); transition: border-color 0.2s, background-color 0.2s; align-content: center; }
.svc-card strong { font-size: 0.95rem; font-weight: 620; font-stretch: 106%; }
.svc-card small { font-size: 0.825rem; color: var(--ink-3); }
.svc-ic { position: absolute; right: 0.85rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--fiber); opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.35s var(--ease-out); }
.svc:hover .svc-card { border-color: oklch(1 0 0 / 0.38); }
.svc input:checked + .svc-card { border-color: var(--fiber); background: oklch(0.86 0.1 205 / 0.07); }
.svc input:checked + .svc-card .svc-ic { opacity: 1; transform: none; }
.svc input:focus-visible + .svc-card { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-field="service"][data-invalid] .svc-card { border-color: oklch(0.75 0.13 15 / 0.55); }
.qactions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-top: 0.25rem; }
.qactions [data-next] { margin-left: auto; }
.qactions [data-submit] { flex: 1; max-width: 22rem; margin-left: auto; }
@media (max-width: 36rem) { .qactions [data-next] { width: 100%; } .qactions [data-submit] { max-width: none; } }
.qlegal { font-size: 0.825rem; color: var(--ink-3); }
.qfail { display: flex; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid oklch(0.75 0.13 15 / 0.5); background: oklch(0.6 0.18 15 / 0.1); border-radius: var(--r); font-size: 0.925rem; }
.qfail .ic { color: var(--red-text); margin-top: 0.15rem; }
.qfail a { font-weight: 600; white-space: nowrap; }
.prefill { display: flex; gap: 0.8rem; padding: 0.9rem 1.05rem; border: 1px solid oklch(0.86 0.1 205 / 0.3); background: oklch(0.86 0.1 205 / 0.06); border-radius: var(--r); font-size: 0.9rem; }
.prefill .ic { color: var(--fiber); margin-top: 0.2rem; width: 0.9rem; height: 0.9rem; }
.prefill p { display: grid; gap: 0.1rem; }
.prefill span { color: var(--ink-2); }
.spin { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid oklch(1 0 0 / 0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.qdone { display: grid; gap: 1.25rem; justify-items: start; padding-block: 1rem; animation: rise 0.7s var(--ease-expo) both; }
.qdone h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); outline: none; }
.qdone-mark { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--fiber); color: var(--fiber); box-shadow: 0 0 30px -6px var(--fiber); }
.qdone-mark .ic { width: 1.5rem; height: 1.5rem; }
.qdemo { font-size: 0.85rem; color: var(--ink-3); border: 1px dashed var(--line-strong); padding: 0.6rem 0.85rem; border-radius: var(--r); }

/* ---------------------------------------------------------------- inner page heroes */
.phero { position: relative; isolation: isolate; overflow: hidden; min-height: min(84svh, 50rem); display: flex; align-items: flex-end; padding-top: calc(var(--header-h) + 4rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.phero-bg { position: absolute; inset: 0; z-index: -1; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; animation: lightsOn 2.4s var(--ease-expo) both; }
/* three layers: left scrim for the copy, bottom fade into the page, top scrim so the fixed header + breadcrumbs
   never sit on a bright light streak in the photo */
.phero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, oklch(0.1 0.02 280 / 0.82) 0, oklch(0.1 0.02 280 / 0.45) 16%, transparent 32%), linear-gradient(90deg, oklch(0.1 0.02 280 / 0.94) 0%, oklch(0.1 0.02 280 / 0.66) 45%, oklch(0.1 0.02 280 / 0.1) 85%), linear-gradient(to top, var(--bg) 2%, transparent 45%); }
.phero .wrap { display: grid; gap: 1.5rem; justify-items: start; }
.phero h1 { font-size: clamp(2.2rem, 1rem + 4.2vw, 4.9rem); max-width: 15ch; animation: rise 1s var(--ease-expo) 0.15s both; }
.phero .lead { max-width: 54ch; color: var(--ink-2); animation: rise 1s var(--ease-expo) 0.3s both; }
.phero .actions { margin-top: 0.5rem; animation: rise 1s var(--ease-expo) 0.42s both; }
@media (max-width: 47.99rem) { .phero { min-height: 36rem; } .phero-bg::after { background: linear-gradient(to top, var(--bg) 8%, oklch(0.1 0.02 280 / 0.84) 50%, oklch(0.1 0.02 280 / 0.88)); } }
.phero-split { min-height: 0; display: block; padding-bottom: clamp(3rem, 6vw, 5rem); }
.phero-split-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: end; }
.phero-copy { display: grid; gap: 1.5rem; justify-items: start; padding-bottom: 1rem; }
.phero-fig img { width: 100%; height: min(72svh, 44rem); object-fit: cover; border-radius: 2px; animation: lightsOn 2.4s var(--ease-expo) both; }
@media (max-width: 61.99rem) { .phero-split-in { grid-template-columns: minmax(0, 1fr); } .phero-fig img { height: auto; aspect-ratio: 4 / 3.2; } }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; color: var(--ink-3); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; color: oklch(1 0 0 / 0.25); }
.crumbs a { text-decoration: none; color: var(--ink-2); padding-block: 0.3rem; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
/* over photography the small breadcrumb text gets one extra step of lightness */
.phero .crumbs ol { color: var(--ink-2); }
.phero .crumbs a { color: var(--ink); }


/* legal */
.legal { max-width: 70ch; }
.legal h2 { font-size: 1.35rem; margin-top: 1.25rem; }
.legal p:first-child { font-size: 0.95rem; color: var(--ink-3); }

/* 404 */
.nf { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-top: var(--header-h); }
.nf-in { display: grid; gap: 1.5rem; justify-items: start; padding-block: 4rem; }
.nf h1 { font-size: clamp(2rem, 1rem + 3.6vw, 4rem); }

/* ---------------------------------------------------------------- footer */
/* compact two-line footer: brand + links + contact, then one small base line */
.ftr { background: var(--bg-sunk); border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.ftr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.ftr .logo { margin-right: 0; }
.ftr .logo img { height: 2.9rem; }
.ftr-links, .ftr-contact { display: flex; flex-wrap: wrap; gap: 0 1.4rem; font-size: 0.9rem; }
.ftr-links a, .ftr-contact a { display: inline-block; padding-block: 0.45rem; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.ftr-links a:hover, .ftr-contact a:hover { color: var(--ink); }
.ftr-contact a:first-child { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) {
  .ftr-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .ftr-links { gap: 0 1.1rem; }
}
.ftr-hours { list-style: none; display: grid; gap: 0.2rem; margin-top: 1rem; font-size: 0.875rem; color: var(--ink-3); }
.ftr-hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 17rem; }
.ftr-hours li span:last-child { color: var(--ink-2); }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 2rem; padding-block: 0.9rem; border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.6; color: var(--ink-3); }
.ftr-base a { color: var(--ink-3); text-decoration: none; }
.ftr-base a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 47.99rem) { .ftr-base { flex-direction: column; } }

/* =============================================================================
   SECTION SURFACES: page rhythm (Buck, 2026-09-15: "some seem bare from being all dark").
   Each surface re-declares the tokens, so every component inside recolors itself. The sequence per page avoids
   putting the same surface next to itself:
     base (near-black) · raise (charcoal) · midnight (starlight blue, from the photography) ·
     light (cool studio white, sparingly) · oxblood (final call to action on every page)
   ========================================================================== */
.surface-raise {
  --bg: oklch(0.195 0.03 282); --bg-raise: oklch(0.24 0.034 282); --bg-sunk: oklch(0.15 0.026 282);
  background: var(--bg); color: var(--ink);
}
.surface-midnight {
  --bg: oklch(0.2 0.062 278); --bg-raise: oklch(0.25 0.068 278); --bg-sunk: oklch(0.15 0.05 278);
  --line: oklch(0.88 0.05 278 / 0.14); --line-strong: oklch(0.88 0.05 278 / 0.28);
  --ink-2: oklch(0.85 0.03 278); --ink-3: oklch(0.75 0.035 278);
  /* glows sit inside the section, away from its top edge, so they never smear against the seam above */
  background:
    radial-gradient(50% 60% at 12% 40%, oklch(0.36 0.13 300 / 0.35), transparent 72%),
    radial-gradient(40% 50% at 92% 75%, oklch(0.4 0.1 220 / 0.18), transparent 70%),
    var(--bg);
  color: var(--ink);
}
/* a faint hairline where one section meets the next, so every color change reads as intentional */
main > section + section { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07); }
main > section.surface-light + section, main > section + section.surface-light { box-shadow: none; }
.surface-light {
  --bg: oklch(0.965 0.01 285); --bg-raise: oklch(1 0 0); --bg-sunk: oklch(0.935 0.014 285); --bg-tint: oklch(0.95 0.012 285);
  --ink: oklch(0.2 0.035 282); --ink-2: oklch(0.36 0.03 282); --ink-3: oklch(0.47 0.028 282);
  --line: oklch(0.2 0.035 282 / 0.12); --line-strong: oklch(0.2 0.035 282 / 0.26);
  --red-text: oklch(0.5 0.18 20); --fiber: oklch(0.5 0.17 290); --focus: oklch(0.5 0.17 290);
  background: var(--bg); color: var(--ink); color-scheme: light;
}
.surface-light .btn-line:hover { background: oklch(0 0 0 / 0.04); border-color: var(--ink); }
.surface-light .steps li::before { box-shadow: none; }
.surface-light .faq-item summary:hover { color: var(--red-text); }
/* night: the closing call-to-action on every page. Deep blue-black with its own starfield, so it belongs with the
   midnight and dark sections instead of shouting red; the crimson button stays the one warm accent */
.surface-night {
  --bg: oklch(0.13 0.04 278); --bg-raise: oklch(0.18 0.05 278); --bg-sunk: oklch(0.105 0.035 278);
  --line: oklch(0.88 0.05 278 / 0.14); --line-strong: oklch(0.88 0.05 278 / 0.28);
  --ink-2: oklch(0.85 0.03 278); --ink-3: oklch(0.75 0.035 278);
  background:
    radial-gradient(60% 80% at 90% 110%, oklch(0.38 0.14 305 / 0.42), transparent 70%),
    radial-gradient(45% 60% at 6% 15%, oklch(0.32 0.1 225 / 0.3), transparent 70%),
    var(--bg);
  color: var(--ink); border-top: 0;
}

/* two related blocks sharing one section */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; }
.duo-col { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.duo-col > * { width: 100%; }
.duo-col > .link-arrow, .duo-col > .btn { width: auto; }
.duo .specs-stack > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
@media (max-width: 61.99rem) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* heading column with a supporting lead or photo */
.split-head { display: grid; gap: 1.25rem; align-content: start; }
.split-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }



/* starlight "what it is" section: copy beside a real photo of the work */
.what-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.what-copy { display: grid; gap: 1.25rem; }
.what-copy .prose { gap: 0.9em; }
@media (max-width: 61.99rem) { .what-grid { grid-template-columns: minmax(0, 1fr); } }

/* FAQ page: one clean list with search + topic filters beside a sticky help column */
.faqx { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)); padding-bottom: var(--sec); }
.faqx-grid { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faqx-side { display: grid; gap: 1.1rem; align-content: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.faqx-side h1 { font-size: clamp(1.9rem, min(3vw, 5.4svh), 3.1rem); max-width: 14ch; }
.faqx-tools { display: grid; gap: 0.85rem; margin-top: 0.3rem; }
.faqx-search { position: relative; display: block; }
.faqx-search .ic { position: absolute; left: 0.95rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--ink-3); pointer-events: none; }
.faqx-search .input { padding-left: 2.75rem; }
.faqx-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.faqx-cats .chip { min-height: 2.5rem; padding: 0 0.95rem; font-size: 0.85rem; }
.faqx-cats .chip span { margin-left: 0.3rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.faqx-cats .chip[aria-pressed="true"] span { color: inherit; opacity: 0.6; }
.faqx-help { display: grid; gap: 0.85rem; margin-top: 0.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-raise); font-size: 0.95rem; color: var(--ink-2); }
.faqx-help strong { display: block; margin-bottom: 0.15rem; color: var(--ink); }
.faqx-help .btn { --h: 2.75rem; padding: 0 1rem; font-size: 0.875rem; }
.faqx-count { margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--ink-3); }
.faqx .faq-item summary { gap: 1rem; padding-block: clamp(0.6rem, 1.6svh, 0.95rem); }
.faqx-q { flex: 1; }
.faqx-tag { flex: none; padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 2rem; font-size: 0.75rem; font-weight: 500; font-stretch: 100%; color: var(--ink-3); }
.faqx-empty { padding-block: 1.5rem; color: var(--ink-2); }
html:not(.js) .faqx-tools, html:not(.js) .faqx-count { display: none; }
@media (max-width: 61.99rem) { .faqx-grid { grid-template-columns: minmax(0, 1fr); } .faqx-side { position: static; } }
@media (max-width: 36rem) { .faqx-tag { display: none; } }

@media (min-width: 64rem) and (min-height: 36rem) {
  .split-fig img { max-height: 30svh; }
  .what-copy .prose p { font-size: 0.975rem; }
  .what-copy .prose p:first-child { font-size: 1.05rem; }
}


/* =============================================================================
   OFFERS & PRICING (2026-09-17): real packages, add-ons and prices from the shop's pricing sheet.
   Price language is typographic, not badge-y: exact prices in wide tabular numerals, "Starting at" set small in
   front of the number, add-ons always carry their "+". Gold (--fiber) marks what's popular or selected; crimson stays
   reserved for the primary action.
   ========================================================================== */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.45rem; }
.price-pre { font-size: 0.8rem; font-weight: 500; color: var(--ink-3); font-stretch: 100%; white-space: nowrap; }
.price-n { font-stretch: 112%; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; white-space: nowrap; }
.price-lg .price-n { font-size: clamp(1.8rem, 1.35rem + 1.5vw, 2.6rem); font-stretch: 118%; font-weight: 760; line-height: 1.05; }
.price-lg .price-pre { font-size: 0.875rem; }
.amb-name { font-size: 0.95rem; font-weight: 620; font-stretch: 106%; color: var(--ink-2); }
.h-sm { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); }

/* ---------------------------------------------------------------- warranty seal */
.seal {
  display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 4px;
  border: 1px solid color-mix(in oklch, var(--fiber) 38%, transparent); background: color-mix(in oklch, var(--fiber) 7%, transparent);
}
.surface-light .seal { background: var(--bg-raise); }
.seal-ic { width: 1.9rem; height: 1.9rem; color: var(--fiber); flex: none; margin-top: 0.1rem; }
.seal p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
.seal strong { display: block; color: var(--ink); font-stretch: 115%; font-weight: 740; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 0.15rem; }

/* ---------------------------------------------------------------- builder */
.bld { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
.bld-stage { position: relative; min-height: 20rem; overflow: hidden; border-radius: 4px; background: #07060d; border: 1px solid var(--line); }
.bld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bld-front { position: absolute; top: 0.8rem; left: 50%; translate: -50% 0; font-size: 0.72rem; color: oklch(0.72 0.022 275); font-stretch: 108%; white-space: nowrap; }
.bld-readout { position: absolute; left: 1rem; bottom: 0.85rem; font-size: 0.85rem; color: oklch(0.83 0.018 275); font-variant-numeric: tabular-nums; }
.bld-form { display: grid; gap: 1.1rem; align-content: start; }
.bld-set legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.55rem; width: 100%; margin-bottom: 0.6rem; font-weight: 640; font-stretch: 108%; font-size: 0.975rem; }
.bld-step { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); align-self: center; }
.bld-leg-note { font-size: 0.8rem; font-weight: 400; color: var(--ink-3); font-stretch: 100%; }
.bld-opts { display: grid; gap: 0.4rem; }
.bld-shoot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bld-range { position: relative; padding: 0.15rem 0 0; }
.bld-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2.25rem; margin: 0; background: transparent; cursor: pointer;
}
.bld-slider::-webkit-slider-runnable-track {
  height: 0.5rem; border-radius: 4px; border: 1px solid var(--line-strong);
  background: linear-gradient(90deg, color-mix(in oklch, var(--fiber) 55%, transparent), var(--fiber));
}
.bld-slider::-moz-range-track {
  height: 0.5rem; border-radius: 4px; border: 1px solid var(--line-strong);
  background: linear-gradient(90deg, color-mix(in oklch, var(--fiber) 55%, transparent), var(--fiber));
}
.bld-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -0.57rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--fiber); box-shadow: 0 0 18px -4px var(--fiber);
  transition: transform 0.2s var(--ease-out);
}
.bld-slider::-moz-range-thumb {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; border: 2px solid var(--fiber);
  box-shadow: 0 0 18px -4px var(--fiber);
}
.bld-slider:hover::-webkit-slider-thumb, .bld-slider:active::-webkit-slider-thumb { transform: scale(1.08); }
.bld-slider:focus-visible { outline: none; }
.bld-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.bld-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.bld-pop { position: absolute; top: 2.05rem; translate: -50% 0; pointer-events: none; }
.bld-pop::before { content: ""; position: absolute; left: 50%; top: -0.55rem; translate: -50% 0; width: 1px; height: 0.4rem; background: var(--line-strong); }
.bld-pop i { font-style: normal; font-size: 0.68rem; font-weight: 600; color: var(--fiber); white-space: nowrap; }
.bld-scale { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bld-nojs { display: none; font-size: 0.95rem; color: var(--ink-2); }
html:not(.js) .bld-nojs { display: block; }
html:not(.js) .bld-stage, html:not(.js) .bld-set, html:not(.js) .bld-sum { display: none; }
.bld-opt { position: relative; display: grid; }
.bld-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.bld-opt > span {
  position: relative; display: grid; place-content: center; justify-items: center; gap: 0.1rem; min-height: 3.5rem; padding: 0.45rem 0.3rem;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: color-mix(in oklch, var(--bg-sunk) 70%, transparent);
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.35s;
}
.bld-opt b { font-stretch: 115%; font-weight: 700; font-size: 1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bld-opt small { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.bld-opt i { position: absolute; top: -0.5rem; left: 50%; translate: -50% 0; padding: 0 0.35rem; font-style: normal; font-size: 0.62rem; font-weight: 600; line-height: 1rem; color: var(--fiber); background: var(--bg); border-radius: 2px; white-space: nowrap; }
.bld-opt:hover > span { border-color: oklch(1 0 0 / 0.42); }
.bld-opt input:checked + span { border-color: var(--fiber); background: color-mix(in oklch, var(--fiber) 11%, transparent); box-shadow: 0 0 22px -10px var(--fiber); }
.bld-opt input:checked + span small { color: var(--ink-2); }
.bld-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.bld-sum { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in oklch, var(--bg-sunk) 80%, transparent); }
.bld-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bld-line > span:first-child { display: grid; gap: 0.05rem; min-width: 0; }
.bld-line strong { font-weight: 620; font-size: 0.95rem; }
.bld-line small { font-size: 0.8rem; color: var(--ink-3); }
.bld-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.bld-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
.bld-total span { font-size: 0.875rem; color: var(--ink-2); }
.bld-total strong { font-stretch: 118%; font-weight: 760; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bld-hint { display: flex; gap: 0.55rem; margin-top: 0.1rem; font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; }
.bld-hint .ic { width: 0.8rem; height: 0.8rem; margin-top: 0.25rem; color: var(--fiber); }
.bld-hint a { color: var(--ink); font-weight: 600; }
.bld-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.bld-go p { font-size: 0.825rem; color: var(--ink-3); flex: 1; min-width: 12rem; }
@media (max-width: 61.99rem) {
  .bld { grid-template-columns: minmax(0, 1fr); }
  .bld-stage { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 36rem) {
  .bld-stage { aspect-ratio: 4 / 3.2; }
  .bld-shoot { gap: 0.35rem; }
  .bld-slider { height: 2.75rem; }   /* comfortable drag target on touch */
  .bld-opt b { font-size: 0.9rem; }
  .bld-opt small { font-size: 0.72rem; }
  .bld-shoot { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
  .bld-shoot .bld-opt:first-child small { display: none; }
  .bld-go .btn { width: 100%; }
}

/* ---------------------------------------------------------------- starlight package lineup */
.sp-bands { display: grid; gap: clamp(1.75rem, 4svh, 2.75rem); }
.spb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-bottom: 0.7rem; }
.spb-head h3 { display: flex; align-items: baseline; gap: 0.6rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-stretch: 115%; font-weight: 700; }
.spb-range { font-size: 0.8rem; font-weight: 500; font-stretch: 104%; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spb-head p { font-size: 0.925rem; color: var(--ink-2); }
.sp { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sp-item {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.55rem; align-content: start;
  padding: clamp(0.9rem, 1.6vw, 1.35rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease-out);
}
.sp-item:hover { background: oklch(1 0 0 / 0.03); }
.sp-item:has(.sp-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.sp-sky { height: clamp(4.5rem, 9vw, 7rem); border-radius: 2px; background-color: #07060d; background-repeat: no-repeat; background-size: 100% 100%; border: 1px solid oklch(1 0 0 / 0.06); }
.sp-head { font-size: 1rem; line-height: 1; margin-top: 0.35rem; }
.sp-link { text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.sp-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sp-link:focus-visible { outline: none; }
.sp-n { font-stretch: 125%; font-weight: 780; font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.3rem); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sp-unit { font-size: 0.85rem; font-weight: 500; color: var(--ink-3); font-stretch: 106%; }
.sp-desc { color: var(--ink-2); font-size: 0.925rem; line-height: 1.45; }
.sp-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-top: 0.35rem; }
.sp-price { font-stretch: 115%; font-weight: 740; font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); font-variant-numeric: tabular-nums; }
.sp-go { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--ink-3); transition: color 0.25s; }
.sp-go .ic { width: 0.95rem; height: 0.95rem; transition: transform 0.4s var(--ease-out); }
.sp-item:hover .sp-go { color: var(--ink); }
.sp-item:hover .sp-go .ic { transform: translateX(3px); }
.sp-flag { position: absolute; top: clamp(0.9rem, 1.6vw, 1.35rem); right: clamp(0.9rem, 1.6vw, 1.35rem); z-index: 0; margin: 0.45rem 0.5rem 0 0; padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 640; color: oklch(0.2 0.02 80); background: var(--fiber); border-radius: 2px; }
.sp-item.is-pop { background: linear-gradient(to bottom, color-mix(in oklch, var(--fiber) 9%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fiber) 70%, transparent); }
.sp-item.is-pop .sp-sky { box-shadow: 0 0 30px -12px var(--fiber); }
.sp-ask { grid-column: span var(--ask-d, 2); grid-template-rows: auto 1fr auto; background: color-mix(in oklch, var(--fiber) 5%, transparent); }
.sp-ask-h { font-stretch: 115%; font-weight: 720; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.2; }
.sp-ask .sp-desc { max-width: 46ch; }
.sp-ask .link-arrow { font-size: 0.9rem; }
.sp-aside { display: flex; gap: 0.6rem; max-width: 30ch; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.sp-aside .ic { color: var(--fiber); width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; }
.surface-light .sp-flag { color: #fff; }
@media (max-width: 64rem) { .sp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-ask { grid-column: span var(--ask-t, 2); } }
@media (max-width: 36rem) {
  .sp { grid-template-columns: minmax(0, 1fr); }
  .sp-ask { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .sp-item { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto; column-gap: 1rem; row-gap: 0.3rem; }
  .sp-ask { grid-template-rows: auto auto auto; }
  .sp-sky { grid-row: 1 / span 3; height: 100%; min-height: 5.5rem; }
  .sp-head { margin-top: 0; }
  .sp-foot { padding-top: 0; }
  .sp-go { display: none; }
  .sp-flag { top: 0.85rem; right: 0.75rem; margin: 0; }
}

/* ---------------------------------------------------------------- shooting stars + popular add-ons */
.surface-plum {
  --bg: oklch(0.14 0.045 312); --bg-raise: oklch(0.19 0.055 312); --bg-sunk: oklch(0.105 0.04 312);
  --line: oklch(0.88 0.05 315 / 0.14); --line-strong: oklch(0.88 0.05 315 / 0.28);
  --ink-2: oklch(0.85 0.03 315); --ink-3: oklch(0.76 0.035 315);
  background:
    radial-gradient(45% 60% at 20% 30%, oklch(0.4 0.17 345 / 0.3), transparent 72%),
    radial-gradient(45% 55% at 92% 85%, oklch(0.38 0.15 290 / 0.35), transparent 70%),
    var(--bg);
  color: var(--ink);
}
.shoot-grid { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.shoot-vis { position: relative; padding: 0.7rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-sunk); }
.shoot-copy { display: grid; gap: 1.1rem; justify-items: start; }
.shoot-copy > * { max-width: 100%; }
.shoot-ladder { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); }
.shoot-ladder li {
  display: flex; align-items: baseline; gap: 0.5rem; padding-block: clamp(0.5rem, 1.4svh, 0.8rem);
  border-bottom: 1px solid var(--line);
}
.sl-n { font-stretch: 122%; font-weight: 780; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1; color: var(--fiber); font-variant-numeric: tabular-nums; min-width: 2.1ch; }
.sl-l { font-size: 0.9rem; color: var(--ink-2); }
.sl-p { margin-left: auto; font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shoot-note { font-size: 0.875rem; color: var(--ink-3); }

.ao { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ao-item {
  display: grid; grid-template-rows: auto 1fr auto; gap: 0.5rem; align-content: start;
  padding: clamp(1rem, 1.8vw, 1.5rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease-out);
}
.ao-item:hover { background: oklch(1 0 0 / 0.03); }
.ao-name { font-size: 1.05rem; font-stretch: 110%; font-weight: 640; }
.ao-note { color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.ao-price { display: block; padding-top: 0.2rem; }
.ao-price .price-n { font-stretch: 115%; font-weight: 740; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-variant-numeric: tabular-nums; }
@media (max-width: 64rem) { .ao { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 61.99rem) { .shoot-grid { grid-template-columns: minmax(0, 1fr); } .shoot-vis { order: 2; } }
@media (max-width: 36rem) {
  .ao { grid-template-columns: minmax(0, 1fr); }
  .ao-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.3rem; }
  .ao-name, .ao-note { grid-column: 1; }
  .ao-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-top: 0; }
  .shoot-ladder { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- customization */
.cust-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.cust-copy { display: grid; gap: 1.1rem; justify-items: start; }
.cust-copy > * { max-width: 100%; }
.cust-copy .co { width: 100%; }
@media (max-width: 61.99rem) { .cust-grid { grid-template-columns: minmax(0, 1fr); } .cust-grid > figure { order: 2; } }


.co { border-top: 1px solid var(--line); }
.co-row { display: grid; gap: 0.45rem; padding-block: clamp(0.75rem, 1.8vw, 1.05rem); border-bottom: 1px solid var(--line); }
.co-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 1rem; }
.co-top h3 { font-size: 1.05rem; font-stretch: 110%; }
.co-top .price-n { font-size: 1.15rem; }
.co-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.co-tags li { padding: 0.1rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 2rem; font-size: 0.8rem; color: var(--ink-2); }
.co-note { font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; }
.co-opts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.75rem; }
.co-opt { display: inline-flex; align-items: baseline; gap: 0.6rem; font-size: 0.925rem; color: var(--ink-2); }
.co-opt .price-n { font-size: 1.15rem; color: var(--ink); }

.inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; width: 100%; }
.inc-h { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); margin-bottom: 0.45rem; }
.inc-list { list-style: none; display: grid; gap: 0.35rem; }
.inc-list li { display: flex; gap: 0.55rem; font-size: 0.95rem; line-height: 1.45; }
.inc-list .ic { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--fiber); }
@media (max-width: 30rem) { .inc { grid-template-columns: minmax(0, 1fr); } }

.sz { display: grid; gap: 0.1rem; }
@media (max-width: 61.99rem) { .suede-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- ambient offers */
.amb-offer { display: grid; gap: 0.1rem; }
.amb-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.3rem; }
.amb-alt { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-block: 0.35rem; }
.amb-alt:hover { color: var(--ink); border-color: var(--ink); }
.amb-alt .ic { width: 0.95rem; height: 0.95rem; }

.apk-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center; }
.apk-card { display: grid; gap: 1.1rem; justify-items: start; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: 4px; background: var(--bg-sunk); }
.apk-card h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.apk-go { display: grid; gap: 0.5rem; }
.apk-go p { font-size: 0.825rem; color: var(--ink-3); }
@media (max-width: 61.99rem) { .apk-grid { grid-template-columns: minmax(0, 1fr); } }

.sun-grid { display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.sun-copy { display: grid; gap: 1.1rem; justify-items: start; }
.sun-offer { display: grid; gap: 0.1rem; }
@media (max-width: 61.99rem) { .sun-grid { grid-template-columns: minmax(0, 1fr); } .sun-grid > figure { order: 2; } }


.aof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 2vw, 1.5rem); }
.aof-item { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg-sunk); }
.aof-fig img { width: 100%; height: clamp(10rem, 20vw, 16rem); object-fit: cover; }
.aof-body { display: grid; gap: 0.9rem; align-content: start; justify-items: start; padding: clamp(1rem, 2vw, 1.5rem); }
.aof-top { display: grid; gap: 0.2rem; }
.aof-top h3 { font-size: 1.1rem; font-stretch: 110%; }
.aof-desc { color: var(--ink-2); }
@media (max-width: 61.99rem) { .aof { grid-template-columns: minmax(0, 1fr); } }

.jump { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.jump .chip { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); background: oklch(0.1 0.02 280 / 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.specs-tight > div { padding-block: 0.8rem; }

/* ---------------------------------------------------------------- quote form: services, details, summary */
/* Category tabs. Collapsed, the whole picker is three rows; open, one category of tiles at a time.
   Native <details> so it still opens without JS and the count chip is the only scripted part. */
.svc-accs { display: grid; gap: 0.4rem; margin-top: 0.45rem; }
.svc-acc { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-sunk); overflow: hidden; }
.svc-acc[open] { border-color: oklch(1 0 0 / 0.3); }
.svc-sum { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; transition: background-color 0.2s; }
.svc-sum::-webkit-details-marker { display: none; }
.svc-sum:hover { background: oklch(1 0 0 / 0.03); }
.svc-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.svc-sum-txt { display: grid; gap: 0.05rem; margin-right: auto; min-width: 0; }
.svc-sum-t { font-size: 0.95rem; font-weight: 620; font-stretch: 106%; color: var(--ink); }
.svc-sum-d { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }
/* the plain item count, swapped for the ticked count once something is chosen */
.svc-sum-c { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.svc-acc:has([data-acc-count]:not([hidden])) .svc-sum-c { display: none; }
/* solid only while the tab is shut, where it is the only sign a choice was made; quiet once the ticks show */
.svc-sum-n { flex: none; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--fiber); color: var(--bg); font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums; transition: background-color 0.2s, color 0.2s; }
.svc-acc[open] .svc-sum-n { background: none; color: var(--fiber); padding-inline: 0; font-weight: 550; }
.svc-sum-ic { width: 1.05rem; height: 1.05rem; color: var(--ink-3); flex: none; transition: transform 0.25s var(--ease-out); }
.svc-acc[open] .svc-sum-ic { transform: rotate(180deg); }
.svc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0.45rem; margin-top: 0; padding: 0 0.7rem 0.7rem; }
@media (min-width: 52rem) { .svc-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .svc-accs { interpolate-size: allow-keywords; }
  .svc-acc::details-content { height: 0; overflow: clip; transition: height 0.32s var(--ease-out), content-visibility 0.32s allow-discrete; }
  .svc-acc[open]::details-content { height: auto; }
}
.svc-card { min-height: 3.6rem; padding: 0.55rem 2.3rem 0.55rem 0.9rem; }
.svc-card strong { font-size: 0.9rem; line-height: 1.3; }
.svc-card small { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.lbl .opt { font-size: 0.85rem; margin-left: 0.3rem; }
@media (max-width: 30rem) { .svc-opts { grid-template-columns: minmax(0, 1fr); } }
.qunsure { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; min-height: 2.75rem; font-size: 0.9rem; color: var(--ink-2); cursor: pointer; }
.qunsure input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qunsure-box { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--bg-sunk); transition: border-color 0.2s, background-color 0.2s; }
.qunsure-box .ic { width: 0.85rem; height: 0.85rem; opacity: 0; color: var(--bg); transition: opacity 0.2s; }
.qunsure input:checked + .qunsure-box { background: var(--fiber); border-color: var(--fiber); }
.qunsure input:checked + .qunsure-box .ic { opacity: 1; }
.qunsure input:focus-visible + .qunsure-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.qunsure:hover { color: var(--ink); }
.qdetails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.qdetails:not(:has(> :not([hidden]))) { display: none; }
.qdetails .field { animation: rise 0.45s var(--ease-expo) both; }
.qnote { grid-column: 1 / -1; display: flex; gap: 0.55rem; font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; }
.qnote .ic { width: 0.8rem; height: 0.8rem; margin-top: 0.25rem; color: var(--fiber); flex: none; }
@media (max-width: 36rem) { .qdetails { grid-template-columns: minmax(0, 1fr); } }
.qsum, .qdone-recap { display: grid; gap: 0.4rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-sunk); }
.qdone-recap { width: 100%; }
.qsum-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--ink-3); }
.qsum-edit { background: none; border: 0; padding: 0.2rem 0; color: var(--ink-2); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 0.2em; }
.qsum-edit:hover { color: var(--ink); }
.qsum-car { font-weight: 640; font-stretch: 106%; }
.qsum-list { list-style: none; display: grid; gap: 0.2rem; }
.qsum-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--ink); }
.qsum-list li span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qsum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.45rem; margin-top: 0.15rem; border-top: 1px solid var(--line); }
.qsum-total span { font-size: 0.85rem; color: var(--ink-2); }
.qsum-total strong { font-stretch: 116%; font-weight: 740; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.qsum-note { font-size: 0.8rem; color: var(--ink-3); }
/* popular add-ons inside the quote form: compact ticks, price kept on the right */
.aoboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.4rem; }
.aobox { position: relative; display: grid; }
.aobox input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.aobox-in { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-sunk); font-size: 0.9rem; transition: border-color 0.2s, background-color 0.2s; }
.aobox-tick { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; flex: none; border: 1px solid var(--line-strong); border-radius: 3px; }
.aobox-tick .ic { width: 0.7rem; height: 0.7rem; opacity: 0; transition: opacity 0.2s; }
.aobox-t { min-width: 0; }
.aobox-p { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aobox:hover .aobox-in { border-color: oklch(1 0 0 / 0.38); }
.aobox input:checked + .aobox-in { border-color: var(--fiber); background: oklch(0.86 0.1 205 / 0.07); }
.aobox input:checked + .aobox-in .aobox-tick { border-color: var(--fiber); background: var(--fiber); color: #0b0a16; }
.aobox input:checked + .aobox-in .ic { opacity: 1; }
.aobox input:focus-visible + .aobox-in { outline: 2px solid var(--focus); outline-offset: 2px; }
.qdone-next { list-style: none; display: grid; width: 100%; border-top: 1px solid var(--line); }
.qdone-next li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.qdone-next strong { font-weight: 640; font-stretch: 108%; color: var(--fiber); }
.qdone-next span { color: var(--ink-2); }
.book-war { display: flex; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.book-war .ic { width: 1.25rem; height: 1.25rem; color: var(--fiber); flex: none; }

/* =============================================================================
   REAL WORK MEDIA (2026-09-17): the shop's photos and clips. Every figure crops with object-fit: cover from a source
   that is already cut to the placement's shape (see config.PHOTOS), so nothing important gets trimmed by CSS.
   ========================================================================== */
.pfig { margin: 0; display: grid; gap: 0.6rem; }
.pfig img { width: 100%; height: auto; object-fit: cover; border-radius: 3px; background: var(--bg-sunk); }
.pfig figcaption, .vid figcaption, .shoot-vis figcaption { font-size: 0.8rem; color: var(--ink-3); line-height: 1.45; }
.cust-fig img, .what-fig img { aspect-ratio: 4 / 3; }
.craft-fig img, .split-fig img { aspect-ratio: 3 / 2; }
.sun-fig img { aspect-ratio: 3 / 4; }
.shoot-vis { margin: 0; display: grid; gap: 0.6rem; }
.shoot-vis img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 80px -40px oklch(0.55 0.2 330 / 0.7); }
.aof-fig { margin: 0; }
.aof-fig img { width: 100%; height: clamp(10rem, 20vw, 16rem); object-fit: cover; }
.hero-fig img { box-shadow: 0 40px 120px -50px oklch(0.55 0.2 300 / 0.75); }

/* looping clips: portrait phone footage in a quiet frame */
.vid { margin: 0; display: grid; gap: 0.6rem; justify-items: center; }
.vid-frame { position: relative; width: 100%; max-width: min(24rem, 100%); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: #07060d; border: 1px solid var(--line); box-shadow: 0 30px 90px -45px oklch(0.6 0.2 300 / 0.8); }
.vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid figcaption { text-align: center; max-width: min(24rem, 100%); }
.vid-toggle { position: absolute; right: 0.7rem; bottom: 0.7rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid oklch(1 0 0 / 0.25); background: oklch(0.1 0.02 280 / 0.6); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.25s; }
.vid-toggle:hover { background: oklch(0.1 0.02 280 / 0.85); }
.vid-toggle .ic { width: 1.1rem; height: 1.1rem; }
.vid-toggle .ic-play, .vid-toggle[aria-pressed="true"] .ic-pause { display: none; }
.vid-toggle[aria-pressed="true"] .ic-play { display: block; }
.apk-lead { color: var(--ink-2); max-width: 52ch; }
/* clip sections put the portrait video in the narrower column (desktop only; they stack on phones) */
@media (min-width: 62rem) {
  .apk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.motion-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: center; }
.motion-copy { display: grid; gap: 1.1rem; justify-items: start; }
@media (max-width: 61.99rem) { .motion-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .motion-copy { grid-column: 1 / -1; } }
@media (max-width: 36rem) { .motion-grid { grid-template-columns: minmax(0, 1fr); } }

/* service areas */
.cta-areas { font-size: 0.9rem; color: var(--ink-3); }
.cta-areas a, .book-area a, .ftr-base a[href$="-ga/"] { color: var(--ink-2); }
.svl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.svl-head { display: grid; gap: 1.1rem; }
.svl { list-style: none; border-top: 1px solid var(--line); }
.svl a { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2rem; grid-template-areas: "name price ic" "desc price ic"; column-gap: 1.25rem; align-items: center; padding-block: clamp(0.6rem, 1.6svh, 0.95rem); border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color 0.3s; }
.svl a:hover { background: oklch(1 0 0 / 0.03); }
.svl-name { grid-area: name; font-weight: 640; font-stretch: 108%; }
.svl-desc { grid-area: desc; font-size: 0.85rem; color: var(--ink-3); }
.svl-price { grid-area: price; font-stretch: 110%; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.svl .ic { grid-area: ic; width: 1rem; height: 1rem; color: var(--ink-3); transition: transform 0.35s var(--ease-out), color 0.25s; }
.svl a:hover .ic { transform: translateX(3px); color: var(--fiber); }
@media (max-width: 61.99rem) { .svl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .svl a { grid-template-columns: minmax(0, 1fr) 1rem; grid-template-areas: "name ic" "desc ic" "price ic"; } .svl-price { text-align: left; font-size: 0.95rem; } }

/* 404 */
.nf-logo { width: min(22rem, 70vw); height: auto; }
.nf-code { font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* hero: a quiet ultraviolet/ice glow behind the copy (not on the photo) */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(40% 50% at 18% 45%, oklch(0.4 0.16 300 / 0.28), transparent 70%), radial-gradient(35% 45% at 80% 90%, oklch(0.45 0.12 215 / 0.14), transparent 70%); }
.btn-red { box-shadow: 0 10px 30px -14px oklch(0.55 0.19 288 / 0.9); }

/* =============================================================================
   ONE SCREEN PER SECTION (Buck, 2026-09-15)
   On laptop/desktop viewports every section is sized to roughly one viewport: the section is min-height 100svh and
   centers its content, and the tall things inside it (hero type, images, slider, designer, gallery rows) are sized
   from viewport HEIGHT (svh) so they fit instead of pushing the section past one screen.
   Excluded on purpose: the gallery grid, the 14-package starlight lineup and privacy text (long by nature) and the
   short title bands above them.
   ========================================================================== */

@media (min-width: 64rem) and (min-height: 36rem) {
  :root {
    --fit-top: calc(var(--header-h) + clamp(0.75rem, 2.5svh, 2rem));
    --fit-bot: clamp(1.25rem, 3.5svh, 2.75rem);
  }
  main > section:not(.gal-hero):not(.sec-gal):not(.sec-faqpage):not(.sec-legal):not(.sec-amb):not(.sec-sp):not(.sec-fshort) {
    min-height: 100svh;
    padding-block: var(--fit-top) var(--fit-bot);
    display: flex; flex-direction: column; justify-content: center;
  }
  h2 { font-size: clamp(1.75rem, min(3.3vw, 5.8svh), 3.3rem); }
  .lead { font-size: clamp(1rem, min(1.15vw, 2.1svh), 1.15rem); line-height: 1.6; }
  .sec-head { margin-bottom: clamp(1.1rem, 3.2svh, 2.25rem); }
  .sec-head .lead { margin-top: 0.7rem; }

  /* home hero: wordmark, type and photo all scale with viewport height */
  .hero { justify-content: center; }
  .hero-copy { padding-top: 0; }
  .hero h1 { gap: 0.9rem; }
  .h1-main { font-size: clamp(2.2rem, min(4.1vw, 6.9svh), 4.7rem); }
  .hero-sub { margin-top: 1rem; font-size: clamp(0.975rem, 1.9svh, 1.125rem); line-height: 1.6; }
  .hero .actions { margin-top: 1.4rem; }
  .hero-proof { margin-top: 1.4rem; padding-top: 0.9rem; gap: 0.4rem 1.6rem; }
  .hero-fig img { height: calc(100svh - var(--fit-top) - var(--fit-bot)); max-height: 46rem; }


  /* ambient split (image layer + copy layer share one grid cell) */
  .sec-amb { grid-template-rows: minmax(100svh, auto); }
  .amb-media { min-height: 0; }
  .amb-grid { padding-block: var(--fit-top) var(--fit-bot); }
  .amb-copy { gap: 0.9rem; }
  .zones { margin-top: 0.25rem; }
  .zones li { grid-template-columns: 9rem minmax(0, 1fr); padding-block: clamp(0.45rem, 1.3svh, 0.7rem); }
  .zones h3, .zones p { font-size: 0.9rem; }

  /* before / after */

  /* custom band + CTA */
  .cta-in { padding-block: 0; }
  .cta-copy h2 { font-size: clamp(2rem, min(3.7vw, 6.4svh), 3.7rem); }
  .quick { gap: 0.9rem; }

  /* home/city gallery rows: four 3:4 tiles, capped so the row plus its heading stay within one screen */
  .gal-home { width: min(100%, calc((100svh - var(--fit-top) - var(--fit-bot) - 9rem) * 3)); margin-inline: auto; }


  /* process, flow, spec lists, craft */
  .steps li { padding-top: 1.2rem; gap: 0.45rem; }
  .step-n { font-size: clamp(1.9rem, 4.4svh, 3rem); margin-bottom: 0.2rem; }
  .flow li { padding-block: clamp(0.9rem, 2.5svh, 1.6rem); }
  .specs > div { padding-block: clamp(0.8rem, 2.1svh, 1.35rem); }
  .specs dt { font-size: 1rem; margin-bottom: 0.35rem; }
  .specs dd { font-size: 0.925rem; }
  .craft-grid { align-items: center; }
  .craft-side { position: static; gap: 1.25rem; }
  .craft-fig img { aspect-ratio: 16 / 10; max-height: 32svh; }
  .craft-list > div { padding-block: clamp(0.7rem, 1.9svh, 1.2rem); }
  .craft-list dt { font-size: 1rem; }
  .craft-list dd { font-size: 0.95rem; }

  /* FAQ lists */
  .faq-item summary { padding-block: clamp(0.65rem, 1.8svh, 1.05rem); font-size: 1rem; }
  .faq-a { padding-bottom: 1rem; }
  .faq-grid > div:first-child { position: static; }

  /* inner-page heroes */
  .phero { align-items: stretch; justify-content: flex-end; }
  .phero h1 { font-size: clamp(2rem, min(3.9vw, 6.8svh), 4.3rem); }
  .phero-split { display: flex; justify-content: center; }
  .phero-split-in { align-items: center; }
  .phero-fig img { height: calc(100svh - var(--fit-top) - var(--fit-bot)); max-height: 42rem; }

  /* ambient zone tabs */

  /* compact title bands on gallery / FAQ / privacy */
  .gal-hero { padding-top: calc(var(--header-h) + clamp(1.25rem, 4svh, 2.5rem)); padding-bottom: clamp(0.5rem, 1.5svh, 1rem); }
  .gal-hero h1 { font-size: clamp(1.9rem, min(3.1vw, 5.4svh), 3.3rem); max-width: 24ch; }
  .sec-gal, .sec-faqpage { padding-top: clamp(0.75rem, 2svh, 1.5rem); padding-bottom: clamp(2rem, 6svh, 4rem); }
  .chips { margin-bottom: 0.9rem; }

  /* quote page */
  .book-side { gap: 1.1rem; }
  .book-side h1 { font-size: clamp(2rem, min(3.5vw, 6svh), 3.5rem); }
  .next li { padding-block: 0.65rem; }
  .qform { gap: 1.2rem; }
  .qstep { gap: 1rem; }
  .svc-card { min-height: 3.9rem; padding-block: 0.6rem; }

}
/* offers: tall visuals sized from viewport height so each offer section stays one screen */
@media (min-width: 64rem) and (min-height: 36rem) {
  .bld-stage { min-height: clamp(18rem, calc(100svh - var(--fit-top) - var(--fit-bot) - 9.5rem), 34rem); }
  .sp-sky { height: clamp(3.5rem, 13svh, 7rem); }
  .sp-item { padding: clamp(0.7rem, 1.9svh, 1.35rem) clamp(0.8rem, 1.4vw, 1.35rem); gap: clamp(0.3rem, 0.9svh, 0.55rem); }
  .aof-fig img { height: clamp(8rem, 24svh, 16rem); }
  .faqx .faq-item summary { padding-block: clamp(0.5rem, 1.9svh, 1.25rem); font-size: 1rem; }
  /* add-on cards carry their own height so the row sits in a full-screen section without floating */
  .ao-item { min-height: clamp(9rem, 28svh, 17rem); }
  .sec-sp .sp-sky { height: clamp(3.75rem, 7svh, 5.5rem); }
  .sec-sp .sp-item { padding-block: clamp(0.7rem, 1.5svh, 1.1rem); gap: 0.4rem; }
  .sec-sp .sp-bands { gap: clamp(1.25rem, 3svh, 2rem); }
  .shoot-ladder li { padding-block: clamp(0.55rem, 1.7svh, 0.95rem); }
  .faqx-count { margin-bottom: 0.25rem; }
  .svc-card { min-height: 3rem; padding-block: 0.4rem; }
  /* quote page: hours + areas already sit in the footer; the form column gets tighter padding */
  .book-contact .ftr-hours, .book-contact .book-area { display: none; }
  .book-main { padding: clamp(1.1rem, 2.6svh, 2rem) clamp(1.25rem, 2.5vw, 2.25rem); }
  .qform { gap: clamp(0.7rem, 1.6svh, 1.1rem); }
  .qstep { gap: clamp(0.7rem, 1.5svh, 1rem); }
  .svc-opts { gap: 0.35rem; padding-bottom: 0.55rem; }
  .svc-accs { gap: 0.3rem; }
  .svc-sum { padding-block: 0.55rem; }
  .qunsure { margin-top: 0.3rem; min-height: 2.5rem; }
  .qprog { gap: 0.45rem; }
}
@media (min-width: 64rem) and (min-height: 36rem) {
  .vid-frame { width: auto; height: clamp(18rem, calc(100svh - var(--fit-top) - var(--fit-bot) - 3rem), 44rem); max-width: none; }
  .shoot-vis img { aspect-ratio: auto; height: clamp(18rem, calc(100svh - var(--fit-top) - var(--fit-bot) - 3rem), 44rem); width: auto; max-width: 100%; margin-inline: auto; }
  .sun-fig img { aspect-ratio: auto; height: clamp(18rem, calc(100svh - var(--fit-top) - var(--fit-bot) - 3rem), 44rem); width: auto; max-width: 100%; margin-inline: auto; }
  .what-fig img, .cust-fig img { max-height: calc(100svh - var(--fit-top) - var(--fit-bot) - 3rem); }
  .motion-grid .vid-frame { height: clamp(16rem, calc(100svh - var(--fit-top) - var(--fit-bot) - 3.5rem), 40rem); }
}
/* short laptop screens (≤ ~830px tall): tighten the quote page so it still lands in one screen */
@media (min-width: 64rem) and (min-height: 36rem) and (max-height: 52rem) {
  .book-side { gap: 0.75rem; }
  .next { margin-top: 0; }
  .next li { padding-block: 0.45rem; }
  .qform { gap: 0.9rem; }
  .qstep { gap: 0.8rem; }
  .svc-card { min-height: 3.5rem; }
}

/* ---------------------------------------------------------------- narrow type safety */
@media (max-width: 26rem) {
  h1, h2, .sp-n, .sl-n { font-stretch: 112%; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   ROUND 10 (2026-09-20): services architecture, exterior service pages,
   comparison slider. Same rules as the rest of the sheet: ruled rows over card
   grids, one accent, hairlines instead of borders, every color from a token so
   a component recolors itself on any surface.
   ========================================================================== */

/* ---------------------------------------------------------------- services mega menu */
.nav-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0.6rem 0;
  font-size: 0.9rem; color: var(--ink-2); position: relative; transition: color 0.25s;
}
.nav-btn::after {
  content: ""; position: absolute; left: 0; right: 1.1rem; bottom: 0.3rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out);
}
.nav-btn:hover, .nav-btn[aria-expanded="true"], .nav-btn[data-in-section] { color: var(--ink); }
.nav-btn:hover::after, .nav-btn[aria-expanded="true"]::after, .nav-btn[data-in-section]::after { transform: scaleX(1); }
.ic-chev { width: 0.85rem; height: 0.85rem; transition: transform 0.3s var(--ease-out); }
.nav-btn[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }

/* Compact dropdown anchored under the Services button (the T Square pattern), not a full-bleed
   panel. Names only: a blurb and a price on every row turned the menu into a wall of text. */
.nav-svc { position: relative; display: inline-flex; align-items: center; }
.mega {
  position: absolute; top: calc(100% + 0.75rem); left: 0; z-index: var(--z-header);
  width: max-content; min-width: 30rem;
  background: oklch(0.115 0.022 280 / 0.985);
  border: 1px solid var(--line); border-top: 2px solid var(--red);
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: megaIn 0.2s var(--ease-out) both;
}
.mega[hidden] { display: none; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }
/* the panel hangs off the first nav item, so on narrower desktops it anchors right instead */
@media (max-width: 88rem) { .mega { left: auto; right: 0; } }

.mg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; padding: 1.15rem 1.4rem 0.9rem; }
.mg-col { display: flex; flex-direction: column; }
.mg-cat {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  font-stretch: 112%; color: var(--ink-3); padding-bottom: 0.5rem; margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--line);
}
.mg-cat-2 { margin-top: 1.1rem; }
.mg-item {
  display: block; padding: 0.55rem 0.5rem 0.55rem 0; font-size: 0.9rem; line-height: 1.3;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid oklch(0.9 0.03 280 / 0.05);
  transition: color 0.18s, transform 0.2s var(--ease-out);
}
.mg-col > .mg-item:last-child { border-bottom: 0; }
.mg-item:hover, .mg-item:focus-visible { color: var(--fiber); transform: translateX(5px); }
.mg-foot {
  display: flex; gap: 1.5rem; padding: 0.75rem 1.4rem; border-top: 1px solid var(--line);
  background: oklch(1 0 0 / 0.025);
}
.mg-foot a {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem;
  color: var(--ink-3); text-decoration: none; transition: color 0.18s;
}
.mg-foot a .ic { width: 0.85rem; height: 0.85rem; transition: transform 0.25s var(--ease-out); }
.mg-foot a:hover { color: var(--ink); }
.mg-foot a:hover .ic { transform: translateX(3px); }
@media (max-width: 70rem) { .mega, .nav-svc { display: none; } }

/* mobile drawer, grouped the same way */
.dw-cat {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-stretch: 112%;
  color: var(--ink-3); margin-top: 1.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.dw-cat:first-child { margin-top: 0; }
.dw-list { display: grid; }
.dw-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 1rem;
}
.dw-list a span { font-size: 0.78rem; color: var(--fiber); flex: none; }
.dw-plain a { font-size: 0.95rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- footer sitemap columns */
.ftr-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem); }
.ftr-col { display: grid; gap: 0.3rem; align-content: start; }
.ftr-col a { font-size: 0.83rem; color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
.ftr-col a:hover { color: var(--ink); text-decoration: underline; }
.ftr-cat {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-stretch: 112%;
  color: var(--ink-2); margin-bottom: 0.35rem;
}
@media (max-width: 52rem) { .ftr-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- small shared bits */
.eyebrow {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; font-stretch: 112%;
  color: var(--fiber); margin-bottom: 0.9rem;
}
.price.is-tbd { color: var(--ink-3); }
.price.is-tbd .price-n { font-variant-numeric: normal; opacity: 0.85; }
.qnote {
  display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 1.25rem;
  font-size: 0.85rem; color: var(--ink-3); line-height: 1.55; max-width: 62ch;
}
.qnote .ic { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.22rem; color: var(--fiber); }
.tick { list-style: none; display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.tick li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; color: var(--ink-2); }
.tick .ic { flex: none; width: 1rem; height: 1rem; color: var(--fiber); }
.col-cat {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-stretch: 112%;
  color: var(--ink-3); padding-bottom: 0.75rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--line-strong);
}
.two-col { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ug-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.ug-copy { display: grid; gap: 1.1rem; align-content: start; }
.pair-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.law-grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.lwk-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.lwk-copy { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.lwk-price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.lwk-note { font-size: 0.88rem; color: var(--ink-3); max-width: 46ch; }
@media (max-width: 61.99rem) {
  .two-col, .ug-grid, .pair-grid, .law-grid, .lwk-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- typographic hero (services with no photo yet) */
.phero-type { position: relative; overflow: clip; }
.phero-type-in { display: grid; gap: 1.4rem; justify-items: start; max-width: 62rem; position: relative; z-index: 1; }
.phero-type h1 { max-width: 24ch; text-wrap: balance; }
.phero-note {
  font-size: 0.82rem; color: var(--ink-3); display: flex; gap: 0.5rem; align-items: baseline;
  padding-top: 1rem; border-top: 1px solid var(--line); width: 100%; max-width: 52ch;
}

/* ---------------------------------------------------------------- ruled option rows
   Scoped to .opts: the bare `.opt` class is also the inline "(optional)" hint inside form
   labels, and this block used to win over it and turn that hint into a ruled grid row. */
.opts { display: grid; }
.opts .opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: center;
  padding-block: clamp(0.85rem, 2svh, 1.15rem); border-bottom: 1px solid var(--line);
}
.opts .opt:first-child { border-top: 1px solid var(--line-strong); }
.opt-n { font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.opt-d { font-size: 0.86rem; color: var(--ink-3); line-height: 1.5; max-width: 54ch; }
.opt-d:empty { display: none; }
.opt-p { display: grid; justify-items: end; gap: 0.2rem; text-align: right; }
.opt-go {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--ink-3);
  text-decoration: none; opacity: 0; transition: opacity 0.25s, color 0.2s;
}
.opt-go .ic { width: 0.85rem; height: 0.85rem; }
.opts .opt:hover .opt-go, .opt-go:focus-visible { opacity: 1; color: var(--fiber); }
.opts-tight .opt { padding-block: clamp(0.6rem, 1.5svh, 0.85rem); }
@media (hover: none) { .opt-go { opacity: 1; } }

/* ---------------------------------------------------------------- "before you book" grid */
.kn-wrap { margin-top: 1.5rem; }
.kn-h {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-stretch: 112%;
  color: var(--ink-3); margin-bottom: 1rem;
}
.kn-h:empty { display: none; }
.kn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem clamp(1.5rem, 3vw, 2.5rem); }
.kn { display: grid; gap: 0.25rem; padding-top: 0.8rem; border-top: 1px solid var(--line); align-content: start; }
.kn-t { font-weight: 600; font-size: 0.92rem; }
.kn-d { font-size: 0.85rem; color: var(--ink-3); line-height: 1.55; }

/* ---------------------------------------------------------------- numbered steps */
/* named .pstep, not .steps: an older four-column step component already owns that class and its
   li::before markers were bleeding into this list */
.pstep { list-style: none; display: grid; gap: 0; }
.pstep li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 1.25rem; padding-block: clamp(0.9rem, 2.2svh, 1.3rem); border-bottom: 1px solid var(--line); }
.pstep li:first-child { border-top: 1px solid var(--line-strong); }
.st-n { font-size: 0.85rem; font-weight: 600; font-stretch: 112%; color: var(--fiber); letter-spacing: 0.06em; }
.st-t { font-weight: 600; font-size: 1.02rem; margin-bottom: 0.15rem; }
.st-d { font-size: 0.89rem; color: var(--ink-3); line-height: 1.6; max-width: 62ch; }
@media (min-width: 62rem) { .pstep-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5rem); }
  .pstep-4 li:nth-child(2) { border-top: 1px solid var(--line-strong); } }

/* ---------------------------------------------------------------- service cards */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.sc {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; border: 1px solid var(--line);
  background: var(--bg-sunk); transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.sc:hover, .sc:focus-visible { border-color: var(--line-strong); transform: translateY(-3px); }
.sc-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-raise); }
.sc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.sc:hover .sc-img img { transform: scale(1.04); }
.sc-void {
  aspect-ratio: 4 / 3; position: relative;
  background:
    radial-gradient(60% 80% at 25% 20%, oklch(0.45 0.16 300 / 0.35), transparent 70%),
    radial-gradient(50% 70% at 85% 90%, oklch(0.5 0.12 215 / 0.22), transparent 70%),
    var(--bg-sunk);
}
.sc-void::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, oklch(1 0 0 / 0.5) 0.6px, transparent 0.7px);
  background-size: 26px 26px; opacity: 0.35;
}
.sc-b { display: grid; gap: 0.4rem; align-content: start; padding: clamp(1rem, 2vw, 1.35rem); }
.sc-n { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.sc-d { font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; }
.sc-p { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.8rem; color: var(--fiber); }
.sc-ar { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease-out); }
.sc:hover .sc-ar { transform: translateX(3px); }

/* ---------------------------------------------------------------- related services */
.rel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.rel {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; border: 1px solid var(--line);
  background: var(--bg-sunk); transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.rel:hover, .rel:focus-visible { border-color: var(--line-strong); transform: translateY(-3px); }
.rel-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-raise); }
.rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.rel:hover .rel-img img { transform: scale(1.04); }
.rel-void {
  aspect-ratio: 4 / 3; position: relative;
  background:
    radial-gradient(60% 80% at 25% 20%, oklch(0.45 0.16 300 / 0.32), transparent 70%),
    radial-gradient(50% 70% at 85% 90%, oklch(0.5 0.12 215 / 0.2), transparent 70%),
    var(--bg-sunk);
}
.rel-void::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, oklch(1 0 0 / 0.5) 0.6px, transparent 0.7px);
  background-size: 26px 26px; opacity: 0.3;
}
.rel-t { display: grid; gap: 0.35rem; align-content: start; padding: clamp(1rem, 2vw, 1.35rem); }
.rel-n { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.rel-b { font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; }
.rel-p { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-size: 0.8rem; color: var(--fiber); }
.rel:hover .rel-p .sc-ar { transform: translateX(3px); }
@media (max-width: 61.99rem) { .rel-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- comparison slider */
.cmp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.cmp-copy { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.cmp-cap { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.82rem; color: var(--ink-3); max-width: 46ch; }
.cmp-cap .ic { flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--fiber); }
.cmp { display: grid; gap: 0.7rem; margin: 0; }

.cmp-stage {
  position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--bg-sunk);
  aspect-ratio: var(--cmp-ar, 9 / 11); isolation: isolate;
  /* a horizontal drag belongs to the slider; a vertical one still scrolls the page */
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none; user-select: none;
}
.cmp-img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
/* Both layers are the SAME full-size box; only the clip changes. No width arithmetic, so the two
   halves are pixel-aligned at every position (the old percentage scaling drifted by hundreds of px). */
.cmp-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--cmp, 50%)) 0 0);
}
.cmp-line {
  position: absolute; top: 0; bottom: 0; left: var(--cmp, 50%); width: 2px; z-index: 4;
  background: oklch(1 0 0 / 0.92); transform: translateX(-1px); pointer-events: none;
  box-shadow: 0 0 14px oklch(0 0 0 / 0.55);
}
/* ease into place for keyboard steps and the initial paint, but never while dragging */
.cmp-clip, .cmp-line, .cmp-knob { transition: clip-path 0.16s var(--ease-out), left 0.16s var(--ease-out); }
.cmp-stage.is-dragging .cmp-clip, .cmp-stage.is-dragging .cmp-line, .cmp-stage.is-dragging .cmp-knob { transition: none; }
@media (prefers-reduced-motion: reduce) { .cmp-clip, .cmp-line, .cmp-knob { transition: none; } }

.cmp-tag {
  position: absolute; top: 0.85rem; z-index: 3; padding: 0.3rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: #fff; pointer-events: none;
  background: oklch(0.12 0.02 280 / 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.2s var(--ease-out);
}
.cmp-tag-a { left: 0.85rem; }
.cmp-tag-b { right: 0.85rem; }

/* the knob rides the divider but stays fully inside the frame at 0% and 100%, where a handle
   sliced in half by the edge just looks broken */
.cmp-knob {
  position: absolute; top: 50%; z-index: 4; pointer-events: none;
  left: clamp(1.5rem, var(--cmp, 50%), calc(100% - 1.5rem));
  translate: -50% -50%; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: 50%; color: oklch(0.14 0.02 280);
  background: oklch(1 0 0 / 0.94); box-shadow: 0 4px 18px oklch(0 0 0 / 0.5);
  transition: scale 0.2s var(--ease-out);
}
.cmp-knob .ic { width: 1.3rem; height: 1.3rem; stroke-width: 2; }
.cmp-stage:hover .cmp-knob { scale: 1.07; }
.cmp-stage.is-dragging .cmp-knob { scale: 0.96; }

/* the input is keyboard/AT only: it must not compete with the pointer handling above */
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  appearance: none; -webkit-appearance: none; background: none; pointer-events: none; }
/* ...so the focus ring goes on the stage, and the knob answers keyboard focus too
   (the old rule pointed at a preceding sibling and could never match) */
.cmp-stage:has(.cmp-range:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
/* a tap focuses the input so the keyboard can carry on, but it should not draw a ring; the first
   key press clears this and the ring comes back */
.cmp-stage.no-ring:has(.cmp-range:focus-visible) { outline: none; }
.cmp-stage.no-ring:has(.cmp-range:focus-visible) .cmp-knob { box-shadow: 0 4px 18px oklch(0 0 0 / 0.5); }
.cmp-stage:has(.cmp-range:focus-visible) .cmp-knob { scale: 1.07; box-shadow: 0 0 0 4px oklch(0.86 0.1 205 / 0.35), 0 4px 18px oklch(0 0 0 / 0.5); }

.cmp-fc { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 61.99rem) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
  .cmp-tag { top: 0.6rem; padding: 0.22rem 0.45rem; font-size: 0.6rem; letter-spacing: 0.08em; }
  .cmp-tag-a { left: 0.6rem; } .cmp-tag-b { right: 0.6rem; }
  .cmp-knob { width: 2.4rem; height: 2.4rem; }
  .cmp-knob .ic { width: 1.1rem; height: 1.1rem; }
  .cmp-fc { font-size: 0.68rem; }
}

/* ---------------------------------------------------------------- diagrams */
.dg { margin: 0; --dg-glow: oklch(0.6 0.2 300); }
.dg svg { width: 100%; height: auto; overflow: visible; }
.dg-body { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-glass { fill: oklch(0.6 0.08 250 / 0.12); stroke: var(--line); stroke-width: 1; }
.dg-wheel circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-wheel circle:last-child { stroke: var(--line); }
.dg-run path { stroke: oklch(0.82 0.16 300); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.dg-halo path { stroke: var(--dg-glow); stroke-width: 7; stroke-linecap: round; fill: none; opacity: 0.7; }
.dg-line path { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.dg-lbl text, .dg-tag { fill: var(--ink-3); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.dg-tag-on { fill: var(--fiber); }
.dg [data-zone] { transition: stroke-width 0.3s, opacity 0.3s; }
.dg.is-rocker [data-zone]:not([data-zone="rocker"]),
.dg.is-front [data-zone]:not([data-zone="front"]),
.dg.is-rear [data-zone]:not([data-zone="rear"]) { opacity: 0.25; }
.dg-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.dg-duo figcaption { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-3); }
.dg-duo figcaption strong { color: var(--ink); font-weight: 600; }
.dg-cone { fill: var(--dg-glow); opacity: 0.3; }
.dg-pod { fill: oklch(0.95 0.02 280); stroke: none; }
.dg-tyre { fill: var(--bg-sunk); stroke: var(--line-strong); stroke-width: 1.5; }
.dg-rock .dg-tyre { fill: oklch(0.14 0.02 280 / 0.75); }
.dg-ground { stroke: var(--line); stroke-width: 1; }
.dg-ring { fill: none; stroke: var(--dg-glow); stroke-width: 3.5; }
.dg-ring-glow { fill: var(--dg-glow); opacity: 0.3; }
.dg-rim, .dg-hub { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-spoke path { stroke: var(--line); stroke-width: 1.5; }
.dg-halo { fill: none; stroke: var(--dg-glow); stroke-width: 3; }
.dg-halo-glow { fill: var(--dg-glow); opacity: 0.28; }
.dg-proj { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-eye { fill: oklch(0.55 0.22 25); }
.dg-strip { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.dg-cal path { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.dg-half-a { fill: oklch(0.55 0.2 25 / 0.5); stroke: none; }
.dg-half-b { fill: oklch(0.22 0.05 20 / 0.85); stroke: none; }
.dg-seam { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.surface-light .dg-body, .surface-light .dg-tyre, .surface-light .dg-wheel circle { stroke: oklch(0.2 0.035 282 / 0.35); }
@media (max-width: 47.99rem) { .dg-duo { grid-template-columns: minmax(0, 1fr); } }

/* underglow zone list, linked to the diagram */
.zn-list { display: grid; margin-top: 0.5rem; }
.zn { padding-block: clamp(0.7rem, 1.8svh, 1rem); border-bottom: 1px solid var(--line); transition: border-color 0.25s; }
.zn:first-child { border-top: 1px solid var(--line-strong); }
.zn.is-on { border-bottom-color: var(--fiber); }
.zn-n { font-weight: 600; font-size: 0.98rem; }
.zn-d { font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; max-width: 52ch; }

/* ---------------------------------------------------------------- tint shade ladder + law table */
.tl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 1.8vw, 1.5rem); }
.tl { display: grid; gap: 0.45rem; align-content: start; }
.tl-glass {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, oklch(0.42 0.06 235), oklch(0.2 0.03 265));
}
.tl-behind { font-size: clamp(0.7rem, 1.5vw, 1rem); font-weight: 700; font-stretch: 125%; letter-spacing: 0.14em; color: oklch(0.98 0.01 250); }
.tl-film { position: absolute; inset: 0; background: oklch(0.05 0.01 265); opacity: calc(1 - var(--vlt)); }
.tl-n { font-weight: 700; font-size: 1.1rem; font-stretch: 112%; }
.tl-n span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); }
.tl-look { font-size: 0.85rem; color: var(--fiber); }
.tl-d { font-size: 0.8rem; color: var(--ink-3); line-height: 1.5; }
.tl-ok, .tl-no { font-size: 0.7rem; line-height: 1.4; display: block; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.tl-ok { color: var(--ink-2); }
.tl-no { color: var(--red-text); }
@media (max-width: 61.99rem) { .tl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.law { display: grid; gap: 1rem; }
.law-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.law-tbl th, .law-tbl td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.law-tbl thead th { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--line-strong); }
.law-tbl tbody th { font-weight: 600; width: 32%; }
.law-tbl td:nth-child(2) { color: var(--fiber); font-weight: 600; width: 32%; }
.law-tbl td:last-child { color: var(--ink-3); padding-right: 0; }
.law-note { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.83rem; color: var(--ink-3); line-height: 1.55; }
.law-note .ic { flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--fiber); }
.law-src { font-size: 0.76rem; color: var(--ink-3); letter-spacing: 0.04em; }
@media (max-width: 40rem) {
  .law-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .law-tbl tr { display: grid; gap: 0.15rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
  .law-tbl th, .law-tbl td { border: 0; padding: 0; width: auto !important; }
}

/* ---------------------------------------------------------------- paint swatch */
.pw { display: grid; gap: 0.85rem; margin: 0; }
/* ONE surface across the whole stage: the point of the diagram is that the panel and the sprayed
   part are indistinguishable, so the gradient must not restart at the seam. */
.pw-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 22% 12%, oklch(0.52 0.11 266 / 0.85), transparent 62%),
    linear-gradient(152deg, oklch(0.40 0.1 268), oklch(0.245 0.065 272) 58%, oklch(0.31 0.085 270));
}
.pw-seam { position: absolute; top: 7%; bottom: 7%; left: 50%; width: 1px; background: oklch(1 0 0 / 0.14); }
.pw-lbl {
  position: absolute; bottom: 0.9rem; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: oklch(0.98 0.01 270 / 0.82);
}
.pw-lbl-a { left: 0.9rem; }
.pw-lbl-b { right: 0.9rem; }
.pw figcaption { font-size: 0.86rem; color: var(--ink-3); padding-top: 0.85rem; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- suede colors */
.sw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.sw { display: grid; gap: 0.85rem; align-content: start; }
.sw-fig { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-sunk); border: 1px solid var(--line); }
.sw-fig img { width: 100%; height: 100%; object-fit: cover; }
.sw-b { display: grid; gap: 0.25rem; }
.sw-n { font-weight: 600; font-size: 1.05rem; }
.sw-d { font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 47.99rem) { .sw-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- two pricing routes */
.two-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.tp { display: grid; gap: 0.3rem; align-content: start; }
.tp-cat { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: var(--fiber); }
.tp-note { font-size: 0.88rem; color: var(--ink-3); margin-bottom: 0.9rem; max-width: 46ch; line-height: 1.55; }
.tp-fine { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.9rem; }
@media (max-width: 61.99rem) { .two-price { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- add-on cards */
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.ad { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.1rem, 2.2vw, 1.5rem); border: 1px solid var(--line); background: var(--bg-sunk); transition: border-color 0.3s; }
.ad:hover { border-color: var(--line-strong); }
.ad-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ad-n { font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.ad-d { font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; }
.ad-go { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.78rem; color: var(--fiber); text-decoration: none; }
.ad-go .ic { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease-out); }
.ad-go:hover .ic { transform: translateX(3px); }

/* ---------------------------------------------------------------- three-step flow line */
.flowline { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.flowline li { display: grid; gap: 0.3rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--line-strong); position: relative; }
.flowline li > span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--fiber); }
.fl-t { font-weight: 600; font-size: 1.08rem; }
.fl-d { font-size: 0.88rem; color: var(--ink-3); line-height: 1.55; }
.flowline .lnk { margin-top: 0.4rem; }
@media (max-width: 47.99rem) { .flowline { grid-template-columns: minmax(0, 1fr); } }

/* generic inline arrow link, used by the new sections */
.lnk { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-2); text-decoration: none; }
.lnk .ic { width: 0.95rem; height: 0.95rem; transition: transform 0.3s var(--ease-out); }
.lnk:hover { color: var(--ink); }
.lnk:hover .ic { transform: translateX(3px); }

/* a FAQ block with two or three rows is genuinely short: give it real padding instead of a whole
   empty viewport (the one-screen rule above skips .sec-fshort) */
@media (min-width: 64rem) and (min-height: 36rem) {
  main > section.sec-fshort { padding-block: clamp(4rem, 9svh, 7rem); }
}

/* FAQ topic headings inside the single list (round 10: 31 questions needed grouping, not a longer wall) */
.faqx-group {
  display: flex; align-items: baseline; gap: 0.6rem; margin-top: 2.25rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  font-stretch: 112%; color: var(--fiber);
}
.faqx-group:first-child { margin-top: 0; }
.faqx-group span { color: var(--ink-3); letter-spacing: 0.04em; }
/* the per-row tag is redundant once the list is grouped */
.faqx-group ~ .faq-item .faqx-tag { display: none; }

/* home: six of the ten services, three up on desktop so the tiles stay big enough to read */
@media (min-width: 62rem) { .sc-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- round 10: one-screen sizing
   The service-card grids and the comparison slider are the tall new components. Size them from
   viewport HEIGHT on desktop, the same way the hero and gallery rows already are, so a section
   that holds six cards or a portrait photo still lands inside one screen. */
@media (min-width: 64rem) and (min-height: 36rem) {
  .sc-img, .sc-void, .rel-img, .rel-void { aspect-ratio: 16 / 10; }
  .sc-b, .rel-t { padding: clamp(0.7rem, 1.8svh, 1.2rem); gap: clamp(0.15rem, 0.6svh, 0.35rem); }
  .sc-n, .rel-n { font-size: clamp(0.95rem, 2svh, 1.05rem); }
  .sc-d, .rel-b { font-size: clamp(0.78rem, 1.7svh, 0.86rem); line-height: 1.45; }
  /* home: six tiles in two rows have to share one screen with the heading */
  .sc-6 .sc-img, .sc-6 .sc-void { aspect-ratio: 2 / 1; }
  .sc-6 .sc-d { display: none; }
  /* services hub: five tiles in a category row */
  .sec-cat .sc-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .sec-cat .sc-img, .sec-cat .sc-void { aspect-ratio: 3 / 2; }
  /* comparison slider: the portrait frame is capped to the screen, not to its own ratio */
  /* cap by height but keep the frame's own ratio, so a landscape pair isn't cropped to a portrait box */
  .sec-cmp .cmp-stage { max-height: min(44rem, calc(100svh - var(--fit-top) - var(--fit-bot) - 5.5rem)); }
  /* the figure shrinks to the stage so the BEFORE / AFTER caption lines up with the image edges */
  .sec-cmp .cmp { width: fit-content; margin-inline: auto; }
  .sec-cmp .cmp-grid { align-items: center; }
}
@media (min-width: 64rem) and (min-height: 36rem) {
  .sec-svc .sc-grid { gap: clamp(0.75rem, 1.8svh, 1.25rem); }
  .sec-svc .sc-6 .sc-img, .sec-svc .sc-6 .sc-void { aspect-ratio: 5 / 2; }
  .sec-svc .sc-p { margin-top: 0; font-size: 0.76rem; }
  /* underglow: prose + practical grid + the price rows share one screen */
  .sec-ugm .kn-grid { gap: clamp(0.5rem, 1.3svh, 0.9rem) clamp(1.5rem, 3vw, 2.5rem); }
  .sec-ugm .kn { padding-top: clamp(0.4rem, 1svh, 0.7rem); }
  .sec-ugm .kn-d { font-size: clamp(0.76rem, 1.6svh, 0.85rem); line-height: 1.45; }
  .sec-ugm .prose p { margin-block: 0 0.65rem; }
  .sec-ugm .opts .opt { padding-block: clamp(0.6rem, 1.6svh, 1rem); }
}

/* the grouped drawer list scrolls; fade its bottom edge so a clipped row reads as "more below"
   rather than as a broken layout, and keep the last row clear of the sticky footer buttons */
.drawer-nav { padding-bottom: 1.25rem; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent); }
@media (prefers-reduced-motion: reduce) { .drawer-nav { -webkit-mask-image: none; mask-image: none; } }
/* arrow links are a real tap target, not a 23px line of text */
.lnk { padding-block: 0.25rem; }

/* marks for the services with no photography yet */
.sc-void, .rel-void { display: grid; place-items: center; }
.g-mark { position: relative; z-index: 1; width: clamp(3.25rem, 7vw, 4.5rem); height: auto; color: var(--ink-3); opacity: 0.9; transition: color 0.35s, transform 0.5s var(--ease-out); }
.sc:hover .g-mark, .rel:hover .g-mark { color: var(--ink-2); transform: translateY(-2px); }
.g-mark .g-lit { stroke: var(--fiber); }
.g-mark .g-dim { stroke: currentColor; opacity: 0.35; }
.g-mark .g-fill { fill: var(--fiber); stroke: none; }
.g-mark .g-fill-soft { fill: currentColor; opacity: 0.16; stroke: none; }
/* short category rows keep the same card size as long ones instead of stretching to fill */
.sec-cat .sc-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (min-width: 64rem) and (min-height: 36rem) {
  .sec-cat .sc-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}
@media (min-width: 64rem) and (min-height: 36rem) {
  .sec-extp .sc-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .sec-extp .sc-img, .sec-extp .sc-void { aspect-ratio: 3 / 2; }
}

/* city pages now list all twelve services: the rows have to share one screen with the heading column */
@media (min-width: 64rem) and (min-height: 36rem) {
  .sec-svl .svl a { padding-block: clamp(0.28rem, 0.85svh, 0.62rem); }
  .sec-svl .svl-name { font-size: clamp(0.9rem, 1.9svh, 1rem); }
  .sec-svl .svl-desc { font-size: clamp(0.72rem, 1.45svh, 0.82rem); line-height: 1.35; }
  .sec-svl .svl-price { font-size: clamp(0.85rem, 1.8svh, 1rem); }
  .sec-svl .svl-head { gap: clamp(0.6rem, 1.6svh, 1.1rem); }
}

/* Services nav: the disclosure button needs JS to do anything, so without JS a plain link to the
   hub replaces it. Exactly one of the two is ever rendered. */
html:not(.js) .nav-btn { display: none; }
html.js .nav-nojs { display: none; }
.nav-nojs { position: relative; font-size: 0.9rem; text-decoration: none; color: var(--ink-2); padding-block: 0.6rem; }
.nav-nojs:hover, .nav-nojs[data-in-section] { color: var(--ink); }
/* the home row's tiles are wide and short, so the mark needs to hold the space */
.sc-6 .g-mark { width: clamp(3.75rem, 5.5vw, 5.25rem); }

/* the original before/after section's drag hint (restored round 10.2) */
.cmp-hint {
  display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: var(--ink-3);
}
.cmp-hint .ic { width: 1.05rem; height: 1.05rem; color: var(--fiber); }

/* add-ons: three up so the five cards plus the closing CTA make two full rows, never an orphan */
@media (min-width: 62rem) { .ad-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ad-ask { background: none; border-style: dashed; display: grid; gap: 0.5rem; align-content: center; justify-items: start; }
.ad-ask .ad-n { font-size: 1.05rem; }
.ad-ask .btn { margin-top: 0.5rem; }

/* ---- exterior service photo strip (stand-in photos until the shop has its own, see _build/src/ext/SOURCES.md) */
.xstrip { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.xstrip .pfig img { aspect-ratio: 3 / 2; }
.xstrip-note { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-3); }
@media (min-width: 48rem) { .xstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (max-width: 47.99rem) { .xstrip .pfig:nth-child(n+3) { display: none; } .xstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }