/* ============================================================
   THE REFINERY ENTERTAINMENT — global stylesheet
   Black & white. The only color comes from occasional gemstone
   accents (sapphire / ruby / emerald / amethyst / topaz).
   Fonts: Bodoni Moda (display, Saks-style Didone) + Inter (body).
   ============================================================ */

:root {
  --bg:        #050609;
  --bg-2:      #090b0f;
  --panel:     #0e1116;
  --panel-2:   #141821;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --ink:       #f4f6f9;
  --ink-soft:  #b9c0cb;
  --ink-mute:  #767e8c;

  /* chrome / silver — the metallic neutral that replaces gold */
  --chrome-1:  #ffffff;
  --chrome-2:  #d8dde6;
  --chrome-3:  #8a93a3;

  /* gemstone palette — used SPARINGLY, the site's only color */
  --gem-sapphire: #3f7bf5;
  --gem-ruby:     #e23b54;
  --gem-emerald:  #1fb574;
  --gem-amethyst: #9a6bff;
  --gem-topaz:    #f4b740;
  /* dark teal — the signature accent alongside black & white
     (deepened site-wide: accents now read as a darker petrol teal,
     still legible on the near-black background) */
  --teal-deep:    #0a3a34;
  --teal:         #135b50;
  --teal-bright:  #1f8f7d;
  --teal-glow:    rgba(31,143,125,.42);
  /* shared gemstone-CUT silhouette (flat table, faceted point) */
  --gem-clip:     polygon(30% 0%, 70% 0%, 100% 38%, 50% 100%, 0% 38%);
  /* spectral refraction used on faceted accents */
  --prism: linear-gradient(125deg, #6aa0ff 0%, #9a6bff 28%, #e23b54 52%, #f4b740 72%, #3fd9a0 100%);
  --prism-soft: linear-gradient(125deg, rgba(106,160,255,.9), rgba(154,107,255,.85), rgba(226,59,84,.85), rgba(244,183,64,.85), rgba(63,217,160,.9));

  /* legacy accent tokens repointed to silver/white so the whole UI reads
     monochrome; gem color is added back deliberately via .gem and --prism */
  --gold:      #d9dee7;   /* now silver */
  --gold-soft: #ffffff;   /* now white  */
  --gem-red:   var(--gem-ruby);
  --gem-blue:  var(--gem-sapphire);

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1280px;
  --nav-h:     74px;

  --shadow:    0 30px 70px -22px rgba(0,0,0,.85);
  --ease:      cubic-bezier(.22,.61,.36,1);

  --font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: #000;
  position: relative;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) so the page isn't turned into a scroll container and
     overflow-y stays visible — prevents subtle sticky/scroll quirks */
  overflow-x: clip;
}
/* Layer 1 — glassmorphic photographic backdrop: dark frosted glass with cinematic
   prism refraction flares, held behind a dark scrim so white text stays legible. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 60% at 50% 8%, rgba(19,91,80,.16), transparent 60%),
    linear-gradient(180deg, rgba(4,6,9,.52) 0%, rgba(3,5,8,.64) 50%, rgba(2,4,6,.84) 100%),
    url("../img/bg-stage.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center top;
  background-repeat: no-repeat;
}
/* Layer 2 — fine carbon weave + top vignette for depth */
/* Vignette only — carbon-fibre weave removed per direction */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(120% 75% at 50% 0%, transparent 55%, rgba(0,0,0,.5) 100%);
  opacity: .9;
}
@keyframes bgDrift {
  0%   { transform: translate3d(0,0,0) scale(1);     opacity: .9; }
  50%  { transform: translate3d(-1.5%,1%,0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(1.5%,-1%,0) scale(1.02); opacity: .92; }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--teal); color: #fff; }

/* ---------- layout helpers ---------- */
.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 120px) 0; }
.eyebrow {
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--teal-bright); font-weight: 600;
  display: inline-flex; align-items: center; gap: 11px;
}
/* faceted gemstone-CUT accent before the kicker (flat table, faceted point) */
/* ============================================================
   DIAMONDS — one shape, one gradient, everywhere.
   Replaces the per-instance gemstone cuts (the amethyst one read as a purple
   blob at 9px). components.js still stamps [data-cut] on these elements; those
   attributes now resolve to nothing and simply inherit the values below, so the
   markup and JS didn't have to change to retire the variants.
   ============================================================ */
:root{
  /* Diamond. Slightly taller than wide — a true 1:1 rhombus reads as a squashed
     square at 11px, where these actually render. */
  --cut: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --jewel: linear-gradient(148deg, #ffb457 0%, #f2892a 30%, #14776a 68%, #063f39 100%);
  --glow: rgba(242,137,42,.42);
}

.eyebrow::before {
  content: ""; width: 10px; height: 12px; flex: none; clip-path: var(--cut);
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 46%), var(--jewel);
  filter: drop-shadow(0 0 4px var(--glow)); opacity: .9;
}

/* ---------- reusable gem ---------- */
.gem {
  display: inline-block; width: .82em; height: .96em; vertical-align: middle; position: relative;
  clip-path: var(--cut); background: var(--jewel); filter: drop-shadow(0 0 8px var(--glow));
}
.gem::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%); }
/* gemstone divider ornament: hairline — cut gem — hairline */
.divider-gem { display: flex; align-items: center; justify-content: center; gap: 16px; width: min(100% - 40px, var(--maxw)); margin: 8px auto; }
.divider-gem::before, .divider-gem::after { content: ""; height: 1px; width: min(160px, 22vw); background: linear-gradient(90deg, transparent, var(--line-2)); }
.divider-gem::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.divider-gem i { width: 15px; height: 17px; clip-path: var(--cut); position: relative;
  background: var(--jewel); filter: drop-shadow(0 0 12px var(--glow)); }
.divider-gem i::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 46%); }
h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: .01em; }
.h-xl { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h-lg { font-size: clamp(1.9rem, 4vw, 3rem); }
.h-md { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-mute); }

