/* DJ Steven Share, site stylesheet v3 — redesign
   Spectral + Syne, rose-gold copper palette taken from the SS monogram.
   Square corners everywhere, no shadows: separation comes from hairline rules
   and background steps.

   Legacy pages still load legacy.css. This file is only used by rebuilt pages. */

:root {
  /* ---- Ground / cream ---- */
  --ground: #14120F;
  --ground-raised: #1B1712;
  --ground-deep: #0F0D0B;
  --cream: #F5EDE7;

  /* Two coppers. #CE9375 measures 3.45:1 on cream and fails AA, so cream
     sections use the deep variant (5.22:1) for anything that must be read. */
  --copper: #CE9375;
  --copper-on-cream: #8F5430;

  /* ---- Derived alphas, all from cream 245,237,231 or ground 20,18,15 ---- */
  --text-on-dark: rgba(245, 237, 231, 0.85);
  --text-on-dark-soft: rgba(245, 237, 231, 0.68);
  --text-on-dark-faint: rgba(245, 237, 231, 0.5);
  --text-on-cream: rgba(20, 18, 15, 0.72);
  --eyebrow-on-cream: rgba(20, 18, 15, 0.64); /* do not lighten: 0.5 fails AA */
  --rule-on-dark: rgba(245, 237, 231, 0.16);
  --rule-on-dark-soft: rgba(245, 237, 231, 0.1);
  --rule-on-cream: rgba(20, 18, 15, 0.18);
  --field-line: rgba(245, 237, 231, 0.28);

  /* ---- Layout ---- */
  --gutter: clamp(18px, 5vw, 44px);
  --section-y: clamp(56px, 9vw, 110px);
  --section-y-tall: clamp(56px, 11vw, 130px);
  --panel-pad: clamp(26px, 5vw, 48px);
  --max-bleed: 1500px;
  --max-wide: 1250px;
  --max-narrow: 1100px;
  --max-prose: 1000px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--ground);
  color: var(--cream);
  font-family: "Syne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; /* Syne has no 300 */
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
/* height:auto is load-bearing: max-width shrinks the width, and without it the
   height attribute is still honoured literally, stretching the image. */
img, video { max-width: 100%; height: auto; display: block; }

/* ---- Type scale ---- */
h1, h2, h3, h4 {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0;
}

/* Italic + copper is the standard emphasis treatment inside headlines. */
h1 em, h2 em, h3 em { font-style: italic; color: var(--copper); }
.on-cream h1 em, .on-cream h2 em, .on-cream h3 em { color: var(--copper-on-cream); }

