/* ==========================================================================
   AFC Media Group — afcmediagroup.com
   Single stylesheet. Sections run in the same order as index.html.

     1  Tokens
     2  Reset + base
     3  Type roles
     4  Shared furniture (wrap, section head, eyebrow, buttons, slate)
     5  Header + mobile overlay
     6  Hero + viewfinder
     7  Service ticker
     8  Selected work + the video system
     9  Services
    10  Client quote
    11  Process
    12  About
    13  Book a consult (booking ladder + inquiry form)
    14  Footer
    15  404
    16  Motion
    17  Responsive
    18  Print

   Every colour, family and spacing step is a custom property from §1.
   Do not hardcode a hex outside §1. See CLAUDE.md.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- ground ------------------------------------------------------------ */
  --ink:        #0C0809;   /* page ground                                    */
  --ink-2:      #141011;   /* raised: cards, ticker, quote band              */
  --ink-3:      #1C1618;   /* inset: video wells, slates, inputs             */
  --line:       #2E2427;   /* borders                                        */
  --line-soft:  #241C1E;   /* hairline dividers                              */

  /* --- type -------------------------------------------------------------- */
  --text:       #F2EBE9;   /* body — warm off-white, never pure #FFF         */
  --muted:      #A89599;   /* secondary copy         — 7.04:1 on --ink       */
  --faint:      #7A686C;   /* decorative mono labels — 3.42:1 on --ink-3     */

  /* --- brand ------------------------------------------------------------- */
  --red:        #E3000B;   /* THE brand red, sampled from the logo file.
                              FILLS, RULES, THE REC DOT — never body text:
                              it measures 3.84:1 on --ink-2 and fails AA.    */
  --red-deep:   #9E0009;   /* pressed states, gradient stop                  */
  --red-glow:   #FF2233;   /* hover brighten, REC dot                        */
  --red-ink:    #FF2233;   /* red TEXT on dark — 4.97:1 on --ink-2. Use this
                              anywhere red words sit on a dark ground.       */

  /* channel forms, for rgb(... / alpha) */
  --ink-rgb:    12 8 9;
  --red-rgb:    227 0 11;

  /* --- families ---------------------------------------------------------- */
  --f-display: 'Archivo', 'Archivo Expanded', 'Helvetica Neue', Helvetica,
               Arial, sans-serif;
  --f-body:    'Source Serif 4', 'Source Serif Pro', Georgia,
               'Times New Roman', serif;
  --f-mono:    'Spline Sans Mono', ui-monospace, SFMono-Regular, 'SF Mono',
               Menlo, Consolas, monospace;

  /* --- spacing scale ----------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;
  --s9: 5rem;    --s10: 7rem;

  /* --- layout ------------------------------------------------------------ */
  --maxw:   1160px;
  --gut:    clamp(1.15rem, 4vw, 2.5rem);
  --sec-y:  clamp(4.25rem, 8.5vw, 7.25rem);
  --hdr-h:  4.25rem;

  /* --- motion ------------------------------------------------------------ */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --reveal:   .7s var(--ease);
  --ticker-s: 36s;
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

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

* { margin: 0; }

/* The hidden attribute must win over any author display rule. Without this,
   .foot a { display:block } would re-show an empty social link. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchor links must not land under the sticky header */
  scroll-padding-top: calc(var(--hdr-h) + var(--s4));
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: clamp(1.05rem, .32vw + .99rem, 1.1rem);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* nothing may push the page sideways */
  overflow-x: hidden;
}

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:target { scroll-margin-top: calc(var(--hdr-h) + var(--s4)); }

/* Focus: 2px red, 3px offset, everywhere. Never outline:none without this. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first in tab order */
.skip {
  position: absolute;
  left: var(--s4);
  top: -100vh;
  z-index: 200;
  background: var(--red);
  color: #FFF;
  padding: .85rem 1.1rem;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: var(--s3); }

/* body scroll lock while the mobile overlay is open */
body.is-locked { overflow: hidden; }


/* ==========================================================================
   3. TYPE ROLES
   ========================================================================== */

