/* ============================================================================
   ⚠ SHARED FILE — THERE ARE TWO COPIES OF THIS STYLESHEET. EDIT BOTH TOGETHER.

     source/src/footer.css                SOURCE OF TRUTH. Vite compiles it
                                          into  /  and  /services/
     site/final/bto-css/bto-footer.css  ← THIS FILE. Linked directly by
                                          work.html, about.html, contact.html,
                                          founder.html

   Comment prose may differ between the two — each copy describes its own side.
   THE RULE SET MAY NOT. Prove it before you commit:

       cd site && node _tools/check-shared-css.mjs

   ⚠ THIS FILE IS A CAPTURE, AND THAT IS EXACTLY HOW IT DRIFTED. It was lifted
   off the RENDERED services page (see "WHAT THIS IS" below), which means it
   arrived carrying LightningCSS build output: `#f0eeeba8` for what the authored
   file writes as `rgba(240, 238, 235, 0.66)`. Value-identical, so nothing ever
   looked wrong — but it quietly broke the promise made further down this very
   comment, that a colour change "changes in two places, and they are both one
   grep away". It was not one grep away; the two spellings did not match.

   Reconciled 2026-08-13: those values are back in authored notation, the parked
   `.bf .bf-dip` rule was carried across, and `.bf-list a[aria-current="page"]`
   — which lived ONLY here and is live on all four static pages — was ported
   into source. Both copies now hold the same 99 rules.

   ⚠ DO NOT RE-CAPTURE THIS FILE FROM A BUILT PAGE. That is the move that
   created the drift. Edit it as source, alongside its counterpart.
   ============================================================================ */

/* ==========================================================================
   bto-footer.css — THE REAL By The Owl footer, for the static pages.

   WHY THIS FILE EXISTS
   The site was shipping two different footers and one missing one:

     services/   <section class="footer-section bf">   the real one, 899px
     about   ─┐
     contact ─┼─ <footer class="ms-footer ms-footer--template">   MOKKO'S
     founder ─┘                                        TEMPLATE footer, 703px
     /           (nothing)                             homepage has none

   Not "styled differently" — different components. The static three were still
   carrying the footer that shipped with the Mokko theme we bought. Founder,
   2026-08-06: "even the footer of the about page is different".

   WHAT THIS IS
   Lifted VERBATIM off the rendered services page (localhost:2910/services/,
   captured to _ref/bf-footer.css + _ref/bf-footer.html) so the static pages get
   the SAME component, not a reconstruction of it that drifts on the next tweak.
   Rules 1-58 of that capture. Deliberately NOT taken: the `@layer components`
   block at its foot, which styles `.social-btn`, `input` and `.copyright-box`
   entirely in Tailwind custom properties (`var(--spacing)`, `--tw-*`) that do
   not exist outside the React bundle. None of those three elements appear in
   the footer markup anyway, and `.footer-section.bf` sets its own background,
   so nothing is lost. Importing it would have meant importing Tailwind.

   🔴 THE HEX LITERALS ARE CORRECT HERE, unlike in bto-about.css.
   Every colour is declared as a `--bf-*` custom property on `.footer-section.bf`
   itself, exactly as the React component declares them. That is the whole point:
   the footer carries its own palette so BOTH copies stay identical by
   construction. Rewriting them as palette.css tokens would silently re-theme the
   static footer away from the React one — the exact drift this file is fixing.
   If a colour changes, it changes in two places, and they are both one grep away.

   LOAD ORDER: LAST, after bto-header.css. It is a self-contained component and
   nothing downstream should be able to reach into it.

   PATHS: the markup on the static pages is path-adjusted for the SITE ROOT
   (`contact.html`, `services/`, `images/yt.svg`) where the services copy uses
   `../contact.html`, `./`, `./images/yt.svg`. The social SVGs exist in both
   `final/images/` and `final/services/images/` — verified 2026-08-06, this is
   not a hotlink across folders.
   ========================================================================== */

