/* ═══════════════════════════════════════════════════════════════════════
   PROD-WHITE — services/media-production.html, everything BELOW the hero.
   T-1167, 2026-08-14.

   Ethan, verbatim: "i like this page dark but i need the photo of me with
   grace setup properly so we are both visible and the rest of the page
   converted white and layout cleaner"

   THREE THINGS THIS FILE EXISTS TO DO.

   1 · THE GRACE PHOTOGRAPH IS NEVER CROPPED AGAIN.
       assets/gallery/shoots/oncamera-duo-couch-setup.jpg is 1400x788.
       Opened and measured, not reasoned about:
         Ethan  — head x 0.25-0.37, y 0.23-0.46, face centre  x .31 y .37
         Grace  — head x 0.60-0.74 (hair to .59-.74), y 0.29-0.47,
                  face centre x .65 y .38
       Both heads therefore live inside x 0.25-0.74, y 0.23-0.47 — the
       MIDDLE HALF of the frame.

       The old band put an opaque copy panel over x 0.59 -> 1.0 of the
       figure and the photograph filled the figure edge to edge, so Grace
       sat underneath the panel. No value of --carve-pos could fix that:
       the figure was WIDER in aspect than the source, so `cover` had no
       horizontal overflow to pan into and object-position-x was a no-op.
       That is why two rounds of tuning the number changed nothing.

       The fix is not a better number, it is a box that matches the picture.
       .pw-shot--duo sets `aspect-ratio: 1400 / 788` — the source's own
       ratio — so `cover` crops NOTHING on either axis at any viewport
       width, and nothing sits on top of it. Both faces are complete at
       1440, 1024 and 390 by construction, not by luck.

   2 · DARK HERO, LIGHT PAGE.
       The .cf-hero above is untouched. Everything below reads on bone with
       ink type. Two ink bands survive as PUNCTUATION between light blocks
       (the on-set band and the portfolio rail) and both opt out of
       site.css's white-ground rule with .has-photo rather than by picking
       a specificity fight with it.

       THE TWO TRAPS, both avoided by construction:
       a) --ink is deliberately inverted to bone inside light scopes, so
          `color: var(--ink)` can resolve to bone and vanish. Nothing in
          this file reads --ink for type. Type on light reads
          var(--ink-true, #0a0a0a).
       b) site.css's white-ground rule is specificity 0,3,0 and it cascades
          ink type into any main > section that is not marked. It also
          force-lights .pkit/.pexp/.pstage to bone type via !important.
          This page no longer uses those three class names at all — the
          namespace is pw-* — so there is nothing to fight.

   3 · ONE RAIL.
       --rail-max 1240px, --rail-pad clamp(1.15rem, 4vw, 2.5rem). Every
       heading and every paragraph of section copy sits on .pw-rail, so
       they all start at the same x. Ethan's complaint sitewide was
       "nothing is aligned nothing makes sense". Card grids keep their own
       per-column edges; prose does not.
   ═══════════════════════════════════════════════════════════════════════ */

/* --rail-max / --rail-pad are the SHARED tokens from css/tnaado-rail.css,
   which is linked on this page. The fallbacks below are its exact values, so
   the page is still on one rail if that file ever fails to load — but the
   shared file is the source of truth and must not be forked here. */
