/* Rapid Alpha — reusable blocks, week 40 rebuild
   Extends ra.css. Adds nothing to :root — every colour, radius and
   width below comes from the tokens already locked in ra.css.
   Load order: ra.css, then this file.

   Built to the v4 build notes:
   - one graphic per section at most
   - every block works at 320px with no sideways scroll
   - FAQ answers live in the HTML so search engines read them
   - meaning never carried by colour alone                              */

/* ---------- nav: the six-item "What we do" disclosure ----------
   ra.css already styles .nav details / .disc. The only change needed is
   that this panel holds six links rather than two, so it gets two columns
   on desktop and collapses to one on mobile.                            */
.disc.disc--wide{min-width:430px;display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.disc .disc-lbl{grid-column:1/-1;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:6px 12px 2px}

/* ---------- page-level additions ----------
   ra.css already provides section.s, .two, .fig, .lead-p, .hero .cta and
   .eyebrow. These are the few things the new pages need that it does not
   already have, named to match its conventions rather than replace them. */

/* Alternating section tint. ra.css has .s.blue and .s.split; this is the
   quiet one, for every other band. */
section.s.wash{background:var(--wash)}

/* A full-bleed figure inside a section — the four-phase strip and the two
   gap cards, which are HTML rather than SVG but still carry a caption. */
.fig--full{margin-top:8px}
.fig--full figcaption{margin-top:14px}

/* A row holding one or two buttons under a block of prose. */
.ctarow{margin-top:26px}
.ctarow .btn,.ctarow .btn-out{margin-right:10px}

/* Three equal columns — "Why Rapid Alpha". Collapses with .two at 860px. */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.three h3{font-size:18px;margin-bottom:8px;line-height:1.3}

/* Audience router: two large choices, each a whole clickable card. */
.router{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.routecard{display:flex;flex-direction:column;gap:7px;padding:24px 26px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  text-decoration:none;transition:border-color .12s,background .12s}
.routecard:hover{border-color:var(--primary);background:var(--wash)}
.routecard strong{font-size:18px;color:var(--ink);font-weight:600;line-height:1.3}
.routecard span{font-size:15.5px;color:var(--body)}
.routecard em{font-style:normal;font-weight:600;font-size:15px;color:var(--primary);margin-top:5px}
.routecard em::after{content:" →"}

/* The two gaps, vision and capability. */
.gaps{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gapcard{border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;background:#fff}
.gapcard h3{font-size:19px;margin:14px 0 8px}
.gapcard p{font-size:15.5px}

/* One testimonial on its own, rather than in a grid of them. */
.quotecard--solo{max-width:var(--narrow);margin-top:26px}

/* Numbered outcome cards — "what you walk away with". */
.numcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.numcard{border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;background:#fff}
.numcard .n{display:block;font-size:34px;font-weight:900;color:var(--primary);line-height:1;letter-spacing:-.02em}
.numcard h3{font-size:16px;margin:8px 0 9px;font-weight:600;color:var(--ink)}
.numcard p{font-size:14.5px}

/* Fit / not-fit pair. The left border carries the meaning, so each card
   also states it in its own heading — never colour alone. */
.fitcard{border:1px solid var(--line);border-left-width:3px;border-radius:0 var(--r) var(--r) 0;
  padding:22px 24px;background:#fff}
.fitcard--yes{border-left-color:var(--teal)}
.fitcard--no{border-left-color:var(--muted)}
.fitcard h3{font-size:18px;margin-bottom:8px}

/* A pending answer is visible on staging but must never reach production.
   Marked here so it is obvious in review, and greppable before launch:
   grep -r 'data-pending' before any deploy.                              */
[data-pending] > summary::before{content:"PENDING · ";color:#B07A1E;font-weight:700;font-size:12px;letter-spacing:.06em}

@media (max-width:860px){
  .numcards{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .numcards{grid-template-columns:1fr}
}

@media (max-width:860px){
  .three,.router,.gaps{grid-template-columns:1fr;gap:20px}
}

/* ---------- proof strip: three stats in a row ---------- */
.proofstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.proofstrip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:26px;padding-bottom:26px}
.proofstrip .stat{text-align:center}
.proofstrip .n{display:block;font-size:30px;font-weight:900;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
.proofstrip .lbl{display:block;font-size:14px;color:var(--body);margin-top:5px}
.proofstrip .src{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* ---------- stat callout: one number, pulled out of prose ---------- */
.statcallout{border-left:3px solid var(--primary);background:var(--wash);
  padding:18px 22px;margin:26px 0;border-radius:0 var(--r) var(--r) 0}
.statcallout .n{font-size:26px;font-weight:900;color:var(--ink);line-height:1.15;display:block}
.statcallout p{margin-top:6px;font-size:15.5px}
.statcallout .src{display:block;font-size:12px;color:var(--muted);margin-top:8px}

/* ---------- logo row: cleared names only ---------- */
.logorow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:34px 42px;padding:22px 0}
.logorow .name{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.logorow img{height:26px;width:auto;opacity:.72;filter:grayscale(1)}
.logorow--tight{gap:26px 32px}

/* ---------- case card ---------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.casecard{border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;background:#fff;
  display:flex;flex-direction:column}
.casecard .client{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);
  font-weight:600}
.casecard h3{font-size:18px;margin:9px 0 10px;line-height:1.25}
.casecard p{font-size:15px;margin-bottom:14px}
.casecard .meta{font-size:13px;color:var(--muted);margin-bottom:14px}
.casecard .more{margin-top:auto;font-size:14.5px;font-weight:600;text-decoration:none}
.casecard .more::after{content:" →"}

/* ---------- testimonial card ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.quotecard{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;
  padding:22px 24px;background:#fff}
.quotecard blockquote{font-size:16.5px;color:var(--ink);font-weight:400;line-height:1.5}
.quotecard figcaption{margin-top:14px;font-size:14px;color:var(--body)}
.quotecard figcaption .who{font-weight:600;color:var(--ink);display:block}

/* ---------- FAQ accordion ----------
   <details>/<summary> is keyboard accessible with no JS, and the answer
   text sits in the HTML whether the panel is open or closed, so it is
   indexed. Do not replace this with a JS accordion that injects content. */
.faq{border-top:1px solid var(--line);max-width:var(--narrow)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--ink);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
/* FAQ questions are real <h3> headings per Emma's build note ("the [H2] and
   [H3] markers are real heading tags"), but must render as the summary line
   rather than as a page heading. */
.faq summary h3{display:inline;font:inherit;font-weight:inherit;letter-spacing:inherit;
  margin:0;padding:0;color:inherit}
.faq summary:hover{color:var(--primary)}
.faq summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.faq summary::after{content:"";position:absolute;right:6px;top:24px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.faq .ans{padding:0 34px 20px 0;font-size:16px}
.faq .ans p+p{margin-top:12px}

/* ---------- four-phase strip ---------- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.phases .ph{padding:20px 20px 22px;border-right:1px solid var(--line);background:#fff}
.phases .ph:last-child{border-right:0}
.phases .wk{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);font-weight:600}
.phases h3{font-size:17px;margin:8px 0 7px}
.phases p{font-size:14.5px}

/* ---------- terrain lines ----------
   Contour lines behind the two dark blocks. Background colour is unchanged
   — var(--strip) still sits underneath; the lines are drawn on a pseudo
   element above it and below the text.

   Three things keep the text readable:
   1. The layer is masked, so the lines fade out where the words are —
      a clear centre on the CTA band, a downward fade in the footer.
   2. Effective opacity lands around 7%, well under the contrast floor.
   3. The layer is inert: z-index 0 with content lifted to 1, and
      pointer-events off, so nothing below it can be clicked or selected.

   terrain.svg is local, so this still renders from a folder with no
   network. preserveAspectRatio="none" lets it stretch to any block.     */
.terrain{position:relative;isolation:isolate;overflow:hidden}
.terrain::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("terrain.svg") center/cover no-repeat;
  opacity:.45;
}
.terrain>*{position:relative;z-index:1}

/* CTA band: the text runs across the middle, so the fade runs left-to-right
   rather than out from the centre. A radial mask on a band this wide and
   short puts almost the whole block inside the transparent zone, which is
   why the first attempt looked like nothing had been applied.             */
.ctaband.terrain::before{
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.22) 36%,rgba(0,0,0,.22) 64%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.22) 36%,rgba(0,0,0,.22) 64%,#000 100%);
}
/* Footer: strongest at the top edge, gone by the legal line. */
footer.terrain::before{
  opacity:.20;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.30) 60%,transparent 94%);
          mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.30) 60%,transparent 94%);
}
/* Anyone who has asked for less motion or less decoration gets none. */
@media (prefers-contrast:more){ .terrain::before{display:none} }

/* ---------- CTA band ---------- */
.ctaband{background:var(--strip);color:#fff;border-radius:var(--r);padding:38px 34px;text-align:center}
.ctaband h2{color:#fff;font-size:26px;line-height:1.2;max-width:22ch;margin:0 auto 10px}
.ctaband p{color:#c7cdd6;font-size:16px;max-width:56ch;margin:0 auto 22px}
.ctaband .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ctaband .btn-out{border-color:#4a5566;color:#fff}
.ctaband .btn-out:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- footer: five columns ----------
   ra.css drops .fcols to two columns at 860px. This file loads after it,
   so .fcols--5 would otherwise win at equal specificity and hold five
   columns down to 760px. The 860 rule below restores the intended order. */
.fcols--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:860px){ .fcols--5{grid-template-columns:1fr 1fr} }

/* ---------- mobile ----------
   Single breakpoint at 760px, matching ra.css. Every grid above collapses
   to one column; nothing is allowed to scroll sideways.                  */
@media (max-width:760px){
  .disc.disc--wide{min-width:0;grid-template-columns:1fr}
  .proofstrip .wrap{grid-template-columns:1fr;gap:20px}
  .phases{grid-template-columns:1fr}
  .phases .ph{border-right:0;border-bottom:1px solid var(--line)}
  .phases .ph:last-child{border-bottom:0}
  .fcols--5{grid-template-columns:1fr 1fr}
  .ctaband{padding:30px 22px}
  .ctaband h2{font-size:22px}
  .logorow{gap:24px 26px}
  .statcallout .n{font-size:22px}
}
@media (max-width:420px){
  .fcols--5{grid-template-columns:1fr}
  .ctaband .btns .btn,.ctaband .btns .btn-out{width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   HERO REVISIONS — Irshad, 29 Sep
   ══════════════════════════════════════════════════════════════════ */

/* 1 · Split hero: copy left, artwork right.
   Falls back to a single stacked column under 900px, where a side-by-side
   would squeeze both halves below a readable width. */
.hero--split .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:48px;align-items:center}
.hero--split .hero-copy>*+*{margin-top:18px}
.hero--split .hero-fig{margin:0}
.hero--split .hero-fig img,.hero--split .hero-fig svg{width:100%;height:auto;display:block}
/* The .wrap>*+* rule in ra.css adds a top margin to every sibling; inside the
   grid that pushes the artwork column down out of alignment. */
.hero--split .wrap>*+*{margin-top:0}
@media (max-width:900px){
  .hero--split .wrap{grid-template-columns:1fr;gap:32px}
}

/* 2 · Darker wash over the photograph.
   Was a flat --primary at 80%, which left the image looking washed out and
   pale. A navy-to-primary gradient keeps the brand blue while giving the
   type a much darker field to sit on at the top, where the headline is. */
.hero::after{background:linear-gradient(170deg,
    rgba(6,22,42,.93) 0%,
    rgba(7,58,106,.90) 46%,
    rgba(7,90,156,.84) 100%);
  opacity:1}

/* 3 · Eyebrow in white rather than the pale blue highlight, which did not
   hold up against the darker wash. */
.hero .eyebrow{color:#fff;opacity:.92}

/* ══════════════════════════════════════════════════════════════════
   PROOF STRIP — single line per claim, bold lead-in
   Replaces the three-part number/label/source stack. The claim now reads
   as one sentence, which is how it was written.
   ══════════════════════════════════════════════════════════════════ */
.proofstrip .wrap{align-items:start}
.proofstrip p.stat{margin:0;text-align:left;
  border-top:2px solid var(--primary);padding-top:16px}
.proofstrip p.stat strong{display:block;font-size:19px;line-height:1.25;
  font-weight:800;color:var(--ink);letter-spacing:-.01em}
.proofstrip p.stat span{display:block;margin-top:6px;
  font-size:14px;line-height:1.5;color:var(--body)}

/* ── Paired columns: space the paragraphs inside each half ──────────────
   ra.css sets `section.s p{margin:0}` and only spaces siblings at .wrap
   level, so two paragraphs inside a .two column butted straight together
   with no gap — the break read as an accident rather than a new paragraph.
   Qualified with section.s to outrank that margin:0. */
section.s .two > div > * + *{margin-top:18px}

/* ── Paired columns, top-aligned ────────────────────────────────────────
   .two centres nothing by default, but when one half carries a heading and
   the other a figure, the two should start on the same line. */
.two--vtop{align-items:start}

/* ── Logo row: real marks ───────────────────────────────────────────────
   Wordmarks sit at 26px. Iluka's mark is near-square rather than a wide
   wordmark, so at a shared height it reads far smaller than the rest; it
   gets a little more room to sit at the same optical weight. */
.logorow img{height:26px;width:auto;opacity:.72;filter:grayscale(1)}
.logorow img.logo--tall{height:38px}
@media (max-width:600px){
  .logorow img{height:22px}
  .logorow img.logo--tall{height:32px}
}

/* ══════════════════════════════════════════════════════════════════
   VERTICAL RHYTHM — one value for every band on the page
   Irshad, 29 Sep: the page was running four different section paddings
   (62 for a normal section, 78 for the blue prompt, 26 for the proof
   strip, 22 for the logo row), so the gaps between blocks read as
   accidents. Everything below the hero now sits on a single step.
   The hero keeps its own 82/76 — it is the one block that should
   breathe more, and it was the one that looked right.
   ══════════════════════════════════════════════════════════════════ */
:root{--sec-y:62px;--sec-y-sm:44px}

section.s,
section.s.prompt,
.endcta{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* The proof strip and the logo row are separate bands and each takes the
   full step, top and bottom, like every other block on the page. */
.proofstrip .wrap{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.logorow{padding:var(--sec-y) 0}

@media (max-width:760px){
  :root{--sec-y:44px}
}

/* ══════════════════════════════════════════════════════════════════
   CLOSING CTA — full bleed, sitting directly on the footer
   Was a rounded card floating inside a white section, in --strip, which
   is the footer's own colour — so the two dark blocks read as one and
   the card's edges were the only thing separating them. Now it runs the
   full width, carries the brand blue rather than the footer's near-black,
   and meets the footer with no white gap between them.
   ══════════════════════════════════════════════════════════════════ */
.endcta-full{background:var(--primary);color:#fff;
  padding-top:var(--sec-y);padding-bottom:var(--sec-y);
  position:relative;isolation:isolate}
.endcta-full .wrap{text-align:center}
/* 20ch broke "Start with one conversation" (27 characters) onto two lines.
   28ch holds every closing heading on one line at desktop sizes and still
   wraps naturally on narrow screens, where ch shrinks with the font. */
.endcta-full h2{color:#fff;max-width:28ch;margin:0 auto}
.endcta-full p{color:#dbe8f4;max-width:60ch;margin:16px auto 0;
  font-size:17px;line-height:27px}
.endcta-full .btns{margin-top:26px;display:flex;justify-content:center;
  gap:12px;flex-wrap:wrap}

/* The terrain contours are tuned for the near-black blocks; on the
   lighter blue they need pulling back or they fight the text. */
.endcta-full.terrain::before{opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.18) 34%,rgba(0,0,0,.18) 66%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.18) 34%,rgba(0,0,0,.18) 66%,#000 100%)}

/* A solid --primary button is invisible on a --primary band — invert it,
   matching how section.s.blue already handles the same problem. */
.endcta-full .btn{background:#fff;border-color:#fff;color:var(--primary)}
.endcta-full .btn:hover{background:#e8f1f8;border-color:#e8f1f8;color:var(--primary)}
.endcta-full .btn-out{border-color:rgba(255,255,255,.65);color:#fff}
.endcta-full .btn-out:hover{background:rgba(255,255,255,.10);color:#fff}
@media (max-width:600px){
  .endcta-full .btns .btn,.endcta-full .btns .btn-out{width:100%}
}


/* The four-phase cards sit directly above the timeline graphic, so they
   need a gap between them rather than the figure's usual tight 8px. */
.phases + .fig--full{margin-top:34px}
.phases + .fig--full img,.phases + .fig--full svg{width:100%;height:auto;display:block}

/* ── Gap cards: icon beside the text, not above it ──────────────────────
   The icon sat on its own line above the heading, which pushed both cards
   taller and left a band of empty space beside it. Now it sits in its own
   column on the left with the heading and copy running alongside.
   align-items:start keeps the icon level with the heading rather than
   floating to the middle of a two-line paragraph. */
.gapcard{display:grid;grid-template-columns:56px 1fr;gap:0 18px;align-items:start}
/* The icon spans both rows. Left in row 1 only, its 40px height sets that
   row's height, the heading sits at the top of it and the leftover space
   reads as a gap before the paragraph. */
.gapcard img{grid-column:1;grid-row:1 / span 2;width:52px;height:52px;margin-top:1px}
.gapcard h3{grid-column:2;grid-row:1;margin:0 0 8px}
.gapcard p{grid-column:2;grid-row:2}

/* Below 520px the two-column card leaves the text too narrow to read, so
   the icon goes back above the heading. */
@media (max-width:520px){
  .gapcard{grid-template-columns:1fr;gap:0}
  .gapcard h3{grid-column:1;margin-top:14px}
  .gapcard p{grid-column:1}
}


/* ══════════════════════════════════════════════════════════════════
   GROWTH STRATEGY — page revisions, 29 Sep
   ══════════════════════════════════════════════════════════════════ */

/* The growth-levers arithmetic. Was one paragraph carrying "First:",
   "Second:" and "Third:" inline, so the three questions ran together and
   the sequence — which is the whole point — was invisible. Now three
   numbered steps, each led by its question. */
section.s ol.arith{margin:0;padding:0;list-style:none;counter-reset:ar;
  display:grid;gap:16px;max-width:var(--narrow)}
section.s ol.arith li{position:relative;padding-left:46px;counter-increment:ar;
  font-size:17px;line-height:27px;color:var(--body)}
section.s ol.arith li::before{content:counter(ar);position:absolute;left:0;top:2px;
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--primary);color:var(--primary);background:#fff;
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
section.s ol.arith strong{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}

/* The four outcome cards now sit above their own graphic, so they need the
   same separation the phase strip has on the home page. */
.numcards + .fig--full{margin-top:34px}
.numcards + .fig--full img{width:100%;height:auto;display:block}

/* Three columns with rules between them, rather than three floating
   blocks of text with nothing holding them apart. */
.three--ruled{gap:0}
.three--ruled > *{padding:0 30px;border-left:1px solid var(--line)}
.three--ruled > *:first-child{padding-left:0;border-left:0}
.three--ruled > *:last-child{padding-right:0}
@media (max-width:860px){
  .three--ruled{gap:26px}
  .three--ruled > *{padding:0 0 0 18px;border-left:2px solid var(--line)}
  .three--ruled > *:first-child{padding-left:18px;border-left:2px solid var(--line)}
}

/* FAQ centred on the page. The list itself stays left-aligned — centred
   question text with left-aligned answers reads as a mistake — but the
   whole block is narrowed and centred under the heading. */
.faq--centred{max-width:var(--narrow);margin-left:auto;margin-right:auto}
section.s h2.ctr{text-align:center}

/* ── Source footnote under a statistics block ───────────────────────────
   Emma asked for the source notes from the current For Private Equity
   page to be carried across. They sit under the numbers, quiet enough
   not to compete with them but present so the figures are checkable. */
section.s p.src-note{margin-top:22px;font-size:13px;line-height:21px;
  color:var(--muted);max-width:var(--narrow);
  border-top:1px solid var(--line);padding-top:14px}

/* ── A non-clickable version of the router card ─────────────────────────
   Used where the card is a block of copy that happens to contain a link,
   rather than a whole card that is itself the link. */
.routecard-static{border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;background:#fff}
section.s .routecard-static h3{font-size:19px;margin:0 0 10px}
section.s .routecard-static p{font-size:15.5px}
section.s .routecard-static p + p{margin-top:14px}
.arrowlink{font-weight:600;color:var(--primary);text-decoration:none}
.arrowlink::after{content:" \2192"}
.arrowlink:hover{text-decoration:underline}

/* Large statistics used as column headings — opt-in, so ordinary
   three-column sections keep their normal headings. */
section.s .three--stats h3{font-size:30px;font-weight:900;color:var(--primary);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}

/* ── A short list of limits or exclusions ───────────────────────────────
   Used for "when this isn't the right approach". Deliberately plain —
   these are honest limits, not features, so they get no tick icons or
   colour that would dress them up as selling points. */
section.s ul.ticklist{margin:26px 0 0;padding:0;list-style:none;
  display:grid;gap:12px;max-width:var(--narrow)}
section.s ul.ticklist li{position:relative;padding-left:26px;
  font-size:17px;line-height:27px;color:var(--ink)}
/* A dot, not a dash — the dash read as a strikethrough or an en rule
   rather than a list marker. */
section.s ul.ticklist li::before{content:"";position:absolute;left:3px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* ── Case-file eyebrow on a light background ────────────────────────────
   .eyebrow is tuned for the dark hero. This is its light-background twin,
   used above each case-file heading on Proof. */
.eyebrow-dk{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);font-weight:700;margin-bottom:10px}

/* A case card that is not a link — used where the card is a list entry
   rather than a route to a longer page. */
/* A case card with no link — a list entry rather than a route onward. */
.casecard--static{cursor:default}

/* Group heading above a run of case cards. */
section.s h3.grouphd{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:34px 0 14px}
section.s .lead-p + h3.grouphd{margin-top:26px}

/* Testimonials in a grid rather than one at a time. */
.quotegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){ .quotegrid{grid-template-columns:1fr} }

/* Numbered cards used as jump links on Proof. */
a.numcard{text-decoration:none;display:block;transition:border-color .15s ease}
a.numcard:hover{border-color:var(--primary)}

/* Price line under an engagement name. */
section.s p.price{font-size:26px;font-weight:800;color:var(--primary);
  line-height:1.1;letter-spacing:-.01em;margin:0 0 12px}
section.s p.price span{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}

/* Five numbered cards rather than four. Emma confirmed the card layout is
   kept here instead of a drawn graphic (30 Sep); the figure carries her
   alt text as an aria-label, since HTML cards have no alt attribute. */
.numcards--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){ .numcards--5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .numcards--5{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .numcards--5{grid-template-columns:1fr} }

/* ── Clickable phase timeline (Method) ──────────────────────────────────
   Emma asked for the timeline's four phases to be clickable through to
   their section. The graphic is an external SVG, so links inside the file
   would not work — instead four transparent hit areas sit over it, one
   per quarter of its width, each pointing at the matching phase card.

   The <span> inside each carries the accessible name; it is hidden
   visually but read aloud, so the links are not empty to a screen reader.
   Focus is visible, so the timeline is keyboard-navigable too. */
.timeline-map{position:relative}
.timeline-map img{display:block;width:100%;height:auto}
.tl-hit{position:absolute;top:0;bottom:0;width:25%;display:block;
  border-radius:var(--r)}
.tl-hit span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tl-hit:hover{background:rgba(7,90,156,.06)}
.tl-hit:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}

/* The phase cards are jump targets, so keep them clear of the sticky
   header when the browser scrolls to one. */
.phases .ph{scroll-margin-top:90px}

/* ── Client logo on a case card ─────────────────────────────────────────
   Emma's snagging list: put the company logo on the case cards. Where we
   hold no cleared logo — Adeia, GET Trakka, and the deliberately unnamed
   "Industrial technology company" — the card keeps its text name instead,
   so the row stays consistent rather than having gaps. The logo replaces
   the name, so its alt text carries the company. */
.casecard .cardlogo{display:block;height:22px;width:auto;max-width:150px;
  margin-bottom:12px;opacity:.78;filter:grayscale(1);
  /* .casecard is a column flex container, so its children stretch to the
     full card width by default. With a fixed height that distorts the
     image — worst on a near-square mark like Iluka's. */
  align-self:flex-start;flex:0 0 auto;object-fit:contain}
/* A near-square mark reads much smaller than a wide wordmark at a shared
   height, so it gets a little more room, as in the logo row. */
.casecard .cardlogo[src*="logo-iluka"]{height:32px}

/* ── Growth Strategy hero: keyword line promoted to H1 ──────────────────
   Emma's snagging list asks for the overline "Innovation and Growth
   Strategy Consulting" to be tagged as the H1. It still needs to LOOK
   like an overline, so it keeps the eyebrow's size and spacing while
   carrying the H1 tag; the old headline steps down to a display line
   beneath it, styled as the H1 used to be.

   The old headline was a <p>, which left the page's largest type in a
   non-heading element. Emma confirmed on 1 Oct 2026 (snagging list
   comment) to demote it to an H2 instead, so the visual hierarchy and
   the document outline now agree. It is the only page with an H2 in the
   hero; she accepted that inconsistency knowingly. */
.hero h1.eyebrow-h1{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;opacity:.92;font-weight:600;margin-bottom:18px;line-height:1.4}
.hero h2.hero-sub,.hero .hero-sub{color:#fff;font-size:clamp(31px,4.6vw,52px);
  line-height:1.155;max-width:830px;font-weight:700;letter-spacing:-.01em;
  margin:0}

/* ══════════════════════════════════════════════════════════════════
   FIGURE CAPTIONS — centred, and legible on the dark hero
   ══════════════════════════════════════════════════════════════════ */

/* Centre the artwork and its caption together. max-width:none undoes the
   60em cap in ra.css, which would otherwise leave the caption centred
   within its own narrower box rather than under the middle of the image. */
.fig{text-align:center}
.fig figcaption{margin-left:auto;margin-right:auto;max-width:none;text-align:center}
.fig img,.fig svg{margin-left:auto;margin-right:auto}

/* The hero sits on a dark photograph, so --muted is close to unreadable
   there. Quote cards keep their own caption styling and are excluded. */
.hero .fig figcaption{color:#fff;opacity:.85}

/* Quote cards are attribution, not artwork — they stay left-aligned. */
.quotecard{text-align:left}
.quotecard figcaption{text-align:left;margin-left:0;margin-right:0}



/* ── Logo row, five over four ───────────────────────────────────────────
   Nine logos wrapping freely gave an uneven split. A ten-column grid with
   each logo spanning two columns puts five on the first row; the sixth
   starts one column in, so the remaining four sit centred beneath them
   rather than aligned left.

   Below 860px it falls back to the flex row, where wrapping by width is
   more useful than holding a fixed shape. */
@media (min-width:861px){
  .logorow--5-4{display:grid;grid-template-columns:repeat(10,1fr);
    column-gap:24px;row-gap:34px;align-items:center;justify-items:center}
  .logorow--5-4 > *{grid-column:span 2;max-width:100%}
  .logorow--5-4 > *:nth-child(6){grid-column:2 / span 2}
}

/* ── Paired columns, vertically centred ─────────────────────────────────
   Where one half is a tall graphic and the other a short heading and
   paragraph, top-aligning leaves the text stranded against a column of
   empty space. Centring sets the copy against the middle of the artwork.
   Distinct from .two--vtop, which is right when both halves are text. */
.two--vmid{align-items:center}



/* Stat cards — the callout number is a graphic, the box is CSS, the
   sentence is HTML. Replaces the old pattern of a stat row followed by a
   graphic that repeated the same three numbers. */
.three--statcards{align-items:stretch}
.three--statcards > div{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  border-top:4px solid var(--primary);
  padding:30px 28px 28px}
/* sized by height, not width — the three callouts differ in length, so a
   width cap would render them at three different type sizes */
.three--statcards .statnum{display:block;height:46px;width:auto;max-width:100%;margin-bottom:22px}
.three--statcards p{margin:0;font-size:14px;line-height:1.55;color:var(--body)}
@media (max-width:860px){
  .three--statcards > div{padding:24px 22px 22px}
  .three--statcards .statnum{margin-bottom:16px}
}

/* Proof strip with fewer than three stats.
   Emma's 1 Oct stats table assigns Due Diligence two and About one; the
   default repeat(3,1fr) would leave a visibly empty cell. */
.proofstrip--2 .wrap{grid-template-columns:repeat(2,1fr)}
.proofstrip--1 .wrap{grid-template-columns:minmax(0,560px);justify-content:center}
@media (max-width:760px){
  .proofstrip--2 .wrap{grid-template-columns:1fr}
}

/* Founder bio — square portrait beside the text.
   Headshot_Matthew.jpg is 732x731, so it is cropped to a circle at a fixed
   size rather than scaled to the column, which would make it dominate. */
.bio{display:grid;grid-template-columns:200px 1fr;gap:0 34px;align-items:start}
.bio > div > * + *{margin-top:18px}
.bio-portrait{display:block;width:200px;height:200px;object-fit:cover;
  border-radius:50%;background:var(--wash)}
@media (max-width:760px){
  .bio{grid-template-columns:1fr;gap:22px}
  .bio-portrait{width:148px;height:148px}
}

/* A held block, visible on staging so reviewers see the gap, and caught by
   grep -r 'data-pending' before any deploy to production. */
p.pending{color:#B07A1E;font-weight:600;font-size:14px;letter-spacing:.02em;
  border-left:3px solid #E2B757;background:#FDF7EA;padding:12px 16px;border-radius:0 var(--r) var(--r) 0}

/* Closing CTA — small photo of Matthew beside the button (Emma's spec,
   About). White ring so the circle reads against the primary band. */
/* The band is text-align:center, so this row has to centre itself too —
   a default flex-start put the pair hard against the left edge. The 26px
   step is the one .endcta-full .btns carried before it was nested here. */
.ctaface{display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;margin-top:26px}
.ctaface .btns{margin-top:0}
.ctaface-photo{display:block;width:72px;height:72px;flex:0 0 auto;
  object-fit:cover;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
@media (max-width:560px){
  .ctaface{gap:16px}
  .ctaface-photo{width:60px;height:60px}
}

/* A held block sitting on a hero. The light amber panel is invisible on the
   dark wash, so it inverts: translucent white panel, light amber rule. */
.hero p.pending{background:rgba(255,255,255,.12);border-left-color:#F0C96A;
  color:#FBE6BA;max-width:62ch}

/* ── Proof page: six-card glance grid ───────────────────────────────────
   .numcards defaults to four across, which leaves a 4+2 orphan row for the
   six "results at a glance" cards. Three across gives two even rows. */
.numcards--6{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.numcards--6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.numcards--6{grid-template-columns:1fr}}

/* ── Proof page: case filter row ────────────────────────────────────────
   Buttons, not links: they change what is shown on the page rather than
   navigating. aria-pressed carries the state, so the active filter is
   announced and is not signalled by colour alone — the pressed button also
   carries the primary border and weight. With JS off, no button renders
   (the row is written by the script) and every case file stays visible. */
.filterrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.filterrow button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:#fff;color:var(--body);border:1px solid var(--line);
  border-radius:var(--rb);padding:9px 16px;line-height:1.2}
.filterrow button:hover{border-color:var(--muted);color:var(--ink)}
.filterrow button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);
  color:#fff;font-weight:700}
.filterrow button:focus-visible{outline:2px solid var(--bright);outline-offset:2px}

/* A case file hidden by the filter. [hidden] alone is overridden by the
   section's own display, so it is restated here. */
section.casefile[hidden]{display:none}

/* ── Paired routecards: equal height ────────────────────────────────────
   .two is a grid, so the two cards already span the same row — but each
   card's own box only grows to its content, so a card with more copy left
   its partner visibly short. Stretching both to the row height fixes the
   "bottom blocks are huge" mismatch without touching the copy. */
.two > .routecard-static{height:100%}

/* Homepage client logos link to client sites (Emma, 6 Oct) */
.logorow a{display:flex;align-items:center;justify-content:center;opacity:1}
.logorow a:hover img,.logorow a:focus-visible img{opacity:1;filter:none}
.logorow a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* Final snags (Emma, 7 Oct) */
.proofstrip .proofstrip-head{grid-column:1/-1;margin:0;text-align:center;font-size:24px;line-height:1.25;font-weight:800;color:var(--primary)}
.src a{color:inherit;text-decoration:underline}
.numcard h3.n{display:block;font-size:21px;font-weight:800;color:var(--primary);line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
.logorow a:hover img,.logorow a:focus-visible img{opacity:1;filter:none}
/* Portfolio Companies: smaller blocks */
.fig--small img{max-width:680px}
.fig--680 img{max-width:680px}
.logorow--tight img[src*="logo-ncs"]{height:34px}

/* w46: caption above the logo row; closing CTA row spacing */
.logohead{margin:0;padding-top:var(--sec-y);text-align:center;font-size:24px;line-height:1.25;font-weight:800;color:var(--primary)}
.logohead + .logorow{padding-top:28px}

/* w46: anchors clear the fixed header; four-reason layout on Due Diligence */
[id]{scroll-margin-top:96px}
@media (min-width:861px){
  .three--4{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .three--4 > *:nth-child(odd){padding-left:0;border-left:0}
  .three--4 > *:nth-child(even){padding-right:0}
  .three--4 > *:nth-child(3){padding-right:30px}
}


/* w47: growth-levers arithmetic as an equation: three levers, added, against the gap */
.levereq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0 14px;align-items:stretch;margin:34px 0 14px}
.lv{background:#fff;border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:var(--r);padding:24px}
.lvn{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:15px;align-items:center;justify-content:center;margin-bottom:12px}
.lv h3{font-size:18px;line-height:1.3;margin-bottom:8px}
.lv p{font-size:16px;margin:0}
.lvop{align-self:center;font-size:32px;line-height:1;color:var(--bright);font-weight:300}
.levertotal{display:flex;gap:22px;align-items:center;background:var(--strip);color:#fff;border-radius:var(--r);padding:26px 28px;margin:14px 0}
.levertotal .eq{font-size:44px;line-height:1;color:var(--bright);font-weight:300;flex:none}
.levertotal h3{color:#fff;font-size:20px;margin-bottom:6px}
.levertotal p{color:#c3ccd6;margin:0;font-size:16px}
.leverout{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 26px}
.leverout>div{background:#fff;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--r);padding:18px 20px}
.leverout strong{display:block;color:var(--ink);margin-bottom:5px}
.leverout p{margin:0;font-size:16px}
@media(max-width:900px){
  .levereq{grid-template-columns:1fr;gap:10px}
  .lvop{justify-self:center;font-size:26px}
  .leverout{grid-template-columns:1fr}
  .levertotal{flex-direction:column;align-items:flex-start;gap:8px}
}

/* w47b: `section.s p` (ra.css) forces dark text; these outrank it so the dark bar stays readable */
section.s .levertotal h3{color:#fff}
section.s .levertotal p{color:#d5dde6;font-size:16px;line-height:25px}
section.s .levertotal a{color:#7cc4f2;text-decoration:underline;text-underline-offset:3px}
section.s .lv p,section.s .leverout p{font-size:16px;line-height:25px}


/* w47: Growth Strategy results grouped by growth lever */
.lvres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.lr{background:#fff;border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:var(--r);padding:24px}
.lk{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--primary);margin-bottom:16px}
section.s .lrb{margin:0 0 18px;font-size:16px;line-height:25px}
section.s .lrb:last-child{margin-bottom:0}
.lrb strong{display:block;font-size:20px;line-height:1.25;color:var(--ink);margin-bottom:4px}
.lrb span{display:block;color:var(--body)}
@media(max-width:900px){.lvres{grid-template-columns:1fr}}