/* ============================================================
   styles.css — /for/film-and-tv/
   ----------------------------------------------------------------
   Mobile-first, vanilla CSS. All design tokens live in :root, lifted
   1:1 from /events/assets/css/styles.css (the canonical Soundstorm
   proposal stylesheet) so this audience page sits cleanly inside
   the Danger Globe visual system. Page-specific component tokens
   (surface, border, text-soft, type scale, spacing scale) extend
   the canonical palette without overriding it.

   Breakpoints at 768px (tablet) and 1024px (desktop).
   Comments group rules by component/block.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS — canonical palette from events/styles.css
   ----------------------------------------------------------------
   The first block (Brand / Dark / Light / Neutral / Success-Error /
   Opacity Variations) is copied verbatim from
   dangerglobe-events/events/assets/css/styles.css :root so the
   audience pages and the proposal pages share the same swatches.

   The second block (page-specific layout/type/spacing) extends the
   canonical palette with tokens this page needs and the proposal
   pages don't (--color-surface, --space-*, --fs-*, etc.).
   ============================================================ */
:root {
    /* ===== CANONICAL — DO NOT EDIT WITHOUT UPDATING EVENTS REPO ===== */

    /* Primary Brand Colors */
    --color-primary: #CD5C32;           /* Rich red-orange (main brand) */
    --color-secondary: #FF6B35;         /* Bright sunset orange (accents) */
    --color-accent: #D2691E;            /* Burnt orange (highlights) */

    /* Dark Colors */
    --color-dark: #000000;              /* Pure black background */
    --color-dark-medium: #1a1a1a;       /* Very dark gray */
    --color-dark-light: #2a2a2a;        /* Dark gray */

    /* Light Colors */
    --color-light: #FFFFFF;             /* Pure white */
    --color-light-warm: #FFF8F0;        /* Warm white */
    --color-light-gray: #CFCFCF;        /* Light gray text */

    /* Neutral Colors */
    --color-gray: #eeeeee;              /* Medium gray */
    --color-gray-dark: #666666;         /* Dark gray */
    --color-gray-light: #BBBBBB;        /* Light gray */

    /* Success/Error Colors */
    --color-success: #00FF00;           /* Green (keep for ROI) */
    --color-error: #FF6B6B;             /* Warm red for errors */

    /* Opacity Variations */
    --color-primary-05: rgba(205, 92, 50, 0.05);
    --color-primary-10: rgba(205, 92, 50, 0.1);
    --color-primary-20: rgba(205, 92, 50, 0.2);
    --color-primary-30: rgba(205, 92, 50, 0.3);
    --color-primary-50: rgba(205, 92, 50, 0.5);

    --color-secondary-05: rgba(255, 107, 53, 0.05);
    --color-secondary-10: rgba(255, 107, 53, 0.1);
    --color-secondary-20: rgba(255, 107, 53, 0.2);
    --color-secondary-30: rgba(255, 107, 53, 0.3);
    --color-secondary-50: rgba(255, 107, 53, 0.5);

    --color-dark-05: rgba(0, 0, 0, 0.05);
    --color-dark-10: rgba(0, 0, 0, 0.1);
    --color-dark-60: rgba(0, 0, 0, 0.6);

    --color-light-05: rgba(255, 255, 255, 0.05);
    --color-light-10: rgba(255, 255, 255, 0.1);
    --color-light-20: rgba(255, 255, 255, 0.2);

    /* ===== PAGE-SPECIFIC EXTENSIONS ===== */

    /* Surface / borders / text — aliased onto canonical palette */
    --color-bg:             var(--color-dark);              /* page background */
    --color-surface:        #0e0e10;                        /* card surface */
    --color-surface-2:      #18181b;                        /* alt surface */
    --color-border:         var(--color-light-10);
    --color-border-strong:  rgba(255, 107, 53, 0.4);

    --color-text:           var(--color-light);
    --color-text-soft:      var(--color-light-gray);        /* body copy */
    --color-text-muted:     var(--color-gray-dark);         /* meta / captions */

    /* Type — Montserrat 800 for display, Inter for body */
    --font-display:         'Montserrat', system-ui, sans-serif;
    --font-body:            'Inter', system-ui, sans-serif;
    --weight-display:       800;
    --weight-body:          300;
    --weight-body-strong:   600;

    /* Type scale (clamp() for fluid responsive) */
    --fs-h1:                clamp(36px, 6vw, 72px);
    --fs-h2:                clamp(28px, 4vw, 48px);
    --fs-h3:                clamp(20px, 2.4vw, 26px);
    --fs-body:              clamp(16px, 1.4vw, 18px);
    --fs-body-lg:           clamp(18px, 1.6vw, 20px);
    --fs-eyebrow:           13px;
    --fs-small:             14px;

    /* Spacing scale (4px base) */
    --space-1:              4px;
    --space-2:              8px;
    --space-3:              12px;
    --space-4:              16px;
    --space-5:              24px;
    --space-6:              32px;
    --space-7:              48px;
    --space-8:              64px;
    --space-9:              96px;
    --space-10:             128px;

    /* Layout */
    --content-max:          1200px;
    --content-narrow:       820px;
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            16px;

    /* Motion */
    --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
    --speed-fast:           160ms;
    --speed-base:           320ms;
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

html { scroll-behavior: smooth; }

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

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul { list-style: none; padding: 0; margin: 0; }

/* Headings — Montserrat 800 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }


/* ============================================================
   3. UTILITIES & A11Y
   ============================================================ */

/* Visually-hidden but accessible to screen readers */
.visually-hidden {
  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 — first focusable element on page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-secondary);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  z-index: 10000;
  font-weight: var(--weight-body-strong);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* Reduced motion: disable autoplay/animation effects */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video { display: none; }
}


