/* SPONSR site — src/css/pages.css
   Page-specific rules for the sales-page rebuild (home, already-backing-a-driver,
   new-to-motorsport, hospitality, every-quarter). site.css carries the grammar and is
   untouched; everything here extends it for page devices and the two /quarterly-report
   artefacts. Same laws: flat, square, opaque — no radius, no shadow, no blur. */

/* ---------------------------------------------------------------- devices */
/* a film filling a photo section's media frame */
.ph__media .film { position: absolute; inset: 0; }

/* crossfade inside a half-bleed (motion.js data-xfade finds .xfade-top anywhere in the section) */
.half__photo .xfade-top { position: absolute; inset: 0; opacity: 0; }
.half__photo .xfade-top img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(1.12); }

/* wider half-bleed prose column where a section carries full paragraphs */
.half__text--wide { max-width: 640px; }

/* buttons on the black half-bleed ground follow the .s-black inversion */
.half--k .btn { background: var(--w); color: var(--k); }
.half--k .btn .stop { color: var(--accent-text); }
.half--k .btn:hover, .half--k .btn:focus-visible { background: var(--k); color: var(--w); }
.half--k .btn:hover .stop, .half--k .btn:focus-visible .stop { color: var(--accent); }

/* slab words on a black ground: white slabs, the accent line lime */
.slabs--wk > span { background: var(--w); color: var(--k); }
.slabs--wk > .slab-ac { background: var(--accent); color: var(--on-accent); }

/* a photo band that only exists for the picture (slab-lift moments) */
.ph--band { min-height: 82svh; }

/* the giant numeral beside prose on black (hospitality circuits, every-quarter report) */
.num-flag { line-height: 0.8; }

/* ------------------------------------------------- the Partnership Report spread (DOM artefact) */
/* stacked crops for the report-flick scrub: crop 1 = the whole spread (the only one without
   JS/motion), crop 2 = the photograph page at 2x, crop 3 = the data page at 2x */
.report-flick { position: relative; overflow: hidden; contain: paint; max-width: 1100px; margin-inline: auto; }
.report-flick .flick__crop { visibility: hidden; }
.report-flick .flick__crop:first-child { position: relative; visibility: visible; }
.report-flick .flick__crop + .flick__crop { position: absolute; inset: 0; overflow: hidden; }
.flick__crop--photo .report-spread, .flick__crop--data .report-spread { width: 100%; }
.flick__crop--photo .report-spread { transform: scale(2); transform-origin: 0 0; }
.flick__crop--data .report-spread { transform: scale(2); transform-origin: 100% 0; }
.is-paused .report-flick .flick__crop:not(:first-child) { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .report-flick .flick__crop:not(:first-child) { visibility: hidden !important; } }

/* the spread itself: two facing pages on a grey mat, document typography at document scale */
.report-spread {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4px, 0.8vw, 10px);
  background: var(--g4); padding: clamp(10px, 2.4vw, 32px);
  font-family: var(--f-body); font-size: clamp(5px, 0.82vw, 11.5px); line-height: 1.45;
  color: var(--k); text-align: left;
}
.report-page { background: #FDFDFB; aspect-ratio: 12 / 15.5; padding: 7% 7.5%; display: flex; flex-direction: column; min-width: 0; }
.report-page > * + * { margin-top: 1.1em; }
.report-rule { height: 1px; background: var(--g4); border: 0; margin: 1.4em 0 0; }
.report-hd { display: flex; justify-content: space-between; gap: 1em; color: var(--g2); font-family: var(--f-figures); font-weight: 600; font-size: 0.95em; letter-spacing: 0.05em; }
.report-mark { width: 9.5em; height: auto; }
.report-title { font-family: var(--f-display); font-weight: 400; font-size: 2.9em; line-height: 1.04; letter-spacing: -0.02em; margin-top: 0.5em; }
.report-sub { color: var(--g2); }
.report-photo { margin-top: 1.4em; }
.report-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.report-note { color: var(--g2); font-size: 0.95em; }
.report-table { width: 100%; border-collapse: collapse; font-size: 1em; }
.report-table th { font-family: var(--f-figures); font-weight: 600; font-size: 0.85em; letter-spacing: 0.05em; color: var(--g2); text-align: left; padding: 0.7em 0.8em 0.5em 0; }
.report-table td { border-top: 1px solid var(--g5); padding: 0.7em 0.8em 0.7em 0; vertical-align: top; }
.report-table td:last-child, .report-table th:last-child { padding-right: 0; }
.report-table .rt-b { font-weight: 700; }
.report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: auto; padding-top: 1.4em; border-top: 1px solid var(--g4); }
.report-stat b { display: block; font-family: var(--f-figures); font-weight: 700; font-size: 3.4em; line-height: 1; font-variant-numeric: tabular-nums; }
.report-stat span { display: block; margin-top: 0.5em; color: var(--g2); font-size: 0.95em; }
.report-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; margin-top: 1.4em; }
.report-thumbs img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.report-ft { display: flex; justify-content: space-between; color: var(--g2); font-size: 0.95em; margin-top: 1.6em; }
.report-page--photo .report-ft { margin-top: auto; padding-top: 1.4em; }

