/* ============================================================
   HEARTLINE FILMS — shared design-system layer
   Super 8 film-lab / editing-bay aesthetic
   Loaded by EVERY page, before its css/page-<name>.css file.

   Palette: warm film-base black · safelight red · projector amber
   Type:    Big Shoulders Display (heavy condensed display)
            Courier Prime (slates, metadata, short copy)
            Libre Franklin (long-form reading — .prose etc.)
   ============================================================ */

:root {
  /* ground */
  --ink:        #141008;   /* unexposed film base */
  --ink-2:      #1d1710;   /* raised panel */
  --ink-3:      #261d13;   /* card */
  /* light */
  --bone:       #f0e4ce;   /* primary text */
  --bone-dim:   #c9b795;   /* secondary text */
  /* heat */
  --safelight:  #c22f3e;   /* filmred, pushed hot */
  --safelight-deep: #571620;
  --amber:      #e8a04c;   /* projector amber */
  --kodak:      #f2c14e;   /* bulb highlight */
  /* structure */
  --line:       rgba(232, 160, 76, 0.22);
  --measure:    72rem;
  --pad-x:      clamp(1.25rem, 5vw, 4rem);
  --topbar-h:   3.6rem;
  --display:    "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --mono:       "Courier Prime", "Courier New", Courier, monospace;
  --body:       "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1rem; }
ul, ol, blockquote, figure { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- a11y utilities ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--amber); color: var(--ink);
  font-family: var(--mono); font-weight: 700; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- atmosphere: grain + vignette ---------- */
.grain {
  position: fixed; inset: -60px; z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.09;
  mix-blend-mode: overlay;
  animation: grain-jump 0.9s steps(6) infinite;
}
@keyframes grain-jump {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-24px, 12px); }
  40%  { transform: translate(16px, -20px); }
  60%  { transform: translate(-12px, -28px); }
  80%  { transform: translate(28px, 18px); }
  100% { transform: translate(0, 0); }
}
.vignette {
  position: fixed; inset: 0; z-index: 59;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%,
              transparent 55%, rgba(10, 6, 2, 0.55) 100%);
}

/* ---------- shared bits ---------- */
.slate {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-left: 3px solid var(--safelight);
  padding-left: 0.75rem;
  margin: 0 0 1.75rem;
}
.slate-center { border-left: 0; border-top: 3px solid var(--safelight);
  display: inline-block; padding: 0.6rem 0 0; margin-left: auto; margin-right: auto; }

.display-h {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  margin: 0 0 1.75rem;
}
.halate {
  text-shadow: 0 0 18px rgba(242, 193, 78, 0.35),
               0 0 70px rgba(232, 120, 40, 0.22);
}
.ht-red   { color: var(--safelight); }
.ht-amber { color: var(--amber); }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.85rem 1.9rem;
  border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-red {
  background: var(--safelight); color: var(--bone);
  box-shadow: 0 0 0 rgba(194, 47, 62, 0);
}
.btn-red:hover { box-shadow: 0 6px 30px rgba(194, 47, 62, 0.45); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: var(--kodak); }
.btn-ghost {
  background: transparent; color: var(--bone);
  border-color: var(--amber);
}
.btn-ghost:hover { background: rgba(232, 160, 76, 0.12); }
.btn-big { font-size: 1.5rem; padding: 1.05rem 2.6rem; }

/* margin-inline must stay auto: the shorthand's `0` was pinning measure-width
   CTAs to the left of their section instead of centering them. */
.center-cta { text-align: center; margin: 2.5rem auto 0; }
.text-link { color: var(--amber); text-decoration-color: rgba(232,160,76,.5); text-underline-offset: 3px; }
.text-link:hover { color: var(--kodak); }

/* corner stamp — the grease-pencil label that hangs off a card's top-right
   corner. Home, About and Services each had their own take on this; one
   definition keeps them identical. The card must be position:relative and
   must not clip its overflow: the stamp hanging past the corner is the
   whole idea. */
