/* ============================================================
   PrompterScript — teleprompter services, Los Angeles
   Tokens → base → layout → components → responsive
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --cream:      #F4F2ED;
  --cream-deep: #E9E5DC;
  --ink:        #121214;
  --ink-lift:   #17171B;

  --accent:     #C4503A;
  --cue:        #E23E2C;

  --bg:      var(--cream);
  --fg:      #121214;
  --muted:   #6E6B63;
  --line:    rgba(18, 18, 20, .14);
  --line-2:  rgba(18, 18, 20, .07);
  --btn-fg:  #F4F2ED;
  --btn-bg:  #121214;

  --sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell: 1220px;
  --pad: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="dark"] {
  --bg:     #0E0E10;
  --fg:     #F1EFEA;
  --muted:  #97948C;
  --line:   rgba(255, 255, 255, .16);
  --line-2: rgba(255, 255, 255, .07);
  --btn-fg: #121214;
  --btn-bg: #F1EFEA;
}

/* bands that carry their own palette regardless of theme */
.band-dark {
  --bg:     var(--ink);
  --fg:     #F1EFEA;
  --muted:  #97948C;
  --line:   rgba(255, 255, 255, .16);
  --line-2: rgba(255, 255, 255, .07);
  --btn-fg: #121214;
  --btn-bg: #F1EFEA;
  background: var(--bg);
  color: var(--fg);
}
.band-light {
  --bg:     #F6F5F1;
  --fg:     #121417;
  --muted:  #5C5F66;
  --line:   rgba(18, 20, 23, .18);
  --line-2: rgba(18, 20, 23, .08);
  --btn-fg: #F6F5F1;
  --btn-bg: #121417;
  background: var(--bg);
  color: var(--fg);
}
.band-ink { background: var(--cream-deep); --line: rgba(18,18,20,.16); }
[data-theme="dark"] .band-ink { background: var(--ink-lift); }

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; font-size: 14px;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ---------- type ---------- */
.display {
  font-size: clamp(2.35rem, 5.4vw, 4.35rem);
  line-height: 1.0;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 0 24px;
}
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 18px;
}
.display em, .h2 em, .footer-serif em, .serif-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}
h3 { font-size: 1.22rem; letter-spacing: -.015em; font-weight: 600; margin: 0 0 10px; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}
.rec {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cue);
  box-shadow: 0 0 0 0 rgba(226, 62, 44, .6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(226, 62, 44, .55); }
  30%           { box-shadow: 0 0 0 7px rgba(226, 62, 44, 0); }
}

.lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 52ch; margin: 0 0 34px; }
.section-lede { color: var(--muted); max-width: 46ch; margin: 0; }

/* rig types, in the trade's own terms */
.rigs {
  display: flex; flex-wrap: wrap;
  gap: 8px 0;
  list-style: none;
  margin: 0 0 clamp(36px, 4vw, 52px); padding: 0;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg);
}
.rigs li { display: flex; align-items: center; }
.rigs li + li::before {
  content: "";
  width: 4px; height: 4px; margin: 0 14px;
  border-radius: 50%; background: var(--accent);
}

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--btn-bg);
  --b-fg: var(--btn-fg);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid { background: var(--b-bg); color: var(--b-fg); }
.btn--solid:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--fg); transform: translateY(-2px); }
.btn--sm { padding: 10px 18px; font-size: 13.5px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.brand { display: block; flex: none; }
.brand-mark { width: auto; height: 26px; }
[data-theme="light"] .brand-mark--white { display: none; }
[data-theme="dark"]  .brand-mark--ink   { display: none; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--muted);
  transition: color .2s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--fg); }

