/* ==========================================================================
   Aurora Concierge Group — Cinema design stylesheet
   Single hand-written CSS file. No preprocessor, no build step.
   Order: tokens -> reset -> motion primitives -> chrome -> type/buttons ->
   media/cards -> form -> FAQ/404 -> single 920px breakpoint (last).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Step 1: Design tokens (ported verbatim from design/aurora-tokens.css)
   -------------------------------------------------------------------------- */
:root {
  --ink:#2B1D14;
  --cream:#F5EDE1;
  --terra:#C2603A;
  --terra-text:#9F4B2A;
  --terra-btn:#9F4B2A;
  --gold:#D9A05B;
  --sand:#E4D5C2;
  --taupe:#B99E85;
  --bark:#6E5B49;
  --bark-lite:#A69076;
  --umber:#6E5B49;
  --line:#DCCFB9;
  --text-warm:#4C3E30;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Instrument Sans',Helvetica,Arial,sans-serif;
  --fs-label:12px;
  --fs-body:15px;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline:2px solid var(--terra-btn);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(217,160,91,0.4);
  border-radius:2px;
}
.skiplink {
  position:fixed; top:-100px; left:16px; z-index:100;
  background:var(--gold); color:var(--ink);
  padding:12px 20px; font:600 13px/1 var(--sans);
  letter-spacing:0.1em; text-transform:uppercase;
  transition:top 0.2s ease;
}
.skiplink:focus { top:12px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto !important; }
  [data-rise], [data-rise2] { opacity:1 !important; transform:none !important; }
  [data-wipe] { clip-path:none !important; }
  [data-par] { transform:none !important; }
}

/* --------------------------------------------------------------------------
   Step 2: Reset and page ground
   -------------------------------------------------------------------------- */
html, body { margin:0; padding:0; background:var(--ink); overflow-x:clip; }
html { scroll-behavior:smooth; }
* { box-sizing:border-box; }
body { color:var(--cream); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--gold); }
.is-cream a:hover, .is-terra a:hover { color:var(--terra-text); }
::selection { background:var(--terra); color:var(--cream); }
img { max-width:100%; }

/* --------------------------------------------------------------------------
   Step 3: Reveal and parallax primitives
   -------------------------------------------------------------------------- */
[data-rise]  { opacity:0; transform:translateY(48px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.16,.84,.28,1); }
[data-rise].on  { opacity:1; transform:none; }
[data-rise2] { opacity:0; transform:translateY(48px); transition:opacity 1s ease .18s, transform 1.1s cubic-bezier(.16,.84,.28,1) .18s; }
[data-rise2].on { opacity:1; transform:none; }
[data-wipe]  { clip-path:inset(0 0 100% 0); transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1); }
[data-wipe].on { clip-path:inset(0 0 0% 0); }
[data-par]   { will-change:transform; }

@keyframes drift       { from { transform:scale(1.12) translateY(0); } to { transform:scale(1.12) translateY(-3%); } }
@keyframes drift-fest  { from { transform:scale(1.1)  translateY(0); } to { transform:scale(1.1)  translateY(-3%); } }
@keyframes cinemarquee { from { transform:translateX(0); }            to { transform:translateX(-50%); } }

/* --------------------------------------------------------------------------
   Step 4: Chrome — progress bar, top nav, bottom tab bar, marquee
   -------------------------------------------------------------------------- */
.progress { position:fixed; top:0; left:0; right:0; z-index:60; height:3px; background:rgba(245,237,225,0.12); }
.progress-bar { height:100%; background:var(--terra); width:0%; }

.topnav { position:fixed; top:3px; left:0; right:0; z-index:50; display:flex;
  justify-content:space-between; align-items:center; padding:16px 36px;
  background:rgba(43,29,20,0.78); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); color:var(--cream); }
.topnav-mark { font-family:var(--serif); font-size:24px; font-weight:500; }
.topnav-links { display:flex; align-items:center; gap:26px; font-size:var(--fs-label);
  letter-spacing:0.18em; text-transform:uppercase; font-weight:500; }
