@charset "UTF-8";

/* ==========================================================================
   ASTER — Design System 4.0.0
   The ASTER 1.x visual language, ported onto the 3.0.0 content and runtime.

   The palette, typefaces, film-gate frames, HUD strips, bronze panel
   gradients, dot textures, chapter numerals and centred masthead of the
   original ASTER site, rebuilt at their measured values and applied to the
   current content, including the HORIZON section.

   PRESERVED BY CONTRACT - do not rename:
   . every class/id queried by aster-public.js and written by /studio/
   . the tokens --bg --bg-2 --ivory --gold --ash --line --serif --sans
     --mono --aster-font-scale (the Studio theme editor writes these directly)
   . every string of copy, nav label, href, section id and CMS binding key

   Ordering is by @layer, so no !important is needed for precedence.
   Runtime-injected theme rules (#aster-theme-rules) and Studio inline styles
   therefore always win, which is the intended behaviour.
   ========================================================================== */

@layer reset, fonts, tokens, atmosphere, shell, masthead, hero, section,
       component, media, form, footer, motion, responsive, a11y;

/* ==========================================================================
   FONTS - self-hosted so `font-src 'self'` in the CSP stays intact.
   ========================================================================== */
@layer fonts {
  @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300;
    font-display: swap; src: url("/assets/fonts/cormorant-garamond-300.woff2") format("woff2"); }
  @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2"); }
  @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2"); }
  @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300;
    font-display: swap; src: url("/assets/fonts/cormorant-garamond-300i.woff2") format("woff2"); }
  @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/cormorant-garamond-400i.woff2") format("woff2"); }

  @font-face { font-family: "Inter"; font-style: normal; font-weight: 300;
    font-display: swap; src: url("/assets/fonts/inter-300.woff2") format("woff2"); }
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("/assets/fonts/inter-500.woff2") format("woff2"); }
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("/assets/fonts/inter-600.woff2") format("woff2"); }

  @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
  @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
}

/* ==========================================================================
   TOKENS - the original ASTER palette, unchanged.
   ========================================================================== */
@layer tokens {
  :root {
    --bg:        #040405;
    --bg-2:      #0A0907;
    --panel:     rgba(10, 9, 7, .64);
    --panel-2:   rgba(53, 46, 30, .60);
    --ivory:     #F1EBDD;
    --bone:      #F1EBDD;
    --silver:    #CCAE6C;
    --ash:       #907B4E;
    --ash-soft:  #6E5E3C;
    --gold:      #CCAE6C;
    --gold-soft: rgba(110, 94, 60, .46);
    --spectral:  #F1EBDD;
    --line:      rgba(204, 174, 108, .18);
    --line-soft: rgba(204, 174, 108, .09);
    --accent-1:  #6E5E3C;
    --accent-2:  #CCAE6C;
    --accent-3:  #F1EBDD;
    --deep-1:    #040405;
    --deep-2:    #0A0907;
    --deep-3:    #352E1E;

    --sp-gradient: linear-gradient(96deg, #6E5E3C 0%, #CCAE6C 30%, #F1EBDD 52%, #CCAE6C 72%, #6E5E3C 100%);
    --aster-gradient-soft: linear-gradient(96deg, rgba(110,94,60,.26) 0%, rgba(204,174,108,.44) 36%, rgba(241,235,221,.22) 52%, rgba(204,174,108,.28) 72%, rgba(53,46,30,.14) 100%);
    --aster-line-gradient: linear-gradient(90deg, transparent 0%, rgba(110,94,60,.55) 18%, rgba(204,174,108,.86) 45%, rgba(241,235,221,.62) 52%, rgba(204,174,108,.78) 62%, rgba(110,94,60,.42) 82%, transparent 100%);
    --aster-panel-gradient: linear-gradient(145deg, rgba(4,4,5,.78) 0%, rgba(53,46,30,.46) 47%, rgba(10,9,7,.74) 100%);

    /* the three original faces */
    --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans:  "Inter", "Helvetica Neue", Helvetica, system-ui, -apple-system, Arial, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* Studio base-scale multiplier: every step derives from it, so the
       editor's type-scale control moves the whole page together. */
    --aster-font-scale: 1;
    --fs: var(--aster-font-scale, 1);

    /* Fluid ramp anchored to the original desktop sizes. The trailing
       comment is what the 1.x design measured at 1440px. */
    --t-micro:   calc(clamp(9.5px,  .10vw +  8.1px, 10.5px) * var(--fs));  /*  9.5 */
    --t-label:   calc(clamp(9.5px,  .17vw +  7.1px, 11.5px) * var(--fs));  /* 11.0 */
    --t-fine:    calc(clamp(11.5px, .17vw +  9.1px, 13px)   * var(--fs));  /* 12.5 */
    --t-body:    calc(clamp(13.5px, .17vw + 11.1px, 15px)   * var(--fs));  /* 15.0 */
    --t-lede:    calc(clamp(14.5px, .21vw + 11.5px, 16.5px) * var(--fs));  /* 16.0 */
    --t-node:    calc(clamp(18px,   .55vw + 13.1px, 22px)   * var(--fs));  /* 21.0 */
    --t-sub:     calc(clamp(22px,  1.10vw + 12.2px, 30px)   * var(--fs));  /* 28.0 */
    --t-hero:    calc(clamp(23px,  1.35vw + 10.1px, 33px)   * var(--fs));  /* 29.5 */
    --t-quote:   calc(clamp(24px,  1.55vw + 10.5px, 36px)   * var(--fs));  /* 32.8 */
    --t-display: calc(clamp(32px,  3.30vw + 12.9px, 66px)   * var(--fs));  /* 60.5 */
    --t-index:   calc(clamp(42px,  4.20vw + 23.5px, 88px)   * var(--fs));  /* 84.0 */
    --t-word:    calc(clamp(38px,  4.80vw + 17.3px, 96px)   * var(--fs));  /* 86.4 */

    --tr-hud:   .26em;
    --tr-label: .30em;
    --tr-wide:  .34em;

    --sp-1:  clamp(4px, .3vw, 6px);
    --sp-2:  clamp(8px, .6vw, 12px);
    --sp-3:  clamp(12px, 1vw, 18px);
    --sp-4:  clamp(16px, 1.5vw, 24px);
    --sp-5:  clamp(22px, 2.2vw, 36px);
    --sp-6:  clamp(30px, 3.2vw, 52px);
    --sp-7:  clamp(40px, 4.4vw, 72px);
    --sp-8:  clamp(52px, 5.6vw, 96px);
    --sp-9:  clamp(68px, 7.6vw, 132px);

    --shell-max:  1440px;
    --shell-wide: 1680px;
    --gutter: clamp(22px, 2.8vw, 40px);
    --measure: 68ch;
    --measure-tight: 46ch;
    --nav-clear: 86px;

    --ratio-anamorphic: 2.39 / 1;
    --ratio-wide:       16 / 9;
    --ratio-classic:    3 / 2;
    --ratio-portrait:   4 / 5;

    /* The panel recipe: two warm hotspots over the bronze gradient. This is
       the most recognisable surface in the 1.x design. */
    --panel-skin:
      radial-gradient(circle at 12% 8%, rgba(204,174,108,.06), transparent 30%),
      radial-gradient(circle at 86% 92%, rgba(110,94,60,.08), transparent 36%),
      var(--aster-panel-gradient);
    --panel-tex-16: radial-gradient(circle, rgba(241,235,221,.05) 1px, transparent 1.4px) 0 0 / 16px 16px;
    --panel-tex-18: radial-gradient(circle, rgba(241,235,221,.04) 1px, transparent 1.4px) 0 0 / 18px 18px;
    --panel-tex-22: radial-gradient(circle, rgba(241,235,221,.04) 1px, transparent 1.4px) 0 0 / 22px 22px;
    --panel-veil:   linear-gradient(180deg, rgba(10,8,6,.70) 0%, rgba(10,8,6,.55) 100%);

    --radius: 0px;
    --radius-pill: 999px;

    --ease:      cubic-bezier(.2, .6, .15, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --dur:       .55s;
    --dur-fast:  .28s;

    color-scheme: dark;
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  ::selection { background: rgba(111, 95, 61, .35); color: var(--ivory); }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  a { color: inherit; text-decoration: none; }
  img, video, canvas, svg, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  img, video, canvas, iframe { min-width: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  /* NOTE: padding is deliberately NOT reset here. Zeroing it collapses the
     Studio's in-preview editing toolbar, whose buttons carry no padding of
     their own - the italic control measured 4px wide. Site buttons set their
     own padding, so nothing is lost by leaving the UA value alone. */
  button { background: none; border: 0; cursor: pointer; }
  :focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
  table { border-collapse: collapse; }
}

/* ==========================================================================
   ATMOSPHERE - sparse gold dotfield, anamorphic washes, grain, letterbox.
   ========================================================================== */
@layer atmosphere {
  .dotfield {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(111,95,61,.06) 1px, transparent 1.4px) 0 0 / 44px 44px;
    -webkit-mask: radial-gradient(ellipse 110% 90% at 50% 30%, #000 30%, rgba(0,0,0,.35) 70%, transparent 100%);
            mask: radial-gradient(ellipse 110% 90% at 50% 30%, #000 30%, rgba(0,0,0,.35) 70%, transparent 100%);
    opacity: .85;
  }
  .light-tl {
    position: fixed; top: -15%; left: -10%; width: 70vw; height: 70vh;
    z-index: 0; pointer-events: none; filter: blur(28px);
    background: radial-gradient(closest-side at 50% 50%, rgba(111,95,61,.10), rgba(111,95,61,.04) 55%, transparent 78%);
  }
  .light-br {
    position: fixed; right: -14%; bottom: -18%; width: 66vw; height: 66vh;
    z-index: 0; pointer-events: none; filter: blur(34px);
    background: radial-gradient(closest-side at 50% 50%, rgba(204,174,108,.075), rgba(110,94,60,.03) 58%, transparent 80%);
  }
  .vignette {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 120% 100% at 50% 42%, transparent 44%, rgba(0,0,0,.42) 100%);
  }
  .grain {
    position: fixed; inset: -50%; z-index: 2; pointer-events: none;
    opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  }
  .letterbox-top, .letterbox-bot {
    position: fixed; left: 0; right: 0; height: clamp(14px, 2.2vh, 26px);
    z-index: 240; pointer-events: none; background: var(--bg);
  }
  .letterbox-top { top: 0; box-shadow: 0 1px 0 rgba(204,174,108,.10); }
  .letterbox-bot { bottom: 0; box-shadow: 0 -1px 0 rgba(204,174,108,.10); }

  #particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; opacity: .5; }
}

/* ==========================================================================
   SHELL - shared primitives: rules, eyebrows, ledes, buttons.
   ========================================================================== */
@layer shell {
  .section,
  .engage-final {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: clamp(48px, 5vw, 68px) var(--gutter) clamp(52px, 5.4vw, 76px);
    scroll-margin-top: var(--nav-clear);
  }

  /* the flanked mono eyebrow: -- LABEL -- */
  .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto var(--sp-4);
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    line-height: 1.55;
    text-transform: uppercase;
    opacity: .85;
  }
  .eyebrow::before,
  .eyebrow::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: var(--gold);
    opacity: .7;
  }

  /* the same rule motif, left-anchored */
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    opacity: .8;
  }
  .kicker::before,
  .kicker::after {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background: var(--gold);
    opacity: .6;
  }

  .display {
    font-family: var(--serif);
    font-size: var(--t-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--ivory);
    text-wrap: balance;
  }
  .display em,
  .display .l-em {
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
  }

  .lede {
    max-width: var(--measure);
    color: var(--ash);
    font-size: var(--t-lede);
    font-weight: 300;
    line-height: 1.65;
  }
  .lede em { color: var(--gold); font-style: italic; }

  .label {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--gold);
  }

  /* primary gold-gradient button, sharp corners, sweep on hover */
  .btn,
  .form-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 240px;
    padding: 15px 36px;
    overflow: hidden;
    border: 1px solid rgba(204,174,108,.62);
    border-radius: var(--radius);
    background-image: linear-gradient(102deg,
      rgba(53,46,30,.80) 0%, rgba(110,94,60,.72) 30%, rgba(204,174,108,.46) 52%,
      rgba(241,235,221,.18) 63%, rgba(110,94,60,.62) 78%, rgba(53,46,30,.80) 100%);
    box-shadow:
      inset 0 1px 0 rgba(241,235,221,.10),
      0 0 0 1px rgba(204,174,108,.08),
      0 0 48px -26px rgba(204,174,108,.74);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast), color var(--dur-fast);
  }
  .btn::before,
  .form-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(241,235,221,.34) 45%, rgba(204,174,108,.22) 55%, transparent 100%);
    transform: translateX(-110%);
    transition: transform .9s var(--ease);
    pointer-events: none;
  }
  .btn:hover::before,
  .btn:focus-visible::before,
  .form-submit:hover::before,
  .form-submit:focus-visible::before { transform: translateX(110%); }
  .btn:hover,
  .form-submit:hover { box-shadow: inset 0 1px 0 rgba(241,235,221,.16), 0 0 0 1px rgba(204,174,108,.16), 0 0 60px -22px rgba(204,174,108,.9); }

  /* the trailing arrow glyph */
  .arr {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .8;
  }
  .arr::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  /* secondary underlined text link */
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(204,174,108,.38);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    transition: border-color var(--dur-fast), color var(--dur-fast);
  }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

  .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

  .aster-skip-link {
    position: absolute;
    z-index: 400;
    top: 10px; left: 10px;
    padding: 10px 16px;
    background: var(--ivory);
    color: var(--bg);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
    transform: translateY(-220%);
    transition: transform var(--dur-fast) var(--ease);
  }
  .aster-skip-link:focus { transform: none; }
}