.header-tools { display: flex; align-items: center; gap: 10px; }
.inquire-btn { white-space: nowrap; }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--fg); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.icon-btn:hover { border-color: var(--fg); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.call-btn svg { stroke-width: 1.7; }

.menu-btn { display: none; position: relative; }

/* all three bars sit on the same centre point and offset from it, so the open
   state is a pure rotation and the X lands dead centre no matter the box size */
.menu-btn span {
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 1.5px;
  margin: -0.75px 0 0 -8.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.menu-btn span:nth-child(1) { transform: translateY(-5.5px); }
.menu-btn span:nth-child(3) { transform: translateY(5.5px); }

.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 9vw, 116px) 0 0; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.hero-copy { max-width: 640px; padding-bottom: clamp(60px, 8vw, 104px); }

/* presidential prompter rig
   viewed from the reader's position: head-on and symmetric, with the glass
   tilted back the way a beam-splitter sits. perspective lives on the stage so
   the vanishing point can sit at the middle of the glass (eye level) while the
   glass itself pivots about its bottom edge, keeping the mount point fixed. */
.rig { margin: 0; align-self: end; padding-bottom: 38px; }

.rig-stage {
  --glass: 360px;
  --lean: 0px;
  --mount-w: calc(var(--glass) * .32);
  --pfont: calc(var(--glass) * .103);   /* prompter type; spacer is sized off it */
  --pline: 1.18;
  --tilt: 13deg;                        /* panel lean; the text cancels it exactly */
  --pole-top: 92px;                       /* glass bottom edge, above the stage floor */
  position: relative;
  padding-bottom: var(--pole-top);
  perspective: 950px;
  perspective-origin: 50% 39%;            /* eye level, mid-glass */
}

.rig-glass {
  position: relative;
  width: var(--glass);
  aspect-ratio: 1 / 1;                    /* real presidential glass is square */
  margin-inline: auto;
  padding: clamp(12px, 1.4vw, 17px);
  border-radius: 9px;
  border: 1px solid rgba(196, 220, 240, .30);
  transform-origin: 50% 100%;             /* the mount point stays put */
  transform-style: preserve-3d;           /* so the text can be counter-rotated flat */
  transform: rotateX(calc(-1 * var(--tilt)));  /* top leans toward the reader, as a beam splitter does */
  background:
    /* glass tint */
    linear-gradient(168deg,
      rgba(198, 222, 242, .12) 0%,
      rgba(140, 170, 196, .04) 46%,
      rgba(46, 62, 80, .09) 100%),
    /* stage light coming through, kept inside the panel edges */
    radial-gradient(46% 40% at 27% 30%, rgba(236, 178, 134, .15), transparent 72%),
    radial-gradient(42% 38% at 79% 71%, rgba(126, 164, 208, .13), transparent 74%);
  -webkit-backdrop-filter: blur(2px) saturate(118%);
          backdrop-filter: blur(2px) saturate(118%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset 0 0 44px rgba(150, 190, 225, .035),
    0 40px 74px -34px rgba(0, 0, 0, .94);
}

/* the ground-glass edge catching the key light */
.rig-glass::after {
  content: "";
  position: absolute; left: 6px; right: 6px; top: -3px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg,
    transparent, rgba(226, 238, 252, .55) 22%, rgba(226, 238, 252, .55) 78%, transparent);
  pointer-events: none;
}

/* raking reflection across the panel */
.rig-sheen {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg,
    transparent 32%,
    rgba(255, 255, 255, .055) 44%,
    rgba(255, 255, 255, .015) 51%,
    transparent 60%);
  pointer-events: none;
}

/* stand mount + pole, anchored to the glass's bottom edge and left unskewed */
.rig-mount {
  position: absolute;
  left: calc(50% + var(--lean));
  bottom: calc(var(--pole-top) - var(--mount-w) * 1.333);   /* glass edge lands mid-plate (y=20 of the svg) */
  width: var(--mount-w);
  transform: translateX(-50%);
  pointer-events: none;
}
.mount-svg {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 7px 11px rgba(0, 0, 0, .62));
}
.mount-pole {
  position: absolute; z-index: 0;
  left: calc(50% + var(--mount-w) * .003); top: calc(var(--mount-w) * 1.44);   /* tucked behind the collar */
  transform: translateX(-50%);
  width: calc(var(--mount-w) * .175);
  height: 2000px;                         /* always reaches past the hero; cropped by its overflow */
  /* polished tube: two specular bands either side of a dark core */
  background: linear-gradient(90deg,
    #0a0a0d 0%, #6a6a76 20%, #26262d 34%, #101014 55%, #55555f 80%, #0a0a0d 100%);
}

.prompter-screen {
  position: relative;
  /* cancel the panel's tilt so the copy reads straight up, not foreshortened.
     standing it back up leaves its top sitting lower than the projected top of
     the panel, so grow and lift it by the same amount to re-seat it. */
  height: calc(100% + var(--glass) * .035);
  margin-top: calc(var(--glass) * -.035);
  overflow: hidden;
  transform: rotateX(var(--tilt));
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
}
.prompter-text {
  padding: 0 clamp(6px, .8vw, 10px);
  will-change: transform;
}
.prompter-text p {
  /* sized off --glass, not the viewport, so the line count holds
     at every breakpoint — a real rig shows five or six lines */
  font-size: var(--pfont);
  line-height: var(--pline);
  letter-spacing: -.02em;
  font-weight: 500;
  color: #F6F5F2;
  text-shadow: 0 0 20px rgba(190, 220, 250, .28);
  margin: 0 0 .45em;
}
.prompter-text .serif-note {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: rgba(246, 245, 242, .6);
}
/* who is reading, slugged at the head of the script */
.prompter-text .speaker-mark {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
}

/* end-of-script marker, the way a prompter operator expects to see it */
.prompter-text .end-mark {
  font-weight: 700;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--cue);
  text-shadow: 0 0 22px rgba(226, 62, 44, .45);
  /* matches the gap under the slug, so the script opens and closes the same way.
     margins collapse, so this is the whole gap, not an addition to it. */
  margin-top: calc(.45em + 1em * var(--pline));
  margin-bottom: 0;
}