.corner-stamp {
  position: absolute; top: -0.7rem; right: -0.9rem;
  transform: rotate(8deg);
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.2em; color: rgba(194, 47, 62, 0.85);
  border: 2px solid rgba(194, 47, 62, 0.55);
  background: var(--ink);
  padding: 0.2rem 0.8rem;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 600px) {
  /* keep the overhang inside the page padding so nothing can push a
     horizontal scroll at 360px */
  .corner-stamp { right: -0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .corner-stamp { transform: none; }
}

/* blinking record dot (scarcity lines, form headers, live labels) */
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--safelight);
  box-shadow: 0 0 10px rgba(194, 47, 62, 0.9);
  animation: rec-blink 1.6s steps(2) infinite;
  flex: 0 0 auto;
}
@keyframes rec-blink { 50% { opacity: 0.25; } }

/* ---------- section rhythm ----------
   Every direct child <section> of <main> gets vertical padding and
   its direct children are centered on the measure. Modifiers below. */
main > section { padding: clamp(4rem, 9vw, 7.5rem) var(--pad-x); }
main > section > .slate,
main > section > .display-h,
main > section > p,
main > section > ol,
main > section > ul,
main > section > dl,
main > section > div,
main > section > blockquote {
  max-width: var(--measure);
  /* NOT margin-left: auto. For a block that fills the measure this computes
     identically, but a block capped narrower than the measure (a 44em lede,
     say) would be centred by auto margins and drift away from the heading
     above it. Pinning to the measure's left edge keeps every block in a
     section on one left edge, whatever its own max-width. */
  margin-left: max(0px, calc((100% - var(--measure)) / 2));
  margin-right: auto;
}
/* Sections that centre their type want their blocks centred too. These need to
   out-specify the reading-measure indent on `main > section > .slate` etc.,
   and they must set BOTH margins: the indent rule only sets margin-left, so
   `auto` on one side alone still leaves the block hard against the right. */
main > section.cta-band > *,
main > section.closing > * { margin-left: auto; margin-right: auto; }
main > section > .slate { margin-bottom: 1.75rem; }
main > section > .display-h { margin-bottom: 1.75rem; }

/* raised "panel" section — alternate ground for long pages */
.section-panel {
  background: linear-gradient(var(--ink-2), var(--ink));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* tighter spacing when two sections belong to the same thought */
.section-tight { padding-top: clamp(2.25rem, 5vw, 3.75rem); padding-bottom: clamp(2.25rem, 5vw, 3.75rem); }
/* pin a narrower block to the measure's left edge instead of centering */
.flush-left {
  margin-left: max(0px, calc((100% - var(--measure)) / 2));
  margin-right: auto;
}

/* scroll reveal (gated on .js so a no-script load never hides content) */
html.js [data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease; }
html.js [data-reveal].on { opacity: 1; transform: none; }

/* ============================================================
   NAV
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--pad-x);
  background: rgba(20, 16, 8, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.brand-name {
  font-family: var(--display); font-weight: 900;
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bone);
}
.brand-sub {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--safelight);
  white-space: nowrap;
}
/* Between the burger breakpoint and a comfortable desktop there isn't room
   for the full strapline beside seven nav links; drop the city rather than
   let the line wrap under the wordmark. */
@media (min-width: 861px) and (max-width: 1180px) {
  .brand-where { display: none; }
  .mainnav ul { gap: 1rem; }
}
.mainnav ul { display: flex; align-items: center; gap: 1.4rem; }
.mainnav a:not(.btn) {
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 0.2rem 0;
}
.mainnav a:not(.btn):hover { color: var(--kodak); border-bottom-color: var(--kodak); }
.mainnav a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--safelight); }
.nav-cta .btn {
  font-size: 0.95rem; padding: 0.5rem 1.1rem;
  display: inline-flex; align-items: center;
  min-height: 44px;
}