/* the one permitted label near each artefact */
.artefact-note { margin-top: 20px; color: var(--g2); }
.s-black .artefact-note { color: var(--g3); }

/* ------------------------------------------------- the invoice artefact (tilted document stack) */
.doc-stack { position: relative; max-width: 880px; margin-inline: auto; aspect-ratio: 10 / 8.6; }
.doc {
  position: absolute; width: 62%; aspect-ratio: 12 / 14.5;
  background: #FDFDFB; color: var(--k); border: 1px solid var(--g4);
  padding: 4.5% 5%;
  font-family: var(--f-body); font-size: clamp(6px, 0.86vw, 12.5px); line-height: 1.5;
  text-align: left;
}
.doc--agreement { left: 2%; top: 0; transform: rotate(-2.6deg); }
.doc--invoice { right: 2%; bottom: 0; transform: rotate(1.8deg); }
.doc > * + * { margin-top: 1.1em; }
.doc-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.doc-hd .report-mark { width: 8em; }
.doc-kind { font-family: var(--f-figures); font-weight: 700; font-size: 1.05em; letter-spacing: 0.08em; }
.doc-title { font-family: var(--f-display); font-weight: 400; font-size: 2em; line-height: 1.05; letter-spacing: -0.02em; }
.doc-meta { color: var(--g2); font-size: 0.95em; }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table td { border-top: 1px solid var(--g5); padding: 0.65em 0.8em 0.65em 0; vertical-align: top; }
.doc-table td:last-child { padding-right: 0; text-align: right; }
.doc-table .dt-total td { border-top: 1px solid var(--g4); font-weight: 700; }
.doc-redact { display: inline-block; width: 4.6em; height: 0.85em; background: var(--g4); vertical-align: middle; }
.doc-line { height: 1px; background: var(--g5); border: 0; margin: 1.5em 0 0; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; margin-top: 2.2em; }
.doc-sign > div { border-top: 1px solid var(--g4); padding-top: 0.7em; color: var(--g2); font-size: 0.95em; }
@media (max-width: 767px) {
  .doc-stack { aspect-ratio: auto; }
  .doc { position: relative; width: 88%; }
  .doc--agreement { left: 0; margin-inline: auto; }
  .doc--invoice { right: 0; margin: -6% 0 0 auto; }
}

/* a hotter bottom vignette for the one busy bright hero plate (hospitality fallback) —
   still a photographic vignette, nothing else */
body[data-page="hospitality"] .ph--hero .hero__shade-bottom {
  height: 68%;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.78) 22%, rgba(10, 10, 10, 0.45) 58%, rgba(10, 10, 10, 0) 100%);
}

/* ---------------------------------------------------------------- small layout helpers */
.route + .route { margin-top: 0; }
.route > * + * { margin-top: 20px; }
@media (max-width: 1023px) { .route + .route { margin-top: 48px; } }
.band-cta { margin-top: 48px; }

/* A button that closes a band of rows needs air above it and below it — on the black
   four-steps band it used to sit flush on the photo strip beneath (Jeff, 18 Sep 2026). */
.cta-row { margin-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(8px, 1.5vw, 24px); }

/* ================================================================== HOME =============== */

/* ---------------------------------------------------------------- the hero reel
   Three hard cuts of cars and bikes behind the message. The footage is pulled back —
   desaturated and scrimmed — so the headline, the lead and the one button read instantly.
   Both amounts are tunable from right here. */
body[data-page="home"] .ph--hero { --hero-grey: 0.82; --hero-scrim: 0.26; }
body[data-page="home"] .ph--hero .ph__media img,
body[data-page="home"] .ph--hero .ph__media video {
  filter: grayscale(var(--hero-grey)) contrast(1.16) saturate(0.85) brightness(0.97);
}
body[data-page="home"] .ph--hero .ph__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #15171A; opacity: var(--hero-scrim);
}
/* A deeper bottom vignette under the message, so the contrast the headline needs comes from
   the text band rather than from flattening the whole frame — shot 2 (the bike) puts a pale
   fairing right where the H1 sits. Still a photographic vignette, nothing else. */
body[data-page="home"] .ph--hero .hero__shade-bottom {
  height: 66%;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.82) 20%, rgba(10, 10, 10, 0.5) 58%, rgba(10, 10, 10, 0) 100%);
}
/* the message column: a shorter measure than the 820px default so the lead holds two lines */
body[data-page="home"] .ph--hero .lead { max-width: 660px; }

