/* =========================================================================
   BRANDSCRIBED — DESIGN TOKENS
   Every hex color in this codebase lives in this :root block and nowhere else.
   Everything downstream references these custom properties or color-mix().
   ========================================================================= */
:root {
  /* palette */
  --ink: #141010;
  --paper: #efe7d8;
  --brass: #c49a58;
  --brass-dim: #8f6f3e;
  --bone: #f3ede1;
  --smoke: #a89f92;
  --graphite: #3b332e;
  --line: rgba(243, 237, 225, 0.14);
  --line-paper: rgba(59, 51, 46, 0.25);

  /* typography families — Google Fonts only */
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-label: "Cinzel", Georgia, serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --font-body: "Archivo", system-ui, sans-serif;

  /* modular scale — 1.25 minor third, fluid at the top end */
  --step--2: 0.7rem;
  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.4rem, 0.6vw + 1.25rem, 1.563rem);
  --step-3: clamp(1.7rem, 1.1vw + 1.4rem, 1.953rem);
  --step-4: clamp(2rem, 1.9vw + 1.5rem, 2.441rem);
  --step-5: clamp(2.4rem, 3vw + 1.6rem, 3.052rem);
  --step-6: clamp(2.9rem, 5vw + 1.6rem, 3.815rem);
  --step-7: clamp(3.4rem, 8vw + 1.4rem, 6rem);

  /* layout */
  --measure: 1120px;
  --gutter: 1.5rem;
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; min-width: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
  /* DO NOT re-add -webkit-font-smoothing or text-rendering here.
     The conversion added `-webkit-font-smoothing: antialiased` and
     `text-rendering: optimizeLegibility`; brandscribed.lovable.app sets
     NEITHER, anywhere. `antialiased` forces Chrome off subpixel AA onto
     grayscale, which renders light-on-dark text visibly thinner — and Bodoni
     Moda is a Didone whose hairlines all but vanish under it. Cinzel has no
     hairlines, which is why the hero looked right while every Bodoni heading
     looked wrong. Leaving both unset restores the Lovable rendering. */
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Tailwind Preflight equivalent. Lovable ships this and the Jekyll conversion
   dropped it, so h4-h6 were still picking up the UA default bold-700 while the
   same elements on brandscribed.lovable.app inherit 400 from body. Must stay
   ABOVE the h1-h3 rule below, which deliberately re-asserts 500. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
::selection { background: var(--brass); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--ink); padding: 0.6rem 1rem;
  font-family: var(--font-label); letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================================
   PRIMITIVES
   ========================================================================= */
.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.4;
}

.slug {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  overflow-wrap: anywhere;
}

.rule { border: 0; border-top: 1px solid var(--line); }