.footer-section.bf {
  --bf-ink: #13181B;
  --bf-milk: #F0EEEB;
  --bf-amber: #FFBF65;
  --bf-navy: #003A6C;
  --bf-face: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --bf-display: "Antonio", "Archivo", sans-serif;
  --bf-rule: rgba(240, 238, 235, 0.12);
  --bf-max: 1440px;   /* 1320 -> 1440 (2026-08-06): the footer sat 40px inside every page. See the note below. */
  min-height: 0;
  background: var(--bf-ink);
  position: relative;
  overflow: hidden;
}

/* ⚠ NOT RENDERED ON ANY PAGE, AND KEPT ANYWAY — `bf-dip` appears in zero markup
   files site-wide. It is parked: the element is commented out in
   FooterSection.jsx (2026-08-05) because its cream wave transitioned out of a
   LIGHT section and the footer's predecessor is now dark, and the rule was left
   behind so restoring the dip stays a one-line JSX change rather than a
   two-file archaeology job. The static pages have no dip either, so here it is
   inert — carried purely so this file and source/src/footer.css hold the SAME
   rule set and `_tools/check-shared-css.mjs` can prove it. Deleting it from
   this copy re-opens the drift. See the SHARED FILE banner at the top. */
.bf .bf-dip {
  display: block;
  width: 100%;
  object-fit: cover;
  transform: translateY(-1px);
}

.bf-inner { max-width: var(--bf-max); margin: 0 auto; padding: 0 80px; }
.bf-close { padding: clamp(72px, 11vh, 132px) 0 clamp(48px, 6.5vh, 78px); }

.bf-head {
  font-family: var(--bf-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bf-milk);
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  margin: 0;
  max-width: 16ch;
}
.bf-head-l1, .bf-head-l2 { display: block; }
.bf-head-l2 { margin-top: 0.44em; }

/* The amber highlight behind "Bring the date." box-decoration-break:clone is
   what keeps the block painted per-line when it wraps, instead of one ragged
   rectangle spanning both lines. */
.bf-mark {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--bf-amber);
  color: var(--bf-ink);
  border-radius: 0;
  padding: 0.06em 0.28em 0.14em;
  text-shadow: none;
}

.bf-sub {
  font-family: var(--bf-face);
  font-weight: 400;
  color: rgba(240, 238, 235, 0.66);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  max-width: 46ch;
  margin: clamp(22px, 3vh, 34px) 0 0;
}

.bf-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 30px);
  margin-top: clamp(30px, 4vh, 44px);
}

.bf-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--bf-face);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--bf-ink);
  background: var(--bf-amber);
  border-radius: 999px;
  padding: 17px 40px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.bf-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 191, 101, 0.22); }
.bf-cta:focus-visible { outline: 2px solid var(--bf-amber); outline-offset: 4px; }

