/* ═══════════════════════════════════════════════════════════════════
   HEC — THE EXPERIENCE
   ───────────────────────────────────────────────────────────────────
   Homepage only. Interior pages keep hec.css.

   There are no sections here in the landing-page sense: no eyebrows,
   no card grids, no title/subtitle/paragraph stacks, no CTA blocks.
   The page is a single continuous sequence of full-viewport ACTS the
   visitor moves through. Words behave like title cards.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* The HEC navy family. Everything dark on this site is one of these four
     tones — never black, never grey — so the whole site reads as one
     continuous cinematic environment rather than stacked panels. */
  --n0:#020B18;   /* deepest navy   */
  --n1:#041126;   /* primary        */
  --n2:#06162E;   /* secondary      */
  --n3:#081A35;   /* midnight blue  */
  /* The page itself. One flat tone behind every route — the gradient that
     used to run down `main` is gone, so there is no band, seam or drift
     anywhere, and every surface that reads as "the page" rather than as an
     object sitting on it takes this and nothing else. */
  --page:#0C1523;
  /* The membership accents, sampled out of the lockup: deep gold, gold, pale
     gold, white. They began scoped to .acct, which was fine while only the
     account pages used them and wrong the moment Join HEC stopped being one
     of those pages — every gold button on it rendered with no fill, because
     the variable resolved to nothing outside that ancestor. Site-wide is what
     they actually are. */
  --a-deep:#C69539; --a-gold:#F0B050; --a-gold-l:#F0D070; --a-white:#F0F0F0;
  --a-edge:rgba(240,176,80,.30);
  --ink:#020B18;
  --ink-2:#041126;
  --navy:#06162E;
  --blue:#0B5FFF;
  --gold:#C9A227;
  --gold-l:#EEC451;   /* two shades darker */
  --rail-red:#D7262E;     /* film-row scroll arrows */
  --rail-red-h:#EE3A42;
  /* ── the ethereal family ──────────────────────────────────────────
     Colour created by light, not by paint. These never touch a
     background — only type, rules, halos and hover edges.
       white / silver  = story, clarity
       ice / lavender  = imagination, audience intelligence, commerce
       gold            = Hollywood, HEC, prestige (used least of all) */
  /* one spectrum only: pearl → ice → lavender → pearl */
  /* The BRANDS teal, sampled from the HEC | BRANDS lockup. It belongs to
     the small uppercase labels — the kicker above a headline — so every
     section announces itself in the same voice across the site. */
  --brand-teal:#68CFC5;
  --silver:#F2F5F8;
  --pearl:#DCE4EC;
  --ice:#9EDFFF;
  --lav:#BFB6FF;
  --text:#F5F6F8;
  --t2:rgba(245,246,248,.62);
  --t3:rgba(245,246,248,.34);
  --line:rgba(245,246,248,.10);
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(18px,4vw,64px);
  /* ── the master grid ──────────────────────────────────────────────
     Every section is built from these five values. A contained frame is
     --frame-w wide and starts at --gut; a full-bleed plate runs 100% and
     overlays its headline at --gut. Either way the text column starts on
     the same rail. Nothing below invents its own spacing. */
  --frame-w:min(1320px, calc(100% - var(--gut) * 2));
  /* the content column's left edge — the gutter until the page is wider
     than the column, then the column's own margin. Headlines and framed
     media both start here, so they share one rail at every width. */
  --rail:max(var(--gut), calc((100% - 1320px) / 2));
  --pad-y:clamp(62px,8.5svh,112px);   /* section top / bottom          */
  --gap-lab:clamp(12px,1.3vw,18px);   /* eyebrow → headline            */
  --gap-body:clamp(18px,2vw,28px);    /* headline → supporting copy    */
  --gap-cta:clamp(24px,2.8vw,38px);   /* copy → button                 */
  --measure:46ch;                     /* supporting copy line length   */
  --bar-h:68px;                       /* header band — main reserves it */
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%}
/* The page is a single gradient rather than a stack of section colours, so
   there is no seam anywhere to notice. Sections add only faint radial glow. */
main{background:var(--page)}
body{
  margin:0;background:var(--page);color:var(--text);font-family:var(--body);
  font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:inherit}
p{margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:300;background:var(--gold-l);color:var(--ink);
  padding:12px 20px;font-weight:700;letter-spacing:.1em}
.skip:focus{left:12px;top:12px}

/* ── TYPE SCALE ────────────────────────────────────────────────────
   Four tiers, used strictly. The visuals lead; type supports them.
   Only the closing statement is allowed to be large.               */

/* RARE — reserved for the final statement. Nowhere else. */
.t-rare{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.75rem,5.4vw,6rem);line-height:.9;letter-spacing:-.04em}

/* MAJOR — a strong moment that must not own the viewport. 30 → 56px */
.t-major{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.875rem,3.5vw,3.5rem);line-height:1.0;letter-spacing:-.03em}

/* MID — locations line, brand line. 28 → 46px */
.t-mid{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.625rem,2.9vw,2.875rem);line-height:1.04;letter-spacing:-.026em}

/* FILM — always quieter than the artwork it sits under. 24 → 40px */
.t-film{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.3vw,2.5rem);line-height:1.04;letter-spacing:-.02em}

/* LABEL — the workhorse. Most acts get only this. 11 → 13px */
.t-label{font-family:var(--body);font-size:clamp(10.5px,.86vw,13px);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--t2)}

/* BODY — used sparingly on the homepage. 16 → 18px */
.t-body{font-size:clamp(1rem,1.1vw,1.125rem);color:var(--t2);line-height:1.62;max-width:46ch}

.tag{font-size:9.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--t3)}
.gold{color:var(--gold-l)}

/* ═══ ETHEREAL TYPE ════════════════════════════════════════════════
   Reads as silver-white catching blue-lavender light, not as a
   gradient effect: silver and pearl hold ~60% of the ramp and the
   saturated stops sit in narrow bands off-centre, the way a highlight
   falls across a pearl surface.                                     */
.eth{
  /* pearl and silver hold most of the ramp; the ice and lavender bands are
     narrow and separated by pearl, so the word never reads as "a purple
     gradient" — it reads as silver catching a highlight. --violet is
     deliberately absent: at headline scale it goes straight to purple. */
  background-image:linear-gradient(101deg,
    var(--silver) 0%,  #FFFFFF 13%,     var(--pearl) 27%,
    var(--ice) 42%,    var(--pearl) 56%,
    var(--lav) 70%,    var(--pearl) 84%, var(--silver) 100%);
  background-size:158% 100%;
  background-position:34% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* keeps the glyph edges from going soft on sub-pixel rendering */
  -webkit-font-smoothing:antialiased;
}
/* if background-clip:text is unavailable the words stay pearl, not invisible */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .eth{color:var(--pearl);-webkit-text-fill-color:var(--pearl);background-image:none}
}

/* ═══ THE H2 SYSTEM ════════════════════════════════════════════════
   One treatment for every standard section headline on every page.
   The gradient is authored at full strength and held back at rest by a
   single saturate() — 62% reads as pearl with a hint of ice and
   lavender. Hover restores it to 100% over 550ms and, at the same
   time, walks the gradient slowly across the letters: one light sweep,
   reversing when the cursor leaves. No glow, no shadow, nothing that
   softens a letterform.                                              */
.h2{
  background-image:linear-gradient(101deg,
    var(--silver) 0%,  #FFFFFF 13%,     var(--pearl) 27%,
    var(--ice) 42%,    var(--pearl) 56%,
    var(--lav) 70%,    var(--pearl) 84%, var(--silver) 100%);
  background-size:158% 100%;
  background-position:34% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-font-smoothing:antialiased;
  filter:saturate(.50) brightness(1.02);
  transition:filter .55s var(--ease), background-position 3.2s var(--ease);
}
/* .act-word is pointer-events:none so the cursor reaches the scene behind
   it; the headline itself has to opt back in or it can never be hovered.
   Events still bubble to the act, so the locations pan keeps working. */
.act-word .h2{pointer-events:auto}
/* one width band for every major statement — line breaks are authored in
   the markup, never left to the browser */
/* The gradient is clipped to the element's BOX, so a block-level headline
   with short words (HEC / Films) leaves the ice and lavender bands sitting
   in empty space beside the glyphs and renders almost pure white, while a
   headline that fills its box samples deep into them. Shrinking the box to
   the text makes every H2 sample the same slice of the ramp — same colour
   regardless of word length. Position, size and alignment are unchanged. */
.h2{width:fit-content;max-width:min(26ch,100%);text-wrap:balance}
.final-in .h2{margin-inline:auto}
.h2:hover,.h2:focus-visible{
  filter:saturate(1) brightness(1.06);
  background-position:53% 0;
}
/* no hover on touch, so the resting state carries more of the effect */
@media(hover:none){
  .h2{filter:saturate(.70) brightness(1.03)}
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .h2{color:var(--pearl);-webkit-text-fill-color:var(--pearl);
      background-image:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  /* the colour stays; only the sweep goes */
  .h2{transition:filter .55s var(--ease)}
  .h2:hover,.h2:focus-visible{background-position:34% 0}
}

/* interior page headlines belong to the same system */
.t-page{
  background-image:linear-gradient(101deg,
    var(--silver) 0%,  #FFFFFF 13%,     var(--pearl) 27%,
    var(--ice) 42%,    var(--pearl) 56%,
    var(--lav) 70%,    var(--pearl) 84%, var(--silver) 100%);
  background-size:158% 100%;background-position:34% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-font-smoothing:antialiased;
  filter:saturate(.50) brightness(1.02);
  transition:filter .55s var(--ease), background-position 3.2s var(--ease);
}
.t-page{width:fit-content;max-width:min(26ch,100%)}
.t-page:hover{filter:saturate(1) brightness(1.06);background-position:53% 0}
@media(hover:none){ .t-page{filter:saturate(.70) brightness(1.03)} }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .t-page{color:var(--pearl);-webkit-text-fill-color:var(--pearl);
          background-image:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .t-page{transition:filter .55s var(--ease)}
  .t-page:hover{background-position:34% 0}
}
/* reserved for two words on the whole site — light drifting across, 15s */
.eth--move{animation:ethDrift 24s ease-in-out infinite}
@keyframes ethDrift{
  0%,100%{background-position:34% 0}
  50%    {background-position:58% 0}
}
@media(prefers-reduced-motion:reduce){ .eth--move{animation:none} }

/* small labels: the same language at label scale, used on a few only */
/* section labels stay uniform: the BRANDS teal, never competing with the
   headline. One colour for every label on the site — no per-section tints. */
.t-label{color:var(--brand-teal)}

/* a rule made of light */
.eth-rule{border:0;height:1px;background:linear-gradient(90deg,
  transparent,rgba(120,215,255,.20) 26%,rgba(195,181,255,.22) 58%,transparent)}
.stages{border-top:0;background:linear-gradient(90deg,
  transparent,rgba(120,215,255,.18) 26%,rgba(195,181,255,.20) 58%,transparent)
  top left/100% 1px no-repeat}

/* ─────────── cold open ─────────── */
/*
 * The studio reveal.
 *
 * The opening is a supplied film: five seconds in which the wordmark
 * resolves, the monogram strikes, and the company name settles under it.
 * Nothing here animates the mark — the file carries its own timing, its own
 * light and its own hold, so a keyframe of ours would fight it. The frame
 * is never cropped: object-fit keeps all 1920x1080 of it in view and lets
 * the ground show at whatever aspect the window happens to be.
 *
 * That ground is pure black because the film is, so the letterbox and the
 * picture are the same black and the seam between them does not exist.
 *
 * Below the film sits the last frame as a still. It is what a visitor sees
 * if the video is refused, fails, or has not arrived in time — the script
 * chooses between them and shows exactly one.
 */
.cold{position:fixed;inset:0;z-index:250;background:#000;
  display:grid;place-items:center;align-content:center;
  transition:opacity .4s linear,visibility .4s}

/* The film fills the overlay and is centred inside it. It carries no
   controls, no audio track and no poster: the first frame is already black,
   so there is nothing for a poster to cover. */
.cold-film{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;border:0;opacity:0;pointer-events:none}
.cold--film .cold-film{opacity:1}
/* Exactly one of the two is ever visible. */
.cold--film .cold-mark{display:none}

/* The lockup is supplied cut out of its backdrop, so there is no plate to
   blend and no rectangle to hide: the monogram, the rule and the name sit
   directly on the ink with their own glow carried in the alpha channel.
   The file is trimmed to the artwork's own extent — every border row and
   column is fully transparent — so the box the reveal scales is the lockup
   itself rather than the lockup inside a margin. */
.cold picture{display:contents}
.cold-mark{display:block;width:auto;height:auto;
  max-width:min(88vw,1442px);max-height:60vh;aspect-ratio:1442/599;
  opacity:0;transform:scale(.25);transform-origin:center center}

/* The growth, started by the script rather than by page load.
   cubic-bezier(.30,0,.10,1) leaves slowly — a fifth of the way through the
   beat it has covered a twentieth of the distance — then runs and spends
   its last stretch easing the final few percent into place. Every control
   point sits inside 0..1, so the image mathematically cannot pass its final
   size and settle back: there is no overshoot to tune out. Only transform
   and opacity animate, so the whole reveal stays on the compositor. */
.cold--go .cold-mark{animation:markIn 2.2s cubic-bezier(.30,0,.10,1) forwards;
  will-change:transform,opacity}
@keyframes markIn{
  0%{opacity:0;transform:scale(.25)}
  16%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}

/* Reduced motion: the completed artwork at final size, with no growth at
   all. The hold and the crossfade still run, so the visitor passes through
   the opening rather than having it skipped out from under them. */
@media(prefers-reduced-motion:reduce){
  .cold--go .cold-mark{animation:none;opacity:1;transform:none}
}
.cold.done{opacity:0;visibility:hidden;pointer-events:none}

/* The company name stays in the document as the homepage's only h1. The
   artwork carries it visually, so showing it again would print the words
   twice; deleting it would leave the site's most important page with no
   top-level heading at all. It is moved off-screen instead, which keeps it
   in the accessibility tree and in the document outline. */
.cold h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.cold h1 i{font-style:normal}

/* ─────────── chrome ─────────── */
/* The header is a solid band of the site's deepest navy — the same --n0 the
   page gradient opens on — so it reads as part of the page rather than a
   blend floating on the artwork. --bar-h is declared rather than left to the
   content box so `main` can reserve exactly that much room and the hero can
   start on the header's lower edge at every width. */
.bar{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;
  align-items:center;justify-content:space-between;
  height:var(--bar-h);padding:0 var(--gut);
  background:var(--page);
  /* the band is opaque now, so it takes its own clicks rather than letting
     them fall through to the artwork it is covering */
  pointer-events:auto;
  opacity:0;transition:opacity .8s var(--ease) .2s}
/* The homepage hero begins where the header ends — never behind it. Scoped
   to .home: every page shares <main id="main">, and the interior pages
   already clear the header with the .entrance padding. */
main.home{padding-top:var(--bar-h)}
body.lit .bar{opacity:1}
.bar > *{pointer-events:auto}
/* The header runs mix-blend-mode:difference so the mark stays legible over
   both the navy and the bright desert plate. A clipped silver/ice gradient
   inverts to dark blue under difference and destroys the logo, so the
   ethereal sheen is deliberately NOT used here — the identity wins. */
/* ── the brand mark ───────────────────────────────────────────────
   The supplied artwork is a wide frame with the mark floating in a large
   field of negative space. The file is NOT trimmed; the anchor is the
   crop. It is a fixed window sized from the artwork's own extent —
   --mark-h is the height of that window — and the image is positioned
   inside it at a size that fills it, with the surplus clipped away.

   Every number is measured from the shipped 1942x809 file rather than
   guessed. The artwork, taken out to where its glow falls below 3%
   opacity and given a breath of room on every side, occupies x 176..1652
   and y 39..712 of it: a window 1476x673, which is 2.19316 times as wide
   as it is tall. Against that window height the whole frame is 2.88559
   wide and 1.20208 tall, and the frame's centre sits 2.935% right and
   3.585% down from the window's, which the translate takes back out so
   the mark is optically centred rather than merely placed.

   Both box dimensions come from --mark-h alone, so the header reserves
   the mark's exact footprint before the file loads: nothing reflows, and
   the bar's height is set by --bar-h and is not touched by this. The
   window has no background, border or shadow — the artwork is cut out,
   so it sits on the bar's own navy with nothing drawn around it. */
.bar-mark{--mark-h:44px;flex:0 0 auto;display:block;position:relative;
  overflow:hidden;
  width:calc(var(--mark-h) * 2.19316);
  height:var(--mark-h)}
.bar-mark picture{display:contents}
.bar-mark img{position:absolute;left:50%;top:50%;
  width:calc(var(--mark-h) * 2.88559);height:calc(var(--mark-h) * 1.20208);
  transform:translate(calc(-50% + 2.935%),calc(-50% + 3.585%));
  transition:filter .35s var(--ease)}
/* Hover is a touch of light and nothing else: no scale, no movement. */
.bar-mark:hover img,.bar-mark:focus-visible img{filter:brightness(1.14)}
@media(prefers-reduced-motion:reduce){.bar-mark img{transition:none}}
.bar-menu{font-size:13.65px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px}
.bar-menu b{font-weight:700;transition:transform .4s var(--ease)}
body.menu-open .bar-menu b{transform:rotate(45deg)}

/* ─────────── menu (its own world) ─────────── */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
body.menu-open .menu{opacity:1;visibility:visible}
.menu-bg{position:absolute;inset:0;z-index:0}
.menu-bg span{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.menu-bg span.on{opacity:.46;transform:none}
.menu-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(2,6,16,.92),rgba(2,6,16,.42));}
/* ── the expanded menu's list ─────────────────────────────────────
   This was `justify-content:center` with a fixed 96px of padding, and
   the two together are the bug. Flex centring distributes overflow to
   BOTH ends: once the list is taller than the box, its top runs out
   past the padding and under the fixed header, and no amount of
   scrolling reaches it because the overflow is above the scroll
   origin. At 1440x900 the twelve items measured 906px against 756px
   of room, so the first item sat 75px above where the padding put it
   — 21px down the screen, behind a 68px header.

   Auto margins centre without that failure mode: free space goes to
   them, and when there is none they collapse to zero rather than
   going negative. So the list is centred on a tall screen and starts
   at the top of the padding box on a short one, where the container
   scrolls instead.

   The padding is derived from --bar-h rather than typed, so the menu
   follows the header if the header ever changes height, and it adds
   the phone's safe-area insets on top. */
.menu-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-start;
  padding:calc(var(--bar-h) + 28px + env(safe-area-inset-top,0px))
          calc(var(--gut) + env(safe-area-inset-right,0px))
          calc(48px + env(safe-area-inset-bottom,0px))
          calc(var(--gut) + env(safe-area-inset-left,0px));
  overflow-y:auto;
  /* The page behind is already locked with body{overflow:hidden}; this
     stops a scroll that reaches the end of the menu from chaining out
     to it on touch and trackpads. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,246,248,.22) transparent}
.menu-inner::-webkit-scrollbar{width:6px}
.menu-inner::-webkit-scrollbar-track{background:transparent}
.menu-inner::-webkit-scrollbar-thumb{background:rgba(245,246,248,.22);border-radius:99px}
.menu-inner::-webkit-scrollbar-thumb:hover{background:rgba(245,246,248,.34)}
.menu-list{display:flex;flex-direction:column;margin-top:auto}
.menu-list a{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,58px);line-height:1.12;letter-spacing:-.032em;
  color:rgba(245,246,248,.4);padding:3px 0;width:max-content;
  opacity:0;transform:translateY(22px);
  transition:color .35s,opacity .6s var(--ease),transform .6s var(--ease)}
body.menu-open .menu-list a{opacity:1;transform:none}
/* When the container scrolls a focused item into view, leave it clear of
   the header above and the footer links below rather than flush against
   either. */
.menu-list a{scroll-margin-top:calc(var(--bar-h) + 24px);scroll-margin-bottom:32px}
/* On the narrowest phones the longest label — SHOPPABLE STREAMING — is wider
   than the column at the smallest size the type ever takes, and width:max-content
   put it outside the panel. Below 360px a label wraps instead. Nothing is
   hidden, nothing is scaled down, and no wider screen is touched: at 375px the
   same label already fits. */
@media(max-width:360px){
  .menu-list a{width:auto;max-width:100%;overflow-wrap:break-word}
}
.menu-list a:nth-child(1){transition-delay:.06s}.menu-list a:nth-child(2){transition-delay:.10s}
.menu-list a:nth-child(3){transition-delay:.14s}.menu-list a:nth-child(4){transition-delay:.18s}
.menu-list a:nth-child(5){transition-delay:.22s}.menu-list a:nth-child(6){transition-delay:.26s}
.menu-list a:nth-child(7){transition-delay:.30s}.menu-list a:nth-child(8){transition-delay:.34s}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--celest)}
/* The other half of the centring pair: list pushes down, foot pushes up,
   and between them the group sits centred until there is no room left. */
.menu-foot{margin-top:40px;margin-bottom:auto;display:flex;gap:26px;flex-wrap:wrap}
.menu-foot a{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
.menu-foot a:hover{color:var(--gold-l)}

/* ─────────── contextual cursor (desktop, fine pointer only) ─────────── */
.cur{position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  transform:translate3d(-100px,-100px,0);will-change:transform;display:none}
.cur-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-l);
  transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cur-label{position:absolute;top:0;left:0;transform:translate(-50%,-50%);
  font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--gold-l);padding:7px 12px;border-radius:99px;
  white-space:nowrap;opacity:0;scale:.7;transition:opacity .3s,scale .35s var(--ease)}
.cur.has-label .cur-dot{width:0;height:0}
.cur.has-label .cur-label{opacity:1;scale:1}
@media (hover:hover) and (pointer:fine){
  .cur{display:block}
  body.cur-on{cursor:none}
  body.cur-on a,body.cur-on button{cursor:none}
}

/* ─────────── acts ─────────── */
.act{position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;isolation:isolate}

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC ENVIRONMENT
   ───────────────────────────────────────────────────────────────────
   Two layers sit behind every act: a barely-visible radial glow that
   gives the navy depth, and a canvas of distant light points. Both are
   pointer-events:none and neither participates in layout, so nothing
   above them shifts, blocks or reflows.
   ═══════════════════════════════════════════════════════════════════ */
.act::before,.final::before{content:'';position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%,
    rgba(11,95,255,.055) 0%, rgba(8,26,53,.035) 38%, transparent 72%)}
/* the glow drifts across the page so no two acts sit in the same light */
.act:nth-of-type(even)::before{
  background:radial-gradient(105% 80% at 22% 58%,
    rgba(11,95,255,.045) 0%, rgba(6,22,46,.03) 40%, transparent 74%)}
.final::before{
  background:radial-gradient(85% 62% at 50% 50%,
    rgba(11,95,255,.075) 0%, rgba(8,26,53,.04) 42%, transparent 70%)}

.lights{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.1s var(--ease)}
.lights.lit{opacity:1}
.final .lights{z-index:2}

/* full-bleed act imagery melts into the navy rather than butting against it */
.act > .scene::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,11,24,.55) 0%,transparent 14%,
    transparent 86%,rgba(2,11,24,.6) 100%)}

@media(prefers-reduced-motion:reduce){
  .lights{transition:none}
}
.act-word{position:absolute;left:var(--rail);bottom:var(--pad-y);z-index:6;
  pointer-events:none;max-width:min(680px,72vw)}