/* ==========================================================================
   MASTHEAD - the centred lockup: mark, wordmark, nav capsule.
   ========================================================================== */
@layer masthead {
  .nav-shell.masthead-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(20px, 2.3vw, 34px) var(--gutter) clamp(18px, 1.95vw, 28px);
    background:
      radial-gradient(circle at 50% 22%, rgba(200,170,106,.094) 0%, rgba(200,170,106,.035) 26%, rgba(4,5,6,0) 58%),
      linear-gradient(180deg, rgba(4,5,6,.72) 0%, rgba(4,5,6,.34) 62%, rgba(4,5,6,0) 100%);
    transition: padding var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  /* the faint centred hairline under the lockup */
  .nav-shell.masthead-nav::before {
    content: "";
    position: absolute;
    left: 50%; bottom: -1px;
    width: min(520px, 76vw); height: 1px;
    transform: translateX(-50%);
    background: var(--aster-line-gradient);
    opacity: .08;
  }
  /* scroll-progress hairline, width driven by the runtime */
  .nav-shell.masthead-nav::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: var(--aster-scroll-progress, 0%); height: 1px;
    background: var(--aster-line-gradient);
    transition: width .15s linear;
  }
  .nav-shell.masthead-nav.scrolled {
    padding-block: clamp(10px, 1.1vw, 16px) clamp(8px, .9vw, 13px);
    background: linear-gradient(180deg, rgba(4,5,6,.92) 0%, rgba(4,5,6,.72) 70%, rgba(4,5,6,0) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .brand.masthead-brand {
    display: grid;
    justify-items: center;
    gap: clamp(2px, .5vw, 8px);
  }

  .masthead-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(58px, 9.6vw, 138px);
    height: clamp(58px, 9.6vw, 138px);
    filter: drop-shadow(0 0 24px rgba(200,170,106,.10));
    transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .masthead-mark:hover,
  .masthead-mark:focus-visible {
    filter: drop-shadow(0 0 34px rgba(204,174,108,.30));
    transform: scale(1.03);
  }
  /* the "Play reel" affordance under the mark, as in 1.x */
  .masthead-mark::after {
    content: "Play reel";
    position: absolute;
    left: 50%; top: calc(100% + 4px);
    transform: translateX(-50%);
    color: var(--gold);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .masthead-mark:hover::after,
  .masthead-mark:focus-visible::after { opacity: .9; }
  .masthead-logo { width: 100%; height: 100%; object-fit: contain; }

  .masthead-word {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 4vw, 58px);
    font-family: var(--serif);
    font-size: var(--t-word);
    font-weight: 500;
    line-height: .82;
    text-transform: uppercase;
    color: var(--ivory);
  }
  .masthead-word span { display: block; }

  .nav-links {
    display: flex;
    gap: 4px;
    margin-top: clamp(12px, 1.9vw, 27px);
    padding: 6px;
    border: 1px solid rgba(200,170,106,.16);
    border-radius: var(--radius-pill);
    background: rgba(4,5,6,.46);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: inset 0 0 0 1px rgba(241,235,221,.016), 0 16px 44px rgba(0,0,0,.20);
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    color: rgba(204,174,108,.84);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-fast), background var(--dur-fast);
  }
  .nav-links a:hover,
  .nav-links a:focus-visible,
  .nav-links a.is-active { color: var(--ivory); background: rgba(204,174,108,.10); }

  .nav-cta {
    position: absolute;
    top: clamp(18px, 2.6vw, 37px);
    right: var(--gutter);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 21px;
    border: 1px solid rgba(200,170,106,.26);
    border-radius: var(--radius-pill);
    background: rgba(200,170,106,.055);
    color: rgba(241,235,221,.78);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  .nav-cta::after {
    content: "";
    width: 6px; height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
  }
  .nav-cta:hover,
  .nav-cta:focus-visible { background: rgba(204,174,108,.14); border-color: rgba(204,174,108,.5); color: var(--ivory); }

  .menu-btn {
    display: none;
    position: absolute;
    top: clamp(16px, 2.4vw, 34px);
    right: var(--gutter);
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid rgba(204,174,108,.18);
    background: rgba(4,5,6,.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .menu-btn > span,
  .menu-btn > span::before,
  .menu-btn > span::after {
    display: block;
    width: 18px; height: 1px;
    background: var(--gold);
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
  }
  .menu-btn > span { position: relative; }
  .menu-btn > span::before { content: ""; position: absolute; top: -6px; }
  .menu-btn > span::after  { content: ""; position: absolute; top: 6px; }
  .menu-btn[aria-expanded="true"] > span { background: transparent; }
  .menu-btn[aria-expanded="true"] > span::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] > span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* full-sheet mobile menu */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    align-content: center;
    gap: var(--sp-5);
    padding: clamp(84px, 14vh, 130px) var(--gutter) var(--sp-8);
    background:
      radial-gradient(circle at 50% 12%, rgba(204,174,108,.10), transparent 46%),
      rgba(4,4,5,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  /* The inline controller in index.html toggles `.open` (and `body.mm-open`).
     4.0.0 styled `.is-open`, which never matched - so the button animated to
     an X, focus moved, and the body locked, while the panel itself stayed
     invisible. Both names are matched now so neither can drift again. */
  .mobile-menu.open,
  .mobile-menu.is-open { opacity: 1; visibility: visible; }
  body.mm-open { overflow: hidden; }
  .mobile-menu__close {
    position: absolute;
    top: clamp(18px, 3vw, 30px);
    right: var(--gutter);
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--line);
    color: var(--ivory);
    font-size: 24px;
    line-height: 1;
  }
  .mobile-menu nav { display: grid; }
  .mobile-menu nav a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 56px;
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--serif);
    font-size: clamp(24px, 6.4vw, 38px);
    font-weight: 400;
    color: var(--ivory);
  }
  .mobile-menu nav a .n {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-hud);
    color: var(--ash);
  }
  .mobile-menu nav a:hover,
  .mobile-menu nav a:focus-visible { color: var(--gold); }
  .mobile-menu .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: var(--sp-3);
    padding: 18px 22px;
    border: 1px solid var(--gold);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
}

/* ==========================================================================
   HERO - the centred 1.x composition: rule-flanked eyebrow, serif statement,
   narrow measure, gold gradient button, corner brackets, slate strip.
   ========================================================================== */