.burger {
  display: none;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; padding: 0.5rem;
}
.burger-bar {
  width: 26px; height: 3px; background: var(--amber);
  transition: transform 0.25s, opacity 0.25s;
}
.burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: flex; }
  .mainnav {
    /* NOTE: .topbar's backdrop-filter makes it the containing block for this
       fixed panel, so top/bottom would resolve against the bar itself.
       Height is set explicitly instead of bottom: 0 for that reason. */
    position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 79;
    height: calc(100svh - var(--topbar-h));
    background: rgba(20, 16, 8, 0.97);
    border-top: 2px solid var(--safelight);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateY(-0.8rem);
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    visibility: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mainnav.open { transform: none; opacity: 1; visibility: visible; }
  .mainnav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.1rem var(--pad-x) 2rem;
  }
  .mainnav li { border-bottom: 1px solid var(--line); }
  .mainnav li.nav-cta { border-bottom: 0; padding-top: 1.25rem; }
  .mainnav a:not(.btn) { display: block; padding: 0.9rem 0; font-size: 1.05rem; }
  .nav-cta .btn { display: block; text-align: center; padding: 0.85rem 1.1rem; }
  body.nav-open { overflow: hidden; }
}

/* ============================================================
   PAGE HEAD — interior-page hero ("film-can label")
   Compact, dense header band with a sprocket-perf bottom edge.
   ============================================================ */
.page-head {
  position: relative;
  padding: clamp(6.25rem, 16vw, 8.75rem) var(--pad-x) clamp(3.4rem, 7vw, 4.6rem);
  background:
    radial-gradient(ellipse at 82% -10%, rgba(194, 47, 62, 0.16), transparent 55%),
    linear-gradient(#1d1710, var(--ink));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::after { /* exposed film-leader edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 1.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='24'><rect x='18' y='3' width='20' height='18' rx='4' fill='%23141008'/><rect x='18' y='3' width='20' height='18' rx='4' fill='none' stroke='%23f2c14e' stroke-opacity='0.18'/></svg>");
  background-repeat: repeat-x;
  opacity: 0.65;
  pointer-events: none;
}
.page-head-inner { position: relative; max-width: var(--measure); margin: 0 auto; }
.page-head .slate { margin-bottom: 1.1rem; }
.page-head-title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: clamp(2.5rem, 8.5vw, 5.5rem);
  overflow-wrap: break-word;
  margin: 0;
}
.page-head-lede {
  color: var(--bone-dim);
  max-width: 44em;
  font-size: 1.02rem;
  margin: 1.15rem 0 0;
}
/* optional media variant: taped-in frame still on the right */
.page-head--media .page-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.page-head-media {
  position: relative;
  border: 2px solid #0c0905;
  outline: 1px solid rgba(242, 193, 78, 0.25);
  outline-offset: 6px;
  background: #000;
}
.page-head-media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: sepia(0.3) saturate(1.08) contrast(1.03) brightness(0.9);
}
.page-head-media::before { /* splicing tape holding the still down */
  content: ""; position: absolute; top: -0.8rem; left: 50%; z-index: 1;
  width: 6rem; height: 1.5rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(232, 160, 76, 0.28);
  border-left: 1px dashed rgba(20, 16, 8, 0.5);
  border-right: 1px dashed rgba(20, 16, 8, 0.5);
}
@media (max-width: 760px) {
  .page-head--media .page-head-inner { grid-template-columns: minmax(0, 1fr); }
  .page-head-media { max-width: 24rem; margin-top: 0.5rem; }
}

/* ============================================================
   PROSE — long-form editorial container (blog, FAQ, venues)
   Libre Franklin for reading; display + mono only for structure.
   ============================================================ */