.bf-mail {
  font-family: var(--bf-face);
  font-size: clamp(15px, 1.05vw, 17px);
  color: rgba(240, 238, 235, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 238, 235, 0.28);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bf-mail:hover { color: var(--bf-milk); border-color: var(--bf-amber); }

.bf-cols {
  border-top: 1px solid var(--bf-rule);
  padding: clamp(48px, 6vh, 72px) 0 clamp(44px, 5.5vh, 64px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.45fr 1.1fr;
  gap: clamp(28px, 3.4vw, 56px);
}
.bf-cols--3 { grid-template-columns: 1.5fr 1fr 1fr; }
.bf-col { min-width: 0; }

.bf-wordmark { display: inline-block; text-decoration: none; }
.bf-wm-name {
  display: block;
  font-family: var(--bf-face);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.24px;
  color: var(--bf-milk);
}
.bf-wm-tag {
  display: block;
  margin-top: 6px;
  font-family: var(--bf-face);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(240, 238, 235, 0.5);
}

.bf-blurb {
  font-family: var(--bf-face);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(240, 238, 235, 0.5);
  max-width: 30ch;
  margin: 20px 0 0;
}

.bf-social { display: flex; gap: 10px; list-style: none; margin: 28px 0 0; padding: 0; }
.bf-social a {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(240, 238, 235, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bf-social a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(240, 238, 235, 0.4); }
.bf-social a:focus-visible { outline: 2px solid var(--bf-amber); outline-offset: 3px; }
.bf-social img { width: 18px; height: 18px; object-fit: contain; }

.bf-ch {
  font-family: var(--bf-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.17em;
  color: rgba(240, 238, 235, 0.55);
  margin: 0 0 18px;
}

.bf-list { list-style: none; margin: 0; padding: 0; }
.bf-list li + li { margin-top: 11px; }
.bf-list a {
  font-family: var(--bf-face);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(240, 238, 235, 0.78);
  text-decoration: none;
  transition: color 0.18s ease;
  display: inline-block;
}
.bf-list a:hover { color: var(--bf-amber); }
.bf-list a:focus-visible { outline: 2px solid var(--bf-amber); outline-offset: 3px; border-radius: 2px; }
.bf-list--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px clamp(14px, 1.6vw, 26px); }
.bf-list--split li + li { margin-top: 0; }

.bf-legal {
  border-top: 1px solid var(--bf-rule);
  padding: 26px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--bf-face);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(240, 238, 235, 0.38);
}
.bf-legal p { margin: 0; }
.bf-legal-links { display: flex; gap: 26px; }

/* `aria-current="page"` — the static pages carry it in the header nav and the
   footer list should agree rather than contradict it. The React footer has no
   equivalent because its nav is rendered per-variant; this is the one rule in
   this file with no counterpart in the capture, and it is additive only. */
.bf-list a[aria-current="page"] { color: var(--bf-milk); }

@media (max-width: 1100px) {
  .bf-inner { padding: 0 40px; }
  .bf-cols { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
  .bf-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .bf-inner { padding: 0 20px; }
  .bf-close { padding: 56px 0 48px; }
  .bf-head { font-size: clamp(2rem, 9vw, 2.9rem); max-width: none; }
  .bf-cta { width: 100%; justify-content: center; }
  .bf-cta-row { gap: 20px; }
  .bf-cols { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 36px; }
  .bf-list--split { grid-template-columns: 1fr; }
  .bf-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bf-legal-links { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-cta { transition: none; }
  .bf-cta:hover { transform: none; }
}

/* ==========================================================================
   §MPH — THE CONTACT LAYOUT, 2026-08-06

   FOUNDER: "copy their code and get the same layout for our footer as well",
   pointing at masterproductionhouse.com's close + footer.

   WHAT WAS COPIED: the LAYOUT ONLY.
     · a 2-track close band — pitch on the left, contact cards on the right
       (MPH: `lg:grid-cols-[0.86fr_1.14fr]`)
     · labelled contact cards, icon square + eyebrow label + value
     · a labelled social pill row under the cards
     · a 3-track footer band (MPH: `md:grid-cols-[1.2fr_0.8fr_0.8fr]`) — brand
       blurb + socials | Pages | Contact-with-icons
   Our existing `.bf-close` / `.bf-cols--3` bands were ALREADY that shape, so
   this file ADDS the cards, pills, eyebrow and icon rows. No existing rule was
   rewritten — `.bf-head`, `.bf-mark`, `.bf-sub`, `.bf-cta`, `.bf-legal` and the
   grid tracks above are untouched, which is why the amber slab, the CTA pill
   and the legal bar still read as By The Owl and not as MPH.

   🔴 WHAT WAS **NOT** COPIED — MPH'S IDENTITY FACTS. Their footer carries
   `9990009224`, `info@masterproductionhouse.com`, `Delhi NCR, India`, the
   `MPH / Master of our work` lockup and a capability paragraph naming their
   cities. Those are a second company's facts. contact.html has carried the
   standing rule since 2026-08-05 ("MPH's number and city are a different
   company's identity facts and must never be asserted as ours") and it holds
   here. Ours ship as `[FOUNDER TO FILL]` blanks — founder decision, 2026-08-06,
   asked and answered: "Full 3 cards, blanks visible".

   COLOURS: every value below is one of the `--bf-*` properties already declared
   on `.footer-section.bf`, for the same reason the file's header gives — the
   component carries its own palette so the static and React copies cannot drift.
   ========================================================================== */

/* ── the close band, split ─────────────────────────────────────────────── */
.bf-close--split {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
/* the close band's own padding already sets the vertical rhythm; the lead
   column must not add its own or the two tracks stop sharing a baseline. */
.bf-close__lead { min-width: 0; }

.bf-eyebrow {
  font-family: var(--bf-face);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bf-amber);
  margin: 0 0 clamp(18px, 2.4vh, 26px);
}

/* MPH's CTA carries a trailing arrow. Ours is the same `.bf-cta` pill — this
   only sizes the glyph and gives it the gap. */
.bf-cta svg { width: 16px; height: 16px; margin-left: 10px; flex: none; }

/* ── the contact cards ─────────────────────────────────────────────────── */
.bf-cards { display: grid; gap: 14px; min-width: 0; }

.bf-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid rgba(240, 238, 235, .12);
  border-radius: 10px;
  background: #ffffff08;
  text-decoration: none;
  min-width: 0;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
a.bf-card:hover { transform: translateY(-2px); border-color: #ffbf6580; background: #ffffff0f; }
a.bf-card:focus-visible { outline: 2px solid var(--bf-amber); outline-offset: 3px; }

.bf-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 8px;
  background: #ffbf651f;
  color: var(--bf-amber);
}
.bf-card__icon svg { width: 20px; height: 20px; }

.bf-card__body { min-width: 0; }
.bf-card__label {
  display: block;
  font-family: var(--bf-face);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f0eeeb80;
}
.bf-card__value {
  display: block;
  margin-top: 5px;
  font-family: var(--bf-face);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: var(--bf-milk);
  overflow-wrap: anywhere;
}

/* A [FOUNDER TO FILL] blank, marked so it cannot ship unseen. Deliberately a
   FOOTER-LOCAL rule and not `.bto-blank` from bto-static.css: that one is
   scoped to `.bto-static`, and this footer also renders on work.html, whose
   body is `.masonry.wk-page`. The scoped rule would silently not apply there
   and the blank would read as ordinary copy on exactly one page. */
.bf-blank {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--bf-ink);
  background: var(--bf-amber);
  padding: 2px .4em 3px;
  border-radius: 3px;
}

/* ── the social pills ──────────────────────────────────────────────────── */
/* auto-fit, NOT a fixed track count. MPH runs `grid-cols-2 sm:grid-cols-4` and
   carries five marks, so their last pill always sits alone on its own row. A
   fixed 2-track grid did the same thing here (4 + 1 orphan). auto-fit lets the
   five sit on one row wherever they fit and reflow to 3+2 / 2+2+1 as the column
   narrows, with no dead cell at any width. */
.bf-pills {
  display: grid;
  /* 112px, not 124px: at 1440 the cards track measures ~660px, and 5x124 + 4x12
     of gap is 668 — eight pixels over, which dropped the fifth pill onto its own
     row and reproduced exactly the MPH orphan this grid exists to avoid. 5x112 +
     48 = 608 clears it at both the React and the static widths. */
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.bf-pills li { min-width: 0; }
.bf-pills a, .bf-pills span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 12px;
  border: 1px solid rgba(240, 238, 235, .1);
  border-radius: 8px;
  background: #0000004d;
  font-family: var(--bf-face);
  font-weight: 600;
  font-size: 14px;
  color: #f0eeebc7;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.bf-pills a:hover { color: var(--bf-amber); border-color: #ffbf6599; }
.bf-pills a:focus-visible { outline: 2px solid var(--bf-amber); outline-offset: 3px; }
.bf-pills svg { width: 16px; height: 16px; flex: none; }
/* the WhatsApp pill cannot be built without the phone blank above it — it is a
   `wa.me/<number>` URL. Rendered as a non-link until the number exists, rather
   than as a link that goes nowhere. */
.bf-pills .bf-pill--blank { color: #f0eeeb54; cursor: not-allowed; }

/* ── the Contact column's icon rows (footer band, track 3) ─────────────── */
.bf-contact { list-style: none; margin: 0; padding: 0; }
.bf-contact li + li { margin-top: 15px; }
.bf-contact a, .bf-contact p {
  display: flex;
  gap: 12px;
  margin: 0;
  min-width: 0;
  font-family: var(--bf-face);
  font-size: 15px;
  line-height: 1.45;
  color: #f0eeebc7;
  text-decoration: none;
  transition: color .18s ease;
}
.bf-contact a:hover { color: var(--bf-amber); }
.bf-contact a:focus-visible { outline: 2px solid var(--bf-amber); outline-offset: 3px; border-radius: 2px; }
.bf-contact svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bf-contact span { min-width: 0; overflow-wrap: anywhere; }

/* ── the brand column ──────────────────────────────────────────────────── */
/* MPH's brand blurb runs long (a capability sentence). `.bf-blurb` caps at
   30ch, which turns that into a 6-line ribbon. Widened for the split copy. */
.bf-col--brand .bf-blurb { max-width: 46ch; }
/* the social discs were `<img>` only; the five-mark set is inline SVG so the
   glyphs inherit currentColor and follow the hover.

   🐛 THE `span` SELECTOR IS LOAD-BEARING. The WhatsApp mark is a <span>, not an
   <a> (no number, so no wa.me URL — see .bf-pills above). The original rule was
   `.bf-social a` only, which left it as a bare 18px glyph floating outside the
   row of four circles: it read as a rendering fault, not as a pending link. */
.bf-social a, .bf-social span {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(240, 238, 235, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0eeebc7;
}
.bf-social a:hover { color: var(--bf-amber); }
.bf-social .bf-pill--blank { color: #f0eeeb54; border-color: rgba(240, 238, 235, .1); cursor: not-allowed; }
.bf-social svg { width: 18px; height: 18px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bf-close--split { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .bf-close--split { gap: 34px; }
  .bf-card { min-height: 0; padding: 15px 16px; gap: 13px; }
  .bf-card__icon { width: 38px; height: 38px; }
  .bf-card__icon svg { width: 17px; height: 17px; }
  .bf-card__value { font-size: 15px; }
  /* the pill track floor drops so three still fit a 360px column instead of
     falling to two and stranding the fifth. The count itself stays auto-fit. */
  .bf-pills { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
  .bf-pills a, .bf-pills span { min-height: 48px; font-size: 13px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-card { transition: none; }
  a.bf-card:hover { transform: none; }
}


/* ==========================================================================
   §LADDER — THE FOOTER JOINS THE PAGE'S TYPE LADDER, AND SHEDS ITS DOUBLE
   2026-08-06.

   FOUNDER: "can we work on the footer its too big right now. i want a better
   compostion and should also have the same alingment like other title just the
   things what we have been doing."

   MEASURED FIRST, ALL SIX PAGES AT 1440x857 (`_probe-footer.cjs`):
       height 1031px = 1.20 SCREENS — and 42.9% of the whole work page
       shell  content-left 80 · page title spine 80 · DRIFT 0 on all six

   🔴 SO THE SHELL WAS ALREADY RIGHT — DO NOT RE-DIAGNOSE THIS AS AN ALIGNMENT
   BUG. `--bf-max: 1320 -> 1440` + the 80px gutter (2026-08-06) had already put
   the footer on the page spine, and it measures dead-on at every page. What was
   off was the TYPE and the CONTENT, not the box.

   THE HEIGHT WAS ONE ELEMENT. The block tree at 1440:
       close 624 = pad 94 + lead 474 + pad 56    <- the LEAD drives it, not the cards
         lead  eyebrow 18 · HEAD 272 · sub 47 · cta 57
         cards 378
       cols  332  ·  legal 76
   `.bf-head` at `clamp(2.4rem,5.4vw,5rem)` = 78/79, wrapping to THREE lines =
   272px, on a site whose closing heading is 36. Removing the cards would have
   saved NOTHING — they were never the tall thing.

   THE LADDER IS ABOUT'S, READ OFF THE RENDERED PAGE (bto-about-mph.css is this
   vault's source of truth for these numbers; the sheet was not trusted, the
   page was measured):
       page h1      60/63  w700  ls -.02em  Antonio
       section h2   48/50  w700  ls -.02em  Antonio
       CLOSE h2     36/38  w700  ls -.02em  Antonio   <- the footer head's peer
       eyebrow      14/20  w600  ls .32em   Antonio
       body         16/28  w400             Neue Montreal

   🔴 THE FOOTER HEAD IS A *CLOSE* HEADING, SO IT TAKES 36 — NOT 48. It does the
   same job as `#about-close .content__title`: the last thing the page says. If
   it ever wants to be louder the next step is 48, the section-head value — not
   a free number.

   ⚠ THE EYEBROW CHANGES FAMILY, NOT JUST SIZE. Ours was Neue Montreal 12/.3em;
   every other eyebrow on the site is ANTONIO 14/20 w600 .32em. Sizing it alone
   would have left it the only grotesque eyebrow in the building.

   THE DOUBLE: contact ran TWICE (the cards and the bottom Contact column),
   socials twice (pills and icons), email three times, `[FOUNDER TO FILL]` four
   times. Founder call, asked and answered: KEEP THE CARDS — they are the
   2026-08-06 MPH close layout he approved — and drop the bottom column.

   🔴 DONE IN CSS, NOT MARKUP, AND ON PURPOSE. `.bf-col[aria-label="Contact"]`
   is a stable semantic hook that reaches BOTH stacks — FooterSection.jsx and
   the four inline static copies — from one place, with no rebuild and no
   `../v2/` patch treadmill. `display:none` takes it out of the accessibility
   tree as well, and the same three facts are still announced by the labelled
   cards above, so nothing is lost to a screen reader. Once the composition is
   signed off, delete the markup in the five files and this rule with it.

   ⚠ FOUR COPIES MOVE TOGETHER:
       bto-spylt/src/footer.css                  (source — React home + services)
       final/bto-css/bto-footer.css              (the 4 static pages, served raw)
       final/assets/home-*.css                   (built, home — last sheet loaded)
       final/services/assets/main-*.css          (built, services — same)
   The two built copies are regenerated from the source copy on the next
   rebuild; they are patched here only so :2910 is correct without one.

   ⚠ EVERY SELECTOR IS `.bf .x` (0,2,0), WHICH BEATS THE `.x` (0,1,0) RULES
   ABOVE — including the ones inside `@media`. A media query adds NO
   specificity, so this block would silently outrank the responsive tiers too.
   That is why the narrow tiers are restated at the foot of this block. Adding
   a rule here without checking the RESPONSIVE section above is how mobile
   breaks with nothing in the console.
   ========================================================================== */

/* ── ① the close band ─────────────────────────────────────────────────── */
.bf .bf-close { padding: clamp(56px, 8.4vh, 84px) 0 clamp(40px, 6.5vh, 60px); }

.bf .bf-head {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.05;
  letter-spacing: -.02em;
  /* 🔴 THE 16ch CAP COMES OFF, AND THAT IS NOT TIDYING. A ch/em cap on DISPLAY
     type scales WITH the type, so cutting 78 -> 36 would have shrunk the box in
     the same stroke and kept exactly the same three lines — the size cut
     cancels itself out. This vault has already paid for that lesson once
     (`.svw-head`, 500 -> 316, headline still five lines). A headline fills its
     column and is sized to fit; it is never boxed to a character count. */
  max-width: none;
}
/* ⚠ `.bf-head-l2 { margin-top: .44em }` IS DELIBERATELY NOT TOUCHED. It is the
   clearance for the amber slab's ~0.28em overhang, it is already in `em` so it
   tracks the clamped size, and the note above it records five widths of
   measurement. It stays correct at 36px for free. */

.bf .bf-eyebrow {
  font-family: var(--bf-display);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: .32em;
  margin: 0 0 18px;
}

.bf .bf-sub {
  font-size: 16px;
  line-height: 1.75;
  /* was `max-width: 46ch`. `ch` IS THE ZERO GLYPH, NOT AN AVERAGE CHARACTER —
     46ch measured 431px and ran ~92 real characters. ~2 chars per em, so 32em
     is the house measure for a support line. */
  max-width: 32em;
  margin-top: clamp(18px, 2.4vh, 24px);
}

.bf .bf-cta-row { margin-top: clamp(24px, 3.2vh, 34px); }

/* the cards stop being the tallest thing in their own track. 92 -> 72 with a
   38px icon square, so the close band's height is decided by the PITCH, which
   is what a close band is for. */
.bf .bf-cards { gap: 12px; }
.bf .bf-card { min-height: 72px; padding: 12px 18px; }
.bf .bf-card__icon { width: 38px; height: 38px; }
.bf .bf-card__icon svg { width: 18px; height: 18px; }

/* ── ② the directory band ─────────────────────────────────────────────── */
.bf .bf-col[aria-label="Contact"] { display: none; }
/* 🔴 THE SOCIAL ROW WAS THE LAST DOUBLE, AND IT GOES THE SAME WAY THE CONTACT
   COLUMN DID — the founder's rule for this footer, applied consistently rather
   than re-asked: the MPH close block keeps the object, the bottom band drops its
   repeat. The labelled pills up in the close band are the same five networks,
   with names on them; these were the same five as bare circles 500px below.
   ⚠ ONE LINE TO PUT THEM BACK. Nothing else depends on it. */
.bf .bf-col--brand .bf-social { display: none; }

/* the blurb ran 3 lines in a 399px box inside a 739px track. 34em is the house
   measure and it lands the same sentence in 2 lines — the band gets shorter by
   letting the copy get WIDER, which is the opposite of the usual lever. */
.bf .bf-blurb { max-width: 34em; }

/* 1.5fr left the right track short and the middle of the band empty once
   Contact went. With two tracks the split is nearly even. */
.bf .bf-cols--3 { grid-template-columns: 1.2fr 1fr; }
.bf .bf-cols { padding: clamp(36px, 5.2vh, 48px) 0 clamp(32px, 4.7vh, 44px); }

/* six links in one column left half the wider track empty once Contact went.
   Two of three — the same call `.bf-list--split` already records for the
   capability list, applied here in CSS so no markup has to change. */
.bf .bf-cols--3 .bf-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(14px, 1.6vw, 26px);
}
.bf .bf-cols--3 .bf-list li + li { margin-top: 0; }
.bf .bf-list a { font-size: 16px; line-height: 1.5; }

.bf .bf-ch { font-size: 12px; line-height: 1.34; letter-spacing: .24em; margin-bottom: 18px; }

/* ── ③ the legal bar ──────────────────────────────────────────────────── */
.bf .bf-legal { padding: 20px 0 24px; font-size: 14px; line-height: 1.72; }

/* ── THE NARROW TIERS, RESTATED ───────────────────────────────────────────
   Not new behaviour — these are the RESPONSIVE section's own rules, repeated at
   (0,2,0) because the block above now outranks them. Change one there, change
   it here. */
@media (max-width: 1100px) {
  .bf .bf-cols--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .bf .bf-close { padding: 48px 0 40px; }
  .bf .bf-head { font-size: clamp(24px, 7.6vw, 32px); max-width: none; }
  .bf .bf-cols--3 { grid-template-columns: 1fr; }
  .bf .bf-cols { padding: 36px 0 32px; }
  .bf .bf-cols--3 .bf-list { grid-template-columns: 1fr; gap: 10px; }
}