.pw {
  --pw-ink: var(--ink-true, #0a0a0a);
  --pw-bone: #faf8f3;
  --pw-mute: rgba(10, 10, 10, .64);
  --pw-rule: rgba(10, 10, 10, .14);
  --pw-rule-strong: rgba(10, 10, 10, .22);
  --pw-red: #a4132c;          /* red calibrated for a bone ground */
  --pw-red-on-ink: #ef5c6e;   /* red calibrated for an ink ground */
}

/* ── THE RAIL ─────────────────────────────────────────────────────────
   One container, one measurement. Nothing that carries prose may set its
   own inline padding — that is how a page grows four left edges. */
.pw-rail {
  width: 100%;
  max-width: var(--rail-max, 1240px);
  margin-inline: auto;
  padding-inline: var(--rail-pad, clamp(1.15rem, 4vw, 2.5rem));
  box-sizing: border-box;
}

/* ── SECTION RHYTHM — bands must not all weigh the same ──────────────── */
.pw-sec        { padding-block: clamp(2.8rem, 5vw, 4.4rem); }
.pw-sec--tight { padding-block: clamp(1.6rem, 2.6vw, 2.5rem); }
.pw-sec--tall  { padding-block: clamp(3.8rem, 6.6vw, 5.8rem); }

/* ── GROUNDS ──────────────────────────────────────────────────────────
   .pw-light is redundant with site.css's white-ground rule and is kept
   anyway so the page is correct if that rule is ever scoped differently. */
.pw-light {
  background: var(--pw-bone);
  color: var(--pw-ink);
}
.pw-light :where(h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote) {
  color: var(--pw-ink);
}

/* An ink band between two light ones. .has-photo on the <section> is what
   keeps site.css's 0,3,0 white-ground rule off it; this paints the ground. */
.pw-dark {
  background: #0a0a0a;
  color: var(--on-black, #f5f1e8);
}
.pw-dark :where(h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote) {
  color: var(--on-black, #f5f1e8);
}
.pw-dark .pw-eyebrow { color: var(--pw-red-on-ink); }
.pw-dark .pw-h2 em, .pw-dark .pw-h3 em { color: var(--pw-red-on-ink); }
.pw-dark .pw-lede, .pw-dark .pw-p { color: rgba(245, 241, 232, .82); }
.pw-dark figcaption { color: rgba(245, 241, 232, .70) !important; }

/* ── TYPE ─────────────────────────────────────────────────────────────── */
.pw-eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pw-red);
  margin: 0 0 .85rem;
}
.pw-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.5vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .9rem;
  max-width: 20ch;
}
.pw-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.32rem, 2.1vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  max-width: 26ch;
}
.pw-h2 em, .pw-h3 em { font-style: italic; color: var(--pw-red); }

.pw-p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.95rem, 1.05vw, 1.03rem);
  line-height: 1.62;
  color: var(--pw-mute);
  margin: 0 0 .9rem;
  max-width: 66ch;
}
.pw-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.55;
  color: var(--pw-ink);
  max-width: 60ch;
}
.pw-p:last-child, .pw-lede:last-child { margin-bottom: 0; }

.pw-go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pw-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pw-rule-strong);
  padding-bottom: .25rem;
  transition: color .18s var(--ease-out-expo), border-color .18s var(--ease-out-expo);
}
.pw-go::after { content: "\2192"; }
.pw-go:hover, .pw-go:focus-visible { color: var(--pw-red); border-color: var(--pw-red); }
.pw-dark .pw-go { color: var(--on-black, #f5f1e8); border-color: rgba(245,241,232,.28); }
.pw-dark .pw-go:hover, .pw-dark .pw-go:focus-visible { color: var(--pw-red-on-ink); border-color: var(--pw-red-on-ink); }

/* A head block is prose. It never gets its own padding. */
.pw-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.pw-head--second { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.pw-carfoot { margin: 1.4rem 0 0; }

/* ── WHY EVERY RULE BELOW THAT USES aspect-ratio ALSO SETS height ──────
   MEASURED BUG, not a style preference. Every <img> on this page carries
   width/height attributes — it must, or the page lays out and then jumps.
   Those attributes are PRESENTATIONAL HINTS mapped to the CSS `width` and
   `height` properties. A hint loses to any author declaration of the same
   property, but it is not beaten by a property you never declare. Setting
   `width: 100%` plus `aspect-ratio` and leaving height alone therefore
   gives you width from this sheet, height STILL the attribute's pixel
   value, and the aspect-ratio silently ignored.

   Measured on this page before the fix, at 1440:
     bts-founder-on-set-upright   440 x 2000   (wanted 440 x 550)
     bts-team-product-set         374 x 2667   (wanted 374 x 280)
     each worked-example frame    278 x ~1100  (wanted 278 x 348)
   The document ran 14,754px instead of ~6,000 and the ink band rendered
   as a black hole with a caption at the bottom of it. `height: auto` is
   one declaration and it hands the height back to aspect-ratio. Do not
   remove it from any rule below. ── */

/* ── CONTAINED FIGURES — nothing runs edge to edge ────────────────────── */
.pw-fig { margin: 0; }
.pw-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #14120f;
}
.pw-cap {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  line-height: 1.5;
  color: var(--pw-mute);
  margin-top: .6rem;
}

/* THE GRACE FRAME. aspect-ratio IS the source ratio, so `cover` crops
   nothing on either axis at any width. Do not "improve" this number and do
   not put anything on top of it. */
.pw-shot--duo {
  aspect-ratio: 1400 / 788;
  max-width: 940px;
  /* LEFT, not centred. A centred photograph over left-aligned copy is a
     second edge on a page whose whole complaint was "nothing is aligned",
     and its own caption sits on the rail directly underneath it. */
  margin-inline: 0;
  border: 1px solid var(--pw-rule);
  border-radius: 3px;
  overflow: hidden;
}
.pw-shot--duo img { object-position: 50% 50%; }

/* THE FRAME ETHAN SENT ON 2026-08-14, assets/hq/bts-ethan-grace-interview-
   setup.jpg, 2000x1500. The two seated subjects sit at x .215 and x .78 —
   near the edges — so ANY crop that eats more than ~15% off either side
   starts cutting someone. aspect-ratio 4/3 IS the file's own ratio, so
   nothing is cropped on either axis at any width. Same rule as the frame
   above: match the box to the picture instead of tuning a crop. */
.pw-shot--setup {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--pw-rule);
  border-radius: 3px;
  overflow: hidden;
}
.pw-shot--setup img { object-position: 50% 50%; }

/* ── A ROW OF CONTAINED FRAMES ────────────────────────────────────────── */
.pw-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.pw-trio figure { margin: 0; }
.pw-trio img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--pw-rule);
  background: #14120f;
}
/* Per-frame crops, set against the actual pixels of each file. */
.pw-trio .fr-board img { object-position: 50% 28%; }  /* reporter x .53-.65 */
.pw-trio .fr-set   img { object-position: 50% 6%;  }  /* 3:4 source, rig high */
.pw-trio .fr-bay   img { object-position: 62% 42%; }  /* Ronin arm + display */