.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  text-align: center;
  cursor: pointer;
}
.btn {
  border: 1px solid var(--brass);
  color: var(--ink);
  background: var(--brass);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:hover { background: transparent; color: var(--brass); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--paper);
  background: transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn-sm { padding: 0.6rem 1.25rem; font-size: var(--step--2); }

.field {
  width: 100%;
  background: color-mix(in srgb, var(--bone) 7%, transparent);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: 0.85rem 1rem;
  transition: border-color 200ms ease;
}
.field:hover, .field:focus { border-color: var(--brass); }
.field::placeholder { color: var(--smoke); }

/* honeypot — never display:none */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   TYPE / LAYOUT HELPERS  (token-driven, no raw hex)
   ========================================================================= */
/* Big display figures: prices, step numbers. Bodoni, not Courier - the
   conversion had these on .mono, which is the visible substitution. Declared
   before the colour utilities so `.numeral .brass` still resolves to --brass,
   mirroring Tailwind's component-then-utility order on the Lovable build. */
.numeral {
  font-family: var(--font-display);
  font-size: var(--step-4);
  color: var(--brass-dim);
  font-variant-numeric: lining-nums;
  line-height: 1;
}
/* Used by the #playbook section, which is not in the current homepage build -
   see question 27 (section order). Carried so parity holds when it lands. */
.playbook-card {
  border: 1px solid var(--line-paper);
  background: var(--bone);
  color: var(--graphite);
  font-family: var(--font-mono);
  box-shadow: 10px 10px 0 color-mix(in oklab, var(--graphite) 12%, transparent);
  padding: 2.1rem 2.1rem 1.9rem;
}

.center { text-align: center; }
.muted { color: var(--smoke); }
.bone { color: var(--bone); }
.brass { color: var(--brass); }
.emph { font-style: italic; color: var(--brass); }
.emph-plain { font-style: normal; color: var(--brass); }
.strong-bone { font-weight: 500; color: var(--bone); }

.t-xs   { font-size: var(--step--1); }
.t-sm   { font-size: var(--step-0); }
.t-lg   { font-size: var(--step-1); }
.t-xl   { font-size: var(--step-2); }
.t-2xl  { font-size: var(--step-3); }
.t-3xl  { font-size: var(--step-4); }
.t-4xl  { font-size: var(--step-5); }
.t-5xl  { font-size: var(--step-6); }
.t-6xl  { font-size: var(--step-7); }
/* Lovable pins several Bodoni headings to arbitrary pixel values rather than a
   scale step (Tailwind `text-[22px]` and friends). Those are not decorative —
   Bodoni Moda carries an `opsz` axis and `font-optical-sizing: auto`, so the
   font SIZE selects the optical design. Rendering a 22px heading at 25px pulls
   a more display-oriented cut with narrower apertures and thinner hairlines,
   which is why the conversion's Bodoni read as a different typeface. These
   mirror the source values exactly; `leading-tight` is 1.25. */
.t-card    { font-size: 22px; line-height: 1.25; }
.t-card-md { font-size: 24px; line-height: 1.25; }
.t-card-lg { font-size: 26px; line-height: 1.25; }
.t-name    { font-size: 20px; }

.display { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }

.section { padding-block: clamp(4rem, 8vw, 8rem); }
.section-sm { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section-border-t { border-top: 1px solid var(--line); }
.section-border-y { border-block: 1px solid var(--line); }

.stack > * + * { margin-top: 1.5rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack-lg > * + * { margin-top: 2rem; }

.measure-sm { max-width: 48rem; margin-inline: auto; }
.measure-xs { max-width: 40rem; margin-inline: auto; }
.measure-prose { max-width: 68ch; }

.lead {
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.55;
  color: var(--smoke);
}

.head-block { max-width: 46rem; margin-inline: auto; margin-bottom: clamp(3rem, 5vw, 4rem); }
/* The Act II heading is the longest H2 on the site (74 chars). In the default
   46rem / --step-6 head-block it broke to FOUR lines. Measured across
   viewports: a 58rem measure at this clamp lands it on two lines from 1024px
   up, three at 768, and four at 390 (down from six). */
#process .head-block { max-width: 58rem; }
#process .head-block h2 { font-size: clamp(2.2rem, 4.2vw + 1.1rem, 3.3rem); }
.head-block h1, .head-block h2 { font-size: var(--step-6); color: var(--bone); }
.subhead { margin-top: 1.5rem; font-size: var(--step-1); color: var(--smoke); }

.cta-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.cta-row.center { justify-content: center; }

/* generic bordered card grid (act I / models / faq) */
.card-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.card-grid.cols-2 { grid-template-columns: 1fr; }
.card-grid.cols-3 { grid-template-columns: 1fr; }
.card-grid > .card { background: var(--ink); padding: clamp(1.75rem, 3vw, 2.75rem); }
.card h3, .card h4 { font-family: var(--font-display); color: var(--bone); line-height: 1.15; }
.card .cue {
  display: block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass);
}
.card p { margin-top: 0.75rem; color: var(--smoke); }
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* .spaced — real gutters instead of the 1px hairline-grid trick.
   The default .card-grid paints the gap colour behind the WHOLE grid, so an
   odd number of cards leaves the trailing empty cell rendering as a bordered
   phantom block. With per-card borders there is nothing to paint where there
   is no card, so a half-empty last row is simply whitespace. */
.card-grid.spaced { gap: 2rem; border: 0; background: transparent; align-items: start; }
@media (min-width: 768px) { .card-grid.spaced { gap: 2.5rem; } }
.card-grid.spaced > .card { border: 1px solid var(--line); }

/* two-column split (about, contact) */
.split { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .split.media-left { grid-template-columns: 0.85fr 1.3fr; }
  .split.form-right { grid-template-columns: 1fr 1.15fr; }
}

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  backdrop-filter: blur(10px);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.75rem;
}
.brandmark img { height: 1.5rem; width: auto; }
@media (min-width: 768px) { .brandmark img { height: 2rem; } }

.nav-primary { display: none; align-items: center; gap: 1rem; }
.nav-link {
  font-family: var(--font-mono); font-size: var(--step--1);
  /* Tailwind's text-xs utility sets line-height as well as size (calc(1/0.75)
     = 1.3333). Our .t-* classes only carry size, so without this the nav
     inherited body's 1.65 and the header bar rendered taller than Lovable's. */
  line-height: 1.33333;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  transition: color 200ms ease;
}
.nav-link:hover { color: var(--brass); }

.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; cursor: pointer; color: inherit;
  vertical-align: middle;
  /* Deliberately sets NO font-* and NO line-height. The `font` shorthand that
     used to live here outranked .nav-link (same specificity, declared later)
     and reset the trigger to the body face — that was the header bug. And
     `line-height: inherit` measured 21.65px against Lovable's 17.49px, because
     Lovable leaves the button at its UA default. Leave both off. */
}
.nav-drop-trigger svg { fill: none; stroke: currentColor; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 0; min-width: 15rem;
  display: grid; gap: 0.7rem; padding: 1rem 1.1rem;
  background: var(--ink); border: 1px solid var(--line); border-radius: 0.25rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.nav-drop-right .nav-drop-menu { left: auto; right: 0; }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-cta { flex-shrink: 0; }
.nav-mobile-controls { display: flex; align-items: center; gap: 0.75rem; }
.hamburger {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem;
  background: none; border: 0; cursor: pointer;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}
.hamburger svg { stroke: currentColor; fill: none; }
.nav-mobile { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 95%, transparent); }
.nav-mobile[hidden] { display: none; }
.nav-mobile nav { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.5rem; }
.nav-mobile-group { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-mobile-group > span {
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--smoke);
}
.nav-mobile-group .sub { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--line); }