@layer hero {
  #hero.hero {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    min-height: 100svh;
    padding: clamp(300px, 30vw, 440px) var(--gutter) clamp(46px, 5vw, 74px);
    overflow: hidden;
    text-align: center;
  }
  /* the soft band that seats the masthead against the hero */
  #hero.hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: clamp(200px, 23vw, 334px);
    height: clamp(72px, 8vw, 115px);
    z-index: 0;
    background: linear-gradient(180deg, rgba(4,5,6,.08) 0%, rgba(4,5,6,.76) 46%, rgba(4,5,6,.18) 100%);
    pointer-events: none;
  }
  /* the horizon hairline */
  #hero.hero::after {
    content: "";
    position: absolute;
    left: 4.4vw; right: 4.4vw;
    top: clamp(250px, 27.7vw, 399px);
    height: 1px;
    z-index: 1;
    background: linear-gradient(90deg, rgba(200,170,106,.72) 0%, rgba(200,170,106,.22) 18%, rgba(241,235,221,.10) 50%, rgba(200,170,106,.22) 82%, rgba(200,170,106,.72) 100%);
    opacity: .13;
    pointer-events: none;
  }

  .hero__flare {
    position: absolute;
    left: 50%; top: 26%;
    width: min(92vw, 1100px);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(204,174,108,.13), rgba(110,94,60,.05) 46%, transparent 72%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
  }

  /* the four corner brackets */
  .hero__brackets {
    position: absolute;
    inset: clamp(220px, 25vw, 360px) var(--gutter) clamp(60px, 6vw, 92px);
    pointer-events: none;
    z-index: 1;
  }
  .hero__brackets span {
    position: absolute;
    width: 22px; height: 22px;
    border: 0 solid rgba(204,174,108,.42);
  }
  .hero__brackets span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
  .hero__brackets span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
  .hero__brackets span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
  .hero__brackets span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

  .hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: var(--sp-5);
  }

  .hero__lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #hero .eyebrow { margin-bottom: var(--sp-4); }

  .hero__headline {
    max-width: 22ch;
    margin: 0;
    font-family: var(--serif);
    font-size: var(--t-hero);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .005em;
    color: var(--ivory);
    text-wrap: balance;
  }
  .hero__headline span { display: inline; }
  .hero__headline span + span { margin-left: .32em; }
  .hero__headline .l-em {
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
  }
  .hero__headline .l-thin { font-weight: 300; }

  .hero__panel {
    position: relative;
    display: grid;
    justify-items: center;
    max-width: 620px;
    margin-top: var(--sp-4);
    text-align: center;
  }
  .hero__panel p {
    max-width: 56ch;
    color: var(--ash);
    font-size: var(--t-lede);
    font-weight: 300;
    line-height: 1.65;
  }
  .hero__panel .ctas { justify-content: center; margin-top: var(--sp-5); }
  .hero__trust {
    margin-top: var(--sp-5);
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* the production slate along the foot of the hero */
  .hero__slate {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(18px, 2.4vw, 34px);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-5);
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
    pointer-events: none;
  }
  .hero__slate b { color: var(--gold); font-weight: 400; }

  body.aster-hero-init .hero__grid { opacity: 1; }
}

/* ==========================================================================
   SECTION - chapter numeral, dotted cluster, two-column head.
   ========================================================================== */