/* ── 1 · THE INTERVIEW ────────────────────────────────────────────────── */
/* Photograph above, then a text row. The text row's two columns are both
   inside the rail and the LEFT one starts exactly on the rail edge. */
.pw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
}
@media (min-width: 900px) {
  .pw-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

/* The run-in facts under the interview copy. dl, not p, because that is
   what a term and its value are — and it keeps the prose rail clean. */
.pw-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 1px;
  margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0;
  background: var(--pw-rule);
  border-block: 1px solid var(--pw-rule);
}
.pw-facts > div {
  background: var(--pw-bone);
  padding: 1.05rem 1.15rem 1.15rem;
}
.pw-facts dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--pw-red);
  margin-bottom: .4rem;
}
.pw-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.25;
}
.pw-facts dd em { font-style: italic; color: var(--pw-red); }

/* ── 2 · WHAT WE PRODUCE — a compact index, not a slab ────────────────── */
.pw-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pw-rule); }
.pw-index li { border-bottom: 1px solid var(--pw-rule); }
.pw-index a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: .82rem 0;
  text-decoration: none;
  color: inherit;
  transition: background .18s var(--ease-out-expo), padding-inline .18s var(--ease-out-expo);
}
.pw-index a:hover, .pw-index a:focus-visible { background: rgba(10,10,10,.035); }
.pw-index .n {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--pw-red);
  letter-spacing: .08em;
}
.pw-index .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.08rem, 1.7vw, 1.42rem);
  line-height: 1.2;
}
.pw-index .note {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pw-mute);
}

/* ── 3 · THE KIT — Ethan's UnWrinkled bubbles ─────────────────────────────
   His brief: bubbles like the UnWrinkled site, WITH BORDERS, NOT MERGED
   TOGETHER — soft radii alternating with sharp clip-paths, one block for
   mics/audio, one for lighting, one for camera and mounts.

   A clip-path cuts a border off, so a sharp bubble cannot simply carry
   `border`. Each bubble is therefore two layers: an outer element clipped
   to the shape and filled with the rule colour, and an inner element with
   the SAME shape inset by 1.5px. What you see between them is the border,
   and it follows the cut exactly.

   The copy always sits in the LEFT column, on the rail. The shape
   alternates; the side does not — alternating the side would give the
   page two prose edges, which is the thing being fixed. */
.pw-kit { display: grid; gap: 0; }
.pw-bubble {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.3rem, 2.6vw, 2.2rem);
  align-items: center;
  padding-block: clamp(1.8rem, 3.2vw, 2.6rem);
  border-top: 1px solid var(--pw-rule);
}
.pw-bubble:last-child { border-bottom: 1px solid var(--pw-rule); }
@media (min-width: 860px) {
  .pw-bubble { grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); }
}

.pw-bubble__n {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--pw-red);
  margin-bottom: .5rem;
}
.pw-bubble__body { min-width: 0; }
.pw-bubble__scale {
  margin: 1rem 0 0;
  display: grid;
  gap: .45rem;
  max-width: 60ch;
}
.pw-bubble__scale > div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: .8rem;
  align-items: baseline;
}
.pw-bubble__scale dt {
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pw-red);
}
.pw-bubble__scale dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--pw-mute);
}

