/* Null Productions — layout & components ("Spec Sheet").
   Uses ONLY tier-2 tokens from tokens.css. No literal colors below this line.
   Rules of the system:
     - nothing is laid over a busy photo; no text-shadows, no scrims
     - sentence case everywhere; IBM Plex Mono only for numbers and spec values
     - monochrome: --brand is the ink colour itself
     - buttons sit on the right (house style), except under centred headlines */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
/* Stops anything from widening the page sideways on phones. It sits on the
   page's top-level blocks, not on html/body: on the root, mobile Safari can
   treat it as a scroll container and the sticky header stops sticking. */
main, .site-footer { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, textarea, select, summary, label):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--brand-text);
  padding: .75rem 1.25rem; font-size: .9rem;
}
.skip:focus { left: 0; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -.02em; }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1rem; max-width: var(--measure); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-muted); }
/* Numbers and spec values only. */
.num { font-family: var(--font-num); font-weight: 500; letter-spacing: -.01em; }

/* Section label: a short mono index line, sentence case, never tracked caps. */
.eyebrow {
  font-family: var(--font-num); font-size: .8rem; color: var(--text-muted);
  margin: 0 0 1rem; display: flex; align-items: center; gap: .75rem;
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--border-strong); }
.section-head { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.section-head .lede { margin-top: 1.1rem; margin-bottom: 0; }
/* A body-size line under a section heading (smaller than .lede). */
.section-head .section-sub { margin: 1.1rem 0 0; color: var(--text-muted); }

/* ---------- Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.masthead .shell { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }

/* The logo is exported at 3x its display height from the brand file. Dark
   pages use the white logo, the light page the black one (logo-dark). */
.wordmark { display: block; flex: none; line-height: 0; }
.wordmark img { height: 44px; width: auto; }
.cta-short { display: none; }
@media (max-width: 560px) { .cta-short { display: inline; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
/* Scoped to .nav-link so it can't out-specify the header button. */
.nav .nav-link { font-size: .95rem; color: var(--text-muted); text-decoration: none; }
.nav .nav-link:hover, .nav .nav-link[aria-current="page"] { color: var(--text); }
@media (max-width: 860px) { .nav .nav-link { display: none; } }

/* Mobile menu: a <details> so it opens with or without JS. Wide screens show
   the inline links instead. */
.menu { display: none; }
@media (max-width: 860px) { .menu { display: block; } .nav { gap: .6rem; } }
.menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: var(--radius); color: var(--text);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--surface-raised); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: .5rem var(--gutter) 1rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.menu-panel a {
  padding: .95rem 0; border-bottom: 1px solid var(--border); text-decoration: none;
  font-weight: 600; font-size: 1.1rem; color: var(--text);
}
.menu-panel a:last-child { border-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-size: .98rem; font-weight: 600; letter-spacing: -.005em;
  padding: .85rem 1.4rem; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: var(--brand-text); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 82%, var(--surface)); }
.btn-primary::after { content: "\2192"; font-weight: 400; }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
/* Buttons sit on the right everywhere (house style). */
.btn-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; margin-top: 2rem; }

/* ---------- Sections ---------- */
section { padding-block: var(--section-y); }
section + section { border-top: 1px solid var(--border); }
.section-raised { background: var(--surface-raised); }

/* ---------- Hero ----------
   Copy on the left on a plain background, the rig photo framed on the right
   with thin callout pins: underlined labels in the dark space between the
   mains, the underline running to a dot on the box. Phones: photo first, copy below. */
