/* ============================================================================ p21.css — SUBPAGE LAYOUT LAYER · v2 (Zara Consult preview, 2026-07) Rebuilt to HOMEPAGE scale: monumental serif display type, full-bleed navy / tint / cream bands alternating with contained white content, cobalt #011E93 on white, red #990000 primary CTA only, radius 0, no shadows, generous rhythm. The client called the old subpages "really plain and basic — the big, bold, wide sections of the homepage are not present"; this layer answers that. Loaded LAST, after zara→lab→v14→v15→v16→v17→v18→v20, so the hv20-* header styles (in v20.css) are available on every subpage. Every selector here is scoped under a .p21- class (plus the three builder-annotation helpers .p21-note / .not-original / .p21-seo) — nothing leaks into the shared .hv20- header or the footer. Reuses the zara.css token layer: --blue #011E93 fg · --navy #0D1F3C dark bands · --red #990000 (primary CTA only) · --serif display · --tint / --tint-2 / --line / --muted / --pad. Radius 0 everywhere. body{overflow-x:clip} is already set by v15.css. RHYTHM MODEL (matches home): full-bleed BANDS (navy / tint / cream / media) stack flush edge-to-edge; CONTAINED white sections carry their own padding-block. Inner content is constrained by .p21-wrap (max 1200px). ============================================================================ */ /* ----------------------------------------------------------------- RHYTHM --band = THE section rhythm. One value, so every seam between two padded bands is exactly 2x it and no two seams on the site disagree. Before this existed each band picked its own clamp — .p21-list 112px, .p21-cta 96px, .p21-proof 104px, .p21-facts 80px, .p21-statement 112px at 1440 — so the gap the eye reads changed depending on WHICH two bands happened to meet: 112px in one seam, 224px in the next, 259px at another. George on /company-formation: the intro-to-list gap "is awful", and should read like the hero-to-section gap. That reference gap was 184px, which is 2 x 92px, hence the 5.75rem ceiling below. Full-bleed colour bands (.p21-split) stay flush by design — the colour edge marks the boundary, so they need no whitespace around them. That is the rhythm model already described at the top of this file; only the numbers had drifted away from it. Change the seam site-wide by changing this ONE value. Verify with node tools/measure-rhythm.mjs, which prints every seam as rendered. */ :root{--band:clamp(3.5rem,6.4vw,5.75rem)} /* SAME-COLOUR SEAMS — a colour change earns the full seam; a continuous field does not. .cf21-q is --paper and .cf21-list is #fff: identical. So on accounting / company-formation / freelancers / registered-address those two bands are one unbroken white field, and the full 2x--band seam lands where the eye can see no section boundary at all — which is why that gap read as dead space even after the seams were equalised. Dropping the following band's top padding leaves one --band of air: half the section seam, a clean 2:1 between "new section" and "next block in the same section". Kept deliberately narrow — only pairs that are genuinely the same colour. .p21-list.tint and every navy band still take the full seam. */ .cf21-q + .p21-list:not(.tint){padding-top:0} .p21-body + .p21-cards{padding-top:0} /* Added 2026-07-26. Same reason, a third genuinely-white pair: .p21-body and .p21-cta are both --paper (which is literally #fff), so the full seam fell inside an unbroken white field with nothing marking a boundary. Live on /about and /careers. :not(.tint) on both sides so a page that tints either band keeps its full seam. */ .p21-body:not(.tint) + .p21-cta:not(.tint){padding-top:0} /* Shared inner container — constrains content inside a full-bleed band. */ .p21-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} /* Small-caps cobalt eyebrow, sits above a hero H1 or a section H2. */ .p21-eyebrow{display:block;font-family:var(--sans);font-weight:500;font-size:.8rem; letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem} /* ------------------------------------------------------------------ HERO Monumental page hero. White by default; .tint = pale cobalt band; .media = background photo (inline style) + scrim + white text, content bottom-aligned. */ /* ⚠ The top pad clears the FIXED two-row glass header, which measures 153px at desktop (70px on mobile). The old value was clamp(4.5rem,9vw,9rem) = 129.6px at 1440, so every page on the stock hero rendered its h1 23px BEHIND the header and read as clipped: /about /services /privacy /terms and both careers roles. Measured 2026-07-25 on the live preview, fixed at the source so no future page inherits the fault. The pages that already looked right (.cf21-hero .blog-hero .c3-hero) set this same clamp themselves and override the base, so raising it cannot reach them. */ .p21-hero{background:var(--paper);padding-block:var(--chrome-clear,clamp(12rem,17vw,15.5rem)) var(--band)} .p21-hero h1{font-family:var(--serif);font-weight:300;color:var(--blue);line-height:1.04; letter-spacing:-.012em;font-size:clamp(2.6rem,5.5vw,4.4rem);max-width:16ch} .p21-hero .p21-lede{color:var(--blue);font-weight:300;max-width:58ch; margin-top:clamp(1.2rem,2.5vw,1.8rem);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;letter-spacing:.015em} .p21-hero.tint{background:var(--tint)} .p21-hero.media{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:55vh;background-color:#0a1830;background-size:cover;background-position:center;overflow:hidden; padding-block:clamp(3rem,7vw,6rem) var(--band)} .p21-hero.media::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,31,60,.15) 0%,rgba(13,31,60,0) 30%,rgba(10,22,46,.72) 100%)} .p21-hero.media .p21-wrap{position:relative;z-index:2} .p21-hero.media h1,.p21-hero.media .p21-eyebrow{color:#fff} .p21-hero.media .p21-lede{color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(8,18,38,.45)} /* ------------------------------------------------------------------ SPLIT Full-bleed two-column band (mirrors home's .split): media flush to one edge, text padded and vertically centred. .rev flips sides. .navy = navy band with white text. .tint = pale tint on the text column. Stacks below 900px, media first. Markup: .p21-media (img/video) + .p21-txt (h2 + p + optional dotlink). */ .p21-split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--paper)} /* 2026-07-24: the media is a positioning context and the img/video is taken OUT of flow. Before this, a PORTRAIT file drove the band's height: the img had height:100%, but a percentage height against an auto-height parent resolves to auto, so the image rendered at its own aspect (720x1080 for a 2:3 file) and dragged the whole row with it — sofia-cathedral and the two portrait team shots blew four bands out to 1080px. Out of flow, the image can no longer grow the container, so the row height comes from min-height and the text column as intended, and object-fit:cover crops to fill. Landscape images are unaffected: they were already shorter than the clamp. */ .p21-split .p21-media{min-height:clamp(420px,44vw,600px);overflow:hidden;background:var(--tint);order:0;position:relative} .p21-split.rev .p21-media{order:1} /* a team portrait in a split or a card frames the head, not the waist: centred, /services cut the payroll portrait at the chin and /careers both job cards at the eyes (2026-10-06). :where keeps it below page rules (about's hero sets its own). */ :is(.p21-split .p21-media,.p21-card-img) img:where([src*="/img/team/"]){object-position:50% 12%} .p21-split .p21-media img,.p21-split .p21-media video{position:absolute;inset:0; width:100%;height:100%;object-fit:cover;display:block} .p21-split .p21-txt{display:flex;flex-direction:column;justify-content:center; padding:clamp(2.4rem,5.5vw,5.5rem)} .p21-split .p21-txt h2{font-family:var(--serif);font-weight:300;color:var(--blue);line-height:1.1; letter-spacing:-.01em;font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:18ch} .p21-split .p21-txt p{color:var(--blue);font-weight:300;font-size:1.075rem;line-height:1.65; margin-top:1.2rem;max-width:48ch} .p21-split .p21-txt .dotlink{margin-top:1.8rem} .p21-split.tint .p21-txt{background:var(--tint)} .p21-split.navy{background:var(--navy)} .p21-split.navy .p21-txt h2{color:#fff} .p21-split.navy .p21-txt p{color:rgba(255,255,255,.86)} .p21-split.navy .p21-txt .dotlink{color:#fff} .p21-split.navy .p21-txt .dotlink::before{background:#fff} .p21-split.navy .p21-txt a:not(.btn):not(.dotlink){color:#fff;border-bottom:1px solid rgba(255,255,255,.5)} @media (max-width:900px){ .p21-split,.p21-split.rev{grid-template-columns:1fr} .p21-split .p21-media,.p21-split.rev .p21-media{order:-1;min-height:clamp(240px,60vw,380px)} } /* ------------------------------------------------------------------ LIST Full-bleed pale-tint band. The