/* Barking Cat site system v2. One scale, one width, no exceptions. */

@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --navy: #002147;
  --cream: #FDFCF9;
  --gold: #C69214;
  --graphite: #4A4A4A;
  --ink: #222222;
  --line-light: rgba(0, 33, 71, 0.10);
  --line-dark: rgba(253, 252, 249, 0.16);
  --width: 800px;
  /* The scale. Four sizes. */
  --t-display: 44px;
  --t-title: 30px;
  --t-sub: 20px;
  --t-body: 18px;
  --t-small: 13px;
}
@media (max-width: 700px) {
  :root { --t-display: 32px; --t-title: 25px; --t-sub: 18px; --t-body: 16px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); } /* overscroll shows navy, never a flash */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--graphite);
  background: var(--cream);
}
h1, h2, h3 { color: var(--navy); }
.band.navy h1, .band.navy h2, .band.navy h3, .hero h1, .statement p { color: var(--cream); }
/* Catch-all: no heading on a dark surface may inherit navy and disappear. */
.band.navy h1, .band.navy h2, .band.navy h3,
.hero h1, .hero h2, .hero h3,
.statement h1, .statement h2, .statement h3,
.banner h1, .banner h2, .banner h3,
.contact h1, .contact h2, .contact h3,
.review-panel h1, .review-panel h2, .review-panel h3,
.article-head h1, .article-head h2, .article-head h3 {
  color: var(--cream);
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--width); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---- Type roles ---- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.rule { width: 64px; height: 3px; background: var(--gold); border: none; margin: 16px 0 32px; }
h1 { font-size: var(--t-display); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: var(--t-title); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--t-sub); font-weight: 800; line-height: 1.35; }
p + p { margin-top: 1.15em; }
.caption { font-size: var(--t-small); margin-top: 12px; color: var(--graphite); }

/* ---- Bands ---- */
.band { padding: 84px 0; }
.band.navy { background: var(--navy); color: var(--cream); }
.band.navy .eyebrow { color: var(--gold); }
.band.navy p { color: rgba(253, 252, 249, 0.92); }
.band.navy .caption { color: rgba(253, 252, 249, 0.65); }


/* ---- Buttons: one style ---- */
.btn {
  display: inline-block; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  padding: 15px 28px; text-decoration: none;
}
.btn:hover { background: #d9a223; }

/* ---- Nav ---- */
.nav { background: var(--navy); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-dark); }
/* The bar carries eight items and outgrew the 800px content column.
   Chrome only: the content width rule is unchanged. */