/* Display — Archivo. The expanded width axis is what echoes the logo. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-wrap: balance;
}

.h1 {
  font-weight: 900;
  font-variation-settings: 'wdth' 122;
  font-size: clamp(2.7rem, 7.4vw, 5.6rem);
  line-height: .96;
  max-width: 14ch;
}
.h1 em { font-style: normal; color: var(--red-ink); }

.h2 {
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  max-width: 18ch;
}

.h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.005em;
}

/* Utility — Spline Sans Mono. Eyebrows, labels, timecodes, durations. */
.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--red-ink);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: var(--s4);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: var(--red);
  flex: 0 0 auto;
}

.lede {
  color: var(--muted);
  font-size: clamp(1.06rem, .5vw + .95rem, 1.2rem);
  max-width: 62ch;
}

/* body measure cap — 62-66 characters */
p { max-width: 66ch; }


/* ==========================================================================
   4. SHARED FURNITURE
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { padding-block: var(--sec-y); }

.sec-head { margin-bottom: var(--s8); }
.sec-head .lede { margin-top: var(--s4); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--red);
  --btn-fg: #FFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .8rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover  { --btn-bg: var(--red-glow); }
.btn:active { --btn-bg: var(--red-deep); transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover  { --btn-bg: transparent; border-color: var(--red); }
.btn--ghost:active { --btn-bg: transparent; }

.btn--lg   { padding: 1.05rem 1.75rem; font-size: .78rem; }
.btn--wide { width: 100%; }

/* --- clapper slate: every empty media placeholder ------------------------ */

.slate {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  align-content: center;
  gap: var(--s2);
  padding: var(--s6) var(--s5);
  text-align: center;
  overflow: hidden;
}
.slate--portrait { aspect-ratio: 9 / 16; }
.slate--photo    { aspect-ratio: 4 / 5; }

/* rule-of-thirds grid, in gradients */
.slate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background-image:
    repeating-linear-gradient(to right,  var(--line-soft) 0 1px, transparent 1px 33.3333%),
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 33.3333%);
}

/* the clapper hinge */
.slate::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.05rem;
  background-image:
    repeating-linear-gradient(114deg,
      var(--red)  0 1.5rem,
      var(--text) 1.5rem 3rem);
  opacity: .92;
}

.slate__label {
  position: relative;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.slate__hint {
  position: relative;
  color: var(--faint);
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  max-width: 34ch;
  margin-inline: auto;
  text-transform: none;
}


/* ==========================================================================
   5. HEADER + MOBILE OVERLAY
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--hdr-h);
  background: rgb(var(--ink-rgb) / .88);
  border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(10px)) {
  .hdr { backdrop-filter: blur(10px) saturate(150%); }
}

.hdr__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;   /* tap target, not decoration */
  text-decoration: none;
}
.brand img { height: 38px; width: auto; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}
.nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;   /* tap target, even on desktop */
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.nav__link:hover { color: var(--text); }

/* hamburger — hidden until the overlay breakpoint */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  place-items: center;
  flex: 0 0 auto;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  box-shadow: 0 -5px var(--text), 0 5px var(--text);
}

/* full-screen overlay, not a squeezed dropdown */
.ovl {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  display: grid;
  grid-template-rows: var(--hdr-h) 1fr;
  visibility: hidden;
  opacity: 0;
  /* Visibility flips at the END of the fade-out, but INSTANTLY on open (see
     the rule below). Transitioning visibility itself would leave the panel
     unfocusable for the length of the transition, so the first link could not
     take focus when the menu opens. */
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.ovl[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .25s var(--ease), visibility 0s linear 0s;
}

.ovl__bar { display: flex; align-items: center; }
.ovl__close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.ovl__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s2);
  padding-bottom: 10vh;
  overflow-y: auto;
}
.ovl__link {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  font-size: clamp(1.9rem, 8.5vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--text);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: color .18s var(--ease);
}
.ovl__link:hover { color: var(--red-ink); }
.ovl .btn { margin-top: var(--s6); }