.hero { padding-block: clamp(2rem, 5vw, 4.5rem); border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy .lede { margin: 1.5rem 0 0; max-width: 40ch; }
.hero-copy .btn-row { margin-top: 2rem; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}
/* The braces from the logo (inline SVG from the brand icon file), left of the
   headline and the same height as its 3 lines (fixed breaks, so the box is
   exactly as wide as the longest line). */
.hero-title { display: flex; align-items: center; gap: .6em; font-size: clamp(1.35rem, 2.3vw, 2rem); }
.hero-title h1 { flex: none; font-size: 1em; line-height: 1.1; letter-spacing: -.02em; width: max-content; max-width: none; }
.hero-mark { flex: none; height: calc(3 * 1.1em); width: auto; aspect-ratio: 251 / 397; fill: var(--text); }
@media (max-width: 380px) { .hero-title { font-size: 1.15rem; } }

/* Home hero, after PK Sound's: the show photo full-bleed behind the copy,
   darkened toward the text side; a stacked two-line headline ("or" set light) beside
   the braces; two lines of copy; buttons; a scroll cue.
   This is the one place copy sits on a photo and the one all-caps headline. */
.hero-full { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(calc(100svh - 4.5rem), 62rem); padding-block: clamp(4rem, 10vw, 7rem); }
.hero-bg img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.12) brightness(.9); }
/* Colour grade, after pksound.live: the greyscale photo is multiplied by a
   blue / pink / green sweep, its stops in the visible right half (the copy
   side is darkened anyway), so every photo lands in the same palette. */
.hero-grade {
  position: absolute; inset: 0; z-index: -2; mix-blend-mode: multiply;
  background: linear-gradient(115deg, var(--grade-1) 35%, var(--grade-2) 62%, var(--grade-3) 92%);
}
.hero-full::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 72%, transparent) 38%, color-mix(in srgb, var(--surface) 15%, transparent) 75%),
    linear-gradient(0deg, var(--surface) 0%, transparent 30%);
}
.hero-full-inner { width: 100%; }
.hero-full .hero-title { font-size: clamp(3.2rem, 9vw, 7.5rem); gap: .3em; }
.hero-full .hero-title h1 { font-size: 1em; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.hero-full .hero-title h1 > span { display: block; }
/* "or" is smaller and lighter, raised so its cap tops line up with NOTHING's:
   (1 - .6) x Plex's .698 cap height, in the small text's own em. */
.hero-full .hero-title h1 .lt { font-weight: 400; font-size: .6em; letter-spacing: 0; vertical-align: .465em; }
.hero-full .hero-mark { height: calc(2 * .9em); } /* = the two headline lines */
.hero-full .lede { color: var(--text); max-width: 44ch; margin: 1.75rem 0 0; }
.hero-full .hero-title + .lede { font-weight: 600; }
.hero-full .lede + .lede { color: var(--text-muted); margin-top: 1rem; }
.hero-full .btn-row { justify-content: flex-start; margin-top: 2.25rem; }
/* Down arrow at the foot of the hero, bobbing gently; still with reduced motion. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.5rem; width: 1.6rem; height: 1.6rem; margin-left: -.8rem;
  fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  animation: scroll-cue 2.2s ease-in-out infinite;
}
@keyframes scroll-cue { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(.5rem); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
@media (max-width: 900px) {
  .hero-full::before { background: linear-gradient(0deg, var(--surface) 5%, color-mix(in srgb, var(--surface) 70%, transparent) 55%, color-mix(in srgb, var(--surface) 35%, transparent) 100%); }
  /* Phones: no full-screen height; the photo shows in a band above the copy. */
  .hero-full { align-items: flex-end; min-height: 0; padding-top: 13rem; padding-bottom: 3rem; }
  /* Phones: the stage's lit braces sit level with the headline, so the photo
     is enlarged and lifted to put them above it, in view. */
  .hero-bg img { top: -55%; height: 150%; object-position: 72% 50%; }
  .scroll-cue { display: none; }
}

/* Framed photo with callout pins. Positions are % of the 3:2 frame. */
.figure { margin: 0; position: relative; border: 1px solid var(--border); background: var(--surface-raised); }
.figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.figure .frame { position: relative; }
.figure figcaption {
  display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem;
  border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted);
}
.figure figcaption .num { color: var(--text); white-space: nowrap; }
/* Callouts on a framed photo. Each .pin covers the frame: a dot on the box at
   --x/--y, and the label sitting on its underline, which starts at --lx/--ly.
   A diagonal leader joins the two (.leaders: an SVG stretched over the frame,
   coordinates in %, stroke kept 1px). .left: the label runs leftward and its
   underline ends at --lx/--ly (used for the mounting, called out from the
   opposite side). */