.prose {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--bone);
  max-width: 42em;
}
.prose p { margin: 0 0 1.2rem; }
.prose a { color: var(--amber); text-decoration-color: rgba(232, 160, 76, 0.5); text-underline-offset: 3px; }
.prose a:hover { color: var(--kodak); }
.prose strong { color: var(--kodak); font-weight: 600; }
.prose em { color: var(--bone); }
.prose-lede {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--bone);
}
.prose h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--bone);
  margin: 2.6rem 0 0.9rem;
}
.prose h3 {
  font-family: var(--mono); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--kodak);
  margin: 2.1rem 0 0.7rem;
}
.prose ul, .prose ol { margin: 0 0 1.2rem; }
.prose ul li, .prose ol li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.45rem;
}
.prose ul li::before {
  content: "▸";
  position: absolute; left: 0.15rem; top: 0;
  color: var(--amber);
  font-family: var(--mono);
}
.prose ol { counter-reset: prose-ol; }
.prose ol li { counter-increment: prose-ol; }
.prose ol li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0.2em;
  font-family: var(--mono); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--safelight);
}
.prose blockquote {
  border-left: 3px solid var(--safelight);
  padding: 0.2rem 0 0.2rem 1.2rem;
  margin: 0 0 1.2rem;
  font-style: italic;
  color: var(--bone-dim);
}
.prose hr { /* strip of sprocket holes as a divider */
  border: 0;
  height: 24px;
  margin: 2.4rem 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='24'><rect x='18' y='3' width='20' height='18' rx='4' fill='%231d1710'/><rect x='18' y='3' width='20' height='18' rx='4' fill='none' stroke='%23f2c14e' stroke-opacity='0.22'/></svg>");
  background-repeat: repeat-x;
  background-position: left center;
}

/* ============================================================
   TIERS — pricing/package cards ("cans on the shelf")
   One card carries .tier-pick: the circled print on the contact sheet.
   ============================================================ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 2rem 1.5rem 1.75rem;
}
.tier-reel {
  font-family: var(--mono); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 0.9rem;
}
.tier-name {
  font-family: var(--display); font-weight: 800;
  font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--amber);
}
.tier-tag {
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--bone-dim);
  margin: 0.2rem 0 1rem;
}
.tier-price {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.4rem, 4vw, 3rem);
  line-height: 1;
  color: var(--kodak);
  margin: 0;
}
.tier-per {
  font-family: var(--mono); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0.35rem 0 0;
}
.tier-list { margin: 1.4rem 0 1.8rem; display: grid; gap: 0.55rem; align-content: start; flex: 1 1 auto; }
.tier-list li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.95rem; }
.tier-list .tick { color: var(--safelight); font-weight: 700; transform: rotate(4deg); display: inline-block; }
.tier .btn { margin-top: auto; align-self: flex-start; font-size: 1.05rem; }
/* the picked can */
.tier-pick {
  border: 2px solid var(--safelight);
  background: linear-gradient(rgba(194, 47, 62, 0.08), rgba(194, 47, 62, 0)) , var(--ink-2);
  box-shadow: 0 0 46px rgba(194, 47, 62, 0.18);
}
.tier-pick-mark {
  position: absolute; top: -0.85rem; left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--kodak);
  background: var(--ink);
  border: 2px solid var(--safelight);
  padding: 0.25rem 0.8rem;
  white-space: nowrap;
  margin: 0;
}
/* Every price gets the same box so the three cards' rows line up; only the
   circled one takes the extra horizontal room the grease ring needs, and a
   matching negative margin keeps its left edge on the card's text column. */
.tier-price { display: inline-block; align-self: flex-start; padding: 0.6rem 0; }
.tier-pick .tier-price {
  position: relative;
  padding-left: 1.5rem; padding-right: 1.5rem;
  margin-left: -1.5rem;
}
.tier-pick .tier-price .grease { inset: -0.5rem -0.8rem; }
/* Side by side, the notes must occupy the same height or their dashed rules
   sit at three different heights. The list flexes to keep the buttons on one
   line; this keeps the note tops on one line too. Dropped on mobile, where the
   cards stack and the floor would only add dead space. */
