/* ============================================================================ contact-mph.css — the shared MPH layout system, contact.html's copy. Founder, 2026-08-06: "can you go thru all our pages and do these changes and make everything look and position the same". Loaded LAST on contact.html, gated on `body.bto-mph-c`. Its partner is bto-css/bto-about-grounds.css (navy token + on-dark hero H1), linked above. ── THE SITE SCALE, SETTLED HERE ─────────────────────────────────────────── Contact was the LAST page with no pass at all: measured at 2560 its text sat at x=44 while About and Founder sat at 640, and its headings ran 52 / 62 / 90 against their 48. This file brings it onto the same system every other static page now uses: shell 1280 inside an 80px gutter (max-width 1440, centred) h1 60 / 1.05 h2 48 / 1.05 h3 30 / 37.5 eyebrow 14 / 20, w600, ls .32em, uppercase lead 16 / 32 body 16 / 28 labels 14 / 20, w600 padding 80 / 80 per band, hero 144 / 80 🔴 THE SHELL IS A max-width WRAPPER, NEVER A FLAT PADDING ON A FULL-BLEED BOX. This is the trap that cost a whole round on /services: a flat 80px gutter matches a centred 1440 wrapper at EXACTLY 1440 and nowhere else — at 2560 the wrapper's edge is 640 and the flat one is still 80. Every band here is a wrapper, so the edge tracks correctly at any width. If anything on this page ever needs to bleed and still line up, it takes `max(80px, calc((100vw - 1280px) / 2))`, not 80px. ========================================================================== */ /* ========================================================================== §1 · THE SHELL ========================================================================== */ body.bto-static.bto-mph-c .container { max-width: 1280px; padding-inline: 0; margin-inline: auto; width: 100%; } body.bto-static.bto-mph-c .bto-panel > .container, body.bto-static.bto-mph-c .bto-static__body { padding-inline: 80px; max-width: 1440px; } body.bto-static.bto-mph-c .bto-static__body > .bto-panel { padding-inline: 0; } /* ========================================================================== §2 · THE RHYTHM ========================================================================== 🔴 The hero closes at 80, not 0. MPH's own hero is `pb-0` because their page is one continuous ground — a flush close is invisible there. Ours changes ink → navy at that seam, so a 0 bottom stops the ink a few pixels under the lead while 80px of navy sits above the next eyebrow. Same correction About and Founder carry. */ body.bto-static.bto-mph-c .bto-panel.bto-static__sec, body.bto-static.bto-mph-c .bto-panel { padding-block: 80px; } body.bto-static.bto-mph-c .page-header-content.bto-panel { padding-block: 144px 80px; } /* ========================================================================== §3 · THE TYPE SCALE ========================================================================== Contact was 52 / 62 / 90 across its headings. It uses BOTH `.svc-sec-head` and `.content__title` for section heads (2 and 3 of them), and BOTH `.bto-eyebrow` and `.svc-sec-eyebrow` for kickers — so both of each are listed or half the page would silently keep its old size. Checked against the markup, not assumed. */ body.bto-static.bto-mph-c .bto-panel .svc-sec-eyebrow, body.bto-static.bto-mph-c .bto-panel .bto-eyebrow { display: block; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; margin: 0 0 20px; color: var(--fg-accent); } /* The dark-gold text token is unreadable on ink and navy; the fill token is the accent's on-dark form. Without this the eyebrows measure ~2.6:1 on ink and ~1.7:1 on navy — the exact regression this rule's twin fixed on founder.css. */ body.bto-static.bto-mph-c .bto-panel--dark .svc-sec-eyebrow, body.bto-static.bto-mph-c .bto-panel--dark .bto-eyebrow, body.bto-static.bto-mph-c .bto-panel--navy .svc-sec-eyebrow, body.bto-static.bto-mph-c .bto-panel--navy .bto-eyebrow { color: var(--fill-accent); } body.bto-static.bto-mph-c .page-header-content .page-header__title { font-size: 60px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 24px; max-width: none; } body.bto-static.bto-mph-c .bto-panel .svc-sec-head, body.bto-static.bto-mph-c .bto-panel.bto-static__sec .content__title, body.bto-static.bto-mph-c .bto-panel .content__title { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 20px; } body.bto-static.bto-mph-c .bto-static__lead { font-size: 16px; line-height: 32px; max-width: 768px; margin: 0; } body.bto-static.bto-mph-c .bto-support, body.bto-static.bto-mph-c .bto-prose p, body.bto-static.bto-mph-c .bto-panel .bto-row__line { font-size: 16px; line-height: 28px; max-width: 56em; } body.bto-static.bto-mph-c .bto-panel .bto-row__label, body.bto-static.bto-mph-c .bto-static__link, body.bto-static.bto-mph-c .p2-cta { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: normal; } /* Bare list items are not in bto-static.css's on-dark block (it covers `p`, `.bto-row__line`, `.bto-stat__label`), so on ink and navy they inherit `--fg-ink` and vanish. The navy half lives in bto-about-grounds.css; this is the ink half, which that sheet does not own. */ body.bto-static.bto-mph-c .bto-panel--dark li { color: var(--fg-on-dark-mute); } /* ========================================================================== §4 · THE FORM ========================================================================== `cf-*` is contact's own form namespace (19 hooks). Only the type is touched — field sizing, focus rings and the honeypot are bto-contact.css's and are left exactly as they are. 16px on inputs is also what stops iOS Safari zooming the viewport on focus, so it is a functional floor, not a taste call. */ body.bto-static.bto-mph-c .bto-panel input, body.bto-static.bto-mph-c .bto-panel textarea, body.bto-static.bto-mph-c .bto-panel select { font-size: 16px; line-height: 28px; } body.bto-static.bto-mph-c .bto-panel label { font-size: 14px; line-height: 20px; font-weight: 600; } /* ========================================================================== §5 · NARROW — stepped at the same breakpoints as every other page ========================================================================== */ @media (max-width: 991px) { body.bto-static.bto-mph-c .bto-panel > .container, body.bto-static.bto-mph-c .bto-static__body { padding-inline: 40px; } body.bto-static.bto-mph-c .bto-panel.bto-static__sec, body.bto-static.bto-mph-c .bto-panel { padding-block: 64px; } body.bto-static.bto-mph-c .page-header-content.bto-panel { padding-block: 112px 64px; } body.bto-static.bto-mph-c .page-header-content .page-header__title { font-size: 44px; } body.bto-static.bto-mph-c .bto-panel .svc-sec-head, body.bto-static.bto-mph-c .bto-panel .content__title { font-size: 36px; } } @media (max-width: 575px) { body.bto-static.bto-mph-c .bto-panel > .container, body.bto-static.bto-mph-c .bto-static__body { padding-inline: 24px; } body.bto-static.bto-mph-c .page-header-content .page-header__title { font-size: 34px; } body.bto-static.bto-mph-c .bto-panel .svc-sec-head, body.bto-static.bto-mph-c .bto-panel .content__title { font-size: 28px; } } /* ── THE CTA ON A NAVY GROUND ────────────────────────────────────────────── 🔴 Measured 1.55:1 after #contact-form went navy. bto-about-grounds.css restores `--fg-on-dark` for `a` and `--fg-on-accent` for `.p2-cta--primary`, but the element here is NOT an anchor, so neither rule reached it and it kept `--fg-ink` on #003A6C. Any `.p2-cta` that is not the amber one takes the on-dark ink; the primary is excluded because ink-on-amber is correct. */ body.bto-static.bto-mph-c .bto-panel--navy .p2-cta:not(.p2-cta--primary), body.bto-static.bto-mph-c .bto-panel--dark .p2-cta:not(.p2-cta--primary) { color: var(--fg-on-dark); } /* 🔴 AND THE DISABLED SUBMIT NEEDS AN ID IN THE SELECTOR TO BE REACHED. The rule above is (0,5,1) and still lost: bto-contact.css ships `.bto-static #contact-form .bto-form__submit[disabled] { color: var(--fg-ink) }`, and ONE id outweighs any number of classes. That ink was right on the old #CCD5DA panel; on navy the "[FORM NOT LIVE — EMAIL US]" button measured 1.55:1. Matching the id and adding classes is what wins — no !important. */ body.bto-static.bto-mph-c #contact-form .bto-form__submit[disabled], body.bto-static.bto-mph-c #contact-form .bto-form__submit { color: var(--fg-on-dark); } /* ========================================================================== §6 · THE VERTICAL RHYTHM — the "uneven spacing" ========================================================================== Founder: "there is alot of uneven spacing and other stuff". Measured, eyebrow → heading across the six bands: contact-hero 20px contact-send 80px contact-details 20px contact-next 80px contact-form 20px contact-mechanism 80px The split is not random and it is not the eyebrow. §3 sets the eyebrow's `margin-bottom: 20px`, and it holds — but three bands wrap their heading in `.ms-ah-wrapper`, which carries a top margin of its own that the eyebrow's 20 then sits on top of. Same fault one level down: heading → next block came back 26 · 44 · 60 · 60 · 66, five different numbers for one relationship, and two pairs were touching at 0. One ladder, applied to the wrapper as well as the parts: eyebrow → heading 20 heading → body 24 body block → body 24 `.ms-ah-wrapper` is zeroed so it stops contributing a second gap; it is a presentational wrapper, not a spacer. */ body.bto-static.bto-mph-c .bto-panel .ms-ah-wrapper { margin: 0 0 24px; } body.bto-static.bto-mph-c .bto-panel .svc-sec-head, body.bto-static.bto-mph-c .bto-panel .content__title { margin: 0 0 24px; } /* The two 0px collisions — `.bto-mail → .bto-rows` and `.bto-steps → .bto-prose`. A margin on the following sibling rather than a bottom margin on the first, so a band that ends on one of these does not gain a trailing gap inside its 80px padding. */ body.bto-static.bto-mph-c .bto-panel .bto-mail + *, body.bto-static.bto-mph-c .bto-panel .bto-rows + *, body.bto-static.bto-mph-c .bto-panel .bto-steps + *, body.bto-static.bto-mph-c .bto-panel .bto-list + *, body.bto-static.bto-mph-c .bto-panel .bto-support + * { margin-top: 24px; } /* `.bto-mail` is the display email address — 56px, a size the 60/48 ladder does not contain. It is a link, not a heading, so it takes the h2 step rather than inventing a seventh size. */ body.bto-static.bto-mph-c .bto-mail { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; } /* ========================================================================== §7 · THE FORM — "other stuff" ========================================================================== Measured at 1440: the form was 516px wide inside a 1280 column, so 764px — 60% of the band — sat empty beside it, and six full-width fields stacked to 823px of height. The fields also carried `border-radius: 40px`. 🔴 40px IS THE CTA PILL RADIUS, NOT A SURFACE RADIUS. `.p2-cta` is 40px because it is a pill; every SURFACE on this site is 14px (the work tiles, the founder cards, the capability cards). A 58px-tall input at 40px radius is a pill too, which is why the fields read as six buttons rather than six inputs. 14px here; the submit KEEPS its 40 — it really is a pill. Two columns for the short fields, full width for the message, which is the ordinary shape of a contact form and takes the block from 823px to roughly half that. `:has(textarea)` picks the message by what it CONTAINS rather than by position, so re-ordering the fields cannot silently break the span — `:has()` is already used in bto-static.css:258, so this is not a new dependency. */ body.bto-static.bto-mph-c .bto-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 24px; max-width: 860px; width: 100%; } body.bto-static.bto-mph-c .bto-form__field:has(textarea), body.bto-static.bto-mph-c .bto-form__note, body.bto-static.bto-mph-c .bto-form .p2-cta { grid-column: 1 / -1; } body.bto-static.bto-mph-c .bto-form__field { min-width: 0; } body.bto-static.bto-mph-c .bto-form input, body.bto-static.bto-mph-c .bto-form select, body.bto-static.bto-mph-c .bto-form textarea { width: 100%; border-radius: 14px; } /* The submit is a pill and stays one — but it must not stretch across both columns just because its grid area does. */ body.bto-static.bto-mph-c .bto-form .p2-cta { justify-self: start; border-radius: 40px; } @media (max-width: 767px) { body.bto-static.bto-mph-c .bto-form { grid-template-columns: 1fr; } } /* 🔴 ONE SOURCE FOR THE GAP, OR THE LADDER RE-SPLITS. After §6 the remaining spread was 24 / 30 / 48 / 56, and every outlier traced to a block carrying its OWN margin on top of the `+ *` rule: svc-sec-head → bto-mail 30 = head mb 24 + mail mt 6 (in #contact-form) 48 = head mb 24 + mail mt 24 bto-mail → bto-form 56 = mail mb 32 + form mt 24 bto-support → bto-list 28 = support mb 28 (adjacent margins collapse to the larger, so the 24 never showed) Zeroing the blocks' own vertical margins leaves the `+ *` rule as the only thing setting a gap, which is what makes it one number instead of five. ⚠ The CONTAINERS are zeroed, never their children — `.bto-prose p` keeps its own paragraph spacing, which is a different relationship. */ body.bto-static.bto-mph-c .bto-panel .bto-mail, body.bto-static.bto-mph-c .bto-panel .bto-rows, body.bto-static.bto-mph-c .bto-panel .bto-steps, body.bto-static.bto-mph-c .bto-panel .bto-list, body.bto-static.bto-mph-c .bto-panel .bto-support, body.bto-static.bto-mph-c .bto-panel .bto-prose { margin-top: 0; margin-bottom: 0; } body.bto-static.bto-mph-c .bto-panel .bto-mail { display: block; } /* 🔴 AND THE SIBLING RULE HAS TO COME AFTER THE ZEROING, NOT BEFORE. The block above sets `margin-top: 0`; §6's `+ *` rule sets `margin-top: 24px` at the SAME specificity but EARLIER in the file, so the zero won and every gap it was meant to create collapsed to 0. Restated here, last, where it wins. `.bto-form` joins the zeroed set — it carried its own 32px top margin, which was the last odd number left (bto-mail → bto-form measured 32). */ body.bto-static.bto-mph-c .bto-panel .bto-form { margin-top: 0; margin-bottom: 0; } body.bto-static.bto-mph-c .bto-panel .bto-mail + *, body.bto-static.bto-mph-c .bto-panel .bto-rows + *, body.bto-static.bto-mph-c .bto-panel .bto-steps + *, body.bto-static.bto-mph-c .bto-panel .bto-list + *, body.bto-static.bto-mph-c .bto-panel .bto-support + *, body.bto-static.bto-mph-c .bto-panel .bto-prose + * { margin-top: 24px; } /* ⚠ inline-block, NOT block. `display: block` made the email's underline span the full 1280 column instead of hugging the address — the rule is only there so vertical margins apply, and inline-block gives that without the box growing to the container. */ body.bto-static.bto-mph-c .bto-panel .bto-mail { display: inline-block; } /* 🔴 CORRECTION TO THE CORRECTION: `display: block; width: fit-content`. `inline-block` fixed the full-width underline but put the email back on a TEXT BASELINE, so its line box added leading below the glyphs and the gaps measured 48 and 56 again — an inline-level box cannot give clean block margins. `block` restores the margin behaviour, `fit-content` keeps the box (and therefore the underline) the width of the address. */ body.bto-static.bto-mph-c .bto-panel .bto-mail { display: block; width: fit-content; max-width: 100%; } /* The last odd number: `.bto-mail → .bto-form` held 32 against everything else's 24. bto-contact.css sets it through `#contact-form`, and an id beats the class-only `+ *` rule above — the same arithmetic as the disabled submit. Matched at id level so the ladder is finally one value. */ body.bto-static.bto-mph-c #contact-form .bto-form { margin-top: 24px; } /* 🔴 THE FORM LABELS WERE 1.68:1 — SIX OF THEM. bto-contact.css paints `