@media (min-width: 1024px) {
  .nav-primary { display: flex; }
  .nav-mobile-controls { display: none; }
  .nav-mobile { display: none !important; }
}

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.06em; color: var(--smoke);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumbs a { color: var(--smoke); transition: color 200ms ease; }
.breadcrumbs a:hover { color: var(--brass); }
.breadcrumbs [aria-current="page"] { color: var(--bone); }
.breadcrumbs .sep { color: color-mix(in srgb, var(--smoke) 55%, transparent); }

/* =========================================================================
   SLUGLINES (screenplay slug w/ brass rules)
   ========================================================================= */
.sluglines {
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass);
  display: flex; align-items: center; gap: 14px;
}
.sluglines::before { content: ""; width: 34px; height: 1px; background: var(--brass); flex: none; }
.sluglines.is-center { justify-content: center; }
.sluglines.is-center::after { content: ""; width: 34px; height: 1px; background: var(--brass); flex: none; }
.sluglines.on-paper { color: var(--brass-dim); }
.sluglines.on-paper::before, .sluglines.on-paper::after { background: var(--brass-dim); }

.framemark {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: color-mix(in oklab, var(--smoke) 55%, transparent);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; overflow: hidden; min-height: 65svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5rem 1.5rem 4rem;
  background:
    radial-gradient(ellipse 75% 55% at 50% 38%, color-mix(in oklab, var(--brass) 13%, transparent), transparent 65%),
    var(--ink);
}
.hero::before, .hero::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background: color-mix(in oklab, var(--ink) 75%, black); z-index: 2;
}
.hero::before { top: 0; }
.hero::after { bottom: 0; }
.hero > * { position: relative; z-index: 1; }
.hero-title {
  font-family: var(--font-label); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2.125rem, 5.6vw, 5.25rem); line-height: 1.14;
  letter-spacing: 0.035em; color: var(--bone);
}
.hero-title .brass { color: var(--brass); }
.hero-sub { margin-top: 1.5rem; font-family: var(--font-mono); font-size: var(--step-0); letter-spacing: 0.1em; color: var(--smoke); }
.hero .frame-top, .hero .frame-bottom {
  position: absolute; left: 0; right: 0; display: flex; justify-content: space-between;
  padding-inline: 1.5rem;
}
.hero .frame-top { top: 2.25rem; }
.hero .frame-bottom { bottom: 2.5rem; }
@media (min-width: 768px) { .hero .frame-top, .hero .frame-bottom { padding-inline: 3rem; } }