/* ============================================================
   4. SHARED BLOCK PRIMITIVES
   ============================================================ */

.block {
  padding: var(--space-9) var(--space-5);
  position: relative;
}

@media (min-width: 768px) {
  .block { padding: var(--space-10) var(--space-7); }
}

.block__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-7);
  background: linear-gradient(180deg, var(--color-text) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.block__caption {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-align: center;
  font-size: var(--fs-eyebrow);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.block__lede {
  text-align: center;
  max-width: var(--content-narrow);
  margin: calc(var(--space-7) * -1 + var(--space-4)) auto var(--space-7);
  color: var(--color-text-soft);
  font-size: var(--fs-body-lg);
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-small);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out),
              background var(--speed-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  min-height: 48px;             /* tap target */
}

.btn--primary {
  background: var(--color-secondary);
  color: var(--color-bg);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--color-secondary-30);
}

.btn--full { width: 100%; }

/* Text-link CTA */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-small);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-strong);
  padding: 8px 0;
  transition: color var(--speed-fast) var(--ease-out);
  min-height: 44px;
}
.btn-text:hover { color: var(--color-secondary); }
.btn-text__icon { display: inline-block; transform: translateY(-1px); }


/* ============================================================
   6. TOP NAV
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.nav-logo-mark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: 2px;
  font-size: var(--fs-small);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--fs-small);
}
.nav-links a {
  color: var(--color-text-soft);
  transition: color var(--speed-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--color-text); }
.nav-cta {
  border: 1px solid var(--color-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--color-secondary) !important;
  font-weight: var(--weight-body-strong);
}
.nav-cta:hover { background: var(--color-secondary); color: var(--color-bg) !important; }

/* On narrow viewports the body links collapse — the CTA stays */
@media (max-width: 600px) {
  .nav-links a:not(.nav-cta) { display: none; }
}


/* ============================================================
   7. RIGHT-RAIL NAV DOTS
   ============================================================ */
.nav-dots {
  position: fixed;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 90;
}
.nav-dot {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-light-10);
  transition: background var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out);
}
.nav-dot:hover { background: var(--color-secondary-50); transform: scale(1.3); }
.nav-dot.is-active { background: var(--color-secondary); transform: scale(1.4); }

/* Hide rail on narrow phones — too tight against form fields */
@media (max-width: 480px) { .nav-dots { display: none; } }


/* ============================================================
   8. BLOCK 1 — HERO
   ============================================================ */
.block--hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--space-5) var(--space-8);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.45;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.eyebrow {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--color-secondary);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 4px;
  margin-bottom: var(--space-5);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.hero-title {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  background: linear-gradient(180deg, var(--color-text) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: var(--fs-body-lg);
  color: var(--color-text-soft);
  max-width: 640px;
  margin: 0 auto var(--space-7);
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .hero-ctas { flex-direction: row; justify-content: center; }
}


/* ============================================================
   9. REEL MODAL
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-text);
  font-size: 24px;
  line-height: 1;
  z-index: 2;
}
.modal__video { width: 100%; aspect-ratio: 16/9; background: #000; }


/* ============================================================
   10. BLOCK 2 — TRUST STRIP
   ============================================================ */
.block--trust { padding-block: var(--space-7); }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  max-width: var(--content-max);
  margin: 0 auto;
}
.trust-strip__item {
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--speed-base) var(--ease-out),
              filter var(--speed-base) var(--ease-out);
}
.trust-strip__item:hover { opacity: 1; filter: grayscale(0); }