.pin { position: absolute; inset: 0; pointer-events: none; }
.pin::before {
  content: ""; position: absolute; left: var(--x); top: var(--y); z-index: 1; box-sizing: border-box;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text);
}
.pin > span { position: absolute; left: var(--lx); top: var(--ly); white-space: nowrap; font-family: var(--font-num); line-height: 1; color: var(--text); }
.pin > span { transform: translateY(-100%); padding: 0 .4rem .3rem .5rem; font-size: .74rem; border-bottom: 1px solid var(--text); }
.pin.left > span { transform: translate(-100%, -100%); padding: 0 .5rem .3rem .4rem; } /* label ends at --lx */
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders line { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 480px) { .pin > span { font-size: .66rem; } }

/* ---------- Chooser: pick a size or event, see the setup ----------
   Radio inputs styled as a segmented control; the matching panel shows via
   :has(). Arrow keys move between options natively. Browsers without :has()
   just show every panel stacked (still correct, just longer). */
.chooser-tabs {
  --tab-min: 5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tab-min), 1fr)); gap: 1px;
  background: var(--border-strong); border: 1px solid var(--border-strong); border-radius: var(--radius);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.chooser-tabs.wide { --tab-min: 10.5rem; }
.chooser-tabs[hidden] { display: none; } /* replaced by the crowd slider when JS runs */
/* Phones: the crowd-size picker (6 options) as a 3x2 grid. */
@media (max-width: 760px) { .chooser:not(.vertical) .chooser-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chooser-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.chooser-tabs label {
  text-align: center; cursor: pointer; padding: .8rem .9rem;
  font-size: .95rem; color: var(--text-muted); background: var(--surface-raised);
  transition: background-color .15s ease, color .15s ease;
}
.chooser-tabs label .num { color: inherit; }
.chooser-tabs label:hover { color: var(--text); background: var(--surface-hover); }
.chooser-tabs input:checked + label { background: var(--brand); color: var(--brand-text); }
.chooser-tabs input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -4px; }

.panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.panel + .panel { margin-top: 3rem; }
@supports selector(:has(*)) {
  .panel { display: none; }
  .panel + .panel { margin-top: 0; }
  /* Tabs and panels are in the same order: the nth checked radio shows the nth panel. */
  .chooser:has(.chooser-tabs input:nth-of-type(1):checked) .panel:nth-child(1) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(2):checked) .panel:nth-child(2) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(3):checked) .panel:nth-child(3) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(4):checked) .panel:nth-child(4) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(5):checked) .panel:nth-child(5) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(6):checked) .panel:nth-child(6) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(7):checked) .panel:nth-child(7) { display: grid; }
  .chooser:has(.chooser-tabs input:nth-of-type(8):checked) .panel:nth-child(8) { display: grid; }
}
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }
.panel h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; margin-bottom: .4rem; }
.panel .cap { font-family: var(--font-num); font-size: 1rem; color: var(--text-muted); margin: 0 0 1.5rem; }
.panel h3 + .spec, .panel h3 + .note { margin-top: 1.5rem; } /* no subtitle (home crowd sizes) */
/* Home crowd sizes: the spec table shows on desktop only; phones read the
   photo's callout labels. */
@media (max-width: 860px) { .spec.desktop-only { display: none; } }
.panel .note { color: var(--text-muted); font-size: .95rem; margin: 1.25rem 0 0; }
.panel .figure { cursor: zoom-in; }
/* Light page: the product shot is on the page colour already, so it sits
   straight on the hero with no frame. */
.theme-light .hero-media { border: 0; background: none; }

/* Crowd-size slider (home): a range input, every 50 guests, that drives the
   hidden radios.
   Track: a hairline, filled up to the thumb (--fill, set by the script). */