.curtain {
  position: absolute; inset: 14px 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    color-mix(in oklab, var(--ink) 92%, black) 0 26px,
    color-mix(in oklab, var(--graphite) 26%, var(--ink)) 26px 46px,
    color-mix(in oklab, var(--ink) 92%, black) 46px 72px);
  opacity: 0.5; mask-image: linear-gradient(to bottom, black, transparent 55%);
}
.vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 30%, color-mix(in oklab, var(--ink) 88%, black) 100%);
}
.spotlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: conic-gradient(from 200deg at 50% -25%, transparent 0deg,
    color-mix(in oklab, var(--brass) 9%, transparent) 20deg, transparent 42deg);
}

.tab {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 30px;
  border: 1px solid color-mix(in oklab, var(--bone) 28%, transparent); color: var(--bone);
  transition: border-color 0.25s, color 0.25s;
}
.tab:hover { border-color: var(--brass); color: var(--brass); }
.tab-row { margin-top: 2.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem; }

/* =========================================================================
   SURFACES / SPECIAL
   ========================================================================= */
.surface-raised { background: color-mix(in oklab, var(--ink) 92%, var(--paper)); }

.script-page {
  background: var(--paper); color: var(--graphite);
  max-width: 820px; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5.25rem) clamp(1.6rem, 7vw, 6rem);
  box-shadow: 0 40px 90px color-mix(in oklab, black 55%, transparent),
              0 4px 18px color-mix(in oklab, black 40%, transparent);
  font-family: var(--font-mono); position: relative;
}
.script-page::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--brass); }
.script-page hr { border: 0; border-top: 1px solid var(--line-paper); margin: 0.5rem 0 0.5rem; }
.beat { padding: 1.75rem 0 0.5rem; }
.beat + .beat { border-top: 1px dashed var(--line-paper); }
.beat .beat-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; }
.beat .beat-head .n { color: var(--brass-dim); }
.beat p.body { margin-top: 0.75rem; max-width: 60ch; font-size: 0.9rem; line-height: 1.75; }
.parenthetical { font-size: 0.85rem; font-style: italic; color: color-mix(in oklab, var(--graphite) 70%, transparent); margin-top: 0.65rem; padding-left: 14ch; }
@media (max-width: 640px) { .parenthetical { padding-left: 0; } }

.portrait {
  position: relative; border: 1px solid var(--line);
  background: color-mix(in oklab, var(--ink) 92%, var(--paper));
  aspect-ratio: 4 / 5; max-width: 420px; overflow: hidden;
}
.portrait::before { content: ""; position: absolute; inset: 14px; border: 1px solid color-mix(in oklab, var(--brass) 35%, transparent); pointer-events: none; z-index: 2; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait .framemark { position: absolute; inset-inline: 1.5rem; bottom: 1.25rem; z-index: 3; display: flex; justify-content: space-between; }

/* definition-style rows */
.deliverable-row {
  display: grid; gap: 1.25rem; padding-block: 2rem; border-top: 1px solid var(--line);
}
.deliverable-row:first-of-type { border-top: 0; }
.deliverable-row .role { display: block; margin-bottom: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.deliverable-row h3 { font-family: var(--font-display); font-size: var(--step-3); color: var(--bone); }
.deliverable-row p { max-width: 56ch; color: var(--smoke); }
@media (min-width: 768px) { .deliverable-row { grid-template-columns: minmax(220px, 0.9fr) 1.6fr; gap: 4rem; padding-block: 2.75rem; } }

/* =========================================================================
   AS-SEEN-IN / CREDITS
   ========================================================================= */
.proof-strip {
  background: var(--ink);
  border-top: 1px solid color-mix(in oklab, var(--brass-dim) 20%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--brass-dim) 20%, transparent);
  padding: 1.6rem 0 2rem;
}
/* The track holds SIX copies of the logo set. The keyframe travels exactly -50%
   (= three copies, 3198px), so the frame it lands on is pixel-identical to the
   frame it started on — no seam, no gap, no reset flash. Two copies is not
   enough: -50% is then 1066px, narrower than a desktop viewport, which leaves
   dead space on the right at the wrap point. Never pauses on hover. */
.logo-marquee { overflow: hidden; margin-top: 1.4rem; }
.logo-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: logo-scroll 76s linear infinite; }
.logo-track img { height: 34px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; transition: opacity 200ms ease; }
.logo-track img:hover { opacity: 1; }
.credits-text { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--smoke); }
@keyframes logo-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: 100%; gap: 2rem; justify-content: center; } }