@layer section {
  .section__chapter {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: clamp(20px, 3vw, 36px);
    padding-bottom: 18px;
    margin-bottom: clamp(28px, 3.4vw, 40px);
    border-bottom: 1px solid var(--line);
  }
  /* the bright gradient stub under the numeral */
  .section__chapter::before {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: clamp(80px, 10vw, 140px); height: 1px;
    background: var(--aster-line-gradient);
    opacity: .6;
  }
  /* the small dotted constellation below the rule */
  .section__chapter::after {
    content: "";
    position: absolute;
    right: 0; bottom: -22px;
    width: 100px; height: 20px;
    background: radial-gradient(circle, rgba(111,95,61,.55) 1px, transparent 1.6px) 0 0 / 12px 12px;
    opacity: .85;
    pointer-events: none;
  }
  .section__chapter .ix {
    font-family: var(--serif);
    font-size: var(--t-index);
    font-style: italic;
    font-weight: 300;
    line-height: .9;
    letter-spacing: -.02em;
    color: var(--gold);
  }
  .section__chapter .label {
    justify-self: end;
    padding-bottom: 8px;
    text-align: right;
  }

  .section__head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(32px, 5vw, 72px);
    margin-bottom: clamp(28px, 3.6vw, 44px);
  }
  .section__head > div { display: grid; gap: var(--sp-4); }
  .aster-secondary-lede { color: var(--ash-soft); font-size: var(--t-fine); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer component {

  /* ------------------------------------------------------------------------
     THE BEAT STRIP - one bordered slab, hairline-divided cells, dot texture.
     Carries HORIZON (River / Gate / Ocean), Fields and ASTER Direction.
     ---------------------------------------------------------------------- */
  .premise__engine {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--engine-cols, 5), minmax(0, 1fr));
    margin-bottom: clamp(40px, 5vw, 64px);
    border: 1px solid var(--line);
    background: var(--panel-tex-16), var(--panel-skin);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .aster-river-gate-ocean { --engine-cols: 3; }
  .aster-fields-grid      { --engine-cols: 3; }
  .aster-direction-grid   { --engine-cols: 5; }

  .premise__node {
    position: relative;
    padding: clamp(28px, 2.9vw, 38px) clamp(18px, 1.7vw, 24px);
    text-align: center;
    border-right: 1px solid var(--line-soft);
  }
  .premise__node:last-child { border-right: 0; }
  /* the hairlines that reach out from the node glyph toward its neighbours */
  .premise__node::before,
  .premise__node::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(110,94,60,.52) 15%, rgba(204,174,108,.70) 48%, rgba(241,235,221,.42) 100%);
    opacity: .78;
    pointer-events: none;
  }
  .premise__node::before { left: 0; right: calc(50% + 78px); }
  .premise__node::after  { left: calc(50% + 78px); right: 0; transform: scaleX(-1); }
  .premise__node:first-child::before { display: none; }
  .premise__node:last-child::after  { display: none; }

  .premise__node .num {
    margin-bottom: 16px;
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  /* the ringed node glyph with its crosshair and gradient core */
  .premise__node .dot {
    position: relative;
    z-index: 1;
    width: 12px; height: 12px;
    margin: 0 auto 18px;
    border: 1px solid rgba(204,174,108,.92);
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 0 6px rgba(110,94,60,.06), 0 0 24px rgba(204,174,108,.24);
  }
  .premise__node .dot::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    background:
      linear-gradient(0deg, transparent calc(50% - .5px), rgba(111,95,61,.32) 50%, transparent calc(50% + .5px)),
      linear-gradient(90deg, transparent calc(50% - .5px), rgba(111,95,61,.32) 50%, transparent calc(50% + .5px));
    opacity: .6;
  }
  .premise__node .dot::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6E5E3C 0%, #CCAE6C 42%, #F1EBDD 58%, #907B4E 100%);
    opacity: .6;
  }
  .premise__node h4 {
    margin-bottom: 8px;
    font-family: var(--serif);
    font-size: var(--t-node);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ivory);
  }
  .premise__node p {
    max-width: 30ch;
    margin-inline: auto;
    color: var(--ash);
    font-size: var(--t-fine);
    font-weight: 300;
    line-height: 1.5;
  }

  /* ------------------------------------------------------------------------
     THESIS FIELD - human knowledge -> AI -> expansion tags
     ---------------------------------------------------------------------- */
  .aster-thesis-field {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 56px);
    padding: clamp(28px, 3vw, 42px) clamp(22px, 2.4vw, 36px);
    margin-bottom: clamp(32px, 3.6vw, 48px);
    border: 1px solid var(--line);
    background: var(--panel-tex-18), var(--panel-veil);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .aster-thesis-origin {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--ivory);
    font-family: var(--serif);
    font-size: var(--t-node);
  }
  .aster-thesis-current {
    position: relative;
    flex: 1;
    min-width: 44px;
    height: 1px;
    background: var(--aster-line-gradient);
  }
  .aster-thesis-current::after {
    content: "";
    position: absolute;
    right: -3px; top: 50%;
    width: 7px; height: 7px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--gold);
    box-shadow: 0 0 12px rgba(204,174,108,.55);
  }
  .aster-thesis-expansion {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .aster-thesis-expansion span {
    padding: 9px 14px;
    border: 1px solid var(--line);
    background: rgba(4,5,6,.86);
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }
  .aster-thesis-expansion span:hover { color: var(--gold); border-color: rgba(204,174,108,.42); }

  /* ------------------------------------------------------------------------
     DIRECTION QUOTE
     ---------------------------------------------------------------------- */
  .aster-direction-quote {
    position: relative;
    display: grid;
    gap: var(--sp-3);
    padding: clamp(30px, 3.4vw, 48px) clamp(24px, 3vw, 46px);
    border: 1px solid var(--line);
    border-left: 1px solid rgba(204,174,108,.5);
    background: var(--panel-tex-22), var(--panel-skin);
  }
  .aster-direction-quote p {
    max-width: 46ch;
    font-family: var(--serif);
    font-size: var(--t-quote);
    font-style: italic;
    font-weight: 300;
    line-height: 1.28;
    letter-spacing: -.008em;
    color: var(--ivory);
  }
  .aster-direction-quote cite {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-label);
    font-style: normal;
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     FOUNDER PROFILE - the 1.x principles slab, two columns
     ---------------------------------------------------------------------- */
  .premise__principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    background: var(--panel-tex-18), var(--panel-veil);
  }
  .premise__principles.founder-profile {
    grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
    gap: 0;
    align-items: stretch;
  }
  .premise__principles.founder-profile > * {
    padding: clamp(26px, 2.8vw, 40px) clamp(22px, 2.4vw, 36px);
  }
  .premise__principles.founder-profile > div:last-child {
    display: grid;
    align-content: start;
    gap: var(--sp-3);
    border-left: 1px solid var(--line-soft);
  }
  .founder-slate {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--sp-3);
    /* `align-self: start` is essential. A stretched grid item with an
       aspect-ratio derives its WIDTH from the stretched height, so a long
       bio in the next column made this box 798px wide inside a 373px
       column and pushed the monogram over the text. */
    align-self: start;
    width: 100%;
    aspect-ratio: var(--ratio-classic);
    border-right: 1px solid var(--line-soft);
    background:
      radial-gradient(ellipse 70% 80% at 50% 45%, rgba(53,46,30,.42), rgba(4,4,5,.22) 72%),
      var(--bg-2);
    text-align: center;
  }
  .founder-slate span {
    font-family: var(--serif);
    font-size: clamp(34px, 4.4vw, 62px);
    font-weight: 300;
    letter-spacing: .06em;
    color: var(--gold);
  }
  .founder-slate small {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .premise__principles .pn {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .premise__principles h3 {
    font-family: var(--serif);
    font-size: clamp(26px, 2.9vw, 40px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--ivory);
  }
  .premise__principles p {
    max-width: 58ch;
    color: var(--ash);
    font-size: var(--t-body);
    font-weight: 300;
    line-height: 1.6;
  }
  .premise__principles p.founder-role {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .premise__principles p.founder-scope {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     BRAND CAPABILITIES / FIELD TAGS - the pill row
     ---------------------------------------------------------------------- */
  .aster-brand-capabilities,
  #industries > .reveal:not(.premise__engine) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: clamp(26px, 3vw, 40px);
  }
  .aster-brand-capabilities span,
  #industries > .reveal:not(.premise__engine) > span {
    padding: 10px 16px;
    border: 1px solid var(--line);
    background: rgba(4,5,6,.6);
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     THE FILM GATE - the signature 1.x work panel.
     Outer bronze slab, sprocket perforations, corner brackets, HUD strips
     on all four corners, and a bordered metadata slab beneath.
     The bottom HUD and the perforations are drawn entirely in CSS, so no
     markup changes are needed and every CMS binding key is untouched.
     ---------------------------------------------------------------------- */
  .work-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 28px);
    counter-reset: aster-reel;
  }
  .aster-work-row-break { grid-column: 1 / -1; height: 0; }
  .aster-work-row-break.break-tablet { display: none; }

  .poster {
    position: relative;
    counter-increment: aster-reel;
    grid-column: auto / span var(--aster-desktop-span, 6);
    margin-block-start: var(--aster-offset-y, 0);
    translate: var(--aster-offset-x, 0);
    overflow: hidden;
    border: 1px solid rgba(111,95,61,.16);
    background-color: var(--panel-2);
    background-image: var(--panel-skin);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(111,95,61,.055), 0 34px 100px rgba(4,5,6,.38);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .poster:hover { border-color: rgba(204,174,108,.34); box-shadow: 0 0 0 1px rgba(204,174,108,.12), 0 40px 110px rgba(4,5,6,.5); }
  /* the Studio's alignment control */
  .poster.work-align-left,
  .poster.work-align-center,
  .poster.work-align-right {
    grid-column: var(--aster-desktop-start, 1) / span var(--aster-desktop-span, 6);
  }

  .poster__frame {
    position: relative;
    aspect-ratio: var(--aster-outer-ratio, var(--ratio-wide));
    overflow: hidden;
    background: #040506;
  }
  /* sprocket perforations down both edges of the gate */
  .poster__frame::before,
  .poster__frame::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 14px;
    z-index: 3;
    background: radial-gradient(circle, rgba(111,95,61,.55) 1px, transparent 1.6px) center top / 12px 12px;
    opacity: .8;
    pointer-events: none;
  }
  .poster__frame::before { left: 0; }
  .poster__frame::after  { right: 0; }

  .poster__frame > img,
  .poster__frame > video,
  .poster__frame .aster-media-shell {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
  }
  .poster:hover .poster__frame > img,
  .poster:hover .poster__frame > video { transform: scale(1.025); }

  .poster__hud {
    position: absolute;
    inset: 0;
    z-index: 4;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
    pointer-events: none;
  }
  /* the darkening that keeps the HUD legible over any frame */
  .poster__hud::before {
    content: "TC 00:00:" counter(aster-reel, decimal-leading-zero) ":00";
    position: absolute;
    left: 0; bottom: 0;
    padding: 14px 20px;
    color: var(--ash);
    font-variant-numeric: tabular-nums;
  }
  .poster__hud::after {
    content: "ASA 800 · 24FPS";
    position: absolute;
    right: 0; bottom: 0;
    padding: 14px 20px;
    color: var(--ash-soft);
  }
  .poster__hud .tl,
  .poster__hud .tr {
    position: absolute;
    top: 0;
    max-width: 52%;
    padding: 14px 20px;
  }
  .poster__hud .tl { left: 0; color: var(--ivory); }
  .poster__hud .tr { right: 0; color: var(--gold); text-align: right; }
  .poster__hud .tl span,
  .poster__hud .tr span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* the recording indicator before the reel number */
  .poster__hud .rec { position: relative; padding-left: 14px; }
  .poster__hud .rec::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 5px; height: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(204,174,108,.6);
  }
  /* the inner corner brackets */
  .poster__hud .corners { position: absolute; inset: 34px 26px; }
  .poster__hud .corners span {
    position: absolute;
    width: 18px; height: 18px;
    border: 0 solid rgba(204,174,108,.46);
  }
  .poster__hud .corners span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
  .poster__hud .corners span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
  .poster__hud .corners span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
  .poster__hud .corners span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

  /* the metadata slab under the gate */
  .poster__body {
    padding: clamp(18px, 1.7vw, 22px) clamp(20px, 2vw, 26px) clamp(22px, 2vw, 26px);
    border-top: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(53,46,30,.30) 0%, rgba(10,9,7,.46) 100%);
  }
  .poster__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .poster__row h3 {
    font-family: var(--serif);
    font-size: var(--t-sub);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ivory);
  }
  .poster__row .cat {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
  }
  .poster__disclosure {
    margin-bottom: 14px;
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    line-height: 1.6;
    text-transform: uppercase;
  }
  .poster__data {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 7px 18px;
    font-size: var(--t-fine);
  }
  .poster__data .k {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .poster__data .v { color: var(--ivory); font-weight: 300; }
  .poster__data .v a {
    border-bottom: 1px solid rgba(204,174,108,.34);
    color: var(--gold);
    transition: border-color var(--dur-fast), color var(--dur-fast);
  }
  .poster__data .v a:hover { border-color: var(--gold); color: var(--ivory); }

  /* ------------------------------------------------------------------------
     HORIZON FILMS - the Studio-managed panels, in the same film-gate idiom.
     ---------------------------------------------------------------------- */
  .aster-studio-inline { display: grid; gap: clamp(24px, 2.8vw, 40px); }
  .aster-studio-inline__intro {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
    align-items: end;
    gap: clamp(24px, 3.4vw, 56px);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .aster-studio-inline__label {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .aster-studio-inline__intro > p {
    max-width: var(--measure);
    color: var(--ash);
    font-size: var(--t-lede);
    font-weight: 300;
    line-height: 1.65;
  }

  .aster-studio-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 28px);
  }
  .aster-studio-panel {
    position: relative;
    grid-column: var(--aster-desktop-start, 1) / span var(--aster-desktop-span, 12);
    margin-block-start: var(--aster-offset-y, 0);
    translate: var(--aster-offset-x, 0);
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(111,95,61,.16);
    background-color: var(--panel-2);
    background-image: var(--panel-skin);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(111,95,61,.055), 0 34px 100px rgba(4,5,6,.38);
  }
  .aster-studio-panel__frame {
    position: relative;
    aspect-ratio: var(--aster-outer-ratio, var(--ratio-anamorphic));
    overflow: hidden;
    background: #040506;
  }
  .aster-studio-panel__frame::before,
  .aster-studio-panel__frame::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 14px;
    z-index: 3;
    background: radial-gradient(circle, rgba(111,95,61,.55) 1px, transparent 1.6px) center top / 12px 12px;
    opacity: .8;
    pointer-events: none;
  }
  .aster-studio-panel__frame::before { left: 0; }
  .aster-studio-panel__frame::after  { right: 0; }
  .aster-studio-panel__frame > img,
  .aster-studio-panel__frame > video,
  .aster-studio-panel__frame .aster-media-shell { width: 100%; height: 100%; object-fit: cover; }

  .aster-studio-panel__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--sp-2);
    background:
      radial-gradient(ellipse 70% 80% at 50% 52%, rgba(53,46,30,.42), rgba(4,4,5,.24) 72%),
      var(--bg-2);
    text-align: center;
  }
  .aster-studio-panel__placeholder span {
    font-family: var(--serif);
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 300;
    letter-spacing: .30em;
    text-indent: .30em;
    color: rgba(241,235,221,.26);
  }
  .aster-studio-panel__placeholder small {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .aster-studio-panel__hud {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .aster-studio-panel__hud span { position: absolute; top: 0; padding: 14px 20px; }
  .aster-studio-panel__hud span:first-child { left: 0; color: var(--gold); }
  .aster-studio-panel__hud span:last-child  { right: 0; color: var(--ash); }

  .aster-studio-panel__copy {
    display: grid;
    gap: var(--sp-3);
    padding: clamp(22px, 2.3vw, 32px) clamp(22px, 2.4vw, 34px) clamp(24px, 2.4vw, 34px);
    border-top: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(53,46,30,.30) 0%, rgba(10,9,7,.46) 100%);
  }
  .aster-studio-panel__eyebrow {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .aster-studio-panel__copy h3 {
    font-family: var(--serif);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--ivory);
  }
  .aster-studio-panel__copy p {
    max-width: var(--measure);
    color: var(--ash);
    font-size: var(--t-body);
    font-weight: 300;
    line-height: 1.62;
  }
  .aster-studio-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .aster-studio-panel__cta {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(204,174,108,.34);
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .aster-studio-panel.text-center .aster-studio-panel__copy { text-align: center; justify-items: center; }
  .aster-studio-panel.text-center .aster-studio-panel__cta,
  .aster-studio-panel.text-center .aster-studio-panel__meta { justify-self: center; justify-content: center; }
  .aster-studio-panel.text-right .aster-studio-panel__copy { text-align: right; justify-items: end; }
  .aster-studio-panel.text-right .aster-studio-panel__cta,
  .aster-studio-panel.text-right .aster-studio-panel__meta { justify-self: end; justify-content: flex-end; }

  /* ------------------------------------------------------------------------
     RESPONSIBLE PRODUCTION - the two-column QC slab
     ---------------------------------------------------------------------- */
  .qc-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    border: 1px solid var(--line);
    background: var(--panel-tex-18), var(--panel-veil);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .qc-col {
    position: relative;
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
  }
  .qc-col + .qc-col { border-left: 1px solid var(--line-soft); }
  .qc-col > .label,
  .qc-col > .eyebrow {
    justify-content: flex-start;
    margin: 0 0 var(--sp-3);
  }
  .qc-col > .eyebrow::after { display: none; }
  .qc-col h3 {
    margin-bottom: var(--sp-4);
    font-family: var(--serif);
    font-size: clamp(22px, 2.3vw, 32px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ivory);
  }
  .qc-col ul { display: grid; }
  .qc-col li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sp-3);
    padding-block: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--ivory);
    font-size: var(--t-fine);
    font-weight: 300;
    line-height: 1.65;
  }
  .qc-col li:first-child { border-top: 0; }
  /* the markup carries its own bullet holder */
  .qc-col li .ic {
    width: 6px; height: 6px;
    margin-top: .62em;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(110,94,60,.10);
    opacity: .85;
  }
  .qc-col li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .qc-col li b {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     ENGAGEMENTS - the 1.x ladder
     ---------------------------------------------------------------------- */
  .engage-list { border-top: 1px solid var(--line); }
  .engage-row {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1.5fr) minmax(0, 2fr) minmax(0, .9fr) 130px;
    align-items: center;
    column-gap: clamp(20px, 2.6vw, 36px);
    padding: 32px 14px;
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--dur-fast) var(--ease);
  }
  .engage-row:hover { background: rgba(204,174,108,.03); }
  .engage-row__id {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
  }
  .engage-row__title {
    margin-bottom: 6px;
    font-family: var(--serif);
    font-size: var(--t-sub);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ivory);
  }
  .engage-row__sub {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .engage-row__desc {
    color: var(--ash);
    font-size: var(--t-fine);
    font-weight: 300;
    line-height: 1.55;
  }
  .engage-row__price {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 300;
    letter-spacing: var(--tr-hud);
    text-align: right;
    text-transform: uppercase;
  }
  .engage-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .engage-row__cta::after {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    transition: width var(--dur-fast) var(--ease);
  }
  .engage-row:hover .engage-row__cta { color: var(--gold); }
  .engage-row:hover .engage-row__cta::after { width: 32px; }
  .engage-foot,
  .engage-roster {
    margin-top: var(--sp-5);
    max-width: 62ch;
    color: var(--ash-soft);
    font-size: var(--t-fine);
    font-weight: 300;
    line-height: 1.6;
  }

  /* ------------------------------------------------------------------------
     EPIGRAPH
     ---------------------------------------------------------------------- */
  .epigraph {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, .6fr) minmax(0, 2fr);
    align-items: center;
    gap: clamp(26px, 3.4vw, 56px);
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: clamp(56px, 6vw, 88px) var(--gutter) clamp(48px, 5vw, 72px);
  }
  .epigraph::before {
    content: "";
    position: absolute;
    inset: clamp(26px, 2.8vw, 39px) var(--gutter) clamp(22px, 2.4vw, 35px);
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(4,5,6,.94) 0%, rgba(4,5,6,.88) 38%, rgba(4,5,6,.91) 100%),
      radial-gradient(circle at 78% 64%, rgba(204,174,108,.10), transparent 52%);
  }
  .epigraph::after {
    content: "";
    position: absolute;
    left: var(--gutter); right: var(--gutter); bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(144,123,78,.13) 18%, rgba(204,174,108,.34) 50%, rgba(144,123,78,.13) 82%, transparent 100%);
    opacity: .72;
  }
  .epigraph__aside { display: grid; gap: var(--sp-2); }
  .epigraph__index {
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .epigraph__label {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .epigraph__body { display: grid; gap: var(--sp-4); }
  .epigraph__quote {
    max-width: 100%;
    font-family: var(--serif);
    font-size: var(--t-quote);
    font-style: italic;
    font-weight: 300;
    line-height: 1.28;
    letter-spacing: -.008em;
    color: var(--ivory);
  }
  .epigraph__quote span { display: block; }
  .epigraph__quote .hang { color: var(--gold); }
  .epigraph__sig {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     MARQUEE + STUDIO-INSERTED CUSTOM BLOCKS
     ---------------------------------------------------------------------- */
  .marquee {
    position: relative;
    z-index: 3;
    overflow: hidden;
    padding-block: var(--sp-4);
    border-block: 1px solid var(--line-soft);
  }
  .marquee__track { display: flex; width: max-content; animation: asterMarquee 44s linear infinite; }
  .marquee__group {
    display: flex;
    gap: clamp(28px, 4vw, 64px);
    padding-right: clamp(28px, 4vw, 64px);
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .aster-custom-block {
    display: grid;
    gap: var(--sp-3);
    width: var(--aster-block-width, 100%);
    max-width: 100%;
    translate: var(--aster-offset-x, 0) var(--aster-offset-y, 0);
  }
  /* the Studio's text-box position control */
  .aster-block-align-left   { margin-inline: 0 auto; justify-items: start; }
  .aster-block-align-center { margin-inline: auto;   justify-items: center; text-align: center; }
  .aster-block-align-right  { margin-inline: auto 0; justify-items: end;    text-align: right; }
  .aster-custom-heading {
    font-family: var(--serif);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ivory);
  }
  .aster-custom-paragraph { color: var(--ash); font-size: var(--t-body); font-weight: 300; line-height: 1.62; }
  .aster-custom-divider { height: 1px; background: var(--aster-line-gradient); opacity: .5; }
  .aster-custom-button {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border: 1px solid var(--gold);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .aster-cms-panel-zone { display: grid; gap: var(--sp-5); }
  .aster-cms-panel-zone.aster-empty-grid,
  .aster-empty:not(.aster-has-media) { display: none; }
}

/* ==========================================================================
   MEDIA - the CMS media shell, play control and reel projector.
   ========================================================================== */
@layer media {
  .aster-media-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #040506;
  }
  /* The stage size arrives from the runtime already ratio-correct and
     already scaled. Clamping each axis separately with --aster-media-scale
     (as 4.0.0 did) squashed the film: a 9:16 clip inside a 16:9 frame
     rendered at 0.64 instead of 0.5625. The whole film is shown, in its
     true proportions, positioned by the inner-frame X/Y controls. */
  .aster-media-shell.mode-framed { position: relative; display: block; }
  .aster-media-shell.mode-framed > * {
    position: absolute;
    left: var(--aster-stage-x, 50%);
    top: var(--aster-stage-y, 50%);
    translate: -50% -50%;
    width: var(--aster-stage-w, 100%);
    height: var(--aster-stage-h, 100%);
    object-fit: contain;
  }
  /* Both presentations now position the stage the same way. Bleed no longer
     forces 100%x100%, which used to discard the source ratio and let a 9:16
     film render as 16:9. The frame clips the overflow. */
  .aster-media-shell.mode-bleed { position: relative; display: block; }
  .aster-media-shell.mode-bleed > * {
    position: absolute;
    left: var(--aster-stage-x, 50%);
    top: var(--aster-stage-y, 50%);
    translate: -50% -50%;
    width: var(--aster-stage-w, 100%);
    height: var(--aster-stage-h, 100%);
  }
  /* ------------------------------------------------------------------
     THE STAGE. mediaStage() builds shell > stage > media. The stage was
     sized, but nothing sized the MEDIA inside it, so it rendered at its
     intrinsic size and every "Media inside the frame" control — media fit,
     crop focal point, presentation — had nothing to act on. object-fit and
     object-position only apply to a replaced element that has been given a
     box. This gives it one.
     ------------------------------------------------------------------ */
  .aster-media-stage {
    position: relative;
    overflow: hidden;
    display: block;
  }
  .aster-media-stage > img,
  .aster-media-stage > video,
  .aster-media-stage > iframe,
  .aster-media-stage > canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;          /* .fit-contain / .fit-cover override below */
    object-position: 50% 50%;   /* the runtime writes the focal point inline */
  }
  .aster-media-stage > iframe { border: 0; }

  .aster-cms-media { display: block; }
  /* The Studio offers four fit modes. Only two were styled, so "Fill" and
     "Scale down" silently fell back to `cover` and cropped the film. */
  .aster-media-stage > .aster-cms-media.fit-contain,
  .aster-cms-media.fit-contain    { object-fit: contain; }
  .aster-media-stage > .aster-cms-media.fit-cover,
  .aster-cms-media.fit-cover      { object-fit: cover; }
  .aster-media-stage > .aster-cms-media.fit-fill,
  .aster-cms-media.fit-fill       { object-fit: fill; }
  .aster-media-stage > .aster-cms-media.fit-scale-down,
  .aster-cms-media.fit-scale-down { object-fit: scale-down; }
  .aster-static-poster { width: 100%; height: 100%; object-fit: cover; }

  /* the circular play control */
  .aster-cms-play {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: clamp(54px, 5vw, 72px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(204,174,108,.6);
    border-radius: 50%;
    background: rgba(4,5,6,.56);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 34px -10px rgba(204,174,108,.6);
    color: var(--gold);
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
  }
  .aster-cms-play::before {
    content: "";
    width: 0; height: 0;
    margin-left: 3px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid currentColor;
  }
  .aster-cms-play:hover { background: rgba(204,174,108,.20); border-color: var(--gold); transform: translate(-50%, -50%) scale(1.06); }

  /* the reel projector */
  .reel-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 56px);
    background:
      radial-gradient(circle at 50% 40%, rgba(53,46,30,.30), transparent 62%),
      rgba(4,4,5,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .reel-modal.is-open { opacity: 1; visibility: visible; }
  .reel-frame {
    position: relative;
    display: grid;
    place-items: center;
    /* Follows the card it was opened from. 4.0.0 pinned this to 16:9, so a
       vertical film always played inside a landscape box.

       The width must satisfy the width cap AND the height cap at once. A
       definite width plus max-height does NOT do that - it clips the box and
       silently changes the ratio (every tall ratio rendered at 1.6244).
       Folding the height cap into the width via the numeric ratio keeps
       aspect-ratio authoritative at every ratio. */
    aspect-ratio: var(--aster-reel-ratio, var(--ratio-wide));
    width: min(
      1280px,
      100%,
      calc((100vh - clamp(32px, 8vw, 112px)) * var(--aster-reel-num, 1.7778))
    );
    overflow: hidden;
    border: 1px solid var(--line);
    background: #040506;
    box-shadow: 0 40px 140px rgba(0,0,0,.6);
  }
  /* the film is shown whole inside the projector, never cropped */
  /* The film is shown whole in the projector, never cropped. These selectors
     must outrank .aster-cms-media.fit-cover (0,2,0), which the card sets - it
     was winning here and cropping the film. */
  .reel-frame > video,
  .reel-frame > iframe,
  .reel-frame .aster-cms-media,
  .reel-frame .aster-cms-media.fit-cover,
  .reel-frame .aster-cms-media.fit-fill,
  .reel-frame .aster-cms-media.fit-contain,
  .reel-frame .aster-media-shell { width: 100%; height: 100%; border: 0; object-fit: contain; }
  .reel-frame .aster-media-shell.mode-bleed > * { object-fit: contain; }
  .reel-frame__slate,
  .reel-frame__meta {
    position: absolute;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
    pointer-events: none;
  }
  .reel-frame__slate { left: 0; color: var(--ivory); }
  .reel-frame__meta  { right: 0; color: var(--ash); }
  .reel-frame__slate .rec {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 9px rgba(204,174,108,.6);
  }
  .reel-frame__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--sp-2);
    background: var(--bg-2);
    text-align: center;
  }
  .reel-frame__placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
  .reel-frame__placeholder .ph-title {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(26px, 3vw, 44px);
    font-weight: 300;
    letter-spacing: .16em;
    color: var(--ivory);
  }
  .reel-frame__placeholder > span:last-child {
    position: relative;
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .reel-frame.aster-has-media .reel-frame__placeholder { display: none; }
  .reel-close {
    position: absolute;
    top: clamp(14px, 2.4vw, 30px);
    right: clamp(14px, 2.4vw, 30px);
    z-index: 6;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--line);
    background: rgba(4,5,6,.6);
    color: var(--ivory);
    font-size: 22px;
    line-height: 1;
    transition: border-color var(--dur-fast), color var(--dur-fast);
  }
  .reel-close:hover { border-color: var(--gold); color: var(--gold); }

  /* the loading pulse while the film buffers */
  .reel-frame.aster-video-loading::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(204,174,108,.28);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: asterSpin 1s linear infinite;
  }

  /* the tap-to-play control shown when autoplay is blocked (iOS Safari).
     In 3.0.0 this button had no styling at all and rendered as a bare line
     of text across the projector. */
  .aster-video-retry {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(204,174,108,.62);
    background-image: linear-gradient(102deg,
      rgba(53,46,30,.86) 0%, rgba(110,94,60,.76) 30%, rgba(204,174,108,.46) 52%,
      rgba(241,235,221,.18) 63%, rgba(110,94,60,.66) 78%, rgba(53,46,30,.86) 100%);
    box-shadow: inset 0 1px 0 rgba(241,235,221,.10), 0 0 48px -22px rgba(204,174,108,.9);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    cursor: pointer;
  }
  .aster-video-retry::before {
    content: "";
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--gold);
  }
  .aster-video-retry[disabled] { opacity: .6; cursor: progress; }
  .reel-frame.aster-video-awaiting-tap::after { display: none; }
}