.h-hero {
  font-size: clamp(30px, 7vw, 112px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.h-page {
  font-size: clamp(26px, 4.4vw, 70px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.h-section {
  font-size: clamp(26px, 4.8vw, 76px);
  line-height: 1.13;
  letter-spacing: -0.02em;
}
.h-sub {
  font-size: clamp(26px, 3.6vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.h-card { font-size: 26px; line-height: 1.2; }

.lede {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-on-dark);
  margin: 0;
}
p { margin: 0 0 1em; color: var(--text-on-dark-soft); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
}
.on-cream .eyebrow { color: var(--eyebrow-on-cream); }

/* Eyebrow preceded by a 44px copper rule. */
.eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow-rule::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--copper);
  flex: 0 0 auto;
}
.on-cream .eyebrow-rule::before { background: var(--copper-on-cream); }

/* ---- Layout helpers ---- */
.section { padding: var(--section-y) var(--gutter); }
.section-tall { padding: var(--section-y-tall) var(--gutter); }
.bleed { max-width: var(--max-bleed); margin: 0 auto; }
.wide { max-width: var(--max-wide); margin: 0 auto; }
.narrow { max-width: var(--max-narrow); margin: 0 auto; }
.prose { max-width: var(--max-prose); margin: 0 auto; }

.on-raised { background: var(--ground-raised); }
.on-cream {
  background: var(--cream);
  color: var(--ground);
}
.on-cream p { color: var(--text-on-cream); }
.on-cream a { color: var(--copper-on-cream); }

/* Every multi-item grid is auto-fit, never a fixed column count. A fixed grid
   with a lit container background paints an empty bordered cell wherever the
   item count does not divide evenly. */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Where the last row must stretch to fill. The 1px gap over a lit container
   background is how dividers are drawn — never border-right on the children,
   which leaves a stray rule at the container's right edge. */
.tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule-on-dark);
}
.tile-grid > * {
  flex: 1 1 260px;
  background: var(--ground);
}

/* Text on one side, button on the other. Never 1fr auto — it never collapses. */
.row-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 19px 38px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-copper { background: var(--copper); color: var(--ground); }
.btn-copper:hover { background: var(--cream); color: var(--ground); }
.btn-dark { background: var(--ground); color: var(--cream); }
.btn-dark:hover { background: var(--copper); color: var(--ground); }
.btn-outline {
  background: transparent;
  color: var(--copper);
  border: 1px solid var(--copper);
  padding: 12px 22px;
  letter-spacing: 0.2em;
  font-size: 11px;
}
.btn-outline:hover { background: var(--cream); color: var(--ground); border-color: var(--cream); }

.price-line {
  font-size: 14px;
  color: var(--text-on-dark-faint);
}

/* The diagonal pattern used behind CTA and form sections. */
.pattern-diagonal { position: relative; overflow: hidden; }
.pattern-diagonal::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: repeating-linear-gradient(135deg, var(--copper) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.pattern-diagonal > * { position: relative; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--copper);
  color: var(--ground);
  padding: 12px 20px;
  z-index: 100;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

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

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 18, 15, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-on-dark-soft);
}
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.brand img { height: 32px; width: auto; }
.brand span {
  font-family: "Spectral", Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  min-width: 0; /* so an unanticipated width can never clip the CTA */
  align-items: center;
  gap: 10px 22px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.main-nav a { white-space: nowrap; transition: color 0.15s ease; }
.main-nav a:hover { color: var(--copper); }
.main-nav a[aria-current="page"] { color: var(--copper); }

.header-cta { flex: 0 1 auto; min-width: 0; }
.header-cta.is-current { background: var(--copper); color: var(--ground); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(245, 237, 231, 0.25);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 1px; background: var(--cream); }

.mobile-nav { display: none; }

/* At the design's spacing the desktop row needs 1156px: brand 196 + nav 624 +
   CTA 200, plus two 24px row gaps and the 44px gutters. That is 16px more than
   the 1140px breakpoint, so the row wrapped to two lines between 1140 and 1156.
   Tightening the gaps across the narrow desktop band closes it; above 1280px
   the design's own spacing is used untouched. flex-wrap stays on the row either
   way, so no width can ever push the CTA off-screen. */
@media (min-width: 1140px) and (max-width: 1279px) {
  .header-row { gap: 12px 16px; }
  .main-nav { gap: 10px 20px; }
}

/* The desktop row's intrinsic width is ~1130px with 7 links plus the CTA.
   Switching lower than this leaves a dead zone where the nav renders but the
   CTA is pushed off-screen and unreachable. */
@media (max-width: 1139px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav[data-open="true"] {
    display: flex;
    flex-direction: column;
    padding: 6px var(--gutter) 22px;
    border-top: 1px solid var(--rule-on-dark-soft);
  }
  .mobile-nav a {
    padding: 13px 0;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(245, 237, 231, 0.08);
    min-height: 44px;
  }
  .mobile-nav a[aria-current="page"] { color: var(--copper); }
  .mobile-nav .btn {
    margin-top: 16px;
    padding: 16px 22px;
    text-align: center;
    border-bottom: 0;
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--ground-deep);
  border-top: 1px solid var(--rule-on-dark-soft);
  padding: clamp(40px, 6vw, 56px) var(--gutter) 36px;
}
.site-footer.is-full { padding: clamp(48px, 7vw, 70px) var(--gutter) 40px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}
.site-footer.is-full .footer-cols { gap: 40px; }
.site-footer.is-compact .footer-cols {
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule-on-dark-soft);
}
.footer-brand-name {
  font-family: "Spectral", Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-blurb {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 237, 231, 0.55);
  margin: 0 0 20px;
  max-width: 340px;
}
.footer-col-title {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 237, 231, 0.45);
  margin-bottom: 18px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
  color: rgba(245, 237, 231, 0.8);
}
.footer-links a:hover { color: var(--copper); }

.footer-social {
  display: flex;
  gap: 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}
.footer-social a:hover { color: var(--cream); }

.footer-legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-on-dark-soft);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(245, 237, 231, 0.45);
}
.footer-legal a:hover { color: var(--copper); }
.footer-legal-links { display: flex; gap: 18px; }