.nav .wrap { max-width: 1100px; display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); font-weight: 800; letter-spacing: 0.08em; font-size: 14px; white-space: nowrap; }
.nav-brand img { height: 32px; width: auto; }
.nav-links { margin-left: auto; min-width: 0; display: flex; gap: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-links a { color: rgba(253, 252, 249, 0.85); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; padding: 4px 0; }
.nav-links a:hover { color: var(--gold); }

/* ---- Hero: full-viewport, holding-page treatment ---- */
.hero {
  background: var(--navy); color: var(--cream); text-align: center;
  min-height: calc(100vh - 61px);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 80px 0;
}
.hero .watermark {
  position: absolute; right: -6%; bottom: -10%;
  width: 46vw; max-width: 620px; min-width: 300px;
  opacity: 0.08; pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .wrap > * { margin-left: auto; margin-right: auto; }
.hero img.lockup { width: min(460px, 76vw); margin: 0 auto 42px; height: auto; }
.hero .hr-gold { width: 64px; height: 3px; background: var(--gold); border: none; margin: 0 auto 42px; }
.hero h1 { white-space: nowrap; font-size: clamp(22px, 5.6vw, 44px); margin: 0 auto; }
.hero .sub { max-width: 48ch; margin: 22px auto 0; color: rgba(253, 252, 249, 0.88); }
.hero .btn { margin-top: 42px; }

/* ---- Statement band ---- */
.statement { background: var(--navy); text-align: center; padding: 92px 0; }
.statement p { font-size: var(--t-display); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--cream); max-width: 21ch; margin: 0 auto; }
.statement p span { color: var(--gold); }

/* ---- Side-by-side (photo + text), flex ---- */
.side { display: flex; gap: 56px; align-items: center; }
.side .text { flex: 1 1 0; min-width: 0; }
.side .photo { flex: 0 0 280px; }
.side .photo img { border-radius: 6px; width: 100%; height: auto; }
@media (max-width: 820px) {
  .side { flex-direction: column; align-items: flex-start; gap: 30px; }
  .side .photo { flex-basis: auto; width: min(400px, 100%); order: -1; }
}

/* ---- Review panel ---- */
.review-wrap { padding: 84px 0; }
.review-panel { background: var(--navy); color: var(--cream); padding: 64px 60px; border-radius: 8px; }
.review-panel .eyebrow { color: var(--gold); }
.review-panel p { color: rgba(253, 252, 249, 0.92); }
.review-panel .strap { font-size: var(--t-sub); font-weight: 600; color: var(--gold); margin: 14px 0 28px; }
.review-panel .close-line { font-weight: 800; margin-top: 28px; }
.review-panel .close-line a { color: var(--gold); text-decoration: none; border-bottom: 2px solid var(--gold); }
@media (max-width: 700px) { .review-panel { padding: 44px 26px; border-radius: 0; } }

/* ---- Track record ---- */
.era { padding: 36px 0; border-bottom: 1px solid var(--line-dark); }
.era:first-of-type { padding-top: 8px; }
.era:last-of-type { border-bottom: none; padding-bottom: 0; }
.era h3 { color: var(--gold); margin-bottom: 10px; }

/* ---- Thinking cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 38px; }
.card { flex: 1 1 340px; background: #FFFFFF; border: 1px solid var(--line-light); border-top: 4px solid var(--gold); padding: 32px 30px; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--navy); border-top-color: var(--gold); }
.card .date { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.card h3 { color: var(--navy); margin: 10px 0 10px; }
.card p { font-size: 15px; color: var(--graphite); }
.more-link { display: inline-block; margin-top: 34px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }

/* ---- Contact / footer ---- */
.contact { text-align: center; }
.contact .wrap > * { margin-left: auto; margin-right: auto; }
.contact h2 { max-width: 18ch; margin: 10px auto 28px; }
.contact .email { font-size: var(--t-sub); font-weight: 600; color: var(--gold); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.contact .btn-row { margin-top: 30px; }
.footer { border-top: 1px solid var(--line-dark); margin-top: 64px; padding-top: 42px; }
.footer img { height: 48px; margin: 0 auto 20px; width: auto; }
.legal { font-size: 12px; color: rgba(253, 252, 249, 0.6); text-align: center; max-width: none; }

/* ---- Article pages ---- */
.article-head { background: var(--navy); color: var(--cream); padding: 76px 0 60px; }
.article-head .eyebrow { color: var(--gold); }
.article-head h1 { max-width: 20ch; margin-top: 14px; }
.article-body { padding: 64px 0 90px; }
.article-body h2 { color: var(--navy); margin: 44px 0 16px; }
.article-body h3 { color: var(--navy); margin: 30px 0 8px; }
.article-body .stage { border-left: 3px solid var(--gold); padding-left: 18px; margin: 0 0 16px; }
.article-body .footnote { font-size: var(--t-small); color: var(--graphite); font-style: italic; border-top: 1px solid var(--line-light); padding-top: 20px; margin-top: 40px; }
.backlink { display: inline-block; margin-top: 40px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }

/* ---- Speaking ---- */
.topic { margin-top: 22px; }
.topic h3 { color: var(--navy); }
.listing { padding: 20px 0; border-bottom: 1px solid var(--line-light); }
.band.navy .listing { border-color: var(--line-dark); }
.listing:last-of-type { border-bottom: none; }
.listing .when { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.listing p { margin-top: 6px; }
.listing a { color: var(--navy); font-weight: 600; }
/* Navy link text on a navy band is invisible. Gold is the dark-surface link colour. */
.band.navy .listing a { color: var(--gold); }


/* ---- Credentials strip (holding page element, restored) ---- */
.credentials { padding: 76px 0; }
.cred-row { display: flex; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--line-light); align-items: baseline; }
.cred-row:last-of-type { border-bottom: none; }
.cred-row dt { flex: 0 0 190px; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.cred-row dd { margin: 0; font-weight: 600; color: var(--navy); }
@media (max-width: 700px) { .cred-row { flex-direction: column; gap: 4px; } .cred-row dt { flex-basis: auto; } }


/* ---- Section banners ---- */
.banner { background: var(--navy); border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); padding: 46px 0; }
.banner .eyebrow { color: var(--gold); }
.banner p.statement-line { font-size: var(--t-title); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--cream); margin-top: 8px; }

/* ---- Review spec rows (credentials treatment) ---- */
.spec { margin: 34px 0 8px; }
.spec .cred-row dt { flex-basis: 190px; }
.spec .cred-row dd { font-weight: 500; color: var(--graphite); }
.spec .cred-row dd strong { color: var(--navy); font-weight: 600; }
.spec .cred-row dd a { color: var(--navy); font-weight: 600; }

/* Track record gold headlines stay gold on navy */
.era h3 { color: var(--gold); }


/* ---- v6: two backgrounds, all colours declared ---- */
.hero h1, .hero .sub { color: var(--cream); }
.hero .sub { color: rgba(253, 252, 249, 0.88); }
.nav { background: var(--navy); }
.nav .nav-links a { color: rgba(253, 252, 249, 0.85); }
.band { background: var(--cream); }
.band.navy { background: var(--navy); }
.band p { color: var(--graphite); }
.band.navy p, .contact p, .contact .close-big { color: rgba(253, 252, 249, 0.92); }
.contact h2 { color: var(--cream); }
.banner p.statement-line { color: var(--cream); }
.era { border-bottom: 1px solid var(--line-light); }
.era h3 { color: var(--navy); }
.era p { color: var(--graphite); }
.statement { background: var(--navy); }
.statement p { color: var(--cream); }

/* v7: era headlines gold per instruction */
.era h3 { color: var(--gold); }


/* v10 amendments */
/* 1. Credentials lead-in */
.credentials .lead { font-size: var(--t-sub); font-weight: 800; color: var(--navy); margin: 10px 0 26px; }
/* 3. Track record on navy: gold headlines, cream text, dark rules */
.band.navy .era { border-bottom: 1px solid var(--line-dark); }
.band.navy .era p { color: rgba(253, 252, 249, 0.92); }
/* 4. Contact: no underlines, single-line close */
.contact h2 { white-space: nowrap; font-size: clamp(15px, 4.1vw, 32px); max-width: var(--measure-prose); }
.contact .email { border-bottom: none; }
.contact .li-link { color: rgba(253, 252, 249, 0.85); font-weight: 600; text-decoration: none; }
.contact .li-link:hover { color: var(--gold); }
/* 5. Specimen slide frames */
.slide-frame { border: 1px solid rgba(0, 33, 71, 0.18); box-shadow: 0 3px 16px rgba(0, 33, 71, 0.12); border-radius: 4px; }


/* ---- v11: visual layer ---- */
/* Stat tiles */
.stats { display: flex; gap: 24px; margin: 34px 0 8px; flex-wrap: wrap; }
.stat { flex: 1 1 240px; background: #FFFFFF; border: 1px solid var(--line-light); border-top: 4px solid var(--gold); padding: 28px 26px 22px; }
.stat .stat-n { font-size: 62px; font-weight: 800; line-height: 1; color: var(--gold); letter-spacing: -0.02em; }
.stat .stat-l { font-weight: 600; color: var(--navy); margin-top: 10px; }
.stat-src { font-size: var(--t-small); color: var(--graphite); margin-top: 12px; }

/* Era numerals */
.era { display: flex; gap: 36px; align-items: flex-start; }
.era .era-num { flex: 0 0 190px; }
.era .era-num .n { font-size: 68px; font-weight: 800; line-height: 1; color: var(--gold); letter-spacing: -0.02em; }
.era .era-num .l { font-size: var(--t-small); font-weight: 600; color: rgba(253,252,249,0.75); margin-top: 8px; }
.era .era-body { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) { .era { flex-direction: column; gap: 10px; } .era .era-num { flex-basis: auto; } }

/* Lens grid */
.lens-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
.lens { background: #FFFFFF; border: 1px solid var(--line-light); border-top: 3px solid var(--gold); padding: 14px 18px; }
.lens .n { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); }
.lens .t { font-size: 15px; font-weight: 600; color: var(--navy); margin-top: 2px; }
.band.navy .lens .n { color: var(--gold); }
.band.navy .lens .t { color: var(--navy); }

/* Foundation tiles */
.tiles { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 10px; }
.tile { flex: 1 1 210px; background: #FFFFFF; border: 1px solid var(--line-light); border-top: 4px solid var(--gold); padding: 20px; }
.tile .n { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--gold); }
.tile .t { font-weight: 800; color: var(--navy); font-size: 17px; margin-top: 6px; }

/* Rating cards */
.rating-cards { display: flex; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.rating { flex: 1 1 220px; background: #FFFFFF; padding: 26px 24px; }
.rating.r1 { border-top: 3px solid var(--gold); }
.rating.r2 { border-top: 7px solid var(--gold); }
.rating.r3 { border-top: 12px solid var(--gold); }
.rating h3 { color: var(--navy); }
.rating p { color: var(--graphite); font-size: 15.5px; margin-top: 8px; }

/* Article-head watermark */
.article-head { position: relative; overflow: hidden; }
.article-head::before { content: ''; position: absolute; right: -3%; bottom: -34%; width: 320px; height: 320px; background: url('/assets/mark-cream.svg') no-repeat center / contain; opacity: 0.07; }
.article-head .wrap { position: relative; }

/* Inline diagrams */
.diagram { margin: 36px 0; }
.diagram svg { width: 100%; height: auto; display: block; }

/* v11.1: rating cards inside navy bands keep their own text colours */
.band.navy .rating h3 { color: var(--navy); }
.band.navy .rating p { color: var(--graphite); }


/* ===================================================================
   Commercial Experience Index, Edition One
   Rehomed from the standalone edition page. Every rule is namespaced
   under .cei so the article's components cannot collide with the shared
   site system. Shared tokens (--navy/--cream/--gold) are reused; the
   article's own greys and rules live as .cei-local custom properties.
   Renamed to dodge shared classes: .hero -> .cei-hero (site .hero is a
   full-viewport block), .stat -> .cei-stat (site .stat is a tile),
   .lens -> .cei-lens (site .lens is a bordered box).
   =================================================================== */
.cei {
  --cei-ink: #222222;
  --cei-soft: #4A4A4A;
  --cei-rule: #E4DFD3;
  --cei-tint: #EAEDF2;
  color: var(--cei-ink);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.cei h1, .cei h2, .cei h3 { font-weight: 800; line-height: 1.12; color: var(--navy); letter-spacing: -0.01em; }
.cei h2 { font-size: 1.9rem; margin: 0 0 0.2em; }
.cei h3 { font-size: 1.2rem; margin: 2.2em 0 0.4em; letter-spacing: 0.005em; }
.cei p { margin: 0 0 1.15em; }
.cei a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gold); }
.cei strong { font-weight: 700; }
.cei .num { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Masthead ---- */
.cei .masthead { background: var(--navy); color: var(--cream); padding: 34px 0 0; position: relative; overflow: hidden; }
.cei .masthead .wrap { position: relative; z-index: 2; }
.cei .cei-lockup { height: 44px; width: auto; display: block; }
.cei .masthead-mark { position: absolute; right: -90px; top: -40px; width: 420px; opacity: 0.06; z-index: 1; }
.cei .masthead-mark .mark-svg { width: 100%; height: auto; }
.cei .edition-line {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(198, 146, 20, 0.32);
  margin-top: 26px; padding: 14px 0 40px;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--gold);
}

/* ---- Hero ---- */
.cei .cei-hero { background: var(--navy); color: var(--cream); padding: 8px 0 76px; position: relative; z-index: 2; }
.cei .cei-hero h1 { color: var(--cream); font-size: 3.15rem; letter-spacing: -0.02em; margin-top: 0; margin-bottom: 0.5em; max-width: 15ch; }
.cei .cei-hero .standfirst { font-size: 1.34rem; line-height: 1.5; color: rgba(253, 252, 249, 0.9); max-width: 44ch; font-weight: 500; }
.cei .cei-hero .standfirst strong { color: var(--cream); font-weight: 700; }

/* ---- Body sections ---- */
.cei section { padding: 58px 0; border-bottom: 1px solid var(--cei-rule); }
.cei section.tight { padding: 44px 0; }
.cei .lede { font-size: 1.24rem; line-height: 1.55; color: var(--navy); font-weight: 600; max-width: 52ch; }
.cei .section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 12px; margin: 0 0 1.6em;
}
.cei .section-label::after { content: ""; flex: 1; height: 1px; background: var(--cei-rule); }

/* ---- The three findings ---- */
.cei .findings { display: grid; gap: 2px; background: var(--cei-rule); border: 1px solid var(--cei-rule); }
.cei .finding { background: var(--cream); padding: 30px 30px 32px; }
.cei .finding .fnum { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; color: var(--gold); display: block; margin-bottom: 12px; }
.cei .finding h3 { margin: 0 0 0.5em; font-size: 1.24rem; }
.cei .finding p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--cei-soft); }
.cei .finding p .cei-stat { color: var(--navy); font-weight: 700; }

