/* ============================================================
   518 Official — ABOUT / SERVICES
   css/pages/services.css?v=5 — page layout only. Loads after
   tokens.css + site.css; never declares :root, never restyles
   a shell selector. Every color routes through tokens — the
   only literals are neutral rgba(10,10,10,…) scrims (allowed
   neutrals, not brand color) and the #000 inside one @supports
   feature probe.

   v2 (real-facts rewrite): the page now carries 518 Events'
   OWN media — its flyers, its event coverage, its lookbook,
   its brand films. Two laws govern the new §06 block:
     · FACE-SAFE CROP LAW — every image in an object-fit:cover
       slot carries the measured object-position from the house
       focal table. Values are set on the .svc-shot--* modifier
       next to each figure so a crop can be audited at a glance.
     · FLYERS ARE NEVER COVER-CROPPED — flyer art renders inside
       the shared .flyer-card frame (site.css) at natural aspect
       on phones, and object-fit:CONTAIN inside a shared 2:3
       archival window from 768px up so the three archive cards
       share one baseline. Cropping a flyer destroys the
       information it exists to carry; contain never crops.

   v5 (CINDY polish sweep, 2026-08-17): phone plate law (§12),
   the dash-on-line-one type-integrity fix on the three flex
   heading families, the 2:3 archive window, role-title
   levelling at four across, and full-width wrapped CTAs at
   360px. Every scrim number in §12 was measured on the
   composited plate, never estimated.
   Amber (--drop) appears in exactly ONE place on this page:
   .svc-store, the live-store block. That is an apparel/commerce
   surface — the sanctioned use. Text on amber is --bg (8.63:1),
   never ivory (1.99:1 — fails).

   Editorial system: full-bleed brand-film open, the thesis
   chain rail, one cobalt marquee band, the proof section
   (archive flyers → coverage → recap film → lookbook + store),
   the lane panel grid, the 5-stage flywheel rail, creator roles
   grid, sponsor open-slot, media close. Bones harvested from
   the retired about.css: chapter index, ghost numerals,
   control-panel cells, the dashed open-slot honesty pattern.

   TOC:
   01 Hero (vslot backdrop + editorial copy)
   02 Section index + media note
   03 Thesis chain (CITY→CULTURE→EVENTS→MEDIA→AUDIENCE)
   04 Stat rail (evidenced numbers)
   05 Cobalt marquee band
   06 The Record (proof blocks: nights · shots · film · line)
   07 Service lanes (panel grid)
   08 Flywheel (5-stage rail)
   09 Creator roles (control panel)
   10 Sponsorship (open slot)
   11 Close CTA
   12 Phone plate law (<=767.98px — band + measured scrim)
   13 Small-phone floor
   ============================================================ */

/* ---------- 01 Hero ---------- */
.svc-hero {
  position: relative;
  overflow: hidden;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-7);
}

/* Scrim: settle the clip into black so ivory copy clears AA at every
   position type can occupy. Neutral rgba(10,10,10,…) only — the mute
   is heaviest under the header band and at the copy foot. */
.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* JUAN 2026-08-17: these values are RIGHT and were re-confirmed, not
       guessed. Measured against the glyph line-boxes (not the block boxes)
       every line in this hero clears AA on this scrim — h1 4.83:1, lead
       5.07:1, eyebrow 6.08:1 — so the plate keeps its picture. The eyebrow
       only failed (4.17:1) while it was --smoke; the fix is the type step
       below, NOT more black. Deepening this scrim was tried and reverted:
       at 390px it flattened the clip to a black rectangle. */
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.86) 0%,
      rgba(10, 10, 10, 0.46) calc(var(--header-h) + 4rem),
      rgba(10, 10, 10, 0.42) 42%,
      rgba(10, 10, 10, 0.72) 68%,
      rgba(10, 10, 10, 0.95) 100%),
    linear-gradient(75deg,
      rgba(10, 10, 10, 0.78) 0%,
      rgba(10, 10, 10, 0.32) 55%,
      rgba(10, 10, 10, 0.12) 100%);
  pointer-events: none;
}

/* Face-safe crop law — hero backdrop is promo-518-b (macro brand film).
   Poster focal measured at 51.8% 18.7%; the clip carries the same value so
   the frame doesn't jump when the video fades in over the poster. */
.svc-hero .vslot-poster,
.svc-hero .vslot video { object-position: 51.8% 18.7%; }