.footer-note-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 26px;
}
.footer-note-row p {
  font-size: 14px;
  color: rgba(245, 237, 231, 0.5);
  margin: 0;
  max-width: 520px;
}
.footer-note-row .footer-social { color: rgba(245, 237, 231, 0.6); gap: 20px; }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  /* minmax(0, 1fr), not the implicit auto track. A grid item's min-width is
     auto, so an auto track grows to its content's min-content width — a hero
     containing a two-column grid then forced the whole page 286px wider than
     the phone it was on. */
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  background: var(--ground); /* never a transparent void while video buffers */
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 15, 0.95) 6%,
    rgba(20, 18, 15, 0.4) 50%,
    rgba(20, 18, 15, 0.55) 100%);
}
.hero-body {
  position: relative;
  padding: var(--section-y-tall) var(--gutter) 70px;
  max-width: var(--max-wide);
}
.hero-body .lede { max-width: 680px; margin: 0 0 40px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* WCAG 2.2.2: any motion over five seconds needs a visible control. */
.media-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 15, 0.7);
  border: 1px solid rgba(245, 237, 231, 0.35);
  color: var(--cream);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.media-toggle:hover { border-color: var(--copper); color: var(--copper); }

/* ---- Credential band ---- */
.credential-band {
  background: var(--copper);
  color: var(--ground);
}
.credential-band .cred {
  padding: 44px 34px;
  border-right: 1px solid rgba(20, 18, 15, 0.16);
}
.credential-band .cred:last-child { border-right: 0; }
.cred-title {
  font-family: "Spectral", Georgia, serif;
  font-size: 30px;
  line-height: 1.12;
  margin-bottom: 14px;
}
.cred-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(20, 18, 15, 0.78);
}

/* ---- Capability rows ---- */
.capability-grid { gap: 0 70px; }
.capability {
  display: grid;
  grid-template-columns: clamp(56px, 14vw, 96px) 1fr;
  gap: 26px;
  padding: 32px 0;
  border-top: 1px solid var(--rule-on-dark);
  align-items: start;
}
.capability-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  padding-top: 6px;
}
.capability h3 { margin: 0 0 10px; }
.capability p { font-size: 16px; line-height: 1.7; }

/* ---- Service tiles ---- */
.service-tile {
  display: block;
  background: var(--ground-raised);
  overflow: hidden;
}
.service-tile-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #231F1A;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
}
.service-tile-body { padding: 32px 30px 36px; }
.service-tile h3 { font-size: 32px; line-height: 1.12; margin: 0 0 14px; }
.service-tile p { font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.service-tile .more {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ---- Review carousel ---- */
.review-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 0 var(--gutter) 26px;
}
.review {
  flex: 0 0 min(400px, 82vw);
  background: var(--ground-raised);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  min-height: 300px;
}
.review blockquote {
  font-family: "Spectral", Georgia, serif;
  font-size: 21px;
  line-height: 1.45;
  margin: 0;
}
.review figcaption {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-on-dark);
  font-size: 13px;
  color: rgba(245, 237, 231, 0.65);
}

/* ---- Form ---- */
.form-panel {
  background: var(--ground);
  padding: var(--panel-pad) clamp(22px, 5vw, 46px);
  border-top: 2px solid var(--copper);
}
.form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 32px 30px;
}
.field-full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 237, 231, 0.6);
  margin-bottom: 6px;
}
input, select {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  outline: none;
}
input:focus, select:focus { border-bottom-color: var(--copper); }
select option { background: var(--ground-raised); color: var(--cream); }
input[type="date"] { color-scheme: dark; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 40px;
}
.form-actions .aside { font-size: 14px; color: rgba(245, 237, 231, 0.55); }
.form-actions .aside a {
  color: var(--copper);
  border-bottom: 1px solid rgba(206, 147, 117, 0.4);
}
.form-note {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(245, 237, 231, 0.45);
  margin: 28px 0 0;
}
.form-status { display: none; margin: 24px 0 0; font-size: 15px; }
.form-status.is-visible { display: block; }
.form-status.is-error { color: #E9A08A; }
/* Honeypot. display:none specifically, not off-screen positioning: an input
   that is merely moved off-screen is still rendered, and iOS autofill and
   password managers will fill it. Anything in _gotcha makes Formspree drop the
   submission as spam and still return 200, so the visitor sees the thank-you
   page and the inquiry is silently lost. The pre-redesign form used
   display:none and delivered correctly. */
.hp { display: none; }

/* ---- Motion ----
   lineUp is only ever used on masked elements. Applied to anything without an
   overflow:hidden mask it starts the element 105% below its position, and
   unmasked neighbours travel up through each other on load. */
@keyframes lineUp {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* The mask needs the padding/margin pair or descenders are clipped. */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.line-mask > span {
  display: block;
  animation: lineUp 0.9s var(--ease) both;
}
.line-1 > span { animation-delay: 0.08s; }
.line-2 > span { animation-delay: 0.18s; }
.line-3 > span { animation-delay: 0.28s; }

.rise { animation: riseIn 0.9s var(--ease) both; }
.rise-1 { animation-delay: 0.4s; }
.rise-2 { animation-delay: 0.5s; }

.is-revealing {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Page hero (photo or pattern ground, no video) ---- */
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-scrim-photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 15, 0.95) 8%,
    rgba(20, 18, 15, 0.38) 58%,
    rgba(20, 18, 15, 0.55) 100%);
}
.hero-short { min-height: 82vh; }