/* ---- Table ---- */
.cei .table-scroll { overflow-x: auto; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.cei table.index { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 660px; }
.cei table.index caption { text-align: left; font-size: 0.8rem; color: var(--cei-soft); margin-bottom: 14px; font-weight: 500; }
.cei table.index th, .cei table.index td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--cei-rule); vertical-align: middle; }
.cei table.index thead th { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cei-soft); font-weight: 700; border-bottom: 2px solid var(--navy); }
.cei table.index th.c, .cei table.index td.c { text-align: center; width: 3.1em; font-variant-numeric: tabular-nums; }
.cei table.index td.c { color: var(--cei-soft); font-weight: 600; }
.cei table.index th.tot, .cei table.index td.tot { text-align: center; }
.cei table.index td.tot { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; font-size: 1.08rem; }
.cei table.index td.rank { color: var(--cei-soft); font-weight: 700; font-variant-numeric: tabular-nums; width: 2.2em; padding-left: 2px; }
.cei table.index td.brand { font-weight: 700; color: var(--navy); white-space: nowrap; padding-right: 16px; }
.cei table.index tr.top td.tot { color: var(--gold); }
.cei table.index tbody tr:hover td { background: var(--cei-tint); }
.cei table.index tbody tr:hover td.c { color: var(--navy); }

/* ---- Score bands ---- */
.cei .bands { display: grid; grid-template-columns: auto 1fr; gap: 0 22px; margin-top: 26px; font-size: 0.9rem; }
.cei .bands dt { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; padding: 9px 0; border-top: 1px solid var(--cei-rule); white-space: nowrap; }
.cei .bands dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--cei-rule); color: var(--cei-soft); }
.cei .bands dt:first-of-type, .cei .bands dd:first-of-type { border-top: none; }

/* ---- Lens blocks ---- */
.cei .cei-lens { margin: 0 0 6px; }
.cei .lens-head { display: flex; align-items: baseline; gap: 14px; margin: 2.4em 0 0.3em; }
.cei .lens-head .lens-no { font-size: 0.8rem; font-weight: 800; color: var(--gold); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.cei .lens-head h3 { margin: 0; font-size: 1.28rem; }
.cei .lens-head .wt { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cei-soft); }
.cei .lens-q { color: var(--cei-soft); font-size: 0.96rem; font-style: italic; margin: 0 0 1em; max-width: 60ch; }
.cei .cei-lens p { font-size: 0.98rem; }
.cei .cei-lens p .b { font-weight: 700; color: var(--navy); }

/* ---- Spotlight (winners and cautionary tales) ---- */
.cei .spotlight { background: var(--navy); color: var(--cream); border: none; }
.cei .spotlight .section-label { color: var(--gold); }
.cei .spotlight .section-label::after { background: rgba(253, 252, 249, 0.18); }
.cei .spotlight h2 { color: var(--cream); }
.cei .spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(253, 252, 249, 0.14); border: 1px solid rgba(253, 252, 249, 0.14); margin-top: 6px; }
.cei .spot { background: var(--navy); padding: 28px 26px 30px; }
.cei .spot .spot-score { font-size: 2.5rem; font-weight: 800; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.cei .spot .spot-brand { font-size: 1.15rem; font-weight: 800; color: var(--cream); margin: 4px 0 2px; }
.cei .spot .spot-tag { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(253, 252, 249, 0.6); font-weight: 700; margin-bottom: 14px; }
.cei .spot p { font-size: 0.92rem; line-height: 1.55; color: rgba(253, 252, 249, 0.86); margin: 0; }
.cei .spot p + p { margin-top: 0.9em; }
.cei .spot .spot-cwv { font-size: 0.78rem; color: rgba(253, 252, 249, 0.66); margin-top: 14px; font-weight: 600; letter-spacing: 0.02em; }
.cei .spot .spot-cwv .pass { color: #8FC79B; font-weight: 700; }

/* ---- Per-brand roll ---- */
.cei .roll { margin-top: 8px; }
.cei .brandcard { padding: 22px 0; border-top: 1px solid var(--cei-rule); display: grid; grid-template-columns: 64px 1fr; gap: 0 22px; align-items: start; }
.cei .brandcard:first-child { border-top: none; }
.cei .brandcard .bc-score { font-size: 1.7rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; }
.cei .brandcard .bc-score .of { display: block; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--cei-soft); font-weight: 700; margin-top: 3px; }
.cei .brandcard h3 { margin: 0 0 0.15em; font-size: 1.08rem; }
.cei .brandcard .bc-type { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.7em; }
.cei .brandcard p { margin: 0; font-size: 0.92rem; line-height: 1.52; color: var(--cei-soft); }
.cei .brandcard p .wnw { font-weight: 700; color: var(--navy); }

/* ---- Scope ---- */
.cei .scope { background: var(--cei-tint); border: 1px solid var(--cei-rule); padding: 28px 30px; border-radius: 2px; margin-top: 8px; }
.cei .scope h3 { margin-top: 0; font-size: 1rem; }
.cei .scope p { font-size: 0.88rem; color: var(--cei-soft); margin-bottom: 0.8em; }
.cei .scope .rule-line { font-weight: 700; color: var(--navy); }
.cei .pdf-link { margin-top: 1.4em; font-size: 0.9rem; }

/* ---- Close ("all fur coat and no knickers") ---- */
.cei .close { background: var(--navy); color: var(--cream); text-align: center; padding: 82px 0; border: none; position: relative; overflow: hidden; }
.cei .close-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; opacity: 0.07; }
.cei .close-mark .mark-svg { width: 100%; height: auto; }
.cei .close .wrap { position: relative; z-index: 2; }
.cei .close .kicker { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 1.6em; }
.cei .close blockquote { margin: 0 auto; max-width: 20ch; font-size: 2.4rem; font-weight: 800; line-height: 1.18; color: var(--cream); letter-spacing: -0.01em; }
.cei .close .attrib { margin-top: 1.6em; font-size: 0.86rem; color: rgba(253, 252, 249, 0.6); font-style: italic; }
.cei .close .tagline { margin-top: 3em; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(253, 252, 249, 0.5); font-weight: 700; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .cei { font-size: 16.5px; }
  .cei .cei-hero h1 { font-size: 2.2rem; }
  .cei .cei-hero .standfirst { font-size: 1.12rem; }
  .cei h2 { font-size: 1.55rem; }
  .cei .findings { grid-template-columns: 1fr; }
  .cei .spot-grid { grid-template-columns: 1fr; }
  .cei .close blockquote { font-size: 1.8rem; }
  .cei .brandcard { grid-template-columns: 52px 1fr; gap: 0 16px; }
}