.act-word > *{display:block}
/* an act may instead carry only a hairline label pinned to the edge */
.edge{position:absolute;left:var(--rail);top:clamp(76px,9vw,104px);z-index:6;pointer-events:none}
.edge-b{position:absolute;left:var(--rail);bottom:var(--pad-y);z-index:6;pointer-events:none}
.veil{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,16,.55) 0%,rgba(2,6,16,.14) 34%,rgba(2,6,16,.88) 100%)}

/* film grain — one element, GPU-cheap, subtle */
/* real grain: a 120px fractal-noise tile, repeated. A conic gradient
   scaled this large produces wide ribbing, not grain — don't use one. */
.grain{position:fixed;inset:-60px;z-index:130;pointer-events:none;opacity:.05;
  background-repeat:repeat;background-size:120px 120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(9px,-13px)}
  60%{transform:translate(-8px,-9px)}80%{transform:translate(13px,11px)}100%{transform:translate(0,0)}}

/* ═══ ACT 1 · STORY — the film wall ═══════════════════════════════
   Ten posters, identical size, butted edge to edge. No rotation, no
   stagger, no gutters — the artwork is the only thing on screen. The
   track is a native horizontal scroller, so trackpad, touch momentum
   and scroll-snap come from the platform; pointer drag is layered on
   top for mouse users. Above .veil so nothing washes the art out. */
.act-reel{overflow:hidden;display:block;padding:var(--pad-y) 0}
.reel{position:relative;z-index:6;width:100%;display:flex;align-items:center}
/* the line sits directly under the wall rather than pinned to the act floor */
.act-reel .act-word{position:relative;left:auto;bottom:auto;max-width:none;
  padding:var(--gap-body) var(--rail) 0}
.reel-track{display:flex;width:100%;overflow-x:auto;overflow-y:hidden;
  background:#000;                     /* any sub-pixel seam reads as black, not navy */
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;cursor:grab;outline:none}
.reel-track::-webkit-scrollbar{display:none}
.reel-track.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.reel-track:focus-visible{box-shadow:inset 0 0 0 2px var(--gold-l)}

/* every panel is the same width and the same 2:3 frame — always */
/* A card is a 2:3 poster, so its height comes from its width — and width
   alone is a poor guide to how big it will feel. At 1.35 panels a 390px
   phone gets a 433px card, half the screen; turn the same phone sideways
   and the identical rule gives a 938px card in a 390px-tall viewport, so a
   third of one poster is all anyone can see.

   So the basis is the SMALLER of two limits: how many panels should fit
   across, and how tall a poster may be before it stops being a card in a row
   and becomes the page. 68svh is the second, chosen as the highest value
   that leaves every desktop and laptop size exactly as it was — 62 clipped
   a 1200x800 window by 6% — while still catching a landscape phone and a
   tablet held upright. --fw-per carries the first limit so the breakpoints
   below set one number instead of repeating the expression. */
.fw{--fw-per:4.6;
  flex:0 0 min(calc(100% / var(--fw-per)), calc(68svh * 2 / 3));
  position:relative;display:block;aspect-ratio:2/3;
  overflow:hidden;scroll-snap-align:start;isolation:isolate;
  -webkit-user-select:none;user-select:none}
.fw img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
  display:block;-webkit-user-drag:none;
  transition:transform .8s var(--ease),filter .5s var(--ease)}
/* resting dim; neighbours deepen while another panel is held */
.fw::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(2,6,16,.30);transition:background .45s var(--ease)}
.reel-track:hover .fw::after{background:rgba(2,6,16,.62)}
.reel-track:hover .fw:hover::after,.fw:focus-visible::after{background:rgba(2,6,16,.04)}
/* ═══ THE POSTER FRAME ═════════════════════════════════════════════
   Every poster carries the same thin pearl frame — framed key art in a
   screening room, not a card. It sits inside the cell, so the artwork
   keeps its proportions and its crop is untouched. On hover the frame
   picks up the HEC ethereal family and the art lifts 1.5%. One system:
   same weight, same corners, same timing, on every film.             */
.fw::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(225,235,245,.35);
  transition:box-shadow .5s var(--ease)}
.fw:hover::before,.fw:focus-visible::before{
  box-shadow:inset 0 0 0 1px rgba(190,225,255,.62),
             inset 0 0 0 2px rgba(191,182,255,.16),
             inset 0 0 26px -12px rgba(191,182,255,.40)}
.fw:hover img,.fw:focus-visible img{transform:scale(1.015)}

/* missing key art keeps its slot — a designed tile, never a broken image */
.fw--hold{background:linear-gradient(170deg,var(--n2),var(--n0))}
.fw-hold{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  padding:0 clamp(14px,1.6vw,24px)}
.fw-hold b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.15vw,17px);line-height:1.2;letter-spacing:-.01em;
  color:var(--pearl)}
.fw-hold i{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--t3)}
.fw--hold::after{background:rgba(2,11,24,.10)}
.reel-track:hover .fw--hold::after{background:rgba(2,11,24,.42)}
.fw:focus-visible{outline:1px solid var(--gold-l);outline-offset:-1px}

/* caption lives inside the frame — there is no gutter to put it in */
.fw-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  padding:clamp(14px,1.5vw,22px);opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
  background:linear-gradient(180deg,rgba(2,6,16,0),rgba(2,6,16,.86))}
.fw:hover .fw-cap,.fw:focus-visible .fw-cap{opacity:1;transform:none}
.fw-cap h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,.95vw,14px);letter-spacing:-.005em;line-height:1.15;color:#fff}
.fw-cap span{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-l);display:inline-flex;gap:8px;margin-top:7px;
  transition:gap .35s var(--ease)}
.fw:hover .fw-cap span{gap:13px}

/* Red scroll arrows, shared by the homepage film wall and every film row
   (Our Slate, and "Other HEC Projects" on each film page). The right arrow
   is always showing while there is more to see; the left one pops in once
   the row has been scrolled, and each disappears at its end of the row. */
.reel-nav{position:absolute;top:50%;z-index:8;
  width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);border-radius:50%;
  border:0;background:var(--rail-red);cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
  opacity:1;transform:translateY(-50%) scale(1);
  transition:opacity .3s var(--ease),transform .35s var(--ease),background .25s}
.reel-nav:hover{background:var(--rail-red-h)}
.reel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.reel-nav[disabled]{opacity:0!important;transform:translateY(-50%) scale(.55);pointer-events:none}
.reel-nav.prev{left:clamp(10px,1.4vw,20px)}
.reel-nav.next{right:clamp(10px,1.4vw,20px)}
.reel-nav::before{content:'';position:absolute;inset:0;margin:auto;width:12px;height:12px;
  border-right:2.5px solid #fff;border-top:2.5px solid #fff}
.reel-nav.next::before{transform:translateX(-3px) rotate(45deg)}
.reel-nav.prev::before{transform:translateX(3px) rotate(-135deg)}
/* a gentle nudge on the right arrow until the row is first used */
.reel-nav.next.nudge::before{animation:railNudge 1.6s var(--ease) infinite}
@keyframes railNudge{0%,100%{translate:0 0}50%{translate:4px 0}}
@media(prefers-reduced-motion:reduce){
  .reel-nav{transition:opacity .2s}
  .reel-nav.next.nudge::before{animation:none}
}
/* film rows: the arrows centre on the posters (set from the script) */
.films-nav-host{position:relative}
.films-nav-host .reel-nav{top:var(--nav-y,50%)}

@media(max-width:860px){
  /* 1.35 panels, so the next film is always visibly cut by the edge */
  .fw{--fw-per:1.35}
  /* On a phone that is too much of one film. A 2:3 poster at 1.35 panels is
     433px tall on a 390 screen — half the viewport, and 1.6x the whole hero
     above it, so the wall reads as the page and the hero as its caption.
     1.85 brings a card to 316px, near enough the hero's own height to sit
     under it rather than shout over it, and shows most of the second poster
     so it is still obvious the row scrolls. Above 640 the hero is
     full-height and 1.35 is the right weight against it. */
  @media(max-width:640px){
    .fw{--fw-per:1.85}
  }
  /* smaller on phones and tablets, but always there: swiping is not
     obvious to everyone */
  .reel-nav{width:42px;height:42px}
  .reel-nav.prev{left:8px}
  .reel-nav.next{right:8px}
  .fw::after{background:rgba(2,6,16,.14)}
  .reel-track:hover .fw::after{background:rgba(2,6,16,.14)}
  .fw-cap{opacity:1;transform:none}
}
@media(min-width:861px) and (max-width:1200px){
  .fw{--fw-per:3.4}
}
@media(prefers-reduced-motion:reduce){
  .reel-track{scroll-behavior:auto}
  .fw img{transition:none}
}

/* ═══ ACT 2 · PRODUCE ═══ */
.scene{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  will-change:transform}

/* ═══ ACT 3 · LOCATIONS — cursor pans the world ═══ */
.world{position:absolute;inset:0;z-index:1;display:flex;width:400%;
  transition:transform 1.1s var(--ease);will-change:transform}
.world > div{flex:1;position:relative}
.loc-meta{position:absolute;left:var(--gut);top:clamp(90px,12vw,130px);z-index:6;
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--t2)}
.loc-meta b{display:block;color:var(--gold-l);font-weight:600;margin-top:6px}

/* ═══ ACT 4 · AUDIENCE ═══ */
.aud{position:absolute;inset:0;z-index:2}
.aud i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--blue);
  transform:translate(-50%,-50%) scale(0);opacity:0;
  box-shadow:0 0 14px 3px rgba(11,95,255,.55)}
.aud i.g{background:var(--gold-l);box-shadow:0 0 14px 3px rgba(238,196,81,.5)}
.aud.run i{animation:bloom .8s var(--ease) forwards}
@keyframes bloom{to{transform:translate(-50%,-50%) scale(1);opacity:.92}}
.counter{position:absolute;right:var(--gut);bottom:clamp(40px,7vw,88px);z-index:6;text-align:right}
.counter b{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,52px);
  line-height:.9;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.counter span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--t3);
  display:block;margin-top:10px}

/* ═══ ACT 6 · WATCH / SHOP ═══ */
.watch{position:relative;width:var(--frame-w);margin-inline:auto;z-index:4}
.frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;
  background:#000;box-shadow:0 50px 140px -50px rgba(0,0,0,1),0 0 0 1px rgba(245,246,248,.07)}
.frame .scene{transition:filter .8s var(--ease),transform 1.2s var(--ease)}
/* .watch.board — the frame holds a designed board rather than a film still:
   match the board's own ratio so nothing is cropped, and drop the overlay
   markers, since the board already carries its own cart buttons. Remove the
   class on the .watch element to bring the photo treatment and the hotspots
   back. Declared even where it agrees with .frame's default, because this is
   the line to change when a board of another shape replaces this one. */
.watch.board .frame{aspect-ratio:16/9}
.watch.board .mark{display:none}
.watch.board.shopping .frame .scene{filter:none;transform:none}
.watch.shopping .frame .scene{filter:brightness(.55) saturate(.85);transform:scale(1.03)}
/* the indicator: a breathing point of light, never called a "hotspot" */
.mark{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);z-index:6;
  display:grid;place-items:center}
.mark::before{content:'';position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--gold-l);box-shadow:0 0 12px 2px rgba(238,196,81,.6)}
.mark::after{content:'';position:absolute;inset:4px;border-radius:50%;
  border:1px solid rgba(238,196,81,.6);animation:breathe 3.2s var(--ease) infinite}
@keyframes breathe{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.mark[aria-pressed="true"]::before{background:#fff}
.tray{position:absolute;right:0;top:0;bottom:0;width:min(340px,84%);z-index:8;
  background:rgba(4,11,27,.94);backdrop-filter:blur(18px);
  border-left:1px solid var(--line);padding:26px 24px;
  transform:translateX(101%);transition:transform .7s var(--ease);
  display:flex;flex-direction:column;gap:16px}
.watch.shopping .tray{transform:none}
.tray-art{width:100%;aspect-ratio:4/3;border-radius:2px;background:var(--navy)}
.tray h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,30px);line-height:.98;letter-spacing:-.03em}
.tray .brand{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-l)}
.tray p{font-size:12.5px;color:var(--t2);line-height:1.6}
.tray a{margin-top:auto;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-l);display:inline-flex;gap:10px;align-items:center;
  border-top:1px solid var(--line);padding-top:16px}
.tray-close{position:absolute;top:16px;right:18px;font-size:18px;line-height:1;color:var(--t3)}
.tray-close:hover{color:var(--text)}
.watch-line{text-align:left;margin-top:var(--gap-body);opacity:0;
  transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.watch-line.on{opacity:1;transform:none}
/* eyebrow and sub-line, one rule for every framed section */
.sec-lab{display:block;margin-bottom:var(--gap-lab)}
.sub-line{margin-top:var(--gap-lab);letter-spacing:.3em;color:var(--brand-teal)}

/* ═══ ACT 7 · BRANDS ═══
   The board is a designed frame, not a photographic plate: it carries its own
   titles, product names and prices. It is presented whole inside a frame —
   never full-bleed behind a headline, where `cover` would crop the type. */
.board{position:relative;width:var(--frame-w);margin-inline:auto;z-index:4}
.board-frame{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:2px;
  background:#000;box-shadow:0 50px 140px -50px rgba(0,0,0,1),0 0 0 1px rgba(245,246,248,.07)}
.board-frame .scene{position:absolute;inset:0}
.bridge{position:absolute;inset:0;z-index:2;display:flex}
.bridge > div{flex:1;position:relative;overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.bridge.on > div{clip-path:inset(0 0 0 0)}
.bridge > div:nth-child(2){transition-delay:.14s}
.bridge > div:nth-child(3){transition-delay:.28s}
.bridge > div:nth-child(4){transition-delay:.42s}

/* ═══ ACT 8 · INTELLIGENCE ═══ */
/* above the veil, not under it: the act is otherwise pure black, so the
   plate is the only light in frame and must not be crushed by the scrim */
/* The image IS the section: one near-full-width plate, centred, with the line
   sitting inside its lower-left corner. 140svh caps the height so a 3:2 frame
   at 90vw still lands inside one screen instead of running past the fold. */
.intel-wrap,.aud-wrap{position:relative;z-index:6;width:var(--frame-w);margin-inline:auto}
/* .frame · .board-frame · .aud-plate · .intel-plate all share this look —
   same radius, same hairline, same shadow, only the ratio differs. */
.intel-plate,.aud-plate{position:relative;z-index:1;aspect-ratio:3/2;overflow:hidden;
  border-radius:2px;box-shadow:0 50px 140px -50px rgba(0,0,0,1),0 0 0 1px rgba(245,246,248,.07)}
.intel-plate .scene,.aud-plate .scene{position:absolute;inset:0;z-index:1}
/* readability scrim — bottom-left corner only, so the mother, the phone and
   the Maserati panel are never touched */
/* the statement moved below the plate, so the corner scrim that made it
   legible is no longer needed — the photography stays clean. */
.intel-wrap .act-word,.aud-wrap .act-word{position:relative;z-index:2;
  left:auto;bottom:auto;max-width:none;padding:var(--gap-body) 0 0}
/* the plate sets the height — no 88svh floor leaving air above and below */
/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE SECTION COMPONENT
   ───────────────────────────────────────────────────────────────────
   One structure for every act on the homepage — no act positions its
   own overlay any more:

     <section class="act hec-section">
       <div class="hec-section-image ar-*">  picture only        </div>
       <div class="hec-section-copy">        number, eyebrow, h2 </div>
     </section>

   The picture runs edge to edge with nothing on top of it; the words
   sit in the navy band directly beneath, on the page's own --rail.
   Every act shares this structure — none positions its own overlay.
   Width is 100%, never 100vw — with a classic desktop scrollbar 100vw
   is wider than the content box and would scroll the page sideways.
   ═══════════════════════════════════════════════════════════════════ */
.act.hec-section{display:block;min-height:0;padding:0;
  overflow:hidden;isolation:isolate}

/* ── the picture ──────────────────────────────────────────────────
   Full bleed: no frame, no radius, no hairline, no shadow, no gutter
   and no gap to the band below. --ar is the source file's own ratio,
   so `cover` fills the band exactly and nothing is cropped. */
.hec-section-image{position:relative;z-index:2;width:100%;max-width:none;
  margin:0;padding:0;border:0;border-radius:0;box-shadow:none;outline:0;
  overflow:hidden;aspect-ratio:var(--ar,16/9);background:var(--n0);
  font-size:0;line-height:0}          /* kills inline-image whitespace */
.hec-section-image > .scene,
.hec-section-image > .world{position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hec-section-image > .world{background:none}

.ar-hero    {--ar:16/9}
.ar-world   {--ar:16/9}
.ar-brands  {--ar:16/9}
.ar-watch   {--ar:16/9}
.ar-audience{--ar:3/2}
.ar-intel   {--ar:3/2}

/* ── the text band ────────────────────────────────────────────────
   Flush to the picture above it, the page's navy showing through, and
   every line starting on the same rail as every other line on the
   page. One padding ratio for all nine acts. */
/* above the veil and the ambient canvases — a scrim over the band was
   washing the film-wall headline out to grey */
/* The top padding used to be --gap-body because the section numeral sat
   above the headline and carried the rest of the distance. With the
   numeral gone the padding absorbs it, so every headline still lands the
   same distance under its picture as before — 60px at 1440, 44px on a
   phone — instead of jumping up against the photograph. */
.hec-section-copy{position:relative;z-index:6;
  padding:clamp(44px,4.2vw,60px) var(--rail) var(--pad-y);
  line-height:1.5}
.hec-section-copy > * + *{margin-top:var(--gap-lab)}
/* the headline stops being an overlay and becomes ordinary type */
.hec-section-copy .act-word{position:static;left:auto;bottom:auto;
  max-width:none;padding:0;pointer-events:auto}
/* the locations caption reads under its picture, not across it */
.hec-section-copy .loc-meta{position:static;left:auto;top:auto;padding:0}
.hec-section-copy .sec-lab{margin-bottom:0}
.hec-section-copy .watch-line{margin-top:var(--gap-lab)}

/* ═══════════════════════════════════════════════════════════════════
   OUR SERVICES — the rotating line inside the Film Studios act
   ───────────────────────────────────────────────────────────────────
   The act keeps its own photograph and its full-bleed band; only the
   type in the navy band below it changed. OUR SERVICES holds still and
   one service name at a time rises through it.
   The rotation is pure CSS: six names share one 15s cycle, each with a
   2.5s window and a 2.5s stagger, so a name finishes fading out at the
   exact instant the next begins — one name on screen, never two.
   ═══════════════════════════════════════════════════════════════════ */
.svc{text-align:center}
/* Two steps up the label scale and bold, so the standing label carries
   weight against the rotating line beneath it and holds its own over the
   deeper gradient now behind it.

   The scale is modular at about 1.19: .t-label is clamp(10.5px,.86vw,13px)
   and this used to be clamp(12.5px,1.02vw,15.5px), exactly one step above
   it. One more step is clamp(14.9px,1.21vw,18.4px) — 17.4px at 1440 where
   it was 14.7px. It is still a fifth the size of the rotating name it
   introduces, so it announces rather than competes.

   The weight stays 700. Inter is loaded at 300/400/600/700, so 700 is
   already the boldest real weight available; asking for 800 would get a
   synthesised face rather than a drawn one.

   The tracking comes down from .t-label's .28em to .24em. Letter-spacing
   in em grows with the type, and at this size .28em pulled the word apart
   rather than holding it together. */
.svc .svc-label{display:block;margin:0;
  font-size:clamp(14.9px,1.21vw,18.4px);font-weight:700;letter-spacing:.24em;
  /* This label sits on the photograph, not on solid navy, so its colour has
     always been chosen by measurement rather than by the palette. --t3
     measured 2.89:1 there — under the 3:1 floor even for large text — and
     white at .52 was lifted in to reach 4.80:1. The BRANDS teal is more
     luminous than that composite (relative luminance .515 against roughly
     .26), so taking the site-wide label colour here raises the ratio rather
     than lowering it, and the label keeps its place under the 72px name. */
  color:var(--brand-teal)}

/* the names stack on one another, so the band never changes height as
   they swap and nothing below it shifts */
.svc-rotator{position:relative;display:block;margin-top:var(--gap-lab);
  height:1.12em;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.25rem,5.7vw,4.5rem);line-height:1.12;letter-spacing:-.02em}
.svc-name{position:absolute;left:0;right:0;top:0;
  white-space:nowrap;opacity:0;pointer-events:none;
  animation:svcCycle 20s var(--ease) infinite}
/* a service with a page of its own is a real link; one without stays plain
   text. The only difference is the underline on hover. */
.svc-name a{text-decoration:none}
.svc-name a:hover,.svc-name a:focus-visible{
  text-decoration:underline;text-underline-offset:.14em;
  text-decoration-thickness:.045em}
/* the names wear the same ethereal ramp as every other headline. The inner
   span is inline, so its box hugs the glyphs and each name samples the same
   slice of the gradient however short it is. */
.svc-name .h2{display:inline}
.svc-name:nth-child(2){animation-delay:2.5s}
.svc-name:nth-child(3){animation-delay:5s}
.svc-name:nth-child(4){animation-delay:7.5s}
.svc-name:nth-child(5){animation-delay:10s}
.svc-name:nth-child(6){animation-delay:12.5s}
.svc-name:nth-child(7){animation-delay:15s}
.svc-name:nth-child(8){animation-delay:17.5s}

@keyframes svcCycle{
  0%      {opacity:0;transform:translateY(.42em);pointer-events:none}
  2.25%   {opacity:1;transform:translateY(0);pointer-events:auto}
  10.275% {opacity:1;transform:translateY(0);pointer-events:auto}
  12.5%   {opacity:0;transform:translateY(-.42em);pointer-events:none}
  100%    {opacity:0;transform:translateY(-.42em);pointer-events:none}
}

/* Motion sensitivity.

   This block used to redefine svcCycle so the names cross-faded in place
   rather than travelling. It never ran. The site-wide reduced-motion reset
   near the end of this file sets animation-duration:.01ms!important on
   everything, so svcCycle completed instantly and settled on its 100% frame
   — which is opacity:0. Every name was invisible, and the section read
   OUR SERVICES over an empty line for exactly the people least able to
   afford a puzzle.

   So there is no animation here now. The first service is simply shown: a
   plain, stable, focusable link in the same face, size, colour, alignment
   and position the animated state uses, painted on first render with no
   fade of any kind. The other seven are taken out of the layout with
   visibility:hidden rather than opacity:0, so they leave behind no
   invisible tab stops and nothing for a screen reader to read twice. Every
   service is still one tap away in the primary navigation.

   Scoped to the rotator. The site-wide reset below is untouched. */
@media(prefers-reduced-motion:reduce){
  .svc-name{animation:none;transform:none;
    opacity:0;visibility:hidden;pointer-events:none}
  .svc-name:first-child{opacity:1;visibility:visible;pointer-events:auto}
}
/* the padding above sets the distance to the picture — nothing in the band
   adds to it, so every headline starts level whatever opens the band */
.hec-section-copy > *:first-child{margin-top:0}

/* ═══════════════════════════════════════════════════════════════════
   THE HERO HANDS OVER TO THE SERVICES BAND
   ───────────────────────────────────────────────────────────────────
   The rotating line used to begin exactly where the photograph ended,
   on a hard horizontal edge, and the two read as two stacked blocks.
   Now the type climbs into the bottom of the frame and the navy comes
   up to meet it, so the handover reads as one composition.

   Two numbers, both responsive, both declared on the section so the
   overlap and the fade can never drift apart:

     --hero-overlap  how far the type climbs into the photograph, so the
                     rotating name rests just above the line where the
                     plate gives way to the solid navy. 12vw + 42px lands
                     on the targets across the whole range — 215px at
                     1440, 165 at 1024, 134 at 768, 89 on a 390 phone —
                     with no per-device breakpoint.
     --hero-fade     how deep the navy reaches up to receive it. Always
                     taller than the overlap, because type sitting on
                     the transparent leading edge of a gradient is type
                     on a photograph, which is the thing this replaces.
                     1.74x keeps roughly 160px of settled gradient above
                     the eyebrow at 1440 — the headroom that lets the
                     longest name read at any point in its cycle.

   The overlap is a negative margin on the copy, so it also shortens the
   section: everything below rises with it and no gap opens underneath.
   The film wall therefore keeps the section gap it was given and is not
   moved independently.
   ═══════════════════════════════════════════════════════════════════ */
#actHero{
  --hero-overlap:clamp(88px, 12vw + 42px, 218px);
  --hero-fade:calc(var(--hero-overlap) * 1.74)}
#actHero .hec-section-copy.svc{margin-top:calc(-1 * var(--hero-overlap))}

/* The gradient. A presentation layer and nothing else: no box in the
   document, nothing in the accessibility tree, and pointer-events:none,
   so the photograph beneath it and the links above it both behave
   exactly as they did before.

   It lives inside .hec-section-image, which is z-index 2, so it paints
   over the plate and under .hec-section-copy at z-index 6 — the order
   the brief asks for, without introducing a third stacking context.

   Seven stops rather than two. Two would be a linear ramp, and a linear
   ramp across 300px of near-black is exactly where 8-bit banding shows;
   easing the middle keeps every step under one level. The colours are
   --n0 (#020B18) at rising alpha — the same navy the band below is
   painted in, so the two meet with no seam.

   Anchored to the bottom of the plate and sized only by its own custom
   property, so it follows whatever photograph the Control Center puts
   here later. */
#actHero .hec-section-image::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:var(--hero-fade);pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,
    rgba(2,11,24,0)     0%,
    rgba(2,11,24,.10)  16%,
    rgba(2,11,24,.28)  33%,
    rgba(2,11,24,.52)  50%,
    rgba(2,11,24,.74)  66%,
    rgba(2,11,24,.90)  80%,
    rgba(2,11,24,.975) 91%,
    rgba(2,11,24,1)   100%)}