/* =========================================================================
   TESTIMONIALS / MEDIA
   ========================================================================= */
.stars { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.3em; color: var(--brass); margin-bottom: 1.25rem; }
.figure-card { overflow: hidden; border-radius: 3px; border: 1px solid var(--line); background: color-mix(in oklab, var(--graphite) 40%, transparent); }
.figure-card video, .figure-card .video-frame { display: block; aspect-ratio: 16/9; width: 100%; background: var(--ink); }
.figure-card .body { border-top: 1px solid var(--line); background: var(--ink); padding: clamp(1.75rem, 3vw, 2.75rem); }
/* Lovable hard-codes text-[21px] leading-snug here and text-[11.5px] on the
   caption; the conversion rounded both to the nearest scale token, drifting
   4px and 0.02px. Matched to the source rather than to the token. */
.figure-card blockquote { font-family: var(--font-display); font-size: 21px; font-weight: 500; font-style: italic; line-height: 1.375; color: var(--bone); }
.figure-card figcaption { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; line-height: 1.8; letter-spacing: 0.14em; color: var(--smoke); }
.figure-card figcaption b { display: block; color: var(--brass); }
.placeholder-box {
  display: flex; min-height: 10rem; align-items: center; justify-content: center;
  border: 1px dashed var(--line); padding: 1.5rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  line-height: 2; letter-spacing: 0.16em; color: var(--smoke);
}

.video-frame {
  position: relative; display: block; aspect-ratio: 16/9; width: 100%;
  border: 1px solid var(--line); background: var(--graphite); overflow: hidden;
}
.video-frame iframe, .video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* Click-to-load facade. Nothing is requested from YouTube (or the mp4 fetched)
   until the visitor actually clicks, so third-party JS and multi-MB media stay
   off the initial load entirely. site.js swaps the button for the real player. */
.video-facade { position: relative; }
.video-facade .video-facade-btn {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--graphite);
}
.video-facade .video-facade-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade .video-facade-btn:hover img { opacity: 0.75; }
.video-facade .video-facade-btn img { transition: opacity 200ms ease; }
.video-facade .video-facade-blank {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1.25rem; background: color-mix(in oklab, var(--ink) 88%, var(--paper));
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--smoke); text-align: left;
}
.video-facade .video-facade-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border: 1px solid var(--brass);
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  color: var(--brass); transition: background-color 200ms ease, color 200ms ease;
}
.video-facade .video-facade-play svg { width: 20px; height: 20px; margin-left: 3px; }
.video-facade .video-facade-btn:hover .video-facade-play,
.video-facade .video-facade-btn:focus-visible .video-facade-play { background: var(--brass); color: var(--ink); }
.video-facade video, .video-facade iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); background: var(--ink);
}
.figure-card .video-facade .video-facade-btn { border: 0; }
/* Both testimonial clips are 4:3 (1440x1080). Forcing the default 16/9 frame
   on them either crops the speaker's head or pillarboxes with dead bars. */
.video-facade.is-4x3 .video-facade-btn,
.video-facade.is-4x3 video,
.video-facade.is-4x3 iframe { aspect-ratio: 4 / 3; }

/* =========================================================================
   FAQ ACCORDION
   Native <details>/<summary>. Full width of .shell — no max-width clamp, the
   brief asked for it to span its container.
   ========================================================================= */