.chrome-text {
  background: linear-gradient(180deg, #fff 0%, #e9edf3 30%, #aab2c0 52%, #f4f7fb 60%, #767f8e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px; font-weight: 600;
  font-size: .92rem; letter-spacing: .02em; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #070a10; box-shadow: 0 10px 30px -10px rgba(255,255,255,.16);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255,255,255,.26), 0 8px 30px -8px var(--teal-glow); }
/* primary accent CTA — one confident teal, the site's single decisive color move */
.btn-primary {
  background: linear-gradient(180deg, var(--teal-bright), var(--teal));
  color: #03130f; box-shadow: 0 14px 36px -12px var(--teal-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -14px var(--teal-glow), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-lg { padding: 17px 34px; font-size: .98rem; }
.btn-ghost {
  background: rgba(255,255,255,.04); color: var(--ink);
  border-color: var(--line-2); backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  width: 100%; max-width: 100vw; /* cap to viewport — backdrop-filter makes .nav a
     containing block for the fixed mobile menu, so this stops content-width overflow */
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,9,12,.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner { width: min(100% - 40px, var(--maxw)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* THE LOGO NEVER SHRINKS. .nav__inner is a flex row, and flex items shrink by
   default. The wordmark is an <img> with no min-content floor, so whenever the bar
   ran out of room — longer Spanish labels, an extra top-level tab, a narrower
   laptop — flexbox took the ENTIRE deficit out of the one item that could give:
   the logo collapsed to width:0 and the brand vanished while every text link
   stayed put. `flex: 0 0 auto` on both the anchor and the image removes it from
   the shrink pool for good. Everything else in the bar must yield first; the
   compaction tier + burger breakpoint below give it somewhere to yield to. */
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); line-height: 1; flex: 0 0 auto; }
.brand__logo {
  height: 30px; width: auto; display: block; transition: opacity .25s;
  flex: 0 0 auto;
  min-width: 87px;              /* 30px x the wordmark's 2.91 ratio — a hard floor */
  object-fit: contain;          /* if that floor ever engages, letterbox, don't stretch */
}  /* client wordmark logo (vector) */
.brand:hover .brand__logo { opacity: .82; }
.brand__img { height: 42px; width: auto; display: block; }   /* (legacy) */
.brand__fallback { display: flex; align-items: center; gap: 11px; }
.brand__fallback[hidden] { display: none; }
.brand__wordmark { display: flex; align-items: baseline; gap: 9px; }
.emblem { width: 30px; height: 30px; flex: none; object-fit: contain; filter: drop-shadow(0 0 9px rgba(154,107,255,.30)); transition: transform .4s var(--ease); }
.brand:hover .emblem { transform: rotate(90deg); }
.brand__the { font-size: .6rem; letter-spacing: .35em; color: var(--ink-mute); text-transform: uppercase; transform: translateY(-2px); }
.brand__name { font-size: 1.4rem; letter-spacing: .04em; }
.brand__sub { font-size: .52rem; letter-spacing: .42em; color: var(--chrome-3); text-transform: uppercase; align-self: flex-end; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 9px 11px; border-radius: 8px; font-size: .82rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .2s, background .2s; position: relative;
}
.nav__links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav__links a.active { color: var(--ink); }
.nav__links a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--teal-bright), var(--teal)); border-radius: 2px;
}
/* Flyout groups — parent is BOTH a link and (on mobile) a collapsible toggle */
.nav__has-sub { position: relative; display: inline-flex; align-items: center; }
.nav__sub-head { display: inline-flex; align-items: center; }
.nav__sub-link {
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 9px 11px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 4px; transition: color .2s, background .2s;
}
.nav__has-sub:hover .nav__sub-link, .nav__has-sub:focus-within .nav__sub-link,
.nav__has-sub.is-active .nav__sub-link { color: var(--ink); background: rgba(255,255,255,.05); }
.nav__sub-link::after { content: "▾"; font-size: .68em; margin-left: 3px; display: inline-block; transition: transform .25s var(--ease); }
.nav__has-sub:hover .nav__sub-link::after, .nav__has-sub:focus-within .nav__sub-link::after { transform: rotate(180deg); }
.nav__sub-caret { display: none; }  /* desktop reveals on hover; caret only appears in the mobile sheet */
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 214px; margin-top: 6px; padding: 8px;
  background: rgba(10,12,16,.98); backdrop-filter: blur(16px); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: 0 26px 64px -22px rgba(0,0,0,.75);
  display: flex; flex-direction: column; gap: 2px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a { position: static; padding: 11px 12px; border-radius: 8px; font-size: .82rem; white-space: nowrap; color: var(--ink-soft); }
.nav__sub a:hover, .nav__sub a.active { color: var(--ink); background: rgba(255,255,255,.06); }
.nav__sub a.active::after { display: none; }

.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__burger { display: none; background: none; border: 1px solid var(--line-2); border-radius: 8px; width: 42px; height: 38px; color: var(--ink); font-size: 1.1rem; }
.lang-toggle { width: 42px; height: 36px; border-radius: 100px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: .76rem; font-weight: 700; letter-spacing: .08em; transition: all .2s; }
.lang-toggle:hover { color: #03100e; border-color: transparent; background: linear-gradient(180deg,var(--teal-bright),var(--teal)); }
/* "Book Now" already lives in the gold CTA on desktop — only surface it inside the mobile menu */
.nav__links .bk-mobile { display: none; }
.nav__links .li-mobile { display: none; }
/* compact top-right "Log In" button (desktop) */
.nav__login { padding: 9px 16px; font-size: .78rem; }

/* Compaction tier — the desktop bar carries eight top-level items plus the language
   toggle, Log In and Start a Project, and Spanish labels run ~12% longer than the
   English. It tightens rather than overflowing, so the links absorb the squeeze
   instead of the logo.

   No upper bound on purpose. .nav__inner is capped at --maxw (1240px) at EVERY
   viewport, so a wide monitor buys the bar no extra room — the uncompacted Spanish
   bar needs ~1470px and would overflow at 1920 exactly as it did at 1280. Compact
   measures ~1220px, which is the only way it fits the 1240px column at all.
   Measured worst case (Spanish, every label at its longest): 1221px. */
@media (min-width: 1280px) {
  .nav__inner { gap: 10px; }
  .nav__links { gap: 0; }
  .nav__links a, .nav__sub-link { padding: 9px 4px; font-size: .715rem; letter-spacing: .02em; }
  .nav__links a.active::after { left: 6px; right: 6px; }
  .nav__cta { gap: 7px; }
  .nav__login { padding: 9px 11px; font-size: .72rem; }
  .nav__cta .btn-primary { padding: 10px 16px; font-size: .74rem; }
  .lang-toggle { width: 36px; }
}

/* Burger takes over at 1279px, not 1000px: below this the bar cannot seat eight
   items in Spanish even compacted, and the old 1000px cutoff is what left a
   1000-1279px band where everything overflowed and the logo paid for it. */
@media (max-width: 1279px) {
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    width: 100%; max-width: 100vw; box-sizing: border-box; overflow-x: hidden;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(8,9,12,.97); backdrop-filter: blur(18px);
    padding: 14px 20px 22px; border-bottom: 1px solid var(--line);
    transform: translateY(-120%); transition: transform .4s var(--ease);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 14px 12px; font-size: .95rem; }
  .nav__links .bk-mobile { display: block; color: var(--gold-soft); }
  .nav__links .li-mobile { display: block; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; }
  .nav__cta .btn { display: none; }
  /* Mobile hamburger order: Book Now → Apply → Sponsors first, then the rest in DOM order */
  .nav__links .bk-mobile { order: -3; }
  .nav__links > a[href="apply.html"] { order: -2; }
  .nav__links > a[href="sponsors.html"] { order: -1; }
  /* Collapsible groups inside the mobile sheet */
  .nav__has-sub { display: block; width: 100%; }
  .nav__sub-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .nav__sub-link { flex: 1; padding: 14px 12px; font-size: .95rem; }
  .nav__sub-link::after { display: none; }  /* caret button replaces the inline chevron */
  .nav__sub-caret { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    background: none; border: 0; color: var(--ink-soft); font-size: 1rem; cursor: pointer; transition: transform .25s var(--ease); }
  .nav__has-sub.open .nav__sub-caret { transform: rotate(180deg); color: var(--ink); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none; margin: 0; padding: 0 0 0 14px;
    background: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .32s var(--ease), padding .32s var(--ease);
  }
  .nav__has-sub.open .nav__sub { max-height: 560px; padding-bottom: 6px; }
  .nav__sub a { padding: 12px 12px; font-size: .9rem; color: var(--ink-mute); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: calc(var(--nav-h) + 30px); }
.hero__head {
  text-align: center; max-width: 880px; margin: 0 auto clamp(28px, 5vw, 56px);
  padding: 0 16px;
}
.hero__emblem {
  width: clamp(52px, 8vw, 86px); height: auto; object-fit: contain;
  display: block; margin: 18px auto 10px;
  filter: drop-shadow(0 0 20px rgba(154,107,255,.38)) drop-shadow(0 0 8px rgba(63,123,245,.35));
  animation: emblemFloat 6s var(--ease) infinite alternate;
}
@keyframes emblemFloat { from { transform: translateY(0) rotate(0); } to { transform: translateY(-6px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce){ .hero__emblem { animation: none; } }
.hero__logo-img {
  display: block; width: 100%; max-width: min(580px, 84vw); height: auto;
  margin: 8px auto 18px;
  /* neutral separation shadow only — no colored glow */
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
.hero__logo {
  font-family: var(--font-display); margin: 6px 0 18px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hero__logo[hidden] { display: none; }
.hero__logo .the { font-size: clamp(.7rem,1.4vw,.95rem); letter-spacing: .55em; color: var(--ink-mute); text-transform: uppercase; }
.hero__logo .name { font-size: clamp(2.8rem, 9vw, 6.4rem); letter-spacing: .02em; line-height: .9; font-weight: 600; }
.hero__logo .sub  { font-size: clamp(.65rem,1.6vw,1rem); letter-spacing: .58em; color: var(--chrome-3); text-transform: uppercase; margin-top: 6px; }
.hero__tagline { color: var(--ink-soft); font-size: clamp(1rem,1.7vw,1.25rem); max-width: 60ch; margin: 18px auto 26px; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   MOSAIC CAROUSEL
   ============================================================ */
.carousel {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding: 8px 0 4px;
  /* grab-to-scroll: pan-y keeps VERTICAL page scrolling native on touch while
     horizontal gestures are handed to the carousel's pointer handlers. */
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.carousel.is-dragging { cursor: grabbing; }
/* a tile mid-drag shouldn't light up as if it were being hovered for a click */
.carousel.is-dragging .tile:hover img { transform: none; }
.carousel.is-dragging .tile:hover::after { opacity: 0; }
.carousel__track {
  display: flex; gap: 0; width: max-content;
  will-change: transform; backface-visibility: hidden;
}
/* Scrolling is driven by a JS requestAnimationFrame loop in carousel.js (immune to
   the OS "Reduce Motion" setting that kept freezing CSS keyframes). The track is two
   identical sets; spacing lives on each column's margin-right so the wrap is seamless. */
/* mosaic columns: each "cell" is a stacked column of 1-2 tiles */
.mcol { display: grid; gap: 14px; grid-auto-flow: row; align-content: start; margin-right: 14px; }
.mcol--tall  { grid-template-rows: 1fr; }
.mcol--split { grid-template-rows: 1fr 1fr; }
.tile {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; isolation: isolate;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.72));
  opacity: .72; transition: opacity .3s;
}
.tile:hover::after { opacity: .5; }
.tile:hover img { transform: scale(1.06); }
.tile:hover { border-color: rgba(255,255,255,.40); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
.tile__label {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
}
.tile__cat { display: block; font-size: .62rem; color: var(--gold-soft); letter-spacing: .2em; margin-bottom: 3px; }
.tile__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9);
  z-index: 2; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.5);
  display: grid; place-items: center; backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background .3s;
}
.tile__play::before { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.tile:hover .tile__play { transform: translate(-50%,-50%) scale(1.05); background: rgba(255,255,255,.92); }
/* sizes */
.tile--w { width: 460px; }
.tile--m { width: 340px; }
.tile--s { width: 300px; height: 220px; }
.mcol--tall .tile { height: 454px; }
.mcol--split .tile { height: 220px; }

@media (max-width: 640px) {
  .tile--w { width: 320px; }
  .tile--m { width: 250px; }
  .tile--s { width: 230px; height: 170px; }
  .mcol--tall .tile { height: 354px; }
  .mcol--split .tile { height: 170px; }
}

/* ---------- lightbox (in-page viewer) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(3,4,6,.86); backdrop-filter: blur(10px);
  animation: fade .3s ease;
}
.lightbox.open { display: flex; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.lightbox__stage {
  position: relative; max-width: min(1100px, 92vw); max-height: 86vh;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: var(--shadow); background: #000;
  transform: scale(.96); transition: transform .35s var(--ease);
}
.lightbox.open .lightbox__stage { transform: scale(1); }
.lightbox__stage img {
  display: block; max-width: min(1100px, 92vw); max-height: 86vh;
  width: auto; height: auto; object-fit: contain; background: #000;
}
.lightbox__stage video, .lightbox__stage iframe {
  display: block; width: min(1100px, 92vw); max-height: 86vh;
  aspect-ratio: 16/9; height: auto; object-fit: contain; background: #000; border: 0;
}
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  font-size: .9rem; color: var(--ink-soft);
}
.lightbox__cap strong { color: var(--ink); display: block; font-family: var(--font-display); font-size: 1.15rem; }
.lightbox__close {
  position: absolute; top: 18px; right: 18px; z-index: 210;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(0,0,0,.5); color: #fff; font-size: 1.3rem; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.lightbox__close:hover { background: var(--gem-red); transform: rotate(90deg); }
.lightbox__hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }

/* ============================================================
   SERVICES
   ============================================================ */
/* Explicit column counts, not auto-fit. With minmax(300px,1fr) four cards need
   1254px and the wrap is 1240 — a 14px miss that silently dropped them to 3 columns
   and left a lone orphan card on its own row, directly above the 4-across producer
   grid. Stepping 4 -> 2 -> 1 keeps every row full at every width, and the 4-up
   desktop column rhythm now matches the roster grid below it. */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
/* The producer grid on the same page steps identically, so the two rows share one
   column rhythm instead of disagreeing. --pcols is set by producers.js from the
   roster count; 4 is only the fallback. */
#producerGrid { grid-template-columns: repeat(var(--pcols, 4), 1fr); }
@media (max-width: 1080px) { .svc-grid, #producerGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svc-grid, #producerGrid { grid-template-columns: 1fr; } }
.svc {
  position: relative; padding: 30px 28px 32px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.svc:hover { transform: translateY(-6px); border-color: rgba(31,143,125,.45); box-shadow: var(--shadow); }
.svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--teal-bright), var(--teal) 50%, transparent 85%);
  opacity: 0; transition: opacity .35s;
}
.svc:hover::before { opacity: 1; }
.svc__num { font-family: var(--font-display); font-size: 2.4rem; color: rgba(255,255,255,.16); line-height: 1; }
.svc__icon { font-size: 1.6rem; margin-bottom: 6px; }
.svc h3 { font-size: 1.25rem; margin: 12px 0 10px; }
.svc p { color: var(--ink-soft); font-size: .95rem; }
.svc ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.svc li { font-size: .88rem; color: var(--ink-soft); padding-left: 20px; position: relative; }
.svc li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 12px; clip-path: var(--cut); background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%), var(--jewel); filter: drop-shadow(0 0 5px var(--glow)); }
.svc__link { margin-top: 18px; display: inline-flex; gap: 8px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; }
.svc__link:hover { color: #8fe9da; }

/* "What We Do" — divisions as clickable buttons with an expandable detail drop-down */
.svc-list__hint { margin-top: 34px; font-size: .82rem; letter-spacing: .04em; }
.svc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
/* ---------- Division buttons — brushed metal ----------
   Four layers, all pulling in the SAME direction so the finish reads smooth:
     1. SVG turbulence at baseFrequency 0.004 x 0.85 — very low horizontal frequency
        against a high vertical one, which stretches the noise into long LEFT-TO-RIGHT
        streaks. (The earlier pass had these axes the wrong way round: fine vertical
        grain crossed with horizontal stripes, which is what made it look like a grid.)
     2. a single soft 3px stripe — the brush pass, at low alpha so it never bands
     3. broad diagonal sheen — the plate catches light unevenly across its width
     4. base vertical gradient — the body of the metal
   Blended soft-light rather than overlay so the grain sits under the sheen instead
   of biting through it. */
.svc-item {
  --mx: 50%; --my: 0%;
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.020) 0px, rgba(255,255,255,.020) 1px,
      rgba(0,0,0,.020) 1px,       rgba(0,0,0,.020) 3px),
    linear-gradient(100deg,
      rgba(255,255,255,.12) 0%,  rgba(255,255,255,.02) 20%,
      rgba(255,255,255,.15) 42%, rgba(255,255,255,.01) 58%,
      rgba(255,255,255,.09) 76%, rgba(255,255,255,.03) 100%),
    linear-gradient(180deg, #33383d 0%, #24282c 46%, #1a1d20 100%);
  background-blend-mode: soft-light, normal, screen, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 1px 2px rgba(0,0,0,.5);
  transition: border-color .2s, box-shadow .25s, filter .25s;
}
/* Moving specular — a soft highlight that tracks the cursor across the plate, so the
   metal catches light as you move over it instead of holding one baked-in sheen.
   Position comes from --mx/--my, set per-plate by svc-metal.js. */
.svc-item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(260px 150px at var(--mx) var(--my),
      rgba(255,255,255,.22) 0%, rgba(255,255,255,.09) 34%, rgba(255,255,255,0) 68%);
  opacity: 0; transition: opacity .35s var(--ease); z-index: 0;
}
/* Static hard glint along the top bevel — reads as a polished edge and keeps the
   plate from going dull where the moving highlight isn't. */
.svc-item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  border-radius: 16px 16px 0 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
}
.svc-item > * { position: relative; z-index: 1; }
.svc-item:hover::before { opacity: 1; }
.svc-item:hover {
  border-color: rgba(255,255,255,.24);
  filter: brightness(1.1) contrast(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 8px 24px -12px rgba(0,0,0,.75);
}
.svc-item.open {
  border-color: var(--teal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 0 26px -8px var(--teal-glow);
}
/* Engraved lettering: dark shadow ABOVE the glyph, light one BELOW. Because the
   plate's light comes from above, that reads as cut in. Reverse the two and the
   same text pops out embossed instead. */
.svc-item__title {
  color: #cdd2d6;
  text-shadow:
    0 -1px 1px rgba(0,0,0,.9),
    0 1px 0 rgba(255,255,255,.2),
    0 2px 3px rgba(0,0,0,.35);
}
.svc-item__num {
  text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.14);
}
.svc-item__btn:hover .svc-item__title { color: #e9edf0; }
@media (prefers-contrast: more) {
  /* engraving works by lowering contrast — drop it when the OS asks for more */
  .svc-item__title { color: #fff; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-item::before { transition: none; }
}
.svc-item__head { display: flex; align-items: stretch; }
.svc-item__btn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 20px 22px; color: var(--ink); text-decoration: none; transition: background .2s; }
.svc-item__btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.svc-item__num { font: 600 .8rem/1 var(--font-mono, monospace); letter-spacing: .12em; color: var(--teal-bright); flex: 0 0 auto; }
.svc-item__title { font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 600; line-height: 1.15; margin: 0; flex: 1 1 auto; }
.svc-item__go { flex: 0 0 auto; color: var(--teal-bright); font-size: 1.2rem; transition: transform .2s; }
.svc-item__btn:hover .svc-item__go { transform: translateX(5px); }
.svc-item__caret { flex: 0 0 auto; width: 62px; align-self: stretch; border: 0; border-left: 1px solid rgba(0,0,0,.45); box-shadow: inset 1px 0 0 rgba(255,255,255,.07); background: none; color: var(--ink-soft); font-size: 1rem; cursor: pointer; transition: transform .25s var(--ease), color .2s, background .2s; }
.svc-item__caret:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.svc-item.open .svc-item__caret { transform: rotate(180deg); color: var(--teal-bright); }
.svc-item__detail { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.svc-item.open .svc-item__detail { max-height: 520px; }
.svc-item__detail-in { padding: 2px 24px 22px; border-top: 1px solid rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.svc-item__detail-in p { color: var(--ink-soft); margin: 14px 0 12px; max-width: 68ch; }
.svc-item__detail-in ul { margin: 0 0 6px 18px; } .svc-item__detail-in li { color: var(--ink-mute); margin: 6px 0; }
@media (max-width: 520px){ .svc-item__caret { width: 52px; } .svc-item__btn { padding: 16px 16px; gap: 12px; } }

/* generic feature/section blocks reused across inner pages */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,68px); align-items: center; }
.split--rev > :first-child { order: 2; }
@media (max-width: 900px){ .split, .split--rev { grid-template-columns: 1fr; } .split--rev > :first-child{ order:0;} }
.media-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); aspect-ratio: 4/3; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.stat-row { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 34px; }
.stat b { font-family: var(--font-display); font-size: 2.2rem; display: block; }
.stat span { color: var(--ink-mute); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { font-size: .78rem; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--line-2); color: var(--ink-soft); background: rgba(255,255,255,.03); }

.panel { background: linear-gradient(180deg,var(--panel),var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,4vw,44px); }

/* logos / marquee of artists */
.namebar { display:flex; flex-wrap:wrap; gap: 10px 28px; align-items:center; margin-top: 22px; }
.namebar span { font-family: var(--font-display); font-size: clamp(1.1rem,2.4vw,1.7rem); color: var(--ink-mute); transition: color .3s; }
.namebar span:hover { color: var(--gold-soft); }

/* ============================================================
   ARTIST DEVELOPMENT — 8-stage timeline
   ============================================================ */
.timeline { display: grid; gap: 14px; margin-top: 40px; }
.tl {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start;
  padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg,var(--panel),var(--bg-2)); transition: border-color .3s, transform .3s;
}
.tl:hover { border-color: rgba(255,255,255,.30); transform: translateX(4px); }
.tl__n { font-family: var(--font-display); font-size: 1.5rem; color: #070a10; width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg,var(--gold-soft),var(--gold)); }
.tl h4 { font-size: 1.1rem; margin-bottom: 4px; }
.tl p { font-size: .92rem; color: var(--ink-soft); }

.deliver { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; margin-top: 26px; }
.deliver div { padding: 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.deliver b { display:block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; color: var(--gold-soft); }
.deliver p { font-size: .85rem; color: var(--ink-soft); }

/* ============================================================
   ROSTER
   ============================================================ */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 8px; }
.filterbar button {
  padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); color: var(--ink-soft); font-size: .82rem;
  letter-spacing: .04em; transition: all .25s;
}
.filterbar button:hover { color: var(--ink); border-color: var(--line-2); }
.filterbar button.active { background: linear-gradient(180deg,var(--teal-bright),var(--teal)); color: #03100e; border-color: transparent; font-weight: 600; }
.roster-search { margin-left: auto; }
.roster-search input {
  background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 100px;
  padding: 10px 18px; color: var(--ink); min-width: 220px; font-size: .85rem;
}
.roster-search input:focus { border-color: var(--gold); }
/* outline:none was here with no replacement — a keyboard user lost the caret's
   only visual anchor. The global :focus-visible baseline below now covers it. */

.roster-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 18px; margin-top: 26px; }
/* face-safe default for roster cards wherever the grid is used (roster page,
   audio-production producer line-up). Individual people override via `pos`. */