/* The film wall no longer opens the page — Stephanie does — so it drops the
   top padding that used to clear the header and sits flush against the band
   above it, the same way every other act meets its neighbour. */
.act.act-reel{padding:0}
.act-reel .hec-section-copy{padding-top:var(--gap-body)}

/* ── act 07 · the shoppable frame ─────────────────────────────────
   #watch still wraps the frame so the tray and the shopping state work
   unchanged; it just no longer draws a frame of its own. */
.watch{position:static;width:100%;max-width:none;margin:0;padding:0}
.watch .frame{border:0;border-radius:0;box-shadow:none;background:var(--n0)}

/* ── the closing statement ────────────────────────────────────────
   No photograph to bleed, so only the alignment rule applies: its type
   starts on the same rail as every act above it. */
section.final{place-items:center start}
.final .final-in{width:100%;text-align:left;padding:0 var(--rail)}
.final .final-in .h2{margin-inline:0}
.final .final-in p{margin-inline:0}
/* under 700px the plate is too short to carry the line without covering the
   phone, so the line drops below the image the way every other act stacks */

.intel-plate .scene{position:absolute;inset:0}
.signals{position:absolute;inset:0;z-index:2}
.signals svg{width:100%;height:100%}
.signals path{fill:none;stroke:rgba(11,95,255,.5);stroke-width:1;
  stroke-dasharray:5 220;stroke-dashoffset:0}
.signals.run path{animation:trace 3.4s linear infinite}
@keyframes trace{to{stroke-dashoffset:-450}}

/* ═══ FINAL ═══ */
.final{min-height:100svh;display:grid;place-items:center;position:relative;
  background:linear-gradient(180deg,var(--n0) 0%,var(--n2) 55%,var(--n3) 100%)}
.frags{position:absolute;inset:0;z-index:1;display:grid;
  grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);opacity:.13}
.frags span{background-size:cover;background-position:center;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease)}
.frags.on span{clip-path:inset(0 0 0 0)}
.frags.on span:nth-child(2){transition-delay:.07s}.frags.on span:nth-child(3){transition-delay:.14s}
.frags.on span:nth-child(4){transition-delay:.21s}.frags.on span:nth-child(5){transition-delay:.28s}
.frags.on span:nth-child(6){transition-delay:.35s}.frags.on span:nth-child(7){transition-delay:.42s}
.frags.on span:nth-child(8){transition-delay:.49s}.frags.on span:nth-child(9){transition-delay:.56s}
.frags.on span:nth-child(10){transition-delay:.63s}
.final-in{position:relative;z-index:3;text-align:center;padding:0 var(--gut)}
.final-in p+p{margin-top:clamp(6px,1vw,14px)}
.final-in p{opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.final-in p.on{opacity:1;transform:none}
/* ═══ BUTTONS — two styles only ════════════════════════════════════
   .enter  = secondary, an outline that fills gold on hover
   .cta-line = primary, solid gold
   Same height, padding, radius, type and rhythm; only the fill differs. */
.enter,.cta-line{display:inline-flex;align-items:center;gap:14px;
  margin-top:var(--gap-cta);
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  padding:17px 32px;border-radius:99px;border:1px solid var(--line);
  transition:gap .4s var(--ease),border-color .4s,background .4s,color .4s,filter .3s}
.enter:hover{gap:20px;border-color:var(--gold-l);background:var(--gold-l);color:var(--ink)}

/* end rail — the only navigation-ish block, deliberately quiet */
.tail{padding:clamp(52px,7vw,90px) var(--gut);display:flex;flex-wrap:wrap;gap:26px 40px;
  justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
  background:var(--page)}
.tail nav{display:flex;flex-wrap:wrap;gap:22px}
.tail a{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3)}
.tail a:hover{color:var(--gold-l)}
.tail small{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--t3)}

/* ─────────── reveal ─────────── */
[data-in]{opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-in].on{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-in],.final-in p,.watch-line{opacity:1;transform:none}
  .frags span,.bridge > div{clip-path:none}
  .cold{display:none}
  .grain{display:none}
  .cur{display:none!important}
  body.cur-on{cursor:auto}
}

/* plate textures still referenced by the menu backdrop and the product tray */

/* ── restraint pass: labels that live on the visuals ────────────── */
.bridge > div{display:grid;place-items:end start}
.bridge > div span{position:relative;z-index:3;padding:0 0 clamp(26px,3.4vw,44px) clamp(16px,2vw,28px);
  color:var(--t2)}
.bridge > div:nth-child(4) span{color:var(--gold-l)}
/* these two used to dim their labels to --t3; they take the same teal as
   every other label now, so the language is uniform wherever it appears */
.act-word .t-mid,.act-word .t-major{text-wrap:balance}
.loc-meta{font-size:clamp(10px,.8vw,12px);letter-spacing:.26em}

/* tighter rhythm now that the type is smaller — no cavities left behind */
/* ── SECTION ARCHETYPES ───────────────────────────────────────────
   A · simple cinematic  — full-bleed photograph, headline overlaid.
       A fixed cinematic height; 88svh was leaving dead air, 82 does not.
   B · narrative         — framed media with the headline beneath it.
       Content-driven: forcing these to a viewport height is what made
       the page uneven. They set their own height from the media.
   C · crescendo         — the final ecosystem statement only.        */
.act{min-height:clamp(540px,82svh,860px)}                    /* A */
.act.act-reel{min-height:auto}                               /* B */
.final{min-height:clamp(560px,92svh,940px)}

@media(max-width:860px){
  /* one padding value on mobile too, and the full-bleed photographic acts
     keep a real height — an absolutely-positioned scene contributes none,
     so without this they collapsed to a thin letterbox. */
  .act{min-height:clamp(430px,62svh,640px);padding:var(--pad-y) 0}
  .act-reel{min-height:auto}

  /* ── MOBILE HERO ──────────────────────────────────────────────────
     On a phone the first section fills exactly one screen on load and
     not a pixel more, so nothing from the section beneath it peeks in
     before the visitor scrolls. 100dvh is the small-to-large dynamic
     height iOS Safari reports as its chrome collapses; svh is the
     fallback for engines without dvh, and both subtract the header so
     the hero ends flush with the fold rather than running past it.
     The section is a column: the picture takes whatever is left after
     the type band, and `cover` keeps it full bleed and centred.
     Written against :first-child rather than a named act so it follows
     whichever section leads the page. Desktop is untouched. */
  main.home > section:first-child{
    height:calc(100svh - var(--bar-h));
    height:calc(100dvh - var(--bar-h));
    min-height:0;padding:0;overflow:hidden;
    display:flex;flex-direction:column;align-items:stretch}
  main.home > section:first-child .hec-section-image{
    flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto}
  main.home > section:first-child .hec-section-image > .scene{
    background-size:cover;background-position:center}
  main.home > section:first-child .hec-section-copy{flex:0 0 auto}
  /* the film wall, when it is the one leading the page */
  main.home > section:first-child .reel{flex:1 1 auto;min-height:0;
    align-items:center;overflow:hidden}
  /* a shorter band on a phone, still solid navy and still reserved by main */
  :root{--bar-h:60px}
  /* the mark comes down with the band it sits in */
  .bar-mark{--mark-h:36px}

  /* Same sequence on a phone: picture, band, picture. The hero is the one
     exception now — its rotating line rises into the bottom of the plate the
     way it does on desktop, on the same gradient, which is why the override
     below is scoped to it alone. */
  .hec-section-copy{padding:var(--gap-body) var(--gut) var(--pad-y)}
  /* The hero is a fixed-height flex column here, so the negative margin does
     not shorten the section — the plate grows into the space the copy gives
     back and nothing below the hero moves. The band's top padding shrinks
     too: on a phone that padding is most of the overlap, and without this
     the eyebrow climbs but the gap above it climbs with it, so nothing
     appears to have happened. */
  #actHero .hec-section-copy.svc{padding-top:var(--gap-lab)}
  .final .final-in{padding:0 var(--gut)}
  /* At 320 the closing line's longest unbreakable run measures 286px of
     44px type, and .final-in is a flex item with min-width:auto, so it
     cannot shrink below that run plus its own 18px gutters — 322px in a
     320px viewport. The page then reports 2px of horizontal overflow that
     it will not actually scroll to.

     Trimming the gutter on the narrowest phones is the whole correction:
     nothing is hidden, no type changes size, no other element moves, and
     at 330px — where it already fits with room to spare — the rule does
     not apply. Measured: 286 + 28 = 314px inside 320. */
  @media (max-width:344px){
    .final .final-in{padding-inline:14px}
  }
  /* the full-bleed acts keep their overlaid headline on mobile too: letting
     it flow left the image filling the section and 200px of dead navy
     beneath the words. The framed sections override this themselves. */
  .act-word{max-width:none}
  .edge,.edge-b{position:relative;left:auto;top:auto;bottom:auto;padding:0 var(--gut) 18px}
  .counter{position:relative;right:auto;bottom:auto;text-align:left;padding:24px var(--gut) 0}
  .loc-meta{position:relative;left:auto;top:auto;padding:0 var(--gut) 16px}
  .act[id="actAudience"]{display:block}
}

/* ═══════════════════════════════════════════════════════════════════
   INTERIOR PAGES
   ───────────────────────────────────────────────────────────────────
   Same tokens, same chrome, same tiers as the homepage. There is no
   second design system — an interior page is simply a page that shows
   more after the entrance.
   ═══════════════════════════════════════════════════════════════════ */

.wrap{max-width:var(--max,1500px);margin-inline:auto;padding-inline:var(--gut)}

/* restrained entrance — never a second hero */
.entrance{padding:clamp(112px,15vh,168px) 0 clamp(30px,4vw,52px)}
.entrance .t-label{display:block;margin-bottom:clamp(14px,1.8vw,22px)}
/* standalone tier — used by interior entrances and property pages alike */
.t-page{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.875rem,3.5vw,3.5rem);line-height:1.0;letter-spacing:-.03em}
.entrance .t-page{max-width:18ch}
.entrance .t-body{margin-top:clamp(16px,2vw,26px)}

/* full-bleed plate: the image does the work */
.bleed{position:relative;width:100%;height:clamp(320px,52vh,620px);overflow:hidden}
.bleed .scene,.bleed .plate-media{position:absolute;inset:0}
.bleed::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,6,16,.30),rgba(2,6,16,.10) 40%,rgba(2,6,16,.85))}
.bleed .t-label{position:absolute;left:var(--gut);bottom:clamp(20px,3vw,34px);z-index:3}
/* Some plates carry type inside the artwork and must not be cropped by
   `cover`. --ar is the image's own ratio; width is capped against the viewport
   height so the plate stays dominant without running past the fold. */
.bleed--fit{height:auto;aspect-ratio:var(--ar,3/2);width:min(100%,175svh);margin-inline:auto}
.bleed--fit::after{background:linear-gradient(180deg,rgba(2,6,16,0) 58%,rgba(2,6,16,.55))}
/* ═══ EDITORIAL PAGES — PRODUCTIONS & STUDIOS ═════════════════════
   Shared furniture for the two long-form pages, built on the interior-
   page primitives rather than beside them: .bleed already carries the
   scrim these overlays sit on, and every type size below is an existing
   tier. Both pages use the same rhythm so they read as sister pages. */

/* the hero picture runs taller than a mid-page band, without ever
   pushing the words that follow off the first screen */
.bleed--hero{height:clamp(300px,64svh,720px)}

/* a short line laid over a picture, on the same rail as everything else */
.bleed-over{position:absolute;left:var(--gut);right:var(--gut);
  bottom:clamp(26px,4vw,52px);z-index:3;
  color:var(--text);max-width:22ch;text-wrap:balance}
/* `.bleed .t-label` pins any label to the corner of the band. Inside an
   overlay the label belongs in the flow with the lines above it, or it
   lands on top of them. */
.bleed-over .t-label{position:static;left:auto;bottom:auto}
.bleed-over--close{max-width:min(46ch,100%);bottom:clamp(30px,5vw,64px)}
.bleed-over--close .t-body{margin-top:clamp(14px,1.8vw,22px);color:rgba(245,246,248,.82)}
.bleed-over--close .t-label{display:block;margin-top:clamp(16px,2vw,24px)}
/* The closing frame carries three lines of type, not one, and they land
   across the lit half of the picture — so its scrim starts earlier and
   ends heavier than a standard band's. It also runs taller to give the
   statement somewhere to sit. */
.bleed--close{height:clamp(400px,62svh,700px)}
/* .scene carries z-index:1 from the homepage rule at the top of this file,
   so a .bleed scrim with z-index:auto paints UNDER the photograph and does
   nothing. That went unnoticed while every closing frame happened to be dark
   at the foot. A daylight interior makes it obvious: the three lines of type
   sit on a pale sofa. z-index 2 puts the scrim back where it was authored to
   be — over the picture, under the type, which is z-index 3. */
.bleed--close::after{z-index:2;background:linear-gradient(180deg,
  rgba(2,11,24,.28) 0%, rgba(2,11,24,.52) 34%,
  rgba(2,11,24,.86) 66%, rgba(2,11,24,.95) 100%)}

/* paragraphs stay narrow; the heading above them may run wider */
.prose{margin-top:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;
  gap:clamp(14px,1.6vw,20px)}

/* ten capabilities as plain lines. Two columns where there is room, one
   where there is not — no cards, no icons, no bullets. */
.caps-lab{display:block;margin-top:clamp(34px,4.4vw,60px);
  margin-bottom:clamp(14px,1.8vw,22px)}
.caps{list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(28px,4vw,64px);max-width:74ch}
.caps li{break-inside:avoid;padding:11px 0;border-top:1px solid var(--line);
  font-size:clamp(.9375rem,1.05vw,1.0625rem);color:var(--t2)}

/* a single statement given room to land */
.stmt{margin-top:clamp(34px,4.4vw,60px);color:var(--text);max-width:20ch}

@media(max-width:640px){
  /* one column, and the overlay lines get the full width they need so a
     long heading never clips against the right edge */
  .caps{columns:1}
  .bleed-over{max-width:none}
  .stmt{max-width:none}
}

/* a plate whose own artwork occupies the corner keeps its caption below it */
.plate-note{display:block;color:var(--t3);padding:clamp(12px,1.4vw,18px) var(--gut) 0}
/* the closing statement — homepage headline voice, no new tier */
.close-line{max-width:34ch}

/* stages: show first, explain on demand */
.stages{border-top:1px solid var(--line)}
.stage{border-bottom:1px solid var(--line)}
.stage summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:clamp(14px,2.4vw,40px);
  padding:clamp(20px,2.6vw,34px) 0;transition:color .3s}
.stage summary::-webkit-details-marker{display:none}
.stage summary:hover{color:var(--gold-l)}
.stage summary i{font-style:normal;font-size:10.5px;letter-spacing:.26em;color:var(--t3);flex:none;width:3ch}
.stage summary b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.625rem,2.3vw,2.375rem);line-height:1.02;letter-spacing:-.022em;flex:1}
.stage summary em{font-style:normal;font-size:18px;color:var(--t3);transition:transform .35s var(--ease)}
.stage[open] summary em{transform:rotate(45deg)}
.stage-body{padding:0 0 clamp(24px,3vw,38px) calc(3ch + clamp(14px,2.4vw,40px))}
.stage-body p{font-size:clamp(1rem,1.1vw,1.125rem);color:var(--t2);line-height:1.62;max-width:58ch}

/* quiet content rows — replaces the old card grid entirely */
.rows{border-top:1px solid var(--line)}
.row{display:grid;gap:6px clamp(20px,3vw,52px);padding:clamp(18px,2.2vw,28px) 0;
  border-bottom:1px solid var(--line)}
@media(min-width:820px){.row{grid-template-columns:minmax(0,15ch) minmax(0,1fr)}}
.row dt{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--t3);padding-top:5px}
.row dd{margin:0;font-size:clamp(1rem,1.1vw,1.125rem);color:var(--t2);line-height:1.62;max-width:58ch}

/* film gallery + people, retiered to the global scale */
.films{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gut) 22px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.films::-webkit-scrollbar{display:none}
.film{flex:0 0 clamp(216px,23vw,320px);scroll-snap-align:start}
.film .frame{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line);
  background:var(--navy);transition:border-color .45s}
.film:hover .frame{border-color:rgba(201,162,39,.4)}
.film .frame::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 62%,rgba(2,6,16,.5));
  opacity:0;transition:opacity .6s}
.film:hover .frame::after{opacity:1}
.film-meta{padding:14px 2px 0}
.film-meta h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9rem,1.05vw,1.05rem);line-height:1.08;letter-spacing:-.01em}
.film-sub{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-top:7px}
.film-sub b{color:var(--gold-l);font-weight:600}
.poster-art{position:absolute;inset:0;z-index:1;background-size:contain;background-repeat:no-repeat;
  background-position:center;transition:transform 1.1s var(--ease)}
.poster-art.blur{background-size:cover;filter:blur(26px) saturate(.7) brightness(.45);
  transform:scale(1.16);z-index:0}
.film:hover .poster-art:not(.blur){transform:scale(1.035)}

/* ═══════════════════════════════════════════════════════════════════
   LEADERSHIP — the editorial spread
   ───────────────────────────────────────────────────────────────────
   One profile component, alternating left/right. The portrait is
   sticky so it holds while the biography scrolls past it, which is
   what gives each person their own moment without a card in sight.
   ═══════════════════════════════════════════════════════════════════ */
.people{margin-top:clamp(30px,4vw,58px)}
.lp{position:relative;padding:clamp(46px,6vw,96px) 0;border-top:1px solid var(--line)}
.lp:first-child{border-top:0;padding-top:clamp(20px,2.4vw,36px)}
/* a gold rule draws itself in as the profile arrives */
.lp::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold-l),rgba(238,196,81,0));
  transition:width 1.5s var(--ease)}
.lp.in::before{width:min(320px,38%)}
.lp:first-child::before{display:none}

.lp-fig{position:relative}
@media(min-width:900px){
  .lp{display:grid;gap:clamp(34px,5vw,86px);align-items:start;
    grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
  .lp:nth-child(even) .lp-fig{order:2}
  /* the portrait holds while the biography scrolls past it */
  .lp-fig{position:sticky;top:clamp(92px,12vh,132px)}
}
.lp-frame{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/5;
  box-shadow:0 40px 110px -40px rgba(0,0,0,1),0 0 0 1px rgba(245,246,248,.08)}
.lp-img{position:absolute;inset:0;background-size:cover;background-position:center top;
  transform:scale(1.06);opacity:0;
  transition:transform 1.6s var(--ease),opacity 1.1s var(--ease)}
.lp.in .lp-img{transform:none;opacity:1}
/* portraits are the one place on this site that is allowed to be brighter */
.lp-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,16,0) 52%,rgba(2,6,16,.55))}

/* no real headshot yet — a marked frame, never a generated face */
.lp-img--pending{filter:grayscale(1) brightness(.34) contrast(1.05)}
.lp-pending{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  white-space:nowrap;font-size:9.5px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--t2);
  padding:11px 18px;border:1px solid var(--line);border-radius:99px;
  background:rgba(2,6,16,.55)}

/* the name set vertically down the outside edge of the frame */
.lp-vert{display:none}
@media(min-width:1180px){
  .lp-vert{display:block;position:absolute;top:0;right:calc(100% + 16px);
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:11px;letter-spacing:.3em;color:var(--t3);white-space:nowrap}
  .lp:nth-child(even) .lp-vert{right:auto;left:calc(100% + 16px);
    transform:none;writing-mode:vertical-rl}
}

.lp-body{max-width:60ch}
/* the name is the first thing in the card now that the numbering is gone,
   so it starts flush with the top of the portrait beside it */
.lp-body > :first-child{margin-top:0}
.lp-name{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,2.6vw,2.75rem);line-height:1.02;letter-spacing:-.028em;
  margin-top:clamp(12px,1.4vw,18px)}
.lp-title{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-l);margin-top:clamp(10px,1.1vw,14px)}
/* the biography gets real room: 17–19px, open leading, no fixed height */
.lp-bio{margin-top:clamp(20px,2.2vw,30px)}
.lp-bio p{font-size:clamp(1.0625rem,1.15vw,1.1875rem);line-height:1.72;color:var(--t2);
  max-width:58ch}
.lp-bio p + p{margin-top:1.05em}
.lp-credits{margin-top:clamp(18px,2vw,26px);font-size:12.5px;letter-spacing:.02em;
  color:var(--t3);line-height:1.7;max-width:58ch}
.lp-credits span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--t3);margin-bottom:7px;opacity:.8}
.lp-in{display:inline-flex;align-items:baseline;gap:9px;margin-top:clamp(20px,2.2vw,28px);
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text);border-bottom:1px solid rgba(238,196,81,.42);padding-bottom:6px;
  transition:color .3s,border-color .3s,gap .35s var(--ease)}
.lp-in:hover{color:var(--gold-l);border-color:var(--gold-l);gap:15px}

@media(max-width:899px){
  .lp-frame{aspect-ratio:4/5;max-width:520px}
  .lp-body{margin-top:clamp(22px,4vw,34px);max-width:none}
}