.topnav-cta { border:1px solid #fff; padding:9px 16px; }
.topnav-cta.is-current { opacity:0.55; }
body[data-page="home"]     .topnav-links a[href="/"],
body[data-page="vision"]   .topnav-links a[href="/vision"],
body[data-page="services"] .topnav-links a[href="/services"],
body[data-page="festivals"] .topnav-links a[href="/festivals"] {
  opacity:0.55; border-bottom:1px solid #fff; padding-bottom:2px; pointer-events:none;
}
.topnav-call { display:none; font-size:var(--fs-label); letter-spacing:0.22em;
  text-transform:uppercase; font-weight:500; color:var(--cream);
  border-bottom:1px solid var(--gold); padding-bottom:3px; position:relative; top:5px; }

.tabbar { position:fixed; bottom:0; left:0; right:0; z-index:55; display:none;
  background:rgba(43,29,20,0.94); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(245,237,225,0.16);
  font-size:var(--fs-label); letter-spacing:0.06em; text-transform:uppercase; }
.tabbar-item { flex:1; display:flex; align-items:center; justify-content:center;
  padding:16px 4px 20px; color:var(--cream); }
.tabbar-item.is-current { font-weight:600; color:var(--gold);
  border-top:2px solid var(--gold); margin-top:-1px; }

.marquee-band { background:var(--ink); padding:52px 0; overflow:hidden;
  border-top:1px solid rgba(245,237,225,0.14);
  border-bottom:1px solid rgba(245,237,225,0.14); }
.marquee { display:flex; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }
.marquee-track { display:flex; gap:64px; align-items:baseline; flex:0 0 auto;
  animation:cinemarquee 34s linear infinite; white-space:nowrap;
  font-family:var(--serif); font-weight:500; font-size:21px; color:var(--cream); }
/* 21px is the value five of the six prototypes use (Vision, Services,
   Festivals, Contact, FAQ); only Home's own prototype uses 23px — see the
   body[data-page="home"] override in the min-width:921px block below. */

/* --------------------------------------------------------------------------
   Step 5: Type scale and buttons
   -------------------------------------------------------------------------- */
.eyebrow { margin:0 0 22px; font-size:var(--fs-label); letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold); }
/* Cream-section eyebrows declare color:var(--terra-text) explicitly in every
   prototype (e.g. Aurora Cinema.dc.html:137, :176) — keep. Terra-section
   eyebrows/muted text declare NO color in any prototype (e.g. Aurora
   Cinema.dc.html:130) and inherit color:var(--ink) from .is-terra itself;
   a prior .is-terra branch here invented --terra-text (1.43:1 contrast on
   --terra, effectively invisible) that was never in the design — removed,
   not just for fidelity but because it was a contrast defect.
   NOTE: .eyebrow's own base rule sets color:var(--gold) directly on the
   element (not just as a fallback), so simply deleting the .is-terra
   override does NOT make it inherit ink — a still-more-specific rule is
   required to force actual inheritance from .is-terra. See the explicit
   color:inherit on .is-terra .eyebrow below (kept on the existing
   margin-bottom rule for that selector, not a new one). */
.is-cream .eyebrow { color:var(--terra-text); }
#cinhero .eyebrow { letter-spacing:0.34em; }
#vishero .eyebrow { letter-spacing:0.34em; }
#vishero .h1 { font-size:clamp(48px,8vw,140px); line-height:1; }
#svchero .eyebrow { letter-spacing:0.34em; }
#svchero .h1 { font-size:clamp(48px,7.6vw,130px); line-height:1; max-width:16ch; }
#festhero .eyebrow { letter-spacing:0.34em; }
#festhero .h1 { font-size:clamp(48px,8vw,140px); line-height:0.98; }
/* #faqhero was missing these per-page overrides — a shared-class audit found
   it silently inheriting Home's oversized .h1 clamp and the non-hero 0.3em
   eyebrow letter-spacing instead of the 0.34em every other hero uses.
   Values from faq.dc.html:112-113 (Task 7). */
#faqhero .eyebrow { letter-spacing:0.34em; }
#faqhero .h1 { font-size:clamp(48px,7.6vw,120px); line-height:1; }
/* 404's hero — values from 404.dc.html:47-48. Unlike every other hero above,
   404's own <style> block (404.dc.html:25-28) does NOT collapse the eyebrow
   letter-spacing at 920px — it only overrides h1 font-size and hides
   data-word spans (which this page's nav doesn't carry anyway). So this
   rule is deliberately NOT mirrored with a 920px override the way
   #vishero/#svchero/#festhero/#faqhero are: its (0,2,0) specificity beats
   the bare mobile .eyebrow{letter-spacing:0.18em} rule in Step 9 at every
   width, keeping 0.34em on mobile too — verified by measuring computed
   letter-spacing at 375px. Reported as a discrepancy, not silently
   normalised to match the other five heroes. */