/* ==========================================================================
   6. HERO + VIEWFINDER
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* soft red glow bleeding up from the bottom edge */
.hero__glow {
  position: absolute;
  inset: auto 0 -35% 0;
  height: 80%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 100% at 50% 100%,
              rgb(var(--red-rgb) / .26) 0%,
              rgb(var(--red-rgb) / .09) 38%,
              transparent 72%);
}

/* optional hero background video — poster-first, gated hard in main.js */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg > * { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(var(--ink-rgb) / .55);
}

/* --- viewfinder bar ------------------------------------------------------ */

.vf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: min(100%, 27rem);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .45rem .7rem;
  margin-bottom: var(--s6);
  background: rgb(var(--ink-rgb) / .5);
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.vf__rec { display: flex; align-items: center; gap: .45rem; }
.vf__dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--red-glow);
  animation: rec-blink 1.6s steps(1, end) infinite;
}
.vf__tc {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
  max-width: 46ch;
}
.hero .lede { margin-top: var(--s5); }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s7);
}


/* ==========================================================================
   7. SERVICE TICKER
   ========================================================================== */

.ticker {
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  padding-block: .85rem;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker var(--ticker-s) linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__grp { display: flex; flex: 0 0 auto; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  width: .3rem;
  height: .3rem;
  background: var(--red);
  flex: 0 0 auto;
}


/* ==========================================================================
   8. SELECTED WORK + THE VIDEO SYSTEM
   ========================================================================== */

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s6);
}

/* The reel wall. 240px minimum gives four across at the 1160px cap — a 9:16
   card any narrower reads as a sliver. */
.work__shorts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
}

.short { margin: 0; display: flex; flex-direction: column; }
.short__cap {
  margin-top: var(--s3);
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--text);
}
.short__tag {
  margin-top: .3rem;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

.card__tag {
  display: block;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: var(--s2);
}
.card__title { margin-bottom: var(--s2); }
.card__desc {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
  margin-bottom: var(--s4);
  max-width: 46ch;
}

.shorts-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s9);
  margin-bottom: var(--s5);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s5);
}
.shorts-head h3 { flex: 0 0 auto; }
.shorts-head p { color: var(--muted); font-size: .95rem; }

/* --- the facade well ----------------------------------------------------- */

.vid {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.vid--portrait { aspect-ratio: 9 / 16; }

.vid__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the whole well is the button — the 44x44 minimum is trivially met */
.vid__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(to top,
              rgb(var(--ink-rgb) / .62), rgb(var(--ink-rgb) / .06) 55%);
  border: 0;
  cursor: pointer;
  transition: background .25s var(--ease);
}
.vid__btn:hover { background: rgb(var(--ink-rgb) / .3); }

.vid__ico {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  transition: background .18s var(--ease), transform .25s var(--ease);
}
.vid__btn:hover .vid__ico { background: var(--red-glow); transform: scale(1.06); }
.vid__ico svg { width: 22px; height: 22px; fill: #FFF; margin-left: 3px; }

.vid__dur {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  padding: .18rem .42rem;
  background: rgb(var(--ink-rgb) / .84);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  pointer-events: none;
}

.vid__noscript {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--text);
  background: rgb(var(--ink-rgb) / .84);
  border: 1px solid var(--line);
  padding: .18rem .42rem;
}

/* --- the player lightbox ------------------------------------------------- */
/* Native <dialog> gives a focus trap, Esc-to-close and an inert background
   for free. It is EMPTY until a play button is pressed — no iframe, no
   <video>, no third-party script is in the DOM before that click.           */

.lightbox {
  width: min(1400px, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ink-2);
  color: var(--text);
  overflow: visible;
}
.lightbox::backdrop { background: rgb(12 8 9 / .93); }

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: .7rem .8rem .7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.lightbox__title {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox__close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { border-color: var(--red); }

.lightbox__stage {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  max-height: calc(92vh - 4rem);
}
.lightbox__stage[data-orient='portrait'] {
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  max-width: calc((92vh - 4rem) * 9 / 16);
}
.lightbox__stage > iframe,
.lightbox__stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}


/* ==========================================================================
   9. SERVICES
   ========================================================================== */