/* Logo text mark — placeholder until real logos are confirmed */
.logo-text {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--color-text-soft);
  text-transform: uppercase;
}
.logo-text--honda { color: #ec1c24; }


/* ============================================================
   11. BLOCK 3 — HOOK (3-column value props)
   ============================================================ */
.hook-grid {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hook-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.hook-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: border-color var(--speed-base) var(--ease-out),
              transform var(--speed-base) var(--ease-out);
}
.hook-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-4px);
}
.hook-card__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--color-secondary);
}
.hook-card__title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.hook-card__body {
  color: var(--color-text-soft);
  font-size: var(--fs-body);
}


/* ============================================================
   12. BLOCK 4 — DELIVER (we / you)
   ============================================================ */
.deliver-grid {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .deliver-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.deliver-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.deliver-col--alt {
  background: var(--color-surface-2);
  border-color: var(--color-secondary-30);
}
.deliver-col__heading {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  color: var(--color-secondary);
  letter-spacing: 2px;
}
.deliver-list { display: grid; gap: var(--space-3); }
.deliver-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-soft);
  line-height: 1.6;
}
.deliver-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  background: var(--color-secondary);
  border-radius: 50%;
}


/* ============================================================
   13. BLOCK 5 — PROJECTS (case-study cards)
   ============================================================ */
.project-grid {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
}

/* On mobile, allow horizontal swipe */
@media (max-width: 767px) {
  .project-grid {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
  }
  .project-card { scroll-snap-align: start; }
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--speed-base) var(--ease-out),
              border-color var(--speed-base) var(--ease-out);
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}
.project-card__link { display: block; color: inherit; }
.project-card img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.project-card__body { padding: var(--space-5); }
.project-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
}
.project-card__meta {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.project-card__outcome {
  color: var(--color-text-soft);
  margin-bottom: var(--space-4);
}
.project-card__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-secondary);
}


/* ============================================================
   14. BLOCK 6 — PRESS STRIP
   ============================================================ */
.block--press { padding-block: var(--space-7); }

.press-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
  max-width: var(--content-max);
  margin: 0 auto;
}
.press-strip a {
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--speed-base) var(--ease-out),
              filter var(--speed-base) var(--ease-out);
}
.press-strip a:hover { opacity: 1; filter: grayscale(0); }


/* ============================================================
   15. BLOCK 7 — PROCESS TIMELINE
   ============================================================ */
.process-grid {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

.process-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}
.process-step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
  line-height: 1;
}
.process-step__title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.process-step__when {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.process-step__body { color: var(--color-text-soft); font-size: var(--fs-body); }


/* ============================================================
   16. BLOCK 8 — FAQ ACCORDION
   ============================================================ */
.faq-list {
  max-width: var(--content-narrow);
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--color-border-strong); }

.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-body-lg);
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  transition: color var(--speed-fast) var(--ease-out);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+";
  font-size: 24px;
  color: var(--color-secondary);
  transition: transform var(--speed-fast) var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }

.faq-item__a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-soft);
}


/* ============================================================
   17. BLOCK 9 — BRIEF FORM
   ============================================================ */
.brief-inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.hs-form-frame { margin-top: var(--space-6); }

.brief-thanks {
  background: var(--color-surface);
  border: 1px solid var(--color-secondary-30);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-top: var(--space-6);
  text-align: center;
}
.brief-thanks h3 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: var(--color-secondary);
}