.crowd-slider { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.crowd-value { margin: 0 0 1rem; color: var(--text-muted); }
.crowd-value output { font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--text); margin-right: .35rem; }
.crowd-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.75rem;
  margin: 0; background: transparent; cursor: pointer;
}
.crowd-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(to right, var(--text) var(--fill, 20%), var(--border-strong) var(--fill, 20%));
}
.crowd-slider input[type="range"]::-moz-range-track {
  height: 2px; background: linear-gradient(to right, var(--text) var(--fill, 20%), var(--border-strong) var(--fill, 20%));
}
.crowd-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -9px;
  border-radius: 50%; background: var(--text); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--text);
}
.crowd-slider input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--text);
}
.crowd-slider input[type="range"]:focus-visible { outline: none; }
.crowd-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.crowd-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Vertical chooser (private events): the options stacked in a column beside
   the spec details; no photo per option. Phones: a 2x2 grid above the panel. */
.chooser.vertical { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.chooser.vertical .chooser-tabs { grid-template-columns: 1fr; margin-bottom: 0; }
.chooser.vertical .chooser-tabs label { text-align: left; padding: 1rem 1.15rem; }
.chooser.vertical .panel { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .chooser.vertical { grid-template-columns: 1fr; }
  .chooser.vertical .chooser-tabs { grid-template-columns: 1fr 1fr; }
  .chooser.vertical .chooser-tabs label { text-align: center; padding: .85rem .6rem; }
}

/* Spec table: label / value rows on hairlines; values in mono. */
.spec { margin: 0; border-top: 1px solid var(--border); }
.spec div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.spec dt { color: var(--text-muted); font-size: .92rem; }
.spec dd { margin: 0; font-size: .98rem; }
.spec dd.num { font-size: .95rem; }
@media (max-width: 480px) { .spec div { grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; } }
@media (max-width: 340px) { .spec div { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- Clients: a ticker ----------
   Two copies of the list scroll left together; when the first has moved its
   full width the loop restarts, seamlessly. The copy is aria-hidden. Hover
   pauses it; with reduced motion it is a static, wrapping list.
   Logos are white on transparent, each sized (width/height in the markup) to
   carry similar visual weight; a symbol-only mark gets the name beside it. */
.ticker { display: flex; overflow: hidden; border-block: 1px solid var(--border); }
.ticker-track {
  flex: none; display: flex; align-items: center; gap: 3.5rem; list-style: none; margin: 0; padding: 1.5rem 3.5rem 1.5rem 0;
  animation: ticker 45s linear infinite;
}
.ticker-track li { display: flex; align-items: center; gap: .75rem; white-space: nowrap; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
.ticker-track img { max-width: none; flex: none; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-100%); } }
/* Touch screens: the script takes over (.ticker-touch). The row becomes a
   swipeable scroller that it auto-advances, pausing while a finger is down. */
.ticker.ticker-touch { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ticker.ticker-touch::-webkit-scrollbar { display: none; }
.ticker.ticker-touch .ticker-track { animation: none; }
/* Under the hero it is a slim strip: the label line as the heading, then logos. */
.clients { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.clients h2.eyebrow { font-weight: 500; letter-spacing: 0; margin-bottom: .25rem; }
.clients .ticker { border-block: 0; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex: 1; flex-wrap: wrap; row-gap: 1.75rem; }
  .ticker-track[aria-hidden] { display: none; }
}

/* ---------- Process timeline ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border-strong); }
.steps li { padding: 1.25rem 1.25rem 0 0; position: relative; }
.steps li + li { padding-left: 1.25rem; border-left: 1px solid var(--border); }
.steps .num { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: .8rem; }
.steps h3 { margin-bottom: .45rem; }
.steps p { color: var(--text-muted); font-size: .93rem; margin: 0; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; }
  .steps .num { grid-row: span 2; margin: .15rem 0 0; }
}
/* Frames waiting for crew photos: deliberate hatched panels with a label. */
.photo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, 1rem); margin-top: clamp(2rem, 4vw, 3rem); }
.slot {
  margin: 0; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: clamp(.4rem, 1.2vw, .9rem);
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--border) 70%, transparent) 11px 12px),
    var(--surface-raised);
}
.slot figcaption { font-family: var(--font-num); font-size: clamp(.62rem, 1.4vw, .78rem); color: var(--text-muted); background: var(--surface); padding: .3rem .5rem; border: 1px solid var(--border); }