.faq-list { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); width: 100%; }
.faq-item { background: var(--ink); }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.25rem, 3vw, 2.25rem);
  cursor: pointer; list-style: none;
  transition: color 200ms ease, background-color 200ms ease;
}
/* Kill the UA disclosure triangle in both engines; .faq-mark replaces it. */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--brass); background: color-mix(in oklab, var(--paper) 3%, transparent); }
.faq-item > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.faq-q { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.25; color: var(--bone); }
.faq-item > summary:hover .faq-q { color: inherit; }
/* Plus sign drawn from two rules so it can rotate into a minus on open. */
.faq-mark { position: relative; flex: none; width: 16px; height: 16px; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px;
  background: var(--brass); transition: transform 250ms ease;
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-a {
  padding: 0 clamp(1.25rem, 3vw, 2.25rem) clamp(1.35rem, 2.5vw, 1.85rem);
  color: var(--smoke); max-width: 70ch;
}

/* =========================================================================
   IN THE MEDIA — entry grid
   Two across on desktop, one on mobile. Each entry is a self-contained block:
   thumbnail (click-to-load facade or an outbound link) over its title.
   ========================================================================= */
/* Real spacing between blocks, not the 1px hairline-grid trick used elsewhere.
   That technique paints the gap colour behind the whole grid, so an odd number
   of entries left the trailing empty cell rendering as a bordered phantom
   block. Each card owns its border now, so a half-empty last row is just
   whitespace and nothing renders where there is no entry. */
.media-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 768px) { .media-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
.media-card { background: var(--ink); border: 1px solid var(--line); display: flex; flex-direction: column; }
.media-card > .video-facade, .media-card > .video-frame { border-bottom: 1px solid var(--line); }
.media-card-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: 0.5rem; }
.media-card-outlet { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.media-card-date { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }

/* =========================================================================
   CONTACT FOOTER SECTION
   ========================================================================= */
.contact-footer {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in oklab, var(--brass) 8%, transparent), transparent 65%),
    color-mix(in oklab, var(--ink) 96%, var(--paper));
  border-top: 1px solid var(--line);
}
.contact-footer dt { margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--smoke); }
.contact-footer dd { font-size: var(--step-1); color: var(--bone); }
.contact-form { border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); }
/* One field per line. The old three-across grid squeezed Name/Email/Phone into
   thirds; on its own page the form has the room to be read top to bottom. */
.form-stack { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
.field-row { display: grid; gap: 0.4rem; }
.newsletter-form { display: grid; gap: 1rem; }
.form-error {
  margin-bottom: 1.25rem; padding: 0.85rem 1rem;
  border: 1px solid var(--brass); background: color-mix(in oklab, var(--brass) 12%, transparent);
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; color: var(--bone);
}
.form-error[hidden] { display: none; }
/* Inline contact pair on the homepage teaser. */
.contact-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; }
.formlabel { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); }
.fineprint { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--smoke); }
.fineprint a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }

.social-links { display: flex; align-items: center; gap: 1rem; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--smoke); transition: border-color 200ms ease, color 200ms ease; }
.social-links a svg { width: 18px; height: 18px; }
.social-links a:hover { border-color: var(--brass); color: var(--brass); }

/* =========================================================================
   SITE FOOTER
   ========================================================================= */