/* 1px gap over a --line ground, so the gaps read as hairlines */
.svcs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(278px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.svc {
  background: var(--ink);
  padding: var(--s6) var(--s5) var(--s7);
  transition: background .2s var(--ease);
}
.svc:hover { background: var(--ink-2); }
.svc__idx {
  display: block;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--faint);
  margin-bottom: var(--s5);
}
.svc h3 { margin-bottom: var(--s3); }
.svc p { color: var(--muted); font-size: .98rem; line-height: 1.6; }

.delivery {
  margin-top: var(--s6);
  border: 1px dashed var(--line);
  padding: var(--s4) var(--s5);
  text-align: center;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}
.delivery b { color: var(--text); font-weight: 400; }


/* ==========================================================================
   10. CLIENT QUOTE
   ========================================================================== */

.quote {
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
}
.quote figure { margin: 0; }
.quote blockquote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  line-height: 1.34;
  max-width: 26ch;
  margin: 0;
}
.quote blockquote p { max-width: none; }
.quote blockquote em { font-style: italic; color: var(--red-ink); }
.quote figcaption {
  margin-top: var(--s5);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   11. PROCESS
   ========================================================================== */

.steps {
  /* 205px, not 215px: the four steps are a sequence and should read as one
     row on a 1024px laptop. At 215px they need 932px and only 929px is
     available there, so the fourth step wrapped to its own line. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: var(--s6) var(--s5);
}
.step { border-top: 2px solid var(--red); padding-top: var(--s4); }
.step__tc {
  display: block;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  margin-bottom: var(--s4);
}
.step h3 { margin-bottom: var(--s3); }
.step p { color: var(--muted); font-size: .98rem; line-height: 1.6; }


/* ==========================================================================
   12. ABOUT
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: start;
}
.about__copy p + p { margin-top: var(--s4); }
.about__copy p { color: var(--muted); }
.about__copy p:first-of-type { color: var(--text); }
.about__figure { margin: 0; }
.about__cap {
  margin-top: var(--s3);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}


/* ==========================================================================
   13. BOOK A CONSULT
   ========================================================================== */

.book { background: var(--ink-2); border-top: 1px solid var(--line-soft); }

.book__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--s6), 4vw, var(--s8));
  align-items: start;
}

.consult {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: clamp(var(--s5), 3vw, var(--s7));
}
.consult h3 { margin-bottom: var(--s3); }
.consult > p { color: var(--muted); font-size: 1rem; }

.consult__list {
  list-style: none;
  padding: 0;
  margin: var(--s5) 0 var(--s6);
  display: grid;
  gap: var(--s3);
}
.consult__list li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.consult__list li::before {
  content: '\2192';
  color: var(--red-ink);
  flex: 0 0 auto;
  font-size: .85rem;
}

/* --- the booking ladder -------------------------------------------------- */

.booking { margin-top: var(--s5); }

.booking__frame {
  width: 100%;
  height: min(900px, 85vh);
  border: 1px solid var(--line);
  background: var(--ink-3);
}
.booking__frame iframe { width: 100%; height: 100%; border: 0; }

/* branded skeleton shown while the iframe loads */
.booking__skel {
  width: 100%;
  height: min(420px, 55vh);
  border: 1px solid var(--line);
  background: var(--ink-3);
  display: grid;
  place-content: center;
  gap: var(--s3);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.booking__skel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.05rem;
  background-image:
    repeating-linear-gradient(114deg,
      var(--red)  0 1.5rem,
      var(--text) 1.5rem 3rem);
  opacity: .92;
}
.booking__skel span {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.note {
  font-family: var(--f-mono);
  color: var(--faint);
  letter-spacing: .08em;
  font-size: .68rem;
  line-height: 1.6;
  margin-top: var(--s3);
  max-width: none;
}
.note a { color: var(--muted); }

/* The always-present way out from under the booking iframe. A framing refusal
   is not detectable cross-origin, so this link is never conditional. */
.booking__alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.booking__alt:hover {
  color: var(--red-ink);
  text-decoration-color: var(--red);
}

/* --- inquiry form -------------------------------------------------------- */

.inquiry {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: clamp(var(--s5), 3vw, var(--s7));
}
.inquiry h3 { margin-bottom: var(--s5); }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.field { display: grid; gap: .4rem; margin-bottom: var(--s4); }
.field label {
  font-family: var(--f-mono);
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .16em;
  font-size: .68rem;
  line-height: 1.5;
}
.field label .req { color: var(--red-ink); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .7rem .8rem;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--text);
  transition: border-color .18s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--faint); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--red); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field select option { background: var(--ink-3); color: var(--text); }

