/* SPONSR site — src/css/pages2.css
   Page-specific rules for the second page-build wave: business-club, how-we-work,
   for-your-accountant, talk-to-us, privacy, terms, 404. site.css (and pages.css)
   are owned elsewhere — nothing here overrides the v1 grammar; it only adds the
   DOM document artefacts and small per-page seams.
   Same law as site.css: flat, square, opaque — no radius, no shadow, no blur. */

/* The accent word inside the black heading slab stays signal lime: the slab is a
   black ground even inside a white section, where the readable-tone override
   (--accent-text) would fail against it. */
.s-white .slab .ac, .s-grey .slab .ac { color: var(--accent); }

/* A duotone half-bleed photo (.half__photo.duo, business-club): .duo's own
   `position: relative` (site.css, later in the cascade) silently beats
   .half__photo's `position: absolute` and drops the photo into the flow at
   natural size. Restore the half-bleed placement on desktop only — under
   1024px the stacked relative layout is the intended one. */
@media (min-width: 1024px) { .half__photo.duo { position: absolute; } }

/* Same cascade trap for a film inside a photo section (.ph__media.film, how-we-work
   hero): .film's `position: relative` (later in site.css) beats .ph__media's
   `position: absolute` and drops the film into the flow below the headline.
   The media block always covers the section. */
.ph__media.film { position: absolute; }

/* And for the duotone strip frame (.frame.duo): `.strip .frame img` re-specifies the
   broadcast-grade filter at higher specificity than `.duo img`, which silently keeps
   the frame in full colour. Restore the T4 duotone. */
.strip .frame.duo img { filter: grayscale(1) contrast(1.15); }

/* (Removed 18 Sep 2026) The for-your-accountant dark-nav variant is gone: the header bar is
   now a solid black bar on every page (site.css §header), so nav type is always white. */

/* ---------------------------------------------------------------- legal / document sections
   (privacy, terms, and the grey row blocks): repeated heading + prose blocks with a
   hairline seam between them, so flat pages still carry ruled density. */
.sec-block + .sec-block { margin-top: 64px; border-top: 1px solid var(--g4); padding-top: 56px; }
.s-black .sec-block + .sec-block { border-color: var(--g1); }
.sec-block h2 + .prose, .sec-block h2 + .rows { margin-top: 24px; }

/* the flat slab close (quiet pages): the panel sits below the slab words like the wash close */
.s-white .slabs + .panel, .s-grey .slabs + .panel { margin-top: 40px; }

/* two-column prose that spans the document width (accountant boundary section) */
.cols-2--wide { max-width: 1080px; }

/* ---------------------------------------------------------------- document artefacts
   (for-your-accountant aside; the report crop in the how-we-work strip).
   DOM-rendered paperwork: white sheets, hairline rules, Chakra figures, blank
   fill-bars instead of invented facts. Crisp at any DPR. */
/* aspect-ratio: auto kills the phantom box height inherited from the pages.css
   absolute-position variant (dead once .doc went flow-relative here): WebKit kept the
   ratio height and let the docs overflow it, dropping the caption behind the invoice card. */
.doc-stack { position: relative; max-width: 460px; aspect-ratio: auto; }
.doc { position: relative; background: var(--w); color: var(--k); border: 1px solid var(--g4); padding: 32px 28px 36px; }
.doc-stack .doc:first-child { transform: rotate(-1.4deg); z-index: 1; }
.doc-stack .doc + .doc { transform: rotate(1.1deg); margin: -72px 0 0 44px; z-index: 2; }
.doc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.doc__mark { width: 92px; height: auto; }
.doc__ref { font-family: var(--f-figures); font-weight: 600; font-size: var(--caption); letter-spacing: 0.04em; color: var(--g2); }
.doc__title { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.06; letter-spacing: -0.015em; margin-top: 28px; }
.doc__rows { margin-top: 20px; }
.doc__row { display: grid; grid-template-columns: 45% 1fr; align-items: center; column-gap: 16px; padding-block: 12px; border-top: 1px solid var(--g4); }
.doc__row:last-child { border-bottom: 1px solid var(--g4); }
.doc__label { font-family: var(--f-figures); font-weight: 600; font-size: var(--caption); letter-spacing: 0.04em; color: var(--g2); }
.doc__bar { display: block; height: 10px; background: var(--g5); }
.doc__bar--60 { width: 60%; }
.doc__bar--80 { width: 80%; }
.doc__bar--40 { width: 40%; }
.doc-note { margin-top: 40px; }
@media (max-width: 1023px) { .doc-stack { margin-inline: auto; } }
@media (max-width: 767px) {
  .doc { padding: 20px 18px 24px; }
  .doc-stack .doc + .doc { margin: -48px 0 0 20px; }
  .doc__title { font-size: 20px; }
}

/* The strip's report-page crop (how-we-work): the same paperwork language inside a
   .frame, cropped by the frame's fixed height like a page laid on the scanner. */
.strip .frame--doc { background: var(--w); color: var(--k); padding: 40px 32px; }
.frame--doc .doc__title { font-size: clamp(20px, 1.7vw, 28px); }
.frame--doc .doc__stat { font-family: var(--f-figures); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.02em; margin-top: 28px; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .strip .frame--doc { padding: 24px 20px; } }

/* ---------------------------------------------------------------- credits (terms)
   18+ entries: tighter ruled rows than the standard 20px .rows, with real links. */
.rows--credits { margin-top: 40px; max-width: 900px; }
.rows--credits > * { font-size: var(--small); line-height: 1.55; padding-block: 18px; }
.rows--credits a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rows--credits a:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------- 404 route rows */
.route-rows { margin-top: 32px; }
.route-rows a { display: block; text-decoration: none; }
.route-rows a:hover, .route-rows a:focus-visible { color: var(--accent); }

/* ------------------------------------------------- /looking-for-sponsorship: the proposal
   artefact is a photographed asset (gen-13-proposal-desk) — full-width in its column,
   flat and square. The photo carries its own depth; the page adds none. */
.artefact-photo { display: block; width: 100%; height: auto; }