.roster-grid .card__img img { object-fit: cover; object-position: 50% 18%; }
.card {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: var(--panel); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.30); box-shadow: var(--shadow); }
.card__img { aspect-ratio: 3/4; position: relative; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__img img { transform: scale(1.05); }
/* A card that points somewhere other than the booking form (Collection -> the beat
   store): the whole image is the hit area, sitting under the tag so that stays
   readable. Keyboard users get the same target via the focusable anchor. */
.card__hit { position: absolute; inset: 0; z-index: 2; }
.card__hit:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: -4px; }
.card--linked .card__body h4 a { color: inherit; text-decoration: none; }
.card--linked:hover .card__body h4 a { color: var(--teal-bright); }
.card__tag { z-index: 3; position: absolute; top: 12px; left: 12px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; background: rgba(0,0,0,.6); border: 1px solid var(--line-2); color: var(--teal-bright); backdrop-filter: blur(6px); }
/* Cards in a row are equal height (grid stretch), but their contents were top-aligned,
   so a two-line credit line pushed that card's rate/button row below its neighbours'.
   Flexing the body and pinning the foot to the bottom puts every rate and every button
   on one baseline across the row. */
.card { display: flex; flex-direction: column; }
.card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card__foot { margin-top: auto; }
.card__body h4 { font-size: 1.12rem; }
.card__role { color: var(--ink-mute); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 2px 0 10px; }
.card__credits { font-size: .82rem; color: var(--ink-soft); }
/* wrap rather than crush the rate when a card is narrow or its CTA label is long */
.card__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding-top: 14px; }
.card__rates { display: grid; gap: 2px; min-width: 0; }
.card__rate { font-size: .82rem; color: var(--teal-bright); font-weight: 600; }
/* second price point (e.g. feature rate) — same data, quieter than the headline */
.card__rate--alt { font-size: .76rem; color: var(--ink-soft); font-weight: 500; }
.card .btn { padding: 9px 16px; font-size: .78rem; }
.empty { text-align: center; color: var(--ink-mute); padding: 60px 0; grid-column: 1/-1; }

/* ============================================================
   BOOKING
   ============================================================ */
.booking-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin-top: 36px; align-items: start; }
@media (max-width: 940px){ .booking-grid { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--ink); font-size: .95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.06); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .78rem; color: var(--ink-mute); margin-top: -8px; margin-bottom: 16px; }

/* calendar */
.cal { user-select: none; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__head b { font-family: var(--font-display); font-size: 1.15rem; }
.cal__nav { display: flex; gap: 8px; }
.cal__nav button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink); }
.cal__nav button:hover { background: rgba(255,255,255,.09); }
.cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cal__dow { text-align: center; font-size: .68rem; color: var(--ink-mute); letter-spacing: .08em; padding-bottom: 6px; }
.cal__day {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.02);
  display: grid; place-items: center; font-size: .9rem; color: var(--ink-soft); position: relative; transition: all .2s;
}
.cal__day:not(.is-disabled):hover { border-color: var(--gold); color: var(--ink); cursor: pointer; }
.cal__day.is-empty { border: none; background: none; }
.cal__day.is-disabled { color: var(--ink-mute); opacity: .35; cursor: not-allowed; }
.cal__day.is-booked { color: var(--ink-mute); opacity: .55; cursor: not-allowed; }
.cal__day.is-booked::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--gem-red); }
.cal__day.is-selected { background: linear-gradient(180deg,var(--gold-soft),var(--gold)); color: #070a10; border-color: transparent; font-weight: 700; }
.cal__legend { display: flex; gap: 18px; margin-top: 14px; font-size: .74rem; color: var(--ink-mute); }
.cal__legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

.summary { display: grid; gap: 2px; margin: 6px 0 18px; }
.summary > div { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-soft); padding: 8px 0; border-bottom: 1px dashed var(--line); }
.summary .total { color: var(--ink); font-weight: 700; font-size: 1.05rem; border-bottom: none; padding-top: 12px; }
.summary__note { display: block !important; font-size: .76rem; color: var(--ink-mute); border: none !important; padding: 8px 0 0 !important; line-height: 1.5; }
.summary__note b { color: var(--teal-bright); }

