/* page.css — the generic page template
 *
 * The shell for every ordinary content page. Loaded only on pages, never on the
 * front page. Pricing is a SEPARATE template and does not use this sheet.
 *
 * ── THE TWO REDS, AND WHY THIS ONE MATTERS ──────────────────────────────────
 * `--red` (#e6002a) is a FILL colour only: the eyebrow square, list markers, the
 * CTA band. Red TEXT here is `--red-label` (#ff0a32).
 *
 * THAT TOKEN DOES NOT MEET WCAG AA AND THE FAILURE IS DELIBERATE. Zsolt chose
 * brightness over contrast on 2026-08-12, against measured alternatives:
 * #ff0a32 is 3.63:1 on the light band and 2.56:1 on the steel ground, which is
 * this template's default background. #a80017 was 7.24 / 5.11 and passed both;
 * #b70017 was the brightest passing value at 6.41 / 4.52 and was rejected as
 * too close to the old one to be worth the change. **This includes the link
 * hover rule.** DO NOT revert it — see tokens.css. The CTA's white button is
 * unaffected: #e6002a on white measures 4.77:1 and passes.
 *
 * ── EVERY SIZE IS A clamp() ─────────────────────────────────────────────────
 * That is what lets the page hold between 1024 and 2560px with no breakpoints.
 * Do not replace them with fixed values plus media queries.
 */


/* =========================================================================
   Bands
   -------------------------------------------------------------------------
   ALTERNATION IS STRUCTURAL — computed from position, never authored per
   block. Odd blocks take the light band, even ones the steel band, so two
   identical grounds can never end up adjacent and lose the boundary.
   ========================================================================= */

.pt {
  --band-light: radial-gradient(130% 100% at 72% 2%, #f7f8fa 0%, #f4f6f8 55%, #eceff1 100%);
  --band-steel: radial-gradient(130% 100% at 72% 2%, #d5d9dc 0%, #cdd1d5 55%, #c4c9cd 100%);
  --pad-x: clamp(24px, 4vw, 64px);
  --pad: clamp(38px, 5vw, 78px) var(--pad-x);
  background: var(--steel-base);
  color: var(--near-black);
}

.pt__band {
  padding: clamp(52px, 7vw, 104px) clamp(24px, 4vw, 64px) clamp(38px, 5vw, 78px);
  background: radial-gradient(130% 100% at 72% 2%, #d9dcdf 0%, #cdd1d5 55%, #c3c8cd 100%);
  border-bottom: 1px solid rgba(18, 28, 40, .22);
  display: flex; flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}

.pt__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--hud); font-weight: 500;
  font-size: clamp(10px, .82vw, 11px);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red-label);            /* TEXT — not the fill red */
}
.pt__eyebrow i {
  width: 10px; height: 10px; flex: none;
  background: var(--red);            /* FILL — the one place #e6002a is correct here */
  display: block;
}

.pt__title {
  margin: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(40px, 8vw, 120px); line-height: .92;
  letter-spacing: -.035em; text-transform: uppercase;
  color: var(--near-black);
  text-wrap: balance;
}

.pt__standfirst {
  margin: 0;
  max-width: 56ch;                   /* the specified measure */
  font-family: var(--body); font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: var(--ink-body);
  text-wrap: pretty;
}


/* =========================================================================
   Editor content
   -------------------------------------------------------------------------
   The editor writes ordinary HTML; these rules give it the template's surface.
   Top-level blocks become the alternating bands.
   ========================================================================= */

/* ONE PROSE BAND, NOT ONE BAND PER BLOCK.
   -------------------------------------------------------------------------
   This used to give every direct child of the body its own full band and
   alternate the ground odd/even. That reads as a design only while the editor
   writes a handful of top-level blocks. WordPress does not: the block editor
   emits every heading, paragraph and list as a SIBLING, so a real page of copy
   came out as one band per paragraph — 109 of them on the sample page, a
   28,430px document of stripes.

   The handoff never asked for the alternation. PAGE-TEMPLATE-DESKTOP.md §4 is
   explicit that the prose block repeats per H2 section with the SAME
   background — "copy it per H2 section, same background" — and the mobile
   spec's §4 lists one body section, not a stripe per element. The bands that do
   differ are the other BLOCK TYPES (page header, fact strip, media, CTA), each
   of which carries its own ground, and each of which is opted into by class.

   So the body is the prose band itself, and its children are just prose. */
.pt__body {
  padding: var(--pad);
  background-image: var(--band-light);
  border-bottom: 1px solid var(--hair-on-light);
}

/* §4's reading measure, on the wrapper rather than on each element: "this is
   the page's reading measure; do not widen it". Blocks that are their own band
   below opt out of it. */