/* ═══ the five businesses, as a line rather than a grid ═══ */
.eco{position:relative;overflow:hidden;padding:clamp(26px,3vw,42px) 0;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.eco-track{display:flex;width:max-content;animation:ecoRun 54s linear infinite}
.eco:hover .eco-track{animation-play-state:paused}
.eco-track span{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.125rem,2.1vw,1.875rem);letter-spacing:-.02em;color:var(--t2)}
.eco-track span::after{content:'';display:inline-block;width:9px;height:9px;
  margin:0 clamp(22px,3vw,48px);border-radius:50%;background:var(--gold-l);opacity:.55}
@keyframes ecoRun{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .eco-track{animation:none}
  .eco{-webkit-mask-image:none;mask-image:none}
  .lp-img{opacity:1;transform:none}
  .lp::before{transition:none}
}

/* ═══ closing contact ═══ */
.audiences{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,40px);
  margin-top:clamp(24px,3vw,40px)}
.audiences li{list-style:none;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--t3)}
.cta-line{color:var(--ink);background:var(--gold-l);border-color:var(--gold-l)}
.cta-line:hover{gap:20px;filter:brightness(1.08)}

/* locations browser (interior only — never on the homepage) */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
.filters button{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line);border-radius:99px;color:var(--t3);transition:all .3s}
.filters button:hover{color:var(--text);border-color:rgba(201,162,39,.4)}
.filters button[aria-pressed="true"]{background:var(--gold-l);color:var(--ink);
  border-color:var(--gold-l);font-weight:700}
/* A category with nothing published under it is taken out of the bar by the
   renderer rather than left to empty the grid on a click. */
.filters button[hidden]{display:none}
.loc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.loc{border:1px solid var(--line);background:#040B1B;overflow:hidden;transition:border-color .4s}
.loc:hover{border-color:rgba(201,162,39,.4)}
.loc .plate{position:relative;aspect-ratio:16/10;overflow:hidden}
.loc-b{padding:18px}
/* ── coming soon ──────────────────────────────────────────────────────────
   A corner flag, flush to the card's own corner so it reads as part of the
   card rather than as a sticker placed on the photograph. Gold on the site's
   deepest ink: the plate underneath is a photograph and can be any colour, so
   the badge brings its own ground rather than trusting the one behind it. */
.loc-soon{position:absolute;top:0;left:0;z-index:2;
  padding:8px clamp(10px,1.1vw,14px);
  font-family:var(--body);font-weight:800;
  font-size:clamp(9.5px,.78vw,11px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-l);background:rgba(2,11,24,.86);
  border-right:1px solid rgba(238,196,81,.34);
  border-bottom:1px solid rgba(238,196,81,.34)}
.loc-b h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.2vw,1.15rem);letter-spacing:-.012em}
.loc-cat{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);margin:5px 0 13px}
.loc dl{display:grid;grid-template-columns:auto 1fr;gap:5px 13px;margin:0;font-size:11.5px}
.loc dt{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);align-self:center}
.loc dd{margin:0;color:var(--t2)}
.loc[hidden]{display:none}

.tlink{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);padding-bottom:6px;
  border-bottom:1px solid rgba(201,162,39,.3);transition:gap .35s var(--ease)}
.tlink:hover{gap:15px}
.sec{padding:clamp(46px,6vw,86px) 0}
.sec--flush{padding-top:0}

/* page transition — moving deeper, never a white flash */
.fade{position:fixed;inset:0;z-index:240;background:var(--page);pointer-events:none;
  opacity:0;transition:opacity .42s var(--ease)}
.fade.on{opacity:1;pointer-events:auto}

/* a supplied photograph sits over its fallback plate */
.photo{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  transition:transform 1.1s var(--ease)}
.loc:hover .photo,.person:hover .photo{transform:scale(1.04)}
.tray-art,.sitem-img{position:relative;overflow:hidden}





/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC ASSETS
   ───────────────────────────────────────────────────────────────────
   24 panels extracted from the supplied HEC sheets. WebP first with a
   JPG fallback. Real film key art is never replaced by these — the
   constellation and every gallery stay on the posters.
   ═══════════════════════════════════════════════════════════════════ */
.sc-produce,
.sc-hero,
.sc-watch,
.sc-props,
.sc-family,
.sc-audience,
.im-brandstage,
.im-auctions,
.im-command,
.pm-studios,
.pm-stream,
.pm-locations,
.pm-launch,
.pm-brands,
.pm-intel,
.pm-people,
.w1,
.w2,
.w3,
.w4,
.b1,
.b2,
.b3,
.b4,
.im-backlot,
.im-monument,
.im-villa,
.im-premiere,
.im-console,
.im-os,
.im-globe,
.im-desk,
.im-scene,
.vs-future,
.vs-collab{background-size:cover;background-position:center;background-repeat:no-repeat}
.sc-produce{background-image:image-set(url("../img/cinematic/hec-production-camera-crew.webp") type("image/webp"),url("../img/cinematic/hec-production-camera-crew.jpg") type("image/jpeg"))}
/* the hero photograph. .sc-produce is the menu's STUDIOS swatch and stays on
   its own artwork, so repainting the hero never touches the menu. */
.sc-hero{background-image:image-set(url("../img/cinematic/hec-production-hangar-stage.webp") type("image/webp"),url("../img/cinematic/hec-production-hangar-stage.jpg") type("image/jpeg"))}
.sc-watch{background-image:image-set(url("../img/cinematic/hec-connected-entertainment-2026b.webp") type("image/webp"),url("../img/cinematic/hec-connected-entertainment-2026b.jpg") type("image/jpeg"))}
.sc-props{background-image:image-set(url("../img/cinematic/hec-brand-ethan-almighty-pet-store.webp") type("image/webp"),url("../img/cinematic/hec-brand-ethan-almighty-pet-store.jpg") type("image/jpeg"))}
.sc-family{background-image:image-set(url("../img/cinematic/hec-launch-network-family-2026d.webp") type("image/webp"),url("../img/cinematic/hec-launch-network-family-2026d.jpg") type("image/jpeg"))}
.sc-audience{background-image:image-set(url("../img/cinematic/hec-launch-network-dashboard-2026d.webp") type("image/webp"),url("../img/cinematic/hec-launch-network-dashboard-2026d.jpg") type("image/jpeg"))}
.im-brandstage{background-image:image-set(url("../img/cinematic/hec-brand-development-stage.webp") type("image/webp"),url("../img/cinematic/hec-brand-development-stage.jpg") type("image/jpeg"))}
.im-auctions{background-image:image-set(url("../img/cinematic/hec-shoppable-streaming-auctions.webp") type("image/webp"),url("../img/cinematic/hec-shoppable-streaming-auctions.jpg") type("image/jpeg"))}
.im-command{background-image:image-set(url("../img/cinematic/hec-launch-network-command-centre.webp") type("image/webp"),url("../img/cinematic/hec-launch-network-command-centre.jpg") type("image/jpeg"))}
.pm-studios{background-image:image-set(url("../img/cinematic/hec-soundstage-dolly-track.webp") type("image/webp"),url("../img/cinematic/hec-soundstage-dolly-track.jpg") type("image/jpeg"))}
.pm-stream{background-image:image-set(url("../img/cinematic/hec-streaming-shop-the-scene.webp") type("image/webp"),url("../img/cinematic/hec-streaming-shop-the-scene.jpg") type("image/jpeg"))}
.pm-locations{background-image:image-set(url("../img/cinematic/hec-location-arizona-desert.webp") type("image/webp"),url("../img/cinematic/hec-location-arizona-desert.jpg") type("image/jpeg"))}
.pm-launch{background-image:image-set(url("../img/cinematic/hec-premiere-marquee-crowd.webp") type("image/webp"),url("../img/cinematic/hec-premiere-marquee-crowd.jpg") type("image/jpeg"))}
.pm-brands{background-image:image-set(url("../img/cinematic/hec-brand-products-integrated.webp") type("image/webp"),url("../img/cinematic/hec-brand-products-integrated.jpg") type("image/jpeg"))}
.pm-intel{background-image:image-set(url("../img/cinematic/hec-director-monitor.webp") type("image/webp"),url("../img/cinematic/hec-director-monitor.jpg") type("image/jpeg"))}
.pm-people{background-image:image-set(url("../img/cinematic/hec-partnership-studio-lot.webp") type("image/webp"),url("../img/cinematic/hec-partnership-studio-lot.jpg") type("image/jpeg"))}
.w1{background-image:image-set(url("../img/cinematic/hec-location-dallas-ranch.webp") type("image/webp"),url("../img/cinematic/hec-location-dallas-ranch.jpg") type("image/jpeg"))}
.w2{background-image:image-set(url("../img/cinematic/hec-estate-paradise-valley.webp") type("image/webp"),url("../img/cinematic/hec-estate-paradise-valley.jpg") type("image/jpeg"))}
.w3{background-image:image-set(url("../img/cinematic/hec-location-hollywood-mansion.webp") type("image/webp"),url("../img/cinematic/hec-location-hollywood-mansion.jpg") type("image/jpeg"))}
.w4{background-image:image-set(url("../img/cinematic/hec-location-miami-waterfront.webp") type("image/webp"),url("../img/cinematic/hec-location-miami-waterfront.jpg") type("image/jpeg"))}
.b1{background-image:image-set(url("../img/cinematic/hec-director-western-street-2026.webp") type("image/webp"),url("../img/cinematic/hec-director-western-street-2026.jpg") type("image/jpeg"))}
.b2{background-image:image-set(url("../img/cinematic/hec-brand-products-coastal.webp") type("image/webp"),url("../img/cinematic/hec-brand-products-coastal.jpg") type("image/jpeg"))}
.b3{background-image:image-set(url("../img/cinematic/hec-lifestyle-luxury-fleet.webp") type("image/webp"),url("../img/cinematic/hec-lifestyle-luxury-fleet.jpg") type("image/jpeg"))}
.b4{background-image:image-set(url("../img/cinematic/hec-brand-products-integrated.webp") type("image/webp"),url("../img/cinematic/hec-brand-products-integrated.jpg") type("image/jpeg"))}
/* ── VISION ──────────────────────────────────────────────────────
   The hero band and the collaboration band, supplied as photographs
   and delivered the way every other plate here is: WebP first at the
   full frame, with a JPEG fallback for the browsers that need one.

     hero    2880×1440  2:1  — matches .cine--scope
     middle  2160×1440  3:2  — matches .cine--full                  */
/* ── the ambient loop over a cinematic band ──────────────────────
   The video sits on top of the .scene it shares a band with, at the
   same size and with the same cover framing, so the two are the same
   picture and the loop simply takes over from the still. The band
   already clips, so nothing here needs to.

   It is decorative and inert: no pointer target, no focus stop, no
   controls — the file carries no audio track, so there is nothing a
   visitor would need to switch off. Under reduced motion the script
   removes the element outright rather than hiding it, so the still is
   what remains and the file is never fetched. */
.scene-video{position:absolute;inset:0;z-index:2;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center;
  pointer-events:none;border:0;background:transparent}

.vs-future{background-image:image-set(url("../img/cinematic/hec-vision-future-of-entertainment-2026.webp") type("image/webp"),url("../img/cinematic/hec-vision-future-of-entertainment-2026.jpg") type("image/jpeg"))}
.vs-collab{background-image:image-set(url("../img/cinematic/hec-vision-collaboration.webp") type("image/webp"),url("../img/cinematic/hec-vision-collaboration.jpg") type("image/jpeg"))}

.im-backlot{background-image:image-set(url("../img/cinematic/hec-production-backlot-crane.webp") type("image/webp"),url("../img/cinematic/hec-production-backlot-crane.jpg") type("image/jpeg"))}
.im-monument{background-image:image-set(url("../img/cinematic/hec-western-monument-valley.webp") type("image/webp"),url("../img/cinematic/hec-western-monument-valley.jpg") type("image/jpeg"))}
.im-villa{background-image:image-set(url("../img/cinematic/hec-location-coastal-villa.webp") type("image/webp"),url("../img/cinematic/hec-location-coastal-villa.jpg") type("image/jpeg"))}
.im-premiere{background-image:image-set(url("../img/cinematic/hec-premiere-marquee-crowd.webp") type("image/webp"),url("../img/cinematic/hec-premiere-marquee-crowd.jpg") type("image/jpeg"))}
.im-console{background-image:image-set(url("../img/cinematic/hec-launch-network-console.webp") type("image/webp"),url("../img/cinematic/hec-launch-network-console.jpg") type("image/jpeg"))}
.im-os{background-image:image-set(url("../img/cinematic/hec-technology-os-console.webp") type("image/webp"),url("../img/cinematic/hec-technology-os-console.jpg") type("image/jpeg"))}
.im-globe{background-image:image-set(url("../img/cinematic/hec-global-locations-map.webp") type("image/webp"),url("../img/cinematic/hec-global-locations-map.jpg") type("image/jpeg"))}
.im-desk{background-image:image-set(url("../img/cinematic/hec-partnership-desk-detail.webp") type("image/webp"),url("../img/cinematic/hec-partnership-desk-detail.jpg") type("image/jpeg"))}
.im-scene{background-image:image-set(url("../img/cinematic/hec-streaming-shop-the-scene.webp") type("image/webp"),url("../img/cinematic/hec-streaming-shop-the-scene.jpg") type("image/jpeg"))}

/* ─── Studios page imagery ─────────────────────────────────────────
   Four distinct frames, none shared with Productions: a working set, a
   residence being shot, a built street set, and a lit cliffside house.
   Named for their role on the page, so replacing a photograph later is
   a single line rather than a hunt through homepage class names. */
.st-hero,
.st-location,
.st-stage,
.st-close{background-size:cover;background-position:center;background-repeat:no-repeat}
.st-hero{background-image:image-set(url("../img/cinematic/hec-studios-hero-soundstage.webp") type("image/webp"),url("../img/cinematic/hec-studios-hero-soundstage.jpg") type("image/jpeg"));background-position:center bottom}
.st-location{background-image:image-set(url("../img/cinematic/hec-studios-estate-shoot.webp") type("image/webp"),url("../img/cinematic/hec-studios-estate-shoot.jpg") type("image/jpeg"));background-position:center 46%}
.st-stage{background-image:image-set(url("../img/cinematic/hec-studios-western-ranch-shoot.webp") type("image/webp"),url("../img/cinematic/hec-studios-western-ranch-shoot.jpg") type("image/jpeg"));background-position:center 40%}
/* the house sits right of centre in a tall frame, so a blind centre crop
   would put the terrace off screen on a phone */
.st-close{background-image:image-set(url("../img/cinematic/hec-studios-close-residence-shoot.webp") type("image/webp"),url("../img/cinematic/hec-studios-close-residence-shoot.jpg") type("image/jpeg"));background-position:center}

/* ─── Film Distribution page ───────────────────────────────────────
   This page is meant to read brighter than Productions and Studios. The
   photography is shared across the site, so the difference is made in the
   treatment: a lighter scrim over every band, so faces, marquees and
   architecture stay legible instead of sinking into the navy. */
.bleed--bright::after{background:linear-gradient(180deg,
  rgba(2,11,24,.10) 0%, rgba(2,11,24,.06) 42%, rgba(2,11,24,.62) 100%)}
.bleed--bright.bleed--close::after{background:linear-gradient(180deg,
  rgba(2,11,24,.18) 0%, rgba(2,11,24,.40) 40%,
  rgba(2,11,24,.80) 72%, rgba(2,11,24,.92) 100%)}

/* Three frames, all 16:9 and all shot full width, so these bands take the
   picture's own ratio with no height cap: identical 810px bands at 1440,
   nothing cropped, the same treatment the homepage uses. */
.fd-hero,
.fd-plan,
.fd-strategy{background-size:cover;background-repeat:no-repeat;background-position:center}
.fd-hero{background-image:image-set(url("../img/cinematic/hec-distribution-global-release.webp") type("image/webp"),url("../img/cinematic/hec-distribution-global-release.jpg") type("image/jpeg"))}
.fd-plan{background-image:image-set(url("../img/cinematic/hec-distribution-release-plan.webp") type("image/webp"),url("../img/cinematic/hec-distribution-release-plan.jpg") type("image/jpeg"))}
.fd-strategy{background-image:image-set(url("../img/cinematic/hec-distribution-strategy.webp") type("image/webp"),url("../img/cinematic/hec-distribution-strategy.jpg") type("image/jpeg"))}

@media(max-width:640px){
  /* the existing mobile treatment: full height, a little off the sides,
     each frame held on the part that carries its subject */
  .fd-hero{background-position:52% center}
  .fd-plan{background-position:56% center}
  .fd-strategy{background-position:54% center}
}

/* the release journey — a numbered sequence, not a card grid */
.journey{list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;max-width:56ch}
.journey li{display:flex;align-items:baseline;gap:clamp(16px,2.6vw,34px);
  padding:clamp(13px,1.6vw,19px) 0;border-top:1px solid var(--line)}
.journey i{font-style:normal;font-size:11px;letter-spacing:.22em;
  color:var(--gold-l);flex:none;width:3ch}
.journey b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.0625rem,1.9vw,1.5rem);line-height:1.1;letter-spacing:-.012em;
  color:var(--text)}

/* mobile: hold the subject in frame rather than blind-centring */
@media(max-width:860px){
  .pm-locations{background-position:62% center}
  .w1{background-position:50% 62%}
  .w2{background-position:58% center}
  .b3{background-position:70% center}
  .w3{background-position:56% center}
  .w4{background-position:62% 55%}
  .sc-produce{background-position:38% center}
  .sc-hero{background-position:48% 48%}
  .im-monument{background-position:66% center}
  .im-backlot{background-position:30% center}
}

.im-texas{background-image:image-set(url("../img/cinematic/hec-estate-texas-lake.webp") type("image/webp"),url("../img/cinematic/hec-estate-texas-lake.jpg") type("image/jpeg"));background-size:cover;background-position:center}
.im-miami{background-image:image-set(url("../img/cinematic/hec-estate-miami-beachfront.webp") type("image/webp"),url("../img/cinematic/hec-estate-miami-beachfront.jpg") type("image/jpeg"));background-size:cover;background-position:center}
.im-beverly{background-image:image-set(url("../img/cinematic/hec-estate-beverly-hills.webp") type("image/webp"),url("../img/cinematic/hec-estate-beverly-hills.jpg") type("image/jpeg"));background-size:cover;background-position:center}

/* ── Filming Locations hero · one estate, two aspects ───────────────────────
   Front of house and pool terrace cross-fade on an 11s cycle: five seconds
   held on each, with a half-second dissolve between. Two stacked .scene layers and
   one keyframe — no script, nothing to initialise, and nothing that can be
   left running when the element leaves the page.

   Only the top layer animates. The one beneath is simply always there, so if
   the animation never starts the hero still shows a photograph rather than a
   gap. */
.im-la-front{background-image:image-set(url("../img/cinematic/hec-estate-la-front-of-house.webp") type("image/webp"),url("../img/cinematic/hec-estate-la-front-of-house.jpg") type("image/jpeg"));background-size:cover;background-position:center}
.im-la-back{background-image:image-set(url("../img/cinematic/hec-estate-la-pool-terrace.webp") type("image/webp"),url("../img/cinematic/hec-estate-la-pool-terrace.jpg") type("image/jpeg"));background-size:cover;background-position:center}

/* ease-in-out, not the shared --ease. --ease is a sharp ease-out tuned for
   things arriving on screen; applied to a cross-fade it puts most of the
   change in the first quarter, so the handover reads as a cut with a soft
   edge rather than a dissolve. */
.hero-swap .scene + .scene{opacity:0;animation:heroSwap 11s ease-in-out infinite}
@keyframes heroSwap{
  0%      {opacity:0}
  45.45%  {opacity:0}   /* front of house held, 0 → 5s */
  50%     {opacity:1}   /* dissolve, 0.5s */
  95.45%  {opacity:1}   /* pool terrace held, 5.5 → 10.5s */
  100%    {opacity:0}   /* dissolve back, 0.5s */
}

/* A slow cross-fade is a comfort, not information — the same estate either
   way. For anyone who has asked for less motion it simply stops, resting on
   the front of house. */
@media (prefers-reduced-motion: reduce){
  .hero-swap .scene + .scene{animation:none;opacity:0}
}
.im-audmap{background-image:image-set(url("../img/cinematic/hec-audience-intelligence-map.webp") type("image/webp"),url("../img/cinematic/hec-audience-intelligence-map.jpg") type("image/jpeg"));background-size:cover;background-position:center}

/* ═══ LOCATION DETAIL PAGE ══════════════════════════════════════════ */
/* The box fits the photograph, not the other way round. --prop-ar is stamped
   onto <body> at build time from the image's own header; the width cap keeps a
   tall photograph from pushing the headline off the screen, and a photograph
   narrower than the viewport is centred rather than cropped. Without this a
   fixed height plus background-size:cover discarded roughly a third of every
   hero on a wide display, and 60% of the cliffside estate. */
.prop-hero{position:relative;height:auto;aspect-ratio:var(--prop-ar,2);
  width:min(100%,calc(var(--prop-ar,2) * 76svh));margin-inline:auto;overflow:hidden}
/* On a phone a 2:1 photograph is a 190px sliver, which reads as a banner rather
   than an establishing shot. A moderate crop earns back the presence, the same
   trade the .cine bands make at this width. */
@media (max-width:640px){
  .prop-hero{aspect-ratio:3/2;width:100%}
}
.prop-shot{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.02);transition:transform 1.4s var(--ease)}
.prop-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,6,16,.42),rgba(2,6,16,.12) 42%,rgba(2,6,16,.96))}
.prop-head{position:relative;margin-top:clamp(-90px,-7vw,-60px);z-index:2;
  padding-bottom:clamp(30px,4vw,52px)}
.prop-head .back{margin-bottom:clamp(18px,2.4vw,30px);display:inline-flex}
.prop-place{margin-top:12px;font-size:clamp(12px,1vw,14px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-l)}
.prop-place span{color:var(--t3)}
.prop-feats{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.prop-feats li{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t2);border:1px solid var(--line);padding:8px 13px;border-radius:2px}
.prop-desc{margin-top:clamp(22px,2.6vw,32px);max-width:62ch}

.prop-cols{display:grid;gap:clamp(28px,4vw,64px);padding-bottom:clamp(40px,5vw,72px)}
@media(min-width:980px){.prop-cols{grid-template-columns:1.35fr .85fr;align-items:start}}
.prop-block{border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,26px);
  margin-bottom:clamp(26px,3vw,40px)}