.svc-hero-inner {
  position: relative;
  z-index: var(--z-content);
}

/* PHOTOGRAPHY FLOOR (JUAN, measured 2026-08-17) — same law as index's
   .hero-note. --smoke is a 5.09:1 token on flat --bg, but on this brand
   film the 14px/0.22em eyebrow composited to 4.17:1 against the lit pixels
   under its own glyphs — under AA. --ivory-60 measures 6.08:1 on the same
   frame and costs the picture nothing.
   OVER PHOTOGRAPHY THE TERTIARY FLOOR IS --ivory-60, NEVER --smoke. */
.svc-hero-inner .eyebrow { color: var(--ivory-60); }

/* Archivo Black runs wide — page-tuned ceiling/floor so both poster
   lines hold the 360px floor without wrapping. */
.svc-hero .hero-title {
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  margin-top: var(--sp-4);
}

.svc-hero-line { display: block; }

.svc-hero-line + .svc-hero-line { margin-left: clamp(0rem, 4vw, 4.5rem); }

.hero-lead { margin-top: var(--sp-5); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ---------- 02 Section index + media note ----------
   Harvested chapter-index bones: label-face links, cobalt scaleX
   underline mirroring the shell nav's signature. Sits over the
   scrimmed clip, so resting color steps up to --ivory-80. */
.svc-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-strong);
}

.svc-index a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.svc-index a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  height: 2px;
  background: var(--rizz);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}

.svc-index a:hover,
.svc-index a:focus-visible { color: var(--ivory); }

.svc-index a:hover::after,
.svc-index a:focus-visible::after { transform: scaleX(1); }

.svc-ci-num {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--rizz-text); /* decorative numeral — copy-safe cobalt only */
}

/* Provenance label — states that every frame on the page is the crew's own */
.svc-media-note {
  margin-top: var(--sp-5);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ivory-60);
  max-width: 56ch;
}

/* ---------- 03 Thesis chain ----------
   Five panel nodes, one rail. The <ol> carries the order semantically;
   the arrows are decorative flow marks between nodes. */
.svc-chain {
  --chain-gap: clamp(1.6rem, 2.5vw, 2.5rem);
  display: grid;
  gap: calc(var(--sp-5) + 1.75rem);
}

.svc-chain-node {
  position: relative;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ivory) 5%, transparent);
}

/* cobalt tick — same mark language as the shell eyebrow/stat ticks */
.svc-chain-node::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rizz-line);
}

.svc-chain-num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--rizz-text);
}

.svc-chain-node h3 { font-size: 1.3rem; }

.svc-chain-node p {
  font-size: var(--fs-small);
  color: var(--ivory-80);
  max-width: 42ch;
}

/* Flow arrows — stacked: down-arrow centered in the row gap */
.svc-chain-node:not(:last-child)::after {
  content: "\2193";
  position: absolute;
  left: 50%;
  bottom: -1.85rem;
  transform: translateX(-50%);
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--rizz-text);
}

@media (min-width: 980px) {
  .svc-chain {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-6) var(--chain-gap);
  }

  /* rail mode: right-arrow fills the column gap exactly */
  .svc-chain-node:not(:last-child)::after {
    content: "\2192";
    left: auto;
    right: calc(-1 * var(--chain-gap));
    bottom: auto;
    top: 50%;
    width: var(--chain-gap);
    text-align: center;
    transform: translateY(-50%);
  }
}

/* Loop pull-line — harvested pull-line bones, cobalt spine */
.svc-chain-loop {
  margin-top: var(--sp-7);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--rizz);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ivory);
  text-wrap: balance;
  max-width: 30ch;
}

/* ---------- 04 Stat rail (evidenced numbers) ---------- */
.svc-statrow {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

@media (max-width: 767.98px) {
  .svc-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Where the numbers come from + the store-drift caveat. --smoke is AA at
   15px on --bg (5.09:1); this rail sits on the base ground. */
.svc-statnote {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 68ch;
}

/* ---------- 05 Cobalt marquee band ----------
   The one full-cobalt surface on the page. No-JS floor: a centered,
   wrapping type wall — fully readable. motion.js converts the track
   to a seamless loop and derives its seam diamond from the live
   ::before below (syncSeam), so the separators stay token-true.
   Ivory on --rizz measures 5.73:1 — AA holds. */
.svc-band {
  background: var(--rizz);
  border-block: 1px solid rgba(10, 10, 10, 0.35);
  /* inset vignette seats the cobalt as a lit surface, never masks it */
  box-shadow:
    inset 0 16px 32px -22px rgba(10, 10, 10, 0.55),
    inset 0 -16px 32px -22px rgba(10, 10, 10, 0.55);
  padding-block: var(--sp-6);
  overflow: hidden;
}

.svc-band-viewport { width: 100%; }

.svc-band-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(1.1rem, 2.6vw, 2.4rem);
  row-gap: 0.6rem;
  padding-inline: var(--gutter);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ivory);
  text-align: center;
}