/* THE BUBBLE ITSELF — two layers so a clipped edge still has a border. */
/* The edge is 2px at .48 alpha, not a hairline: "with borders" is the part
   of the brief that keeps being lost, and at 1.5px/.32 on bone it read as
   no border at all in the 390 screenshot. */
.pw-bub {
  --bub-edge: rgba(10, 10, 10, .48);
  display: block;
  margin: 0;
  background: var(--bub-edge);
  padding: 2px;
  aspect-ratio: 4 / 3;
}
.pw-bub > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #14120f;
}

/* SOFT — Ethan's own radii, from unwrinkled-react/app/globals.css. */
.pw-bub--blob      { border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%; }
.pw-bub--blob > img{ border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%; }
.pw-bub--arch      { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; }
.pw-bub--arch > img{ border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; }

/* SHARP — the crisscross. Outer and inner carry the same polygon; the
   1.5px of padding between them is the visible edge. */
.pw-bub--cut       { clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%); }
.pw-bub--cut > img { clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%); }

/* Per-frame crops, set against the actual pixels of each file.
   The rig frame is 2000x1500 — exactly the bubble's 4:3 — so it is not
   cropped at all; the operator, the vest, the Sony body and Grace at the
   desk are all inside it. */
.pw-bub--rig   > img { object-position: 50% 50%; }
.pw-bub--audio > img { object-position: 52% 24%; }  /* the open case fills it */
.pw-bub--light > img { object-position: 62% 42%; }  /* octabox + LED panel    */

/* ── 4 · ON SET — the ink punctuation band ────────────────────────────── */
.pw-onset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@media (min-width: 800px) {
  .pw-onset { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; }
}
.pw-onset figure { margin: 0; }
.pw-onset img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid rgba(245, 241, 232, .18);
  background: #14120f;
}
/* The founder frame is PORTRAIT (1333x2000) and was stored rotated 90 deg
   with no EXIF orientation tag, so a browser drew him lying down. The
   upright derivative is what is referenced. His face sits x .42-.68,
   y .33-.52, which survives a 4:5 box anchored high. */
.pw-onset__tall img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.pw-onset__wide img { aspect-ratio: 3 / 2; object-position: 50% 46%; }

/* ── 5 · THE LOG ──────────────────────────────────────────────────────── */
.pw-log { margin: 0; border-top: 1px solid var(--pw-rule); }
.pw-log > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--pw-rule);
}
@media (min-width: 760px) {
  .pw-log > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 9.5rem; align-items: baseline; }
}
.pw-log dt {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.25;
}
.pw-log dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--pw-mute);
}
.pw-log .fmt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pw-red);
}
@media (min-width: 760px) { .pw-log .fmt { text-align: right; } }

/* ── 6 · WORKED EXAMPLE — four contained frames ───────────────────────── */
.pw-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin-top: clamp(1.5rem, 2.8vw, 2.2rem);
}
@media (min-width: 900px) { .pw-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pw-quad figure { margin: 0; }
.pw-quad img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--pw-rule);
  background: #14120f;
}
.pw-quad figcaption {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--pw-mute);
  margin-top: .45rem;
}

/* ── 7 · PORTFOLIO RAIL — the second ink punctuation band ─────────────── */
.pw-car__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.pw-car__ctl { display: flex; align-items: center; gap: .5rem; }
.pw-car__count {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(245, 241, 232, .7);
  margin-right: .35rem;
}
.pw-car__btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(245, 241, 232, .26);
  border-radius: 50%;
  color: var(--on-black, #f5f1e8);
  cursor: pointer;
  transition: border-color .18s var(--ease-out-expo), color .18s var(--ease-out-expo);
}
.pw-car__btn svg { width: 17px; height: 17px; }
.pw-car__btn:hover:not(:disabled) { border-color: var(--pw-red-on-ink); color: var(--pw-red-on-ink); }
.pw-car__btn:disabled { opacity: .32; cursor: default; }

.pcar__track {
  list-style: none;
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  margin: clamp(1.3rem, 2.6vw, 2rem) 0 0;
  padding: 0 0 .6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pcar__track::-webkit-scrollbar { display: none; }
.pcar__slide {
  flex: 0 0 clamp(230px, 30%, 360px);
  scroll-snap-align: start;
}
.pcar__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #14120f;
  border: 1px solid rgba(245, 241, 232, .16);
}
.pcar__img--whole { object-fit: contain !important; }
.pcar__meta { margin-top: .5rem; }
.pcar__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .86rem;
  margin: 0;
}
.pcar__tag {
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .62);
  margin: .18rem 0 0;
}
.pw-car__empty {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(245, 241, 232, .62);
  margin-top: 1.4rem;
}

