/* ==========================================================================
   Romero & Braas — site stylesheet
   ---------------------------------------------------------------------------
   Colour, type and space come from design/tokens.css, which every page loads
   BEFORE this file. Nothing here defines a palette any more; this block only
   maps the names the existing markup uses onto the tokens, so 11 pages of
   class names keep working while the look changes underneath.

   What went away in the Kino pass (P3.1, D-2026-09-15-10):
     • the three switchable palettes (nocturne / signal / meridian) — there is
       one public theme now, and data-theme="paper" for the intranet later;
     • the ember accent #FF6A3B and the old gold #E4C078 — one gold ramp only;
     • the blue-black scrims (#09090B, #060608), which turned the warm ground
       grey wherever they sat over it.

   Aliases below are a migration shim, not API. New markup uses the tokens.
   ========================================================================== */

:root {
  /* Surfaces */
  --canvas:      var(--bg);
  --panel:       var(--surface);
  --panel-2:     var(--surface-2);
  --card:        var(--surface);
  --card-2:      var(--surface-2);
  --feature-bg:  var(--bg);

  /* Ink. --feature-* stays light in both themes: it is text on an image or on
     an always-dark band, never on the page ground. */
  --feature-ink:      #F8F6F1;
  --feature-ink-soft: #B8B2A8;

  /* One accent. The old system had two roles (gold "brand", ember "accent");
     both now resolve to the gold ramp, which is what retires ember. */
  --brand:        var(--accent);
  --brand-deep:   var(--accent-deep);
  --brand-bright: var(--accent-soft);
  --accent-line:  var(--hairline-strong);
  --grad-brand-text: var(--grad-brand);

  /* Legacy aliases kept alive for existing page markup. */
  --signal-black: var(--ink);
  --warm-white:   var(--ink);
  --warm-grey:    var(--surface);
  --neutral-950:  var(--bg);
  --neutral-900:  var(--surface);
  --neutral-800:  var(--surface-2);
  --neutral-700:  var(--ink-soft);
  --neutral-500:  var(--ink-faint);
  --neutral-300:  var(--feature-ink-soft);   /* always light: text on dark */
  --neutral-100:  var(--hairline);
  --neutral-50:   var(--feature-ink);        /* always light: text on dark */
  --gold-mid:     var(--accent);
  --gold-deep:    var(--accent-deep);
  --gold-dark:    var(--accent-deep);
  --gold-light:   var(--accent-soft);
  --grad-gold:      var(--grad-brand);
  --grad-gold-text: var(--grad-brand);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--ink); }   /* one accent now: hover lifts to ink, not to a second hue */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); }
.hero-title { font-size: var(--text-hero); font-weight: 400; line-height: 1.0; letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }

.hero-title em, .em-gold, .page-hero h1 em {
  font-style: normal;
  font-weight: 500;
  background: var(--grad-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--text-h1); font-weight: 400; line-height: 1.05; letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--text-h2); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-size: var(--text-h3); font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-tight); }
h4, .h4 { font-size: var(--text-h4); font-weight: 500; line-height: 1.25; letter-spacing: var(--tracking-tight); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: var(--space-sm);
}
.lead { font-size: var(--text-lead); line-height: 1.65; color: var(--ink-soft); max-width: 820px; text-wrap: pretty; }
.meta { font-size: var(--text-small); color: var(--ink-faint); }