#nfhero .eyebrow { letter-spacing:0.34em; }
#nfhero .h1 { font-size:clamp(48px,7.6vw,120px); line-height:1; }
/* #conhero was missing these per-page overrides, same gap as #faqhero/#nfhero
   before their Task 7/8 fixes. Values from Aurora Cinema Contact.dc.html:113-114.
   The max-width:16ch matters — without it the headline wraps wrongly. */
#conhero .eyebrow { letter-spacing:0.34em; }
#conhero .h1 { font-size:clamp(48px,7.6vw,130px); line-height:1; max-width:16ch; }
.h2-fest { margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,4vw,64px); line-height:1.02; letter-spacing:-0.02em; }
.is-terra .eyebrow { margin-bottom:30px; color:inherit; }
.h1 { margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(52px,8.6vw,150px); line-height:1.02; letter-spacing:-0.02em;
  text-wrap:balance; }
.h2 { margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(36px,5.2vw,86px); line-height:0.98; letter-spacing:-0.02em; }
.h2-svc { margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,4.4vw,72px); line-height:1.02; letter-spacing:-0.02em; }
.h3 { margin:0; font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.05; }
.copy { font-size:15.5px; line-height:1.7; text-wrap:pretty; max-width:44ch; }
.lede { font-family:var(--serif); font-size:clamp(20px,1.8vw,26px); line-height:1.45; }
.muted { color:var(--taupe); }
/* No prototype has a .muted-equivalent element inside a --cream section
   (checked every cream section across all six .dc.html files: Home ch2/
   ch4, Vision founder, Services cat-01/02/03, Festivals' three rows,
   Contact's closing block, FAQ) — so this value is unverified either way;
   left unchanged per "leave the cream branch alone rather than guessing."
   The .is-terra branch that used to share this line is removed: it
   invented --bark-lite (1.37:1 contrast on --terra) where every prototype
   with a --terra-section .muted-equivalent (Festivals' closing subtext,
   Aurora Cinema Festivals.dc.html:165) declares no color and inherits
   var(--ink) from .is-terra instead — a contrast defect, not just drift.
   NOTE: .muted's own base rule sets color:var(--taupe) directly (same
   issue as .eyebrow above), so an explicit color:inherit is required
   below to actually pull ink from .is-terra rather than falling through
   to taupe. */
.is-cream .muted { color:var(--bark-lite); }
.is-terra .muted { color:inherit; }
.rule { padding-top:22px; border-top:1px solid var(--line); }

.btn { display:inline-block; border:1px solid var(--ink); padding:16px 34px;
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.2em;
  transition:background 200ms ease, color 200ms ease; }
.btn:hover { background:var(--ink); color:var(--cream); }
/* Step 2's theme link-hover rule — .is-cream a:hover, .is-terra a:hover
   { color:var(--terra-text) } — is (0,2,0) and outranks .btn:hover's
   (0,1,0). A .btn link inside a cream or terracotta section therefore
   hovered to terracotta text on the ink fill: #9F4B2A on #2B1D14 is 2.72:1
   on 12px uppercase, well under WCAG AA's 4.5:1, where cream on ink is
   ~13:1. Home's "Every service →" (index.html, .sec.is-cream.sec-carry) is
   the only such link on the seven pages, but the rule is written for the
   class, not the instance. The prototype fixes this with
   `.hv0:hover { ... !important }` (Aurora Cinema.dc.html:93) purely to beat
   its own section[data-lite] a:hover; here it is re-asserted at (0,3,0)
   instead — the same specificity-not-!important approach used by
   .sec-close a.btn-fest:hover below. */