.svc-band-track li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Leading separator diamonds (house marquee pattern): motion.js reads
   this ::before's computed size/color/margin to build the loop seam. */
.svc-band-track li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: clamp(1.1rem, 2.6vw, 2.4rem);
  background: color-mix(in srgb, var(--ivory) 60%, transparent);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- 06 The Record ----------
   Four proof blocks in one section: the flyer archive, coverage
   stills, the recap film, the lookbook + live store. Each block is
   a head + payload pair on a shared vertical rhythm so the section
   reads as one argument instead of four widgets. */
.svc-block + .svc-block {
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

.svc-block-head { margin-bottom: var(--sp-6); }

.svc-block-head h3 {
  display: flex;
  align-items: flex-start;   /* see DASH-ON-LINE-ONE law below */
  gap: 0.7rem;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.svc-block-head h3::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--rizz-line);
  flex: none;
  margin-top: var(--dash-mt);
}

.svc-block-head p {
  margin-top: var(--sp-4);
  color: var(--ivory-80);
  max-width: 68ch;
}

.svc-block-foot {
  margin-top: var(--sp-5);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.svc-block-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- 06a Archive: three nights, two with real flyer artwork --- */
.svc-nights {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.svc-night {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* FLYER LAW: natural aspect, never cropped. The shared .flyer-card frame
   (site.css) supplies the archival ground, border and catch-light; the art
   sits inside it at width:100%, height:auto — contain by construction. */
.svc-night picture { display: block; }

/* site.css styles .flyer-meta / .flyer-tag only INSIDE .flyer-card, and the
   third night has no flyer to frame — so the meta block is restated here at
   .svc-night scope. Without this the no-flyer card's date line renders as
   plain sentence-case body text next to two letterspaced archival tags. */
.svc-night .flyer-meta {
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.svc-night .flyer-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ivory-60);
}

.svc-night .flyer-meta h4 { font-size: 1.05rem; letter-spacing: 0.05em; }

.svc-night .flyer-meta p {
  font-size: var(--fs-small);
  color: var(--ivory-80);
}

/* The honesty line sits one step quieter than the flyer facts it follows.
   Specificity beats the .svc-night .flyer-meta p rule above — no !important.
   --smoke on --flyer-ground reads 4.9:1 at 15px. */
.svc-night .flyer-meta p.svc-night-note { color: var(--smoke); }

/* The night with no flyer on disk gets an honest plate, not borrowed art —
   the dashed open-slot idiom, sized to sit beside the two real flyers. */
.svc-night--noflyer {
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}

.svc-night-plate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 220px;
  padding: var(--sp-5);
  background: var(--flyer-ground);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

.svc-night-plate-mark {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rizz-text);
}

.svc-night-plate-copy {
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 34ch;
}

@media (min-width: 768px) {
  .svc-nights { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ARCHIVAL FRAME (row mode only) — the two flyers on file are 800x1200
     (0.667) and 848x1200 (0.707), so at natural aspect their art blocks
     rendered 556px and 525px tall and the no-flyer plate only 300px: three
     cards, three different date-line baselines (measured meta tops
     817 / 786 / 561). Every night now gets the SAME 2:3 window and the meta
     blocks start on one line (measured: 574 / 574 / 574).
     FLYER LAW HOLDS — object-fit is CONTAIN, never cover: the taller flyer
     letterboxes onto --flyer-ground inside its own frame like a mat. No
     flyer pixel is cropped. Below 768px the cards stack, alignment is moot,
     and each flyer keeps its full natural size. */
  .svc-night picture { aspect-ratio: 2 / 3; }
  .svc-night picture img { height: 100%; object-fit: contain; }
  .svc-night--noflyer .svc-night-plate { aspect-ratio: 2 / 3; min-height: 0; }
}

@media (min-width: 980px) {
  .svc-nights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
}

/* --- 06b Coverage + lookbook stills ---
   Cover slots. Every focal below is the measured value from the house
   face-safe table — never a guess, never 50% 50% unless the frame is
   certified crop-safe (the back-shots). */
.svc-shots,
.svc-look {
  display: grid;
  gap: var(--sp-4);
}

.svc-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  aspect-ratio: 3 / 2;
}

.svc-shot--tall { aspect-ratio: 3 / 4; }

.svc-shot picture { display: block; height: 100%; }

.svc-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

/* fine pointers only — a hover scale must never fire on touch */
@media (hover: hover) and (pointer: fine) {
  .svc-shot:hover img { transform: scale(1.03); }
}

/* Measured focal points (armory Vision) — FACE-SAFE CROP LAW.
   ev06 is the one value in this table that is NOT the raw area-weighted
   centroid. This grid goes SQUARE at >=560px, and a 1:1 window over a 3:2
   frame shows only the middle 66.4% of the width: at the measured 42.1%
   that window opened at x=14.1% and sliced a third person's head in half
   at x=10.8-16.5% (Vision face 3 of 3). 21.7% centres the window on the
   full face cluster (x 10.8-70.2%) instead of on its area centroid, so all
   three faces clear the edge by ~3.5pp. Every other slot holding this frame
   is 3:2, where the horizontal crop is under half a percent and the value
   is a no-op. Registered in data/media.json + tools/validate-data.py. */
.svc-shot--ev01 img { object-position: 41.3% 15.4%; }
.svc-shot--ev03 img { object-position: 39.3% 36.5%; }
.svc-shot--ev04 img { object-position: 52.1% 24.1%; }
.svc-shot--ev06 img { object-position: 21.7% 11.5%; }
.svc-shot--gar01 img { object-position: 45.1% 19.9%; }
.svc-shot--cap03 img { object-position: 40.4% 16.5%; }
.svc-shot--gar04 img { object-position: 50% 50%; } /* back-shot — crop-safe */

@media (min-width: 560px) {
  .svc-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-look  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  /* Contact-sheet row: four across, but square — a 3:2 tile at quarter width
     reads as a postage stamp next to the lookbook's tall frames. The square
     crop costs ~33% of the frame's width, which is exactly what the measured
     focal points are for. */
  .svc-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
  .svc-shots .svc-shot { aspect-ratio: 1 / 1; }
  .svc-look  { gap: var(--sp-5); }
}

/* --- 06c Recap film ---
   CONTENT video: it has real audio, so it ships with controls, never
   autoplays and is never used as a backdrop. It is deliberately NOT a
   [data-vslot] — site.js's decorative-video prober must not touch it,
   and reduced-motion must not remove it (removing a film the visitor
   chose to play would be the wrong kind of respect). */
.svc-film {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.svc-film-video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}

.svc-film-note p {
  font-size: var(--fs-small);
  color: var(--ivory-80);
  max-width: 46ch;
}

/* Specificity beats the .svc-film-note p rule above — no !important.
   --rizz-text is the only cobalt allowed to be copy (7.24:1). */
.svc-film-note p.svc-film-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--rizz-text);
  margin-bottom: var(--sp-3);
}