/* ---------------------------------------------------------------- Why use SPONSR
   Three full-width rows, one per pain point. Each pairs a half-bleed photograph (alternating
   left / right / left, running to the page edge) with an outlined lime numeral, the pain
   sentence at display scale and the answer at reading measure. No cards, no boxes. */
.why { position: relative; padding-block: var(--section) clamp(48px, 6vw, 96px); overflow: hidden; }
.why__head { margin-bottom: clamp(32px, 3.4vw, 56px); }
.why__head h2 { font-size: clamp(36px, 2.6vw + 18px, 64px); max-width: none; }
.why__row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  --pad-in: clamp(40px, 5.6vw, 88px);
}
/* the hairline that opens each row: full width, so it rules across the photograph too */
.why__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--g2); transform-origin: left center; z-index: 2; }
.why__row:last-child .why__rule--end { top: auto; bottom: 0; }

.why__photo { position: relative; overflow: hidden; background: var(--k2); min-height: clamp(360px, 54svh, 620px); }
.why__photo picture { display: block; height: 100%; }
/* the frame is over-filled by 14% so the scrubbed drift never exposes an edge */
.why__photo img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: contrast(1.08) saturate(1.12); will-change: transform; }

.why__text { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(56px, 6vw, 96px); padding-left: var(--pad-in); padding-right: var(--edge); }
.why__text > * + * { margin-top: clamp(16px, 1.6vw, 24px); }
.why__row--r .why__photo { order: 2; }
.why__row--r .why__text { order: 1; padding-left: var(--edge); padding-right: var(--pad-in); }

/* the outlined numerals: the filled lime numeral is spent once, on the pinned section */
.why__n { font-size: clamp(64px, 6.2vw, 120px); line-height: 0.78; margin-bottom: 4px; }
@supports (-webkit-text-stroke: 2px currentColor) {
  .why__n { color: transparent; -webkit-text-stroke: 3px var(--accent); }
  @media (max-width: 767px) { .why__n { -webkit-text-stroke-width: 2px; } }
}
.why__pain { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 1.75vw + 14px, 42px); line-height: 1.06; letter-spacing: -0.015em; color: var(--w); max-width: 15em; }
.why__body { font-size: clamp(17px, 0.32vw + 15.7px, 19px); line-height: 1.55; color: var(--paper); max-width: 34em; }

@media (max-width: 1023px) {
  .why__row { grid-template-columns: 1fr; }
  .why__row .why__photo, .why__row--r .why__photo { order: 1; min-height: 0; height: min(46svh, 420px); }
  .why__row .why__text, .why__row--r .why__text { order: 2; padding-inline: var(--side); padding-block: clamp(36px, 7vw, 56px); }
}

/* ---------------------------------------------------------------- the decal lands (pinned)
   The wordmark travels as the black-box lockup (brand rule: never bare white on a photograph),
   then hands over to a printed twin that lives INSIDE the plate — under the lime duotone layer
   and under the grain — so it takes the same cast as every other decal on that sill. */
/* The FLYING lockup carries the brand-pack proportions of the header mark (sides 3 S,
   top/bottom 2.5 S): a 200px box holds a 166px wordmark, so the ratio survives any scale. */
.decal-lockup { background: var(--k); padding: 9px 17px 8px; }
.decal-lockup svg { display: block; width: 100%; height: auto; }
.decal-print { position: absolute; left: 0; top: 0; z-index: 0; width: 200px; opacity: 0; pointer-events: none; will-change: transform; }
/* The PRINTED twin is matched to the photograph, not to the brand sheet: the sill it lands on
   is black, so the box is invisible and its padding is cut back to almost nothing — that buys
   the wordmark the cap height of the decals either side of it (NOVATEK, APEX). A little blur
   and a luminance cut put it on the same lens and the same exposure as its neighbours, so it
   stops reading as something pasted on top. Tunable from here. */
.decal-print { --print-blur: 0.55px; --print-ink: 0.61; --print-box: rgba(10, 10, 10, 0.5); }
/* the box is half-strength so the sill's own grain and light fall read through it — a solid
   black panel was the last tell, a flat rectangle where the photograph has texture */
.decal-print .decal-lockup { padding: 3px 5px 2px; background: var(--print-box); filter: blur(var(--print-blur)) brightness(var(--print-ink)); }
@media (max-width: 1023px) { .decal-print { width: 120px; --print-blur: 0.35px; } }

/* ---------------------------------------------------------------- the four frames, on their own
   The strip is its own black band now, so it never butts against the photo section above it
   or the wash below (Jeff: "we shouldn't have two image overlays one on top of the other"). */
.strip-sec--solo { padding-block: clamp(40px, 5vw, 80px); }