@media (min-width: 901px) {
  .tier-note { min-height: 8.4rem; }
}
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; gap: 1.9rem; max-width: 30rem; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   FAQ — accordion (lab logbook)
   Markup: [data-accordion] > .faq-item > h3 > button.faq-q + div.faq-a
   JS in site.js handles expand/collapse, arrows, Home/End.
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: baseline; gap: 1rem;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: none; border: 0;
  color: var(--bone);
  padding: 1.05rem 0.25rem;
}
.faq-q:hover .faq-q-text { color: var(--kodak); }
.faq-q-text {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.2;
}
.faq-ind {
  margin-left: auto;
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  white-space: nowrap;
}
.faq-ind::before { content: "[+]"; }
.faq-q[aria-expanded="true"] .faq-ind::before { content: "[–]"; }
.faq-a {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 60ch;
  padding: 0 0.25rem 1.5rem;
}
.faq-a p { margin: 0 0 0.9rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--amber); }

/* ============================================================
   STAT BAND — edge-code readout
   ============================================================ */
.stat-band {
  display: grid;
  /* auto-fit, not a hard 4: a band with two cells used to sit in the left
     half of a four-column grid and read as half-finished */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat {
  background: var(--ink-2);
  padding: 1.7rem 1.1rem 1.4rem;
  text-align: center;
  /* two rows, not flex-end: the label sits on the floor of every cell and the
     value centres in the space above it, so a band mixing tall numerals with
     smaller word-values still reads as one straight line. */
  display: grid; grid-template-rows: 1fr auto;
  min-height: 8.5rem;
}
.stat-value {
  align-self: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--kodak);
  text-shadow: 0 0 18px rgba(242, 193, 78, 0.3);
  margin: 0;
}
/* word-valued cells sat far too small beside the numeral ones, so a mixed
   band looked ragged. Closer in size, still clearly not a number. */
.stat-value.stat-word {
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.stat-label {
  font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0.55rem 0 0;
}
@media (max-width: 780px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TESTIMONIALS — splice-tape quote cards
   ============================================================ */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.quote-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 2.4rem 1.5rem 1.5rem;
}
.quote-card:nth-child(1) { transform: rotate(-0.7deg); }
.quote-card:nth-child(2) { transform: rotate(0.5deg); }
.quote-card:nth-child(3) { transform: rotate(-0.4deg); }
.quote-card::before { /* strip of splicing tape */
  content: "";
  position: absolute; top: -0.7rem; left: 50%;
  width: 6.5rem; height: 1.5rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(232, 160, 76, 0.28);
  border-left: 1px dashed rgba(20, 16, 8, 0.5);
  border-right: 1px dashed rgba(20, 16, 8, 0.5);
}
.quote-card p { font-style: italic; color: var(--bone); }
.quote-card figcaption {
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber);
}

/* ============================================================
   FORM FRAME — third-party iframe form, taped into the page
   ============================================================ */
.form-frame {
  max-width: 46rem;
  background: var(--ink-2);
  border: 1px dashed rgba(232, 160, 76, 0.4);
}
.form-frame-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px dashed rgba(232, 160, 76, 0.4);
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--kodak);
  margin: 0;
}
.form-frame-body {
  background: #f4ecdc; /* paper backing so a light form reads as intentional */
  padding: clamp(0.5rem, 2vw, 1rem);
}
.form-frame-body iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: clamp(30rem, 80svh, 46rem);
  background: #fff;
}
.form-frame-foot {
  padding: 0.75rem 0.95rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
  margin: 0;
}

/* ============================================================
   FRAME — single film frame (shared primitive)
   Used by the homepage reel AND the .frame-grid below.
   ============================================================ */