/* Text colours on always-dark feature bands */
.on-dark { color: var(--feature-ink-soft); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark .hero-title { color: var(--feature-ink); }
.on-dark .lead { color: var(--feature-ink-soft); }
.on-dark .meta { color: var(--ink-faint); }
.on-dark .em-gold, .on-dark .hero-title em {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient-clipped text can render as a muddy, low-contrast brown on narrow
   mobile line-wraps — fall back to a plain, guaranteed-legible gold there. */
@media (max-width: 700px) {
  .hero-title em, .em-gold, .page-hero h1 em,
  .on-dark .em-gold, .on-dark .hero-title em {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--brand-bright);
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container-wide { max-width: 1500px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }

.section { padding: var(--space-xl) 0; }
.section-warm, .section-alt { background: var(--panel); }
.section-dark { background: var(--feature-bg); }
.section-dark-2 { background: var(--panel); }
.section-dark, .section-dark-2 { color: var(--feature-ink-soft); }
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark-2 h1, .section-dark-2 h2, .section-dark-2 h3 { color: var(--feature-ink); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: var(--space-lg) 0; }
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--feature-bg);
  border-bottom: 1px solid var(--hairline);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { background: rgba(10, 10, 8, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  height: 76px; max-width: 1500px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.nav-logo img { height: 43px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; }
.nav-links li:not(.nav-mobile-cta) a { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--feature-ink-soft); }
.nav-links li:not(.nav-mobile-cta) a:hover { color: var(--feature-ink); }
.nav-links li:not(.nav-mobile-cta) a.active { color: var(--brand); }
.nav-mobile-cta { display: none; }
.nav-cta { display: flex; align-items: center; gap: var(--space-sm); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--hairline-strong); color: var(--feature-ink);
  padding: 0.5rem 0.75rem; font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
/* Two-level navigation (Paul, 2026-09-21; re-ordered twice 2026-10-13). Six
   main entries: Services, Villas, Originals, Incentives, About, Contact.
   "About" is the pure category: it has no page of its own and exists only to
   open its submenu.

   The earlier version made each parent a real link plus a small chevron button,
   so touch and keyboard visitors would not lose /production-services and /about.
   That concern is gone, because both pages are now ordinary links one level
   down. What replaces it is narrower: a parent that is only a disclosure must be
   a real focusable control. It is a <button>, so Enter and Space work for free
   and a tap opens the panel rather than doing nothing.

   It is also styled as a heading rather than as a link, because the complaint
   that started this was something looking clickable-to-a-page when it is not.
   Uppercase, tracked out, muted and a step smaller than its siblings: the
   typographic convention for a category label, and unmistakably not a link that
   failed to load. Hover opens it too, but only where hover actually exists. */
.nav-has-sub { position: relative; display: flex; align-items: center; }
.nav-cat {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--feature-ink-soft);
}
.nav-cat:hover, .nav-has-sub:hover > .nav-cat, .nav-cat[aria-expanded="true"] { color: var(--feature-ink); }
.nav-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.nav-cat svg { width: 10px; height: 6px; transition: transform var(--duration-fast) var(--ease-out); }
.nav-cat[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub {
  display: none; position: absolute; top: calc(100% + 0.7rem); left: -1rem; z-index: 10;
  min-width: 11rem; list-style: none; padding: 0.4rem 0;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius); box-shadow: 0 18px 44px var(--scrim-60);
}
.nav-cat[aria-expanded="true"] + .nav-sub { display: block; }
.nav-links li.nav-has-sub .nav-sub a { display: block; padding: 0.5rem 1.15rem; font-size: 0.85rem; white-space: nowrap; }
/* A page inside a submenu marks its category too, softer than the current page,
   so /locations does not leave the whole bar looking unvisited. The category is
   a button now, so the rule has to reach both. */
.nav-links li:not(.nav-mobile-cta) a.active-parent,
.nav-links .nav-cat.active-parent { color: var(--feature-ink); }
/* Hover only where hover is real: on touch the button is the whole story. */
@media (hover: hover) and (min-width: 1081px) {
  .nav-has-sub:hover:not(.nav-hover-off) > .nav-sub { display: block; }
  /* The gap between the parent and the panel would otherwise drop the hover. */
  .nav-has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 0.7rem; }
}

@media (max-width: 1080px) {
  .nav-links {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--feature-bg); border-bottom: 1px solid var(--hairline);
    padding: var(--space-sm) clamp(1.25rem, 3vw, 2.5rem) var(--space-md);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links li:not(.nav-mobile-cta) a { display: block; padding: 0.85rem 0; font-size: 1rem; border-bottom: 1px solid var(--hairline); }
  .nav-toggle { display: block; }
  .nav-cta .btn-primary-inverse { display: none; }
  .nav-mobile-cta { display: block; padding: 1.1rem 0 0.25rem; }
  .nav-mobile-cta a { display: inline-block; }
  /* In the drawer the submenu is a nested list, not a floating panel. The
     category is the whole row, so the target is the row rather than a 44px
     corner of it, and the chevron sits at the far end where a thumb expects it. */
  .nav-has-sub { flex-wrap: wrap; align-items: stretch; }
  .nav-cat {
    width: 100%; min-height: 48px; justify-content: space-between;
    padding: 0.85rem 0; border-bottom: 1px solid var(--hairline);
  }
  .nav-sub {
    position: static; display: none; width: 100%; min-width: 0; z-index: auto;
    padding: 0.1rem 0 0.6rem; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-links li.nav-has-sub .nav-sub a { padding: 0.7rem 0 0.7rem 1.1rem; font-size: 0.95rem; white-space: normal; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary, .btn-primary-inverse, .btn-secondary, .btn-secondary-dark, .btn-accent {
  display: inline-block; padding: 0.9rem 1.8rem;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em;
  cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
  position: relative; overflow: hidden; text-align: center; border-radius: 2px;
}
/* Primary = brand gold (premium) */
.btn-primary-inverse { background: var(--brand); color: var(--accent-ink); border: 1px solid var(--brand); }
.btn-primary-inverse:hover { background: var(--brand-bright); border-color: var(--brand-bright); color: var(--accent-ink); }
/* Accent = system/interactive (the "pop" on functional CTAs) */
.btn-accent { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.btn-accent:hover { filter: brightness(1.08); color: var(--accent-ink); }
/* Solid dark */
.btn-primary { background: var(--panel-2); color: var(--ink); border: 1px solid var(--hairline-strong); }
.btn-primary::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.btn-primary:hover::after { transform: scaleX(1); }
.btn-primary:hover { color: var(--ink); border-color: var(--brand); }
/* Outlines */
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--brand); }
.btn-secondary:hover { background: var(--accent-soft); border-color: var(--brand-bright); }
.btn-secondary-dark { background: transparent; color: var(--feature-ink); border: 1px solid var(--hairline-strong); }
.btn-secondary-dark:hover { border-color: var(--brand); background: rgba(255,255,255,0.04); color: var(--feature-ink); }
.btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card, .card-dark {
  display: block; background: var(--card); padding: 2rem;
  border: 1px solid var(--hairline); text-decoration: none; color: inherit;
  transition: all var(--duration-medium) var(--ease-out); position: relative; border-radius: 3px;
}
.card::before, .card-dark::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-out);
}
.card:hover, .card-dark:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card:hover::before, .card-dark:hover::before { transform: scaleX(1); }
.card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; color: var(--ink); }
.card-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.card-arrow {
  display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
  margin-top: var(--space-sm); padding: 0.4rem 0.9rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3;
  color: var(--ink); background: var(--panel-2); border: 1px solid var(--hairline-strong);
  border-radius: 3px; transition: all var(--duration-fast) var(--ease-out);
}
.card:hover .card-arrow, .card-dark:hover .card-arrow { border-color: var(--brand); background: var(--accent-soft); }
.card-icon { margin-bottom: var(--space-sm); color: var(--brand); }
.card-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
/* dark cards sitting on dark feature bands inherit the same look */
.card-dark .card-title { color: var(--feature-ink); }
.card-dark .card-desc { color: var(--feature-ink-soft); }