@media (min-width: 980px) {
  /* centered, not top-aligned: the note is a third the height of the film,
     and hanging it off the top leaves a hole beside the player */
  .svc-film {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-7);
    align-items: center;
  }
}

/* --- 06d Live store (the ONE commerce surface on this page) ---
   Amber law: --drop/--drop-text are commerce-only, and text on amber is
   --bg (8.63:1) — never ivory. Scoped to this block so no warm signal
   leaks into page chrome. */
.svc-store {
  margin-top: var(--sp-6);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--drop);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ivory) 5%, transparent);
}

.svc-store-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--drop-text); /* 9.52:1 on dark — amber COPY token */
}

.svc-store-title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}

.svc-store p:not(.svc-store-tag):not(.svc-store-note) {
  margin-top: var(--sp-4);
  color: var(--ivory-80);
  max-width: 62ch;
}

.svc-store-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.svc-store-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--smoke); /* 4.81:1 on --panel at 15px */
  max-width: 52ch;
}

/* Amber merch CTA — the sanctioned .btn-drop (brand law: a commerce
   surface may introduce it in page CSS, values via tokens). Ivory on
   amber measures 1.99:1 and is forbidden; the label is --bg. */
.btn-drop {
  background: var(--drop);
  color: var(--bg);
}

.btn-drop:hover {
  background: color-mix(in srgb, var(--drop) 86%, var(--ivory));
  color: var(--bg);
  transform: translateY(-1px);
}