/* ---- Phase columns ---- */
.phase-grid { border-top: 1px solid var(--rule-on-dark); }
.phase {
  padding: 44px 36px 8px;
  border-right: 1px solid var(--rule-on-dark);
}
.phase:last-child { border-right: 0; }
.phase-num {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
}
.phase h3 { font-size: 32px; margin: 0 0 16px; }
.phase p { font-size: 16px; line-height: 1.7; margin: 0; }

/* ---- Music categories ---- */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px;
  background: rgba(245, 237, 231, 0.14);
}
.music-card {
  background: var(--ground-raised);
  padding: 44px 40px;
}
.music-card h3 { font-size: 32px; margin: 0 0 16px; }
.music-card p { font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.music-artists-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.music-artists {
  font-size: 16px;
  color: var(--text-on-dark);
  line-height: 1.6;
}

/* ---- Venue tiles ---- */
.venue-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(245, 237, 231, 0.12);
  border: 1px solid rgba(245, 237, 231, 0.12);
}
.venue-tile {
  background: var(--ground);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
}
.venue-tile-name {
  font-family: "Spectral", Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
}
.venue-tile-place {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(206, 147, 117, 0.85);
}

/* ---- Numbered process steps ---- */
.step {
  display: grid;
  grid-template-columns: clamp(56px, 14vw, 120px) 1fr;
  gap: 36px;
  padding: 38px 0;
  border-top: 1px solid var(--rule-on-cream);
  align-items: start;
}
.step-num {
  font-family: "Spectral", Georgia, serif;
  font-size: 56px;
  line-height: 1;
  color: rgba(20, 18, 15, 0.28);
}
.step h3 { font-size: 32px; margin: 0 0 12px; }
.step p { font-size: 17px; line-height: 1.7; margin: 0; max-width: 900px; }

/* Dark-ground variant of the same pattern. */
.step-dark { border-top-color: var(--rule-on-dark); }
.step-dark .step-num { color: rgba(245, 237, 231, 0.28); }

/* ---- Image band ---- */
.image-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.image-band img {
  width: 100%;
  height: clamp(240px, 58vh, 640px);
  object-fit: cover;
}

/* ---- FAQ accordions ----
   Native details/summary. The question is a real h3 so the highest-value
   query-matching text carries heading weight. */
.faq { max-width: 1020px; margin: 0 auto; }
.faq details {
  border-top: 1px solid var(--rule-on-dark);
  padding: 26px 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  font-size: 24px;
  line-height: 1.3;
  margin: 0;
}
.faq-marker {
  font-family: inherit;
  font-size: 22px;
  color: var(--copper);
  flex: 0 0 auto;
}
.faq details[open] .faq-marker { transform: rotate(45deg); }
.faq details p {
  font-size: 16px;
  line-height: 1.75;
  margin: 18px 0 0;
  max-width: 840px;
}
.on-cream .faq details { border-top-color: var(--rule-on-cream); }
.on-cream .faq-marker { color: var(--copper-on-cream); }

/* ---- Section intro block ---- */
.section-intro { max-width: 880px; margin-bottom: 56px; }
.section-intro h2 { margin: 20px 0 24px; }
.section-intro p { font-size: 18px; line-height: 1.7; margin: 0; }

/* Heading on one side, supporting note on the other. */
.head-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.head-split p {
  font-size: 16px;
  color: var(--text-on-dark-faint);
  max-width: 420px;
  margin: 0;
}

/* The inquiry panel sits on the darker ground by default. On pages whose CTA
   section is already #14120F, the panel steps up instead of down. */
.form-panel.is-raised { background: var(--ground-raised); }

/* ---- Corporate restraint ----
   Copper is held to roughly 5% of the corporate page: small section labels,
   FAQ markers, and the one submit button. The hero rule, eyebrow, and CTA are
   neutral cream, and there is no copper credential band. */
.eyebrow-neutral { color: rgba(245, 237, 231, 0.7); }
.eyebrow-rule.is-neutral::before { background: rgba(245, 237, 231, 0.5); }

.btn-outline-neutral {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245, 237, 231, 0.6);
}
.btn-outline-neutral:hover { background: var(--cream); color: var(--ground); }