.prop-block h2{display:block;margin-bottom:clamp(14px,1.8vw,22px)}
.ptable{margin:0}
.prow{display:grid;gap:4px 24px;padding:11px 0;border-bottom:1px solid rgba(245,246,248,.055)}
@media(min-width:560px){.prow{grid-template-columns:minmax(0,16ch) minmax(0,1fr)}}
.prow dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);padding-top:3px}
.prow dd{margin:0;font-size:clamp(13px,1.05vw,15px);color:var(--t2);line-height:1.55}
.pnote{margin-top:12px;font-size:11px;color:var(--t3);line-height:1.55}
.avail{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,1.9vw,24px);letter-spacing:-.01em}
.avail.ok{color:#7BD88F}.avail.mid{color:var(--gold-l)}.avail.req{color:var(--t2)}
/* the same gold the card's corner flag is set in */
.avail.soon{color:var(--gold-l)}
.btn-req{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 20px;border:1px solid var(--line);border-radius:2px;color:var(--text);
  background:linear-gradient(180deg,rgba(7,26,56,.6),rgba(2,6,16,.6));
  transition:border-color .35s,background .35s,box-shadow .45s var(--ease)}
.btn-req:hover{border-color:rgba(238,196,81,.45);
  background:linear-gradient(180deg,rgba(11,95,255,.18),rgba(7,26,56,.6));
  box-shadow:0 0 26px -8px rgba(11,95,255,.8)}
.btn-req.ghost{background:none}
.btn-req.solid{display:inline-flex;justify-content:center;background:var(--gold-l);color:var(--ink);
  border-color:var(--gold-l);font-weight:800;margin-top:26px}
.btn-req.solid:hover{background:#F5D272;border-color:#F5D272;box-shadow:0 0 30px -8px rgba(238,196,81,.6)}
.btn-req.solid[disabled]{opacity:.5;pointer-events:none}

.prop-inquire{padding:clamp(40px,5vw,78px) var(--gut);border-top:1px solid var(--line);
  scroll-margin-top:90px}
.prop-inquire .t-body{margin-top:14px}
.iloc{display:flex;flex-direction:column;gap:6px;margin:clamp(26px,3vw,38px) 0 6px;
  padding:16px 18px;border:1px solid rgba(238,196,81,.28);border-radius:2px;
  background:rgba(238,196,81,.05)}
.iloc b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.4vw,19px);letter-spacing:-.01em}
.igrid{display:grid;gap:16px;margin-top:22px}
@media(min-width:720px){.igrid{grid-template-columns:1fr 1fr}}
.igrid label{display:flex;flex-direction:column;gap:8px}
.igrid label.full{grid-column:1/-1}
.igrid span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.igrid input,.igrid select,.igrid textarea{
  background:rgba(7,26,56,.42);border:1px solid var(--line);border-radius:2px;
  padding:13px 14px;color:var(--text);font-size:14px;font-family:var(--body);
  transition:border-color .3s,background .3s}
.igrid input:focus,.igrid select:focus,.igrid textarea:focus{
  outline:none;border-color:rgba(238,196,81,.5);background:rgba(7,26,56,.7)}
.igrid textarea{resize:vertical;min-height:110px}
.iresult{margin-top:16px;font-size:13px;min-height:1.2em}
.iresult.ok{color:#7BD88F}.iresult.err{color:#FF8F8F}

.prop-more{padding:clamp(36px,4.5vw,64px) var(--gut) clamp(48px,6vw,86px);border-top:1px solid var(--line)}
.more-grid{display:grid;gap:14px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.more-card{position:relative;display:block;overflow:hidden;border:1px solid var(--line);
  transition:border-color .4s}
.more-card:hover{border-color:rgba(238,196,81,.42)}
.more-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;
  transition:transform 1.1s var(--ease)}
.more-card:hover .more-img{transform:scale(1.05)}
.more-meta{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(2,6,16,.92))}
.more-meta b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:-.01em}
.more-meta i{font-style:normal;display:block;margin-top:5px;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-l)}

/* clickable cards on the browser */
.loc{display:block;color:inherit}
.loc:hover .loc-b h3{color:var(--gold-l)}
.loc-b h3{transition:color .3s}

/* location browser cards */
.loc-sub{font-weight:600;color:var(--t3);font-size:.72em;letter-spacing:0}
.loc-desc{margin:0 0 14px;font-size:12.5px;color:var(--t2);line-height:1.6}
.loc-feats{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0}
.loc-feats li{font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t3);border:1px solid var(--line);padding:6px 9px;border-radius:2px}
.loc .plate{position:relative;aspect-ratio:16/10;overflow:hidden}
.loc .photo{transition:transform 1.1s var(--ease)}
.loc:hover .photo{transform:scale(1.045)}

/* ═══ EDITORIAL PAGE — BRANDS ═════════════════════════════════════
   Same furniture as Productions, Studios and Film Distribution, but
   the pictures carry lifestyle and product rather than soundstages,
   and the bands run brighter: this page is about desire, not craft. */

.br-hero,
.br-story,
.br-commerce,
.br-close{background-size:cover;background-repeat:no-repeat}

/* These four frames are 3:2 and the bands are much wider than that, so
   cover drops roughly a third of each picture's height. Every window below
   was solved against the frame itself: the first row shown always sits
   above the highest head, and above the screen or sign behind it. Where a
   percentage could not hold both the heads and the subject, the band was
   made taller rather than the crop made harder. */
.br-hero{background-image:image-set(url("../img/cinematic/hec-brands-strategy-table.webp") type("image/webp"),url("../img/cinematic/hec-brands-strategy-table.jpg") type("image/jpeg"));background-position:center 6%}
.br-story{background-image:image-set(url("../img/cinematic/hec-brands-collaboration.webp") type("image/webp"),url("../img/cinematic/hec-brands-collaboration.jpg") type("image/jpeg"));background-position:center 3%}
/* the crew's heads sit ~28px from this frame's top edge, closer than any
   other, so it starts at the very first row and takes the extra height */
.br-commerce{background-image:image-set(url("../img/cinematic/hec-brands-on-set.webp") type("image/webp"),url("../img/cinematic/hec-brands-on-set.jpg") type("image/jpeg"));background-position:center top}
.br-close{background-image:image-set(url("../img/cinematic/hec-brands-partnership.webp") type("image/webp"),url("../img/cinematic/hec-brands-partnership.jpg") type("image/jpeg"));background-position:center 21%}

@media(max-width:640px){
  .br-hero{background-position:46% center}
  .br-story{background-position:46% center}
  .br-commerce{background-position:54% center}
  .br-close{background-position:47% center}
}

/* three short editorial examples. Rules between them, nothing around
   them: the brief rules out cards, and a principle reads better as a
   paragraph than as a tile. */
.moments{list-style:none;margin:clamp(20px,2.6vw,32px) 0 0;padding:0;
  border-top:1px solid var(--line);max-width:74ch}
.moments li{padding:clamp(22px,2.8vw,36px) 0;border-bottom:1px solid var(--line)}
.moments b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.125rem,1.7vw,1.625rem);
  line-height:1.1;letter-spacing:-.018em;color:var(--text);text-wrap:balance}
.moments p{margin:clamp(10px,1.2vw,15px) 0 0;
  font-size:clamp(1rem,1.1vw,1.125rem);color:var(--t2);line-height:1.62;max-width:58ch}

/* ═══ EDITORIAL PAGE — FILM FINANCING ═════════════════════════════
   The same furniture as the other service pages, held deliberately
   quieter. This page argues for credibility, so it leans on type and
   whitespace rather than pictures: no charts, no figures, no cards. */

.ff-hero,
.ff-structure,
.ff-agreement,
.ff-forward{background-size:cover;background-position:center;background-repeat:no-repeat}
/* Four photographs commissioned for this page and nothing borrowed from
   elsewhere on the site. image-set() serves the webp and falls back to the
   jpg; background-size:cover is the background-image equivalent of
   object-fit:cover, which is what every other band on the site uses.
   Focal points are measured, not guessed: these frames are 3:2 and the
   bands are wider than that, so cover shows roughly half the picture's
   height. Each percentage was solved so the window lands on the faces and
   the documents rather than the ceiling or the table edge. */
/* The supplied photograph is 1.96:1, so its band is .cine--scope rather
   than the .cine--full its three siblings use: at 3/2 the band cropped
   5.7% off each side, taking the woman on the left and the man on the
   right with it. `top` rather than a percentage because the standing
   woman's hair clears the frame by about seven pixels in the file itself
   — any crop taken off the top lands on her head.

   The offset is the bar's height, not zero. Every hero band starts at the
   page's very top and the 68px bar is fixed over it, so the band's top 68
   pixels are behind the bar and not visible at all. On the photographs
   this page was built from that strip is ceiling; on this one it is her
   head, which is why pinning the picture to `top` did not uncover it. The
   picture now begins where the bar ends. The strip it leaves is exactly
   the bar's own box, so nothing shows through it and no letterbox appears
   — the cost is at the bottom, which is table and books. */
.ff-hero{background-image:image-set(url("../img/cinematic/hec-finance-boardroom-review-3.webp") type("image/webp"),url("../img/cinematic/hec-finance-boardroom-review-3.jpg") type("image/jpeg"));background-position:center var(--bar-h)}
.ff-structure{background-image:image-set(url("../img/cinematic/hec-finance-budget-review.webp") type("image/webp"),url("../img/cinematic/hec-finance-budget-review.jpg") type("image/jpeg"));background-position:center 27%}
.ff-agreement{background-image:image-set(url("../img/cinematic/hec-finance-agreement.webp") type("image/webp"),url("../img/cinematic/hec-finance-agreement.jpg") type("image/jpeg"));background-position:center 22%}
.ff-forward{background-image:image-set(url("../img/cinematic/hec-finance-meeting-close.webp") type("image/webp"),url("../img/cinematic/hec-finance-meeting-close.jpg") type("image/jpeg"));background-position:center 20%}

/* These four photographs are bright by direction, so the closing band's
   scrim — tuned for night exteriors — would crush them. Lift it here and
   let the navy page furniture carry the brand instead of the picture. */
.bleed--daylight::after{background:linear-gradient(180deg,
  rgba(2,11,24,.08) 0%, rgba(2,11,24,.05) 44%, rgba(2,11,24,.58) 100%)}
.bleed--close.bleed--daylight::after{background:linear-gradient(180deg,
  rgba(2,11,24,.18) 0%, rgba(2,11,24,.44) 36%,
  rgba(2,11,24,.80) 68%, rgba(2,11,24,.92) 100%)}

/* the required notice. Present and legible, never competing with the
   page: one tier below body copy, above the footer rule. */
.disclaim{margin-top:clamp(52px,6vw,88px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
  font-size:clamp(.75rem,.82vw,.8125rem);line-height:1.66;
  color:var(--t3);max-width:82ch}

/* ═══ EDITORIAL PAGE — HEC LAUNCH NETWORK ═════════════════════════
   The same furniture as the other service pages, pitched brighter and
   more populated: this page argues that a film's audience is a real,
   countable group of people, so people carry every band. */

.ln-hero,
.ln-demand,
.ln-insights,
.ln-open{background-size:cover;background-repeat:no-repeat}
/* Focal points solved against each frame: the bands are wider than these
   3:2 pictures, so cover shows roughly two-thirds of each one's height.
   Every window is set to hold the faces and the screens, never the ceiling. */
.ln-hero{background-image:image-set(url("../img/cinematic/hec-movie-launch-stand.webp") type("image/webp"),url("../img/cinematic/hec-movie-launch-stand.jpg") type("image/jpeg"));background-position:center 46%}
.ln-demand{background-image:image-set(url("../img/cinematic/hec-launch-demand-centre.webp") type("image/webp"),url("../img/cinematic/hec-launch-demand-centre.jpg") type("image/jpeg"));background-position:center 34%}
.ln-insights{background-image:image-set(url("../img/cinematic/hec-launch-audience-insights.webp") type("image/webp"),url("../img/cinematic/hec-launch-audience-insights.jpg") type("image/jpeg"));background-position:center 40%}
.ln-open{background-image:image-set(url("../img/cinematic/hec-launch-opening-weekend.webp") type("image/webp"),url("../img/cinematic/hec-launch-opening-weekend.jpg") type("image/jpeg"));background-position:center 44%}
@media(max-width:640px){
  /* phones crop hardest, so each band leans to where its subject actually
     sits: the booth, the wall, the screen, the doors */
  .ln-hero{background-position:38% 52%}
  .ln-demand{background-position:center 30%}
  .ln-insights{background-position:62% 38%}
  .ln-open{background-position:center 48%}
}

/* the pre-release journey — six stages as a single line of type, not six
   cards. It reads as one movement because it is one movement. */
.journey-line{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(10px,1.4vw,20px);margin:clamp(24px,3vw,40px) 0 0;padding:0;max-width:64ch}
.journey-line li{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9375rem,1.35vw,1.3125rem);line-height:1.2;letter-spacing:-.012em;
  color:var(--text)}
.journey-line li+li::before{content:'/';margin-right:clamp(10px,1.4vw,20px);
  color:var(--gold);font-weight:400}


/* ═══ CINEMATIC IMAGE BANDS ══════════════════════════════════════
   One system for every full-width photograph on the interior pages.

   The band takes its shape from the picture rather than the picture
   being cut to fit the band. Five variants cover the whole library —
   the wide masters shot at 2:1 to 3:1, and the newer 3:2 sets — and
   any band with an unusual frame can override --ar directly.

   max-height keeps a near-square photograph from swallowing the
   viewport; where it binds, the per-image background-position below
   decides which part survives, and every one of those is biased
   toward the top so heads, signs and rooflines are kept.

   The homepage already works this way (.hec-section-image + --ar) and
   is deliberately left alone. */
.bleed.cine{height:auto;aspect-ratio:var(--ar,16/9);
  max-height:min(92svh,900px);min-height:clamp(180px,22vh,300px)}

.cine--ultra{--ar:3/1}      /* 2.6+  the widest plates and maps       */
.cine--wide {--ar:21/9}     /* 2.2   backlots, marquees, storytelling */
.cine--scope{--ar:2/1}      /* 2.0   soundstages, estates, locations  */
.cine--tall {--ar:16/9}     /* 1.8   red carpet, audience activation  */
.cine--full {--ar:3/2}      /* 1.5   the finance, brands, launch sets */


@media(max-width:640px){
  /* A phone is narrow, so a band cut to a wide photograph's own ratio
     becomes a strip, while one cut too tall throws away the sides. Each
     variant caps its ratio here to sit between the two: every frame keeps
     its full height, and the ratios are graded so the widest plates give
     up the least width. The desktop min-height must go — at 375px it
     would override these ratios and crop the wide plates in half. */
  .bleed.cine{max-height:none;min-height:0}
  .cine--ultra{--ar:5/2}
  .cine--wide {--ar:2/1}
  .cine--scope{--ar:16/9}
  .cine--tall {--ar:3/2}
  .cine--full {--ar:4/3}
}


/* ═══ PRODUCTIONS PHOTOGRAPHY ════════════════════════════════════
   Four frames that tell one journey: development, location, stage,
   post. Each is 3:2 and each needs its whole height — the boom mic
   and sky at the top of the location plate, the lighting grid above
   the soundstage, the screen above the editors in post. So these
   bands take the picture's own ratio with no height cap at all:
   nothing is cropped on desktop, and the band is as tall as the
   photograph requires.

   The old .im-backlot / .pm-* / .b1 rules are deliberately left in
   place — .pm-studios is still the fallback plate the film and
   location templates fall back to in hec.js. */
.bleed.cine--frame{--ar:3/2;max-height:none}

.pr-development,
.pr-location,
.pr-soundstage,
.pr-post{background-size:cover;background-repeat:no-repeat;background-position:center}
.pr-development{background-image:image-set(url("../img/cinematic/hec-productions-development.webp") type("image/webp"),url("../img/cinematic/hec-productions-development.jpg") type("image/jpeg"))}
.pr-location{background-image:image-set(url("../img/cinematic/hec-productions-location-2.webp") type("image/webp"),url("../img/cinematic/hec-productions-location-2.jpg") type("image/jpeg"))}
.pr-soundstage{background-image:image-set(url("../img/cinematic/hec-productions-soundstage.webp") type("image/webp"),url("../img/cinematic/hec-productions-soundstage.jpg") type("image/jpeg"))}
.pr-post{background-image:image-set(url("../img/cinematic/hec-productions-post.webp") type("image/webp"),url("../img/cinematic/hec-productions-post.jpg") type("image/jpeg"))}

@media(max-width:640px){
  /* A phone trades a little width for a band with real presence. The
     horizontal centre of each frame is not the same place: the table
     and the stage sit slightly left of centre, the car and the screen
     dead centre. */
  .bleed.cine--frame{--ar:4/3}
  .pr-development{background-position:48% center}
  .pr-location{background-position:50% center}
  .pr-soundstage{background-position:47% center}
  .pr-post{background-position:51% center}
}

/* ═══ SHOPPABLE STREAMING PHOTOGRAPHY ════════════════════════════
   Four frames, all 16:9 and all shot at full resolution, so these
   bands take the picture's own ratio with no height cap: nothing is
   cropped on desktop. Each one is a viewing scene — at home, in the
   cinema, and the platform itself — which is what the set actually
   contains, so the bands sit where those moments belong in the page. */
.bleed.cine--frame16{--ar:16/9;max-height:none}

.ss-hero,
.ss-scene,
.ss-theatre,
.ss-platform{background-size:cover;background-repeat:no-repeat;background-position:center}
.ss-hero{background-image:image-set(url("../img/cinematic/hec-shoppable-home-viewing.webp") type("image/webp"),url("../img/cinematic/hec-shoppable-home-viewing.jpg") type("image/jpeg"))}
.ss-scene{background-image:image-set(url("../img/cinematic/hec-shoppable-second-screen.webp") type("image/webp"),url("../img/cinematic/hec-shoppable-second-screen.jpg") type("image/jpeg"))}
.ss-theatre{background-image:image-set(url("../img/cinematic/hec-shoppable-theatre-phone.webp") type("image/webp"),url("../img/cinematic/hec-shoppable-theatre-phone.jpg") type("image/jpeg"))}
.ss-platform{background-image:image-set(url("../img/cinematic/hec-shoppable-platform.webp") type("image/webp"),url("../img/cinematic/hec-shoppable-platform.jpg") type("image/jpeg"))}

@media(max-width:640px){
  /* 3:2 on a phone keeps the whole height and 84% of the width; the
     positions below hold whichever side carries the moment — the tablet,
     the phone, the screen. */
  .bleed.cine--frame16{--ar:3/2}
  .ss-hero{background-position:46% center}
  .ss-scene{background-position:56% center}
  .ss-theatre{background-position:53% center}
  .ss-platform{background-position:40% center}
}

/* the four-step path, set as numbered editorial lines on hairlines —
   the same treatment as the other service pages, never four cards */
.steps{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;
  border-top:1px solid var(--line);max-width:74ch}
.steps li{display:flex;gap:clamp(16px,2.6vw,40px);align-items:baseline;
  padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
.steps i{font-style:normal;font-size:10.5px;letter-spacing:.26em;color:var(--t3);
  flex:none;width:3ch;padding-top:.35em}
.steps div{flex:1;min-width:0}
.steps b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.0625rem,1.5vw,1.4375rem);
  line-height:1.12;letter-spacing:-.016em;color:var(--text)}
.steps p{margin:clamp(8px,1vw,13px) 0 0;font-size:clamp(1rem,1.1vw,1.125rem);
  color:var(--t2);line-height:1.62;max-width:58ch}

/* Honeypot on the location enquiry form. Positioned off-screen rather than
   display:none, because some bots skip fields that are not rendered at all. */
.iform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ── film detail ────────────────────────────────────────────────────────
   Moved out of project.html's inline <style> when film pages became
   generated routes at /films/<slug>/. One shared stylesheet rather than
   the same block repeated into twelve generated documents. */
  .pj-hero{display:grid;gap:clamp(24px,4vw,56px);align-items:center;
    padding-top:clamp(140px,14vw,210px)}
  @media(min-width:900px){.pj-hero{grid-template-columns:340px 1fr}}
  .pj-poster{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line);
    background:var(--navy)}
  .pj-credits{display:grid;gap:10px 22px;grid-template-columns:auto 1fr;margin:0;
    font-size:13.5px;max-width:62ch}
  .pj-credits dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
    padding-top:4px}
  .pj-credits dd{margin:0;color:var(--text-2)}
  .pj-eco{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .pj-eco a{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--text-2);border:1px solid var(--line);padding:8px 13px;border-radius:2px;
    transition:border-color .3s,color .3s}
  .pj-eco a:hover{border-color:var(--gold-line);color:var(--gold-light)}
  .pj-note{font-size:11.5px;color:var(--text-3);margin-top:26px;max-width:60ch;line-height:1.6}

  /* Trailers. The frame carries the 16/9 ratio and the player fills it
     absolutely, because an <iframe> ignores aspect-ratio in older engines and
     collapses to its 150px default height. max-width keeps a 4K MP4 from
     driving the page wider than the viewport, which is the only way a video
     causes horizontal overflow on a phone. */
  .pj-trailers{margin-top:clamp(34px,5vw,54px)}
  .trailer-list{list-style:none;margin:18px 0 0;padding:0;display:grid;
    gap:clamp(22px,3.5vw,38px)}
  /* Two columns only when there are two to show. A single trailer takes the
     full width, which is the same box the Coming Soon plate occupies — so a
     film gaining its first trailer changes what is in the frame, not where
     the frame is or how large it is. */
  @media(min-width:900px){
    .trailer-list:has(li:nth-child(2)){grid-template-columns:repeat(2,1fr)}
  }
  .trailer{margin:0;max-width:100%}
  .trailer-t{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-1);
    margin:0 0 10px}
  .trailer-frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;
    border:1px solid var(--line);background:var(--navy)}
  .trailer-frame>iframe,.trailer-frame>video{position:absolute;inset:0;
    width:100%;height:100%;border:0;display:block;background:var(--navy)}
  .trailer-frame>video{object-fit:contain}
  .trailer-d{font-size:11.5px;color:var(--text-3);margin:10px 0 0;line-height:1.6;
    max-width:60ch}
  /* A focused player must be visibly focused; the browser default ring is
     removed by the reset above. */
  .trailer-frame>iframe:focus-visible,.trailer-frame>video:focus-visible{
    outline:2px solid var(--gold);outline-offset:2px}

  /* ── the click-to-load facade ──────────────────────────────────────
     The provider's iframe is not in the page until somebody asks for it, so
     what fills the frame first is this: the poster if one was chosen, the
     navy plate if not, and a play control over it. It occupies the frame
     exactly, so swapping the iframe in moves nothing. */
  .trailer-facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
    display:grid;place-items:center;gap:14px;align-content:center;cursor:pointer;
    background-color:var(--navy);background-size:cover;background-position:center;
    color:var(--text);font:inherit}
  .trailer-facade::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(2,11,24,.28),rgba(2,11,24,.66))}
  .trailer-facade>*{position:relative;z-index:1}
  .trailer-play{width:clamp(54px,7vw,74px);aspect-ratio:1;border-radius:50%;
    border:1px solid rgba(238,196,81,.55);display:grid;place-items:center;
    background:rgba(2,11,24,.42);transition:border-color .3s,background .3s,transform .3s var(--ease)}
  .trailer-play::before{content:'';width:0;height:0;margin-left:4px;
    border-left:15px solid var(--gold-l);border-top:9px solid transparent;
    border-bottom:9px solid transparent}
  .trailer-cue{font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
    color:var(--text)}
  .trailer-facade:hover .trailer-play{border-color:var(--gold-l);
    background:rgba(2,11,24,.66);transform:scale(1.06)}
  .trailer-facade:focus-visible{outline:2px solid var(--gold-l);outline-offset:-3px}
  .trailer-fallback{position:absolute;inset:0;display:grid;place-items:center;
    font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}

  /* ── the empty state ───────────────────────────────────────────────
     Not a disabled player and not a gap. The same 16:9 box the player would
     occupy, composed so it reads as a title card that is on its way. */
  .trailer-soon{position:relative;aspect-ratio:16/9;width:100%;margin-top:18px;
    border:1px solid var(--line);background:
      radial-gradient(120% 90% at 50% 0%,rgba(238,196,81,.09),transparent 62%),
      var(--navy);
    display:grid;place-items:center;max-width:100%}
  .trailer-soon-in{display:grid;justify-items:center;gap:clamp(10px,1.4vw,16px);
    text-align:center;padding:20px}
  .trailer-soon-a{font-size:9.5px;font-weight:600;letter-spacing:.3em;
    text-transform:uppercase;color:var(--gold-l);opacity:.9}
  .trailer-soon-b{font-family:var(--display);font-weight:800;text-transform:uppercase;
    letter-spacing:.02em;line-height:1;font-size:clamp(24px,3.6vw,46px);color:var(--text)}
  .trailer-soon::after{content:'';position:absolute;left:50%;bottom:clamp(16px,3vw,30px);
    transform:translateX(-50%);width:clamp(38px,6vw,70px);height:1px;
    background:linear-gradient(90deg,transparent,rgba(238,196,81,.5),transparent)}
  @media(prefers-reduced-motion:reduce){
    .trailer-play{transition:none}
    .trailer-facade:hover .trailer-play{transform:none}
  }