/* ---- hourly time slots ---- */
.time-slots { margin-top: 16px; }
.slots__head { font-size: .82rem; color: var(--ink-soft); margin-bottom: 10px; }
.slots__head strong { color: var(--ink); }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.slot {
  padding: 9px 8px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: .8rem;
  letter-spacing: .02em; transition: all .18s; text-align: center;
}
.slot:hover:not(:disabled) { border-color: var(--teal); color: var(--ink); background: rgba(19,91,80,.14); }
.slot.is-selected { background: linear-gradient(180deg, var(--teal-bright), var(--teal)); color: #03100e; border-color: transparent; font-weight: 700; }
.slot.is-taken { opacity: .32; cursor: not-allowed; text-decoration: line-through; }

/* ---- payment plan selector ---- */
.plan-select { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 18px; }
@media (max-width: 460px){ .plan-select { grid-template-columns: 1fr; } }
.plan { position: relative; cursor: pointer; }
.plan input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan__body {
  display: block; padding: 14px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: all .2s;
}
.plan__body b { display: block; font-size: .95rem; color: var(--ink); }
.plan__body b em { font-style: normal; font-size: .68rem; color: #03100e; background: var(--teal-bright); padding: 2px 7px; border-radius: 100px; margin-left: 6px; vertical-align: middle; }
.plan__body small { display: block; font-size: .76rem; color: var(--ink-mute); margin-top: 4px; }
.plan input:checked + .plan__body { border-color: var(--teal); background: rgba(19,91,80,.16); box-shadow: 0 0 0 1px var(--teal) inset; }
.finance-note { border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(19,91,80,.10); padding: 16px 18px; margin: 6px 0 16px; }
.finance-note p { font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
.finance-note p + p { margin-top: 8px; }

/* ---- points-for-price (co-production) at checkout ---- */
.equity-box { margin: 4px 0 18px; padding: 16px 16px 20px; border: 1px solid var(--teal); border-radius: var(--radius-sm); background: rgba(19,91,80,.12); }
.equity-box > label { display: block; font-size: .92rem; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.equity-readout { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 12px; }
.equity-readout #equityPts { font-family: var(--font-display); font-size: 1.5rem; color: #fff; line-height: 1; }
.equity-readout #equityOff { font-size: .92rem; color: var(--teal-bright); font-weight: 700; text-align: right; }

/* ---- currency conversion (COP primary + EUR secondary when Spanish is active) ---- */
/* Rendered as a tidy stacked block: COP on top, EUR smaller & muted beneath — so a long
   converted figure reads as one clean unit and never wraps mid-number. */
/* USD label on English price leaves. Deliberately quieter and smaller than the
   figure — it disambiguates the currency without competing with the number. */
.cur-usd { font-size: .58em; font-weight: 600; letter-spacing: .1em; opacity: .62; margin-left: .12em; white-space: nowrap; }
.cur { display: block; line-height: 1.12; }
.cur__cop { display: block; white-space: nowrap; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cur__eur { display: block; white-space: nowrap; letter-spacing: 0; font-variant-numeric: tabular-nums;
  font-size: .62em; color: var(--ink-mute); font-weight: 500; margin-top: 3px; }
/* big display price tags: bring the COP line down to a readable size on the card */
.price-tag.is-cur { font-size: 1.45rem; line-height: 1.12; }
.tier__price .price-tag.is-cur { font-size: 1.5rem; }
/* inline rate / add-on values: right-align the stack inside its row */
.addon__price.is-cur, .rate-cell .amt.is-cur, .extra .amt.is-cur, .card__rate.is-cur { font-size: .82rem; text-align: right; }
/* stacked block right-aligns in the checkout summary + configurator breakdown/spend rows */
.summary > div > span:last-child, .cfg__row-t > b, .cfg__spend-views b { text-align: right; }
.cfg__row-t--big > b .cur__cop { font-size: 1.1rem; }

/* ---- content factory (AI studio) ---- */
.cf-promptbar { display: flex; gap: 10px; max-width: 620px; margin-top: 26px; padding: 7px; border: 1px solid var(--line-2); border-radius: 100px; background: rgba(255,255,255,.04); }
.cf-promptbar input { flex: 1 1 auto; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: .95rem; padding: 10px 18px; }
.cf-promptbar input::placeholder { color: var(--ink-mute); }
.cf-promptbar input:focus { outline: none; }
.cf-promptbar .btn { flex: 0 0 auto; }
.cf-tools .cf-emoji { display: block; font-size: 1.65rem; line-height: 1; margin-bottom: 10px; }

/* ---- flight & travel estimator ---- */
.fe { border: 1px solid var(--teal); border-radius: var(--radius-sm); background: rgba(19,91,80,.10); padding: 20px 20px 18px; }
.fe__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .fe__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .fe__grid { grid-template-columns: 1fr; } }
.fe__f { display: flex; flex-direction: column; gap: 6px; }
.fe__f > span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.fe__f select, .fe__f input {
  padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); color: var(--ink); font: inherit; font-size: .88rem;
}
.fe__f select:focus, .fe__f input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.fe__out {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.fe__lbl { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.fe__total { font-family: var(--font-display); font-size: 1.9rem; color: #fff; line-height: 1.05; }
.fe__total .cur__cop { font-size: 1.5rem; } .fe__total .cur__eur { font-size: .68rem; }
.fe__break { font-size: .82rem; color: var(--teal-bright); font-weight: 600; }
.fe__note { font-size: .76rem; color: var(--ink-mute); line-height: 1.5; margin-top: 12px; }

/* ---- articles / the journal ---- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 30px; }
.post { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255,255,255,.03); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; text-decoration: none; }
.post:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 24px 60px -30px var(--teal-glow); }
.post__cat { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-bright); font-weight: 700; }
.post__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.22; color: var(--ink); margin: 12px 0 10px; }
.post__excerpt { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); flex: 1 1 auto; }
.post__meta { margin-top: 16px; font-size: .76rem; color: var(--ink-mute); display: flex; gap: 10px; flex-wrap: wrap; }
.post__more { margin-top: 12px; color: var(--teal-bright); font-weight: 600; font-size: .85rem; }
.post--feat { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.post--feat .post__body { padding: 30px; display: flex; flex-direction: column; }
.post--feat .post__img { background: linear-gradient(135deg, rgba(19,91,80,.5), rgba(4,5,11,.2)), var(--feat-img, var(--teal)) center/cover; min-height: 220px; }
@media (min-width: 780px) { .post--feat { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; } .post--feat .post__title { font-size: 1.9rem; } }

/* ---- sponsors ---- */
.spon-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
.artist { padding: 20px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: rgba(255,255,255,.03); transition: transform .25s var(--ease), border-color .25s; }
.artist:hover { transform: translateY(-3px); border-color: var(--teal); }
.artist__name { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }
.artist__genre { font-size: .8rem; color: var(--ink-mute); margin-top: 3px; }
.artist__meta { margin-top: 12px; font-size: .78rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; }
.artist__tag { display: inline-block; margin-top: 14px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #03130f; background: var(--teal-bright); padding: 4px 11px; border-radius: 100px; }

/* ---- referral code at checkout ---- */
.referral-box { margin: 4px 0 18px; }
.referral-box > label { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: 8px; }
.referral-row { display: flex; gap: 10px; align-items: stretch; }
.referral-row input {
  flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .04em;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); color: var(--ink); font: inherit; font-size: .9rem;
}
.referral-row input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
.referral-row input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.referral-row .btn { flex: 0 0 auto; padding: 0 22px; }
.referral-msg { font-size: .8rem; line-height: 1.45; margin-top: 9px; }
.referral-msg.is-ok  { color: #7fdcab; }
.referral-msg.is-bad { color: #e79; }
.referral-box.is-locked > label { opacity: .5; }
.referral-row input:disabled, .referral-row .btn:disabled { opacity: .4; cursor: not-allowed; }
.range:disabled { opacity: .4; cursor: not-allowed; }

/* ---- floating WhatsApp button ---- */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg,#2bd96b,#1fae57); color: #fff;
  box-shadow: 0 12px 30px -8px rgba(31,174,87,.6); transition: transform .25s var(--ease), box-shadow .25s;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px -10px rgba(31,174,87,.7); }
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 600px){ .wa-fab { width: 50px; height: 50px; right: 16px; bottom: 16px; } .wa-fab svg { width: 26px; height: 26px; } }

.pay-card { margin-top: 8px; }
.badge-secure { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--ink-mute); margin-top: 12px; }

/* request status / admin */
.req-list { display: grid; gap: 14px; margin-top: 24px; }
.req {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  background: linear-gradient(180deg,var(--panel),var(--bg-2));
}
.req__top { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.req h4 { font-size: 1.05rem; }
.req__meta { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.status { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; font-weight: 700; }
.status--pending  { background: rgba(244,183,64,.14); color: #f4cf8a; border: 1px solid rgba(244,183,64,.4); }
.status--accepted { background: rgba(60,170,110,.16); color: #7fdcab; border: 1px solid rgba(60,170,110,.4); }
.status--declined { background: rgba(192,48,58,.16); color: #f0959c; border: 1px solid rgba(192,48,58,.4); }
.status--reschedule { background: rgba(47,95,176,.18); color: #9bbcf0; border: 1px solid rgba(47,95,176,.45); }
.req__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.req__actions button { padding: 8px 14px; font-size: .78rem; border-radius: 100px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-soft); transition: all .2s; }
.req__actions button:hover { color: var(--ink); border-color: var(--line-2); }
.req__actions .ok:hover { background: rgba(60,170,110,.2); border-color:#3caa6e; color:#bff0d4; }
.req__actions .no:hover { background: rgba(192,48,58,.2); border-color: var(--gem-red); color:#f7c2c6; }
.req__actions .alt:hover { background: rgba(47,95,176,.2); border-color: var(--gem-blue); color:#cfe0fb; }

/* inline "suggest alternate date" editor (replaces a native prompt) */
.req__propose { margin-top: 16px; }
.req__propose label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.req__propose-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.propose-input {
  padding: 9px 13px; border-radius: 100px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.05); color: var(--ink); font-size: .85rem; color-scheme: dark;
}
.propose-input:focus { outline: none; border-color: var(--gold); }
.req__propose-row button { padding: 9px 16px; font-size: .78rem; border-radius: 100px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-soft); transition: all .2s; }
.req__propose-row button:hover { color: var(--ink); }
.req__propose-row .alt { background: rgba(47,95,176,.16); border-color: rgba(47,95,176,.5); color: #cfe0fb; }
.req__propose-row .alt:hover { background: rgba(47,95,176,.3); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(140%);
  background: var(--panel-2); border: 1px solid var(--gold); color: var(--ink);
  padding: 14px 22px; border-radius: 100px; box-shadow: var(--shadow); z-index: 300;
  transition: transform .4s var(--ease); font-size: .9rem; max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* page hero (inner pages) */
.page-hero { padding-top: calc(var(--nav-h) + 60px); padding-bottom: 14px; }
.breadcrumb { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--teal-bright); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 56px 0 36px; background: rgba(0,0,0,.3); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer__grid > * { min-width: 0; }   /* let tracks shrink below content (long email) */
@media (max-width: 820px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer h5 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; }
.footer a { display: block; color: var(--ink-soft); font-size: .9rem; padding: 5px 0; transition: color .2s; overflow-wrap: anywhere; }
.footer a:hover { color: var(--teal-bright); }
.footer__mark { display: flex; align-items: center; gap: 10px; }
.footer__mark .emblem { width: 26px; height: 26px; color: var(--chrome-2); }
.footer__brand .name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .04em; }
.footer__brand p { color: var(--ink-mute); font-size: .88rem; margin-top: 12px; max-width: 34ch; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .8rem; }

/* reveal on scroll — hidden state only applies when JS is live (.js on <html>),
   so content is never permanently invisible if scripting fails */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* misc */
.center { text-align: center; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 44px; }
.divider { height: 1px; background: var(--line); margin: 0 auto; width: min(100% - 40px, var(--maxw)); }

/* ============================================================
   ELEVATION LAYER (v2) — proof, selected work, social proof,
   process, big metrics, and the concierge consultation funnel.
   Built to read at the tier high-performance clients operate in:
   more negative space, sharper type contrast, evidence over claims.
   ============================================================ */

/* section eyebrow + heading rhythm helper */
.lede-wrap { max-width: 64ch; }
.section--tight { padding: clamp(40px,5vw,72px) 0; }
.h-2xl { font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: .98; letter-spacing: -.01em; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 8px; }
.section-head p { color: var(--ink-soft); max-width: 48ch; }

/* ---------- PROOF / trusted-by logo + credit wall ---------- */
.proof {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
.proof__inner { display: flex; align-items: center; gap: clamp(24px,5vw,64px); flex-wrap: wrap; justify-content: center; padding: 28px 0; }
.proof__label { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.proof__names { display: flex; flex-wrap: wrap; gap: 12px clamp(22px,4vw,46px); align-items: center; justify-content: center; }
.proof__names span {
  font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  color: var(--ink-soft); opacity: .72; transition: opacity .3s, color .3s; letter-spacing: .01em;
}
.proof__names span:hover { opacity: 1; color: #fff; }

/* ---------- Trusted-on-sets hover cards ----------
   Glassmorphic popover per credit. Specificity is deliberate: the base
   `.proof__names span` rule sets a display font, a clamped size and opacity .72 —
   all of which would otherwise leak into the tooltip, since the tip IS a nested
   span. `.proof__names span.proof__tip` outranks it.
   The card opens BELOW the name: the proof band sits directly under the hero, and
   an upward card would collide with it. */
.proof__names span.proof__name { position: relative; cursor: default; outline: none; }
.proof__names span.proof__name:focus-visible { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.proof__names span.proof__tip {
  position: absolute; left: 50%; top: calc(100% + 14px);
  transform: translate(calc(-50% + var(--tip-x, 0px)), -6px);
  width: max-content; max-width: min(290px, 76vw);
  padding: 13px 15px; border-radius: 14px;
  font-family: var(--font-body); font-size: .78rem; font-weight: 400;
  line-height: 1.55; letter-spacing: .005em; text-align: left; text-transform: none;
  color: rgba(255,255,255,.94);
  background: rgba(13,15,17,.78);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid transparent;
  box-shadow:
    0 0 22px -4px var(--teal-glow),
    0 26px 70px -26px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.10);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* Lit rim. A plain border can't carry a gradient, so this paints one into a 1px
   ring: the gradient fills the box, then two masks cancel everything except the
   padding ring, leaving colour only on the edge. */
.proof__names span.proof__tip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg, var(--teal-bright), rgba(255,255,255,.42) 46%, var(--teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .85; pointer-events: none;
}
/* the little chamfered nose, same glass as the card */
.proof__names span.proof__tip::before {
  content: ""; position: absolute; left: calc(50% + var(--nose-x, 0px)); top: -5px; width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(13,15,17,.78);
  border-left: 1px solid var(--teal-bright); border-top: 1px solid var(--teal-bright);
  -webkit-backdrop-filter: blur(22px) saturate(175%); backdrop-filter: blur(22px) saturate(175%);
  z-index: 1;
}
.proof__names span.proof__name:hover .proof__tip,
.proof__names span.proof__name:focus-visible .proof__tip {
  opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--tip-x, 0px)), 0);
}
/* the band must sit above what follows, or the card is painted over */
.proof { position: relative; z-index: 5; }
@media (prefers-reduced-motion: reduce) {
  .proof__names span.proof__tip { transition: none; transform: translate(calc(-50% + var(--tip-x, 0px)), 0); }
}

/* ---------- SELECTED WORK — case-study cards with a metric each ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 980px){ .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .work-grid { grid-template-columns: 1fr; } }
.case {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: var(--panel); min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.case:hover { transform: translateY(-6px); border-color: rgba(31,143,125,.4); box-shadow: var(--shadow); }
.case__img { position: absolute; inset: 0; z-index: -2; }
.case__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.case:hover .case__img img { transform: scale(1.05); }
.case::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,6,9,.15) 0%, rgba(5,6,9,.62) 55%, rgba(5,6,9,.92) 100%); }
.case__body { padding: 26px 24px 24px; }
.case__cat { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; }
.case__title { font-family: var(--font-display); font-size: 1.5rem; margin: 8px 0 4px; line-height: 1.1; }
.case__meta { font-size: .85rem; color: var(--ink-soft); }
.case__metric { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: baseline; gap: 10px; }
.case__metric b { font-family: var(--font-display); font-size: 1.7rem; color: #fff; line-height: 1; }
.case__metric span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- BIG METRIC ROW ---------- */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 760px){ .metrics { grid-template-columns: 1fr 1fr; } }
.metric { padding: 30px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
.metric b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.1rem); line-height: 1;
  background: linear-gradient(180deg,#fff,#aeb6c2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric span { display: block; margin-top: 10px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- TESTIMONIAL / pull-quote band ---------- */
.quote-band { text-align: center; }
.quote-band blockquote {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.28;
  letter-spacing: -.005em; color: var(--ink); max-width: 22ch; margin: 18px auto 0; font-weight: 500;
}
.quote-band blockquote::before { content: "\201C"; color: var(--teal-bright); margin-right: .04em; }
.quote-band blockquote::after  { content: "\201D"; color: var(--teal-bright); }
.quote-band cite { display: block; margin-top: 26px; font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.quote-band cite b { color: var(--ink-soft); }

/* ---------- HOW WE WORK — process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; counter-reset: step; }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; } }
.step { padding: 30px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); position: relative; transition: border-color .3s, transform .3s; }
.step:hover { border-color: rgba(31,143,125,.4); transform: translateY(-4px); }
.step__n { font-family: var(--font-display); font-size: .82rem; letter-spacing: .2em; color: var(--teal-bright); }
.step h4 { font-family: var(--font-display); font-size: 1.3rem; margin: 10px 0 8px; }
.step p { font-size: .92rem; color: var(--ink-soft); }

/* ---------- PRESS / recognition strip ---------- */
.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px,4vw,52px); padding: 8px 0; }
.press span { font-family: var(--font-display); font-size: clamp(.95rem,1.8vw,1.25rem); color: var(--ink-mute); letter-spacing: .06em; }
.press .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); opacity: .6; }

/* ============================================================
   CONSULTATION — concierge inquiry (primary funnel for premium)
   ============================================================ */
.consult-shell {
  position: relative; border-radius: calc(var(--radius) + 6px); overflow: hidden;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
}
.consult-shell::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--teal-bright), transparent); opacity: .8; }
.consult-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; }
@media (max-width: 920px){ .consult-grid { grid-template-columns: 1fr; } }
.consult-aside { padding: clamp(30px,4vw,48px); border-right: 1px solid var(--line); background: radial-gradient(120% 80% at 0% 0%, rgba(19,91,80,.14), transparent 60%); }
@media (max-width: 920px){ .consult-aside { border-right: none; border-bottom: 1px solid var(--line); } }
.consult-aside h3 { font-size: clamp(1.5rem,2.6vw,2.1rem); }
.consult-aside p { color: var(--ink-soft); margin-top: 14px; max-width: 38ch; }
.consult-points { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.consult-points li { font-size: .92rem; color: var(--ink-soft); padding-left: 26px; position: relative; }
.consult-points li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px;
  clip-path: var(--cut); background: var(--jewel); filter: drop-shadow(0 0 6px var(--glow)); }
.consult-contact { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: .9rem; }
.consult-contact a { color: var(--teal-bright); }
.consult-form { padding: clamp(30px,4vw,48px); }
.consult-form .form-row--3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .consult-form .form-row--3 { grid-template-columns: 1fr; } }
.consult-success {
  display: none; text-align: center; padding: clamp(36px,6vw,64px) 28px;
}
.consult-success.show { display: block; }
.consult-success .seal { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal)); color: #03130f; font-size: 1.8rem; box-shadow: 0 12px 34px -10px var(--teal-glow); }
.consult-success h3 { font-size: 1.7rem; }
.consult-success p { color: var(--ink-soft); margin: 12px auto 0; max-width: 42ch; }
.budget-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.budget-grid .plan__body small { color: var(--ink-soft); }

/* ============================================================
   VIDEO / FILM PRODUCTION — packages, pricing, rate cards, add-ons
   ============================================================ */

/* shared price tag + "from" badge */
.price-tag { font-family: var(--font-display); font-weight: 700; color: #fff; line-height: 1; }
.price-from { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 4px; }
.price-unit { font-size: .8rem; color: var(--ink-mute); font-family: var(--font-body); letter-spacing: 0; }

/* feature/check list with gem bullets (reused across packages) */
.pkg-list { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.pkg-list li { font-size: .9rem; color: var(--ink-soft); padding-left: 26px; position: relative; line-height: 1.5; }
.pkg-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 12px;
  clip-path: var(--cut); background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%), var(--jewel);
  filter: drop-shadow(0 0 5px var(--glow)); }
.pkg-list li b, .pkg-list li strong { color: var(--ink); font-weight: 600; }

/* ---------- HERO / flagship package card (Social Content Branding) ---------- */
.bigpkg { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; border-radius: calc(var(--radius) + 6px);
  overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel-2), var(--bg-2)); margin-top: 36px; }
@media (max-width: 900px){ .bigpkg { grid-template-columns: 1fr; } }
.bigpkg__main { padding: clamp(28px,4vw,46px); }
.bigpkg__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.bigpkg__price { text-align: right; }
.bigpkg__price .price-tag { font-size: clamp(2rem,4vw,2.9rem); }
.bigpkg h3 { font-size: clamp(1.5rem,2.8vw,2.1rem); }
.bigpkg__tagline { color: var(--ink-soft); margin-top: 10px; max-width: 52ch; }
.bigpkg__aside { padding: clamp(28px,4vw,46px); border-left: 1px solid var(--line);
  background: radial-gradient(120% 90% at 100% 0%, rgba(19,91,80,.12), transparent 60%); }
@media (max-width: 900px){ .bigpkg__aside { border-left: none; border-top: 1px solid var(--line); } }

/* day-by-day itinerary */
.itin { display: grid; gap: 12px; margin-top: 6px; }
.itin__day { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.itin__day:last-child { border-bottom: none; }
.itin__d { font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-bright); padding-top: 2px; }
.itin__day b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.itin__day p { font-size: .86rem; color: var(--ink-soft); }

/* ---------- TIERED PACKAGE CARDS (music video tiers) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; align-items: stretch; }
@media (max-width: 980px){ .tier-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
/* Five-across ladder (athlete retainers). Steps 5 -> 3 -> 2 -> 1 rather than
   5 -> 1: a five-tier price ladder is read by comparison, so keep tiers beside
   each other for as long as the column can hold a price and a bullet list.
   The base .tier-grid 980px rule would otherwise flatten it to one column while
   there is still room for three. */
.tier-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tier-grid--5 .tier { padding: 26px 20px 24px; }
.tier-grid--5 .tier__name { font-size: 1.24rem; }
.tier-grid--5 .tier__price .price-tag { font-size: 1.7rem; }
.tier-grid--5 .tier__sub { min-height: 3.9em; }
.tier-grid--5 .pkg-list li { font-size: .84rem; }
@media (max-width: 1240px){ .tier-grid--5 { grid-template-columns: repeat(3, 1fr); max-width: none; } }
@media (max-width: 900px) { .tier-grid--5 { grid-template-columns: repeat(2, 1fr); max-width: none; } }
@media (max-width: 620px) { .tier-grid--5 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.tier { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); position: relative; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.tier:hover { transform: translateY(-6px); border-color: rgba(31,143,125,.4); box-shadow: var(--shadow); }
.tier--feature { border-color: rgba(31,143,125,.5); box-shadow: 0 0 0 1px rgba(31,143,125,.25) inset, var(--shadow); }
.tier__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; padding: 5px 14px; border-radius: 100px; color: #03130f;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal)); white-space: nowrap; }
.tier__name { font-family: var(--font-display); font-size: 1.45rem; }
.tier__price { margin: 12px 0 4px; }
.tier__price .price-tag { font-size: 2.1rem; }
.tier__sub { font-size: .85rem; color: var(--ink-mute); min-height: 2.6em; }
.tier .pkg-list { margin: 18px 0 22px; }
.tier .btn { margin-top: auto; }

/* ---------- FILM DAY-RATE LADDER ---------- */
.ladder { display: grid; gap: 12px; margin-top: 36px; }
.rung { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; padding: 22px 26px;
  border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); transition: border-color .3s, transform .3s; }
.rung:hover { border-color: rgba(31,143,125,.4); transform: translateX(4px); }
.rung__name { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.rung__desc { font-size: .86rem; color: var(--ink-soft); margin-top: 4px; max-width: 64ch; }
.rung__price { text-align: right; white-space: nowrap; }
.rung__price .price-tag { font-size: clamp(1.2rem,2.2vw,1.6rem); }
@media (max-width: 640px){ .rung { grid-template-columns: 1fr; } .rung__price { text-align: left; } }

/* ---------- ARRI / format callout band ---------- */
.format-call { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; padding: 22px 28px; margin-top: 28px;
  border-radius: var(--radius); border: 1px solid rgba(31,143,125,.32); background: radial-gradient(120% 200% at 0% 0%, rgba(19,91,80,.16), transparent 60%); }
.format-call b { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.format-call span { font-size: .92rem; color: var(--ink-soft); }
.format-call .pill { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 6px 14px;
  border-radius: 100px; color: #03130f; background: linear-gradient(180deg, var(--teal-bright), var(--teal)); }

/* ---------- TALENT / MODEL RATE CARD ---------- */
.ratecard { margin-top: 36px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
.rate-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 720px){ .rate-row { grid-template-columns: repeat(2, 1fr); } }
.rate-cell { background: var(--panel); padding: 20px 16px; text-align: center; }
.rate-cell .dur { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.rate-cell .amt { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-top: 6px; }
.rate-note { padding: 18px 22px; font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.rate-note b { color: var(--teal-bright); }

/* extras row */
.extras { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 760px){ .extras { grid-template-columns: 1fr; } }
.extra { padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.extra b { display: block; font-family: var(--font-display); color: var(--ink); margin-bottom: 2px; }
.extra .amt { color: var(--teal-bright); font-weight: 600; font-size: .92rem; }
.extra p { font-size: .8rem; color: var(--ink-mute); margin-top: 6px; }

/* ---------- ADD-ONS MENU ---------- */
.addon-group { margin-top: 30px; }
.addon-group > h4 { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; }
.addon-group > h4 .eyebrow { margin: 0; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 12px; }
.addon { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 16px 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: border-color .25s; }
.addon:hover { border-color: rgba(31,143,125,.35); }
.addon__name { font-size: .9rem; color: var(--ink-soft); }
.addon__price { font-size: .88rem; color: var(--teal-bright); font-weight: 600; white-space: nowrap; font-family: var(--font-body); }
.addon-note { font-size: .8rem; line-height: 1.5; margin-top: 12px; max-width: 70ch; }
/* Nested disclosure dropdown under an add-on group (credit / usage terms) */
.addon-disc { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); max-width: 78ch; }
.addon-disc > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.addon-disc > summary::-webkit-details-marker { display: none; }
.addon-disc > summary::before { content: "▸"; color: var(--teal-bright); font-size: .8em; transition: transform .2s var(--ease); }
.addon-disc[open] > summary::before { transform: rotate(90deg); }
.addon-disc[open] > summary { color: var(--ink); }
.addon-disc > p { font-size: .82rem; line-height: 1.6; color: var(--ink-mute); margin: 0; padding: 0 16px 14px; }
.addon-disc a { color: var(--teal-bright); }
.addon__thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.addon__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.addon.has-thumb { align-items: center; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* ---------- Photography portfolio carousel (steady auto-scroll, scroll-independent) ---------- */
.photo-carousel { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.photo-carousel__track { display: flex; width: max-content; animation: photoscroll 60s linear infinite; will-change: transform; }
.photo-slide { flex: 0 0 auto; width: 300px; aspect-ratio: 3/4; margin: 0 16px 0 0; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.photo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* continuous right-to-left marquee — never pauses (not even on hover), linear & smooth */
@keyframes photoscroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .photo-carousel__track { animation-duration: 300s !important; } }
@media (max-width: 600px) { .photo-slide { width: 220px; margin-right: 12px; } }
.dest-chips .pill { font-size: .8rem; font-weight: 600; padding: 8px 16px; border-radius: 100px;
  color: var(--ink-soft); border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: border-color .25s, color .25s; }
.dest-chips .pill:hover { border-color: rgba(31,143,125,.45); color: var(--teal-bright); }

/* ---------- GOOD TO KNOW / included grid ---------- */
.know-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 36px; }
@media (max-width: 760px){ .know-grid { grid-template-columns: 1fr; } }
.know h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 14px; }

/* ---------- PACKAGE CONFIGURATOR (build-your-quote modal) ---------- */
.cfg {
  position: fixed; inset: 0; z-index: 220; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,4,6,.82); backdrop-filter: blur(10px); animation: fade .25s ease;
}
.cfg.open { display: flex; }
.cfg__panel {
  position: relative; width: min(720px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2)); box-shadow: var(--shadow);
  transform: scale(.97); transition: transform .3s var(--ease);
}
.cfg.open .cfg__panel { transform: scale(1); }
.cfg__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--teal-bright), transparent); }
.cfg__close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(0,0,0,.5); color: #fff; font-size: 1.2rem; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.cfg__close:hover { background: var(--gem-red); transform: rotate(90deg); }
.cfg__head { padding: 26px 28px 8px; }
.cfg__title { font-family: var(--font-display); font-size: clamp(1.4rem,3vw,1.9rem); margin-top: 8px; }
.cfg__lede { color: var(--ink-soft); font-size: .9rem; margin-top: 8px; max-width: 56ch; }
.cfg__body { flex: 1 1 auto; min-height: 0; padding: 8px 28px; overflow-y: auto; }
.cfg__breakdown .cfg__row-t { padding: 4px 0; }
.cfg__breakdown .cfg__floor { margin-top: 10px; }
/* ad-spend slider inside the configurator */
.cfg__spend { margin-top: 6px; }
.cfg__spend-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg__spend-amt { font-family: var(--font-display); font-size: 1.7rem; color: #fff; line-height: 1; }
.cfg__spend-views { text-align: right; }
.cfg__spend-views b { font-family: var(--font-display); font-size: 1.35rem; color: var(--teal-bright); display: block; line-height: 1.1; }
.cfg__spend-lbl { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.cfg__disc { font-size: .74rem; color: var(--ink-mute); line-height: 1.55; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.cfg__section { padding: 16px 0; border-top: 1px solid var(--line); }
.cfg__section:first-child { border-top: none; }
.cfg__section h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 12px; }
.cfg__section h4 small { font-weight: 400; font-size: .76rem; letter-spacing: 0; }
.cfg__list { display: grid; gap: 8px; }
.cfg__opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .2s, background .2s;
}
.cfg__opt:hover { border-color: var(--line-2); }
.cfg__opt input { width: 18px; height: 18px; accent-color: var(--teal-bright); cursor: pointer; }
.cfg__name { font-size: .92rem; color: var(--ink); }
.cfg__opt.is-off .cfg__name { color: var(--ink-mute); text-decoration: line-through; }
.cfg__delta { font-size: .82rem; color: var(--teal-bright); font-weight: 600; white-space: nowrap; }
.cfg__delta.is-off { color: var(--gem-red); }
/* Direction — director day counter. Appears only once a director is selected. */
.cfg__days { margin-top: 12px; padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.cfg__days[hidden] { display: none; }
.cfg__days-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg__days-lbl { font-size: .9rem; color: var(--ink-soft); }
.cfg__days-lbl b { color: var(--ink); }
.cfg__stepper { display: flex; align-items: center; gap: 6px; }
.cfg__step {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink);
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
  transition: border-color .2s, background .2s, color .2s;
}
.cfg__step:hover { border-color: var(--teal-bright); color: var(--teal-bright); background: rgba(255,255,255,.07); }
.cfg__days-input {
  width: 62px; height: 34px; text-align: center; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: #fff;
  font-family: var(--font-display); font-size: 1.05rem; -moz-appearance: textfield;
}
.cfg__days-input:focus { outline: none; border-color: var(--teal-bright); }
.cfg__days-input::-webkit-outer-spin-button,
.cfg__days-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfg__days-calc { margin-top: 10px; font-size: .86rem; color: var(--ink-soft); }
.cfg__days-calc b { color: var(--teal-bright); font-weight: 600; }
.cfg__days-ot { margin-top: 6px; font-size: .78rem; color: var(--ink-mute); }
.cfg__days-ot b { color: var(--ink); font-weight: 600; }
.cfg__days-note { margin-top: 8px; font-size: .74rem; line-height: 1.55; }
.cfg__foot { padding: 14px 28px 20px; border-top: 1px solid var(--line-2); background: rgba(0,0,0,.35); flex: none; }
.cfg__foot .cfg__row-t--big { margin-top: 0; padding-top: 4px; border-top: none; }
.cfg__foot .cfg__note { margin: 4px 0 12px; }
.cfg__totals { margin-bottom: 16px; }
.cfg__row-t { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--ink-soft); padding: 5px 0; }
.cfg__row-t b { color: var(--ink); font-weight: 600; font-family: var(--font-body); }
.cfg__row-t--big { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; font-size: 1rem; }
.cfg__row-t--big span { color: var(--ink); }
.cfg__row-t--big b { font-family: var(--font-display); font-size: 1.6rem; color: #fff; }
.cfg__floor { font-size: .82rem; color: #f4cf8a; background: rgba(244,183,64,.1); border: 1px solid rgba(244,183,64,.32);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0; line-height: 1.5; }
.cfg__note { font-size: .76rem; margin: 6px 0 14px; }
@media (max-width: 560px){ .cfg__head, .cfg__body, .cfg__foot { padding-left: 18px; padding-right: 18px; } }

/* ============================================================
   PR / VISIBILITY DIVISION + amplification
   ============================================================ */
/* As-Seen-On credibility strip */
.aso { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.aso__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px clamp(22px,4vw,46px); padding: 24px 0; }
.aso__label { width: 100%; text-align: center; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.aso__inner span { font-family: var(--font-display); font-size: clamp(1rem,2.1vw,1.5rem); color: var(--ink-soft); opacity: .72; transition: opacity .3s, color .3s; }
.aso__inner span:hover { opacity: 1; color: #fff; }

/* "+ ad spend" badge on package cards */
.pkg-adspend { margin-top: 12px; font-size: .8rem; color: var(--teal-bright); display: flex; align-items: center; gap: 7px; }
.pkg-adspend::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--teal-bright); box-shadow: 0 0 8px var(--teal-glow); flex: none; }

/* ============================================================
   VIEWS PROJECTOR WIDGET (mass-posting amplification)
   ============================================================ */
.viz { border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line-2); overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2)); }
.viz__grid { display: grid; grid-template-columns: .85fr 1.15fr; }
@media (max-width: 860px){ .viz__grid { grid-template-columns: 1fr; } }
.viz__controls { padding: clamp(26px,3.5vw,40px); border-right: 1px solid var(--line); background: radial-gradient(120% 80% at 0% 0%, rgba(31,143,125,.12), transparent 60%); }
@media (max-width: 860px){ .viz__controls { border-right: none; border-bottom: 1px solid var(--line); } }
.viz__field { margin-bottom: 22px; }
.viz__field label { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 10px; }
.viz__field label b { font-family: var(--font-display); color: #fff; font-size: 1.1rem; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 100px; outline: none;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal) var(--fill,50%), rgba(255,255,255,.1) var(--fill,50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal)); border: 2px solid #0b1512; cursor: pointer; box-shadow: 0 4px 14px -3px var(--teal-glow); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--teal-bright); border: 2px solid #0b1512; cursor: pointer; }
.viz__out { padding: clamp(26px,3.5vw,40px); display: flex; flex-direction: column; }
.viz__big { font-family: var(--font-display); font-size: clamp(2.4rem,6vw,3.6rem); line-height: 1; color: #fff; }
.viz__big small { display: block; font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; }
.viz__bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin: 24px 0 6px; }
.viz__bar { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--teal-bright), var(--teal-deep)); min-height: 6px; transition: height .5s var(--ease); position: relative; }
.viz__bar span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: .6rem; color: var(--ink-mute); }
.viz__bar i { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .6rem; color: var(--ink-mute); font-style: normal; }
.viz__disc { font-size: .74rem; color: var(--ink-mute); margin-top: 26px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 14px; }

