/* ============================================================================
   bto-work-brand.css — the work page's BRAND pass.

   Founder, 2026-08-06: "the work page looks very out of brand and the alignment
   and everything doesn't match with our other pages even for the title as well
   the highlight things we have and all of that stuff plus the colours of our
   website blue yellow and black that is also not there … keep it centrally
   aligned like master production house."

   Loaded AFTER work-mph.css, gated on `body.wk-mph`, linked by work.html ONLY.
   work-mph.css keeps every NUMBER it measured off masterproductionhouse.com —
   the 1280@80 shell, 144/48 hero padding, the 60/1.05 h1, the 18/32 lead. This
   file changes only the AXIS and the COLOUR, which is what "out of brand" and
   "keep it centrally aligned" actually name. Nothing here re-sizes type.

   ── THE FOUR FAULTS, NAMED ────────────────────────────────────────────────
   1. NO SLAB. The site's signature device is a flat amber slab at rotate(-3deg)
      under the last line of a lockup — "ON SET." on About, "THING WE MAKE." on
      Services, "BRING THE DATE." in the footer on every page. The work page's
      h1 had `.wv3-line.is--accent`, which is accent as TEXT, not the slab. That
      is the "highlight things we have" that were missing. Markup fixed in
      work.html (the slab needs `.wv3-slabline`, never `.wv3-mask` — see there);
      this file just centres what the slab sits in.
   2. LEFT-ALIGNED AGAINST A CENTRED REFERENCE. MPH centre their work masthead.
      Ours ran flush left in a 1280 shell, so the page opened on a ragged left
      column with 700px of empty right.
   3. NO BLUE, NO BLACK. The page was one flat #F0EEEB from header to footer.
      The brand runs amber (#FFBF65) / navy (#003A6C) / ink (#13181B), and About
      and Services both change ground at least twice. The AR/VR archive section
      brings the ink + navy (bto-work-screen.css); this file adds the navy rule
      under the masthead and the ink CTA band that closes the page.
   4. THE SCROLL CUE WAS A GREY RING on a page with no other grey. Amber.

   🔴 `--fill-accent` FOR FILLS, `--fg-accent` FOR TEXT — THEY ARE NOT
   INTERCHANGEABLE. palette.css:314 remaps the raw amber to dark gold (#854D00)
   for text on light, because #FFBF65 as TEXT on #F0EEEB is 1.41:1. Under dark
   glyphs, as a FILL, the raw amber is the brand's loudest element at 7.08:1.
   Every rule below that paints a surface uses the fill; every rule that paints a
   glyph on light uses the text token. work-mph.css:296 records the same trap.

   ⚠ NO SECTION HERE PAINTS #FFF. work-mph.css's header: `main.ms-main` is
   #F0EEEB and that warm off-white IS the page surface. A `background:#fff` looks
   right until a child's margin collapses out of it and the surface shows through
   as a seam you then chase through three wrong elements.
   ========================================================================== */


/* ==========================================================================
   §1 · THE MASTHEAD, CENTRED
   ==========================================================================
   🔴 EVERY CENTRED BLOCK NEEDS AN EXPLICIT `width: 100%`. `margin-inline: auto`
   on a shrink-to-fit box RESIZES it rather than centring it — it bit three
   separate blocks on the services page in one session (.sva-proc-col 900→500,
   .svw-head 500→316). The hero's children are block-level so they would inherit
   width anyway; the rule is written out because the next person to add a
   `display: inline-block` element here will not know that.

   ⚠ `text-align: center` ONLY — the hero keeps work-mph.css's padding and shell
   untouched. Centring by adding a max-width and auto margins would silently
   re-narrow the 1280@80 shell that file exists to establish. */
body.wk-mph .wv3-hero { text-align: center; }

body.wk-mph .wv3-hero .wv3-kicker,
body.wk-mph .wv3-hero__title,
body.wk-mph .wv3-hero__lead {
  width: 100%;
  margin-inline: auto;
}

/* ⚠ THE LEAD KEEPS ITS MEASURE CAP AND GETS AUTO MARGINS. work-mph.css sets
   `max-width: 768px` (MPH's measured lead box) with no margin rule, which under
   a centred parent leaves the BOX flush left while its TEXT is centred inside —
   a 768px column of centred type sitting in the left 60% of the page. This is
   the one place the two files have to be read together. */
body.wk-mph .wv3-hero__lead { max-width: 768px; }

/* THE SLAB LINE. `.wv3-slab` itself is work-v3.css:181 and is not touched — it
   already carries the flat amber fill, radius 0 and the site's one rotation
   value. What it needs here is a line box that CENTRES it, because
   `.wv3-slabline` is `display: block` and an inline-block child of a block only
   centres if the block says so. Inherited from .wv3-hero, so this is a no-op
   today and a guard against a future left-aligned parent.

   ⚠ THE 10px IS CLEARANCE FOR THE ROTATION, NOT TASTE. A -3deg box lifts its
   RIGHT end by half its width x sin(3deg) — on the 640px "Vision in motion."
   slab that is ~17px of rise above where an upright box would sit. Stacked under
   a 60px/1.05 line the amber corner arrived within ~4px of the "K." of "THE
   WORK." (measured: line-1 box bottom 255, slab box top 244). The line-height is
   the site's and is not the thing to change; the slab line is the only element
   that knows it is rotated, so it is the one that pays for the rise.

   ⚠ THIS IS THE HERO ONLY. `.bw-slab-word` in the archive head sits INSIDE its
   line rather than under one, so it needs none of this — and the same device on
   About and Services is the LAST line of its lockup with nothing beneath it. */