/* ── PHONES: the whole photograph, and the words beside it rather than on it ──
   Two faults, both measured before this was written and measured again after.

   CROPPING. Photographs are painted as CSS backgrounds with
   background-size:cover, so a picture of a different shape to its frame is cut
   to fit. Measured at 390px before this rule: the /company.html partnership
   panorama showed 27% of itself inside a 4:5 portrait frame, the homepage
   hangar 34% inside the full-height phone hero, and the studios closing frame
   75%. `contain` shows the whole frame and the navy ground fills what is left,
   which the brief prefers to cutting a face out of shot. Nothing is stretched:
   the ratio painted is the file's own.

   The homepage hero override is written against the same selector as the rule
   it corrects — `main.home > section:first-child .hec-section-image > .scene`,
   specificity (0,4,2) — because a shorter selector loses to it and would have
   looked applied while changing nothing.

   Leadership portraits keep their 4:5 frame. A real 4:5 portrait fills it
   exactly under `contain`, unchanged; only a placeholder of some other shape,
   which is what was cropping, letterboxes instead of losing the subject.

   WORDS ON THE PICTURE. `.bleed-over` is absolutely positioned across the
   band. On a phone its paragraphs covered 27–50% of the photograph — half of
   the streaming frame. The band becomes a stack: the picture as its own image
   area, then a navy block carrying the same headline, body and label, in the
   same order and wording. The scrim existed to make overlaid type legible;
   nothing is overlaid now, so it goes.

   Desktop and tablet composition is approved and is not touched: every rule
   here is inside max-width:640px. */
@media(max-width:640px){
  /* Every photograph, whole.

     `.lp-img` is deliberately absent. A leadership card is a 4:5 portrait
     frame, and until real portraits are supplied it holds a decorative
     landscape plate; fitting that whole into a tall frame produced a thin
     strip in a black box, which looked broken rather than fixed. Plates fill
     their card, as plates are for. Real portraits are portrait-shaped and sit
     in a 4:5 frame without losing a face. */
  .scene,.plate-media,
  main.home > section:first-child .hec-section-image > .scene{
    background-size:contain;background-repeat:no-repeat;background-position:center;
    background-color:var(--page)}

  /* The homepage hero section is a full-height column, so its picture element
     stretches to whatever is left over. Fitting the photograph inside that
     leaves it floating in navy with roughly half the box empty — complete,
     but plainly unintentional. Giving the box the photograph's own family
     ratio instead means `contain` has almost nothing to letterbox, and the
     section shrinks to the picture rather than the viewport. */
  main.home > section:first-child{height:auto;min-height:0}
  /* width:100% is not optional. With flex:0 0 auto the basis comes from
     content, and an element whose only size is an aspect-ratio has no
     content to measure — it collapsed to 0x0 and the hero disappeared. */
  main.home > section:first-child .hec-section-image{
    flex:0 0 auto;width:100%;aspect-ratio:var(--ar,16/9)}
  /* Sized to the photograph's own ratio, the hero is 219px on a 390 phone —
     a band, not an opening image, and shorter than a single film card below
     it. 4:3 gives it 292px without letterboxing, which is why the plate goes
     back to `cover` here: the frame is a wide hangar interior and the crop
     comes off its far left and right edges, where there is equipment rather
     than subject. The skyline, the helicopter and the car all sit inside it.
     Landscape phones keep the wider frame, having the width to show it. */
  @media (orientation:portrait){
    main.home > section:first-child .hec-section-image{aspect-ratio:4/3}
    main.home > section:first-child .hec-section-image > .scene{
      background-size:cover}
  }

  /* Full-bleed bands become a stack: picture, then words.

     The height has to be released in three places, not one. `.bleed.cine`
     sets aspect-ratio from --ar at specificity (0,2,0), which a plain
     `.bleed` rule cannot reach; the band also carries overflow:hidden. Leave
     either in place and the text block — which now sits below the picture
     rather than on it — is laid out past the band's fixed bottom edge and
     clipped away entirely. That is exactly what happened: the headline
     survived and the body and label vanished. */
  .bleed,.bleed.cine{height:auto;min-height:0;max-height:none;aspect-ratio:auto;
    overflow:visible;background-color:var(--page)}

  /* The picture keeps a shape close to its own. --ar is already graded per
     band to the family of photographs it holds, so it is a much better fit
     than a single global ratio, and `contain` means the remainder is navy
     rather than a crop. */
  .bleed .scene,.bleed .plate-media{
    position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:var(--ar,16/9)}

  /* The header is fixed, opaque and 60px tall, and a hero band starts at
     the top of the document — so the bar lands ON the picture rather than
     above it. On desktop that is a 68px bar over a 720px band and reads as
     letterboxing. Here it was a quarter of the picture: measured at 390px,
     48px of Vision's 195px photograph, and 16-26% on every other hero band
     for the same reason.

     The band reserves the bar's height instead. Its own navy fills the
     reserved strip, so the bar still sits on navy and nothing about the
     chrome changes — the picture simply starts below it, whole, which is
     what `contain` was already trying to achieve one line further down. */
  .bleed--hero{padding-top:var(--bar-h)}

  /* The loop is framed by whatever frames the photograph under it. Below
     this breakpoint the band stops cropping and letterboxes instead —
     `contain`, with navy for the remainder — so the video has to do the
     same or it shows a tighter picture than the still it replaced, which
     reads as the top of the frame having been cut off. It was: cover
     filled the 16/9 band from a 2:1 file and took the sides, and lifted
     the whole frame flush to the band's top edge in the process. */
  .scene-video{object-fit:contain}
  /* The band now reserves the bar's height, but an absolutely positioned
     child resolves inset against the PADDING box, so the loop would still
     have started at the band's very top — under the bar, and 30px above
     the still it is supposed to be lying exactly on top of. It takes the
     the reserved strip too.

     The height is stated rather than left to auto. A replaced element with
     height:auto takes its INTRINSIC height and ignores `bottom`, which
     sized the loop to its own 2:1 instead of to the band's ratio and left
     its picture 12px above the photograph's — close enough to look like a
     bug and not close enough to spot. Subtracting the strip gives exactly
     the box the still occupies, so `contain` centres both identically. */
  .bleed--hero .scene-video{top:var(--bar-h);height:calc(100% - var(--bar-h))}

  /* The words move below the picture, on navy, in their existing order. */
  .bleed-over{position:static;left:auto;right:auto;bottom:auto;
    max-width:none;padding:clamp(20px,5.5vw,28px) var(--gut) clamp(24px,7vw,34px)}
  .bleed-over--close{max-width:none;bottom:auto}
  .bleed::after{display:none}
  .bleed .t-label{position:static;left:auto;right:auto;bottom:auto;top:auto}

  /* The location detail hero is the same two faults in different clothes.
     `.prop-hero` crops to 3/2 here — a deliberate trade made when a 2:1
     photograph read as a 190px sliver — and `.prop-head` is pulled up by a
     negative margin so the headline sits on the lower third of the picture.
     Measured at 375px that overlay covered 39% of the photograph.

     On a phone the photograph wins: the box takes the picture's own ratio,
     which --prop-ar already carries from the image header, and the heading
     block starts below it. The sliver objection does not survive the change,
     because the picture is now as tall as its own proportions make it rather
     than as short as a 2:1 crop of a full-width band. */
  .prop-hero{aspect-ratio:var(--prop-ar,3/2);width:100%}
  .prop-shot{background-size:contain;background-repeat:no-repeat;
    background-position:center;background-color:var(--page);transform:none}
  .prop-hero::after{display:none}
  .prop-head{margin-top:0;padding-top:clamp(18px,5vw,26px)}
}

/* ═══════════════════════════════════════════════════════════════════
   PARTNER WITH US
   ───────────────────────────────────────────────────────────────────
   One shared section, rendered into every public page by the build
   (lib/partner-section.mjs). It sits between the last content section
   and the footer, and it is built from the same five values the rest
   of the site uses — --rail, --gut, --line, the navy family and the
   two type families — so it reads as part of the page rather than as
   a form dropped onto it.

   Restraint is the brief: thin architectural rules, one gold accent
   reserved for the current selection and the submit button, silver
   and white for everything else. No panel is lighter than the page.
   ═══════════════════════════════════════════════════════════════════ */

.pw{
  position:relative;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--n0) 0%,var(--n1) 46%,var(--n0) 100%);
  padding:clamp(56px,7vw,110px) 0 clamp(56px,7vw,104px);
}
/* the hairline of light every other section boundary on the site uses */
.pw::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(238,196,81,.28) 34%,
    rgba(158,223,255,.18) 66%,transparent);
}
.pw-in{max-width:1180px}

/* ── heading ─────────────────────────────────────────────────────── */
.pw-head{max-width:70ch}
.pw-title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,3.2vw,3rem);line-height:1.02;letter-spacing:-.03em;
  color:var(--text);margin:clamp(12px,1.3vw,18px) 0 0;
}
.pw-instruction{
  margin:clamp(16px,2vw,24px) 0 0;color:var(--silver);
  font-size:clamp(1rem,1.1vw,1.125rem);font-weight:600;line-height:1.5;
}
.pw-lede{
  margin:12px 0 0;color:var(--t2);max-width:62ch;
  font-size:clamp(.9375rem,1vw,1.0625rem);line-height:1.62;
}

/* ── the form shell ──────────────────────────────────────────────── */
.pw-form{margin-top:clamp(34px,4vw,54px)}
.pw fieldset{border:0;margin:0;padding:0;min-width:0}
.pw legend{padding:0}

/* the error summary, shown only after a failed submit */
.pw-alert{
  border:1px solid rgba(255,143,143,.42);
  border-left:2px solid #FF8F8F;
  background:rgba(255,143,143,.07);
  padding:16px 18px;margin-bottom:26px;color:var(--text);
  font-size:.9375rem;line-height:1.55;
}
.pw-alert h3{margin:0 0 8px;font-size:.9375rem;font-weight:600;color:#FFC9C9}
.pw-alert ul{margin:0;padding-left:18px}
.pw-alert a{color:var(--text);text-underline-offset:3px}

/* ── the nine interests ──────────────────────────────────────────── */
.pw fieldset.pw-interests{margin:0 0 clamp(40px,4.5vw,62px)}
.pw-legend{
  font-family:var(--body);font-size:clamp(10.5px,.86vw,12.5px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--t2);
  padding-bottom:16px;border-bottom:1px solid var(--line);width:100%;
  margin:0 0 20px;
}
.pw-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.pw-chk{
  position:relative;display:flex;align-items:center;gap:14px;
  min-height:56px;padding:14px 18px;cursor:pointer;
  border:1px solid var(--line);background:rgba(245,246,248,.018);
  color:var(--text);
  transition:border-color .28s var(--ease),background .28s var(--ease),
             transform .28s var(--ease);
}
/* the architectural rule that marks a selected card, drawn on the left
   edge so a selection reads at a glance without the card changing tone */
.pw-chk::before{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  background:var(--gold-l);opacity:0;transition:opacity .28s var(--ease);
}
.pw-chk:hover{border-color:rgba(245,246,248,.22);background:rgba(245,246,248,.04)}
.pw-chk:has(input:checked),.pw-chk.is-on{
  border-color:rgba(238,196,81,.42);background:rgba(238,196,81,.06);
}
.pw-chk:has(input:checked)::before,.pw-chk.is-on::before{opacity:1}
.pw-chk:focus-within{border-color:var(--gold-l)}
.pw-chk-name{font-size:.9375rem;font-weight:600;line-height:1.35}
.pw-chk-here{
  margin-left:auto;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-l);white-space:nowrap;
  border:1px solid rgba(238,196,81,.34);padding:4px 8px;
}

/* ── the control itself ──────────────────────────────────────────── */
/* The box is a real <input>, styled rather than replaced: the focus
   ring, the keyboard behaviour and the accessibility tree are the
   browser's, not an imitation. */
.pw-box{position:relative;flex:0 0 20px;width:20px;height:20px;display:block}
.pw-box--round{flex-basis:18px;width:18px;height:18px}
.pw-box input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  border:1px solid rgba(245,246,248,.34);background:transparent;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.pw-box--round input{border-radius:50%}
.pw-box input:checked{border-color:var(--gold-l);background:var(--gold-l)}
.pw-box input:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.pw-tick{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .18s var(--ease)}
.pw-tick::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(43deg);
}
.pw-tick--dot::after{
  left:50%;top:50%;width:6px;height:6px;border:0;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);
}
.pw-box input:checked ~ .pw-tick{opacity:1}

/* ── the two information columns ─────────────────────────────────── */
.pw-cols{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:900px){
  .pw-cols{grid-template-columns:1fr 1fr;align-items:start}
}
.pw-block > legend{
  font-family:var(--body);font-size:clamp(10.5px,.86vw,12.5px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--t2);
  padding-bottom:14px;border-bottom:1px solid var(--line);width:100%;
  margin-bottom:22px;
}
.pw-fields{display:grid;gap:20px}
@media(min-width:560px){
  .pw-fields{grid-template-columns:1fr 1fr}
  .pw-field{grid-column:1/-1}
  .pw-field--half{grid-column:auto}
}

/* ── a field ─────────────────────────────────────────────────────── */
.pw-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.pw-field > label,.pw-radios > legend{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:.875rem;font-weight:600;color:var(--silver);line-height:1.4;
}
.pw-req{color:var(--gold-l)}
.pw-opt{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  /* --t2, not --t3. "Optional" is part of the field's label and has to be
     legible; --t3 measures 2.88:1 on this ground, under the 4.5:1 floor. */
  color:var(--t2);
}
.pw-help{margin:0;font-size:.8125rem;color:var(--t2);line-height:1.55;max-width:62ch}
.pw input[type=text],.pw input[type=email],.pw input[type=tel],
.pw select,.pw textarea{
  width:100%;min-height:48px;box-sizing:border-box;
  font-family:var(--body);font-size:1rem;color:var(--text);
  background:rgba(2,11,24,.55);border:1px solid var(--line);
  border-radius:0;padding:12px 14px;
  transition:border-color .24s var(--ease),background .24s var(--ease);
}
.pw textarea{min-height:190px;line-height:1.6;resize:vertical}
.pw input::placeholder,.pw textarea::placeholder{color:var(--t3)}
/* These three belong to the TEXT controls, and they say so. Written as a
   bare `.pw input` they also matched the interest grid's checkboxes, which
   are inputs too — and at equal specificity to `.pw-box input:checked` the
   later rule won. Chrome focuses a checkbox when you click it, so a ticked
   box took the dark field background over its gold fill and the dark tick
   disappeared into it: the card read as selected, the box read as empty.
   Safari does not focus a checkbox on click, so the same stylesheet looked
   right there and wrong in Chrome. */
.pw input:not([type=checkbox]):not([type=radio]):hover,
.pw select:hover,.pw textarea:hover{border-color:rgba(245,246,248,.2)}
.pw input:not([type=checkbox]):not([type=radio]):focus,
.pw select:focus,.pw textarea:focus{
  outline:none;border-color:var(--gold-l);background:rgba(2,11,24,.8);
  box-shadow:0 0 0 1px rgba(238,196,81,.35);
}
.pw input:not([type=checkbox]):not([type=radio]):focus-visible,
.pw select:focus-visible,.pw textarea:focus-visible{
  outline:2px solid var(--gold-l);outline-offset:2px;
}
.pw [aria-invalid=true]{border-color:#FF8F8F}
.pw [aria-invalid=true]:focus{box-shadow:0 0 0 1px rgba(255,143,143,.5)}

/* the arrow is drawn, so the control is one shape at every zoom level */
.pw-select{position:relative}
.pw-select select{appearance:none;-webkit-appearance:none;padding-right:42px}
.pw-select::after{
  content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;
  border:solid var(--t2);border-width:0 1px 1px 0;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.pw select option{background:var(--n1);color:var(--text)}

.pw-error{margin:0;font-size:.8125rem;color:#FF8F8F;line-height:1.5}
.pw-radios{display:flex;flex-direction:column;gap:12px;grid-column:1/-1}
.pw-radios > legend{margin-bottom:2px}
.pw-radio{
  display:inline-flex;align-items:center;gap:11px;min-height:44px;
  font-size:.9375rem;color:var(--text);cursor:pointer;
}
@media(min-width:560px){
  .pw-radios{flex-direction:row;flex-wrap:wrap;gap:12px 30px;align-items:center}
  .pw-radios > legend{flex:0 0 100%}
}

/* ── the message ─────────────────────────────────────────────────── */
.pw-message{margin-top:clamp(30px,4vw,50px)}
.pw-count{margin:0;font-size:.75rem;letter-spacing:.06em;color:var(--t2);
  font-variant-numeric:tabular-nums}
.pw-count.is-short{color:var(--silver)}
.pw-count.is-near{color:var(--gold-l)}

/* the honeypot: off-screen for a bot that reads computed styles, and out
   of the tab order and the accessibility tree for everyone else */
.pw-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden}

/* ── submit ──────────────────────────────────────────────────────── */
.pw-foot{
  margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
}
.pw-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:56px;padding:17px 38px;cursor:pointer;
  font-family:var(--body);font-size:.8125rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--gold-l);border:1px solid var(--gold-l);
  transition:gap .3s var(--ease),background .3s var(--ease),
             box-shadow .3s var(--ease);
}
.pw-submit:hover{gap:20px;background:#F5D272;border-color:#F5D272;
  box-shadow:0 0 34px -10px rgba(238,196,81,.65)}
.pw-submit:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px}
.pw-submit[disabled]{opacity:.55;cursor:progress;box-shadow:none}
.pw-status{margin:0;font-size:.875rem;color:var(--t2);min-height:1.2em}
.pw-status.is-error{color:#FF8F8F}
.pw-noscript{margin:18px 0 0;font-size:.875rem;color:var(--t2)}
/* Said plainly, beneath the button, where it is read before the press
   rather than found afterwards. */
.pw-privacy{margin:18px 0 0;font-size:.8125rem;line-height:1.6;color:var(--t2);max-width:68ch}

/* ── the confirmation ────────────────────────────────────────────── */
/* Shown in place of the form, inside the same section, so the page the
   visitor was reading is still around it. */
.pw-done{
  margin-top:clamp(34px,4vw,54px);padding:clamp(30px,4vw,48px);
  border:1px solid rgba(238,196,81,.34);
  border-left:2px solid var(--gold-l);
  background:rgba(238,196,81,.05);
}
.pw-done:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px}
.pw-done-title{
  margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--text);
}
.pw-done-body{margin:16px 0 0;color:var(--t2);max-width:56ch;line-height:1.62}
/* Once the inquiry is in, the invitation to choose an area is no longer one. */
.pw.is-done .pw-instruction,.pw.is-done .pw-lede{display:none}

/* ── mobile ──────────────────────────────────────────────────────── */
@media(max-width:559px){
  .pw-grid{grid-template-columns:1fr}
  .pw-submit{width:100%}
  .pw-foot{flex-direction:column;align-items:stretch}
  .pw-status{text-align:center}
}

/* ── reduced motion ──────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .pw *,.pw *::before,.pw *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
  .pw-submit:hover{gap:14px}
}

/* The narrowest phones: the mark steps down once more so the menu button
   keeps its own room on a 320px bar. Nothing else changes. */
@media(max-width:360px){ .bar-mark{--mark-h:30px} }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT — /login/ and /join/

   Everything here is scoped under .acct so none of it can reach a page that
   existed before. The four accents are not invented: they are sampled out of
   the lockup at the head of these two pages — the deep gold the monogram is
   cut from, the gold its faces catch, the pale gold of its highlights, and
   the white the letters are struck in. Nothing else is added, which is why
   the pages read as the mark enlarged rather than as a theme laid over it.

   The ramp is also the ladder. Basic wears the deep gold as a hairline, Pro
   carries the full gold, and Executive is the only card in white — so the
   three tiers are told apart by metal before a price is read.
   ═══════════════════════════════════════════════════════════════════════════ */
.acct{padding:clamp(96px,13vh,150px) 0 clamp(64px,9vh,110px)}
.acct-wrap{width:min(100%,var(--acct-w,440px));margin-inline:auto;padding-inline:var(--gut)}
.acct-head{text-align:center;display:grid;justify-items:center;gap:clamp(18px,2.4vw,26px)}

/* The lockup, small and centred. Width/height are on the element and the ratio
   is repeated here, so the row is reserved before the file arrives. The
   artwork fills 91.4% of its own frame where the old one filled 98.8%, so the
   box is 5.4% wider to land the wordmark at the same read. */
.acct-mark{display:block;width:min(272px,66vw);height:auto;aspect-ratio:1442/599}
.acct-title{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3.6vw,2.125rem);letter-spacing:.06em;line-height:1.1;
  color:var(--text);margin:0;text-wrap:balance}
.acct-sub{margin:0;font-size:clamp(.9375rem,1.1vw,1rem);line-height:1.6;
  color:var(--t2);max-width:44ch;text-wrap:pretty}

/* The panel is a frame, not a card: one hairline, one breath of light from the
   top edge, and the page's own ground showing through. A filled box here would
   be the one bright rectangle on a site that has none. */
.acct-panel{margin-top:clamp(30px,4vw,44px);padding:clamp(24px,3.4vw,38px);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(240,176,80,.045),transparent 62%),rgba(2,11,24,.42)}
.acct-form{display:grid;gap:clamp(16px,2vw,20px)}
.acct-field{display:flex;flex-direction:column;gap:8px;min-width:0;position:relative}
.acct-field > label{font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t2)}
.acct-field input{width:100%;min-height:50px;box-sizing:border-box;
  font-family:var(--body);font-size:1rem;color:var(--text);
  background:rgba(2,11,24,.55);border:1px solid var(--line);border-radius:0;
  padding:12px 14px;transition:border-color .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease)}
.acct-field input::placeholder{color:var(--t3)}
.acct-field input:hover{border-color:rgba(245,246,248,.2)}
/* Gold on focus, the same gold the mark above the form is struck in: these
   two pages take their colour from the lockup and nothing else. */
.acct-field input:focus{outline:none;border-color:var(--a-gold);
  background:rgba(2,11,24,.8);box-shadow:0 0 0 1px var(--a-edge)}
.acct-field--pw input{padding-right:72px}
.acct-peek{position:absolute;right:0;bottom:0;height:50px;padding:0 14px;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t2);transition:color .24s var(--ease)}
.acct-peek:hover,.acct-peek:focus-visible{color:var(--a-gold)}

.acct-row{display:flex;justify-content:flex-end}
.acct-link{font-size:.8125rem;color:var(--t2);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .24s var(--ease),border-color .24s var(--ease)}
.acct-link:hover,.acct-link:focus-visible{color:var(--a-gold);border-bottom-color:var(--a-edge)}