.is-cream a.btn:hover, .is-terra a.btn:hover { background:var(--ink); color:var(--cream); }
.btn-on-dark { border-color:var(--gold); color:var(--gold); }
.btn-on-dark:hover { background:var(--gold); color:var(--ink); }
/* Home's own two chapter CTAs each carry one-off prototype overrides that
   got mapped onto the generic .btn/.btn-on-dark classes without them.
   .btn/.btn-on-dark are used nowhere else (grepped every built page), but
   these overrides are one-off values for these two specific links, not a
   correction to the shared classes themselves — kept as separate,
   Home-only classes per that distinction (Aurora Cinema.dc.html:155,:167). */
.btn-svc { letter-spacing:0.18em; font-weight:600; }
.btn-fest-link { color:var(--cream); padding:15px 30px; letter-spacing:0.16em; font-weight:500; }
.btn-solid { background:var(--terra-btn); color:var(--cream); border:0;
  padding:20px 44px; font-size:var(--fs-label); letter-spacing:0.2em;
  text-transform:uppercase; font-weight:600; cursor:pointer; }
.btn-solid:hover { background:var(--cream); color:var(--ink); }
/* Festivals' closing-CTA button sits on a terra background and needs an ink
   (not terra-btn) base fill; .btn-fest overrides just the color, declared
   after .btn-solid so it wins the tie on source order without !important,
   and its :hover (same specificity as .btn-solid:hover) wins the same way. */
.btn-fest { background:var(--ink); }
.btn-fest:hover { background:var(--cream); color:var(--ink); }
.sec-close a[href^="tel:"]:hover { color:var(--gold); font-style:italic; }
/* Festivals' CTA button is an <a href="tel:..."> inside .sec-close, so the rule
   above also matches it on hover (both are (0,3,1) specificity) — without this,
   source order alone would give the button gold italic text instead of ink.
   Tied specificity + declared after wins the button back its own hover style. */
.sec-close a.btn-fest:hover { color:var(--ink); font-style:normal; }

/* --------------------------------------------------------------------------
   Step 6: Media, cards, and section layout
   -------------------------------------------------------------------------- */
.sec { padding:120px 36px; }
/* Per-section desktop padding — Aurora Cinema.dc.html sets a different value
   per section; .sec above is the default (Chapter one matches it exactly). */
.sec-carry   { padding:130px 36px; }
.sec-promise { padding:100px 36px; }
.sec-close   { padding:110px 36px 56px; }
.sec-vishero { padding:160px 36px 70px; }
.sec-festhero { padding:120px 36px 70px; }
/* FAQ's hero bottom-aligns its content within a min-height (faq.dc.html:111),
   unlike Vision/Services/Home which just let padding size the section — a
   genuine per-page difference, not a value that fits .sec-vishero. */
.sec-faqhero { min-height:52svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:160px 36px 60px; }
/* Contact's hero — Aurora Cinema Contact.dc.html:112. Unique padding, not
   shared with any other hero. */
.sec-conhero { padding:150px 36px 60px; }
/* Contact's form section — Aurora Cinema Contact.dc.html:117. Asymmetric
   top/bottom (100/120), unlike .sec-promise's symmetric 100px, so it needs
   its own class rather than reuse. FAQ's questions section (faq.dc.html:117)
   specifies a byte-identical padding, so faq.html reuses this class rather
   than declaring a second one with the same three values. */
.sec-conform { padding:100px 36px 120px; }
.is-cream { background:var(--cream); color:var(--ink); }
.is-ink   { background:var(--ink);   color:var(--cream); }
.is-terra { background:var(--terra); color:var(--ink); }
.sec-photo { position:relative; display:flex; align-items:flex-end; overflow:clip; padding:120px 36px 90px; }
/* .sec-vista overrides .sec-photo's padding-bottom on Vision's vista section.
   Both are (0,1,0); compounded into .sec-photo.sec-vista (0,2,0) so it wins
   on specificity regardless of source order — a bare .sec-vista rule below
   .sec-photo previously lost silently since same-specificity + later source
   order favored .sec-photo instead. */
.sec-photo.sec-vista { padding-bottom:80px; }
.sec-photo > .media-bg { position:absolute; inset:-8% 0; }
.sec-photo > *:not(.media-bg) { position:relative; }

.wrap      { max-width:1360px; margin:0 auto; }
.wrap-1200 { max-width:1200px; margin:0 auto; }
.wrap-1000 { max-width:1000px; margin:0 auto; }
.wrap-980  { max-width:980px;  margin:0 auto; }