.hero-corporate { min-height: 76vh; }
.hero-scrim-corporate {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 15, 0.96) 8%,
    rgba(20, 18, 15, 0.5) 62%,
    rgba(20, 18, 15, 0.62) 100%);
}

/* The fact strip stands in for the copper credential band. */
.fact-strip {
  border-top: 1px solid rgba(245, 237, 231, 0.14);
  border-bottom: 1px solid rgba(245, 237, 231, 0.14);
}
.fact {
  padding: 40px 34px;
  border-right: 1px solid rgba(245, 237, 231, 0.14);
}
.fact:last-child { border-right: 0; }
.fact-title {
  font-family: "Spectral", Georgia, serif;
  font-size: 26px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.fact-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 237, 231, 0.62);
}

/* ---- Two-column editorial split ---- */
.col-split { gap: 70px; align-items: start; }
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(245, 237, 231, 0.76);
}
.col-stack p { margin: 0; color: inherit; }

/* ---- Bordered cell grids ---- */
.cell-grid { border-top: 1px solid var(--rule-on-dark); }
.cell {
  padding: 40px 34px 8px;
  border-right: 1px solid var(--rule-on-dark);
}
.cell:last-child { border-right: 0; }
.cell h3 { font-size: 28px; line-height: 1.2; margin: 0 0 14px; }
.cell p { font-size: 16px; line-height: 1.7; margin: 0; }

.cell-boxed {
  padding: 38px 36px 34px;
  border-right: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}
.cell-boxed h3 { font-size: 28px; line-height: 1.2; margin: 0 0 14px; }
.cell-boxed p { font-size: 16px; line-height: 1.7; margin: 0; }

/* Wider label column for the corporate process rows. */
.capability-wide {
  grid-template-columns: clamp(56px, 14vw, 110px) 1fr;
  gap: 34px;
  padding: 34px 0;
}
.capability-wide h3 { font-size: 28px; }
.capability-wide p { font-size: 17px; max-width: 900px; }

.full-image {
  width: 100%;
  height: clamp(240px, 62vh, 680px);
  object-fit: cover;
}

/* ---- About ---- */
/* Sticky only once .grid-split actually resolves to two columns. Stacked into
   one column the portrait pins while the narrative scrolls underneath it, and
   the credit line collides with the body text. Two 320px tracks plus the 70px
   gap need a 710px container, which is a ~790px viewport after gutters. */
.sticky-col { position: static; }
@media (min-width: 800px) {
  .sticky-col { position: sticky; top: 110px; }
}
.portrait-credit {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 20px 0 0;
}
.narrative {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-on-dark-soft);
}
.narrative p { margin: 0; color: inherit; }
.narrative .lead-para {
  font-size: 21px;
  line-height: 1.7;
  color: rgba(245, 237, 231, 0.92);
}

/* A closing line pulled out as a serif quote rather than a heading. */
.pull-quote {
  font-family: "Spectral", Georgia, serif;
  font-size: 26px;
  line-height: 1.5;
  font-style: italic;
  color: var(--cream);
  border-left: 1px solid var(--copper);
  padding-left: 28px;
  margin: 0;
}

/* Cream cards separated by 2px gaps over a lit container, the cream-ground
   counterpart of the dark divider pattern. */
.cream-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: rgba(20, 18, 15, 0.16);
  border-top: 1px solid var(--rule-on-cream);
}
.cream-card {
  background: var(--cream);
  padding: 42px 34px;
}
.cream-card h3 { font-size: 32px; margin: 0 0 16px; }
.cream-card p { font-size: 16px; line-height: 1.7; margin: 0; }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.quote-card {
  margin: 0;
  background: var(--ground);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}
.quote-card blockquote {
  font-family: "Spectral", Georgia, serif;
  font-size: 21px;
  line-height: 1.5;
  margin: 0;
}
.quote-card figcaption {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(245, 237, 231, 0.65);
  padding-top: 18px;
  border-top: 1px solid var(--rule-on-dark);
}

.rule-list > * {
  padding: 22px 0;
  border-top: 1px solid rgba(245, 237, 231, 0.14);
  font-size: 19px;
  color: var(--text-on-dark);
}

/* ---- Centred CTA ---- */
.cta-center {
  padding: clamp(56px, 12vw, 140px) var(--gutter);
  text-align: center;
}
.cta-center .inner { max-width: 880px; margin: 0 auto; }
.cta-center p { margin: 0 auto 38px; max-width: 640px; font-size: 19px; line-height: 1.6; }
.cta-center .after {
  margin: 30px auto 0;
  font-size: 13px;
  color: var(--text-on-dark-faint);
}
.pattern-strong::before { opacity: 0.14; }