.frame { position: relative; }
.frame-no {
  position: absolute; top: -1.7rem; left: 0;
  font-family: var(--mono); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.2em; color: rgba(240, 228, 206, 0.45);
}
.frame-face {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 2px solid #0c0905;
  background: #000;
  overflow: hidden;
}
.frame-face img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.28) saturate(1.1) contrast(1.04) brightness(0.92);
  /* transform only. Animating `filter` alongside it meant every hovered
     frame re-ran sepia/saturate/contrast on a full-size image each frame,
     which is what made a grid of eighteen prints crawl. The lift now runs
     on the compositor; the warm-up is an overlay fade below. */
  transition: transform 0.35s ease;
  transform: translateZ(0);
}
.frame-face::after { /* halation edge; it lifts on hover instead of a filter change */
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .frame-face:hover img { transform: scale(1.035); }
  .frame-face:hover::after { opacity: 0.45; }
}
.frame-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.15rem;
  color: var(--bone);
}
.frame-play::before {
  content: ""; position: absolute;
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--bone);
  background: rgba(20, 16, 8, 0.55);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.frame-face:hover .frame-play::before {
  border-color: var(--kodak);
  box-shadow: 0 0 26px rgba(242, 193, 78, 0.5);
}
.frame-play { text-indent: 0.2em; }
.frame .embed-slot iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 2px solid #0c0905; display: block;
}
.frame.is-playing .embed-slot { display: block; }

.frame-label {
  position: relative;
  margin: 0.7rem 0 0;
  font-family: var(--display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bone);
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
}
.frame-loc {
  font-family: var(--mono); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.18em; color: var(--bone-dim);
}
/* grease-pencil circle — now only ever used on a picked price */
.grease {
  position: absolute; inset: -0.45rem -0.5rem;
  color: var(--safelight);
  opacity: 0.9;
  pointer-events: none;
}
.grease svg { width: 100%; height: 100%; }
/* ---------- frame grid: the reel reflowed for a films page ---------- */
.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 2.6rem 1.5rem;
  padding-top: 1.7rem; /* room for the absolute .frame-no on row one */
}

/* ============================================================
   CTA BAND — reusable closing call ("projector beam")
   ============================================================ */
.cta-band {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 50% -10%, rgba(242, 193, 78, 0.16), transparent 70%),
    linear-gradient(var(--ink), #0e0a05);
  border-top: 1px solid var(--line);
}
.cta-band-h { font-size: clamp(2.4rem, 7vw, 5rem); }
.cta-band-lede { font-size: 1.15rem; max-width: 40em; }
.cta-band-lede strong { color: var(--kodak); font-size: 1.25em; }
.cta-band-note { color: var(--bone-dim); max-width: 44em; }
/* a reassurance line sitting directly under the button was touching it;
   .center-cta only carries a top margin, so the gap has to come from here */
.center-cta + .cta-band-note,
.center-cta + .closing-soft { margin-top: 1.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0c0905;
  border-top: 3px solid var(--safelight);
  padding: 3.5rem var(--pad-x) 2rem;
}
.footer-grid {
  max-width: var(--measure); margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo {
  font-family: var(--display); font-weight: 900; font-size: 1.6rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bone);
  margin-bottom: 0.9rem;
}
.footer p { color: var(--bone-dim); font-size: 0.92rem; margin-bottom: 0.4rem; }
.footer h3 {
  font-family: var(--mono); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--kodak);
  margin-bottom: 0.9rem;
}
.footer-links a {
  display: inline-block;
  color: var(--bone-dim); text-decoration: none;
  font-size: 0.92rem; padding: 0.18rem 0;
}
.footer-links a:hover { color: var(--kodak); }
.footer-areas li { color: var(--bone-dim); font-size: 0.92rem; padding: 0.18rem 0; }
.footer-legal {
  max-width: var(--measure); margin: 0 auto;
  text-align: center;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(201, 183, 149, 0.55);
  border-top: 1px solid rgba(232, 160, 76, 0.15);
  padding-top: 1.5rem;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   REDUCED MOTION — shared layer
   (page-<name>.css files disable their own animations too)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .rec-dot { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .frame-face img, .frame-face::after, .mainnav { transition: none; }
  .btn:hover { transform: none; }
  .frame-face:hover img { transform: none; }
}