.site-footer { border-top: 1px solid var(--line); padding-block: 3.5rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.2fr 2fr; } }
.footer-brand img { height: 1.75rem; width: auto; }
.footer-brand .motto { margin-top: 1.25rem; max-width: 34ch; font-size: 15px; color: var(--smoke); }
.footer-brand .contact { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 13px; color: var(--smoke); }
.footer-brand .contact a:hover { color: var(--brass); }
/* One icon, same treatment as the contact block's .social-links above. */
.footer-brand .socials { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.footer-brand .socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); color: var(--smoke);
  transition: border-color 200ms ease, color 200ms ease;
}
.footer-brand .socials a svg { width: 18px; height: 18px; }
.footer-brand .socials a:hover { border-color: var(--brass); color: var(--brass); }
.footer-nav { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-nav { grid-template-columns: repeat(3, 1fr); } }
.footer-title { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.footer-nav ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.footer-bottom { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
/* Designer credit — deliberately the quietest thing on the page. */
/* Discreet by size, spacing and placement — NOT by dimming the colour. Fading
   --smoke to 62% over --ink measured 3.49:1, which fails WCAG AA (4.5:1) and
   cost Lighthouse Accessibility 100 on every page. Full --smoke is 7.30:1. */
.footer-credit { margin-top: 1.75rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); }
.footer-credit a { color: inherit; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
.footer-credit a:hover { color: var(--brass); border-bottom-color: color-mix(in oklab, var(--brass) 45%, transparent); }
.footer-bottom .copy { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--smoke); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-bottom nav a { font-family: var(--font-label); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.18em; color: var(--smoke); transition: color 200ms ease; }
.footer-bottom nav a:hover { color: var(--brass); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* =========================================================================
   POLICY / LONG-FORM PAGES
   ========================================================================= */
.policy-body { max-width: 68ch; margin-inline: auto; font-size: var(--step-0); line-height: 1.8; color: color-mix(in srgb, var(--paper) 85%, transparent); }
.policy-body h2 { font-size: var(--step-3); color: var(--bone); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.policy-body h3 { font-size: var(--step-2); color: var(--bone); margin-top: 1.75rem; margin-bottom: 0.5rem; }
.policy-body p + p { margin-top: 1.1rem; }
.policy-body ul, .policy-body ol { margin: 1rem 0 1rem 1.25rem; display: grid; gap: 0.5rem; }
.policy-body a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.legal-placeholder { border: 1px dashed var(--line); padding: 2rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--smoke); text-align: center; line-height: 1.9; }

/* =========================================================================
   BLOG
   ========================================================================= */
.post-header { max-width: 760px; margin-inline: auto; }
.post-figure { max-width: 900px; margin: 2rem auto; border: 1px solid var(--line); overflow: hidden; }
.post-figure img { width: 100%; height: auto; display: block; }
.post-title { font-size: var(--step-6); color: var(--bone); margin-top: 1rem; }
.post-meta { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.post-meta a { color: var(--brass); }
.post-meta .dot { color: color-mix(in srgb, var(--smoke) 55%, transparent); }

/* long-form reading measure 65–75ch, Archivo body */
.prose { max-width: 70ch; margin-inline: auto; font-family: var(--font-body); font-size: 1.06rem; line-height: 1.8; color: color-mix(in srgb, var(--paper) 90%, transparent); }
.prose > * + * { margin-top: 1.35rem; }
.prose h2 { font-family: var(--font-display); font-size: var(--step-4); color: var(--bone); margin-top: 2.5rem; }
.prose h3 { font-family: var(--font-display); font-size: var(--step-3); color: var(--bone); margin-top: 2rem; }
.prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.prose li { padding-left: 0.35rem; }
.prose li::marker { color: var(--brass-dim); }
.prose blockquote { border-left: 3px solid var(--brass); padding-left: 1.25rem; margin-left: 0; color: var(--bone); font-style: italic; }
.prose img { border: 1px solid var(--line); margin-block: 1.5rem; }

.author-bio { max-width: 760px; margin: 3.5rem auto 0; border-top: 1px solid var(--line); padding-top: 2rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .author-bio { grid-template-columns: auto 1fr; align-items: start; } }
.author-bio .avatar { width: 84px; height: 84px; border: 1px solid var(--line); background: color-mix(in oklab, var(--ink) 92%, var(--paper)); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.6rem; color: var(--smoke); text-align: center; }
.author-bio .name { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass); font-size: var(--step--1); }
.author-bio p { margin-top: 0.5rem; color: var(--smoke); font-size: 0.98rem; }

.post-nav { max-width: 760px; margin: 2.5rem auto 0; }

/* blog index cards */
.post-list { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.post-card { background: var(--ink); display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 700px) { .post-card { grid-template-columns: minmax(0, 240px) 1fr; align-items: center; } }
.post-card .thumb { aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line); background: color-mix(in oklab, var(--ink) 92%, var(--paper)); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card h2 { font-size: var(--step-3); color: var(--bone); line-height: 1.2; }
.post-card h2 a:hover { color: var(--brass); }
.post-card .excerpt { margin-top: 0.6rem; color: var(--smoke); }
.post-card .card-meta { margin-top: 0.75rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--smoke); }

.category-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
.category-bar a { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.4rem 0.9rem; border: 1px solid var(--line); color: var(--smoke); transition: border-color 200ms ease, color 200ms ease; }
.category-bar a:hover, .category-bar a[aria-current="page"] { border-color: var(--brass); color: var(--brass); }

.pagination { margin-top: 3rem; display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; }
.pagination a { color: var(--brass); }
.pagination .disabled { color: color-mix(in srgb, var(--smoke) 50%, transparent); }

/* Newsletter signup block on the blog index. */
.newsletter-cta { margin-top: clamp(3rem, 6vw, 4.5rem); border: 1px solid var(--line); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 34rem; }
.newsletter-cta .footer-title { margin-bottom: 0.5rem; }
.newsletter-cta .btn { justify-self: start; }

/* =========================================================================
   AEO answer block
   ========================================================================= */
.aeo { max-width: 62ch; margin-inline: auto; font-size: var(--step-1); line-height: 1.6; color: var(--smoke); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* generic page main */
.page-main { padding-block: clamp(3.5rem, 6vw, 6rem); }

/* iframe embed (calendar) */
/* Transparent, not a tinted panel. The GHL booking widget paints its own
   background, so anything behind it only showed as a mismatched band while the
   iframe was still loading and around its edges once it had. */
.embed-frame { width: 100%; min-height: 720px; border: 1px solid var(--line); background: transparent; }