.acct-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  text-decoration:none;text-align:center;
  width:100%;min-height:54px;padding:16px 30px;cursor:pointer;
  font-family:var(--body);font-size:.8125rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--a-gold);border:1px solid var(--a-gold);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.acct-submit:hover,.acct-submit:focus-visible{background:var(--a-gold-l);border-color:var(--a-gold-l);
  box-shadow:0 0 30px -10px rgba(240,208,112,.55)}
.acct-submit[disabled]{opacity:.55;cursor:default;box-shadow:none}

.acct-alt{margin:clamp(20px,2.6vw,26px) 0 0;text-align:center;
  font-size:.875rem;color:var(--t2)}
.acct-alt a{color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--a-edge);transition:color .24s var(--ease)}
.acct-alt a:hover,.acct-alt a:focus-visible{color:var(--a-gold)}
.acct-note{margin:clamp(22px,3vw,30px) 0 0;text-align:center;
  font-size:11px;letter-spacing:.02em;color:var(--t3);line-height:1.7}

/* A message the form puts up: an error from the API, or the state a signup
   lands in while payment has nowhere to go yet. */
.acct-msg{margin:0 0 4px;padding:12px 14px;font-size:.8125rem;line-height:1.55;
  border:1px solid var(--line);background:rgba(2,11,24,.5);color:var(--t2)}
.acct-msg[hidden]{display:none!important}
.acct-msg.is-error{border-color:rgba(219,83,83,.45);color:#F0A8A8}
.acct-msg.is-ok{border-color:var(--a-edge);color:var(--a-gold)}

/* ── join ──────────────────────────────────────────────────────────────── */
.acct--join{--acct-w:1180px}
.acct--join .acct-sub{max-width:52ch}

.plan-switch{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px)}
.plan-switch-inner{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  background:rgba(2,11,24,.45)}
.plan-switch button{padding:13px clamp(18px,2.4vw,30px);
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t2);background:none;border:0;
  transition:color .26s var(--ease),background .26s var(--ease)}
.plan-switch button[aria-pressed="true"]{color:var(--ink);background:var(--a-gold)}
.plan-save{display:inline-block;margin-left:9px;padding:2px 7px;
  font-size:8.5px;font-weight:700;letter-spacing:.14em;
  color:var(--a-white);border:1px solid rgba(240,240,240,.38)}
.plan-switch button[aria-pressed="true"] .plan-save{color:var(--ink);border-color:rgba(2,11,24,.35)}

.plans{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(34px,4.6vw,52px);
  grid-template-columns:1fr}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}

/* Each card is an access credential, not a price box: a hairline, a band of
   its own colour along the top edge, and the page showing through. The three
   read as one family because the band is the only thing that changes. */
.plan{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,34px);border:1px solid var(--line);
  background:rgba(2,11,24,.42)}
.plan::before{content:'';position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--plan-a),var(--plan-b))}
.plan--basic{--plan-a:var(--a-deep);--plan-b:rgba(240,176,80,.18)}
.plan--pro{--plan-a:var(--a-gold);--plan-b:var(--a-gold-l);
  border-color:var(--a-edge);
  background:linear-gradient(180deg,rgba(240,176,80,.06),transparent 55%),rgba(2,11,24,.5)}
.plan--exec{--plan-a:var(--a-gold-l);--plan-b:var(--a-white);
  border-color:rgba(240,240,240,.26);
  background:linear-gradient(180deg,rgba(240,240,240,.05),transparent 55%),rgba(2,11,24,.5)}
.plan-flag{position:absolute;top:0;right:clamp(18px,2.4vw,26px);transform:translateY(-50%);
  padding:4px 10px;font-size:8.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);background:var(--a-gold)}
.plan-name{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);letter-spacing:.05em;color:var(--text);margin:0}
.plan-role{margin:7px 0 0;font-size:9.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t3)}
.plan-price{margin:clamp(16px,2vw,22px) 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-amount{font-family:var(--display);font-weight:800;
  font-size:clamp(1.75rem,3.2vw,2.375rem);letter-spacing:.01em;color:var(--text);line-height:1}
.plan-per{font-size:.8125rem;color:var(--t2)}
.plan-tag{margin:clamp(12px,1.6vw,16px) 0 0;font-size:.9375rem;line-height:1.6;color:var(--t2)}
.plan-for{margin:9px 0 0;font-size:.8125rem;line-height:1.6;color:var(--t3)}
.plan-inc{margin:clamp(20px,2.6vw,26px) 0 6px;font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;
  font-size:.9375rem;line-height:1.55;color:var(--text)}
.plan-list li::before{content:'✓';color:var(--plan-a);font-size:.8125rem;line-height:1.7}
.plan-list small{display:block;margin-top:4px;font-size:.8125rem;line-height:1.55;color:var(--t2)}
.plan-cta{margin-top:auto;padding-top:clamp(22px,2.8vw,28px)}
.plan-cta .acct-submit{min-height:50px}
.plan--basic .acct-submit{color:var(--text);background:none;border-color:var(--a-edge)}
.plan--basic .acct-submit:hover{color:var(--ink);background:var(--a-gold);border-color:var(--a-gold)}
.plan--exec .acct-submit{background:var(--a-white);border-color:var(--a-white)}
.plan--exec .acct-submit:hover{background:#FFF;border-color:#FFF;
  box-shadow:0 0 30px -10px rgba(240,240,240,.5)}

/* ── the signup step, revealed by choosing a membership ─────────────────── */
.acct-step{margin-top:clamp(40px,5vw,64px)}
.acct-step[hidden]{display:none!important}
.acct-step .acct-panel{--acct-w:520px;max-width:520px;margin-inline:auto}
.acct-chosen{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 clamp(18px,2.2vw,24px);padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.acct-chosen b{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:1rem;color:var(--text)}
.acct-chosen span{font-size:.8125rem;color:var(--t2)}
.acct-pair{display:grid;gap:clamp(16px,2vw,20px)}
@media(min-width:560px){.acct-pair{grid-template-columns:1fr 1fr}}
.acct-terms{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:.8125rem;line-height:1.6;color:var(--t2)}
.acct-terms input{width:17px;height:17px;margin-top:2px;accent-color:var(--a-gold)}
.acct-terms a{color:var(--text);border-bottom:1px solid var(--a-edge);text-decoration:none}

/* ── account entry in the header ────────────────────────────────────────────
   Two links and the menu control share the right-hand end of the bar. Login is
   quiet — it is for people who already belong — and Join carries the emphasis,
   but only as much as a hairline and gold: a filled button here would outweigh
   the wordmark it sits beside.

   The gold is #F0B050, the same value the account pages take as --a-gold and
   the same one it is sampled from — the face of the monogram in the mark at
   the other end of this bar. It is written out rather than referenced because
   --a-gold is declared on .acct and these three rules are global: the header
   is on every page, and most of them have no .acct on them at all.

   Login used to be dropped below 560px on the grounds that three tap targets
   plus a wordmark do not fit a 320px bar. They do — what did not fit was
   Login at the same size and spacing it has on a desktop. It is the only way
   back in for a member who already belongs, so on a phone it keeps its place
   and loses its padding instead: the gap closes, the type steps down, and the
   mark shrinks at 360 as it already did. Measured at 320px, the narrowest
   width the site supports, with room to spare. */
.bar-acct{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);margin-left:auto;
  margin-right:clamp(14px,2.2vw,28px)}
.bar-login,.bar-join{font-family:var(--body);font-weight:700;
  font-size:clamp(10px,.82vw,11.5px);letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:color .3s var(--ease),
  border-color .3s var(--ease),background .3s var(--ease)}
.bar-login{color:var(--t2)}
.bar-login:hover,.bar-login:focus-visible{color:var(--text)}
/* HEC News, in the bar itself from 900px up. Below that the bar is already
   carrying the mark, two account links and the menu control at 320px, so it
   steps out and the menu carries it — the same link, one tap further. */
.bar-news{display:none}
@media(min-width:900px){
  .bar-news{display:inline-flex;align-items:center;font-family:var(--body);font-weight:700;
    font-size:clamp(10px,.82vw,11.5px);letter-spacing:.2em;text-transform:uppercase;
    text-decoration:none;white-space:nowrap;color:var(--t2);
    transition:color .3s var(--ease)}
  .bar-news:hover,.bar-news:focus-visible{color:var(--text)}
  .bar-news[aria-current="page"]{color:var(--a-gold)}
}
.bar-join{color:#F0B050;border:1px solid rgba(240,176,80,.42);
  padding:9px clamp(11px,1.3vw,17px);line-height:1}
.bar-join:hover,.bar-join:focus-visible{color:var(--ink);background:#F0B050;border-color:#F0B050}
@media(max-width:560px){
  .bar-acct{gap:clamp(8px,2.4vw,14px);margin-right:clamp(8px,2.4vw,14px)}
  .bar-login,.bar-join{font-size:clamp(9px,2.5vw,10.5px);letter-spacing:.14em}
  /* The text is small; the target is not. Padding takes both links to the
     full height of the bar, so a thumb hits a 44px box while the eye still
     reads a quiet 10px label. Vertical padding only — horizontal room is the
     scarce thing at 320px. */
  .bar-login{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .bar-join{padding:0 clamp(9px,2.4vw,13px);min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:380px){
  .bar-acct{gap:7px;margin-right:7px}
  .bar-login,.bar-join{font-size:8.5px;letter-spacing:.1em}
  .bar-join{padding:0 9px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOIN HEC · THE PATHWAYS, THE DASHBOARD AND CURRENT EVENTS

   Everything here is scoped under .acct--join, .acct--dash or .ce-*, so none
   of it can reach a page that existed before. It uses the account palette the
   membership pages already declare — the four golds and the white sampled out
   of the lockup — rather than introducing a fifth.

   A selected plan is never indicated by colour alone. Every state carries a
   word as well: Requested, Requires <plan>, or a plain label. Section 9 asks
   for that, and it is also the only way the distinction survives a monochrome
   screen or a reader who cannot see the gold.
   ═══════════════════════════════════════════════════════════════════════════ */

.acct--join{--acct-w:1180px}
.acct--dash{--acct-w:960px}
.acct-sub--wide{max-width:64ch}
.acct-step-title{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.125rem,2.2vw,1.5rem);letter-spacing:.05em;line-height:1.2;
  color:var(--text);margin:0 0 clamp(10px,1.4vw,14px);text-wrap:balance}
.jn-step{margin-top:clamp(30px,4vw,44px)}
.jn-group-label{margin-top:clamp(34px,4.4vw,50px)}
.jn-hint{margin:0 0 clamp(14px,1.8vw,18px);font-size:.9375rem;line-height:1.6;color:var(--t2);
  max-width:62ch;text-wrap:pretty}
.jn-foot{margin-top:clamp(40px,5vw,60px);max-width:64ch;margin-inline:auto}

/* ── the dashboard ──────────────────────────────────────────────────────── */
.dash-head{margin-bottom:clamp(22px,3vw,30px)}
.dash-facts{display:grid;gap:clamp(12px,1.6vw,16px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.dash-facts{grid-template-columns:repeat(5,1fr)}}
.dash-fact{padding:clamp(14px,1.8vw,18px);border:1px solid var(--line);background:rgba(2,11,24,.42)}
.dash-fact-l{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t3)}
.dash-fact-v{margin:8px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1;color:var(--a-gold)}
.dash-fact-n{margin:7px 0 0;font-size:11px;line-height:1.5;color:var(--t2)}
.dash-card{margin-top:clamp(22px,3vw,30px);padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--line);background:rgba(2,11,24,.42)}
.dash-steps{list-style:none;margin:clamp(14px,1.8vw,18px) 0 0;padding:0;display:grid;gap:12px;
  counter-reset:step}
.dash-steps li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-size:.9375rem;line-height:1.55;color:var(--text);counter-increment:step}
.dash-steps li::before{content:counter(step,decimal-leading-zero);flex:0 0 auto;
  font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.08em;color:var(--t3)}
/* Done is a tick and a colour, so it survives without the colour. */
.dash-steps li[data-done] span:first-of-type{color:var(--t2)}
.dash-steps li[data-done]::after{content:'✓ done';order:9;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--a-gold)}
.dash-list{list-style:none;margin:clamp(14px,1.8vw,18px) 0 0;padding:0;display:grid;gap:12px}
.dash-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--text)}
.dash-proj{font-size:.8125rem;color:var(--t2)}
.dash-cost{margin-left:auto;font-size:.8125rem;color:var(--t2);white-space:nowrap}
.dash-badge{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--a-edge);color:var(--a-gold)}
.dash-out{margin-top:clamp(26px,3.4vw,36px)}

/* ── current events ─────────────────────────────────────────────────────── */
.ce-filters{margin-bottom:clamp(20px,2.6vw,28px)}
.ce-filters[hidden]{display:none}
.ce-grid{display:grid;gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.ce-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);
  background:#040B1B;overflow:hidden;transition:border-color .4s var(--ease)}
.ce-card:hover,.ce-card:focus-visible{border-color:var(--a-edge)}
.ce-card[hidden]{display:none}
.ce-card--featured{border-color:var(--a-edge)}
.ce-shot{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;
  transition:transform 1.1s var(--ease)}
.ce-shot--none{background:linear-gradient(140deg,#06162E,#020B18)}
.ce-card:hover .ce-shot{transform:scale(1.03)}
.ce-b{padding:clamp(16px,2vw,22px)}
.ce-flag{display:inline-block;margin-bottom:10px;padding:3px 9px;font-size:8.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--a-gold)}
.ce-cat{margin:0 0 8px;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a-gold)}
.ce-title{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.1875rem);letter-spacing:.03em;line-height:1.25;color:var(--text);
  text-wrap:balance}
.ce-meta{margin:9px 0 0;font-size:.8125rem;color:var(--t3)}
.ce-sum{margin:clamp(10px,1.4vw,14px) 0 0;font-size:.9375rem;line-height:1.6;color:var(--t2);
  text-wrap:pretty}
.ce-b .tlink{margin-top:clamp(14px,1.8vw,18px)}
.ce-empty{margin:0;padding:clamp(28px,4vw,46px);border:1px solid var(--line);
  background:rgba(2,11,24,.42);color:var(--t2);font-size:.9375rem;text-align:center}

/* an article */
.ce-article{padding:clamp(96px,13vh,150px) 0 clamp(64px,9vh,110px)}
.ce-wrap{width:min(100%,760px);margin-inline:auto;padding-inline:var(--gut)}
.ce-article .back{display:inline-block;margin-bottom:clamp(20px,2.6vw,28px)}
.ce-article .ce-cat{margin-bottom:12px}
.ce-lede{margin:clamp(16px,2vw,22px) 0 0;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.65;
  color:var(--t2);text-wrap:pretty}
.ce-hero{width:min(100%,1180px);margin:clamp(30px,4vw,44px) auto;padding-inline:var(--gut)}
.ce-hero img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.ce-body{margin-top:clamp(26px,3.4vw,38px)}
.ce-body p{margin:0 0 clamp(16px,2vw,22px);font-size:clamp(.9375rem,1.2vw,1.0625rem);
  line-height:1.8;color:var(--text);text-wrap:pretty}
.ce-body p:last-child{margin-bottom:0}

/* ── signup ─────────────────────────────────────────────────────────────── */
.acct--signup{--acct-w:560px}
.acct-head--tight{gap:clamp(10px,1.4vw,14px);margin-bottom:clamp(22px,3vw,30px)}
.su-back{margin:0 0 clamp(18px,2.4vw,24px)}
.su-done{color:var(--a-gold)}
.jn-paths{display:grid;gap:clamp(10px,1.4vw,14px);border:0;padding:0;margin:0 0 clamp(18px,2.4vw,24px)}
.jn-paths--five{grid-template-columns:1fr}
.jn-path{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:clamp(16px,2vw,20px);border:1px solid var(--line);background:rgba(2,11,24,.42);
  cursor:pointer;min-height:44px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.jn-path:hover{border-color:var(--a-edge)}
.jn-path input{width:20px;height:20px;margin-top:2px;accent-color:var(--a-gold);flex:0 0 auto}
.jn-path:has(input:checked){border-color:var(--a-gold);
  background:linear-gradient(180deg,rgba(240,176,80,.07),transparent 60%),rgba(2,11,24,.5)}
.jn-path:has(input:focus-visible){outline:2px solid var(--a-gold);outline-offset:2px}
.jn-path-b b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.8125rem,1.2vw,.9375rem);letter-spacing:.04em;color:var(--text);line-height:1.3}
.jn-path-b small{display:block;margin-top:6px;font-size:.875rem;line-height:1.5;color:var(--t2)}
.jn-actions{display:flex}
.jn-actions .acct-submit{width:100%}
.acct-submit--slim{width:auto;min-height:48px;padding:14px 26px}

/* ── terms and privacy ──────────────────────────────────────────────────── */
.legal{padding:calc(var(--bar-h) + clamp(48px,9vh,110px)) 0 clamp(64px,9vh,110px)}
.legal-wrap{width:min(100%,760px);margin-inline:auto;padding-inline:var(--gut)}
.legal-meta{margin:clamp(10px,1.4vw,14px) 0 0;font-size:.8125rem;color:var(--t3)}
.legal-review{margin:clamp(24px,3vw,32px) 0 0;padding:clamp(16px,2vw,20px);
  border:1px solid var(--a-edge);background:rgba(240,176,80,.06)}
.legal-review p{margin:0;font-size:.875rem;line-height:1.65;color:var(--text)}
.legal-review b{color:var(--a-gold-l)}
.legal h2{margin:clamp(30px,3.8vw,44px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(.9375rem,1.5vw,1.125rem);letter-spacing:.05em;
  color:var(--text)}
.legal p{margin:clamp(12px,1.6vw,16px) 0 0;font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.75;
  color:var(--t2);text-wrap:pretty}
.legal p b{color:var(--text)}
.legal a{color:var(--a-gold);text-decoration:none;border-bottom:1px solid var(--a-edge)}
.legal a:hover,.legal a:focus-visible{color:var(--a-gold-l)}

/* ── mobile: designed, not merely stacked ───────────────────────────────── */
@media(max-width:640px){
  .jn-hero{padding-top:calc(var(--bar-h) + 34px);padding-bottom:38px}
  .jn-hero-h{font-size:clamp(1.75rem,8.6vw,2.25rem)}
  .jn-hero-cta{flex-direction:column;gap:14px}
  .acct-submit--hero,.jn-free .acct-submit{width:100%;min-width:0}
  .jn-sec{padding:44px 0}
  /* Name above price rather than beside it: at 320px the two on one line is
     where a long package name starts pushing its price off the edge. */
  .jn-price-list li{flex-direction:column;align-items:flex-start;gap:3px}
  .jn-price-v{margin-left:0}
  .jn-pack-s{gap:4px 12px}
  .jn-pack-more{margin-left:0;flex-basis:100%}
  .jn-free-list{max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOIN · FOUR PAGES, ONE AUDIENCE EACH

   The gateway asks who you are and gets out of the way. Each dedicated page
   then speaks to one person, so nothing on it has to compete with a second
   audience's prices.

   The restraint is the design. One hairline, one weight of gold, one measure,
   and space where a pricing table would have been. Gold marks the action and
   the price and nothing else — headings are white, tile borders are the
   site's hairline, and a selected tile says so in words as well as colour.
   ═══════════════════════════════════════════════════════════════════════════ */

.gw-wrap{width:min(100%,var(--gw-w,1180px));margin-inline:auto;padding-inline:var(--gut)}
.gw-wrap--narrow{--gw-w:720px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%)}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumb{padding:calc(var(--bar-h) + clamp(22px,3vh,34px)) 0 0;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2)}
.crumb a{color:var(--t2);text-decoration:none;transition:color .3s var(--ease)}
.crumb a:hover,.crumb a:focus-visible{color:var(--a-gold)}
.crumb span{margin:0 8px}
.crumb [aria-current]{margin:0;color:var(--text)}

/* ── heroes ─────────────────────────────────────────────────────────────── */
.gw-hero{padding:calc(var(--bar-h) + clamp(64px,11vh,132px)) 0 clamp(40px,6vw,64px);text-align:center}
.gw-hero-in{width:min(100%,780px);margin-inline:auto;padding-inline:var(--gut)}
.gw-h1{margin:clamp(14px,1.8vw,18px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(2.125rem,6vw,4rem);letter-spacing:.005em;
  line-height:1.02;color:var(--text);text-wrap:balance}
.gw-lede{margin:clamp(18px,2.2vw,24px) auto 0;max-width:52ch;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--t2);text-wrap:pretty}
.gw-fine{margin:clamp(14px,1.8vw,18px) 0 0;font-size:.875rem;color:var(--t2)}

.pg-hero{padding:clamp(34px,5vw,56px) 0 clamp(34px,5vw,54px)}
.pg-h1{margin:clamp(12px,1.6vw,16px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(1.875rem,5vw,3.25rem);letter-spacing:.005em;
  line-height:1.05;color:var(--text);text-wrap:balance}
.pg-lede{margin:clamp(16px,2vw,22px) 0 0;max-width:56ch;font-size:clamp(1rem,1.4vw,1.1875rem);
  line-height:1.65;color:var(--t2);text-wrap:pretty}
.pg-fine{margin:clamp(12px,1.6vw,16px) 0 0;font-size:.875rem;color:var(--t2)}
.pg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.2vw,24px);
  margin-top:clamp(24px,3vw,32px)}
.pg-body{padding:clamp(36px,5vw,60px) 0}
.pg-body--alt{background:rgba(2,11,24,.4);border-block:1px solid var(--line)}
.pg-h2{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,1.75rem);letter-spacing:.03em;color:var(--text)}
.pg-p{margin:clamp(12px,1.6vw,16px) 0 clamp(26px,3.4vw,36px);max-width:62ch;
  font-size:.9375rem;line-height:1.65;color:var(--t2);text-wrap:pretty}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn-gold,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:15px 30px;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;border-radius:0;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),
    transform .3s var(--ease)}
.btn-gold{color:var(--ink);background:var(--a-gold);border:1px solid var(--a-gold)}
.btn-gold:hover,.btn-gold:focus-visible{background:var(--a-gold-l);border-color:var(--a-gold-l);
  transform:translateY(-1px)}
.btn-quiet{color:var(--text);background:none;border:1px solid var(--line)}
.btn-quiet:hover,.btn-quiet:focus-visible{border-color:var(--a-gold);color:var(--a-gold)}
.btn-gold--wide,.btn-quiet--wide{width:100%}
.btn-gold:focus-visible,.btn-quiet:focus-visible{outline:2px solid var(--a-gold);outline-offset:3px}

/* ── the three gateway tiles ────────────────────────────────────────────── */
.gw-paths{padding:clamp(10px,2vw,20px) 0 clamp(52px,7vw,84px)}
.gw-grid{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr}
@media(min-width:900px){.gw-grid{grid-template-columns:repeat(3,1fr)}}
.gw-tile{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3.2vw,38px);
  border:1px solid var(--line);background:rgba(2,11,24,.36);
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease)}
/* A corner flag, flush to the tile's own corner, in the same gold and the
   same shape the filming-location cards use — one idiom for one meaning. The
   tile keeps its full padding: the flag sits in the corner rather than in the
   flow, so nothing below it moves to make room. */