/* date inputs render a UA icon that is invisible on a dark ground */
.field input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55);
  cursor: pointer;
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea { border-color: var(--red); }

.field__err {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--red-ink);
}

/* honeypot — hidden from sighted users AND from screen readers */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--muted);
  margin-top: var(--s3);
  min-height: 1.2em;
  max-width: none;
}
.form__status[data-tone='error'] { color: var(--red-ink); }

.form__done {
  border: 1px solid var(--red);
  padding: var(--s7) var(--s5);
  text-align: center;
}
.form__done h3 { margin-bottom: var(--s3); }
.form__done p { color: var(--muted); margin-inline: auto; }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.foot {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s8) var(--s6);
}
.foot__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: start;
}
.foot__lockup {
  /* 165px, not 132: "MEDIA GROUP" is 6.3% of the lockup height, so this is
     where the counters in D/A/R/O/P read. See tools/make-images.py. */
  height: 165px;
  width: auto;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s5);
  justify-items: start;
  width: 100%;
}
.foot h2 {
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s3);
  line-height: 1.5;
}
.foot a {
  display: flex;
  align-items: center;
  min-height: 44px;   /* tap target */
  color: var(--text);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  transition: color .18s var(--ease);
}
.foot a:hover { color: var(--red-ink); }
.foot p {
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  line-height: 1.7;
  max-width: 30ch;
}
.foot__base {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
}
.foot__base p, .foot__base a {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  max-width: none;
}
.foot__base a { display: inline; min-height: 0; padding: 0; }


/* ==========================================================================
   15. 404
   ========================================================================== */

.oops {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--s5);
  padding-block: var(--s9);
}
.oops__mark { height: 120px; width: auto; }
.oops p { color: var(--muted); }


/* ==========================================================================
   16. MOTION
   ========================================================================== */

@keyframes rec-blink {
  0%,   55%  { opacity: 1; }
  56%,  100% { opacity: .12; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* scroll reveal — opacity + 18px lift, unobserved after firing */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal), transform var(--reveal);
}
.reveal.is-in { opacity: 1; transform: none; }

/* No JS? Nothing may stay hidden. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; transform: none; }
  .vf__dot { animation: none; opacity: 1; }
}


/* ==========================================================================
   17. RESPONSIVE
   Correct at 375 / 768 / 1024 / 1440 / 1920.
   ========================================================================== */

@media (max-width: 1000px) {
  .book__grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .about__grid   { grid-template-columns: 1fr; }
  .about__figure { max-width: 340px; }
  .foot__grid    { grid-template-columns: 1fr; gap: var(--s6); }
}

@media (max-width: 760px) {
  .nav__link   { display: none; }
  .burger      { display: grid; }
  .nav         { gap: var(--s3); }
  .nav .btn    { padding: .7rem .95rem; font-size: .68rem; }
  .h1          { max-width: 100%; }
  .form__row   { grid-template-columns: 1fr; gap: 0; }
  .shorts-head { flex-direction: column; gap: var(--s2); }
}

@media (min-width: 761px) {
  .ovl { display: none; }
}

@media (max-width: 560px) {
  .work__shorts   { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
  .foot__lockup   { height: 132px; }
  .booking__frame { height: min(760px, 78vh); }
  .hero__cta .btn { width: 100%; }
  .ovl .btn       { width: 100%; }
}


/* ==========================================================================
   18. PRINT
   ========================================================================== */

@media print {
  .hdr, .ticker, .booking, .burger, .ovl, .vid__btn, .skip { display: none; }
  body { background: #FFF; color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }
}