/* eight blank lines so END clears the top of the glass before the loop restarts */
.prompter-text .end-space {
  height: calc(var(--pfont) * var(--pline) * 8);
}

.prompter-controls {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pill {
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover { border-color: var(--fg); }
.speed { display: flex; align-items: center; gap: 12px; }
.speed span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.speed input[type="range"] { width: 120px; accent-color: var(--accent); }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 132px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 68px); }
#equipment .section-head { margin-bottom: clamp(26px, 3vw, 34px); max-width: 920px; }
.section-head--slim { margin-bottom: clamp(24px, 3vw, 34px); }
.h3-alt {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 500; letter-spacing: -.015em;
  color: var(--muted);
  margin: 0;
}

/* cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.card {
  --cardpad: clamp(28px, 3vw, 40px);
  position: relative;
  background: var(--bg);
  padding: var(--cardpad);
  transition: background-color .3s var(--ease);
}

/* photo bleeds to the card edges, so pull it back out of the padding */
.card-shot {
  margin: calc(var(--cardpad) * -1) calc(var(--cardpad) * -1) clamp(22px, 2.4vw, 30px);
}
.card-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 58%;   /* the stage wedges sit low in their frame */
  display: block;
  background: var(--line-2);
}
.card:hover { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.card p { color: var(--muted); margin: 0; font-size: 15.5px; }

/* a short rule closes each card: space plus a small mark, so the stacked
   cards on a phone read as separate items rather than one run of text */
.card-end {
  display: block;
  width: 26px; height: 1px;
  background: var(--fg); opacity: .32;
  margin: clamp(22px, 2.6vw, 30px) auto 0;
}
/* kit */
.kit-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.kit-shot { margin: 0; }
.kit-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.kit-copy .section-lede { margin-bottom: 28px; }
.kit-copy .spec { margin-bottom: 32px; }
.spec { margin: 0; border-top: 1px solid var(--line); }
.spec > div {
  display: grid; grid-template-columns: minmax(130px, .5fr) minmax(0, 1fr);
  gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line);
}
.spec dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.spec dd { margin: 0; font-size: 15px; letter-spacing: -.01em; }

/* packages */
.packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.pkg {
  background: var(--bg);
  padding: clamp(26px, 3vw, 36px);
}
.pkg-no {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.pkg h3 { margin: 0 0 8px; }
.pkg-note {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.5;
  color: var(--muted);
}
.ticks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.ticks li {
  position: relative;
  padding: 10px 0 10px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line-2);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 8px; height: 1px; background: var(--accent);
}

@media (max-width: 900px) {
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .packages { grid-template-columns: minmax(0, 1fr); }
}

/* work / photos */
.section--tight { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 6vw, 80px); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.shot { margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line-2);
}
.shot figcaption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 14px;
}

.band-photo { margin: 0; }