/* market-views table (ad spend results by market) */
.mkt { margin-top: 18px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.mkt__row { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 1px; background: var(--line); }
.mkt__row--head .mkt__c { background: var(--panel-2); color: var(--ink-mute); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.mkt__c { background: var(--panel); padding: 14px 16px; font-size: .9rem; color: var(--ink-soft); }
.mkt__c b { color: #fff; font-family: var(--font-display); }
.mkt__c .amt { color: var(--teal-bright); font-weight: 600; }
@media (max-width: 600px){ .mkt__c { padding: 11px 12px; font-size: .82rem; } }

/* ============================================================
   MOBILE OPTIMIZATION PASS — tighter type scale, spacing & pacing
   ============================================================ */
@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  .section { padding: clamp(40px, 11vw, 60px) 0; }
  .section--tight { padding: 36px 0; }
  .wrap { width: min(100% - 32px, var(--maxw)); }
  /* type scale: rein in the big display sizes so they don't dominate small screens */
  .h-2xl { font-size: clamp(2.3rem, 11vw, 3rem); line-height: 1.02; }
  .h-xl  { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .h-lg  { font-size: clamp(1.6rem, 7vw, 2rem); }
  .h-md  { font-size: clamp(1.25rem, 5vw, 1.5rem); }
  .lead, .hero__tagline { font-size: 1rem; line-height: 1.55; }
  .eyebrow { font-size: 11px; letter-spacing: .26em; }
  /* hero: tighten the vertical rhythm */
  .hero { padding-top: calc(var(--nav-h) + 18px); }
  .hero__head { margin-bottom: 26px; }
  .hero__tagline { margin: 14px auto 20px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .btn-lg { padding: 15px 22px; font-size: .92rem; }
  /* section heads stack with less gap */
  .section-head { gap: 12px; margin-bottom: 4px; }
  .section-head p { font-size: .95rem; }
  /* panels & cards: trim padding so content breathes without huge gaps */
  .panel { padding: 22px 18px; }
  .tier { padding: 24px 22px; }
  .bigpkg__main, .bigpkg__aside, .consult-aside, .consult-form { padding: 24px 20px; }
  .metrics { gap: 12px; }
  .metric { padding: 22px 18px; }
  .metric b { font-size: 2rem; }
  /* proof / press / aso strips: tighter */
  .proof__inner, .press, .aso__inner { gap: 10px 20px; padding: 20px 0; }
  .proof__names span, .press span, .aso__inner span { font-size: 1.05rem; }
  /* quote band */
  .quote-band blockquote { font-size: 1.4rem; line-height: 1.3; max-width: 30ch; }
  /* keep cards comfortably tappable */
  .btn { padding: 13px 20px; }
}
@media (max-width: 380px) {
  .h-2xl { font-size: 2.1rem; }
  .hero__logo-img { max-width: 92vw; }
}

/* ============================================================
   GSAP layer — GSAP only ENHANCES (hero entrance, parallax, number
   pops, magnetic CTA). The proven components.js geometry-sweep still
   owns .reveal, so content is never dependent on GSAP/ScrollTrigger
   firing — if anything fails, the site still reveals normally.
   These are just perf hints + a load-time hide for the hero so its
   entrance timeline doesn't flash (cleared if GSAP is absent). */
html.gsap-on .hero__head > *,
html.gsap-on .page-hero .wrap > * { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  html.gsap-on .hero__head > *, html.gsap-on .page-hero .wrap > * { will-change: auto; }
}

/* ============================================================
   TABS — segmented control (VFX | AI VFX). Panels are plain
   [hidden] sections, so with JS off BOTH panels render in full
   and nothing is lost; the script only adds the switching.
   ============================================================ */
.tabs {
  display: inline-flex; gap: 4px; padding: 5px; margin-top: 26px;
  border: 1px solid var(--line); border-radius: 100px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn {
  appearance: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 12px 26px; border-radius: 100px;
  color: var(--ink-mute); background: transparent;
  transition: color .25s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.tabs__btn:hover { color: var(--ink); }
/* aria-selected = tab (VFX page) · aria-pressed = toggle button (AI reel volume) */
.tabs__btn[aria-selected="true"],
.tabs__btn[aria-pressed="true"] {
  color: #03130f; background: linear-gradient(180deg, var(--teal-bright), var(--teal));
  box-shadow: 0 8px 26px -12px var(--teal-glow);
}
.tabs__btn:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
.tabpanel[hidden] { display: none; }
@media (max-width: 560px) {
  .tabs { display: flex; width: 100%; }
  .tabs__btn { flex: 1 0 auto; padding: 12px 18px; font-size: .72rem; letter-spacing: .12em; }
}

/* VFX rate rows — full-width rate-card rows: name + description on the left,
   price held right and vertically centred against both lines. */
.addon-grid--rate { grid-template-columns: 1fr; }
.addon--wide {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: start; column-gap: 28px; row-gap: 6px; padding: 20px 22px;
}
.addon--wide .addon__name { grid-column: 1; font-size: .95rem; color: var(--ink); }
.addon--wide .addon__desc { grid-column: 1; font-size: .84rem; color: var(--ink-mute); line-height: 1.55; max-width: 68ch; }
.addon--wide .addon__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.02rem; }
@media (max-width: 620px) {
  .addon--wide { grid-template-columns: 1fr; }
  .addon--wide .addon__price { grid-column: 1; grid-row: auto; align-self: start; }
}

/* ============================================================
   HERO SHOWREEL — the film leads the page, the logo sits under it.
   Height is capped so the wordmark still clears the fold on a
   laptop; the frame keeps the site's chrome/teal edge treatment.
   ============================================================ */
.hero__film {
  /* Width is derived from the height cap AND the film's own aspect ratio, so the
     framed border hugs the picture exactly instead of pillarboxing it.
     Override per-instance — a 2.39:1 scope reel needs different math to a 16:9:
       style="--ar: 2.3852; --film-max-h: 46vh" */
  --ar: 1.7778;          /* 16:9 default */
  --film-max-h: 62vh;
  max-width: min(1180px, calc(var(--film-max-h) * var(--ar)));
  margin: 0 auto clamp(26px, 4vw, 46px);
  padding: 0 16px;
}
/* left-aligned variant, for page-hero layouts whose copy is flush left */
.hero__film--left { margin-left: 0; margin-right: auto; padding: 0; }
.hero__video {
  display: block; width: 100%; height: auto;
  max-height: var(--film-max-h);  /* keeps following content near the fold */
  /* NO aspect-ratio + NO object-fit:cover — both would crop the frame on
     short viewports. height:auto lets the film's own 16:9 govern, and the
     video element's default `contain` letterboxes rather than cutting. */
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: #000;
  box-shadow: var(--shadow), 0 0 0 1px rgba(31,143,125,.18) inset;
}
.hero__video:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 4px; }
@media (max-width: 760px) {
  .hero__video { max-height: none; border-radius: var(--radius-sm); }
  .hero__film { padding: 0 12px; }
}

/* ============================================================
   CENTERED PAGE HERO — scoped modifier, used ONLY by vfx.html.
   `.page-hero` is shared by 19 pages that must stay flush-left, so every rule
   here is namespaced to .page-hero--center. Never move these onto the base
   class: it would re-align every service, legal and admin page on the site.
   ============================================================ */
.page-hero--center { text-align: center; }
/* .lead and .hero__film carry their own max-width; without auto side margins a
   constrained block stays pinned left even when its text is centered. */
.page-hero--center .lead { margin-inline: auto; }
.page-hero--center .hero__film { margin-inline: auto; }
/* .eyebrow and .tabs are inline-flex, so the parent's text-align centers them. */

/* Video whose source has letterbox bars BAKED INTO the frame (e.g. a 2.39:1
   picture delivered inside a 1920×1080 container). Setting the box to the
   PICTURE's ratio and using object-fit:cover crops off exactly the bars and
   nothing else — the maths works out because the bars are the only difference
   between the two ratios. This is the one place `cover` is correct on a video:
   everywhere else it would cut into the picture. Avoids re-encoding the master. */
.hero__video--letterboxed {
  aspect-ratio: var(--ar);
  height: auto;
  object-fit: cover;
}

/* Fine-print disclosure — deliberately much smaller than body copy but held
   above the legibility floor: 0.7rem with open line-height and a light enough
   tone to clear contrast requirements on the dark hero. */
.disclosure-fine {
  font-size: .7rem;
  line-height: 1.55;
  letter-spacing: .01em;
  color: rgba(255,255,255,.6);
  max-width: 78ch;
  margin: 14px auto 0;
}

/* Reel attribution line — sits between a video and its fine-print disclosure.
   Bigger than .disclosure-fine (it's a credit worth reading) but clearly
   secondary to body copy. */
.reel-credit {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 12px auto 0;
  max-width: 72ch;
}
.reel-credit strong { color: var(--ink); }

/* "Playing muted" hint — sits inside the hero disclosure line, one shade dimmer
   so it reads as a system note rather than part of the legal text. */
.hero__sound-hint { display: inline-block; color: rgba(255,255,255,.45); }

/* Brand block sitting ABOVE the hero reel — tighter bottom margin than the
   standard .hero__head so the logo reads as a lockup with the film beneath it
   rather than a separate stranded element. */
.hero__head--brand { margin-bottom: clamp(30px, 4.5vw, 60px); }
.hero__head--brand .hero__logo-img { margin-bottom: 0; }

/* ============================================================
   MUSIC-VIDEO STILLS CAROUSEL — hand-scrollable film strip.
   Slides are fixed-HEIGHT / auto-WIDTH: these stills range from 0.78 to 2.18
   aspect, and any shared ratio would crop the wide ones to ribbons and cut
   through faces on the portrait. Width follows the native ratio → no crop.
   ============================================================ */
.mv-carousel {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  cursor: grab;
  touch-action: pan-y;              /* vertical page scroll stays native on touch */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mv-carousel.is-dragging { cursor: grabbing; }
.mv-carousel__track { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; }
.mv-slide {
  flex: 0 0 auto; height: 340px; margin-right: 14px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: #000;
  transition: border-color .3s var(--ease);
}
.mv-slide:hover { border-color: rgba(31,143,125,.4); }
.mv-slide img { display: block; height: 100%; width: auto; }
@media (max-width: 760px) { .mv-slide { height: 240px; margin-right: 10px; } }


/* ===================== BEAT STORE =====================
   A 1,814-row catalogue. The list is a flat grid of compact rows rather than cards:
   at this count, cards would make the page kilometres long and bury the search. */
.beat-store { margin-top: 26px; }
.beat-store__bar { display: grid; gap: 14px; margin-bottom: 18px; }
.beat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.beat-chip {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 100px;
  color: var(--ink-mute); background: rgba(255,255,255,.02);
  border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s;
}
.beat-chip b { font-weight: 700; opacity: .5; margin-left: 6px; }
.beat-chip:hover { color: var(--ink); border-color: var(--line-2); }
.beat-chip.is-on { color: #03130f; background: linear-gradient(180deg, var(--teal-bright), var(--teal)); border-color: transparent; }
.beat-chip.is-on b { opacity: .7; }
.beat-store__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.beat-search {
  flex: 1 1 240px; min-width: 0; height: 42px; padding: 0 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: rgba(0,0,0,.35); color: #fff; font-family: var(--font-body); font-size: .9rem;
}
.beat-search:focus { outline: none; border-color: var(--teal-bright); }
.beat-store__count { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }

.beat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.beat {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  transition: border-color .2s, background .2s;
}
.beat:hover { border-color: var(--line-2); background: rgba(255,255,255,.035); }
.beat__play {
  width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.beat__play span { /* play triangle, flips to a pause bar pair when playing */
  width: 0; height: 0; margin-left: 3px;
  border-left: 10px solid var(--teal-bright);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transition: border-color .2s;
}
.beat__play:hover { border-color: var(--teal-bright); background: rgba(255,255,255,.07); }
.beat__play.is-playing { border-color: var(--teal-bright); background: rgba(var(--teal-rgb, 0,214,170), .12); }
.beat__play.is-playing span {
  width: 4px; height: 12px; margin-left: 0; border: 0;
  background: var(--teal-bright); box-shadow: 6px 0 0 var(--teal-bright);
  transform: translateX(-3px);
}
.beat__play.is-missing { border-color: rgba(244,183,64,.5); }
.beat__play.is-missing span { border-left-color: #f4cf8a; }
.beat__meta { min-width: 0; }
/* The title may carry a type-beat designation, so it wraps to a second line rather
   than truncating — "[Curren$y Type Beat]" is the part a buyer is scanning for, and
   an ellipsis would eat exactly that. Capped at three lines so rows stay even. */
.beat__title { font-family: var(--font-display); font-size: .95rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Deliberately NOT nowrap: on a phone "[Benny the Butcher Type Beat]" is wider than
   the row, and a nowrap tag gets sliced mid-artist-name — the one word that must
   survive. Let it wrap. */
.beat__tb { font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; color: var(--teal-bright); }
.beat__sub { font-size: .74rem; color: var(--ink-mute); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beat__key { color: var(--teal-bright); font-weight: 600; }
.beat__buy { padding: 8px 16px; font-size: .72rem; white-space: nowrap; }
/* .btn sets display:inline-flex, which beats the UA's [hidden] rule — the "Load more"
   button stayed on screen reading "Load 0 more" at the end of a filtered list.
   Scoped to .btn on purpose: a global [hidden] override would hide the tab panels
   that are deliberately visible with JS off. */
.btn[hidden] { display: none; }
/* the ladder needs a 4-across row on this page (the talent card is 5) */
.rate-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .beat-list { grid-template-columns: 1fr; }
  .rate-row, .rate-row--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- current-row state in the catalogue ---------- */
.beat.is-current { border-color: var(--teal-bright); background: rgba(255,255,255,.05); }
.beat.is-current .beat__title { color: #fff; }

/* ---------- sticky player bar ----------
   Fixed to the viewport bottom and only mounted/opened once something plays, so it
   never covers content on a page nobody is listening on. Body gets bottom padding
   while open so the last row and the footer stay reachable. */
.bplayer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  transform: translateY(110%); transition: transform .32s var(--ease);
  background: rgba(11,13,15,.86);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.95), 0 -1px 0 rgba(255,255,255,.06) inset;
}
.bplayer.is-open { transform: translateY(0); }
/* --bplayer-h is measured by beat-store.js; the fallback only covers first paint. */
body:has(.bplayer.is-open) { padding-bottom: calc(var(--bplayer-h, 72px) + 26px); }
.bplayer__inner {
  max-width: var(--maxw, 1240px); margin: 0 auto;
  display: grid; grid-template-columns: auto auto auto minmax(0,1.1fr) minmax(0,1.6fr) 90px auto auto;
  align-items: center; gap: 14px; padding: 12px clamp(16px,4vw,40px);
}
.bplayer__btn {
  appearance: none; cursor: pointer; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--ink-soft); font-size: .82rem; line-height: 1;
  display: grid; place-items: center; transition: color .2s, border-color .2s, background .2s;
}
.bplayer__btn:hover { color: #fff; border-color: var(--teal-bright); }
.bplayer__btn--main { width: 46px; height: 46px; border-color: var(--teal-bright);
  background: linear-gradient(180deg, var(--teal-bright), var(--teal)); }
.bplayer__btn--main span { /* play triangle → pause bars when playing */
  width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid #03130f; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.bplayer.is-playing .bplayer__btn--main span {
  width: 4px; height: 14px; margin-left: 0; border: 0;
  background: #03130f; box-shadow: 7px 0 0 #03130f; transform: translateX(-3px);
}
.bplayer__meta { min-width: 0; }
.bplayer__title { font-family: var(--font-display); font-size: .94rem; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bplayer__sub { font-size: .72rem; color: var(--ink-mute); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bplayer__seek { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bplayer__t { font-size: .7rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; width: 34px; flex: none; }
.bplayer__t:last-child { text-align: right; }
.bplayer__range, .bplayer__vol {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.16); flex: 1 1 auto; min-width: 0;
}
.bplayer__vol { flex: none; width: 90px; }
.bplayer__range::-webkit-slider-thumb, .bplayer__vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--teal-bright); border: 0; box-shadow: 0 0 12px -2px var(--teal-glow);
}
.bplayer__range::-moz-range-thumb, .bplayer__vol::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--teal-bright);
}
.bplayer__buy { padding: 9px 18px; font-size: .72rem; white-space: nowrap; }
.bplayer__x { appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-mute); font-size: 1.3rem; line-height: 1; padding: 0 4px; }
.bplayer__x:hover { color: #fff; }
.bplayer__note { text-align: center; font-size: .74rem; color: #f4cf8a; padding: 0 20px 10px; }

@media (max-width: 900px) {
  /* drop volume + the buy button; keep transport, title and seek */
  .bplayer__inner { grid-template-columns: auto auto auto minmax(0,1fr) auto; gap: 10px; }
  .bplayer__seek { grid-column: 1 / -1; order: 2; }
  .bplayer__vol, .bplayer__buy { display: none; }
  body:has(.bplayer.is-open) { padding-bottom: calc(var(--bplayer-h, 132px) + 26px); }
}
@media (prefers-reduced-motion: reduce) { .bplayer { transition: none; } }

/* ---------- closing CTA band ----------
   A full-width panel: copy left, action right. Used on beat-store.html (where it was
   markup with no rule behind it, so it rendered as a bare stacked div) and at the
   foot of audio-production.html, replacing a 62ch block that left half the row empty. */
.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px,4vw,56px); flex-wrap: wrap;
  padding: clamp(26px,3.4vw,44px) clamp(24px,3.4vw,48px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background:
    radial-gradient(130% 200% at 100% 0%, rgba(31,143,125,.16), transparent 62%),
    linear-gradient(180deg, var(--panel), var(--bg-2));
}
.cta-band > div { min-width: 0; max-width: 62ch; }
.cta-band .btn { flex: none; }
@media (max-width: 700px) { .cta-band .btn { width: 100%; } }

/* ---------- 3-beat bundle promotion ----------
   Banner, the per-row Add control, and the tray that holds the picks. */
.beat-promo {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px,3vw,40px);
  flex-wrap: wrap; margin-bottom: 22px; padding: clamp(18px,2.6vw,28px);
  border: 1px solid rgba(45,212,191,.34); border-radius: var(--radius);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(45,212,191,.14), transparent 60%),
    var(--panel);
}
.beat-promo__copy { min-width: 0; max-width: 74ch; }
.beat-promo__flag {
  display: inline-block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal-bright); border: 1px solid rgba(45,212,191,.4);
  border-radius: 999px; padding: 4px 12px;
}
.beat-promo h3 { font-family: var(--font-display); font-size: clamp(1.15rem,2.4vw,1.6rem); margin-top: 12px; }
.beat-promo p { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.rate-cell__promo {
  margin-top: 8px; font-size: .7rem; letter-spacing: .06em; color: var(--teal-bright);
  border-top: 1px solid var(--line-2); padding-top: 8px;
}
/* the promo is switched off server-side: hide every trace rather than advertise
   a price the Worker will refuse */
.promo-off .beat-promo, .promo-off .rate-cell__promo { display: none; }

/* Add replaces License only while a bundle is being built, so the row never shows
   two competing calls to action. */
.beat__add { display: none; padding: 8px 16px; font-size: .72rem; white-space: nowrap; }
.beat-store.is-bundling .beat__add { display: block; }
.beat-store.is-bundling .beat__buy { display: none; }
.beat.is-picked { border-color: var(--teal-bright); background: rgba(45,212,191,.07); }
.beat.is-picked .beat__add { border-color: var(--teal-bright); color: var(--teal-bright); }

.btray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 910;
  transform: translateY(115%); transition: transform .32s var(--ease), bottom .32s var(--ease);
  background: rgba(11,13,15,.92);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-top: 1px solid rgba(45,212,191,.4);
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.95);
}
.btray.is-open { transform: translateY(0); }
/* stack above the player when a preview is running */
/* The lift only applies while the tray is OPEN. Applied unconditionally it moved the
   CLOSED tray's hidden position back up into view — translateY(115%) hides it relative
   to its own height, so a bottom offset re-exposed it and it covered the player it was
   supposed to sit above (77px of overlap on a phone, at a higher z-index).
   pointer-events is belt and braces: a closed tray must never eat a click meant for
   the player underneath it. */
body:has(.bplayer.is-open) .btray.is-open { bottom: var(--bplayer-h, 72px); }
.btray:not(.is-open) { pointer-events: none; }
body.has-btray { padding-bottom: 96px; }
body.has-btray:has(.bplayer.is-open) { padding-bottom: calc(var(--bplayer-h, 72px) + 122px); }
.btray__inner {
  max-width: var(--maxw, 1240px); margin: 0 auto;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center; gap: 16px; padding: 12px clamp(16px,4vw,40px);
}
.btray__lead { display: grid; gap: 2px; }
.btray__lead b { font-family: var(--font-display); font-size: .95rem; color: #fff; white-space: nowrap; }
.btray__lead span { font-size: .72rem; color: var(--ink-mute); white-space: nowrap; }
.btray__picks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; }
.btray__picks li {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 6px 5px 14px;
  font-size: .76rem; color: var(--ink-soft); background: rgba(255,255,255,.04);
}
.btray__picks li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btray__picks button {
  appearance: none; border: 0; cursor: pointer; background: none; flex: none;
  color: var(--ink-mute); font-size: 1rem; line-height: 1; padding: 0 4px;
}
.btray__picks button:hover { color: #fff; }
.btray__go { white-space: nowrap; }
.btray__go[disabled] { opacity: .45; cursor: not-allowed; }
.btray__x { appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-mute); font-size: 1.3rem; line-height: 1; padding: 0 4px; }
.btray__x:hover { color: #fff; }
@media (max-width: 900px) {
  .btray__inner { grid-template-columns: minmax(0,1fr) auto; }
  .btray__picks { grid-column: 1 / -1; order: 3; }
  .btray__go { grid-column: 1 / -1; order: 4; }
  body.has-btray { padding-bottom: 190px; }
  body.has-btray:has(.bplayer.is-open) { padding-bottom: calc(var(--bplayer-h, 132px) + 190px); }
}
@media (prefers-reduced-motion: reduce) { .btray { transition: none; } }

/* ---------- licence modal (reuses the .cfg shell) ---------- */
.bcheck__picks { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.bcheck__picks li {
  display: grid; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: rgba(255,255,255,.03);
}
.bcheck__picks li b { font-family: var(--font-display); font-size: .9rem; color: #fff; }
.bcheck__picks li span { font-size: .74rem; color: var(--ink-mute); }
.cfg__was { color: var(--ink-mute); font-weight: 400; margin-left: 6px; }
.cfg__save { font-size: .78rem; color: var(--teal-bright); margin-top: 10px; }
/* a condition of the sale, not a footnote — flagged so it reads before checkout */
.cfg__hint--flag { font-size: .78rem; color: var(--ink-soft); margin-top: 10px;
  border-left: 2px solid var(--teal-bright); padding: 8px 0 8px 12px; }
.cfg__hint--flag strong { color: #fff; }
.bcheck .cfg__name { display: grid; gap: 2px; }
.bcheck .cfg__name small { font-size: .74rem; color: var(--ink-mute); font-weight: 400; }
.bcheck .cfg__opt input { width: 17px; height: 17px; accent-color: var(--teal-bright); }
.bcheck .cfg__opt.is-on { border-color: var(--teal-bright); background: rgba(255,255,255,.05); }
.bcheck__field { display: grid; gap: 6px; }
.bcheck__field span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.bcheck__field input {
  height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: #fff;
  font-family: var(--font-body); font-size: .92rem;
}
.bcheck__field input:focus { outline: none; border-color: var(--teal-bright); }
.beat__buy { cursor: pointer; }

/* ---------- admin control console ----------
   Deliberately plain: this is an operations tool, not a showcase. Density and
   scanability beat atmosphere when you are working a queue. */
.ac__bar { display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line-2); margin-bottom:22px; }
.ac__tabs { display:flex; gap:8px; flex-wrap:wrap; }
.ac__tab { appearance:none; cursor:pointer; padding:9px 18px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink-soft);
  font-size:.82rem; letter-spacing:.04em; transition:.2s; }
.ac__tab:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.ac__tab.is-on { background:var(--teal-bright); border-color:var(--teal-bright); color:#04231f; font-weight:600; }
.ac__tab b { margin-left:6px; }
.ac__baractions { display:flex; gap:8px; }

.ac__login { display:grid; gap:14px; max-width:360px; margin-top:20px; }
.ac__stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.ac__stat { padding:20px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); display:grid; gap:4px; }
.ac__statlbl { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.ac__statval { font-family:var(--font-display); font-size:1.7rem; color:#fff; }
.ac__stat small { font-size:.74rem; color:var(--ink-mute); }
.ac__h { font-family:var(--font-display); font-size:1.05rem; margin:28px 0 12px; }
.ac__chans { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.ac__chan { appearance:none; cursor:pointer; text-align:left; padding:14px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--ink-soft);
  display:grid; gap:2px; transition:.2s; }
.ac__chan:hover { border-color:var(--teal-bright); color:#fff; }
.ac__chan b { font-family:var(--font-display); font-size:1.3rem; color:#fff; }
.ac__dot { font-style:normal; font-size:.7rem; color:var(--teal-bright); }

.ac__filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ac__filters select, .ac__filters .beat-search { height:42px; padding:0 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:rgba(0,0,0,.35); color:#fff; font-family:var(--font-body); font-size:.86rem; }
.ac__filters .beat-search { flex:1 1 240px; }
.ac__count { font-size:.78rem; color:var(--ink-mute); margin-bottom:12px; }

.ac__list { display:grid; gap:10px; }
.ac__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:16px 18px;
  border:1px solid var(--line-2); border-radius:var(--radius-sm); background:rgba(255,255,255,.03); }
.ac__rowtop { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.ac__row h5 { font-family:var(--font-display); font-size:1rem; color:#fff; margin:0 0 4px; }
.ac__who { font-size:.8rem; color:var(--ink-soft); }
.ac__who a { color:var(--teal-bright); }
.ac__msg { font-size:.84rem; color:var(--ink-soft); margin-top:8px; white-space:pre-wrap;
  max-height:7.5em; overflow:auto; }
.ac__badge { font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px;
  border-radius:999px; border:1px solid var(--line-2); color:var(--ink-mute); }
.ac__badge--new { color:#04231f; background:var(--teal-bright); border-color:var(--teal-bright); font-weight:700; }
.ac__badge--open { color:#f4cf8a; border-color:rgba(244,207,138,.5); }
.ac__badge--won { color:#7ee0c0; border-color:rgba(126,224,192,.5); }
.ac__badge--lost, .ac__badge--archived { opacity:.65; }
.ac__chanlbl { font-size:.72rem; color:var(--ink-mute); }
.ac__time { font-size:.72rem; color:var(--ink-mute); margin-left:auto; }
.ac__rowside { display:grid; gap:8px; justify-items:end; align-content:start; min-width:132px; }
.ac__amt { font-family:var(--font-display); font-size:1.1rem; color:var(--teal-bright); }
.ac__rowside small { font-size:.72rem; color:var(--ink-mute); }
.ac__status { height:34px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--line-2);
  background:rgba(0,0,0,.35); color:#fff; font-size:.78rem; }
.ac__reply { padding:7px 14px; font-size:.74rem; }
.ac__more { margin-top:10px; }
.ac__more summary { cursor:pointer; font-size:.76rem; color:var(--ink-mute); }
.ac__more dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-top:8px; font-size:.78rem; }
.ac__more dt { color:var(--ink-mute); }
.ac__more dd { margin:0; color:var(--ink-soft); }
.ac__notes { width:100%; margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:rgba(0,0,0,.35); color:#fff; font-family:var(--font-body); font-size:.84rem; }
.ac__btns { display:flex; gap:8px; margin-top:8px; }
.ac__danger { color:#ff9b9b; border-color:rgba(255,155,155,.4); }
.ac__hint { font-size:.72rem; color:var(--ink-mute); margin-top:8px; }
.ac__tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ac__empty { padding:26px; text-align:center; color:var(--ink-mute); border:1px dashed var(--line-2); border-radius:var(--radius-sm); }
@media (max-width:720px) { .ac__row { grid-template-columns:1fr; } .ac__rowside { justify-items:start; } }

/* ---------- legal pages ---------- */
.legal h2 { font-family:var(--font-display); font-size:1.15rem; color:#fff; margin:30px 0 10px; }
.legal h2:first-of-type { margin-top:0; }
.legal p { font-size:.9rem; color:var(--ink-soft); margin-bottom:12px; }
.legal .pkg-list { margin-bottom:14px; }
.legal__flag { border-left:3px solid #f4b740; background:rgba(244,183,64,.08); padding:14px 18px;
  border-radius:var(--radius-sm); font-size:.85rem; color:var(--ink-soft); margin-bottom:26px; }
.legal__table { width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:.82rem; display:block; overflow-x:auto; }
.legal__table th, .legal__table td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.legal__table th { color:var(--ink-mute); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.legal__table td { color:var(--ink-soft); }


/* ---------- accessibility baseline (always on, not a toggle) ----------
   WCAG 2.4.7 focus visible / 2.4.1 bypass blocks / 2.4.11 focus not obscured.
   :focus-visible rather than :focus so a mouse click doesn't paint a ring, but every
   keyboard and switch user gets one on every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 3px;
  border-radius: 3px;
}
/* the docked player and bundle tray are fixed to the bottom; scroll-margin keeps a
   focused control from landing underneath them */
:where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-bottom: 140px; }
main:focus { outline: none; }              /* skip target, focused programmatically */
/* WCAG 1.4.10 reflow. The homepage marquee track is deliberately ~22,000px wide and
   was leaking 16px past the viewport, giving the whole page a horizontal scrollbar.
   `clip` rather than `hidden`: hidden would make main a scroll container and break
   position:sticky inside it. */
main { overflow-x: clip; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 10000;
  transform: translateY(-160%); transition: transform .18s var(--ease, ease);
  background: var(--teal-bright); color: #04231f; font-weight: 700;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  font-size: .85rem; letter-spacing: .04em;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---------- accessibility panel ----------
   Re-tunes the site's OWN tokens per mode, so every component follows without being
   patched individually. In brand: obsidian panel, teal accent, Syne headings. */
.a11y__fab { position:fixed; left:20px; bottom:20px; z-index:9998;
  width:52px; height:52px; border-radius:50%; cursor:pointer;   /* >44px target, 2.5.8 */
  border:1px solid var(--line-2); background:rgba(11,13,15,.92); color:var(--teal-bright);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  display:grid; place-items:center; box-shadow:0 10px 34px -14px rgba(0,0,0,.9);
  transition:transform .2s var(--ease), border-color .2s, color .2s; }
.a11y__fab:hover { transform:translateY(-2px); border-color:var(--teal-bright); color:#fff; }
/* the WhatsApp bubble already owns bottom-right; this sits bottom-LEFT so neither
   covers the other, and both clear the docked beat player */
body:has(.bplayer.is-open) .a11y__fab { bottom:calc(var(--bplayer-h,72px) + 20px); }

.a11y__panel { position:fixed; left:20px; bottom:84px; z-index:9999; width:min(370px,calc(100vw - 40px));
  max-height:min(74vh,640px); overflow:auto; padding:22px; border-radius:var(--radius);
  border:1px solid rgba(31,143,125,.4); background:rgba(9,11,15,.97);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
  opacity:0; transform:translateY(10px) scale(.98); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.a11y__panel.is-open { opacity:1; transform:none; }
body:has(.bplayer.is-open) .a11y__panel { bottom:calc(var(--bplayer-h,72px) + 84px); }
.a11y__head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.a11y__head h2 { font-family:var(--font-display); font-size:1.15rem; color:#fff; margin:0; }
.a11y__x { appearance:none; background:none; border:0; cursor:pointer; color:var(--ink-mute);
  font-size:1.6rem; line-height:1; padding:0 4px; min-width:44px; min-height:44px; }
.a11y__x:hover { color:#fff; }
.a11y__lede { font-size:.8rem; color:var(--ink-mute); margin:6px 0 16px; }
.a11y__row { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-top:1px solid var(--line); }
.a11y__meta { display:grid; gap:2px; min-width:0; }
.a11y__label { font-size:.88rem; color:var(--ink); }
.a11y__meta small { font-size:.72rem; color:var(--ink-mute); }
.a11y__sw { appearance:none; cursor:pointer; flex:none; width:48px; height:28px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05); position:relative; transition:.2s; }
.a11y__sw i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--ink-mute); transition:.2s; }
.a11y__sw.is-on { background:var(--teal-bright); border-color:var(--teal-bright); }
.a11y__sw.is-on i { left:23px; background:#04231f; }
.a11y__steps { display:flex; gap:6px; flex:none; }
.a11y__step { appearance:none; cursor:pointer; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--ink-soft); transition:.2s; }
.a11y__step:nth-child(1){font-size:.72rem} .a11y__step:nth-child(2){font-size:.85rem}
.a11y__step:nth-child(3){font-size:1rem}   .a11y__step:nth-child(4){font-size:1.15rem}
.a11y__step.is-on { background:var(--teal-bright); border-color:var(--teal-bright); color:#04231f; font-weight:700; }
.a11y__foot { display:flex; gap:10px; align-items:center; justify-content:space-between;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.a11y__reset { appearance:none; cursor:pointer; background:none; border:1px solid var(--line-2);
  border-radius:999px; padding:9px 16px; color:var(--ink-soft); font-size:.78rem; }
.a11y__reset:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.a11y__stmt { font-size:.78rem; color:var(--teal-bright); }
.a11y__kbd { font-size:.7rem; color:var(--ink-mute); margin-top:10px; }
.a11y__live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.a11y__ruler { display:none; position:fixed; left:0; right:0; height:44px; z-index:9997; pointer-events:none;
  background:rgba(31,143,125,.13); border-top:1px solid rgba(31,143,125,.5); border-bottom:1px solid rgba(31,143,125,.5); }

/* ===== the modes: re-tune tokens, never repaint components ===== */
html[data-a11y-text="1"] { font-size:115%; }
html[data-a11y-text="2"] { font-size:130%; }
html[data-a11y-text="3"] { font-size:150%; }

/* The site's ground is near-black with off-white ink, so high contrast DARKENS the
   ground and pushes ink to pure white — inverting to black-on-white would fight the
   whole design and leave every teal accent unreadable. */
html[data-a11y-contrast] body { --ink:#ffffff; --ink-soft:#ffffff; --ink-mute:#d7dde5;
  --bg:#000000; --bg-2:#000000; --panel:#0b0b0b; --panel-2:#101010;
  --line:rgba(255,255,255,.42); --line-2:rgba(255,255,255,.6); --teal-bright:#3fd8bd; }
html[data-a11y-contrast] .chrome-text { background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important; }
html[data-a11y-contrast] .hero__media, html[data-a11y-contrast] .page-hero::before { opacity:.12 !important; }

html[data-a11y-calm] video, html[data-a11y-calm] .hero__media,
html[data-a11y-calm] .page-hero::before, html[data-a11y-calm] .page-hero::after { display:none !important; }
html[data-a11y-calm] body { background:var(--bg) !important; }
html[data-a11y-calm] [class*="glow"], html[data-a11y-calm] .divider-gem { opacity:0 !important; }

html[data-a11y-readable] body, html[data-a11y-readable] :where(h1,h2,h3,h4,h5,p,li,a,button,label,td,th) {
  font-family:-apple-system, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing:.012em !important; word-spacing:.06em !important; line-height:1.75 !important; }
html[data-a11y-readable] p, html[data-a11y-readable] li { max-width:66ch; }

html[data-a11y-links] :where(main, footer) a:not(.btn):not(.a11y__stmt) { text-decoration:underline !important;
  text-underline-offset:3px; }

html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after {
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important; }
html[data-a11y-motion] video { display:none !important; }

html[data-a11y-cursor], html[data-a11y-cursor] * { cursor:auto !important; }
html[data-a11y-cursor] a, html[data-a11y-cursor] button, html[data-a11y-cursor] [role="button"] { cursor:pointer !important; }
html[data-a11y-cursor] .cursor, html[data-a11y-cursor] [class*="cursor-"] { display:none !important; }

html[data-a11y-focus] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:5px solid #ffd400 !important; outline-offset:3px !important; box-shadow:0 0 0 3px #000 !important; }

html[data-a11y-ruler] .a11y__ruler { display:block; }

/* the OS setting is honoured without anyone having to ask for it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media (max-width:520px) { .a11y__panel { left:10px; right:10px; width:auto; } .a11y__fab { left:14px; } }
/* per-talent block ladder — kept OUT of currency.js's selector on purpose: it holds
   several amounts with different units, which that module would flatten into a single
   range and lose the hour labels. States USD explicitly instead. */
.card__blocks { font-size: .72rem; color: var(--ink-mute); margin-top: 6px; letter-spacing: .01em; }


/* ---------- LONG-FORM ARTICLE PAGES ----------
   Measure is capped at 68ch. Long-form is the one place on this site where line
   length matters more than filling the grid — past ~75 characters the eye loses
   the start of the next line and people stop reading. */
.article-hero h1 { max-width: 20ch; }
.article-body { max-width: 68ch; font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--ink); margin-top: 2.1em; line-height: 1.2;
}
.article-body h3 {
  font-family: var(--font-display); font-size: clamp(1.08rem, 2vw, 1.3rem);
  color: var(--ink); margin-top: 1.6em;
}
.article-body p strong, .article-body li strong { color: var(--ink); font-weight: 600; }
.article-body em { color: var(--ink); font-style: italic; }
.article-body a { color: var(--teal-bright); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(31,143,125,.45); }
.article-body a:hover { text-decoration-color: var(--teal-bright); }
.article-body ul, .article-body ol { padding-left: 1.25em; display: grid; gap: .55em; }
.article-body li { padding-left: .15em; }
.article-body ul li::marker { color: var(--teal-bright); }
.article-body ol li::marker { color: var(--teal-bright); font-weight: 600; }
.article-body table {
  width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 1.4em;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.article-body th, .article-body td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); }
.article-body th { background: rgba(255,255,255,.04); color: var(--ink); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; }
.article-body tr:last-child td { border-bottom: none; }
.article-note { font-size: .8rem; color: var(--ink-mute); margin-top: .6em; }
.article-cta { max-width: 68ch; }
.article-related { max-width: 68ch; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.article-related ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 10px; }
.article-related a { color: var(--ink); text-decoration: none; font-size: 1rem; display: inline-flex; gap: 10px; }
.article-related a::before { content: "→"; color: var(--teal-bright); }
.article-related a:hover { color: var(--teal-bright); }
@media (max-width: 560px) { .article-body { font-size: .98rem; } }


/* ---------- CATALOGUE VALUATION ESTIMATOR ---------- */
.val-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; margin-top: 26px; align-items: start; }
.val-panel, .val-out {
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.val-out { position: sticky; top: 96px; }
.val-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.val-label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.val-readout { font-family: var(--font-display); font-size: 1.5rem; color: #fff; line-height: 1; }
.val-readout--sm { font-size: 1rem; color: var(--teal-bright); }
.val-rate { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.val-rate__prefix { color: var(--ink-mute); font-size: .95rem; }
.val-rate__suffix { color: var(--ink-mute); font-size: .8rem; }
.val-rate input {
  width: 110px; padding: 9px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: #fff;
  font-family: var(--font-display); font-size: 1.05rem; -moz-appearance: textfield;
}
.val-rate input:focus { outline: none; border-color: var(--teal-bright); }
.val-rate input::-webkit-outer-spin-button, .val-rate input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.val-note { font-size: .78rem; line-height: 1.6; color: var(--ink-mute); margin-top: 10px; max-width: 62ch; }
.val-note strong { color: var(--ink-soft); }
.val-mults { display: grid; gap: 8px; margin-top: 4px; }
.val-out__block { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.val-out__block--hero { border-bottom: none; padding-bottom: 0; }
.val-out__lbl { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.val-out__mid { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); display: block; margin-top: 6px; }
.val-out__big { font-family: var(--font-display); font-size: clamp(1.55rem, 3.2vw, 2.1rem); color: var(--teal-bright); display: block; margin-top: 8px; line-height: 1.05; }
.val-out__to { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin: 4px 0 2px; }
.val-out__big .cur__cop { font-size: .62em; }
@media (max-width: 900px) {
  .val-grid { grid-template-columns: 1fr; }
  .val-out { position: static; }
}


/* ---------- CATALOGUE HERO — book cover as the lead image ---------- */
.cat-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cat-hero__book { position: relative; display: block; justify-self: center; width: min(340px, 100%);
  transform: rotate(-2.2deg); transition: transform .5s var(--ease); }
.cat-hero__book:hover { transform: rotate(0deg) translateY(-4px); }
.cat-hero__book img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  /* a printed book has a spine edge and sits above the page — two shadows, one
     tight for the edge and one broad for the lift */
  box-shadow: -14px 0 26px -18px rgba(0,0,0,.9), 0 34px 70px -28px rgba(0,0,0,.95),
              inset 0 0 0 1px rgba(255,255,255,.06);
}
.cat-hero__flag {
  /* top-left, not bottom: the lower third of the cover carries the author name
     and the badge was sitting on top of it */
  position: absolute; left: -12px; top: 16px; z-index: 2;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: #03130f; background: linear-gradient(180deg, var(--teal-bright), var(--teal));
  padding: 8px 13px; border-radius: 100px; box-shadow: 0 10px 26px -12px var(--teal-glow);
}
@media (max-width: 860px) {
  .cat-hero__grid { grid-template-columns: 1fr; }
  .cat-hero__book { width: min(260px, 70%); margin-top: 8px; }
}

/* ============================================================
   MOBILE LAYOUT LAYER (≤640px) — proportions, rhythm, centering
   ------------------------------------------------------------
   The desktop layout is editorial and flush-left; on a phone that
   read as accidental — hero copy ragged against centered logo
   walls, and section spacing scattered across 0/10/18/30/40/48px
   because inline paddings are tuned for desktop stacking.

   This layer sits LAST in the file so it wins the cascade:
   1. RHYTHM  — one vertical scale. Inline paddings can only be
      beaten by !important; the attribute selectors preserve the
      intent of "grouped" sections (inline padding-top) as a
      smaller continuation gap instead of a flat override.
   2. CENTER  — ceremony copy centers: heroes, section heads,
      leads, taglines, notes, CTA bands, footer. Reading copy
      stays start-aligned: lists, forms, legal body, admin
      console — centered long-form is harder to read, and forms
      with centered labels test worse.
   ============================================================ */
@media (max-width: 640px) {

  /* ---- 1. vertical rhythm ---- */
  main .section { padding: 46px 0 !important; }
  /* any inline top means "this section continues the one above" — keep the
     grouping, but give it breathing room desktop didn't need */
  main .section[style*="padding-top"] { padding-top: 26px !important; }
  main .section[style*="padding-top:0"],
  main .section[style*="padding-top: 0"] { padding-top: 16px !important; }
  .page-hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 10px; }
  .footer { margin-top: 12px; padding: 44px 0 32px; }

  /* ---- 2. type proportion ---- */
  h1, h2, h3, .h-xl, .h-lg, .h-md { text-wrap: balance; }
  p { text-wrap: pretty; }
  .h-xl { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .h-lg { font-size: clamp(1.65rem, 7vw, 2rem); }
  /* inline max-width:NNch on headings left the block hugging the margin once
     text-align centered the lines — the block itself must center too */
  .page-hero h1, .page-hero .lead, .page-hero p,
  .section-head h2, .section-head p, .section-head .eyebrow,
  .lead, .hero__tagline { margin-inline: auto; }

  /* ---- 3. centered ceremony copy ---- */
  .page-hero .wrap, .section-head, .hero__head { text-align: center; }
  .section-head { flex-direction: column; align-items: center; gap: 14px; }
  .page-hero .hero__actions, .hero__actions, .page-hero .mt-m,
  .hero__cta { justify-content: center !important; }
  .chips { justify-content: center; }
  .form-note, .disclosure-fine, .bigpkg__tagline, .tier__sub,
  .summary__note, .cfg__lede, .svc-list__hint,
  main .wrap > p.muted { text-align: center; margin-inline: auto; }

  /* split feature sections collapse to one column — the copy centers with it */
  .split > div:not(.media-frame) { text-align: center; }
  .split .chips { justify-content: center; }

  /* cards: header ceremony centers, reading lists stay left */
  .tier, .svc { text-align: center; }
  .tier .pkg-list, .bigpkg .pkg-list { text-align: left; }
  .tier__price { justify-content: center; }
  .bigpkg__head { flex-direction: column; text-align: center; gap: 14px; }
  .bigpkg__head > div:first-child { text-align: center; }
  .bigpkg__price { align-items: center; text-align: center; }
  .bigpkg__aside { text-align: center; }

  .cta-band { flex-direction: column; text-align: center; align-items: center; }
  .cta-band > div { max-width: none; }
  .cta-band .btn { width: 100%; }
  .beat-promo { flex-direction: column; text-align: center; }
  .beat-promo .btn { width: 100%; }

  /* footer becomes a centered column stack */
  .footer__grid { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .footer__brand p { margin-inline: auto; }
  .footer__mark { justify-content: center; }
  .footer__bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* ---- 4. reading copy stays start-aligned (deliberate exceptions) ---- */
  .legal p, .legal li, .legal td, .legal th { text-align: left; }
  .legal h2 { text-align: center; }
  .addon-disc, .addon-disc p { text-align: left; }
  form .form-field, form label, .bcheck__field { text-align: left; }
  .ac, .ac * { text-align: initial; }        /* the admin console is a work tool */
  .ac .ac__empty { text-align: center; }
  .beat__meta, .beat__title, .beat__sub { text-align: left; }  /* catalogue rows scan */
  .a11y__panel, .a11y__panel * { text-align: initial; }

  /* a <label class="form-note"> exists (login.html) — the class rule for centered
     notes out-specifies the bare `form label` exemption, so pin it */
  form .form-note { text-align: left; }

  /* Content Factory panes built as inline two-column grids never collapsed on a
     phone — cf-credits was 563px wide at a 375px viewport. Inline style loses only
     to !important. */
  .studio[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ---------- AMPLIFICATION (athlete-representation.html#amplify) ----------
   Reuses the valuator's panel/output shells so the two calculators on the site
   read as one component, and adds the budget-to-views bar. */
.amp { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; margin-top: 26px; align-items: start; }
.amp__panel, .amp__out {
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.amp__out { position: sticky; top: 96px; }
.amp__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.amp__scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: .66rem;
  letter-spacing: .12em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
/* The bar reads left-to-right as budget, and the label rides the end of the fill so
   the number sits where the growth is rather than floating in dead space. */
.amp__bar { position: relative; height: 54px; margin-top: 26px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.35); overflow: hidden; display: flex; align-items: center; }
.amp__bar-fill { height: 100%; min-width: 4px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), var(--teal-bright));
  box-shadow: 0 0 34px -6px var(--teal-glow);
  transition: width .28s var(--ease); }
.amp__bar-cap { position: absolute; left: 16px; font-family: var(--font-display); font-size: 1.15rem;
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.85); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .amp__bar-fill { transition: none; } }
@media (max-width: 900px) {
  .amp { grid-template-columns: 1fr; }
  .amp__out { position: static; }
}

/* Roster monogram — shown only if a card's photo file is missing (img onerror),
   so a not-yet-uploaded portrait degrades to initials instead of a broken icon. */
.card__mono{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:2.6rem;letter-spacing:.04em;color:var(--chrome-2);
  background:linear-gradient(150deg,var(--teal-deep),var(--panel));}