.media { display:block; width:100%; overflow:hidden; max-height:80vh; }
.media img, .media picture { display:block; width:100%; height:100%; object-fit:cover; }

.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.card { display:flex; flex-direction:column; gap:18px; }
.card-stair-2 { margin-top:64px; }
.card-stair-3 { margin-top:128px; }
.card-media { aspect-ratio:3/4; }
.media-svc { aspect-ratio:3/2; margin-top:8px; }
.media-fest { aspect-ratio:4/3; }

/* Services offerings lists — Cormorant, hairline-separated, no markers */
.svc-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column;
  font-family:var(--serif); font-size:clamp(20px,1.8vw,26px); }
.svc-list li { padding:17px 0; border-top:1px solid var(--line); }
.svc-list li:last-child { border-bottom:1px solid var(--line); }
.is-ink .svc-list li { border-color:rgba(245,237,225,0.18); }

/* Page-specific grid geometry lives here, keyed by id — never as an inline
   style attribute on the markup. See the 920px block: id specificity beats
   a bare class, so the mobile collapse rule below repeats the id. */
#promgrid { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:56px; align-items:center; }
#foundgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:72px; align-items:center; }
#visintro { display:grid; grid-template-columns:minmax(280px,1.35fr) minmax(240px,1fr); gap:32px 64px; align-items:start; margin-top:40px; padding-top:26px; border-top:1px solid rgba(245,237,225,0.2); }
#servegrid { display:flex; flex-direction:column; }
#servegrid > div { display:grid; grid-template-columns:56px minmax(0,380px) minmax(0,1fr); gap:18px 44px; align-items:baseline; padding:22px 0; border-top:1px solid var(--ink); }
#servegrid > div:last-child { border-bottom:1px solid var(--ink); }
#svcintro { display:grid; grid-template-columns:minmax(280px,1.4fr) minmax(240px,1fr); gap:32px 56px; align-items:start; margin-top:40px; padding-top:26px; border-top:1px solid rgba(245,237,225,0.2); }
#svcintro .svc-where { grid-column:1 / -1; padding-top:22px; border-top:1px solid rgba(245,237,225,0.14); display:flex; flex-direction:column; gap:8px; }
#catgrid-01, #catgrid-03 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:64px; align-items:start; }
#catgrid-02 { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:64px; align-items:start; }
#stepgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
/* Festivals' three alternating rows — ratios and image side per prototype
   (rows i/iii text-left 1:1.1, row ii image-left 1.1:1). Keyed by id, never
   inline, per the hard rule about grid geometry. */
#festgrid-01, #festgrid-03 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:center; }
#festgrid-02 { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:center; }
/* Contact's card/form split — Aurora Cinema Contact.dc.html:118, moved out of
   the prototype's inline style attribute per the no-inline-geometry rule. */
#congrid { display:grid; grid-template-columns:minmax(280px,360px) minmax(320px,1fr); gap:88px; align-items:start; }
/* Contact's questions 01-04 two-column grid — Contact.dc.html:152. The
   prototype uses grid-template-rows:subgrid on each label for cross-column
   baseline alignment; simplified here to a plain flex column per label,
   since all four labels are single-line and never wrap, making the subgrid
   alignment invisible in practice. */