body.wk-mph .wv3-hero__title .wv3-slabline {
  text-align: inherit;
  margin-top: 10px;
}

/* ⚠ THE MASK'S OWN `overflow: hidden` STAYS. Line one is unslabbed, so its
   reveal still needs the clip; only the slabbed line escaped it (see the note
   in work.html). Do not "unify" the two — work-v3.css:175 has the arithmetic. */


/* ── THE RULE UNDER THE MASTHEAD ───────────────────────────────────────────
   A 2px navy rule, 72px wide, centred. It is doing two jobs: it is the page's
   first hit of brand blue, and it closes the centred lockup so the hero reads
   as a masthead rather than as text that ran out.

   ⚠ NOT `--bg-inset-dark`. That token is #13181B in light and BECOMES #003A6C
   in dark (palette.css:169 / :226), so binding to it would turn this rule black
   in light — the opposite of what it is here for. Same literal + per-theme pair
   bto-about-grounds.css:56 uses. */
body.wk-mph .wv3-hero__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 28px auto 0;
  background: #003A6C;
}

[data-theme="dark"] body.wk-mph .wv3-hero__title::after,
body.wk-mph[data-theme="dark"] .wv3-hero__title::after { background: #FFBF65; }


/* ── THE SCROLL CUE ────────────────────────────────────────────────────────
   Centred with the rest, and amber instead of the inherited grey ring. The
   GLYPH is dark gold (`--fg-accent`) because at rest it is an outline button on
   the light page surface; on hover it flips to the fill with ink on top, which
   is the same pair every CTA on the site uses. */
body.wk-mph .wv3-hero .wv3-cue {
  margin-inline: auto;
  border-color: var(--fill-accent, #FFBF65);
  color: var(--fg-accent, #854D00);
}

body.wk-mph .wv3-hero .wv3-cue:hover,
body.wk-mph .wv3-hero .wv3-cue:focus-visible {
  background: var(--fill-accent, #FFBF65);
  border-color: var(--fill-accent, #FFBF65);
  color: var(--fg-on-accent, #13181B);
}


/* ==========================================================================
   §2 · THE HERO'S OWN GROUND — a hairline close, not a colour band
   ==========================================================================
   The page now runs light hero → dark AR/VR archive → dark footer. That is one
   hard colour edge, and it lands exactly where the archive's own top wash
   (bto-work-screen.css §3, the 0% .78 stop) is at its darkest — so the join is
   already resolved and this needs no help.

   What the hero DOES need is its bottom padding cut, because a 48px gap above a
   full-width dark section reads as a gap rather than as a join. MPH close their
   hero at `pb-0` for the same reason.

   🔴 MPH's `pb-0` CANNOT BE COPIED LITERALLY ONTO A PAGE WITH GROUND CHANGES —
   bto-about-mph.css records this costing a cycle. Their page is ONE colour, so a
   flush-closing hero is invisible; ours changes light→ink there, and at 0 the
   masthead's last line sat 18px off a hard edge. 64px is the compromise that
   file landed on: enough air that the edge reads as deliberate, less than the
   88px that reads as an accident. */
body.wk-mph .wv3-hero { padding-bottom: 64px; }


/* ==========================================================================
   §3 · THE 6px LIGHT SEAM ABOVE THE FOOTER — AN INLINE-BLOCK BASELINE GAP
   ==========================================================================
   🔴 `main.ms-main` IS `display: inline-block`, and that is Mokko's, not ours.
   An inline-block sits ON THE TEXT BASELINE, so the line box that contains it
   reserves descender space underneath — and `body` is #F0EEEB, so that space
   paints as a pale hairline. Measured at 1440: main's bottom 1371.2, footer's
   top 1377.2, and `document.elementFromPoint(720, 1373)` returns NULL, which is
   the tell — nothing is painting there, the BODY is showing through.

   ⚠ IT WAS ALWAYS THERE AND WAS ALWAYS INVISIBLE. The page used to end on the
   #F0EEEB archive grid, so a #F0EEEB gap under a #F0EEEB section over a dark
   footer was the same colour as its neighbour. The AR/VR section is the first
   time this page has closed on ink, and the gap became a seam the moment it did.
   Do not read this as something the new section introduced.

   ⚠ `vertical-align: bottom`, NOT `display: block`. Both close the gap.
   `display` is Mokko's own value on a wrapper their scripts and their
   `[data-footer-effect]` corners read, and this page still loads their whole
   vendor bundle; changing the box type to fix a 6px descender is a large lever
   for a small fault. `vertical-align` only moves where the inline box sits on
   its baseline and cannot change layout inside it.

   Scoped to body.wk-mph, so no other page's `main.ms-main` is touched. Those
   pages carry the same latent gap — it is simply invisible on a light close.
   FLAGGED, not fixed here: about/contact/founder would each need the same rule
   the day any of them ends on a dark section. */
body.wk-mph main.ms-main { vertical-align: bottom; }


/* ==========================================================================
   §4 · NARROW
   ==========================================================================
   Centring holds at every width — the hero is one column below 992 anyway. The
   rule shortens with the type so it stays proportional to the lockup rather
   than becoming a bar under a small headline. */
@media (max-width: 991px) {
  body.wk-mph .wv3-hero { padding-bottom: 48px; }
  body.wk-mph .wv3-hero__title::after { width: 56px; margin-top: 22px; }
}

@media (max-width: 575px) {
  body.wk-mph .wv3-hero__title::after { width: 44px; margin-top: 18px; }
}