/* ==========================================================================
   FORM - the 1.x request card: mono field labels, hairline underlines,
   dot-textured surface, gold gradient submit.
   ========================================================================== */
@layer form {
  #engage.engage-final { text-align: center; }
  #engage > .eyebrow { justify-content: center; }
  #engage > h2.display { max-width: 20ch; margin-inline: auto; text-align: center; }
  #engage > p.lede { margin-inline: auto; max-width: 58ch; text-align: center; }
  #engage .engage-roster { margin-inline: auto; text-align: center; }

  .form-shell { margin-top: clamp(30px, 3.6vw, 52px); text-align: left; }
  .form-card {
    position: relative;
    max-width: 1040px;
    margin-inline: auto;
    padding: clamp(24px, 2.8vw, 40px) clamp(22px, 2.8vw, 42px) clamp(26px, 3vw, 44px);
    border: 1px solid var(--line);
    background: var(--panel-tex-22), var(--panel-skin);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 34px 100px rgba(4,5,6,.38);
  }
  /* the bright corner stub */
  .form-card::before {
    content: "";
    position: absolute;
    left: -1px; top: -1px;
    width: 64px; height: 1px;
    background: var(--aster-line-gradient);
  }
  .form-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: 16px;
    margin-bottom: clamp(20px, 2.2vw, 30px);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .form-card__head .k { color: var(--gold); }
  .form-card__head .v { color: var(--ash); }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 32px);
    margin-bottom: clamp(18px, 2vw, 28px);
  }
  .form-field { display: grid; gap: 10px; }
  .form-field.full { grid-column: 1 / -1; }
  .form-field > label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    color: var(--aster-form-label-color, var(--ash));
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .form-field .req {
    color: var(--aster-form-required-color, var(--gold));
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
  }
  .form-field { --field-line: var(--line); }
  .form-field.invalid,
  .form-field.is-invalid { --field-line: rgba(224, 160, 138, .75); }
  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--field-line);
    border-radius: 0;
    background: transparent;
    color: var(--aster-form-entry-color, var(--ivory));
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 300;
    transition: border-color var(--dur-fast) var(--ease);
  }
  .form-field textarea { min-height: 118px; resize: vertical; }
  .form-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--gold) 50%),
      linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 12px) 21px, calc(100% - 7px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .form-field select option { background: var(--bg-2); color: var(--ivory); }
  .form-field input::placeholder,
  .form-field textarea::placeholder { color: var(--aster-form-example-color, var(--ash-soft)); }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus { outline: 0; --field-line: var(--gold); border-bottom-color: var(--gold); }
  .form-field .err {
    color: #E0A08A;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  /* The inline validator toggles `.invalid` on .form-field, not `.is-invalid`.
     Matching only the latter meant errors never highlighted. Both are matched. */
  .form-field.invalid input,
  .form-field.invalid select,
  .form-field.invalid textarea,
  .form-field.is-invalid input,
  .form-field.is-invalid select,
  .form-field.is-invalid textarea { border-bottom-color: rgba(224,160,138,.7); }
  .form-field.invalid > label,
  .form-field.is-invalid > label { color: #E0A08A; }

  /* An unchosen <select> is marked .aster-form-prompt so it reads as a
     placeholder rather than a value. */
  .form-field select.aster-form-prompt { color: var(--aster-form-example-color, var(--ash-soft)); }

  /* The submit button is disabled and marked .is-busy while sending. */
  .form-submit.is-busy,
  .form-submit[disabled] { opacity: .68; cursor: progress; }
  .form-submit.is-busy::before { display: none; }

  .brief-options { display: grid; gap: 10px; }
  .brief-options__body { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

  .form-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-4);
    padding-top: clamp(18px, 2vw, 26px);
    margin-top: clamp(8px, 1vw, 14px);
    border-top: 1px solid var(--line-soft);
  }
  .form-foot__note {
    max-width: 44ch;
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    line-height: 1.7;
    text-transform: uppercase;
  }
  .form-submit-status {
    grid-column: 1 / -1;
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .form-submit-status:empty { display: none; }

  .form-thanks {
    display: none;
    max-width: 1040px;
    margin-inline: auto;
    padding: clamp(34px, 4vw, 60px) clamp(24px, 3vw, 44px);
    border: 1px solid var(--line);
    background: var(--panel-tex-22), var(--panel-skin);
    text-align: center;
  }
  /* The controller adds `.show` after a successful submit. 4.0.0 styled
     `.is-visible`, so the confirmation never appeared and the form simply
     vanished. Both are matched. */
  .form-thanks.show,
  .form-thanks.is-visible { display: grid; justify-items: center; gap: var(--sp-3); }
  .form-thanks .glyph {
    width: 34px; height: 34px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
    box-shadow: 0 0 26px rgba(204,174,108,.28), inset 0 0 10px rgba(204,174,108,.18);
  }
  .form-thanks h4 {
    margin-top: var(--sp-3);
    font-family: var(--serif);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 400;
    color: var(--ivory);
  }
  .form-thanks p { max-width: 54ch; color: var(--ash); font-size: var(--t-body); font-weight: 300; line-height: 1.62; }
  .relink {
    margin-top: var(--sp-3);
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(204,174,108,.4);
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }

  /* the honeypot must never be visible or focusable */
  .aster-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
@layer footer {
  footer {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(10,9,7,.5) 0%, rgba(4,4,5,.9) 100%);
  }
  .foot__top,
  .foot__bottom {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(28px, 3.6vw, 62px);
    padding-block: clamp(40px, 4.6vw, 72px) clamp(30px, 3.4vw, 52px);
  }
  .foot__brand {
    max-width: 34ch;
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivory);
  }
  .foot__tag {
    margin-top: var(--sp-3);
    max-width: 44ch;
    color: var(--ash);
    font-size: var(--t-fine);
    font-weight: 300;
    line-height: 1.62;
  }
  .foot__origin {
    color: var(--ash);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    line-height: 1.7;
    text-transform: uppercase;
  }
  .foot__links h5 {
    margin-bottom: var(--sp-3);
    color: var(--gold);
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }
  .foot__links li { margin-bottom: 10px; }
  .foot__links a,
  .foot__links li > span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--ash);
    font-size: var(--t-fine);
    font-weight: 300;
    transition: color var(--dur-fast);
  }
  .foot__links a:hover { color: var(--gold); }
  .foot__sound { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
  .foot__sound-label {
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    padding-block: clamp(18px, 2vw, 28px);
    border-top: 1px solid var(--line-soft);
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
  .foot__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: var(--ash);
    transition: color var(--dur-fast);
  }
  .foot__bottom a:hover { color: var(--gold); }
  .aster-music-sticky {
    position: fixed;
    inset-block-end: clamp(20px, 3vh, 34px);
    inset-inline-end: clamp(12px, 2vw, 24px);
    z-index: 55;
    max-width: min(92vw, 380px);
  }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .reveal.in,
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .10s; }
  .reveal.d2 { transition-delay: .20s; }
  .reveal.d3 { transition-delay: .30s; }

  @keyframes asterMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes asterSpin    { to { transform: rotate(360deg); } }
  @keyframes asterRec     { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  @media (prefers-reduced-motion: no-preference) {
    .poster__hud .rec::before,
    .reel-frame__slate .rec { animation: asterRec 2.6s ease-in-out infinite; }
  }
}