#confields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; }
#confields label { display:flex; flex-direction:column; gap:10px; }
#cat-01, #cat-02, #cat-03 { scroll-margin-top:80px; }
.card-media img { transition:transform 1s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.card:hover .card-media img { transform:scale(1.05); filter:sepia(0.25); }
.card:hover em { color:var(--terra); }

/* --------------------------------------------------------------------------
   Step 7: Form styles (lifted verbatim from Aurora Cinema Contact.dc.html)
   -------------------------------------------------------------------------- */
input, textarea, button { font-family:inherit; font-size:inherit; color:inherit; }
.form { display:flex; flex-direction:column; gap:34px; }
.form input, .form textarea { width:100%; background:transparent; border:0;
  border-bottom:1px solid #CDB99C; padding:10px 0; outline:none; }
.form input::placeholder, .form textarea::placeholder { color:#B3A38C; }
.form input:focus, .form textarea:focus { border-bottom-color:var(--terra-text); }
.form textarea { resize:vertical; }
.field-label { display:flex; gap:10px; align-items:baseline; font-size:var(--fs-label);
  letter-spacing:0.2em; text-transform:uppercase; color:var(--umber); }
.field-num { color:var(--terra-text); font-weight:600; }
.chip { position:relative; display:inline-flex; }
.chip input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;
  width:100%; padding:0; border:0; }
.chip span { display:block; border:1px solid #CDB99C; padding:11px 16px;
  font-size:12.5px; line-height:1.2; color:var(--ink); transition:all 160ms ease; }
.chip input:hover + span { border-color:var(--terra-text); }
.chip input:checked + span { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.chip input:focus-visible + span { outline:1px solid var(--terra); outline-offset:2px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error { margin:0; font-size:var(--fs-body); color:#A03A24; }
/* The status line is always in the markup so it can hold an aria-live
   message, but a rendered empty <p> still consumes one of the form's 34px
   flex gaps — doubling the space between the Turnstile widget and the submit
   row to 68px. The prototype only emitted this element when there was an
   error (Contact.dc.html:197, wrapped in sc-if hasError); collapsing it when
   empty reproduces that spacing. */
.form-error:empty { display:none; }
.form-sent { display:none; flex-direction:column; gap:20px; align-items:flex-start;
  border-top:1px solid var(--ink); padding-top:36px; }
/* Must stay visible. The .cf-turnstile container lives inside this block, and
   Turnstile will not render a visible challenge into a display:none parent.
   This was previously display:none, revealed by JS once an iframe appeared —
   a deadlock: no reveal without the iframe, no iframe without the reveal.
   Invisible-mode widgets hid the bug (nothing needed to render); switching the
   widget to Managed exposed it as an unusable form. Do not hide this block. */
.ts-block  { display:flex; flex-direction:column; gap:10px; }
.submit-row { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
/* Contact's "Send another note" button reuses .btn for its box model, but
   Contact.dc.html:141 tags it class="hv0" (border/text invert to terra, no
   background fill) rather than .btn's own ink-fill hover (used elsewhere,
   e.g. Home's "Every service →"). Scoped to this one button; .btn itself
   is unchanged, per the rule against touching shared classes. */
body[data-page="contact"] #form-sent .btn:hover { background:none; border-color:var(--terra-text); color:var(--terra-text); }

/* --------------------------------------------------------------------------
   Step 8: FAQ disclosure and 404 rules
   Ported from design/faq.dc.html lines 48-56 (base) and 85-86 (mobile,
   added to the single 920px block in Step 9) after the original Step 8
   transcription was found to be incomplete and to have drifted on the
   answer-paragraph values.
   -------------------------------------------------------------------------- */
details[data-q] { border-top:1px solid var(--line); }
details[data-q]:last-of-type { border-bottom:1px solid var(--line); }
details[data-q] > summary { list-style:none; cursor:pointer; display:grid;
  grid-template-columns:76px minmax(0,1fr) 40px; gap:32px; align-items:baseline;
  padding:30px 0; }
details[data-q] > summary::-webkit-details-marker { display:none; }
details[data-q] > summary:hover h2 { color:var(--terra-text); }
details[data-q] h2 { transition:color .25s ease; }
details[data-q] [data-x] { justify-self:end; font-size:26px; line-height:1;
  color:var(--terra-text); font-weight:300; transition:transform .35s ease;
  transform-origin:center; font-family:var(--serif); }
details[data-q][open] [data-x] { transform:rotate(45deg); }
details[data-q] [data-a] { padding:0 76px 36px 108px; }
details[data-q] [data-a] p { margin:0; max-width:62ch; font-size:15.5px;
  line-height:1.75; color:var(--text-warm); text-wrap:pretty; }

/* 404 page (design/404.dc.html) — the prototype has no progress bar and no
   tab bar, so .topnav sits at top:0 instead of top:3px (top:3px exists only
   to clear the progress bar). Its wrapper div is a min-height:100svh flex
   column (404.dc.html:31) so the footer stays pinned to the viewport bottom
   on short pages; #nfhero (404.dc.html:46) is the flex:1 child that centers
   the hero content. Keyed to id/body[data-page] hooks per the no-inline-
   geometry rule, not reproduced as inline styles on the markup. */
body[data-page="404"] { display:flex; flex-direction:column; min-height:100svh; }
body[data-page="404"] .topnav { top:0; }
/* #nfhero is wrapped in <main> for the landmark, so <main> — not #nfhero —
   is body's flex child now. Pass the growth straight through so #nfhero
   still fills the column and keeps the footer pinned to the viewport
   bottom. Scoped to this page: no other body is a flex container, so their
   <main> needs nothing. */
body[data-page="404"] main { flex:1; display:flex; flex-direction:column; }
#nfhero { flex:1; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:160px 36px 80px; }
#nfhero .h1 + p { margin:30px 0 0; max-width:44ch; font-size:16px; line-height:1.7;
  color:var(--taupe); text-wrap:pretty; }
#nfctas { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:44px; }
/* 404.dc.html:51-52 gives both buttons padding:18px 36px — a third value
   matching neither .btn-solid's 20px 44px nor .btn's 16px 34px. Scoped to
   this page only; the shared classes are unchanged (four built pages use
   .btn-solid, one uses .btn-on-dark, elsewhere). */
body[data-page="404"] .btn-solid, body[data-page="404"] .btn-on-dark { padding:18px 36px; }
/* The "Contact us" link (404.dc.html:52) declares no color, so it inherits
   var(--cream) from the page wrapper, not .btn-on-dark's forced
   color:var(--gold) — and it wants font-weight:500, which neither .btn nor
   .btn-on-dark set (so it'd otherwise fall back to the browser's normal
   anchor weight). Both overridden here rather than in the shared class. */
body[data-page="404"] .btn-on-dark { color:var(--cream); font-weight:500; }
/* .btn-on-dark's shared :hover (background:gold, color:ink) reproduces the
   prototype's "hv1" helper, which Home's "Music festival concierge →" link
   uses (Aurora Cinema.dc.html) — that one is correct and must not change.
   404's "Contact us" carries no hover helper class at all (404.dc.html:52),
   so its own hover is just the prototype's base a:hover{color:gold} rule —
   text-only, no background fill. Overridden here, scoped to this page and
   this button only, confirmed against both prototypes' hover-class usage. */
body[data-page="404"] .btn-on-dark:hover { background:transparent; color:var(--gold); }
body[data-page="404"] footer { text-align:center; padding:0 36px 40px; }
body[data-page="404"] footer a[href^="tel:"] { font-family:var(--serif);
  font-size:clamp(24px,3vw,40px); letter-spacing:-0.01em; }
body[data-page="404"] footer p { margin:14px 0 0; font-size:var(--fs-label);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bark-lite); }

/* --------------------------------------------------------------------------
   Step 8b: Closing-CTA geometry, per page
   The closing CTA is NOT shared chrome — checked across all six prototypes,
   no two have the same padding/min-height, and Vision's copy differs too
   (see Task 4 report, discrepancy 4-5). The markup stays identical on every
   page (class="sec is-ink sec-close" ...); geometry is keyed by the same
   body[data-page] hook that already drives the current-page nav indicator.
   Home needs no branch — its value is .sec-close's own default above.
   Wrapped in min-width:921px (the complement of Step 9's single breakpoint)
   so these rules never contest the mobile .sec / .sec:last-of-type padding
   rules below: body[data-page="x"] .sec-close is (0,2,1), which would beat
   .sec's mobile (0,1,0) and .sec:last-of-type's (0,2,0) on specificity alone
   regardless of source order if left unscoped — scoping to desktop-only
   sidesteps that fight entirely instead of trying to out-rank it.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  body[data-page="vision"]    .sec-close { min-height:70vh; padding:120px 36px; }
  body[data-page="services"]  .sec-close { padding:100px 36px 56px; }
  body[data-page="festivals"] .sec-close { min-height:80vh; padding:120px 36px; }
  body[data-page="faq"]       .sec-close { min-height:62vh; padding:120px 36px; }
  body[data-page="contact"]   .sec-close { padding:110px 36px; }
  /* Home is the one prototype using 23px for .marquee-track (the shared
     default above is 21px, matching the other five) — scoped desktop-only
     so it never contests the mobile 17px rule in Step 9. */
  body[data-page="home"]      .marquee-track { font-size:23px; }
}

/* --------------------------------------------------------------------------
   Step 9: Single responsive breakpoint (must stay last)
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .sec { padding:104px 22px; }
  #promgrid, #foundgrid, .cards, .grid-2, #catgrid-01, #catgrid-02, #catgrid-03, #stepgrid, #festgrid-01, #festgrid-02, #festgrid-03 { grid-template-columns:1fr; gap:56px; }
  /* Contact is the one page whose prototype overrides the shared 56px stack
     gap with its own value (Aurora Cinema Contact.dc.html:52 sets 56px for
     the shared set, then :86 re-specifies #congrid at 48px). Split out of
     the list above rather than layered on top of it, so the 48px is stated
     once and the other pages are untouched. */
  #congrid { grid-template-columns:1fr; gap:48px; }
  #confields { grid-template-columns:1fr; }
  #visintro, #svcintro { grid-template-columns:minmax(0,1fr); gap:28px; }
  #servegrid { gap:56px; }
  #servegrid > div { grid-template-columns:40px minmax(0,1fr); }
  #servegrid > div > p { grid-column:2; }
  .sec-vishero { padding:160px 22px 70px; }
  #vishero .h1 { font-size:12vw; }
  #vishero .eyebrow { letter-spacing:0.18em; }
  #svchero .h1 { font-size:12vw; }
  #svchero .eyebrow { letter-spacing:0.18em; }
  .sec-festhero { padding:120px 22px 70px; }
  #festhero .h1 { font-size:12vw; }
  #festhero .eyebrow { letter-spacing:0.18em; }
  .sec-faqhero { padding:160px 22px 60px; }
  #faqhero .h1 { font-size:12vw; }
  #faqhero .eyebrow { letter-spacing:0.18em; }
  .sec-conhero { padding:150px 22px 60px; }
  #conhero .h1 { font-size:12vw; }
  #conhero .eyebrow { letter-spacing:0.18em; }
  /* .sec-photo.sec-vista is (0,2,0) and outranks the mobile .sec rule above
     at (0,1,0), so Vision's vista section kept its desktop 80px bottom here
     where the prototype forces 104px (Aurora Cinema Vision.dc.html:51,
     section[data-obs] { padding-bottom:104px }). The compounding is needed
     for the desktop bug it was added for, so it is answered at matching
     specificity inside this breakpoint rather than unwound. */
  .sec-photo.sec-vista { padding-bottom:104px; }
  .card-stair-2, .card-stair-3 { margin-top:0; }
  [data-wipe] { max-height:44vh; }
  .card-media, .media-svc, .media-fest { aspect-ratio:16/10; }
  .media-4x5 { aspect-ratio:4/5; max-height:52vh; }
  .media-founder { aspect-ratio:4/5; max-height:56vh; }
  .marquee-band { padding:30px 0; }
  .marquee-band p { margin-bottom:12px !important; }
  .marquee-track { font-size:17px; gap:44px; }
  .eyebrow { letter-spacing:0.18em; }
  .h2, h2 { text-wrap:balance; }
  .topnav { padding:12px 20px; }
  .topnav-links { display:none; }
  .topnav-call { display:block; margin-left:auto; }
  .tabbar { display:flex; letter-spacing:0.01em; }
  .tabbar-item { padding-left:2px; padding-right:2px; min-width:0; }
  .sec:last-of-type { padding-bottom:130px; }
  .svc-list li { padding-top:14px; padding-bottom:14px; font-size:19px; }
  #nfhero .h1 { font-size:14vw; }
  details[data-q] > summary { grid-template-columns:44px minmax(0,1fr) 30px; gap:16px; }
  details[data-q] [data-a] { padding:0 0 32px 60px; }

  /* Home hero — ported from Aurora Cinema.dc.html's own 920px block (#cinhero only, not site-wide) */
  #cinhero { text-align:left !important; align-items:flex-start !important; padding-left:22px !important; padding-right:22px !important; }
  #cinhero [data-dot] { display:none; }
  #cinhero .h1 { font-size:14vw; }
  #cinhero > p { max-width:30ch !important; }
  [data-herofoot] { bottom:96px !important; }
  p[data-herofoot], a[data-herofoot][href^="tel"] { display:none; }
  #cinhero a[data-herofoot][href="/contact"] { left:0 !important; right:0; text-align:center; text-indent:0.3em; letter-spacing:0.18em !important; }
  .sec-photo [data-rise] > a[href="/festivals"] { align-self:center; text-align:center; text-indent:0.16em; }
}