/* --------------------------------------------------------------------------
   Dividers, callouts
   -------------------------------------------------------------------------- */
.divider { border: 0; height: 1px; background: var(--hairline); margin: var(--space-lg) 0; }
.divider-signature { border: 0; height: 1.5px; background: linear-gradient(90deg, transparent 0%, var(--brand) 50%, transparent 100%); margin: var(--space-xl) 0; }

.callout, .callout-dark { background: var(--panel); border-left: 3px solid var(--accent); padding: 1.5rem 2rem; margin: var(--space-md) 0; border-radius: 0 3px 3px 0; }
.callout-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.callout p, .callout-dark p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--feature-bg); padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 10vh, 7rem); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -30%; right: -10%; width: 60%; height: 130%;
  background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 62%);
  pointer-events: none;
}
.hero .container, .hero .container-wide { position: relative; z-index: 1; }
.hero-sub { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--feature-ink-soft); max-width: 680px; margin: var(--space-md) 0 var(--space-lg); }

.page-hero { background: var(--feature-bg); padding: clamp(4rem, 9vh, 6.5rem) 0; position: relative; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; top: -40%; right: -15%; width: 55%; height: 150%;
  background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 62%);
  pointer-events: none;
}
.page-hero .container, .page-hero .container-narrow, .page-hero .container-wide { position: relative; z-index: 1; }