/* ---- CEI: wide index table (Edition Two, eight lenses) ---- */
.cei table.index.wide { min-width: 700px; font-size: 0.84rem; }
.cei table.index.wide th, .cei table.index.wide td { padding: 11px 5px; }
.cei table.index.wide th.c, .cei table.index.wide td.c { width: 2.5em; }
.cei table.index.wide td.brand { padding-right: 8px; font-size: 0.88rem; }
.cei table.index td.plat { color: var(--cei-soft); font-size: 0.74rem; font-weight: 600; white-space: nowrap; padding-right: 12px; }
.cei table.index th.plat { white-space: nowrap; }

/* ---- CEI: download route ---- */
.cei .dl-hero { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cei .dl-hero .btn { color: var(--navy); text-decoration: none; }
.cei .dl-hero .dl-meta { font-size: 0.82rem; letter-spacing: 0.02em; color: rgba(253, 252, 249, 0.66); font-weight: 600; }

.cei .download {
  border: 1px solid var(--cei-rule); border-top: 4px solid var(--gold);
  background: #FFFFFF; padding: 32px 34px 34px; margin-top: 8px;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.cei .download h3 { margin: 0 0 0.4em; font-size: 1.32rem; }
.cei .download p { margin: 0; font-size: 0.95rem; color: var(--cei-soft); max-width: 52ch; }
.cei .download .dl-meta { display: block; margin-top: 0.9em; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cei-soft); font-weight: 700; }
.cei .download .btn { color: var(--navy); text-decoration: none; white-space: nowrap; }
.cei .download .btn:hover { background: #d9a223; }

.cei .editions { margin-top: 26px; font-size: 0.9rem; color: var(--cei-soft); border-top: 1px solid var(--cei-rule); padding-top: 18px; }

@media (max-width: 720px) {
  .cei .download { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px 28px; }
  .cei .download .btn { display: block; text-align: center; }
}


/* ===============================================================
   SCHEMATICS
   Three diagrams rebuilt from the validated design reference to
   live inside the 800px column: a map (the two doors), an
   instrument (the Review's convergence), a gauge (the Cat's
   Whiskers funnel). Navy line work on a white plate. Amber gold is
   reserved strictly for counted numbers. No icons anywhere.
   Percentage-based rules so the line work survives every width.
   =============================================================== */

.sch {
  background: #FFFFFF; border: 2px solid var(--navy);
  padding: 38px 28px 42px; margin-top: 30px;
}
.sch * { text-wrap: pretty; }

/* Shared parts */
.sch-cap {
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--graphite); line-height: 1.8;
}
.sch-count {
  font-size: 26px; font-weight: 800; color: var(--gold);
  line-height: 1; letter-spacing: -0.02em;
}
.sch-tally { display: flex; align-items: baseline; gap: 9px; }
.sch h3 { font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.sch p { font-size: 13.5px; color: var(--graphite); line-height: 1.6; }
/* The plate is always a light surface. It never takes the band's palette. */
.band.navy .sch h1, .band.navy .sch h2, .band.navy .sch h3 { color: var(--navy); }
.band.navy .sch p { color: var(--graphite); }
.band.navy .sch .sch-recognition p, .band.navy .sch .sch-recognition .sch-cap { color: var(--cream); }
.sch-note {
  font-size: var(--t-small); color: var(--graphite);
  line-height: 1.7; letter-spacing: 0.04em; margin-top: 18px;
}
.band.navy .sch-note { color: rgba(253, 252, 249, 0.75); }

/* Line work. Rails carry the logic between stages. */
.sch-rail { position: relative; }
.sch-rail .v, .sch-rail .h, .sch-rail .dot, .sch-rail .dotx { position: absolute; }
.sch-rail .v, .sch-rail .h { background: var(--navy); }
.sch-rail .v { width: 2px; margin-left: -1px; }
.sch-rail .h { height: 2px; }
.sch-rail .dot { border-left: 2px dotted var(--navy); width: 0; margin-left: -1px; }
.sch-rail .dotx { border-top: 2px dotted var(--navy); height: 0; }
.sch-railtext {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--graphite); text-align: center;
}

/* ---- Element 01: the two doors ---- */
.sch-doors { display: flex; flex-direction: column; align-items: center; }
.sch-recognition {
  background: var(--navy); color: var(--cream);
  padding: 22px 28px 24px; width: 100%; max-width: 560px;
}
.sch-recognition .sch-cap { color: var(--cream); }
.sch-recognition p {
  font-size: var(--t-sub); font-weight: 800; color: var(--cream);
  line-height: 1.28; margin-top: 8px;
}
.sch-fork { width: 100%; height: 62px; }
.sch-fork .v1 { left: 50%; top: 0; height: 26px; }
.sch-fork .h1 { left: 25%; right: 25%; top: 24px; }
.sch-fork .v2 { left: 25%; top: 24px; height: 38px; }
.sch-fork .v3 { left: 75%; top: 24px; height: 38px; }
.sch-fork .sch-railtext {
  position: absolute; left: 0; right: 0; top: 36px;
  background: #FFFFFF; padding: 0 10px; width: max-content;
  margin: 0 auto; z-index: 1;
}
.sch-pair {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 40px; align-items: stretch;
}
.sch-door { display: flex; flex-direction: column; }
.sch-door .sch-door-card { flex: 1 0 auto; }
.sch-door > .sch-q {
  font-size: 14px; color: var(--ink); line-height: 1.55;
  margin-top: 8px; padding-bottom: 16px; min-height: 74px;
}
.sch-door-card {
  border: 2px solid var(--navy); background: #FFFFFF;
  padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.sch-door-card h3 { font-size: 21px; line-height: 1.15; }
.sch-door-axis {
  font-size: 9.5px !important; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--navy) !important; line-height: 1.8;
  padding-top: 8px; border-top: 1px solid var(--navy);
}
.sch-door-method {
  border: 2px solid var(--navy); border-top: 0;
  border-bottom: 6px solid var(--navy); padding: 18px 22px 20px;
}
.sch-method-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-top: 8px; flex-wrap: wrap;
}
.sch-method-row .name { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.sch-onward { width: 100%; height: 78px; margin-top: 4px; }
.sch-onward .sch-railtext { position: absolute; left: 0; right: 0; top: 4px; }
.sch-onward .v2 { left: 25%; top: 32px; height: 26px; }
.sch-onward .v3 { left: 75%; top: 32px; height: 26px; }
.sch-onward .dotx { left: 16.6%; right: 16.6%; top: 58px; }
.sch-onward .d1 { left: 16.6%; top: 58px; height: 20px; }
.sch-onward .d2 { left: 50%; top: 58px; height: 20px; }
.sch-onward .d3 { left: 83.4%; top: 58px; height: 20px; }
.sch-outcomes {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; align-items: start;
}
.sch-outcome {
  border: 2px solid var(--navy); background: #FFFFFF;
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 7px;
}
.sch-outcome p { font-size: 12.5px; }
.sch-outcome-end { border: 0; border-top: 6px solid var(--navy); padding: 14px 0 0; }

/* ---- Element 02: the Review's convergence ---- */
.sch-converge {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 0.85fr);
  align-items: center; gap: 0;
}
.sch-lenses { grid-column: 1; grid-row: 1; }
.sch-field { grid-column: 2; grid-row: 1; }
.sch-converge-cap { grid-column: 1 / 3; grid-row: 2; }
.sch-reading { grid-column: 3; grid-row: 1 / span 2; }
.sch-lenses { display: flex; flex-direction: column; }
.sch-lens {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; height: 38px;
}
.sch-lens .t { font-size: 13px; font-weight: 800; color: var(--navy); text-align: right; line-height: 1.2; }
.sch-lens .n { font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--graphite); }
.sch-lens .tick { width: 12px; height: 2px; background: var(--navy); flex: none; }
.sch-field { position: relative; align-self: stretch; }
.sch-field svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sch-converge-cap { margin-top: 16px; font-size: 9px; }
.sch-reading {
  padding-left: 26px; border-left: 2px solid var(--navy);
  align-self: stretch; display: flex; flex-direction: column;
  justify-content: center; gap: 12px;
}
.sch-reading .sch-count { font-size: 30px; }
.sch-reading h3 { font-size: 23px; line-height: 1.12; }
.sch-reading .hr { height: 1px; background: var(--navy); }