.gw-tile--soon{padding-top:clamp(44px,4.6vw,56px)}
.gw-soon{position:absolute;top:0;left:0;z-index:2;
  padding:8px clamp(10px,1.1vw,14px);
  font-family:var(--body);font-weight:800;
  font-size:clamp(9.5px,.78vw,11px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-l);background:rgba(2,11,24,.86);
  border-right:1px solid rgba(238,196,81,.34);
  border-bottom:1px solid rgba(238,196,81,.34)}
.gw-tile:hover{border-color:var(--a-edge);transform:translateY(-3px);background:rgba(2,11,24,.5)}
.gw-tile-k{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--t2)}
.gw-tile-h{margin:clamp(14px,1.8vw,18px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(1.0625rem,1.9vw,1.375rem);letter-spacing:.03em;
  line-height:1.2;color:var(--text);text-wrap:balance}
.gw-tile-p{margin:clamp(12px,1.5vw,15px) 0 0;font-size:.9375rem;line-height:1.6;color:var(--t2);
  text-wrap:pretty}
.gw-tile-l{list-style:none;margin:clamp(18px,2.2vw,24px) 0 0;padding:0;display:grid;gap:9px}
.gw-tile-l li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.875rem;
  line-height:1.5;color:var(--t2)}
.gw-tile-l li::before{content:'';width:4px;height:4px;margin-top:8px;border-radius:50%;
  background:var(--a-gold)}
.gw-tile-price{margin:clamp(20px,2.6vw,26px) 0 0;padding-top:clamp(18px,2.2vw,22px);
  border-top:1px solid var(--line);font-family:var(--display);font-weight:700;
  font-size:.9375rem;letter-spacing:.02em;color:var(--a-gold)}
.gw-tile-b{margin-top:clamp(18px,2.2vw,24px);display:inline-flex;align-items:center;
  justify-content:center;min-height:48px;padding:15px 22px;text-decoration:none;
  font-family:var(--body);font-size:.6875rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text);border:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.gw-tile:hover .gw-tile-b{border-color:var(--a-gold);color:var(--a-gold)}
.gw-tile-b:hover,.gw-tile-b:focus-visible{background:var(--a-gold);border-color:var(--a-gold);
  color:var(--ink)}
.gw-tile-b:focus-visible{outline:2px solid var(--a-gold);outline-offset:3px}

/* ── the closing statement ──────────────────────────────────────────────── */
.gw-close{padding:clamp(44px,6vw,76px) 0;border-top:1px solid var(--line);text-align:center}
.gw-close-p{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.375rem);letter-spacing:.04em;color:var(--text)}
.gw-close-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:clamp(22px,2.8vw,30px)}

/* ── the audience panel ─────────────────────────────────────────────────── */
.panel{padding:clamp(30px,4vw,46px);border:1px solid var(--a-edge);
  background:linear-gradient(180deg,rgba(240,176,80,.05),transparent 58%),rgba(2,11,24,.46);
  text-align:center}
.panel-h{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.0625rem,2vw,1.3125rem);letter-spacing:.05em;color:var(--text)}
.panel-price{margin:clamp(10px,1.4vw,14px) 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,6vw,3.5rem);line-height:1;color:var(--a-gold)}
.panel-l{list-style:none;margin:clamp(24px,3vw,34px) auto 0;padding:0;display:grid;gap:12px;
  text-align:left;max-width:420px}
.panel-l li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.9375rem;
  line-height:1.5;color:var(--text)}
.panel-l li::before{content:'';width:4px;height:4px;margin-top:9px;border-radius:50%;
  background:var(--a-gold)}
.panel .btn-gold{margin-top:clamp(26px,3.2vw,34px);max-width:340px;margin-inline:auto}
.panel-alt{margin:clamp(14px,1.8vw,18px) 0 0;font-size:.875rem;color:var(--t2)}
.panel-alt a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--a-edge)}
.panel-alt a:hover,.panel-alt a:focus-visible{color:var(--a-gold)}

/* ── complete vs custom ─────────────────────────────────────────────────── */
.pick{display:grid;gap:clamp(16px,2.2vw,24px);grid-template-columns:1fr}
@media(min-width:860px){.pick{grid-template-columns:1fr 1fr}}
.pick-c{display:flex;flex-direction:column;padding:clamp(26px,3.2vw,38px);
  border:1px solid var(--line);background:rgba(2,11,24,.36);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.pick-c:hover{border-color:var(--a-edge);transform:translateY(-2px)}
.pick-c--feat{border-color:var(--a-edge);
  background:linear-gradient(180deg,rgba(240,176,80,.06),transparent 55%),rgba(2,11,24,.48)}
.pick-c.is-on{border-color:var(--a-gold)}
.pick-badge{margin:0 0 clamp(12px,1.6vw,16px);font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--a-gold)}
.pick-h{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.0625rem,2vw,1.375rem);letter-spacing:.03em;line-height:1.2;color:var(--text)}
.pick-price{margin:clamp(12px,1.6vw,16px) 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.75rem,3.6vw,2.375rem);line-height:1;color:var(--a-gold)}
.pick-price span{font-family:var(--body);font-weight:400;font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t2)}
.pick-p{margin:clamp(14px,1.8vw,18px) 0 0;font-size:.9375rem;line-height:1.6;color:var(--t2);
  text-wrap:pretty}
.pick-l{list-style:none;margin:clamp(18px,2.2vw,24px) 0 clamp(24px,3vw,32px);padding:0;
  display:grid;gap:9px}
.pick-l li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.875rem;line-height:1.5;
  color:var(--text)}
.pick-l li::before{content:'';width:4px;height:4px;margin-top:8px;border-radius:50%;
  background:var(--a-gold)}
.pick-c .btn-gold,.pick-c .btn-quiet{margin-top:auto}

/* ── service and membership tiles ─────────────────────────────────────────
   Named .offer, not .svc: .svc is already the homepage service rotator and
   carries text-align:center, which quietly centred every tile here and left
   the bullets stranded at the left edge. A class name is a global, and this
   stylesheet is one file.
   ───────────────────────────────────────── */
.offer{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:1fr}
@media(min-width:760px){.offer{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.offer--four{grid-template-columns:repeat(4,1fr)}}
.offer-t{display:flex;flex-direction:column;padding:clamp(22px,2.8vw,30px);
  border:1px solid var(--line);background:rgba(2,11,24,.36);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.offer-t:hover{border-color:var(--a-edge);transform:translateY(-2px)}
/* Selected says so in words, so the state survives without the colour. */
.offer-t.is-on{border-color:var(--a-gold);
  background:linear-gradient(180deg,rgba(240,176,80,.06),transparent 55%),rgba(2,11,24,.5)}
.offer-t-badge{margin:0 0 12px;font-size:9px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--a-gold)}
.offer-t-h{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.9375rem,1.6vw,1.125rem);letter-spacing:.03em;line-height:1.25;color:var(--text)}
.offer-t-price{margin:10px 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.125rem,2vw,1.375rem);color:var(--a-gold)}
.offer-t-p{margin:clamp(12px,1.5vw,15px) 0 0;font-size:.875rem;line-height:1.55;color:var(--t2);
  text-wrap:pretty}
.offer-t-l{list-style:none;margin:clamp(16px,2vw,20px) 0 clamp(22px,2.8vw,28px);padding:0;
  display:grid;gap:8px}
.offer-t-l li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.875rem;line-height:1.5;
  color:var(--t2)}
.offer-t-l li::before{content:'';width:4px;height:4px;margin-top:8px;border-radius:50%;
  background:var(--a-gold)}
.offer-t .btn-gold{margin-top:auto}

/* ── the running total ──────────────────────────────────────────────────── */
.sum{padding:clamp(24px,3vw,34px);border:1px solid var(--line);background:rgba(2,11,24,.46)}
.sum-h{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.9375rem,1.6vw,1.125rem);letter-spacing:.05em;color:var(--text)}
.sum-empty{margin:clamp(12px,1.6vw,16px) 0 0;font-size:.9375rem;line-height:1.6;color:var(--t2)}
.sum-l{list-style:none;margin:clamp(18px,2.2vw,22px) 0 0;padding:0;display:grid;gap:0}
.sum-l li{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--text)}
.sum-l b{margin-left:auto;font-family:var(--display);font-weight:700;color:var(--a-gold);
  white-space:nowrap}
.sum-t{display:flex;flex-wrap:wrap;gap:8px 20px;margin:clamp(16px,2vw,20px) 0 0}
.sum-t span{font-family:var(--display);font-weight:800;font-size:clamp(1.125rem,2.2vw,1.5rem);
  color:var(--a-gold)}
.sum .btn-gold{margin-top:clamp(20px,2.6vw,26px)}
.sum-note{margin:clamp(14px,1.8vw,18px) 0 0;font-size:.8125rem;line-height:1.6;color:var(--t2)}

/* ── the way out ────────────────────────────────────────────────────────── */
.gw-other{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line)}
.gw-other-h{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--t2)}
.gw-other-l{display:grid;gap:12px;margin-top:clamp(16px,2vw,20px)}
.gw-other-l a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:.9375rem;color:var(--t2);text-decoration:none;
  transition:color .3s var(--ease)}
.gw-other-l a:hover,.gw-other-l a:focus-visible{color:var(--a-gold)}
/* A standalone link is a target and gets a target's height. The links that
   stay small — "Sign in" at the end of a sentence, Terms and Privacy inside
   the consent label — sit inside a block of text, which is the case WCAG's
   target-size rule exempts; padding them to 44px would break the sentence
   they belong to. */
.su-back a{display:inline-flex;align-items:center;min-height:44px}
.su-carried{margin:clamp(12px,1.6vw,16px) 0 0;padding:10px 14px;border:1px solid var(--a-edge);
  background:rgba(240,176,80,.06);font-size:.8125rem;color:var(--text)}

@media(max-width:640px){
  .gw-hero{padding-top:calc(var(--bar-h) + 40px);padding-bottom:30px}
  .gw-h1{font-size:clamp(1.875rem,9vw,2.375rem)}
  .pg-cta,.gw-close-cta{flex-direction:column;align-items:stretch}
  .btn-gold,.btn-quiet{width:100%}
  .sum-l li{flex-direction:column;align-items:flex-start;gap:3px}
  .sum-l b{margin-left:0}
}

/* ═══ SEE ALL N FILMS ═════════════════════════════════════════════
   The slate counter under HEC Films on the homepage and under HEC
   Originals & Projects on Our Slate. Label-register type in the site's
   light text, the gold hairline the text links already carry, and the
   same widening-gap hover. Only the number changes colour: a warm
   cinema red (4.6:1 on the page navy) one weight heavier and a touch
   larger than the words around it. The number is written by hec.js from
   projects.json — it is never in the markup. */
.slate-cta{display:flex;width:fit-content;align-items:baseline;gap:.62em;
  font-family:var(--body);font-size:clamp(11px,.9vw,13px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  color:var(--text);text-decoration:none;padding-bottom:7px;
  border-bottom:1px solid rgba(201,162,39,.3);
  transition:gap .35s var(--ease),border-color .35s var(--ease)}
.slate-cta:hover,.slate-cta:focus-visible{gap:.9em;border-bottom-color:rgba(238,196,81,.7)}
.slate-cta .film-count{font-weight:800;font-size:1.16em;letter-spacing:.06em;
  color:#D9534A;font-variant-numeric:tabular-nums}
.slate-cta .film-count[hidden]{display:none}
.slate-cta-arrow{letter-spacing:0;transition:transform .35s var(--ease)}
.slate-cta:hover .slate-cta-arrow,.slate-cta:focus-visible .slate-cta-arrow{transform:translateX(3px)}
.entrance .slate-cta{margin-top:clamp(18px,2.2vw,28px)}
/* the listing the Our Slate counter scrolls to clears the fixed bar */
#slate{scroll-margin-top:calc(var(--bar-h) + 24px)}
@media(prefers-reduced-motion:reduce){
  .slate-cta,.slate-cta-arrow{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOIN HEC — ONE FREE SIGNUP
   ───────────────────────────────────────────────────────────────────────────
   /join/ is a single invitation: news, updates and first word on what HEC is
   building. The page opens on a full-bleed photograph with the promise over
   it, then says what a member gets, then what is coming, then asks once more.
   /signup/ carries the same promise beside the form. Gold is the only accent,
   as everywhere else; the one live element is the small pulse on the
   eyebrow's dot, and it stops for reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.jh-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--body);font-size:clamp(10.5px,.86vw,12px);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--a-gold)}
.jh-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--a-gold)}
.jh-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--a-gold);
  animation:jhPulse 2.4s var(--ease) infinite}
@keyframes jhPulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.2);opacity:0}}

/* the hero: photograph, scrim, promise */
.jh-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:min(92svh,860px);padding:calc(var(--bar-h) + clamp(60px,10vh,120px)) 0 clamp(56px,9vh,104px);
  overflow:hidden}
.jh-hero-art,.jh-hero-art img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.jh-hero-art img{object-fit:cover;object-position:62% 45%;transform:scale(1.04);
  animation:jhDrift 18s var(--ease) both}
@keyframes jhDrift{from{transform:scale(1.12)}to{transform:scale(1.04)}}
.jh-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(2,11,24,.94) 0%,rgba(2,11,24,.78) 38%,rgba(2,11,24,.22) 72%,rgba(2,11,24,.4) 100%),
    linear-gradient(0deg,var(--page) 0%,rgba(12,21,35,0) 34%)}
/* the same measure as the sections below, so the hero copy lines up with them */
.jh-hero-in{width:min(100%,var(--gw-w,1180px));margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box}
.jh-h1{margin:clamp(16px,2vw,24px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(2.75rem,8.2vw,6.75rem);line-height:.92;
  letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.jh-lede{margin:clamp(20px,2.4vw,28px) 0 0;max-width:48ch;
  font-size:clamp(1rem,1.45vw,1.25rem);line-height:1.6;color:rgba(245,246,248,.82);text-wrap:pretty}
.jh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(28px,3.4vw,40px)}
.jh-btn{gap:12px;min-height:56px;padding:18px 36px;font-size:.8125rem;
  box-shadow:0 12px 40px -12px rgba(240,176,80,.55)}
.jh-btn span{transition:transform .3s var(--ease)}
.jh-btn:hover span,.jh-btn:focus-visible span{transform:translateX(4px)}
.jh-signin{font-size:.875rem;color:var(--t2);text-decoration:none}
.jh-signin b{color:var(--text);font-weight:600;border-bottom:1px solid var(--a-edge)}
.jh-signin:hover b,.jh-signin:focus-visible b{color:var(--a-gold)}
.jh-fine{margin:clamp(16px,2vw,20px) 0 0;font-size:.8125rem;color:var(--t3)}

/* what you get */
.jh-get,.jh-soon{padding:clamp(64px,9vw,120px) 0}
.jh-h2{margin:clamp(12px,1.4vw,16px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(1.75rem,4vw,3rem);line-height:1;color:var(--text);
  max-width:20ch;text-wrap:balance}
.jh-grid,.jh-soon-grid{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr;
  margin-top:clamp(34px,4.4vw,56px)}
@media(min-width:860px){.jh-grid,.jh-soon-grid{grid-template-columns:repeat(3,1fr)}}
.jh-card{position:relative;padding:clamp(26px,3vw,36px);border:1px solid var(--line);
  background:rgba(2,11,24,.36);overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.jh-card::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--a-gold),transparent);transform:scaleX(.18);
  transform-origin:left;transition:transform .6s var(--ease)}
.jh-card:hover{border-color:var(--a-edge);transform:translateY(-3px)}
.jh-card:hover::before{transform:scaleX(1)}
.jh-n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,3vw,2.75rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(240,176,80,.62)}
.jh-card-h{margin:clamp(18px,2.2vw,26px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:.03em;color:var(--text)}
.jh-card-p{margin:clamp(10px,1.2vw,14px) 0 0;font-size:.9375rem;line-height:1.65;color:var(--t2)}

/* coming soon */
.jh-soon{border-top:1px solid var(--line);
  background:radial-gradient(90% 70% at 85% 0%,rgba(240,176,80,.07),transparent 60%),rgba(2,11,24,.38)}
.jh-soon-p{margin:clamp(16px,2vw,22px) 0 0;max-width:56ch;font-size:clamp(.9375rem,1.2vw,1.0625rem);
  line-height:1.65;color:var(--t2)}
.jh-feat{position:relative;display:flex;flex-direction:column;min-height:100%;
  padding:clamp(52px,5vw,64px) clamp(24px,2.8vw,34px) clamp(24px,2.8vw,32px);
  border:1px solid var(--line);background:rgba(2,11,24,.5);text-decoration:none;color:inherit;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
a.jh-feat:hover,a.jh-feat:focus-visible{border-color:var(--a-gold);transform:translateY(-4px);
  box-shadow:0 22px 50px -26px rgba(240,176,80,.45)}
a.jh-feat:focus-visible{outline:2px solid var(--a-gold);outline-offset:3px}
.jh-badge{position:absolute;top:0;left:0;padding:8px 14px;
  font-family:var(--body);font-weight:800;font-size:clamp(9.5px,.78vw,11px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);background:var(--a-gold)}
.jh-feat-h{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:.03em;color:var(--text)}
.jh-feat-p{margin:clamp(10px,1.2vw,14px) 0 0;flex:1;font-size:.9375rem;line-height:1.65;color:var(--t2)}
.jh-feat-when{margin-top:clamp(20px,2.4vw,26px);padding-top:clamp(14px,1.6vw,18px);
  border-top:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--a-gold)}

/* the last ask */
.jh-close{padding:clamp(72px,10vw,130px) 0;text-align:center;border-top:1px solid var(--line)}
.jh-close-h{margin:0 0 clamp(26px,3.2vw,38px);font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:.98;color:var(--text)}

/* ── /signup/: the promise beside the form ─────────────────────────────── */
.su{padding:calc(var(--bar-h) + clamp(28px,5vh,56px)) 0 clamp(64px,9vh,110px)}
.su-wrap{width:var(--frame-w);margin-inline:auto;display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.su-wrap{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.su-pitch{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);
  min-height:clamp(260px,40vw,340px);display:flex;align-items:flex-end}
@media(min-width:980px){.su-pitch{position:sticky;top:calc(var(--bar-h) + 24px);min-height:min(72vh,640px)}}
.su-pitch-art,.su-pitch-art img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.su-pitch-art img{object-fit:cover;object-position:60% 40%}
.su-pitch::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(2,11,24,.96) 0%,rgba(2,11,24,.74) 46%,rgba(2,11,24,.2) 100%)}
.su-pitch-in{padding:clamp(24px,3.4vw,44px)}
.su-pitch-h{margin:clamp(12px,1.6vw,18px) 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.75rem);line-height:.94;color:var(--text)}
.su-pitch-l{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;display:grid;gap:14px}
.su-pitch-l li{position:relative;padding-left:22px;font-size:.9375rem;line-height:1.55;color:var(--t2)}
.su-pitch-l li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--a-gold)}
.su-pitch-l b{display:block;color:var(--text);font-weight:700}
.su-main{min-width:0}
.su-head{justify-items:start;text-align:left}
.su-panel{margin-top:clamp(20px,2.6vw,28px)}
.su-news{padding:14px 16px;border:1px solid var(--a-edge);
  background:linear-gradient(180deg,rgba(240,176,80,.08),rgba(240,176,80,.03))}
.su-news b{color:var(--text)}
.su-main .acct-submit{gap:12px}
.su-main .acct-alt{text-align:left}

/* the welcome */
.su-welcome{padding:clamp(28px,4vw,48px);border:1px solid var(--a-edge);
  background:radial-gradient(120% 80% at 0% 0%,rgba(240,176,80,.1),transparent 60%),rgba(2,11,24,.46);
  outline:none;animation:jhIn .7s var(--ease) both}
@keyframes jhIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.su-welcome-h{margin-top:clamp(12px,1.6vw,16px);font-size:clamp(2.25rem,5vw,3.5rem)}
.su-welcome .acct-sub{margin-top:10px}
.su-welcome .acct-msg{margin-top:18px}
.su-next{list-style:none;margin:clamp(22px,3vw,30px) 0 0;padding:0;display:grid;gap:12px}
.su-next li{position:relative;padding-left:22px;font-size:.9375rem;line-height:1.55;color:var(--t2)}
.su-next li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--a-gold)}
.su-next b{color:var(--text)}
.su-welcome-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,34px)}

/* the free member's dashboard */
.dash-news .btn-gold,.dash-news .btn-quiet{margin-top:6px}

@media(prefers-reduced-motion:reduce){
  .jh-dot::after,.jh-hero-art img,.su-welcome{animation:none}
  .jh-card,.jh-card::before,.jh-feat{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   HEC NEWS — IN THE PRESS
   ───────────────────────────────────────────────────────────────────────────
   Other publishers' coverage, one row per story: the headline first, the
   photograph beside it, the summary under it, and the link out last. The
   photographs arrive in two shapes — standing portraits and wide ensembles —
   so each keeps its own, in a column of fixed width rather than a grid that
   would have to crop faces to square them up.
   ═══════════════════════════════════════════════════════════════════════════ */
.nw-title{margin:clamp(14px,1.8vw,20px) 0 0}
.nw-list{display:grid;gap:clamp(34px,4.4vw,60px);margin-top:clamp(36px,4.6vw,60px)}
.nw-item{display:grid;gap:clamp(16px,2.2vw,26px);
  grid-template-columns:1fr;align-items:start;
  padding-bottom:clamp(30px,3.8vw,48px);border-bottom:1px solid var(--line)}
.nw-list .nw-item:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:820px){
  .nw-item{grid-template-columns:minmax(0,340px) minmax(0,1fr);
    /* the headline takes what it needs; the summary starts directly under it
       rather than drifting down a tall portrait */
    grid-template-rows:auto 1fr;row-gap:clamp(12px,1.4vw,16px);
    column-gap:clamp(26px,3.2vw,44px);grid-template-areas:'shot head' 'shot text'}
  .nw-head,.nw-text{align-self:start}
  .nw-head{grid-area:head}
  .nw-shot{grid-area:shot}
  .nw-text{grid-area:text}
}
.nw-head a{color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.nw-head a:hover,.nw-head a:focus-visible{color:var(--a-gold);border-bottom-color:var(--a-edge)}
.nw-head{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.75rem);line-height:1.12;letter-spacing:.01em;
  color:var(--text);text-wrap:balance}
.nw-shot{display:block;border:1px solid var(--line);background:#050B14;line-height:0;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.nw-shot img{width:100%;height:auto;display:block}
.nw-item:hover .nw-shot{border-color:var(--a-edge);transform:translateY(-2px)}
.nw-outlet{margin:0;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--a-gold)}
.nw-desc{margin:clamp(10px,1.3vw,14px) 0 0;max-width:64ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.68;color:var(--t2)}
.nw-more{margin:clamp(16px,2vw,22px) 0 0}
@media(prefers-reduced-motion:reduce){ .nw-shot{transition:none} }

/* ── HEC Insider: the sign-up for industry news ─────────────────────── */
.ins{padding-top:0}
.ins-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,40px);padding:clamp(24px,3.4vw,44px);border:1px solid var(--line);
  border-radius:3px;background:var(--n2)}
.ins-copy{flex:1 1 420px;max-width:64ch}
.ins-copy .t-label{display:block;margin-bottom:var(--gap-lab)}
.ins-h{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.375rem,2.4vw,2rem);line-height:1.15;color:var(--text)}
.ins-copy .t-body{margin:var(--gap-body) 0 0;color:var(--t2)}
.ins-btn{flex:0 0 auto;min-height:48px}
@media (max-width:640px){.ins-btn{width:100%}}