/* Hero with a full-bleed background image */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 8, 0.97) 0%, rgba(10, 10, 8, 0.82) 44%, rgba(10, 10, 8, 0.30) 100%),
              linear-gradient(0deg, rgba(10, 10, 8, 0.95) 2%, transparent 42%);
}
/* On narrow screens the text overlays the whole image — darken more evenly for legibility */
@media (max-width: 760px) {
  .hero-media::after {
    background: linear-gradient(180deg, rgba(10, 10, 8, 0.78) 0%, rgba(10, 10, 8, 0.55) 38%, rgba(10, 10, 8, 0.88) 100%);
  }
}
.hero.has-media, .page-hero.has-media { }
.hero.has-media .container, .hero.has-media .container-wide { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   SLA strip
   -------------------------------------------------------------------------- */
.sla-strip { background: var(--panel); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.sla-strip .container, .sla-strip .container-wide { display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap; }
.sla-item { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--feature-ink-soft); }
.sla-item strong { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--brand); letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Logo wall — full brand colour (matches the existing landing page).
   Dark outline marks (Universal, Lucasfilm) have no colour of their own
   and carry .inv to invert to white so they read against the dark bg.
   Sizes vary per logo on purpose (optical balance) — all downscaled from a
   larger source, so every logo stays crisp.
   -------------------------------------------------------------------------- */
.logo-marquee { overflow: hidden; position: relative; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee.dragging { cursor: grabbing; }
.logo-wall {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4rem);
  width: max-content;
}
.logo-wall img {
  flex-shrink: 0; width: auto; max-width: none; object-fit: contain;
  opacity: 0.92; transition: opacity var(--duration-fast) var(--ease-out);
  -webkit-user-drag: none; user-select: none;
}
.logo-wall img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .logo-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logo-wall { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 1.75rem 2.5rem; }
  .logo-wall img[aria-hidden="true"] { display: none; }
}
.logo-wall img.inv { filter: invert(1) brightness(1.15); }   /* dark marks → light */
/* Per-logo optical sizing: emblems taller, wordmarks shorter */
.logo-wall img[src*="netflix"]   { max-height: 22px; }
.logo-wall img[src*="warner"]    { max-height: 46px; }
.logo-wall img[src*="universal"] { max-height: 31px; }
.logo-wall img[src*="fremantle"] { max-height: 21px; }
.logo-wall img[src*="lucasfilm"] { max-height: 21px; }
.logo-wall img[src*="uber"]      { max-height: 22px; }
.logo-wall img[src*="starbucks"] { max-height: 48px; }
.logo-wall img[src*="nfl"]       { max-height: 48px; }
.logo-wall img[src*="kinetic"]   { max-height: 34px; }
.logo-wall img[src*="youtube"]   { max-height: 31px; }
.logo-wall img[src*="prime"]     { max-height: 24px; }   /* two-line lockup: overall height kept at wordmark level (Uber 22px) */
.logo-wall img[src*="banijay"]   { max-height: 16px; }   /* dense two-line lockup with a solid signet: scaled by optical weight, not height */
/* On the light theme, darken the marks instead of lightening them. */
:root[data-theme="paper"] .logo-wall img { filter: grayscale(1) brightness(0.4) contrast(1.05); }
:root[data-theme="paper"] .logo-wall img.inv { filter: grayscale(1); }
/* --------------------------------------------------------------------------
   Media / photo treatment
   -------------------------------------------------------------------------- */
.media-frame { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 3px; background: var(--panel); }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.media-frame:hover img { transform: scale(1.04); }
.media-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.5rem 1.1rem;
  background: linear-gradient(to top, rgba(10, 10, 8, 0.86), transparent);
  color: var(--feature-ink); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.media-tint { position: relative; }
.media-tint::after { content: ''; position: absolute; inset: 0; background: var(--accent-soft); mix-blend-mode: overlay; pointer-events: none; }

/* Full-bleed image band */
.image-band { position: relative; min-height: clamp(340px, 52vh, 620px); display: flex; align-items: flex-end; overflow: hidden; background: var(--feature-bg); }
.image-band > img, .image-band > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 8, 0.9) 0%, rgba(10, 10, 8, 0.35) 45%, rgba(10, 10, 8, 0.55) 100%); }
.image-band .container, .image-band .container-wide { position: relative; z-index: 2; padding-top: var(--space-lg); padding-bottom: var(--space-lg); color: var(--feature-ink); }
.image-band h2, .image-band h3 { color: var(--feature-ink); }
.image-band p { color: var(--feature-ink-soft); }