.btn-drop:active { background: color-mix(in srgb, var(--drop) 86%, var(--bg)); }

/* ---------- 07 Service lanes ---------- */
.svc-lanes {
  display: grid;
  gap: var(--sp-5);
}

.svc-lane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur-2) var(--ease);
}

.svc-lane:hover { border-color: var(--line-rizz); }

.svc-lane-idx {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--rizz-text);
}

.svc-lane h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  display: flex;
  align-items: flex-start;   /* see DASH-ON-LINE-ONE law below */
  gap: 0.7rem;
}

/* cobalt dash extends + heats on hover — the accent breathes */
.svc-lane h3::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--rizz-line);
  flex: none;
  margin-top: var(--dash-mt);
  transform: scaleX(0.529); /* 18/34 base — composited, animates to 1 */
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.svc-lane:hover h3::before {
  transform: scaleX(1);
  background: var(--rizz-hot); /* hover event — the sanctioned use */
}

.svc-lane p {
  color: var(--ivory-80);
  max-width: 52ch;
}

/* THOR §15 boundary line — quiet but unmissable */
.svc-lane-note {
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 48ch;
}

.svc-covers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--sp-4);
}

.svc-covers li {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-60);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  white-space: nowrap;
}

/* The eighth cell: an honest open door, not a fake lane —
   dashed slot idiom harvested from the retired partner-slot. */
.svc-lane--cta {
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  align-items: flex-start;
  justify-content: center;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.svc-lane--cta:hover,
.svc-lane--cta:focus-within {
  border-color: var(--line-rizz);
  background: color-mix(in srgb, var(--rizz) 5%, transparent);
}

.svc-lane--cta p { font-size: var(--fs-small); max-width: 40ch; }

.svc-lane--cta .btn { margin-top: var(--sp-2); }

@media (min-width: 768px) {
  .svc-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 08 Flywheel ----------
   Five stages on a lit rail. Ghost numerals harvested from the act
   nodes — outlined where supported, token-mixed ivory everywhere. */
.svc-flow {
  display: grid;
  gap: var(--sp-7);
}

.svc-step {
  min-width: 0;
  border-top: 2px solid var(--line-strong);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.svc-step-num {
  display: block;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.75rem);
  line-height: 0.95;
  color: color-mix(in srgb, var(--ivory) 16%, transparent);
  user-select: none;
}

@supports (-webkit-text-stroke: 1px #000) {
  .svc-step-num {
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ivory) 32%, transparent);
  }
}

.svc-step h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

.svc-step p {
  font-size: var(--fs-small);
  color: var(--ivory-80);
  max-width: 34ch;
}

.svc-step-loop-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--rizz-text);
}

/* the loop stage carries the cobalt rail — the point of the diagram */
.svc-step--loop { border-top-color: var(--rizz-line); }

@media (min-width: 768px) {
  .svc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
}

@media (min-width: 980px) {
  .svc-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
}

/* ---------- 09 Creator roles ----------
   Harvested control-panel bones: 1px-line grid, seated with shadow,
   cells answer the cursor. Cells run --bg against the band's --bg-2
   ground so the panel reads inset, not painted. */
.svc-roles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.svc-role {
  background: var(--bg);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background var(--dur-2) var(--ease);
}

.svc-role:hover { background: var(--panel); }

.svc-role h3 {
  font-size: 1.3rem;
  display: flex;
  align-items: flex-start;   /* see DASH-ON-LINE-ONE law below */
  gap: 0.7rem;
}

.svc-role h3::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--rizz-line);
  flex: none;
  margin-top: var(--dash-mt);
  transform: scaleX(0.529);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.svc-role:hover h3::before {
  transform: scaleX(1);
  background: var(--rizz-hot);
}

.svc-role p {
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 34ch;
}

@media (min-width: 768px) {
  .svc-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .svc-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* At four across, "Artists & Performers" is the only role title that wraps.
     Levelling every title to two lines' worth keeps the four body paragraphs
     on one baseline (measured: p tops 9534/9534/9534/9555 -> all 836). */
  .svc-role h3 { min-height: 2.04em; }  /* 2 x --lh-tight */
}