/* ---- Check Availability ----
   Every block on this page sits inside one .prose container, so the heading,
   the form panel, the badge strip, and the closing block cannot drift out of
   alignment with each other. */
textarea {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  outline: none;
  resize: vertical;
  min-height: 110px;
}
textarea:focus { border-bottom-color: var(--copper); }
input[type="time"] { color-scheme: dark; }

.field-price-note {
  font-size: 13px;
  color: var(--copper);
  margin: 10px 0 0;
  display: none;
}
.field-price-note.is-visible { display: block; }

.badge-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: rgba(245, 237, 231, 0.14);
  margin-top: 2px;
}
.badge {
  background: var(--ground-raised);
  padding: 30px 28px;
}
.badge-value {
  font-family: "Spectral", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.badge-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(206, 147, 117, 0.9);
}

.closing-block {
  margin-top: 70px;
  border-top: 1px solid rgba(245, 237, 231, 0.14);
  padding-top: 50px;
}
.inline-link {
  color: var(--copper);
  border-bottom: 1px solid rgba(206, 147, 117, 0.4);
}

/* ---- Experiences / Karaoke / School Events ---- */
.photo-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.photo-trio img {
  width: 100%;
  height: clamp(260px, 48vh, 520px);
  object-fit: cover;
}
/* The middle frame drops to break the row's top line. It only offsets once
   there is more than one column to offset against. */
@media (min-width: 800px) {
  .photo-trio img:nth-child(2) { margin-top: 44px; }
}

.dark-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px;
  background: var(--rule-on-dark);
  border-top: 1px solid var(--rule-on-dark);
}
.format-card {
  background: var(--ground-raised);
  padding: 46px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.format-card h3 { font-size: 34px; margin: 0; }
.format-card p { font-size: 17px; line-height: 1.7; margin: 0; }

.link-more {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid rgba(206, 147, 117, 0.4);
  padding-bottom: 6px;
}

.center-block {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.center-block p { font-size: 19px; line-height: 1.75; margin: 0; }

/* Stacked and inline lists drawn with the same 1px-gap divider pattern. */
.stack-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule-on-dark);
  border: 1px solid var(--rule-on-dark);
}
.stack-list > * {
  background: var(--ground-raised);
  padding: 22px 24px;
  font-family: "Spectral", Georgia, serif;
  font-size: 21px;
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule-on-dark);
  border: 1px solid var(--rule-on-dark);
}
.chip-list > * {
  background: var(--ground-raised);
  padding: 26px 24px;
  font-family: "Spectral", Georgia, serif;
  font-size: 22px;
  flex: 1 1 auto;
}

.media-tall {
  width: 100%;
  height: clamp(260px, 50vh, 560px);
  object-fit: cover;
}
.hero-karaoke { min-height: 74vh; }
.hero-school { min-height: 70vh; }

/* ---- Insights index ---- */
.post-list {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-on-dark);
}
.post-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: baseline;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule-on-dark);
}
.post-row h3 {
  font-size: clamp(20px, 2.8vw, 38px);
  line-height: 1.2;
  margin: 0 0 14px;
}
.post-row p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; max-width: 680px; }
.post-row .meta {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(206, 147, 117, 0.9);
  margin: 0;
}
.post-row .arrow {
  font-family: "Spectral", Georgia, serif;
  font-size: 32px;
  color: rgba(206, 147, 117, 0.6);
}
.post-row:hover h3 { color: var(--copper); }

.page-mark { height: 64px; width: auto; margin: 0 auto 28px; }

/* ---- Article ---- */
.article { max-width: 820px; margin: 0 auto; }
.article-head { text-align: center; margin-bottom: 56px; }
.article-head .page-mark { height: 56px; margin-bottom: 24px; }
.article-head h1 {
  font-size: clamp(25px, 4.8vw, 72px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 22px 0 26px;
  text-wrap: balance;
}
.article-meta {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(206, 147, 117, 0.9);
  margin: 0;
}
.article-byline {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(245, 237, 231, 0.55);
  margin: 10px 0 0;
}
.article-body > * + * { margin-top: 26px; }
.article-body p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--text-on-dark-soft);
  margin: 0;
}
.article-body h2 {
  font-size: 34px;
  line-height: 1.22;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 237, 231, 0.14);
}
.article-body > h2 { margin-top: 48px; }

.about-box {
  margin: 64px 0 0;
  background: var(--ground-raised);
  padding: 38px 34px;
  border-top: 2px solid var(--copper);
}
.about-box-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 14px;
}
.about-box p { font-size: 17px; line-height: 1.75; margin: 0; }