/* Motion tiles (short muted BTS loops) */
.reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .reel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reel { grid-template-columns: 1fr; } }
.reel-tile { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 3px; aspect-ratio: 4 / 5; background: var(--panel); }
.reel-tile video, .reel-tile img { width: 100%; height: 100%; object-fit: cover; }
.reel-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.1rem 0.9rem; background: linear-gradient(to top, rgba(10, 10, 8, 0.85), transparent); color: var(--feature-ink); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Placeholder slot for media the team will drop in */
.media-slot { position: relative; background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--hairline-strong); display: flex; align-items: flex-end; min-height: 280px; border-radius: 3px; }
.media-slot::after { content: attr(data-label); position: absolute; top: 1rem; left: 1.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); }
.media-slot .media-caption { position: static; width: 100%; }
/* Team-facing brief inside an empty slot: what photo to supply */
.media-slot .slot-hint { margin: auto; padding: 1.25rem; text-align: center; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; max-width: 32ch; }
.media-slot .slot-hint b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.media-slot .slot-hint em { display: block; margin-top: 0.35rem; font-style: normal; color: var(--ink-faint); font-size: 0.75rem; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-field { margin-bottom: var(--space-sm); }
.form-label { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 0.4rem; }
.on-dark .form-label { color: var(--feature-ink-soft); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.85rem 1rem; font-family: var(--font-body); font-size: 0.9375rem;
  color: var(--ink); background: var(--card); border: 1px solid var(--hairline-strong);
  transition: border-color var(--duration-fast) var(--ease-out); border-radius: 2px; appearance: none; -webkit-appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); outline: none; }
.form-textarea { min-height: 120px; resize: vertical; }
.form-select { background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Choice chips */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.6rem 1.1rem; font-size: 0.875rem; font-weight: 500;
  color: var(--ink-soft); border: 1px solid var(--hairline-strong); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out); user-select: none; border-radius: 2px;
}
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:hover span { border-color: var(--accent); }
.chip-light span { color: var(--ink-soft); border: 1px solid var(--hairline-strong); background: var(--card); }
.chip-light input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip-light:hover span { border-color: var(--accent); }

/* Wizard */
.wizard-progress { display: flex; gap: 0.5rem; margin-bottom: var(--space-md); }
.wizard-progress span { height: 2px; flex: 1; background: var(--hairline-strong); transition: background var(--duration-fast); }
.wizard-progress span.done { background: var(--accent); }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: stepIn 0.45s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Range slider */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--hairline-strong); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--feature-bg); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid var(--feature-bg); cursor: pointer; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.rb-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.rb-table th { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; text-align: left; color: var(--ink); padding: 1rem 1.25rem; border-bottom: 2px solid var(--brand); }
.rb-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); vertical-align: top; }
.rb-table tr:hover td { background: var(--panel); }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--hairline); }
.accordion details { border-bottom: 1px solid var(--hairline); }
.accordion summary { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: var(--ink); padding: 1.35rem 2.5rem 1.35rem 0; cursor: pointer; list-style: none; position: relative; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 300; font-size: 1.5rem; color: var(--accent); transition: transform var(--duration-fast) var(--ease-out); }
.accordion details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.accordion .accordion-body { padding: 0 0 1.5rem; max-width: 760px; color: var(--ink-soft); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Stats & steps
   -------------------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } }
.stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 4.5vw, 3.5rem); letter-spacing: -0.012em; color: var(--ink); line-height: 1; }
.stat-label { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.6rem; }

.step-num { font-family: var(--font-display); font-weight: 400; font-size: 2.75rem; letter-spacing: -0.012em; background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: var(--space-sm); display: block; }
@media (max-width: 700px) {
  .step-num { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--brand-bright); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--feature-bg); border-top: 1px solid var(--hairline); padding: var(--space-lg) 0 var(--space-md); color: var(--feature-ink-soft); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 36px; margin-bottom: var(--space-sm); }
.footer-tagline { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--feature-ink-soft); letter-spacing: -0.01em; }
.footer-col-title { font-family: var(--font-body); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: var(--feature-ink-soft); font-size: 0.9rem; }
.footer-col a:hover { color: var(--feature-ink); }
.footer-bottom { border-top: 1px solid var(--hairline); padding-top: var(--space-md); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.footer-bottom p { font-size: 0.8125rem; color: var(--ink-faint); }
.footer-bottom a { color: var(--ink-faint); font-size: 0.8125rem; margin-left: var(--space-sm); }
.footer-bottom a:hover { color: var(--feature-ink-soft); }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  video[autoplay] { display: none; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); }
.center { text-align: center; }
.maxw-prose { max-width: 820px; }
.hidden { display: none; }
/* Spam honeypot: off-screen rather than display:none, which some bots detect and skip.
   !important on purpose — `.fab-form input` is more specific than `.hp` and would
   otherwise render the trap as a visible full-width field inside the contact modal. */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden;
}

/* --------------------------------------------------------------------------
   Floating contact button
   -------------------------------------------------------------------------- */