/* ---------- DASH-ON-LINE-ONE (type-integrity law) ----------
   The three heading families here are flex rows: [cobalt dash] + title.
   With align-items:center a title that wraps to two lines pushed the 2px
   dash into the gap BETWEEN the lines ("The Line, Shot In-House" at 390px,
   "Event Planning & Production" at 390px, "Artists & Performers" at 1440px).
   The dash is a leading mark: it hangs off the FIRST line, always.
   align-items:flex-start + this offset reproduces the exact position the
   centered single-line case had (half a line-box, minus half the 2px rule),
   so nothing moves on the headings that never wrapped. */
.svc-block-head h3,
.svc-lane h3,
.svc-role h3 { --dash-mt: calc(0.51em - 1px); }   /* --lh-tight is 1.02 */

@supports (margin-top: 1lh) {
  .svc-block-head h3,
  .svc-lane h3,
  .svc-role h3 { --dash-mt: calc(0.5lh - 1px); }  /* exact, clamp-proof */
}

.svc-roles-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
}

.svc-roles-note {
  font-size: var(--fs-small);
  color: var(--smoke); /* 4.96:1 on --bg-2 — AA at 15px */
  max-width: 44ch;
}

/* ---------- 10 Sponsorship ---------- */
.svc-sponsor-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: stretch;
}

.svc-sponsor-copy > * + * { margin-top: var(--sp-5); }

.svc-placements {
  display: grid;
  gap: var(--sp-4);
}

.svc-placements li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ivory-80);
  max-width: 56ch;
}

.svc-placements li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--rizz);
  transform: rotate(45deg);
}

/* Honest empty state — the dashed open-slot pattern, harvested.
   A slot, never a fake logo wall. */
.svc-sponsor-slot {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.svc-sponsor-slot:hover,
.svc-sponsor-slot:focus-within {
  border-color: var(--line-rizz);
  background: color-mix(in srgb, var(--rizz) 5%, transparent);
}

.svc-slot-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-rizz);
  border-radius: var(--r-sm);
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--rizz-text);
}

.svc-slot-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory);
}

.svc-slot-copy {
  font-size: var(--fs-small);
  color: var(--ivory-60);
  max-width: 34ch;
}

.svc-sponsor-slot .btn { margin-top: auto; }

@media (min-width: 980px) {
  .svc-sponsor-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-9);
  }
}

/* ---------- 11 Close CTA ----------
   Harvested close bones: full-bleed vslot, balanced scrim (poster
   stays present, ivory clears AA), one cobalt haze — the page's
   single haze wash. */
.svc-close {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 15vw, 11rem);
  border-top: 1px solid var(--line);
}

.svc-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 60% at 50% 100%, var(--rizz-haze), transparent 72%),
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.86),
      /* mid-stop deepened 0.55 -> 0.70: the close poster is now the crew's own
         garage film — a red roll-door and a light grey sweatsuit sit directly
         behind centered ivory copy, far brighter than the clip this replaced. */
      rgba(10, 10, 10, 0.70) 45%,
      rgba(10, 10, 10, 0.90));
  pointer-events: none;
}

/* Face-safe crop law — close backdrop is promo-518-a (garage brand film,
   people in frame). Poster focal re-measured to 67.4% 36% after the frame
   was reframed (data/media.json is the register), mirrored onto the clip. */
.svc-close .vslot-poster,
.svc-close .vslot video { object-position: 67.4% 36%; }

.svc-close-inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}

/* over the lightened poster the resting eyebrow steps up for AA */
.svc-close .eyebrow { color: var(--ivory-80); }

.svc-close-title {
  margin-top: var(--sp-4);
  font-size: clamp(2.1rem, 5.5vw, 4.2rem);
}

.svc-close-lead {
  margin-top: var(--sp-5);
  margin-inline: auto;
  font-size: var(--fs-lead);
  color: var(--ivory);
  max-width: 36ch;
}