/* ==========================================================================
   RESPONSIVE - three deliberate tiers.
   <=1080 tablet / iPad (nav becomes the sheet menu)
   <=720  phone (single column throughout)
   ========================================================================== */
@layer responsive {

  /* ---- <=1080px : iPad and small laptops ------------------------------- */
  @media (max-width: 1080px) {
    .nav-links,
    .nav-cta { display: none; }
    .menu-btn { display: grid; }

    .nav-shell.masthead-nav { padding-block: clamp(16px, 2.4vw, 26px) clamp(12px, 1.6vw, 18px); }

    #hero.hero { padding-block: clamp(210px, 30vw, 320px) var(--sp-7); }

    .section__head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .aster-studio-inline__intro { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }

    .premise__engine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aster-river-gate-ocean { grid-template-columns: minmax(0, 1fr); }
    .premise__node {
      border-right: 1px solid var(--line-soft);
      border-bottom: 1px solid var(--line-soft);
    }
    .premise__node:nth-child(2n) { border-right: 0; }
    .aster-river-gate-ocean .premise__node { border-right: 0; }
    .premise__node:last-child { border-bottom: 0; }
    /* the connecting hairlines only read on a wide row */
    .premise__node::before,
    .premise__node::after { display: none; }

    .aster-thesis-field { grid-template-columns: minmax(0, 1fr); }
    .premise__principles,
    .premise__principles.founder-profile { grid-template-columns: minmax(0, 1fr); }
    .founder-slate {
      aspect-ratio: var(--ratio-wide);
      max-width: 420px;
      border-right: 0;
      border-bottom: 1px solid var(--line-soft);
    }
    .premise__principles.founder-profile > div:last-child { border-left: 0; }

    .qc-cols { grid-template-columns: minmax(0, 1fr); }
    .qc-col + .qc-col { border-left: 0; border-top: 1px solid var(--line-soft); }

    .epigraph { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }

    /* the tablet tier reads its own saved span, start and offsets, so the
       editor's Desktop / Tablet / Mobile switches each take real effect */
    .aster-studio-panel {
      grid-column: var(--aster-tablet-start, 1) / span var(--aster-tablet-span, 12);
      margin-block-start: var(--aster-tablet-offset-y, 0);
      translate: var(--aster-tablet-offset-x, 0);
    }
    .poster {
      grid-column: auto / span var(--aster-tablet-span, 6);
      margin-block-start: var(--aster-tablet-offset-y, 0);
      translate: var(--aster-tablet-offset-x, 0);
    }
    .poster.work-tablet-align-left,
    .poster.work-tablet-align-center,
    .poster.work-tablet-align-right {
      grid-column: var(--aster-tablet-start, 1) / span var(--aster-tablet-span, 6);
    }
    .aster-work-row-break.break-desktop { display: none; }
    .aster-work-row-break.break-tablet { display: block; grid-column: 1 / -1; }

    .engage-row {
      grid-template-columns: 68px minmax(0, 1fr);
      align-items: start;
      row-gap: var(--sp-2);
      padding: 26px 8px;
    }
    .engage-row__id { grid-row: 1; }
    .engage-row > div:nth-child(2) { grid-column: 2; }
    .engage-row__desc  { grid-column: 2; }
    .engage-row__price { grid-column: 2; text-align: left; }
    .engage-row__cta   { grid-column: 2; }

    .form-row { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- <=720px : phone -------------------------------------------------- */
  @media (max-width: 720px) {
    :root { --gutter: max(20px, env(safe-area-inset-left)); }

    .section,
    .engage-final { padding-block: var(--sp-7); }

    #hero.hero {
      min-height: auto;
      padding-block: clamp(180px, 42vw, 260px) var(--sp-8);
    }
    .hero__brackets { display: none; }
    .hero__headline { max-width: 18ch; }
    .hero__panel .ctas .btn { width: 100%; }
    .hero__slate {
      position: static;
      margin-top: var(--sp-6);
      justify-content: center;
      text-align: center;
      gap: var(--sp-1) var(--sp-3);
    }

    .section__chapter { grid-template-columns: minmax(0, 1fr); }
    .section__chapter::after { display: none; }
    .section__chapter .label {
      justify-self: start;
      grid-column: 1 / -1;
      padding-top: 12px;
      padding-bottom: 0;
      margin-top: 10px;
      border-top: 1px solid var(--line-soft);
      text-align: left;
    }

    .premise__engine,
    .aster-fields-grid,
    .aster-direction-grid { grid-template-columns: minmax(0, 1fr); }
    .premise__node {
      border-right: 0;
      border-bottom: 1px solid var(--line-soft);
      padding: 26px 20px;
    }
    .premise__node:last-child { border-bottom: 0; }

    .aster-thesis-origin { flex-wrap: wrap; }
    .aster-thesis-current { min-width: 100%; order: 3; }

    /* the phone tier reads the Studio's MOBILE settings. Anything narrower
       than a full row is unreadable here, so panels run full-bleed while the
       saved value is preserved for wider devices. */
    /* 4.0.0 forced every panel full-width here, which silently killed the
       Studio's mobile span, start and horizontal-nudge controls. They are
       honoured again; the defaults still give a full-width row. */
    .aster-studio-panel,
    .poster {
      grid-column: var(--aster-mobile-start, 1) / span var(--aster-mobile-span, 12);
      margin-block-start: var(--aster-mobile-offset-y, 0);
      translate: var(--aster-mobile-offset-x, 0);
    }
    .aster-studio-panel { width: var(--aster-mobile-width, 100%); }
    .aster-studio-panel.mobile-align-center { margin-inline: auto; }
    .aster-studio-panel.mobile-align-right  { margin-inline-start: auto; }
    .aster-work-row-break { display: none; }
    /* horizontal nudges are a desktop composition tool; a phone has no room
       to absorb them, so they are neutralised. Vertical offsets remain. */
    .aster-custom-block { max-width: 100%; }

    /* the film gate tightens on a phone so the HUD does not crowd the frame */
    .poster__hud .tl,
    .poster__hud .tr,
    .poster__hud::before,
    .poster__hud::after { padding: 10px 16px; }
    .poster__hud .corners { inset: 26px 22px; }
    .poster__frame::before,
    .poster__frame::after { width: 10px; }
    .poster__data { grid-template-columns: 64px minmax(0, 1fr); }
    .poster__row { flex-direction: column; gap: 6px; }
    .poster__row .cat { text-align: left; white-space: normal; }


    .form-foot { grid-template-columns: minmax(0, 1fr); }
    .form-submit { width: 100%; }

    .foot__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .foot__bottom { flex-direction: column; align-items: flex-start; }
  }

  /* ---- very small phones ------------------------------------------------ */
  @media (max-width: 380px) {
    .masthead-word { gap: 10px; }
    .hero__headline { max-width: 15ch; }
  }

  /* ---- wide screens ----------------------------------------------------- */
  @media (min-width: 1600px) {
    .section,
    .engage-final,
    .foot__top,
    .foot__bottom,
    .epigraph { max-width: var(--shell-wide); }
  }

  /* ---- landscape phones -------------------------------------------------- */
  @media (max-height: 560px) and (orientation: landscape) {
    #hero.hero { min-height: auto; padding-block: clamp(150px, 26vw, 220px) var(--sp-6); }
    .mobile-menu { align-content: start; padding-block: 84px var(--sp-6); }
    .mobile-menu nav a { min-height: 46px; font-size: clamp(20px, 4vw, 26px); }
  }
}

/* ==========================================================================
   ACCESSIBILITY + OUTPUT
   ========================================================================== */
@layer a11y {
  /* --------------------------------------------------------------------
     The runtime hides sections, nav links, case-study links and panel
     zones by setting the HTML `hidden` attribute. The UA rule for [hidden]
     is display:none at the lowest precedence, so ANY author rule that sets
     display defeats it. This is the one place !important is correct: it
     restores the attribute's guarantee without the Studio needing to know
     anything about CSS.
     -------------------------------------------------------------------- */
  [hidden] { display: none !important; }

  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Studio-only affordances never render on the public site. */
  .aster-studio-only { display: none; }
  .aster-preview-mode .aster-studio-only { display: revert; }

  @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; }
    .marquee__track { animation: none; }
    #particles, .grain { display: none; }
  }

  @media (prefers-contrast: more) {
    :root {
      --line: rgba(204,174,108,.42);
      --line-soft: rgba(204,174,108,.24);
      --ash-soft: #907B4E;
    }
    .lede,
    .premise__node p,
    .engage-row__desc,
    .poster__data .v { color: var(--ivory); }
  }

  /* Touch devices get no hover-dependent affordances. */
  @media (hover: none) {
    .btn::before, .form-submit::before { display: none; }
    .poster:hover .poster__frame > img,
    .poster:hover .poster__frame > video { transform: none; }
    .masthead-mark::after { display: none; }
  }

  @media print {
    .dotfield, .light-tl, .light-br, #particles, .grain, .vignette,
    .letterbox-top, .letterbox-bot, .marquee, .nav-shell, .mobile-menu,
    #reelModal, .menu-btn, .hero__flare, .hero__brackets { display: none !important; }
    html, body { background: #fff; color: #111; }
    .section, .engage-final { padding-block: 24pt; break-inside: avoid; }
    .display, .hero__headline, .poster__row h3 { color: #111; }
    .poster, .premise__engine, .qc-cols, .form-card { background: none; border-color: #999; box-shadow: none; }
    a { color: #111; text-decoration: underline; }
  }
}

/* ==========================================================================
   MASTHEAD COMPACTION - the tall centred lockup collapses to a bar on scroll,
   exactly as in 1.x. The `scrolled` class is set by the inline controller in
   index.html; the hero mirrors it so the lockup and the page move together.
   ========================================================================== */
@layer masthead {
  .nav-shell.masthead-nav.scrolled .masthead-mark {
    width: clamp(34px, 3.4vw, 46px);
    height: clamp(34px, 3.4vw, 46px);
  }
  .nav-shell.masthead-nav.scrolled .masthead-word {
    gap: clamp(6px, 1vw, 14px);
    font-size: clamp(19px, 1.9vw, 28px);
  }
  .nav-shell.masthead-nav.scrolled .brand.masthead-brand {
    grid-auto-flow: column;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
  }
  .nav-shell.masthead-nav.scrolled .nav-links { margin-top: clamp(8px, 1vw, 14px); }
  .nav-shell.masthead-nav.scrolled::before { opacity: .22; }
  .nav-shell.masthead-nav.scrolled .masthead-mark::after { display: none; }

  @media (max-width: 1080px) {
    .nav-shell.masthead-nav.scrolled .brand.masthead-brand { justify-content: center; }
  }
}

/* ==========================================================================
   REFINEMENTS - measured against the 1.x reference render.
   ========================================================================== */
@layer masthead {
  /* The uploaded logo is gold on a solid dark plate. Screen-blending drops
     the plate against the page so the mark reads as the drawn diamond did,
     with no visible rectangle. */
  .masthead-logo { mix-blend-mode: screen; }
}

@layer hero {
  /* The slate sits at the foot of the hero and needs its own clearance. */
  #hero.hero { padding-bottom: clamp(64px, 6.4vw, 96px); }
  /* `.hero__panel p` would otherwise win on specificity and blow the caption
     up to lede size. */
  .hero__panel p.hero__trust {
    max-width: 62ch;
    color: var(--ash-soft);
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: var(--tr-hud);
    text-transform: uppercase;
  }
}

@layer component {
  /* Cards size to their own content. Without this the grid stretches the
     shorter card in a row and leaves a band of empty bronze beneath it. */
  .poster,
  .aster-studio-panel { align-self: start; }

  /* A max-height on an aspect-ratio box makes the box preserve its ratio by
     SHRINKING ITS WIDTH, which left an empty panel narrower than the slab it
     sits in. An empty gate therefore keeps the ratio the Studio saved for it,
     exactly as a filled one does - which is also what 1.x did with its
     drop-target frames. */

  /* The Horizon intro reads better as a stacked label over its paragraph. */
  .aster-studio-inline__intro { align-items: start; }
  .aster-studio-inline__label { padding-top: 3px; }
}

@layer masthead {
  /* A `filter` on the mark creates a stacking context, which isolates the
     logo's screen blend and leaves the plate visible. The glow is drawn as a
     backdrop instead so the blend can reach the page. */
  .masthead-mark { filter: none; }
  .masthead-mark::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(204,174,108,.20), rgba(204,174,108,.06) 46%, transparent 68%);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .masthead-mark:hover { transform: none; }
  .masthead-mark:hover .masthead-logo,
  .masthead-mark:focus-visible .masthead-logo { transform: scale(1.04); }
  .masthead-logo { transition: transform var(--dur) var(--ease); }
  .masthead-mark:hover::before { opacity: 1.6; }
}

/* ==========================================================================
   LEGIBILITY - the 1.x palette is preserved exactly; the smallest mono
   micro-copy is the one place it falls below WCAG AA (--ash-soft measures
   3.25:1, --ash measures 4.09:1 over the bronze panels). These two tokens
   lift only that copy to 4.5:1. The difference is imperceptible at 9-13px
   and every structural use of --ash / --ash-soft (hairlines, glyphs,
   borders) is untouched.

   To restore the literal original values, set:
     --ash-text: var(--ash-soft);  --ash-text-2: var(--ash);
   ========================================================================== */
@layer tokens {
  :root {
    --ash-text:   #9C875A;   /* lift of --ash-soft, small text only */
    --ash-text-2: #AC9663;   /* lift of --ash, small text on panels  */
  }
}

@layer a11y {
  .hero__slate,
  .hero__panel p.hero__trust,
  .founder-scope,
  .engage-foot,
  .engage-roster,
  .aster-secondary-lede,
  .foot__sound-label,
  .foot__bottom { color: var(--ash-text); }

  .poster__disclosure,
  .aster-studio-panel__meta,
  .aster-studio-panel__placeholder small,
  .premise__node p,
  .qc-col li > span:last-child { color: var(--ash-text-2); }
}

@layer a11y {
  /* Three more micro-copy surfaces the first pass missed: the marquee band,
     the epigraph signature, and the founder scope line (whose component rule
     carried !important, which earlier layers win). */
  .marquee__group,
  .epigraph__sig { color: var(--ash-text); }
  .premise__principles p.founder-scope { color: var(--ash-text); }
  .premise__node p { color: var(--ash-text-2); }
}

@layer a11y {
  /* The Horizon panel body sits on the bronze slab, where --ash lands at
     4.09:1. This is the same one-step lift used elsewhere. */
  .aster-studio-panel__copy p { color: var(--ash-text-2); }
}

@layer component {
  /* The 1.x gate carried a vignette + top/bottom scrim so the mono readouts
     stayed legible over any frame. Without it the HUD disappears into bright
     imagery. Applied to the HUD layer itself, which already spans the frame. */
  .poster__hud,
  .aster-studio-panel__hud {
    background:
      radial-gradient(120% 80% at 50% 50%, transparent 52%, rgba(0,0,0,.50) 100%),
      linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 16%, transparent 32%,
                      transparent 66%, rgba(0,0,0,.26) 82%, rgba(0,0,0,.66) 100%);
  }
}

/* ==========================================================================
   4.0.1 — MOBILE HERO CORRECTION
   The production slate sits before .hero__grid in the markup. On desktop it
   is absolutely positioned at the foot of the hero, so document order never
   mattered. Making it static on phones dropped it back into flow AT THE TOP,
   putting five lines of mono metadata above the headline.

   This block restores the intended reading order — mark, wordmark, statement,
   then the slate as a footer — and clears the collisions that followed from
   it. Everything here is scoped to <=720px; desktop and tablet are untouched.
   ========================================================================== */
@layer responsive {
  @media (max-width: 720px) {

    /* --- 1. reading order. Grid items honour `order`, and the flare and
           brackets are out of flow, so nothing else is disturbed. ---------- */
    #hero.hero .hero__grid  { order: 1; }
    #hero.hero .hero__slate { order: 2; }

    /* --- 2. the slate reads as a deliberate footer strip, not a stray
           paragraph pushed against the copy above it -------------------- */
    #hero.hero .hero__slate {
      width: 100%;
      margin-top: var(--sp-7);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--line-soft);
      row-gap: 6px;
      line-height: 1.9;
      text-wrap: balance;
    }

    /* --- 3. the horizon rule and its band move up into the empty zone
           between the wordmark and the copy, where they belong. At 250px
           they were slicing straight through the slate text. ------------- */
    #hero.hero::before {
      top: clamp(86px, 24vw, 128px);
      height: clamp(54px, 15vw, 78px);
    }
    #hero.hero::after { top: clamp(126px, 34vw, 176px); }

    /* --- 4. close the dead band. The masthead ends around 119px; this
           leaves a deliberate ~35px of clearance instead of 91px of
           nothing, and lifts the headline to roughly a fifth of the
           screen instead of two fifths. --------------------------------- */
    #hero.hero { padding-block: clamp(152px, 40vw, 220px) var(--sp-7); }

    /* --- 5. the statement carries as a hero rather than a subtitle: two
           lines, set a step larger than the shared ramp. At 30ch it
           collapsed onto one small line; at 18ch it broke into three
           with a ragged edge. --------------------------------------- */
    .hero__headline {
      max-width: min(100%, 21ch);
      font-size: clamp(25px, 6.9vw, 31px);
      line-height: 1.22;
    }

    /* --- 6. the flanking rules stay attached to their label. At full
           desktop tracking the string nearly fills the column, which
           pushed the rules out to the extremes and read as broken
           decoration. --------------------------------------------------- */
    .eyebrow { gap: 10px; }
    .eyebrow::before,
    .eyebrow::after { flex: 0 0 16px; width: 16px; }
    #hero .eyebrow { letter-spacing: .24em; }

    /* --- 7. the primary action is inset rather than edge to edge ------- */
    .hero__panel .ctas .btn { width: 100%; max-width: 320px; margin-inline: auto; }

    /* --- 8. the trust line gets the full column so it falls in two even
           lines. Balancing it at a narrow measure produced three, with an
           orphaned separator opening the second. ---------------------- */
    .hero__panel p.hero__trust { max-width: 100%; margin-inline: auto; text-wrap: pretty; }
  }

  /* --- narrow phones need a touch more tracking relief on the eyebrow --- */
  @media (max-width: 400px) {
    #hero .eyebrow { letter-spacing: .20em; }
  }
}