.brief-form {
  display: grid;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.form-row { display: grid; gap: var(--space-2); }

@media (min-width: 600px) {
  .form-row--two { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .form-row--two > div { display: grid; gap: var(--space-2); }
}

.brief-form label {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.brief-form label span[aria-hidden="true"] { color: var(--color-secondary); margin-left: 4px; }

.brief-form input,
.brief-form select,
.brief-form textarea {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font: inherit;
  transition: border-color var(--speed-fast) var(--ease-out);
  min-height: 48px;
}
.brief-form input:focus,
.brief-form select:focus,
.brief-form textarea:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 1px;
  border-color: var(--color-secondary);
}
.brief-form textarea { resize: vertical; }

.form-row--consent .consent-label {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  font-weight: var(--weight-body);
  cursor: pointer;
}
.form-row--consent input[type="checkbox"] {
  width: 18px; height: 18px;
  min-height: 0;
  accent-color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.brief-fallback {
  text-align: center;
  margin-top: var(--space-6);
  color: var(--color-text-soft);
}
.brief-fallback__link {
  color: var(--color-secondary);
  font-weight: var(--weight-body-strong);
  border-bottom: 1px solid var(--color-secondary-30);
}
.brief-fallback__link:hover { color: var(--color-text); border-color: var(--color-text); }


/* ============================================================
   18. BLOCK 10 — FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-5) var(--space-5);
  margin-top: var(--space-9);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: var(--space-6);
  }
}

.footer-col__title {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col a { color: var(--color-text-soft); transition: color var(--speed-fast) var(--ease-out); }
.footer-col a:hover { color: var(--color-text); }
.footer-blurb { color: var(--color-text-soft); }

.footer-social {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-4) !important;
  margin-top: var(--space-4);
}

.footer-bottom {
  max-width: var(--content-max);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}


/* ============================================================
   19. PRINT (light cleanup)
   ============================================================ */
@media print {
  .nav-dots, .site-nav, .hero-video, .hero-overlay,
  .modal, .btn, .btn-text { display: none !important; }
  body { background: #fff; color: #000; }
  .block { padding: var(--space-5); }
  .block__title { color: #000; -webkit-text-fill-color: #000; background: none; }
}

/* ============================================================
   PORTFOLIO HUB — page-specific overrides
   Appended after the shared design system.
   ============================================================ */

.page-portfolio main { background: var(--color-bg); color: var(--color-text); }

/* Hero variation — shorter, no video background */
.hero--portfolio {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 8rem 1.5rem 4rem;
  background:
    radial-gradient(circle at 20% 20%, var(--color-primary-20), transparent 60%),
    radial-gradient(circle at 80% 80%, var(--color-secondary-20), transparent 60%),
    var(--color-bg);
}
.hero--portfolio .hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.hero--portfolio .hero-h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0.5rem 0 1.25rem;
  letter-spacing: -0.02em;
}
.hero--portfolio .hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--color-text-soft);
  max-width: 60ch;
  line-height: 1.6;
  margin: 0 0 2rem;
}
.hero--portfolio .eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--color-secondary);
  margin: 0 0 0.5rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Filter strip */
.filter-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.filter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter-chip {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-soft);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--color-secondary-50); color: var(--color-text); }
.filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-light);
}

/* Projects grid */
.projects { padding: 4rem 1.5rem; }
.projects-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.project-card--featured {
  grid-column: 1 / -1;
}
.project-card--featured .project-card__media { aspect-ratio: 21/9; }
@media (min-width: 768px) {
  .project-card--featured .project-card__link { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .project-card--featured .project-card__media { aspect-ratio: auto; height: 100%; }
  .project-card--featured .project-card__body { padding: 2.5rem; }
}
.project-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.project-card__media {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--color-dark-medium);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__body { padding: 1.5rem; }
.project-card__meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.project-card__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.project-card__excerpt {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.55;
  margin: 0;
}
.cat-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cat-brand { background: var(--color-primary-20); color: var(--color-primary); }
.cat-event { background: var(--color-secondary-20); color: var(--color-secondary); }
.cat-film  { background: var(--color-accent); color: var(--color-light); }

/* Press strip — reuse idiom from sibling pages but standalone */
.press-strip {
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.press-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.press-cap {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}
.press-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.press-logos a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--color-text-soft);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.press-logos a:hover { opacity: 1; color: var(--color-text); }

/* CTA band */
.cta-band {
  padding: 5rem 1.5rem;
  background:
    linear-gradient(135deg, var(--color-primary-10) 0%, transparent 50%, var(--color-secondary-10) 100%),
    var(--color-bg);
  text-align: center;
}
.cta-band-inner { max-width: 800px; margin: 0 auto; }
.cta-band-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.cta-band-sub {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  margin: 0 0 2rem;
  line-height: 1.55;
}
.cta-band-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   PORTFOLIO HUB — grid + miscellaneous fixes (2026-05-10 review).
   - Switch auto-fill → auto-fit so 4 cards distribute evenly
     across rows instead of leaving an awkward blank slot
     when count < column-count.
   - Constrain card max-width so the grid doesn't stretch a
     single card to full width on very wide screens.
   - [hidden] override (inherits from audience-page convention).
   - Theme-token defaults so any unsupplied vars don't break.
   ============================================================ */
[hidden] { display: none !important; }

.projects-inner {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1280px;
}
.project-card {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
/* The .project-card--featured rule remains in the cascade but the
   featured card was removed from the markup on 2026-05-10 — kept
   for forwards-compat if a featured project is added back later. */