.back-link {
  display: block;
  text-align: center;
  margin-top: 52px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.back-link:hover { color: var(--copper); }

/* ---- Thank you ---- */
.next-steps {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: rgba(245, 237, 231, 0.14);
  border-top: 1px solid rgba(245, 237, 231, 0.14);
}
.next-step {
  background: var(--ground-raised);
  padding: 44px 34px;
}
.next-step h2 { font-size: 28px; line-height: 1.25; margin: 0 0 18px; }
.next-step p { font-size: 16px; line-height: 1.75; margin: 0; }

/* The opening line of each article is set as a serif lead. */
.article-body > p:first-child {
  font-family: "Spectral", Georgia, serif;
  font-size: 26px;
  line-height: 1.5;
  font-style: italic;
  color: var(--cream);
}

/* ---- Calendly meeting pages ---- */
.calendly-frame {
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid rgba(245, 237, 231, 0.14);
  background: var(--ground-raised);
}
.calendly-frame iframe {
  width: 100%;
  height: 760px;
  border: 0;
  display: block;
}

/* ---- Legal ----
   The mockup shows one page with a tab switcher. These ship as two real URLs,
   so the switcher is a pair of links between them. */
.legal-wrap { max-width: 900px; margin: 0 auto; }
.legal-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.legal-tabs a {
  padding: 12px 22px;
  border: 1px solid rgba(245, 237, 231, 0.25);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.legal-tabs a:hover { border-color: var(--copper); color: var(--copper); }
.legal-tabs a[aria-current="page"] {
  background: var(--copper);
  color: var(--ground);
  border-color: var(--copper);
}

.legal-body > * + * { margin-top: 22px; }
.legal-body p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(245, 237, 231, 0.76);
  margin: 0;
}
.legal-body h2 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 237, 231, 0.14);
}
.legal-body > h2 { margin-top: 44px; }
.legal-body ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid rgba(206, 147, 117, 0.5);
  margin: 0;
  list-style: none;
}
.legal-body li {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 237, 231, 0.76);
}

/* ---- Location pages (venues and cities) ---- */
.hero-location { min-height: clamp(380px, 64vh, 700px); }

/* Pages without a confirmed photograph use the copper diagonal instead. This
   is a content gap waiting on real photography, not a styling preference:
   never put an image on a location page unless it was shot there. */
.hero-pattern {
  position: relative;
  display: block;
  /* Content height, not 92vh: with no photograph behind it there is nothing to
     fill a viewport-tall band with, and the design sets these to their padding. */
  min-height: 0;
}
.hero-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image: repeating-linear-gradient(135deg, var(--copper) 0 1px, transparent 1px 22px);
}
.hero-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 18, 15, 0.55) 0%, rgba(20, 18, 15, 0.9) 100%);
}
.hero-pattern > * { position: relative; z-index: 1; }

.hero-scrim-location {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 15, 0.94) 6%,
    rgba(20, 18, 15, 0.4) 58%,
    rgba(20, 18, 15, 0.58) 100%);
}
.hero-location .hero-body,
.hero-pattern .hero-body { max-width: 1200px; padding-bottom: 58px; }
.hero-location h1, .hero-pattern h1 { max-width: 1000px; }

/* The clip control sits top-right here, clear of the headline. */
.clip-toggle {
  top: clamp(18px, 4vw, 34px);
  bottom: auto;
  width: 46px;
  height: 46px;
  border-color: rgba(245, 237, 231, 0.4);
  backdrop-filter: blur(4px);
}
.clip-toggle:hover {
  background: var(--copper);
  color: var(--ground);
  border-color: var(--copper);
}

.location-intro { gap: 70px; align-items: start; }
.location-intro .col-stack { padding-top: 38px; line-height: 1.8; }

/* Venue-knowledge cards: flex so the last row stretches to fill. */
.knowledge-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule-on-dark);
  border-top: 1px solid var(--rule-on-dark);
}
.knowledge-card {
  padding: 40px 34px 36px;
  flex: 1 1 260px;
  background: var(--ground);
}
.knowledge-card h3 { font-size: 26px; line-height: 1.2; margin: 0 0 14px; }
.knowledge-card p { font-size: 16px; line-height: 1.75; margin: 0; }

/* "A Wedding Here" */
.venue-quote {
  border-top: 1px solid rgba(245, 237, 231, 0.14);
}
.venue-quote blockquote {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-size: clamp(21px, 2.6vw, 34px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cream);
}
.venue-quote figcaption {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 237, 231, 0.18);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(245, 237, 231, 0.7);
}