.pt__body > * { max-width: 74ch; }

/* h1 as well as h2: the page's own H1 is the band above, so an H1 in the
   editor's content is a mis-set heading rather than a new level — style it as
   the section heading it visually is rather than let it fall back to a browser
   default. (It is still worth demoting to H2 in the editor: two H1s on a page
   is a real outline problem, not just a styling one.) */
.pt__body h1,
.pt__body h2 {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3.8vw, 50px); line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--near-black);
  /* NO max-width. 24ch was a leftover from the one-band-per-block model, where
     a heading opened its own band and a short measure read as a title. Inside
     the prose band it just forced three-line stacks out of ordinary section
     headings; §4 gives the H2 text-wrap:balance and no cap of its own, and the
     wrapper's 74ch is the measure. */
  text-wrap: balance;
}
.pt__body h3 {
  margin: clamp(24px, 2.6vw, 36px) 0 clamp(8px, .9vw, 12px);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.2;
  color: var(--near-black);
}

/* 74-character measure. The handoff says explicitly: do not widen it. */
.pt__body p,
.pt__body li {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.65;
  color: var(--ink-body);
  max-width: 74ch;
  /* A BARE URL IS ONE WORD, and an editor pasting one is normal, not an abuse.
     "https://support.google.com/chrome/answer/95647?hl=en" is 52 characters and
     cannot break at the default `normal`, so it drove the whole document 24px
     wide at a 390px viewport — the handoff's own acceptance check ("375px wide:
     no horizontal overflow") failed on the first page of real content.

     `anywhere`, not `break-word`: break-word leaves the element's MIN-CONTENT
     size at the unbroken token, so a flex or grid parent still sizes to it and
     the overflow survives. The list here is a flex column, so it has to be the
     value that shrinks min-content too. Same idiom as .crow__v in contact.css. */
  overflow-wrap: anywhere;
}
.pt__body p { margin: 0 0 clamp(12px, 1.2vw, 18px); }

/* Inline links carry an underline as well as colour — never colour alone. */
.pt__body a {
  color: var(--red-label);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pt__body a:hover { color: var(--red-label); text-decoration-thickness: 2px; }

/* Square markers, not bullets. The gap is on the LIST, so items stay evenly
   spaced however many there are. */
.pt__body ul {
  list-style: none;
  margin: clamp(14px, 1.4vw, 20px) 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: clamp(8px, .9vw, 12px);
}
.pt__body ul li {
  position: relative;
  padding-left: 20px;
  margin: 0;
}
.pt__body ul li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--red);            /* FILL */
}

/* The fact strip and the media block are their own bands in the handoff too,
   so they take the same full-bleed escape as the CTA. */
.pt__body > .facts,
.pt__body > figure {
  max-width: none;
  margin-inline: calc(-1 * var(--pad-x));
  padding: var(--pad);
}
.pt__body > figure { background-image: var(--band-steel); }

/* --- fact strip ----------------------------------------------------------
   auto-fit with a REAL minimum: three to five cells lay out cleanly and four
   is the natural width. A fixed track count breaks the moment the cell count
   changes — the same lesson as the services strip. */
.pt__body .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
  margin: clamp(18px, 2vw, 28px) 0 0;
  border-top: 1px solid rgba(18, 28, 40, .13);
}
.pt__body .facts > * {
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px);
  border-left: 1px solid rgba(18, 28, 40, .13);
  min-width: 0;
}
.pt__body .facts > *:first-child { border-left: none; padding-left: 0; }

/* --- media --------------------------------------------------------------- */
.pt__body figure { margin: 0; }
.pt__body img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pt__body figcaption {
  margin-top: 12px;
  font-family: var(--hud); font-weight: 500;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-stat);
}

/* --- CTA band ------------------------------------------------------------
   Its own band, and the only one that is red. FULL-BLEED, so it has to escape
   the prose band's padding: the negative inline margin cancels the gutter and
   the padding puts it back inside the block, which is what lets a red ground
   reach both edges without the template needing a wrapper element per block. */
.pt__body > .cta {
  max-width: none;
  margin-inline: calc(-1 * var(--pad-x));
  padding: var(--pad);
}
.pt__body > .cta,
.pt__body > *:last-child.cta {
  background-image: none;
  background-color: var(--red);      /* FILL */
  color: #fff;
}
.pt__body .cta h2,
.pt__body .cta p { color: #fff; }
.pt__body .cta a {
  display: inline-block;
  background: #fff;
  color: var(--red);                 /* 4.77:1 on white — the one passing use of the fill red as text */
  text-decoration: none;
  padding: 16px 26px;
  font-family: var(--hud); font-weight: 700;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}