/* ---- Element 03: the Cat's Whiskers funnel ---- */
.sch-funnel { display: flex; flex-direction: column; align-items: center; }
.sch-staves {
  width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.sch-stave { border-top: 4px solid var(--navy); padding-top: 10px; }
.sch-stave .n { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--graphite); }
.sch-stave .t { font-size: 11.5px; font-weight: 800; color: var(--navy); line-height: 1.25; margin-top: 7px; }
.sch-gate { position: relative; width: 100%; margin-top: 20px; }
.sch-gate > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sch-gate-inner {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 15px; padding: 55px 0 188px;
}
/* Everything inside the funnel has to clear the converging walls. */
.sch-gate-inner .sch-cap { max-width: 54%; text-align: center; }
.sch-checks {
  display: grid; grid-template-columns: repeat(12, 7px);
  grid-auto-rows: 7px; gap: 6px;
}
.sch-checks span { background: var(--navy); }
.sch-gap { width: 17%; min-width: 128px; margin: 8px auto 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sch-gap .arrows { display: flex; align-items: center; width: 100%; gap: 5px; }
.sch-gap .arrows .line { flex: 1; height: 1px; background: var(--navy); }
.sch-gap .arrows .l, .sch-gap .arrows .r { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.sch-gap .arrows .l { border-right: 7px solid var(--navy); }
.sch-gap .arrows .r { border-left: 7px solid var(--navy); }
.sch-ratings {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 12px; margin-top: 34px;
}
.sch-rating {
  min-height: 62px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 12px 22px;
}
.sch-rating .t { font-size: 18px; font-weight: 800; line-height: 1.2; }
.sch-rating .a { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.sch-r1 { width: 100%; max-width: 520px; background: var(--navy); }
.sch-r1 .t, .sch-r1 .a { color: var(--cream); }
.sch-r2 { width: 100%; max-width: 440px; border: 2px solid var(--navy); }
.sch-r2 .t { color: var(--navy); } .sch-r2 .a { color: var(--graphite); }
.sch-r3 {
  width: 100%; max-width: 360px; border: 2px solid var(--navy);
  justify-content: center;
  background: repeating-linear-gradient(45deg, var(--navy) 0 2px, #FFFFFF 2px 8px);
}
.sch-r3 .inner {
  background: #FFFFFF; padding: 7px 18px; display: flex;
  flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.sch-r3 .t { color: var(--navy); } .sch-r3 .a { color: var(--graphite); }

/* ---- Narrow widths. The line work stands down, the logic stays. ---- */
@media (max-width: 640px) {
  .sch { padding: 30px 20px 34px; }
  .sch-pair { grid-template-columns: 1fr; gap: 34px; }
  .sch-fork { height: 40px; }
  .sch-fork .h1, .sch-fork .v2, .sch-fork .v3 { display: none; }
  .sch-fork .v1 { height: 14px; }
  .sch-fork .sch-railtext { top: 20px; }
  .sch-onward { height: 62px; }
  .sch-onward .dotx, .sch-onward .d1, .sch-onward .d3, .sch-onward .v2, .sch-onward .v3 { display: none; }
  .sch-onward .d2 { top: 32px; height: 30px; }
  .sch-outcomes { grid-template-columns: 1fr; gap: 14px; }
  .sch-outcome-end { margin-top: 4px; }

  .sch-converge { grid-template-columns: 1fr; gap: 0; }
  .sch-lenses, .sch-field, .sch-converge-cap, .sch-reading { grid-column: auto; grid-row: auto; }
  .sch-lens { justify-content: flex-start; height: auto; padding: 7px 0; }
  .sch-lens .t { text-align: left; order: 3; }
  .sch-lens .n { order: 2; }
  .sch-lens .tick { order: 1; }
  .sch-field { height: 56px; }
  .sch-converge-cap { margin-top: 12px; }
  .sch-reading {
    padding-left: 0; padding-top: 22px;
    border-left: 0; border-top: 2px solid var(--navy);
  }

  .sch-staves { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .sch-gate-inner { padding: 34px 0 190px; }
  .sch-gate-inner .sch-cap { max-width: 52%; }
  .sch-checks { grid-template-columns: repeat(9, 7px); }
  .sch-rating { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .sch-r1, .sch-r2, .sch-r3 { max-width: none; }
  .sch-r3 { align-items: center; }
}

/* ---- Element 04: evidence to constraint ---- */
.sch-narrow { display: flex; flex-direction: column; align-items: center; }
.sch-stage {
  width: 100%; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 20px; padding-bottom: 14px;
}
.sch-groups { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sch-groups .sch-group:last-child { grid-column: span 3; }
.sch-group { padding-bottom: 8px; }
.sch-group .sch-cap { display: block; font-size: 9px; letter-spacing: 0.18em; }
.sch-group .bar { display: block; height: 2px; background: var(--navy); margin-top: 6px; }
.sch-evidence { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sch-ev {
  border: 2px solid var(--navy); border-top: 6px solid var(--navy);
  background: #FFFFFF; padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.sch-ev .n, .sch-fd .n { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--graphite); }
.sch-ev h3 { font-size: 15px; }
.sch-ev p, .sch-fd p { font-size: 12px; }
.sch-scored { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sch-fd {
  border: 2px solid var(--navy); border-bottom: 6px solid var(--navy);
  background: #FFFFFF; padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.sch-fd h3 { font-size: 13px; line-height: 1.25; }
.sch-drop1 { width: 100%; height: 74px; }
.sch-drop1 .a { left: 12.5%; top: 0; height: 34px; }
.sch-drop1 .b { left: 37.5%; top: 0; height: 34px; }
.sch-drop1 .c { left: 62.5%; top: 0; height: 34px; }
.sch-drop1 .d { left: 87.5%; top: 0; height: 34px; }
.sch-drop1 .h1 { left: 12.5%; right: 12.5%; top: 32px; }
.sch-drop1 .sch-railtext { position: absolute; left: 0; right: 0; top: 46px; }
.sch-drop2 { width: 100%; height: 92px; }
.sch-drop2 .a { left: 10%; top: 0; height: 32px; }
.sch-drop2 .b { left: 30%; top: 0; height: 32px; }
.sch-drop2 .c { left: 50%; top: 0; height: 32px; }
.sch-drop2 .d { left: 70%; top: 0; height: 32px; }
.sch-drop2 .e { left: 90%; top: 0; height: 32px; }
.sch-drop2 .h1 { left: 10%; right: 10%; top: 30px; }
.sch-drop2 .stem { left: 50%; top: 30px; height: 62px; }
.sch-drop2 .sch-railtext { position: absolute; left: 54%; right: 0; top: 50px; text-align: left; }
.sch-finding {
  width: 100%; max-width: 420px; background: var(--navy);
  padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 9px;
}
.sch-finding .sch-cap, .sch-finding h3, .sch-finding p { color: var(--cream); }
.band.navy .sch .sch-finding .sch-cap,
.band.navy .sch .sch-finding h3,
.band.navy .sch .sch-finding p { color: var(--cream); }
.sch-finding h3 { font-size: 22px; line-height: 1.2; }
.sch-finding p { font-size: 12.5px; }
.sch-plate-note {
  width: 100%; margin-top: 32px; padding-top: 26px;
  border-top: 2px solid var(--navy);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--graphite); line-height: 1.9;
}
.band.navy .sch .sch-plate-note { color: var(--graphite); }

@media (max-width: 640px) {
  /* The two-column stack breaks the grouping, so the group labels stand down. */
  .sch-groups { display: none; }
  .sch-evidence { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sch-scored { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sch-drop1, .sch-drop2 { height: 62px; }
  .sch-drop1 .a, .sch-drop1 .b, .sch-drop1 .c, .sch-drop1 .d, .sch-drop1 .h1,
  .sch-drop2 .a, .sch-drop2 .b, .sch-drop2 .c, .sch-drop2 .d, .sch-drop2 .e, .sch-drop2 .h1 { display: none; }
  .sch-drop2 .stem { top: 0; height: 24px; }
  .sch-drop1 .sch-railtext { top: 30px; }
  .sch-drop2 .sch-railtext { left: 0; top: 30px; text-align: center; }
  .sch-stage { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* A contact close longer than the homepage's wraps instead of overflowing. */
.contact h2.close-wrap {
  white-space: normal; font-size: var(--t-title);
  max-width: 30ch; margin-left: auto; margin-right: auto;
}

/* ---- Lists in prose. The global reset strips them, so restore them here.
       First used by the 404 and privacy pages; no existing page carries a list. ---- */
.article-body ul, .article-body ol { margin: 0 0 16px 22px; }
.article-body li { margin-bottom: 8px; padding-left: 4px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body p + ul, .article-body p + ol { margin-top: -6px; }
.article-body h2 + ul, .article-body h2 + ol { margin-top: 4px; }

/* The privacy link in the legal footer. Inherited cream would not read as a
   link at all, and navy would be invisible on the navy contact band. */
.legal a { color: rgba(253, 252, 249, 0.85); border-bottom: 1px solid var(--gold); padding-bottom: 1px; text-decoration: none; }
.legal a:hover { color: var(--gold); }

/* ---- Comparison table in the article body (used on /independent/) ---- */
.article-body .table-scroll { overflow-x: auto; margin: 22px 0 8px; -webkit-overflow-scrolling: touch; }
.article-body table.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 560px; }
.article-body table.compare caption { text-align: left; font-size: var(--t-small); color: var(--graphite); margin-bottom: 12px; font-weight: 500; }
.article-body table.compare th, .article-body table.compare td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.article-body table.compare thead th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--navy); }
.article-body table.compare tbody th { font-weight: 600; color: var(--navy); }
.article-body table.compare td:last-child { font-weight: 700; color: var(--navy); }

/* ---- Pre-peak checklist: checkbox glyph lists (Golden Quarter playbook) ---- */
.article-body ul.checks { list-style: none; margin: 0 0 16px; padding-left: 0; }
.article-body ul.checks li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.article-body ul.checks li::before { content: '\25A1'; position: absolute; left: 0; top: -1px; font-size: 1.15rem; line-height: 1.4; color: var(--gold); }

/* ---- Stage-ceiling bar chart (Golden Quarter playbook) ---- */
.article-body .chart-wrap { overflow-x: auto; margin: 30px 0 6px; -webkit-overflow-scrolling: touch; }
.article-body .chart-wrap svg { display: block; min-width: 560px; width: 100%; height: auto; }
.article-body .chart-note { font-size: var(--t-small); color: var(--graphite); margin: 0 0 4px; }
.article-body .chart-note strong { color: var(--navy); }

/* ============================================================================
   Layout system tokens, from the Claude Design layout document, 7 September 2026.
   Deliverable 1 of the design brief: named so they can be used without
   interpretation. Additive only. Nothing below is referenced yet, so this block
   changes no page; the components that consume it land in later stages.

   Source of truth is the design document's own tokens artboard, NOT the generic
   _ds/tokens/*.css scaffolding in the handoff bundle, which carries different
   widths (1200/760) and pulls Montserrat from Google Fonts. This site self-hosts
   Montserrat from /assets/fonts/ and makes no third-party request; that stands.
   ========================================================================== */
:root {
  /* Width. Two tiers, one page. Bands run full bleed; content takes the tier of
     what sits inside it. Prose is left-aligned to the wide tier, not centred
     within it, so a page reading top to bottom keeps one left edge. */
  --measure-prose: 880px;
  /* The rail never yields, so on the twenty-three series pages the measure
     is what the tier has left after the 380 rail and the 56 gap: 704. */
  --measure-series: calc(var(--measure-wide) - 2 * var(--gutter-page) - 380px - 56px);
  --measure-wide: 1140px;
  --measure-wide-xl: 1280px;   /* steps up once at >=1680 viewport, then stops */
  --gutter-page: 48px;
  --band-pad-y: 96px;
  --grid-wide-gap: 24px;

  /* Type scale. Montserrat 500 / 600 / 800 only. Desktop values; the mobile
     values are in the max-width: 700px block below. */
  --type-hero: 800 52px/1.08 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-hero-track: -0.02em;
  --type-h1: 800 40px/1.12 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-h2: 800 28px/1.2 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-h3: 800 20px/1.35 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-strapline: 600 22px/1.4 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-standfirst: 500 20px/1.65 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-body-new: 500 18px/1.7 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-small-new: 500 15px/1.7 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-label: 500 12px/1.2 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --type-label-track: 0.16em;
  --type-figure: 800 56px/1 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* Spacing and surface. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-band: 96px;
  --card-pad: 32px;
  --card-gap: 24px;

  --radius-control: 2px;
  --radius-card: 3px;
  --rule-hairline: 1px solid rgba(0, 33, 71, 0.12);
  --rule-strong: 2px solid var(--navy);
  --rule-accent-h: 3px;        /* gold, 44px wide, under section eyebrows */
  --rule-accent-w: 44px;
  --keyline-finding: 6px solid var(--gold);   /* left keyline on findings */
  --shadow-card: 0 1px 2px rgba(0, 33, 71, 0.06);

  /* The one gold button. Nav, end of hero, close of a service page or tool
     result. One instance per screen; every other forward move is an outlined
     navy control or an underlined link. */
  --btn-pad: 17px 28px;
  --btn-track: 0.16em;
  --btn-bg: var(--gold);
  --btn-bg-hover: #A87A0F;
  --btn-fg: var(--navy);
  --btn-transition: 140ms;
  --focus-ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--gold);

  /* Sticky navigation bar. */
  --nav-h: 76px;
  --nav-h-mobile: 64px;
  --nav-mark-h: 36px;          /* monogram, not the lockup, below 40px */

  /* Quiet graphite for labels and numbers. 5.2:1 on cream, 5.3:1 on white,
     so 12px uppercase still clears AA. */
  --graphite-soft: #6B6B6B;
}

@media (max-width: 700px) {
  :root {
    --gutter-page: 20px;
    --band-pad-y: 56px;
    --type-hero: 800 32px/1.12 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-h1: 800 28px/1.16 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-h2: 800 22px/1.25 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-h3: 800 18px/1.35 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-strapline: 600 18px/1.4 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-standfirst: 500 17px/1.65 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-body-new: 500 16px/1.7 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-small-new: 500 14px/1.65 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-label: 500 11px/1.2 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --type-figure: 800 40px/1 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  }
}

/* ============================================================================
   STAGE B: the two-tier width system.
   The site was built to one 800px column when it had six pages. It now has
   forty-seven. .wrap becomes the wide tier; prose-level children hold 720 and
   stay left aligned to it, so a page reading top to bottom keeps one left edge.
   Wide-tier components (stats, cards, tiles, diagrams, tables, charts) are not
   in the prose list, so they take the full tier.
   ========================================================================== */
.wrap { max-width: var(--measure-wide); padding-left: var(--gutter-page); padding-right: var(--gutter-page); }
@media (min-width: 1680px) { .wrap { max-width: var(--measure-wide-xl); } }
@media (min-width: 1680px) { :root { --measure-series: calc(var(--measure-wide-xl) - 2 * var(--gutter-page) - 380px - 56px); } }

/* The prose list that stood here is replaced by the measure rule at the foot
   of this file, which caps by default rather than by enumeration. */
/* The article head keeps its own measure: H1 at 20ch, standfirst at the prose tier. */
.article-head .standfirst { max-width: var(--measure-prose); margin-top: 18px; font: var(--type-standfirst); color: rgba(253, 252, 249, 0.90); }

/* ============================================================================
   STAGE C: the navigation.
   Six links and one gold button on a cream bar, the monogram as home. The
   Board Briefing, Who this is for, Sectors, How we are paid and the chairman's
   office leave the bar and are carried in the footer row on every page, and in
   the mobile menu, so nothing is more than two taps away.
   ========================================================================== */
.nav { background: var(--cream); border-bottom: var(--rule-hairline); position: sticky; top: 0; z-index: 50; }
.nav .wrap { max-width: var(--measure-wide); min-height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding-top: 0; padding-bottom: 0; }
@media (min-width: 1680px) { .nav .wrap { max-width: var(--measure-wide-xl); } }
.nav-brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.nav-brand img { height: var(--nav-mark-h); width: auto; }

.nav-menu { margin-left: auto; display: flex; align-items: center; gap: 26px; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav .nav-links a { color: var(--navy); text-decoration: none; font: 600 13px/1.2 'Montserrat', -apple-system, 'Segoe UI', sans-serif; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav .nav-links a:hover { color: var(--gold); }
.nav .nav-links a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--navy); }
.nav-secondary { display: none; }

.nav-cta { flex: 0 0 auto; background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
  font: 600 12px/1 'Montserrat', -apple-system, 'Segoe UI', sans-serif; letter-spacing: var(--btn-track);
  text-transform: uppercase; padding: 14px 22px; border-radius: var(--radius-control);
  transition: background var(--btn-transition); white-space: nowrap; }
.nav-cta:hover { background: var(--btn-bg-hover); }
.nav-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-cta-short { display: none; }

.nav-toggle { display: none; margin-left: auto; background: none; border: none; cursor: pointer;
  font: 600 13px/1 'Montserrat', -apple-system, 'Segoe UI', sans-serif; color: var(--navy);
  align-items: center; gap: 9px; padding: 10px 0; }
.nav-toggle-glyph { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.nav-toggle-glyph::before, .nav-toggle-glyph::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); }
.nav-toggle-glyph::before { top: -6px; } .nav-toggle-glyph::after { top: 6px; }

/* Footer navigation row, every page. The five pages that left the bar. */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0 0 22px; }
.footer-nav a { color: rgba(253, 252, 249, 0.75); text-decoration: none; font: 600 13px/1.4 'Montserrat', -apple-system, 'Segoe UI', sans-serif; }
.footer-nav a:hover { color: var(--gold); }

@media (max-width: 860px) {
  .nav .wrap { min-height: var(--nav-h-mobile); gap: 14px; }
  .nav-toggle { display: flex; }
  .nav-cta { order: 3; padding: 12px 16px; }
  .nav-cta-long { display: none; } .nav-cta-short { display: inline; }
  /* Enhanced only: without JS the menu stays in flow, so every link is reachable. */
  .nav[data-js] .nav-menu { display: none; }
  .nav[data-js].open .nav-menu { display: flex; position: fixed; inset: var(--nav-h-mobile) 0 0;
    background: var(--navy); flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter-page) 40px; overflow-y: auto; animation: navfade 200ms ease-out; }
  .nav[data-js].open .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav[data-js].open .nav-links a { color: var(--cream); font-size: 20px; font-weight: 600;
    padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
  .nav[data-js].open .nav-links a[aria-current="page"] { color: var(--gold); }
  .nav[data-js].open .nav-secondary { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 22px; }
  .nav[data-js].open .nav-secondary a { color: rgba(253, 252, 249, 0.72); text-decoration: none; font-size: 14px; font-weight: 600; }
  .nav .wrap { padding-left: var(--gutter-page); padding-right: var(--gutter-page); }
}
@keyframes navfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav[data-js].open .nav-menu { animation: none; } }

/* ============================================================================
   STAGE D: the template page.
   Four series share one skeleton: navy head, cream body, one eyebrow. On the
   foundation pages the checks run left at the prose measure and the three
   readiness ratings run right in a 380 column that sticks below the nav, so a
   reader on check 06 still has the rating language in view. Series navigation
   sits above the page-specific close, because a reader who has decided to move
   on within the set should not have to pass the ask to do it.
   ========================================================================== */

/* Two columns, but only where there is room for both. Below 1000 the rail
   falls under the checks and stops sticking. */
.tmpl-cols { margin-top: 44px; }
.tmpl-main { max-width: var(--measure-prose); min-width: 0; }
.tmpl-main > h2:first-child { margin-top: 0; }
.tmpl-rail { margin-top: var(--space-7); }
/* Two columns only where the wide tier is actually available: 1140 of content
   plus two 48 gutters. Below that the rail falls under the checks and the
   sticky behaviour comes off with it. */
@media (min-width: 1240px) {
  .tmpl-cols { display: grid; grid-template-columns: minmax(0, var(--measure-prose)) 380px; gap: 56px; align-items: start; }
  .tmpl-rail { position: sticky; top: calc(var(--nav-h) + 20px); margin-top: 0; }
}

/* The checks, numbered. The wording is the page's own; the number is CSS. */
.article-body ol.checks-numbered {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  border-top: var(--rule-hairline); counter-reset: chk;
}
.article-body ol.checks-numbered li {
  counter-increment: chk; display: grid; grid-template-columns: 40px 1fr; gap: 20px;
  margin: 0; padding: 20px 0; border-bottom: var(--rule-hairline);
}
.article-body ol.checks-numbered li::before {
  content: counter(chk, decimal-leading-zero);
  font: 600 14px/1.6 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  color: var(--graphite-soft); font-variant-numeric: tabular-nums;
}
.article-body ol.checks-numbered li strong { font-weight: 600; color: var(--navy); font-size: 18px; line-height: 1.6; }
@media (max-width: 700px) {
  .article-body ol.checks-numbered li { grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; }
  .article-body ol.checks-numbered li strong { font-size: 16px; }
}

/* The rail. Severity is carried by weight and position, hairline to gold
   keyline to solid navy. No red, amber or green anywhere in the system. */
.article-body .rail-label {
  font: var(--type-label); letter-spacing: var(--type-label-track); text-transform: uppercase;
  color: var(--graphite-soft); margin: 0 0 var(--space-4);
}
.rail-card {
  background: #FFFFFF; border: var(--rule-hairline); border-left: 6px solid var(--navy);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 22px; margin-bottom: var(--space-4);
}
.rail-card-risk { border-left-color: var(--gold); }
.rail-card-first { background: var(--navy); border-color: var(--navy); border-left-color: var(--navy); box-shadow: none; }
.article-body .rail-card h3 { font: 800 18px/1.3 'Montserrat', -apple-system, 'Segoe UI', sans-serif; color: var(--navy); margin: 0; }
.article-body .rail-card p { font: 500 14px/1.65 'Montserrat', -apple-system, 'Segoe UI', sans-serif; color: var(--graphite); margin: 8px 0 0; }
.article-body .rail-card-first h3 { color: var(--cream); }
.article-body .rail-card-first p { color: rgba(253, 252, 249, 0.72); }

/* Series navigation. Previous and next within one set, at the prose measure. */
.series-nav {
  display: flex; justify-content: space-between; gap: 32px;
  max-width: var(--measure-prose); margin-top: 56px;
  border-top: var(--rule-hairline); border-bottom: var(--rule-hairline); padding: 20px 0;
}
.series-nav a { display: flex; flex-direction: column; gap: 6px; max-width: 46%; text-decoration: none; }
.series-nav .sn-next { text-align: right; margin-left: auto; align-items: flex-end; }
.series-nav .sn-label {
  font: 500 11px/1.2 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: var(--type-label-track); text-transform: uppercase; color: var(--graphite-soft);
}
.series-nav .sn-title { font: 600 15px/1.4 'Montserrat', -apple-system, 'Segoe UI', sans-serif; color: var(--navy); }
.series-nav a:hover .sn-title { color: var(--gold); }
@media (max-width: 700px) {
  .series-nav { flex-direction: column; gap: 16px; }
  .series-nav a { max-width: none; }
  .series-nav .sn-next { text-align: left; margin-left: 0; align-items: flex-start; }
}

/* The page-specific close. One ask, matched to the series the reader is in. */
.band.close { background: #FFFFFF; border-top: var(--rule-hairline); padding: 64px 0; }
.band.close .wrap { display: grid; grid-template-columns: minmax(0, var(--measure-prose)) minmax(max-content, 1fr); gap: 56px; align-items: center; }
.band.close h2 { margin: 0; font: var(--type-h2); letter-spacing: -0.01em; color: var(--navy); }
.band.close p { margin: 14px 0 0; font: var(--type-body-new); color: var(--graphite); }
.band.close .close-act { margin: 0; justify-self: start; }
.btn-outline {
  display: inline-block; background: none; color: var(--navy); border: 1px solid var(--navy);
  font: 600 12px/1 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: var(--btn-track); text-transform: uppercase; white-space: nowrap;
  padding: 17px 26px; border-radius: var(--radius-control); text-decoration: none;
  transition: background var(--btn-transition), color var(--btn-transition);
}
.btn-outline:hover { background: var(--navy); color: var(--cream); }
.btn-outline:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 860px) {
  .band.close { padding: 48px 0; }
  .band.close .wrap { grid-template-columns: 1fr; gap: 24px; }
  .band.close .close-act .btn-outline { display: block; text-align: center; white-space: normal; }
}

/* ---- The series map ----------------------------------------------------- */
/* Pages outside the Cat's Whiskers have no ratings to carry, so the rail
   carries the set instead: every page in the series, in order, current one
   marked. Same column, same sticky behaviour, no new copy. */
.tmpl-cols.full { margin-top: 0; }
.series-map ol.map { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hairline); }
.series-map ol.map li { margin: 0; border-bottom: var(--rule-hairline); }
.series-map ol.map a,
.series-map ol.map span {
  display: block; padding: 13px 0 13px 14px; border-left: 3px solid transparent;
  font: 600 14px/1.45 'Montserrat', -apple-system, 'Segoe UI', sans-serif; text-decoration: none;
}
.series-map ol.map a { color: rgba(0, 33, 71, 0.80); transition: color var(--btn-transition), border-color var(--btn-transition); }
.series-map ol.map a:hover { color: var(--gold); border-left-color: var(--gold); }
.series-map ol.map a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.series-map ol.map li.here span { color: var(--navy); border-left-color: var(--gold); }

/* ---- The quietened contact band ----------------------------------------- */
/* On the twenty-three series pages the band keeps the email line, the entity
   sentence and the legal footer, and gives up its eyebrow, heading and ask so
   the page-specific close is the only ask on the page. */
.band.contact.quiet { padding-top: 56px; }
.band.contact.quiet .email { display: inline-block; margin-top: 0; }

/* ============================================================================
   THE MEASURE. One text column, 880px, centred in the 1140 tier.
   Every direct child of a content .wrap holds it unless it is a declared wide
   component. Capping by default and opting out is deliberate: a text block
   nobody thought to enumerate stays inside the measure, and a wide component
   wrongly caught is obvious the moment anyone looks at the page. The reverse
   bias is what let the Review page's method listing run the full tier on navy
   while the cream prose above it held its column.

   .wrap.wrap is the same element written twice. It is deliberate: `.wrap > *`
   scores one class, which loses to every component rule of the shape
   `.article-body h2` or `.contact p`, of which this stylesheet has many. The
   measure is a layout invariant and has to outrank them, so it is written to
   score two. Every rule below carries the same doubling.
   ========================================================================== */
.wrap.wrap > * {
  max-width: var(--measure-prose);
  /* Not `auto`: a block narrower than the measure would then centre on the
     tier and sit inboard of the column, which is how the CEI hero ended up
     with its H1 and its standfirst on two different left edges. This hangs
     everything on the measure's left edge and collapses to zero once the
     viewport is narrower than the measure. */
  margin-left: max(0px, calc((100% - var(--measure-prose)) / 2));
  margin-right: auto;
}

/* Bands that centre their own text keep centring it. */
.hero .wrap.wrap > *, .contact .wrap.wrap > *, .statement .wrap.wrap > *,
.banner .wrap.wrap > *, .cei .close .wrap.wrap > * { margin-left: auto; margin-right: auto; }

/* Wide components take the tier. */
.wrap.wrap > .tiles, .wrap.wrap > .stats, .wrap.wrap > .cards, .wrap.wrap > .sch,
.wrap.wrap > .rating-cards, .wrap.wrap > .chart-wrap, .wrap.wrap > .diagram,
.wrap.wrap > .table-scroll, .wrap.wrap > .tmpl-cols, .wrap.wrap > .footer,
.wrap.wrap > .side, .wrap.wrap > .inv-cards, .wrap.wrap > .inv-method,
.wrap.wrap > .spot-grid, .wrap.wrap > .download, .wrap.wrap > .dl-hero,
.wrap.wrap > .edition-line {
  max-width: none; margin-left: 0; margin-right: 0;
}

/* The gold rule belongs to the eyebrow above it, so it takes the measure's
   left edge with everything else and gets no exception of its own. The nav bar
   and the close band are flex and grid and place their own children. */
.nav .wrap.wrap > *, .band.close .wrap.wrap > * { max-width: none; margin-left: 0; margin-right: 0; }

/* The twenty-three series pages: the rail never yields, so the measure does.
   Head and body both hold what the tier has left and hang left, so the page
   keeps one left edge from the eyebrow to the close. */
.series .wrap.wrap > *:not(.tmpl-cols) { max-width: var(--measure-series); margin-left: 0; margin-right: 0; }
.series .tmpl-main { max-width: var(--measure-series); }

@media (max-width: 700px) {
  .wrap.wrap > *, .series .wrap.wrap > *:not(.tmpl-cols), .series .tmpl-main { max-width: none; }
}

/* ============================================================================
   STAGE E: the homepage at seven sections.
   ========================================================================== */
/* The hero is no longer a full screen at any width: on a phone the H1 and the
   first door have to be above the fold, which a 100vh box cannot promise. */
.hero { min-height: 0; padding: 76px 0 84px; }
.hero img.lockup { width: min(320px, 58vw); margin: 0 auto 26px; }
.hero .hr-gold { margin-bottom: 30px; }
.hero h1 { white-space: normal; font: var(--type-hero); letter-spacing: var(--type-hero-track); max-width: 20ch; margin: 0 auto; }
.hero .strapline { color: var(--gold); font: 600 22px/1.35 'Montserrat', -apple-system, 'Segoe UI', sans-serif; margin: 20px auto 0; }
.hero .hero-line { max-width: 60ch; margin: 22px auto 0; color: rgba(253, 252, 249, 0.88); }
.hero .hero-doors { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 34px auto 0; }
.hero .hero-doors .btn { margin-top: 0; }
.hero .hero-small { margin: 26px auto 0; font-size: 15px; color: rgba(253, 252, 249, 0.70); }
.btn-ghost { background: none; color: var(--cream); border: 1px solid rgba(253, 252, 249, 0.55); }
.btn-ghost:hover { background: rgba(253, 252, 249, 0.12); }
.btn:focus-visible, .btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Proof: four tiles at the tier, two by two on a narrow screen. */
.stats.stats-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }
.stats.stats-4 .stat { padding: 26px 22px 20px; }
.stats.stats-4 .stat-n { font-size: 34px; }
.stats.stats-4 .stat-l { font-size: 15px; }
a.stat { text-decoration: none; display: block; transition: border-color var(--btn-transition); }
a.stat:hover { border-top-color: #A87A0F; }
a.stat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.more-row { margin-top: 30px; }

@media (max-width: 900px) { .stats.stats-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .hero { padding: 40px 0 52px; }
  .hero img.lockup { width: min(210px, 54vw); margin-bottom: 18px; }
  .hero .hr-gold { margin-bottom: 22px; }
  .hero .strapline { font-size: 18px; margin-top: 16px; }
  .hero .hero-line { margin-top: 16px; }
  .hero .hero-doors { flex-direction: column; align-items: stretch; margin-top: 26px; }
  .hero .hero-doors .btn { display: block; text-align: center; }
  .stats.stats-4 { grid-template-columns: 1fr; }
}

/* ---- STAGE G: the ceiling chart below 700px -----------------------------
   Vertical bars need a stage name under each column, and five of those do not
   fit on a phone. Below 700 the same figures are redrawn as horizontal bars
   with the stage names as row labels and the ceiling as a vertical dashed
   line. Same palette, same captions, no gold text. */
.article-body .chart-wrap .chart-h { display: none; }
@media (max-width: 700px) {
  .article-body .chart-wrap { overflow-x: visible; }
  .article-body .chart-wrap .chart-v { display: none; }
  .article-body .chart-wrap .chart-h { display: block; min-width: 0; width: 100%; height: auto; }
}