/* faq */
.faq-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.faq-grid .section-head { margin-bottom: 0; }
.accordion { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -.015em;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.qa[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.qa-body { overflow: hidden; }
.qa-body p { color: var(--muted); margin: 0 0 24px; max-width: 62ch; font-size: 15.5px; }
.qa[open] .qa-body { animation: drop .32s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* booking */
.book-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.contact-list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); }
.contact-list li {
  display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.contact-list span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s var(--ease); }
.contact-list a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.contact-list em { color: var(--muted); font-style: normal; font-size: 15px; }

.book-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.field .opt { text-transform: none; letter-spacing: .04em; opacity: .7; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 15.5px; color: var(--fg);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 2px;
  transition: border-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .65; }
.field select { appearance: none; cursor: pointer; }
.field select option { color: #121214; background: #fff; }
.field.has-error input, .field.has-error select { border-bottom-color: var(--cue); }
.err { margin: 0; font-size: 12.5px; color: var(--cue); min-height: 0; }

.form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.form-note { margin: 0; font-size: 14px; color: var(--muted); }
.form-note.is-ok { color: var(--fg); }

/* ---------- inquiry dialog ---------- */
.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.modal::backdrop {
  background: rgba(8, 8, 10, .74);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.modal-inner { padding: clamp(26px, 4vw, 40px); position: relative; }
.modal .h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.modal .section-lede { margin-bottom: 26px; }
.modal .book-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal .contact-list { margin-top: 28px; }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.modal-close:hover { color: var(--fg); border-color: var(--fg); }
.modal-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* web3forms honeypot: hidden from people, reachable by bots */
.botcheck { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* footer trigger, styled as the link it replaced */
.footer-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: rgba(241, 239, 234, .68);
  text-align: left; cursor: pointer;
  transition: color .2s var(--ease);
}
.footer-link:hover { color: #fff; }

@media (max-width: 520px) {
  .modal .book-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- legal page ---------- */
.legal { max-width: 68ch; }
.legal h3 {
  font-size: 1.05rem; letter-spacing: -.01em;
  margin: clamp(26px, 3vw, 34px) 0 8px;
}
.legal h3:first-child { margin-top: 0; }
.legal p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: .18em; }
.legal-note {
  margin-top: clamp(30px, 4vw, 44px) !important;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px !important;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink); color: #F1EFEA;
  padding: clamp(56px, 6vw, 84px) 0 calc(28px + env(safe-area-inset-bottom, 0px));
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-mark { width: auto; height: 24px; }
.footer-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(241, 239, 234, .5); margin: 16px 0 0;
}
.footer-area {
  font-size: 13px; line-height: 1.55;
  color: rgba(241, 239, 234, .42);
  max-width: 34ch; margin: 12px 0 0;
}
.footer-social {
  display: inline-flex; margin-top: 18px;
  color: rgba(241, 239, 234, .68);
  transition: color .2s var(--ease);
}
.footer-social:hover { color: #fff; }
.footer-social svg { display: block; }
.footer-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(241, 239, 234, .5);
  margin: 0 0 14px;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: 14.5px; }
.footer-note { margin: 0; color: rgba(241, 239, 234, .68); }
.footer-base a {
  color: rgba(241, 239, 234, .45); text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-base a:hover { color: #fff; }
.footer-col a, .footer-link {
  text-decoration: none; color: rgba(241, 239, 234, .68);
  transition: color .2s var(--ease);
}
.footer-col a:hover, .footer-link:hover { color: #fff; }

.footer-base {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; flex-wrap: wrap;
  padding-top: 24px;
  font-size: 13px; color: rgba(241, 239, 234, .45);
}
.footer-base p { margin: 0; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid, .kit-grid, .faq-grid, .book-grid { grid-template-columns: minmax(0, 1fr); }
  .band-photo img { aspect-ratio: 2 / 1; }
  .hero-grid { gap: 48px; }
  .hero-copy { padding-bottom: 0; }
  .rig-stage { --glass: 400px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 820px) {
  .menu-btn { display: flex; }
  .nav {
    position: fixed; inset: 0 0 auto; top: 0;
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 6px;
    height: 100dvh;
    padding: 96px var(--pad) 40px;
    background: var(--bg);
    transform: translateY(-101%);
    transition: transform .42s var(--ease);
    z-index: -1;
  }
  .nav.is-open { transform: none; }
  .nav a { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; color: var(--fg); padding: 10px 0; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* the hero H1 was stuck on the clamp floor (2.35rem) at every phone width,
     so it never grew with the screen. scale it off the viewport instead. */
  .display { font-size: clamp(2.8rem, 14.5vw, 4rem); }
  /* tighten the hero on phones: less air above the eyebrow, and less between
     the lede and the rig now that the CTA is hidden here */
  .hero { padding-top: 34px; }
  .hero .lede { margin-bottom: 0; }
  .hero-grid { gap: 30px; }
  .rig-stage { --glass: min(84vw, 340px); --pole-top: 76px; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .band-photo img { aspect-ratio: 3 / 2; }
  .header-inner { height: 66px; }
  .brand-mark { height: 22px; }
  .book-form { grid-template-columns: minmax(0, 1fr); }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .contact-list li { grid-template-columns: 76px 1fr; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .prompter-controls {              /* pause bottom left, speed bottom right */
    flex-direction: row; align-items: center;
    justify-content: space-between; flex-wrap: nowrap; gap: 10px;
  }
  .speed { gap: 8px; }
  .speed input[type="range"] { width: 72px; }
}

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