/* ── 8 · CLOSING CTA ──────────────────────────────────────────────────────
   site.css centres .sv-close__inner in a 640px column. This page's run is
   railed and left-aligned, so a centred column here reads as a different
   page. Unpinned to the same rail, same edge. */
/* The section's own inline padding is zeroed and the rail put on the inner,
   or the two stack: measured at 1024 the CTA copy started at 80px against a
   40px rail, and at 390 at 34px against 18px. Vertical padding is left
   alone — that is rhythm, not alignment. */
.sv-close--prod { padding-inline: 0; }
.sv-close--prod .sv-close__inner {
  max-width: var(--rail-max, 1240px);
  margin-inline: auto;
  padding-inline: var(--rail-pad, clamp(1.15rem, 4vw, 2.5rem));
  box-sizing: border-box;
  text-align: left;
}
.sv-close--prod .eyebrow { justify-content: flex-start; }
.sv-close--prod .sv-lede { margin-inline: 0; max-width: 62ch; }

.pw-intake {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: clamp(2rem, 3.6vw, 2.8rem) 0 0;
  background: rgba(245, 241, 232, .16);
  border-block: 1px solid rgba(245, 241, 232, .16);
}
.pw-intake > div { background: #0a0a0a; padding: 1.05rem 1.1rem 1.15rem; }
.pw-intake dt {
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pw-red-on-ink);
  margin-bottom: .4rem;
}
.pw-intake dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .87rem;
  line-height: 1.5;
  color: rgba(245, 241, 232, .82);
}

/* ── ONE COLOUR FIX INSIDE THE HERO, AND ONLY A COLOUR ─────────────────
   The hero's geometry, photograph, type and dark ground are untouched —
   Ethan said he likes it dark. But the contrast sweep found its eyebrow at
   2.60:1: site.css's white-ground eyebrow rule is
   `main > section:not(.has-video):not(.has-photo):not(.page-hero) .eyebrow`,
   which excludes .cf-hero from the BACKGROUND rule but not from the EYEBROW
   one, so "Media · Production" was painted #a4132c — the red calibrated for
   a bone ground — on ink. Put back on the ink-calibrated red, which
   measures 6.07:1 there. Nothing else about the hero changes.

   The two <em> fragments the same sweep reports at 3.40:1 are NOT findings:
   they are --red on ink at 48px+ display size, and site.css's own token
   note documents that --red is reserved for exactly that and clears the
   3:1 large-text threshold.

   SPECIFICITY, COUNTED TWICE BECAUSE THE FIRST COUNT WAS WRONG. site.css's
   eyebrow rule is
   `main > section:not(.has-video):not(.has-photo):not(.page-hero)
    :where(.eyebrow,[class*="eyebrow"])`
   — that is `main` + `section` (two elements) plus three classes inside the
   :not()s, so 0,3,2, not 0,3,0. `:where()` contributes nothing. Both
   `.cf-hero .cf-eyebrow` (0,2,0) and `.pw .cf-hero .cf-eyebrow` (0,3,0)
   lost to it, silently, and the measured colour did not move either time.
   Four classes clears it without !important. ── */
.pw .cf-hero .cf-copy .cf-eyebrow { color: var(--red-text, #ef5c6e); }

/* THE HERO'S COPY COLUMN JOINS THE RAIL. This is the only other thing
   touched above the fold and it moves nothing but the left edge: the hero
   keeps its ink ground, its photograph, its type and its size. It was on a
   1180px column of its own, so at 1440 its eyebrow, h1 and lede started at
   170 while every heading below them started at 140 — a 30px step at the
   very top of the page, which is precisely the "nothing is aligned" Ethan
   is describing. prod-hero-conform.css sets `.cf-hero .inner` at 0,2,0;
   this is 0,3,0 and later, so no !important. The shift is 30px LEFT, away
   from the photograph, so the copy gains clearance rather than losing it. */
.pw .cf-hero .inner {
  max-width: var(--rail-max, 1240px);
  padding-inline: var(--rail-pad, clamp(1.15rem, 4vw, 2.5rem));
  box-sizing: border-box;
}

/* ── Review badges stay off. A number floating over a photograph is one of
   the defects Ethan has already called out; the markup no longer emits
   them, and this catches any that come back through a merge. ── */
.imgnum { display: none !important; }

/* ── REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pw-index a, .pw-go, .pw-car__btn { transition: none; }
}