/* ==========================================================================
   4.0.2 — PHONE SLATE AND TRUST LINE

   Two width- and engine-dependent faults, both visible on a real iPhone but
   not in the Studio's 390px preview.
   ========================================================================== */
@layer responsive {
  @media (max-width: 720px) {

    /* 1. THE SLATE. As a wrapping flex row its five items packed one per
          line at 390px and two per line from 414px up, so the same slate
          read clean in the Studio preview and ragged on the device. A
          single-column grid gives one item per line at every phone width,
          which is how a film slate should read. */
    #hero.hero .hero__slate {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      row-gap: 6px;
      text-align: center;
    }

    /* 2. THE TRUST LINE. At .26em tracking the first line measured 347px
          inside 350px — three pixels of slack. Safari sets slightly wider
          than Chromium, so it broke one word earlier and left the separator
          stranded at the head of line two.

          `text-wrap: pretty` could never fix this: it is Chromium-only, so
          the exact browser showing the fault ignored it.

          Tested at .26 / .20 / .18 / .16 / .14em against nine real device
          widths (320-430) with balance disabled, i.e. the worst case. Only
          .16em clears the boundary on all nine, and it keeps a 12px minimum
          margin; .18em and .14em each fall to 2px somewhere, which is the
          same knife-edge that caused this. `balance` moves the break further
          clear again wherever it is supported (Safari 17.5+, Chrome 114+).

          The slate takes the same tracking so the two blocks stay visually
          matched, and so its longest row cannot wrap at 320px. */
    .hero__panel p.hero__trust,
    #hero.hero .hero__slate {
      letter-spacing: .16em;
    }
    .hero__panel p.hero__trust { text-wrap: balance; }
  }
}

/* ==========================================================================
   4.1.0 — STUDIO PREVIEW TOOLBAR
   The visual editor builds its toolbar inside the preview iframe, so this
   stylesheet reaches it. These rules give the controls a usable hit area at
   every width without touching anything on the public site: the selector
   only matches the element the editor creates, which never exists outside
   /?asterPreview=1.
   ========================================================================== */
@layer a11y {
  [data-aster-text-toolbar] button {
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid rgba(144, 123, 78, .55);
    background: rgba(241, 235, 221, .06);
    color: #F1EBDD;
    line-height: 1;
  }
  [data-aster-text-toolbar] button.active,
  [data-aster-text-toolbar] button:hover { background: rgba(204, 174, 108, .22); }
  [data-aster-text-toolbar] input,
  [data-aster-text-toolbar] select {
    min-height: 26px;
    padding: 3px 5px;
    border: 1px solid rgba(144, 123, 78, .45);
    background: #0A0907;
    color: #F1EBDD;
  }
  [data-aster-text-toolbar] input[type="color"] {
    width: 34px;
    padding: 2px;
    cursor: pointer;
  }
  [data-aster-text-toolbar] select option { background: #0A0907; color: #F1EBDD; }
}