/* Linked venue tiles */
.venue-tiles a.venue-tile { background: var(--ground-raised); padding: 22px; }
.venue-tiles a.venue-tile:hover { background: #231F1A; }
.venue-tiles a.venue-tile .venue-tile-name { font-size: 19px; line-height: 1.25; }
.venue-tiles a.venue-tile .venue-tile-place { letter-spacing: 0.14em; }

/* ---- Venues hub ---- */
.region-group { margin-bottom: 56px; }
.region-group h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-on-dark);
}
.town-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(245, 237, 231, 0.12);
  border: 1px solid rgba(245, 237, 231, 0.12);
  margin-top: 24px;
}
.town-tiles a {
  background: var(--ground);
  padding: 20px 22px;
  flex: 1 1 180px;
  font-family: "Spectral", Georgia, serif;
  font-size: 18px;
}
.town-tiles a:hover { background: var(--ground-raised); color: var(--copper); }

.label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}
.label-heading {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-ghost {
  padding: 17px 34px;
  border: 1px solid rgba(245, 237, 231, 0.3);
  color: var(--text-on-dark);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
}
.btn-ghost:hover { border-color: var(--cream); color: var(--cream); }
.btn-outline-sm { padding: 17px 34px; font-size: 12px; }

/* ---- Areas Served ---- */
.area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  background: rgba(245, 237, 231, 0.14);
  border-top: 1px solid rgba(245, 237, 231, 0.14);
}
.area-card {
  background: var(--ground);
  padding: 36px 32px;
  display: block;
}
.area-card:hover { background: var(--ground-raised); }
.area-card h2 { font-size: 28px; line-height: 1.2; margin: 0 0 10px; }
.area-card .geo {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(206, 147, 117, 0.9);
  margin: 0 0 14px;
}
.area-card .blurb {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(245, 237, 231, 0.66);
  margin: 0 0 18px;
}
.area-card .go {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ---- Cost page ---- */
.range-panel {
  background: var(--ground-raised);
  border-top: 2px solid var(--copper);
  padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 48px);
}
.range-panel h2 { margin: 16px 0 22px; }
.range-panel p { font-size: 17px; line-height: 1.8; margin: 0 0 26px; max-width: 780px; }

/* Set here rather than inline on the template, so the narrow-viewport rule
   that stacks these rows can actually override it. */
.driver {
  border-top-color: var(--rule-on-dark);
  grid-template-columns: clamp(56px, 14vw, 110px) 1fr;
  gap: 34px;
  padding: 32px 0;
}
.driver .step-num {
  font-size: 44px;
  color: rgba(206, 147, 117, 0.45);
}
.driver h3 { font-size: 26px; line-height: 1.2; margin: 0 0 10px; }
.driver p { font-size: 16px; line-height: 1.8; margin: 0; max-width: 900px; }

.compare-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px;
  background: rgba(20, 18, 15, 0.18);
  border-top: 1px solid rgba(20, 18, 15, 0.18);
}
.compare-card { background: var(--cream); padding: 36px 34px; }
.compare-card h3 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; }
.compare-card p { font-size: 16px; line-height: 1.8; margin: 0; }

.related-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: rgba(245, 237, 231, 0.14);
  margin-top: 28px;
}
.related-card { background: var(--ground); padding: 34px 30px; display: block; }
.related-card:hover { background: var(--ground-raised); }
.related-card h3 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; }
.related-card p { font-size: 15px; line-height: 1.7; margin: 0; color: rgba(245, 237, 231, 0.65); }


/* ---- Narrow-viewport corrections ---- */

/* The label column is clamp(56px, 14vw, 96px), which bottoms out at 56px on a
   phone. "Preparation" needs 83px and "Microphone" 85px, and neither can wrap,
   so the word ran straight over the heading beside it. Stack the label above
   the heading until the track is wide enough to hold the longest word. */
@media (max-width: 700px) {
  .capability,
  .capability-wide {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .capability-label { padding-top: 0; }
  .step,
  .driver {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Hero copy is sized for a hero that is mostly image with the text in the dark
   band at the bottom. On a phone the copy fills nearly the whole hero, so it
   rides up into the part of the scrim that is only 50% opaque and the text
   fights the photograph. Darken the scrim where that happens. */
@media (max-width: 800px) {
  .hero-scrim,
  .hero-scrim-photo,
  .hero-scrim-corporate,
  .hero-scrim-location {
    background: linear-gradient(to top,
      rgba(20, 18, 15, 0.96) 10%,
      rgba(20, 18, 15, 0.86) 60%,
      rgba(20, 18, 15, 0.8) 100%);
  }
}