.fab { position: fixed; right: var(--space-sm); top: 50%; transform: translateY(-50%); z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.fab-main {
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--accent-ink);
  border: 1px solid var(--brand); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-lift); transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.fab-main:hover { background: var(--brand-bright); border-color: var(--brand-bright); }
.fab-main svg { width: 24px; height: 24px; stroke-width: 1.75; transition: transform var(--duration-fast) var(--ease-out); }
.fab.open .fab-main .fab-icon-open { display: none; }
.fab:not(.open) .fab-main .fab-icon-close { display: none; }
.fab-menu {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.fab.open .fab-menu { opacity: 1; visibility: visible; transform: none; }
.fab-item {
  display: flex; align-items: center; gap: 0.6rem; background: var(--card); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 0.55rem 1.1rem 0.55rem 0.6rem;
  text-decoration: none; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.fab-item:hover { border-color: var(--brand); transform: translateX(-2px); }
.fab-item .fab-item-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--card-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fab-item svg { width: 17px; height: 17px; stroke-width: 1.75; color: var(--brand); }
.fab-item-label { position: relative; }
.fab-item-note { display: block; font-size: 0.7rem; color: var(--ink-faint); font-weight: 400; }
@media (max-width: 640px) {
  .fab { right: var(--space-xs); top: auto; bottom: var(--space-sm); transform: none; }
  .fab-item-note { display: none; }
}

.fab-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 9, 7, 0.72); z-index: 399; opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast); }
.fab-modal-backdrop.open { opacity: 1; visibility: visible; }
.fab-modal-card {
  position: fixed; top: 50%; left: 50%; width: min(420px, calc(100vw - 2.5rem));
  background: var(--card); border: 1px solid var(--hairline-strong); border-radius: 8px; padding: var(--space-md);
  z-index: 400; box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translate(-50%, -48%); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.fab-modal-card.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.fab-modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.fab-modal-close:hover { border-color: var(--brand); color: var(--brand); }
.fab-modal-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; margin-bottom: var(--space-sm); padding-right: 2rem; }
.fab-form label { display: block; font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 0.9rem; }
.fab-form input, .fab-form textarea {
  display: block; width: 100%; margin-top: 0.35rem; background: var(--card-2); border: 1px solid var(--hairline-strong);
  border-radius: 4px; padding: 0.6rem 0.75rem; color: var(--ink); font-family: inherit; font-size: 0.9375rem; resize: vertical;
}
.fab-form input:focus, .fab-form textarea:focus { outline: none; border-color: var(--brand); }
.fab-form-status { font-size: 0.8125rem; margin-top: 0.6rem; color: var(--ink-soft); }
.fab-copy-toast {
  position: fixed; right: var(--space-sm); bottom: var(--space-sm); background: var(--brand); color: var(--accent-ink);
  font-size: 0.8125rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: 999px; z-index: 401;
  opacity: 0; transform: translateY(8px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); pointer-events: none;
}
.fab-copy-toast.show { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Consent banner (js/consent.js)
   Dark on every page, including the light legal pages, so it reads as chrome
   rather than content. Two buttons of equal weight: a decline that is harder
   to find than the accept is itself a consent defect.
   -------------------------------------------------------------------------- */
.rb-consent {
  position: fixed; z-index: 900;
  left: 1rem; right: 1rem; bottom: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: 640px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--surface); color: var(--feature-ink);
  border: 1px solid rgba(248, 246, 241, 0.24); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif); font-size: 0.8125rem; line-height: 1.5;
}
.rb-consent[hidden] { display: none; }
.rb-consent-text { flex: 1 1 260px; margin: 0; color: var(--feature-ink-soft); }
.rb-consent-link { color: var(--feature-ink); text-decoration: underline; text-underline-offset: 2px; }
.rb-consent-link:hover { color: var(--accent); }
.rb-consent-actions { display: flex; flex: 0 0 auto; gap: 0.5rem; }
.rb-consent-btn {
  font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rb-consent-no  { background: transparent; color: var(--feature-ink); border: 1px solid rgba(248, 246, 241, 0.34); }
.rb-consent-no:hover  { border-color: var(--accent); color: var(--accent); }
.rb-consent-yes { background: var(--feature-ink); color: var(--surface); border: 1px solid var(--feature-ink); }
.rb-consent-yes:hover { background: var(--accent); border-color: var(--accent); }
.rb-consent-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .rb-consent-actions { width: 100%; }
  .rb-consent-btn { flex: 1 1 0; }
}