/* ---------- Services: short rows ---------- */
.service-list { list-style: none; margin: 0; padding: 0; }
.service-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem 3rem;
  padding: 1.5rem 0; border-top: 1px solid var(--border);
}
.service-list h3 { font-size: 1.15rem; }
.service-list p { margin: 0; color: var(--text-muted); }
@media (max-width: 700px) { .service-list li { grid-template-columns: 1fr; } }

/* Included-with-every-booking checklist (private-events page). */
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 2rem; }
.included li { border-top: 1px solid var(--border); padding: 1rem 0 1rem 1.6rem; position: relative; }
.included li::before { content: "\2713"; position: absolute; left: 0; top: 1rem; font-family: var(--font-num); }
.included li strong { display: block; font-weight: 600; }
.included li span { color: var(--text-muted); font-size: .93rem; }

/* ---------- Pricing ----------
   The cost question answered in the open, since prices are not published. */
.cost-inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.cost-inner h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cost-body .lede { margin-top: 0; color: var(--text); }
.cost-body p { color: var(--text-muted); }
.cost-body .btn-row { margin-top: 1.5rem; }
@media (max-width: 860px) { .cost-inner { grid-template-columns: 1fr; } }

/* ---------- Quote band (end of home / events) ---------- */
.quote-band .shell { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.quote-band h2 { max-width: 18ch; }
.quote-band p { margin: 1rem 0 0; color: var(--text-muted); }
.quote-band .btn-row { margin: 0 0 0 auto; }

/* ---------- Closing call to action (system / FAQ pages): centred ---------- */
.page-cta { text-align: center; }
.page-cta .lede { margin: 1rem auto 0; max-width: 46ch; }
.page-cta .btn-row { justify-content: center; }

/* ---------- "Need more?" callout ---------- */
.need-more {
  margin-top: clamp(2rem, 4vw, 3rem); padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-strong); border-left: 3px solid var(--brand); border-radius: var(--radius);
  background: var(--surface-raised);
}
.need-more h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.need-more p { margin: 0; max-width: none; color: var(--text-muted); }

/* ---------- The system: alternating photo / copy blocks ---------- */
.unit {
  display: grid; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.unit + .unit { margin-top: clamp(4rem, 9vw, 7rem); }
.unit.flip .unit-media { order: 2; }
.unit.portrait { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
@media (max-width: 820px) {
  .unit, .unit.portrait { grid-template-columns: 1fr; }
  .unit.flip .unit-media { order: 0; }
}
.unit-media { margin: 0; border: 1px solid var(--border); overflow: hidden; background: var(--surface-raised); }
.unit-media img { width: 100%; }
.unit.portrait .unit-media { max-width: 460px; justify-self: center; width: 100%; }
/* Stand-in panel for kit we do not have a photograph of yet. */
.unit-media.blank {
  aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--border) 70%, transparent) 11px 12px),
    var(--surface-raised);
}
.unit-media.blank span { font-family: var(--font-num); font-size: clamp(2.5rem, 7vw, 4.5rem); color: var(--border-strong); line-height: 1; }
.unit-qty { font-family: var(--font-num); font-size: .85rem; color: var(--text-muted); margin: 0 0 .9rem; }
.unit h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.unit-body p { color: var(--text-muted); }
.specs { margin: 1.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.specs div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.specs dt { color: var(--text-muted); font-size: .92rem; }
.specs dd { margin: 0; font-size: .95rem; }
@media (max-width: 480px) { .specs div { grid-template-columns: 1fr; gap: .15rem; } }
/* "Everything else on the truck" (system page): heading and one summary line. */
.kit-head { margin-top: clamp(4rem, 9vw, 7rem); }
.kit-head h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.kit-head p { color: var(--text-muted); margin-top: .75rem; margin-bottom: 0; max-width: none; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
  font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-num); color: var(--text-muted); font-size: 1.2rem;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 2.5rem 1.4rem 0; } /* right padding matches the question, clearing the +/- mark */
