/* ============================================================================
site-unify.css — makes index-v2.html read as the same site as /services-v2/.
PURELY ADDITIVE. Loaded LAST, after every existing stylesheet, and linked
ONLY from index-v2.html. index.html never sees it, so the working homepage
cannot break.
── HOW THIS FILE FIGHTS THE CASCADE ─────────────────────────────────────
index-v2.html loads, in order:
style.css · hero.css · sections.css · marquee-banner.css · mokko-bridge.css
· reveals.css · panel-fixes.css · hero-phone.css · palette.css · THIS FILE
It does NOT load bto-tokens.css or bto-os-home.css. Rules quoted from those
two files in earlier review notes DO NOT APPLY HERE — verified against the
page's own tags with CDP getMatchedStylesForNode, not read off source.
Every section head on this page is governed by an ID-carrying rule in
mokko-bridge.css § P5/M2 (`#engine.er-sec .er-head`, `#faq .ms-ah-wrapper
.content__title`, `#work.bto-work .ms-ah-wrapper .content__title`). A
class-only selector cannot beat an ID no matter how late it loads. So the
rules below are prefixed with `body` and carry the same ID — one notch above
the incumbent. THAT is why the selectors look heavy.
*** THERE ARE EXACTLY THREE `!important` DECLARATIONS IN THIS FILE, *** all in
one rule (§8, the footer/social ghost pill), all forced by an `!important` in
palette.css:422 — specificity cannot beat an !important, so it has to be
matched. Everything else wins on specificity alone. If you add a rule and it
doesn't take, raise specificity before reaching for !important, and run
cascade.mjs to see what actually beat you.
(This header previously claimed zero. It was written before §8 existed and was
wrong by the time it was read — corrected 2026-07-30. Three more overrides in
the 2026-07-30 pass silently lost the cascade because I trusted a comment or a
source file instead of resolving the live match: the footer nav links, the
copyright line and work.html's card radius. All three are annotated in place
with the incumbent that beat them.)
── WHAT THE REFERENCE ACTUALLY IS (measured at 1440×900, not assumed) ────
THREE faces, each with one job:
Antonio display + card interiors + micro-tags (61 nodes)
ProximaNova body prose only (51 nodes)
Neue Montreal chrome only — logo, nav, buttons (10 nodes)
Display spec: 700 · uppercase · letter-spacing -0.05em · line-height .95–1
Palette MP071: #F0EEEB canvas · #13181B ink · #003A6C navy · #FFBF65 amber
Amber: 6 elements TOTAL. Flat fills, border-radius 0, rotation on a
wrapper (-3deg). Never a gradient, never a glow.
Radii: 40px pills (13×) · 28px cards. Two values, that's the system.
============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap");
/* ---------- 1 · tokens, aligned to the services page ---------------------- */
:root {
--u-canvas: #F0EEEB; /* Magical Moonlight — the room */
--u-ink: #13181B; /* Neverything */
--u-navy: #003A6C; /* Ateneo Blue */
--u-surface: #CCD5DA; /* Polar Drift */
--u-accent: #FFBF65; /* Sea Buckthorn — FILL ONLY, never text on light */
--u-accent-tx: #854D00; /* accent AS TEXT on a light ground. 5.93:1. */
/* #FFBF65 as text on #F0EEEB is 1.41:1 — illegible.*/
--u-on-dark: #F0EEEB; /* ink on a dark ground */
--u-on-dark-mute: #B7B6B5;
/* the ghost-pill pair, as tokens so they can follow their GROUND.
§8 has to use !important to beat palette.css:422, and an !important
declaration cannot be re-specified later by specificity. Routing it
through a custom property means the dark footer redefines the VALUE
(§15c) instead of needing a second !important to fight the first. */
--u-pill-ink: #13181B;
--u-pill-bd: rgba(19, 24, 27, .24);
--u-display: "Antonio", "Archivo", sans-serif;
--u-prose: "ProximaNova", "Neue Montreal", sans-serif;
--u-track: -0.05em; /* the reference's display tracking, as a ratio. */
/* Reference declares -0.35vw = -5.04px on its 96px */
/* head = -0.0525em. Copying the vw value would give */
/* -0.076em on this page's 66px heads — too tight. */
/* The em ratio is what reproduces, so use that. */
}
/* ---------- 2 · the body face -------------------------------------------- */
/* The reference sets prose in ProximaNova; this page was setting it in Neue
Montreal. Same size (18px) and near-identical line-height (28 vs 28.8), so
this is a face swap, not a re-scale — reflow risk is low and was measured.
2026-07-30 — THE FOLLOW-UP I FLAGGED LAST PASS HAD ALREADY BITTEN. The src
was ../services-v2/fonts/ProximaNova-Regular.otf, which resolved only while
these pages lived at site root. Both pages now also serve from site/v2/, where
the same relative path resolves to /v2/services-v2/fonts/ — a directory that
does not exist. Measured result on .../v2/: the face errored and all 55 prose
nodes silently fell through to Neue Montreal, the next family in --u-prose. It
looked fine, which is why nobody caught it.
The .otf now lives in site/fonts/, which is a real directory at site root AND
is symlinked into v2/ as `fonts`. So ../fonts/ resolves from bto-css/ in BOTH
contexts, and the cross-build coupling is gone for good.
Weight range 400–500 matches the services build so the prose face and its
weight behaviour are identical on all three pages. */
@font-face {
font-family: "ProximaNova";
src: url("../fonts/ProximaNova-Regular.otf") format("opentype");
font-weight: 400 500;
font-display: swap;
}
/* ---------- 3 · display type --------------------------------------------- */
/* Antonio is condensed: at the same font-size it occupies ~20% less width.
Three of this page's display heads carry NO class of their own and are
reachable only through their parent — verified by walking the live DOM.
.hbv-copy h1 is the hero, .footer-title h1 is the close, .er-head is the
Engine Room. Missing these is what made the first pass look half-applied. */
body .hbv-copy h1,
body .footer-title h1,
body .footer-title,
body .footer-title *,
body .er-head,
body .hero-title,
body .content__title,
body .bto-rail-title,
body .bto-banner-title,
body .bto-pw-title,
.ms-hero-subtitle {
font-family: var(--u-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--u-track);
line-height: 0.95;
}
/* 3b · the four heads whose incumbent rule carries an ID or two classes.
Same declarations as above — restated at higher specificity because the
generic block LOSES to these, measured:
.bto-banner .bto-banner-title (0,2,0) mokko-bridge.css:890
#work.bto-work .ms-ah-wrapper .content__title (1,3,0) mokko-bridge § M2
#faq .ms-ah-wrapper .content__title (1,2,0) mokko-bridge § M2
#engine.er-sec .er-head (1,2,0) mokko-bridge § P5.6
all of which pin font-weight:600 and letter-spacing:-.02em. */
/* 3c · THE STATIC PAGES' SECTION HEADS — added 2026-08-06.
Founder: "the about page does not look like our website".
MEASURED, at 1440x900, Antonio headings by size/weight, footer excluded:
services 124/700 104/700 96/700 66/700 63/700 52/700 37/700 21/700 20/700 17/700
home 295/700 96/700 60/700 52/700 31/700
about 96/700 90/700 52/500 x9 <-- every section head on the page
contact 90/700 52/700 x2 52/500 x3
Every Antonio heading on home and services is 700, INCLUDING at exactly 52px.
This file's own header states the reference: "Display spec: 700 - uppercase -
letter-spacing -0.05em - line-height .95-1". So 500 here is off-spec, not a
second tier, and it is the single biggest reason about.html read as a
different site: nine of its ten section heads were the wrong weight.
The incumbent is `.ms-ah-wrapper .content__title` (0,2,0) from Mokko's
style.css. `body.bto-static .ms-ah-wrapper .content__title` is (0,3,0) plus
an element, so it wins on specificity - no !important, per this file's rule.
NOTE THE MISSING SPACE, it is the whole rule: `body.bto-static`, not
`body .bto-static`. `.bto-static` sits ON the element, so the
descendant form asks for a .bto-static INSIDE body, which does not exist and
silently matches nothing. Written that way first; the probe still read 500
across all nine heads and that is the only reason it was caught.
ONLY font-weight is declared. Family, letter-spacing (-2.592px on 51.84px =
exactly -0.05em) and text-transform were MEASURED as already on-spec, so
restating them would be noise that could only drift. Line-height is
deliberately not touched: reveals.css:180 documents `.ms-ah-wrapper
.content__title { line-height: 0.9 }` as load-bearing for the wipe's clip
geometry, and this rule has no business moving it.
SCOPE: `.bto-static` is about + contact + founder. It corrects about (9) and
contact (3). It does NOT touch founder's eleven `H3.svc-step-name` at 23px/500
- those are `.svc-step-name`, not `.content__title`, a genuine small tier, and
they are left exactly as they are. */
body.bto-static .ms-ah-wrapper .content__title { font-weight: 700; }
/* 3d · THE STATIC PAGES' INHERITED INK — added 2026-08-06, same pass.
MEASURED: `getComputedStyle(document.body).color` is
home rgb(19, 24, 27) = #13181B, the MP071 ink
services rgb(19, 24, 27)
about rgb(0, 0, 0) <-- PURE BLACK, the CSS initial value
Nothing in the static chain declares a body colour, so black arrives by
omission rather than by choice. bto-about.css:122-137 already caught the same
class of bug on `.content__title` and wrote it up: pure black is not in
MP071, the difference is small enough to be invisible and large enough to be
wrong, and it will DRIFT on the theme toggle because `--fg-ink` follows the
theme and `black` does not.
This only reaches elements that declare no colour of their own - every
section head, lead, prose and row on these pages already resolves to a
palette token, so the visible delta is small. It is the floor being correct
rather than the paint. */
body.bto-static { color: var(--fg-ink); }
body .bto-banner .bto-banner-title,
body #work.bto-work .ms-ah-wrapper .content__title,
body #faq .ms-ah-wrapper .content__title,
body #engine.er-sec .er-head {
font-family: var(--u-display);
font-weight: 700;
letter-spacing: var(--u-track);
line-height: 0.95;
text-transform: uppercase;
}
/* the small uppercase eyebrow — same register as the services page's kickers */
body .heading-title,
body .bto-pw-eyebrow,
body .ms-hero-title {
font-family: var(--u-display);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
}
/* ==========================================================================
4 · THE AMBER SLAB — the page's signature device, and the headline fix
==========================================================================
THE BUG, and how it was found: the block rendered with a dark wash that was
heaviest through the middle and lifted at the right end. It was NOT a
gradient, a mask or an overlay — six ablation runs killing .hb-viewer::before,
::after, both, the rotation and the z-order left it unchanged.
ROOT CAUSE: hero-phone.css:289 puts `text-shadow: 0 4px 30px rgba(0,0,0,.7)`
on `.hbv-copy h1`. text-shadow INHERITS, so the .u-mark span carries it too —
and a span paints its own background FIRST, then its text's shadow ON TOP.
Result: 30px of blurred black haze deposited over the amber plate, densest
where the glyphs are. That is why it read as a left-to-right fade: the right
end of the block is past the final full stop, so no glyphs, no haze.
PROOF: sampling the brightest amber per column across the block gave
L=240 M=236 R=254 (spread 18). With `text-shadow:none` on .u-mark the same
scan gives 255/255/255 — spread 0, exactly #FFBF65.
The shadow is correct for white type over video. It is wrong inside the slab,
where dark ink sits on a solid plate that supplies its own contrast.
Art-direction law being satisfied: "amber is flat or it isn't amber." */
.u-mark {
background: var(--u-accent);
color: var(--u-ink);
display: inline-block;
/* the services block's padding ratio. It reads as a BLOCK; the old
0.02em/0.3em/0.12em hugged the letterforms. */
padding: 0.06em 0.28em 0.14em;
border-radius: 0; /* reference measures 0px. It is a cut plate. */
transform: rotate(-3deg); /* reference .hero-text-scroll rotates -3deg */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
text-shadow: none; /* ← THE FIX. See the block comment above. */
}
/* On the dark hero the ink must be forced, or Mokko's white heading colour
inherits straight through and the text vanishes into the plate. */
.hbv-copy h1 .u-mark {
color: var(--u-ink);
text-shadow: none; /* restated: .hbv-copy h1 is where it enters */
margin-top: 0.12em;
}
/* ---------- 5 · the accent AS TEXT --------------------------------------- */
/* `em.s` is this page's accent-word tag. It resolves through --dc-accent and
was rendering mid-grey #555859, which is why "NEEDS" and "ROOM." read as
switched-off words.
🔴 DO NOT set these to #FFBF65. On the #F0EEEB canvas that is 1.41:1 —
an illegible headline. Accent-as-text on light is #854D00 (5.93:1). */
body h1 em.s,
body h2 em.s,
body h3 em.s,
body .bto-banner .bto-banner-title em.s {
color: var(--u-accent-tx);
font-style: normal;
}
/* ...but inside a DARK panel the polarity flips: there, #FFBF65 is 10.98:1 and
#854D00 would be a brown word on near-black. Scoped, not global. */
body #engine.er-sec .er-head em.s,
body .footer-title em.s,
body footer.ftb h3 em.s {
color: var(--u-accent);
}
/* eyebrows: the services page's kicker register */
body .hbv-copy .kick,
body .bto-rail-head .kick,
body .er-kick,
body .fq-kick {
font-family: var(--u-display);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--u-accent);
}
/* ==========================================================================
6 · THE DARK BEAT — the Engine Room goes back to dark
==========================================================================
Measured tonal rhythm before this rule: D · L · L · M · L · D
The Engine Room was landing on #CCD5DA, not on the #0a0f0c it was designed
for and not on the canvas either. Cause: `#engine.er-sec { background:
var(--bto-surface-c) }` (mokko-bridge.css:1422) where --bto-surface-c
resolves through --bg-panel-dark, which palette.css aliases to --bg-panel2
(#CCD5DA) in the light theme. So the "dark panel" token is currently light.
NOTE for the record: this file's previous `body .er-sec {background:
--u-canvas}` rules never applied at all — they lost to the ID rule. They
were dead code, not the cause. They are gone now either way.
Its ink is ALREADY on-dark (`color: var(--bto-on-c)` → --fg-on-dark), so
restoring the ground actually RESOLVES a latent mismatch rather than
creating work. The section's content is six photographs, which hold their own
luminance and read on any ground. Position 4 of 6 — two-thirds down, right
before the close — is where the reference puts its dark showreel.
Beats `#engine.er-sec` (1,1,0) with (1,1,1). No !important required. */
body #engine.er-sec {
background: var(--u-ink);
color: var(--u-on-dark);
}
/* the head and its eyebrow were inked for the light grey — flip them */
body #engine.er-sec .er-head,
body #engine.er-sec .heading-title,
body #engine.er-sec .er-kick {
color: var(--u-on-dark);
}
/* the six tile chips are a dark pill on a photo; on the new dark ground their
hairline disappears. Lift the border, keep the pill (see §8 note on the two
chip languages still shipping). */
body #engine.er-sec .er3-tag {
color: var(--u-on-dark);
background: rgba(19, 24, 27, .82);
border-color: rgba(240, 238, 235, .28);
}
/* ---------- 7 · surfaces -------------------------------------------------- */
/* Only the genuinely light sections are re-grounded to the warm canvas. The
hero and the Engine Room keep their dark treatment — matching the reference
means matching its light/dark RHYTHM, not flattening the page to one tone.
`.er-sec` is deliberately absent from this list. */
body .project-area,
body .fq-sec,
body .bto-rail-block {
background-color: var(--u-canvas);
}
/* ==========================================================================
8 · THE ACCENT BUDGET — amber rarely and large, never often and small
==========================================================================
Measured 42 accent-bearing elements on this page against 7 on the reference.
The overspend was entirely this file's own earlier pass, which had made every
work-card chip (20×) and every lane-rail button (14×) an amber pill. At 11px
and 10.4px those are not a brand device, they are a UI control that happens
to be yellow. Both are demoted below; the hero slab and the one nav CTA stay.
⚠ OPEN, NOT DECIDED HERE: the page ships TWO chip languages — `.er3-tag`
(dark pill, Engine Room) and `.bto-work-cap .tag` (work cards). Making the
work chips achromatic moves them toward the dark-pill language but does not
merge them. Which one survives is a founder call; flagged in the report. */
body .bto-work-cap .tag {
background: transparent;
color: var(--u-ink);
border: 1px solid rgba(19, 24, 27, .22);
border-radius: 40px;
padding: 4px 12px;
font-family: var(--u-display);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 11px;
}
body .bto-work-cap h4 {
font-family: var(--u-display);
text-transform: uppercase;
letter-spacing: -0.005em;
font-weight: 700;
}
/* the 14 lane-rail "Open service" buttons become ghost pills.
NOTE: no border-radius here on purpose. `.bto-banner .bto-pw-btn` already
sets `var(--pin-r-full, 9999px)` — a token that MEANS "fully round" and
renders identically to 40px on a 44px-tall element. Declaring 40px at lower
specificity would be dead code; declaring it at higher specificity would
replace a semantic token with a magic number for zero visible gain. */
body .bto-pw-btn {
background: transparent;
color: var(--u-ink);
border: 1px solid rgba(19, 24, 27, .28);
padding: 8px 18px;
font-family: var(--u-display);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
body .bto-pw-btn svg { fill: var(--u-ink); }
/* The standing amber action needs NO rule here: palette.css:422-428 already
paints `.btn.btn--primary` / `.bto-nav-cta` with
`background: var(--pin-primary) !important` and --pin-primary resolves to
#FFBF65. Declaring it again would be dead code that merely LOOKS load-bearing.
Verified by reading the computed value, not by assuming this file won.
The problem is that the same class also carries the footer's FOUR social
links — so palette's rule was minting four more 32px amber slivers, the exact
"medium and often" failure the accent law forbids. A social link is not a
primary action.
⚠️ !important REQUIRED, and this is the only one in the file. Forced by
palette.css:422 `.btn.btn--primary { background: … !important }`. Specificity
alone cannot beat an !important declaration, so this matches it at (0,3,1). */
body .social-area .btn.btn--primary,
body .social-area li a.btn {
background: transparent !important;
border-color: var(--u-pill-bd) !important;
color: var(--u-pill-ink) !important;
}
/* ---------- 9 · body prose ----------------------------------------------- */
/* Prose only. Nav, buttons, chips and the logo stay on Neue Montreal — the
reference sets those in Neue Montreal too, so they are already correct and
moving them would be a regression, not a match. */
body .bto-rv-w,
body .bto-work-lead,
body .bto-footer-lead,
body .bto-pw-desc,
body .fq-a p,
body .hbv-copy p,
body .er-sec p,
body .project-area p,
body .fq-sec p {
font-family: var(--u-prose);
}
/* ---------- 10 · radii ---------------------------------------------------- */
/* The reference runs two values: 40px pills and 28px cards. This page was
running eleven (16, 20, 24, 32, 45, 50%, 99, 9999, 37.374, and two partials).
Pulling the card family to 28 and the pill family to 40 is most of what makes
a component set read as one system. */
body .bto-pw-card {
border: none;
overflow: hidden;
}
/* the lane cards' radius is pinned by `.bto-banner .bto-pw-card` (0,2,0) inside
a `min-width:993px` query. Matched here at (0,2,1) INSIDE THE SAME QUERY so
the mobile card keeps its own smaller 16px — the reference's small-card
radius — instead of inheriting a desktop number. */
@media (min-width: 993px) {
body .bto-banner .bto-pw-card { border-radius: 28px; }
}
body .bto-media,
body .swiper-slide .bto-media {
border-radius: 28px;
overflow: hidden;
}
body .btn,
body .back-to-top,
body .bto-nav-btn,
body .bto-rail-nav .bto-nav-btn { border-radius: 40px; }
body .bto-pw-eyebrow { color: var(--u-navy); }
/* the FAQ question rows join the display register */
body .fq-sec .fq-q,
body .fq-sec h3 {
font-family: var(--u-display);
text-transform: uppercase;
letter-spacing: -0.005em;
}
/* ==========================================================================
11 · SECTION HEADS — from LABEL to DESTINATION
==========================================================================
The gap a computed-style diff cannot see. On the reference, `WORK / THAT /
SHIPPED` occupies a whole viewport at ~250px across three offset lines — you
scroll THROUGH the headline. Here, `06 — QUESTIONS / STRAIGHT ANSWERS.` gets
the top-left corner at 66px with 38px of air before the first row, and the
right half of the viewport empty. Same face, same colour, different RANK.
Full parity is the rebuild the founder rejected. This is the cheapest
available approximation: roughly 2.5× the air, roughly 2× the head.
⚠️ THIS BLOCK IS THE PAGE'S HEIGHT BUDGET. It is the ONLY thing in this file
that materially changes page height, and it does so ON PURPOSE. Everything
above it costs +2px in total. If the page needs to come back down, tighten
the three clamps here — nothing else in this file needs to move. A halfway
setting that keeps most of the effect:
padding-block: clamp(96px, 12vh, 150px)
.fq-list margin-top: clamp(56px, 7vh, 100px)
head font-size: clamp(48px, 7vw, 110px)
Specificity: beats `#engine.er-sec` / `#faq.fq-sec` (1,1,0) and
`#faq .ms-ah-wrapper .content__title` (1,2,0) — mokko-bridge § P5.1 / M2. */
body #engine.er-sec,
body #faq.fq-sec {
padding-block: clamp(120px, 18vh, 220px); /* from a flat 64px */
}
body #faq .fq-list {
margin-top: clamp(72px, 10vh, 140px); /* from 38px */
}
/* The three section heads mokko-bridge § M2/P5.6 deliberately pinned to ONE
expression, `clamp(40px, 4.6vw, 68px)`, "so the two scale together at every
width". Keeping them on one expression respects that; only the numbers move.
The banner head is NOT in this list — it is a panel headline with a rail
beneath it, not a section label, and its width is already committed. */
body #faq .ms-ah-wrapper .content__title,
body #work.bto-work .ms-ah-wrapper .content__title,
body #engine.er-sec .er-head {
font-size: clamp(56px, 9vw, 150px); /* from clamp(40px,4.6vw,68px) */
}
/* ==========================================================================
12 · INK, NOT BLACK — and three selectors that need to reach further
==========================================================================
The reference uses pure #000000 for exactly NOTHING. Every dark glyph on it
is #13181B. This page was rendering its display heads, its rail titles and
its brand-strip names in true black, inherited from Mokko's base
`h1,h2,h3,h4,h5,h6 { color: var(--color-contrast-higher) }`. At display scale
that difference is small per-glyph and large per-page: true black on a warm
#F0EEEB canvas reads colder and harder than the reference does.
Scoped to the heads that sit on LIGHT grounds only. `.er-head` is excluded —
it is on the dark panel now and already carries on-dark ink. `.hbv-copy h1`
is excluded — it is white type over video. */
body #work.bto-work .ms-ah-wrapper .content__title,
body #faq .ms-ah-wrapper .content__title,
body .bto-banner .bto-banner-title,
body .bto-rail-title,
body .bto-rail-head .bto-rail-title {
color: var(--u-ink);
}
/* 12b · the work-card chips. §8 demoted them off amber, but their TYPE spec
was still losing: `#work.bto-work .bto-work-cap .tag` (1,3,0) pins
font-family:inherit and `#work .bto-work-cap .tag` (1,2,0) pins the colour.
Restated at (1,3,1) so the achromatic pill actually gets the label register
it was specified with. */
body #work.bto-work .bto-work-cap .tag {
font-family: var(--u-display);
color: var(--u-ink);
background: transparent;
border: 1px solid rgba(19, 24, 27, .22);
}
/* 12c · REGRESSION GUARD — `.heading-title` is a