.svc-close-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ---------- 12 Phone plate law (<=767.98px) ----------
   CINDY 2026-08-17, measured — not guessed. Both full-bleed plates on this
   page are 16:9 brand films. At 1440 the hero box is 1440x830 (1.73) and the
   film lands almost 1:1. At 390 the hero box is 390x902 (0.43): object-fit
   cover then blows the film up 4.11x and shows only 467px of its 1920px
   width — a face at 4x magnification, no composition left. The desktop
   scrim (tuned on the desktop frame) then had to bury that crop, and it did:
   the film measured 78.1% muted at the median / 69.5% at p90, i.e. a black
   rectangle. House target for a photographic ground is 40-60%.

   Two moves, phone only. Desktop keeps Juan's confirmed treatment untouched.

   (a) THE PLATE BECOMES A BAND. Stop asking a 16:9 film to fill a 0.43 box:
       the hero backdrop occupies the top 52% and the scrim closes to solid
       --bg exactly where it ends, so the seam is invisible and the section
       index / provenance note sit on clean ground (17.2:1, from 11.08:1 and
       14.96:1). Crop drops 4.11x -> 2.14x; 47% of the source is visible
       instead of 24%.
   (b) THE SCRIM STOPS BEING A BLANKET. The 75deg diagonal is written for a
       wide box; at 390 its gradient line is only 610px, so its dark end
       covers the whole width and just flattens. Dropped here. The vertical
       is reshaped into a window (open between the header and the eyebrow)
       plus type guards over each line.

   Measured on the composited plate (canvas replication of poster + scrim,
   worst pixel under the glyph box, sRGB compositing for the alpha tokens):

     line                     before        after
     hero eyebrow  ivory-60   2.74:1 FAIL   ivory-80 4.75:1 PASS
     hero title    ivory      4.56:1        6.19:1
     hero lead     ivory      5.28:1        9.78:1
     hero index    ivory-80  11.08:1       17.20:1
     hero note     ivory-60  14.96:1       17.20:1
     band mute (median/p90)   78.1/69.5%    71.8/68.0%

   The hero eyebrow stepping to --ivory-80 is the PHOTOGRAPHY FLOOR rule at
   the next rung: the same reasoning that took it off --smoke takes it off
   --ivory-60 once the film is actually allowed to show through.

   The close plate gets the same reshape (it is 390x486 here and measured
   73.0/77.2% muted — invisible). After: 64.3/70.7%, with title 7.31:1,
   lead 7.93:1, eyebrow 5.57:1 — every line still far above AA. */
@media (max-width: 767.98px) {
  .svc-hero .vslot--fill {
    bottom: auto;
    height: 52%;
  }

  .svc-hero::before {
    background: linear-gradient(to bottom,
      rgba(10, 10, 10, 0.80) 0%,
      rgba(10, 10, 10, 0.56) 7%,
      rgba(10, 10, 10, 0.42) 11.5%,   /* window: below the header, above the eyebrow */
      rgba(10, 10, 10, 0.62) 15%,     /* eyebrow guard */
      rgba(10, 10, 10, 0.64) 21%,     /* title guard */
      rgba(10, 10, 10, 0.76) 34%,     /* lead guard */
      rgba(10, 10, 10, 0.92) 46%,
      rgba(10, 10, 10, 1) 52%,        /* meets the band edge — seamless into --bg */
      rgba(10, 10, 10, 1) 100%);
  }

  .svc-hero-inner .eyebrow { color: var(--ivory-80); }

  .svc-close::before {
    background:
      radial-gradient(70% 60% at 50% 100%, var(--rizz-haze), transparent 72%),
      linear-gradient(to bottom,
        rgba(10, 10, 10, 0.60) 0%,
        rgba(10, 10, 10, 0.32) 9%,    /* window above the eyebrow */
        rgba(10, 10, 10, 0.70) 16%,
        rgba(10, 10, 10, 0.70) 50%,
        rgba(10, 10, 10, 0.74) 80%,
        rgba(10, 10, 10, 0.88) 100%); /* stays dark at the seam with the footer */
  }
}

/* ---------- 13 Small-phone floor (360px must hold) ---------- */
@media (max-width: 379.98px) {
  .svc-hero .hero-title { font-size: 1.9rem; }

  .svc-covers li { white-space: normal; }

  .svc-band-track { font-size: 1rem; }

  /* the archive plate and the coverage tiles both need to stop reserving
     height they can't fill on a 360px screen */
  .svc-night-plate { min-height: 160px; padding: var(--sp-4); }

  /* Every CTA pair on this page wraps at 360. Left ragged they staircase:
     measured 140px over 187px in the hero, 160px over 149px in the close.
     Same law the store block already ran — a wrapped pair goes full width. */
  .hero-actions .btn,
  .svc-close-cta .btn,
  .svc-store-cta .btn { width: 100%; }
}