.faq .answer p { color: var(--text-muted); font-size: .97rem; margin-bottom: .8rem; max-width: none; }
.faq .answer p:last-child { margin-bottom: 0; }
/* FAQ teaser links (private-events page). */
.faq-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.faq-links a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); text-decoration: none; font-weight: 600; }
.faq-links a::after { content: "\2192"; font-weight: 400; color: var(--text-muted); }
.faq-links a:hover::after { color: var(--text); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: .45rem; }
.field label .opt { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .95rem; font: inherit; font-size: .95rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
/* iOS Safari gives date inputs an intrinsic minimum width (and ignores
   width: 100%), centres the value, and collapses the empty field's height.
   Dropping the native appearance fixes all three; the picker still opens. */
.field input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%; min-height: 3.1rem;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field-row > * { min-width: 0; }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
#quote-form button[type="submit"] { display: flex; margin-left: auto; }
.form-note { font-size: .85rem; color: var(--text-muted); margin: 1rem 0 0; text-align: right; max-width: none; }

.contact-direct { border-left: 1px solid var(--border); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 860px) { .contact-direct { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 2rem; } }
.contact-direct dl { margin: 0; display: grid; gap: 1.4rem; }
.contact-direct dt { font-size: .88rem; color: var(--text-muted); margin-bottom: .3rem; }
.contact-direct dd { margin: 0; font-size: 1rem; }

/* ---------- Lightbox ----------
   The whole photo, uncropped, floating over the dimmed page; the close mark
   sits on the photo's own top-right corner. */
.lightbox {
  border: 0; padding: 0; margin: auto; max-width: none; max-height: none;
  background: transparent; overflow: visible; cursor: zoom-out;
}
.lightbox::backdrop { background: var(--dim); }
.lb-frame { position: relative; margin: 0; }
.lightbox img { display: block; width: auto; height: auto; max-width: min(92vw, 1400px); max-height: 80dvh; }
.lb-close {
  position: absolute; top: .6rem; right: .6rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface-raised); padding-block: 3rem 2rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 2.5rem; }
.footer-grid .col-label { font-size: .85rem; color: var(--text-muted); margin-bottom: .9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-grid a { color: var(--text); text-decoration: none; font-size: .95rem; }
.footer-grid a:hover { text-decoration: underline; }
.footer-grid address { font-style: normal; font-size: .95rem; color: var(--text-muted); line-height: 1.8; }
.footer-note { margin: .9rem 0 0; font-size: .85rem; color: var(--text-muted); }
.colophon {
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: var(--text-muted);
}

/* ---------- Narrow viewports ----------
   At 390px the shell yields ~358px of content: the wordmark and the header
   button step down and the button is pinned to one line. */
@media (max-width: 560px) {
  .masthead .shell { gap: .75rem; }
  .wordmark img { height: 30px; }
  .nav { flex-shrink: 0; }
  .masthead .btn { padding: .65rem .9rem; font-size: .9rem; white-space: nowrap; }
  .masthead .btn::after { content: none; }
  .cta-long { display: none; }
}
@media (max-width: 360px) {
  .wordmark img { height: 26px; }
  .masthead .btn { padding: .6rem .7rem; }
}

/* ---------- Scroll reveal ----------
   Only active once the head script has added .reveal-ready (JS on, motion
   allowed). Targets are listed in each page's script (REVEAL_SEL); keep this
   list the same. Call-to-action blocks and the FAQ list reveal as one piece, never line by line. */
.reveal-ready :is(main .section-head, main .chooser, main .ticker, main .steps li, main .slot,
  main .service-list > li, main .included li, main .cost-inner > *, main .quote-band .shell, main .contact-grid > *,
  main .unit-media, main .unit-body, main .need-more, main .kit-head, main .page-cta .shell, main .faq, main .faq-links) {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready :is(main .section-head, main .chooser, main .ticker, main .steps li, main .slot,
  main .service-list > li, main .included li, main .cost-inner > *, main .quote-band .shell, main .contact-grid > *,
  main .unit-media, main .unit-body, main .need-more, main .kit-head, main .page-cta .shell, main .faq, main .faq-links).in {
  opacity: 1; transform: none;
}
/* Big photos on the system page settle in with a slight zoom. */
.reveal-ready main .unit-media img { transform: scale(1.05); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.reveal-ready main .unit-media.in img { transform: none; }