/* TeakCharge Commercial Strategy and Implementation site stylesheet
   Tokens and components per TEAKCHARGE/website_build/WS6_appendix.md and BRAND.md.
   Palette, type, and spacing are locked; do not introduce new colours. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-black:       #000000;
  --c-sage:        #759B8C;
  --c-sage-dark:   #567669;
  --c-panel:       #F8FAFC;
  --c-sage-light:  #E8F0EC;
  --c-border:      #E2E8F0;
  /* Interactive control boundaries only (form inputs). The light border above is
     1.23:1 against white, and an accessibility standard requires 3:1 for the
     edge of anything a person is meant to type into: at 1.23 a low-vision user,
     or anyone on a phone in daylight, cannot see where the field is. This value
     is 4.54:1. It is deliberately NOT used for decorative hairlines, which stay
     light. Added 30 Jul 2026 after an outside review measured the contrast. */
  --c-control-border: #767676;
  --c-body:        #1A1A1A;
  --c-muted:       #444444;
  --c-white:       #FFFFFF;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── STRICT 3-TIER TYPE SYSTEM (S319 fix #2, "collapse, don't systematize") ──
     Alex's ruling: too many visible "types" was the ugliness. The whole site now
     renders in exactly THREE text sizes, one family (Inter). Every component
     references one of these three tokens (+ --type-smallprint for the footer legal
     line only). Differences WITHIN body (eyebrows, ledes, buttons, meta) are carried
     by weight / small-caps / colour, never by a new size.

     STILL EXACTLY THREE TIERS (S355): each tier is one token, as ruled. What
     changed is that the two large tiers now scale with the viewport instead of
     sitting at one fixed size, because a 40px title on a 390px phone broke into
     four fragments. Each clamp resolves to the original desktop value at the top
     end, so nothing on desktop moves. Body stays fixed on purpose: it is used by
     buttons, nav, tables and meta, and a fluid body would reflow every page. */
  --type-display:  clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem);  /* TIER 1 — page H1s ONLY: 28px phone to 40px desktop */
  --type-heading:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* TIER 2 — section / case / panel titles + stat numerals: 20px to 24px */
  --type-body:     1rem;     /* TIER 3 — literally everything else, at one size */
  --type-smallprint: 0.8125rem; /* footer legal / copyright line only (permitted small print) */

  /* Legacy semantic aliases collapse ONTO the three tiers, so any lingering
     reference resolves into a tier and cannot grow a fourth size. */
  --type-h1:      var(--type-display);
  --type-h2:      var(--type-heading);
  --type-h3:      var(--type-body);
  --type-lede:    var(--type-body);
  --type-caption: var(--type-body);
  --type-stat:    var(--type-heading);
  --type-button:  var(--type-body);
  --type-eyebrow: var(--type-body); /* eyebrows are body-size small-caps, not a tier */

  --type-eyebrow-weight: var(--fw-semibold);
  --type-eyebrow-track:  0.08em;

  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* ── MEASURE AND SPINE (S355 typography pass, 30 Jul 2026) ─────────────────
     The problem this replaced, measured live at three viewport widths before
     any change: the page title spanned the full 1120 spine while the paragraph
     beneath it stopped at 720, so every text page showed a step at the right
     edge that grew with the screen (352px at 1440, 352px at 1920, on top of the
     outer margin). Body copy also ran at 86 characters a line, well past the
     65 to 75 that reads comfortably, and the display size never scaled down, so
     a 390px phone got a 40px title broken into four fragments.

     The model now: ONE box per text page. The reading column IS the spine on
     text pages, so a title and the paragraph under it share the same right
     edge and there is no interior gap. Whitespace becomes a symmetric outer
     margin, which reads as intentional, instead of a lopsided hole on the right.
     The wide 1120 spine is kept for what genuinely wants it: the nav bar, the
     hero, full-bleed figures and card grids. */
  --max-w:     1120px;             /* full spine: nav, hero, figure and card grids */
  --content-w:  38rem;             /* reading measure, 608px, roughly 73 characters */
  --heading-w:  38rem;             /* titles share the body right edge, no step */
  --gutter:    clamp(1.25rem, 3vw, 1.5rem);

  --callout-border: 3px solid var(--c-sage);
  --callout-bg:     var(--c-sage-light);

  --t: 150ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Smooth scroll only for users who have not asked to reduce motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--c-body);
  background: var(--c-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* S314 frontend a11y (WCAG 2.4.7): one visible keyboard focus ring for every
   interactive element. :focus-visible fires for keyboard/AT users only, so mouse
   clicks stay clean. Sage-dark on both light and dark surfaces reads clearly. */
:focus-visible {
  outline: 2px solid var(--c-sage-dark);
  outline-offset: 2px;
}
.nav a:focus-visible,
.nav__toggle:focus-visible,
.footer a:focus-visible,
.masthead a:focus-visible,
.section--dark a:focus-visible {
  outline-color: var(--c-sage);
}
/* Form fields removed their outline in favour of a 1px border swap (too weak on
   its own); restore a real ring for keyboard focus. */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.subscribe-input:focus-visible {
  outline: 2px solid var(--c-sage-dark);
  outline-offset: 1px;
  border-color: var(--c-sage);
}

/* Skip link: visually hidden until focused, first focusable element in body */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--type-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Layout */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* S355: the narrow container is now sized to the reading measure itself rather
   than to the full 1120 spine. That is what removes the step at the right edge:
   the title and the paragraph under it are children of the same box, so they end
   at the same place. The leftover width becomes a symmetric outer margin instead
   of a gap inside the content area. Padding is added to the cap so the measure is
   the TEXT width, not the box width. */
.container--narrow {
  max-width: calc(var(--content-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* S314 alignment fix: text pages paired a .container (1120) header with a
   .container--narrow (720) body, both centred, so the header sat ~200px left of
   its own body ("headers to the right, bullets to the left"). The narrow column
   now shares the SAME 1120 outer box (so its left gutter == the nav / hero /
   page-header left edge = one spine), and its direct text children cap at the
   reading measure and sit LEFT. Only a deliberate full-width banner figure spans
   the whole spine.

   S355 update: the cap moved onto the container itself (above), so children now
   simply fill it. They no longer need their own cap, and keeping one would
   re-create the step whenever a child's cap differed from a sibling's. */
.container--narrow > * { max-width: 100%; }
.container--narrow > .banner-figure { max-width: none; }

/* ── LINE BREAKING (S355) ───────────────────────────────────────────────────
   The site had no wrapping strategy at all, so the browser broke every line
   greedily: short standalone sentences fell into three ragged lines and
   paragraphs ended on single-word orphans. Two one-line rules fix both.
   balance evens the line lengths on short blocks, which is what headings and
   standalone lines want. pretty keeps a paragraph from ending on an orphan.
   Both degrade silently to normal wrapping on older browsers. */
h1, h2, h3, h4,
.page-header__title, .hero__title, .masthead__line, .section__title,
blockquote, figcaption, .figure__caption, .card__title, .stat__label {
  text-wrap: balance;
}

p, li, dd, .lede {
  text-wrap: pretty;
}

/* Long unbroken strings (URLs, product codes) must never force a sideways
   scroll on a phone. */
p, li, dd, h1, h2, h3, blockquote { overflow-wrap: break-word; }

.section { padding-block: var(--sp-12); }
.section--panel { background: var(--c-panel); }
.section--dark  { background: var(--c-black); color: var(--c-white); }
.section--tight { padding-block: var(--sp-8); }

/* Global nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-black);
  height: 64px;
}

.nav__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  font-weight: var(--fw-semibold);
  font-size: var(--type-body);
  color: var(--c-white);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav__logo {
  height: 36px;
  width: auto;
  display: block;
}

.nav__links {
  display: none;
  gap: var(--sp-4);
  list-style: none;
}

.nav__links a {
  font-size: var(--type-body);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  text-decoration: none;
  transition: color var(--t);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--c-sage);
}

/* Mobile nav: zero-JS native <details>/<summary> disclosure (S314 S1).
   Opens with no JavaScript; keeps correct semantics/ARIA for free. */
.nav__mobile-wrap { position: static; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--c-white);
  font-size: var(--type-heading);
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle::marker { content: ""; }

.nav__mobile {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  flex-direction: column;
  background: var(--c-black);
  padding: var(--sp-2) var(--gutter) var(--sp-4);
  z-index: 99;
}

.nav__mobile-wrap[open] .nav__mobile { display: flex; }

.nav__mobile a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-white);
  text-decoration: none;
  font-size: var(--type-body);
  font-weight: var(--fw-medium);
  padding-block: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav__mobile a[aria-current="page"] { color: var(--c-sage); }

@media (min-width: 768px) {
  .nav__links { display: flex; }
  .nav__mobile-wrap { display: none; }
}

/* Hero */
.hero {
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--c-white);
}

.hero__kicker {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  color: var(--c-sage-dark); /* matches section__kicker contrast fix */
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
}

.hero__headline {
  font-size: var(--type-display);
  font-weight: var(--fw-extrabold);
  color: var(--c-black);
  line-height: 1.1;
  margin-top: var(--sp-2);
  max-width: 820px;
}

.hero__sub {
  font-size: var(--type-body);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
  max-width: 600px;
  margin-top: var(--sp-3);
  line-height: 1.5;
}

.hero__cta { margin-top: var(--sp-4); }

/* Page header (non-home pages) */
.page-header {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}

.page-header__kicker {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  color: var(--c-sage-dark); /* matches section__kicker contrast fix */
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
}

.page-header__title {
  font-size: var(--type-h1);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  margin-top: var(--sp-2);
  line-height: 1.15;
  /* S355: the page header sits in the full 1120 spine while the body copy below
     it sits in the reading measure, so the title used to run 200px past the
     first paragraph and the right edge looked broken. Capping the title at the
     same measure lines the two up. At 40px this sets 30 to 34 characters a line,
     which is the right length for display type anyway. */
  max-width: var(--heading-w);
}

.page-header__sub {
  font-size: var(--type-body);
  color: var(--c-muted);
  margin-top: var(--sp-2);
  max-width: var(--content-w);
}

/* Section headings */
.section__kicker {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  /* sage-dark, not sage: kickers are now real h2 headings on Home (B8 fix), so the
     decorative-label contrast defense no longer applies; 5.01:1 on white */
  color: var(--c-sage-dark);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
  margin-bottom: var(--sp-2);
}

/* h2 variant of the kicker (Home page document-outline fix): renders identically
   to the p variant above, resetting the h2 default margin/font-size/weight. */
h2.section__kicker {
  margin-top: 0;
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
}

.section__title {
  font-size: var(--type-h2);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  margin-bottom: var(--sp-4);
}

/* Cards / grid */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: var(--sp-4);
}

.card__title {
  font-size: var(--type-body);
  font-weight: var(--fw-semibold);
  color: var(--c-black);
}

.card__desc {
  font-size: var(--type-body);
  color: var(--c-body);
  line-height: 1.6;
  margin-top: var(--sp-2);
}

.card__framework {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  /* S314 frontend a11y: sage-dark (5.01:1) not sage (3.08:1) for this small label */
  color: var(--c-sage-dark);
  margin-top: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
}


/* Callout */
.callout {
  border-left: var(--callout-border);
  background: var(--callout-bg);
  padding: var(--sp-3);
  margin-block: var(--sp-4);
}

.callout p {
  font-size: var(--type-body);
  font-weight: var(--fw-medium);
  color: var(--c-body);
  line-height: 1.6;
}

/* Dark panel */
.dark-panel__title {
  font-size: var(--type-h2);
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.dark-panel__body {
  font-size: var(--type-body);
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin-top: var(--sp-2);
  line-height: 1.6;
}

.dark-panel__cta { margin-top: var(--sp-4); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.btn--primary {
  background: var(--c-black);
  color: var(--c-white);
  border-color: var(--c-black);
}
.btn--primary:hover {
  background: var(--c-sage);
  border-color: var(--c-sage);
}

.btn--secondary {
  background: transparent;
  color: var(--c-black);
  border-color: var(--c-black);
}
.btn--secondary:hover {
  background: var(--c-sage);
  color: var(--c-white);
  border-color: var(--c-sage);
}

.btn--sage {
  background: var(--c-sage);
  color: var(--c-white);
  border-color: var(--c-sage);
}
.btn--sage:hover {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}

/* Article / long-form.
   S314: article header/body/figure sit on the SAME 1120 outer box as the nav and
   every other page (one site-wide left spine at every viewport width); the text
   itself caps at the reading measure and sits LEFT, exactly like .container--narrow. */
.article-header {
  /* S355: sized to the reading measure, same reasoning as .container--narrow.
     An article title no longer runs 350px past the first paragraph beneath it. */
  max-width: calc(var(--content-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-4);
  padding-inline: var(--gutter);
}
.article-header > * { max-width: 100%; }

.article-kicker {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  /* S314 frontend a11y: sage #759B8C is 3.08:1 on white (fails AA for this
     small text); sage-dark #567669 is 5.01:1, matching the kicker/case-figures
     contrast token already used elsewhere. */
  color: var(--c-sage-dark);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
}

.article-title {
  font-size: var(--type-h1);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  line-height: 1.15;
  margin-top: var(--sp-2);
}

.article-meta {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--c-muted);
  margin-top: var(--sp-2);
}

.article-body {
  max-width: calc(var(--content-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: var(--type-body);
  line-height: 1.75;
  color: var(--c-body);
  padding-bottom: var(--sp-12);
}
.article-body > * { max-width: 100%; }
/* An inline exhibit or chart may break out of the reading measure, because a
   960-wide chart squeezed into a 608 column is unreadable. It stays inside the
   full spine and stays centred on the text column. */
.article-body > figure,
.article-body > .figure,
.container--narrow > figure,
.container--narrow > .figure {
  max-width: min(var(--max-w), 92vw);
  width: min(var(--max-w), 92vw);
  margin-inline: calc(50% - min(var(--max-w), 92vw) / 2);
}

.article-body h2 {
  font-size: var(--type-heading);
  font-weight: var(--fw-bold);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}

.article-body p { margin-bottom: var(--sp-3); }
/* S314 hanging editorial bullets: the list ITEM sits on the text spine (its box
   left edge == the body text left edge); the sage marker hangs at the spine and
   wrapped lines align on the indented text edge. */
.article-body ul { list-style: none; margin: 0 0 var(--sp-3) 0; padding-left: 0; }
.article-body ul > li { position: relative; padding-left: 1.4rem; }
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-sage);
}
.article-body ol { margin: 0 0 var(--sp-3) 0; padding-left: 1.4rem; }
.article-body li { margin-bottom: var(--sp-1); }

.article-sources {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--type-body);
  color: var(--c-muted);
}

.author-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--type-body);
  color: var(--c-muted);
}

.author-box a { color: var(--c-sage-dark); text-decoration: none; }

/* Insights index list */
.insights-list { display: flex; flex-direction: column; gap: 0; }

.insights-item {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.insights-item__title {
  font-size: var(--type-body);
  font-weight: var(--fw-semibold);
  color: var(--c-black);
  text-decoration: none;
}

.insights-item__title:hover { color: var(--c-sage-dark); }

.insights-item__meta {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--c-muted);
  margin-top: var(--sp-1);
}

.insights-item__desc {
  font-size: var(--type-body);
  color: var(--c-body);
  margin-top: var(--sp-1);
}

/* Page jump nav: anchor strip under the masthead (S354) */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  margin-top: var(--sp-4);
}
.page-jump a {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase;
  color: var(--c-sage-dark);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.page-jump a:hover,
.page-jump a:focus { border-bottom-color: var(--c-sage-dark); }
.section__anchor { scroll-margin-top: var(--sp-6); }

/* About intro: portrait beside the lead (S353) */
.about-intro {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--sp-4);
  align-items: start;
  margin-bottom: var(--sp-4);
}
.about-intro__portrait {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.about-intro__lead { margin-top: 0; }
@media (max-width: 640px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__portrait { max-width: 240px; }
}

/* Cases */
.case {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
.case:last-of-type { border-bottom: none; }

.case__client {
  /* S319 fix #1: the mono ALL-CAPS "Client:" line folds into the ONE eyebrow
     treatment (sans, one size/weight/track), matching every other page label. */
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  /* S314 frontend a11y: sage-dark (5.01:1) not sage (3.08:1) for this small label */
  color: var(--c-sage-dark);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
}

.case__title {
  font-size: var(--type-heading);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  margin-top: var(--sp-1);
}

/* S353: outcome-first case lead — the result line reads before Context/Work */
.case__outcome-lead {
  font-size: var(--type-lead, 1.125rem);
  color: var(--c-body);
  margin-top: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 3px solid var(--c-sage-dark);
}

.case h3 {
  font-size: var(--type-body);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
}

/* Forms */
.form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form-field label {
  font-size: var(--type-body);
  font-weight: var(--fw-medium);
  color: var(--c-body);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--c-body);
  background: var(--c-white);
  border: 1px solid var(--c-control-border);
  padding: var(--sp-2);
  border-radius: 0;
  width: 100%;
  transition: border-color var(--t);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-sage);
}

.form-field textarea { resize: vertical; }

.subscribe-form { max-width: 480px; }

.subscribe-fields {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.subscribe-input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--c-body);
  border: 1px solid var(--c-control-border);
  padding: 12px 16px;
  border-radius: 0;
  background: var(--c-white);
}

.subscribe-input:focus { outline: none; border-color: var(--c-sage); }

.subscribe-meta {
  font-size: var(--type-body);
  color: var(--c-muted);
  margin-top: var(--sp-2);
}


/* Footer */
.footer {
  background: var(--c-black);
  color: var(--c-white);
  padding-block: var(--sp-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-4); }
}

.footer__brand {
  font-weight: var(--fw-semibold);
  font-size: var(--type-body);
}

.footer__logo {
  height: 40px;
  width: auto;
  display: block;
}

.footer__tagline {
  font-size: var(--type-body);
  color: rgba(255,255,255,0.7);
  margin-top: var(--sp-1);
  max-width: 360px;
}

.footer__col-title {
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--sp-2);
}

.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: var(--type-body); }
.footer__links a:hover { color: var(--c-sage); }

.footer__meta {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: rgba(255,255,255,0.85);
}
.footer__meta a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer__meta a:hover { color: var(--c-sage); }

.footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--font-sans);
  font-size: var(--type-smallprint);
  color: rgba(255,255,255,0.5);
}

/* Legal pages */
.legal h2 {
  font-size: var(--type-heading);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.legal p { margin-bottom: var(--sp-2); line-height: 1.7; }
.legal ul { margin: 0 0 var(--sp-2) var(--sp-3); }
.legal table { border-collapse: collapse; width: 100%; margin-block: var(--sp-3); }
.legal th, .legal td {
  border: 1px solid var(--c-border);
  padding: var(--sp-1) var(--sp-2);
  text-align: left;
  font-size: var(--type-body);
  vertical-align: top;
}
.legal th { background: var(--c-panel); }

/* Input-needed flags (visible in the build so nothing is silently guessed) */
.input-needed {
  background: #FFF3CD;
  color: #7A5B00;
  padding: 2px 6px;
  font-weight: var(--fw-medium);
  border: 1px dashed #C9A100;
}

/* Stat strip (S186 R2): headline numbers as elevated tiles with a sage top-accent. Tokens only. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-6);
}

.stat-strip > div {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-sage);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stat-strip__num {
  font-size: var(--type-stat);
  font-weight: var(--fw-extrabold);
  color: var(--c-sage-dark);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.stat-strip__label {
  font-size: var(--type-body);
  color: var(--c-muted);
  line-height: 1.5;
}

/* Why-TeakCharge (S186 R2): governing line + MECE reasons */
.why-lead {
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--c-body);
  margin-bottom: var(--sp-3);
}

.why-list {
  list-style: none;
  padding: 0;
  margin-block: var(--sp-3);
  display: grid;
  gap: var(--sp-3);
}

.why-list li {
  color: var(--c-body);
  line-height: 1.6;
  padding-left: var(--sp-3);
  border-left: var(--callout-border);
}

.why-list li strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--c-body);
}

/* Discipline grid (S97 wave 2): the six service areas as scannable cards */
.discipline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
  list-style: none;
  padding: 0;
  margin-block: var(--sp-3);
}

.discipline-grid li {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-sage);
}

@media (max-width: 640px) {
  .discipline-grid { grid-template-columns: 1fr; }
}

/* Inline figure/diagram wrapper (Methodology preview page, B8 bake): the svg
   itself is responsive via width="100%" height="auto"; this wrapper just
   guarantees it never overflows its container on narrow viewports. */
.figure {
  max-width: 100%;
  margin-block: var(--sp-4);
}

.figure svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.figure__caption {
  font-size: var(--type-body);
  color: var(--c-muted);
  margin-top: var(--sp-1);
}

/* ── S101 visual pass (OMMAX NOW-tier): numbered services + case figures ──
   The APAC markets graphic reuses the .figure / .figure svg components above. */

/* Numbered discipline heads (OMMAX Device 3): sage numeral + title, pure
   typography, no icons. The numeral is decorative (aria-hidden), so the h2 keeps
   a clean accessible name for the document outline. */
.discipline-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.discipline-head__num {
  font-size: var(--type-stat);
  font-weight: var(--fw-extrabold);
  color: var(--c-sage-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.discipline-head .section__title { margin-bottom: 0; }

@media (max-width: 640px) {
  .discipline-head { gap: var(--sp-2); }
}

/* Case outcome figures (OMMAX Device 6 metric grid): the outcome numbers already
   stated in each case, pulled into a scannable row. Introduces no new facts. */
.case-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin-block: var(--sp-3);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--c-border);
}

.case-figures__num {
  font-size: var(--type-stat);
  font-weight: var(--fw-extrabold);
  color: var(--c-sage-dark); /* 5.01:1 on white, matches the a11y contrast token */
  line-height: 1.1;
}

.case-figures__label {
  font-size: var(--type-body);
  color: var(--c-muted);
  margin-top: var(--sp-1);
  max-width: 220px;
}

/* ── S309 design pass (18 Jul 2026): one type scale for narrative content ──
   Bare h2/h3/p/ul in the .container--narrow prose sections previously fell back
   to browser defaults (the "different font sizes" disaster on About/APAC Signal/
   Insights). The .prose scope maps them onto the token scale WITHOUT clobbering
   the component classes (.callout, .figure, .stat-strip, .case, .discipline-head),
   which set their own type and win on their own selectors. */
/* :where() keeps these at ZERO specificity so any *classed* element inside a
   .prose block (.callout, .figure__caption, .subscribe-meta, .editions-list,
   .timeline__*, .feature-card, .insights-item__*) keeps its own styling and is
   never clobbered. Only truly bare h2/h3/p/ul/li pick up the token scale. */
:where(.prose) > :first-child { margin-top: 0; }

:where(.prose) h2 {
  font-size: var(--type-heading);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  line-height: 1.25;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}

:where(.prose) h3 {
  font-size: var(--type-body);
  font-weight: var(--fw-semibold);
  color: var(--c-black);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
}

:where(.prose) p {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--c-body);
  margin-bottom: var(--sp-3);
}

/* S314 hanging editorial bullets for bare prose lists: the list item's box sits ON
   the text spine (left edge == body text left edge at every width); the sage marker
   hangs at the spine; wrapped lines align on the indented text edge. Classed lists
   (.meta-list, .editions-list, .timeline, ...) are excluded and keep their own
   treatment; :where() keeps all of this at zero specificity. */
:where(.prose ul:not([class])) { list-style: none; margin: 0 0 var(--sp-3) 0; padding-left: 0; }
:where(.prose ul:not([class])) > li { position: relative; padding-left: 1.4rem; }
:where(.prose ul:not([class])) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-sage);
}
:where(.prose ol:not([class])) { margin: 0 0 var(--sp-3) 0; padding-left: 1.4rem; }
:where(.prose) li { margin-bottom: var(--sp-1); line-height: 1.6; }

/* S314: the same hanging-bullet system for bare lists on Services (direct children
   of the narrow column) and inside Cases blocks, so every bulleted list on the site
   hangs off the one spine. */
.container--narrow > ul:not([class]),
.case ul {
  list-style: none;
  margin: 0 0 var(--sp-3) 0;
  padding-left: 0;
}
.container--narrow > ul:not([class]) > li,
.case ul > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: var(--sp-1);
}
.container--narrow > ul:not([class]) > li::before,
.case ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-sage);
}

/* A lead paragraph for a prose section intro (larger, muted). Classed, so it
   wins over the bare-p rule above. */
.prose .lead, p.lead {
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--c-muted);
}

/* ── Career-arc timeline (About restructure) ──
   Each role as a scannable node on a sage-dotted spine. Pure layout; no facts. */
.timeline {
  list-style: none;
  padding: 0;
  margin-block: var(--sp-4);
}

.timeline__item {
  position: relative;
  padding-left: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-left: 2px solid var(--c-border);
  margin-left: 6px;
}

.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-sage);
  border: 2px solid var(--c-white);
  box-shadow: 0 0 0 1px var(--c-sage);
}

.timeline__era {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  color: var(--c-sage-dark);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-track);
}

.timeline__role {
  font-size: var(--type-body);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  line-height: 1.3;
  margin-top: 2px;
}

.timeline__body { margin-top: var(--sp-1); }
.timeline__body p {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--c-body);
  margin-bottom: var(--sp-2);
}
.timeline__body p:last-child { margin-bottom: 0; }
.timeline__body ul { margin: var(--sp-1) 0 var(--sp-2) var(--sp-3); }
.timeline__body li { font-size: var(--type-body); color: var(--c-body); margin-bottom: 0.25rem; }

/* ── Feature card (pull-quote treatment for the highlighted investor box) ── */
.feature-card {
  background: var(--c-sage-light);
  border: 1px solid var(--c-sage);
  border-left: 4px solid var(--c-sage);
  padding: var(--sp-4);
  margin-block: var(--sp-6);
}
.feature-card p {
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}

/* ── Definition-style two-column meta list (Recognition/Publications on About) ── */
.meta-list { list-style: none; padding: 0; margin-block: var(--sp-2); display: grid; gap: var(--sp-2); }
.meta-list li {
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-sage);
  font-size: var(--type-body);
  color: var(--c-body);
  line-height: 1.55;
}

/* ── Article header graphic (per-article branded banner) ──
   S314: same 1120 outer box as everything else; the banner caps at the reading
   measure and sits LEFT on the spine, aligned with the title above it. */
.article-figure {
  max-width: var(--max-w);
  margin: var(--sp-4) auto 0;
  padding-inline: var(--gutter);
}
.article-figure svg {
  width: 100%;
  max-width: var(--content-w);
  height: auto;
  display: block;
  border: 1px solid var(--c-border);
}

/* ── Page banner figure (full-width intro graphic under a page header) ── */
.banner-figure { margin-block: 0; }
.banner-figure svg {
  width: 100%;
  height: auto;
  display: block;
}
/* S319 fix #4: the six-discipline banner cards are clickable SVG <a> links to each
   service section; pointer affordance (the keyboard focus ring is the global one). */
.banner-figure a { cursor: pointer; }

/* ── Editions list (APAC Signal recent editions) as bordered rows ── */
.editions-list { list-style: none; padding: 0; margin-block: var(--sp-2); }
.editions-list li {
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  line-height: 1.5;
}
.editions-list li:first-child { border-top: 1px solid var(--c-border); }
.editions-list a { color: var(--c-body); text-decoration: none; font-weight: var(--fw-medium); }
.editions-list a:hover { color: var(--c-sage-dark); }
.editions-list__meta { font-family: var(--font-sans); font-size: var(--type-eyebrow); font-weight: var(--type-eyebrow-weight); color: var(--c-sage-dark); text-transform: uppercase; letter-spacing: var(--type-eyebrow-track); }

/* ═══════════════════════════════════════════════════════════════════════════
   S314 DEEP PASS (18 Jul 2026): insights hub, data charts, APAC masthead.
   Palette stays black + sage family + panels (BRAND.md); charts use a single-hue
   sage magnitude ramp (light -> mid -> dark), never off-palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Insights hub: three deep-linkable categories (N4) ── */
/* S319 fix #5: the old faint mono "Jump to:" line is replaced by a real, prominent
   button row (the .btn system, one button size) with one small emoji icon each. */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.btn--jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-panel);
  color: var(--c-black);
  border-color: var(--c-border);
}
.btn--jump:hover {
  background: var(--c-sage);
  color: var(--c-white);
  border-color: var(--c-sage);
}
.btn__icon { font-size: var(--type-body); line-height: 1; }

.insights-category { scroll-margin-top: 80px; }
.insights-category + .insights-category { border-top: 1px solid var(--c-border); padding-top: var(--sp-6); }
.insights-category__title {
  font-size: var(--type-heading);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  line-height: 1.2;
}
.insights-category__icon {
  display: inline-block;
  margin-right: var(--sp-2);
  font-size: 0.85em;
  line-height: 1;
  vertical-align: baseline;
}
.insights-category__blurb {
  font-size: var(--type-body);
  color: var(--c-muted);
  line-height: 1.6;
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-4);
  max-width: 60ch;
}
.insights-category__teaser {
  font-size: var(--type-body);
  color: var(--c-muted);
  font-style: italic;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-border);
}

/* ── Data chart figure (FT / McKinsey exhibit discipline, inline SVG, no JS) ── */
.chart-figure {
  margin-block: var(--sp-6);
}
.chart-figure svg { width: 100%; height: auto; display: block; }
.chart-figure__title {
  font-size: var(--type-body);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  line-height: 1.3;
  margin-bottom: 2px;
}
.chart-figure__standfirst {
  font-size: var(--type-body);
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
  max-width: 62ch;
}
.chart-figure__caption {
  font-size: var(--type-caption);
  color: var(--c-muted);
  font-family: var(--font-sans);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
  letter-spacing: 0.02em;
}

/* ── APAC Signal masthead: real logo on black, replaces the generic waveform ── */
.masthead {
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--sp-8) 0;
}
.masthead__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.masthead__logo { height: 40px; width: auto; flex: 0 0 auto; align-self: flex-start; }
.masthead__tag {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase;
  color: var(--c-sage);
}
.masthead__line {
  font-size: var(--type-body);
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  /* S355: was capped at 40ch, which is a caption measure. A three-clause
     sentence broke into three short ragged lines on a wide screen. At 62ch it
     sets as two balanced lines (text-wrap: balance is applied above), and it
     still fits a phone because of the 100% floor. */
  max-width: min(62ch, 100%);
}
.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.masthead__meta strong { color: var(--c-sage); font-weight: var(--fw-semibold); }

/* ═══════════════════════════════════════════════════════════════════════════
   S355 RESOLUTION LADDER
   Before this pass the sheet had exactly two breakpoints, 640 and 768, so a
   1024 laptop, a 1440 desktop and a 27 inch display were all served the same
   fixed layout. The measure now steps up gently with the viewport, staying
   inside the 65 to 78 character band at every stop rather than jumping from
   73 straight to 73 and leaving the rest of the screen empty.

   Small phone     to 400px    measure fills the screen, tighter gutter
   Phone/tablet   400 to 900   measure fills the screen
   Laptop         900 to 1280  38rem, about 73 characters
   Desktop       1280 to 1700  40rem, about 77 characters
   Large desktop  1700px up    42rem, about 81 characters, larger body leading
   ═══════════════════════════════════════════════════════════════════════════ */

/* ONE COLUMN PER TEXT PAGE (S355).
   A page header sits in the full 1120 spine, which is right for a page that goes
   on to show a card grid or a wide figure. On a page whose whole body is a
   reading column it is wrong: the header and the paragraphs end up with
   different left AND right edges, and the eye reads that as a broken layout.
   This joins the header to the reading column, but only on pages that actually
   have one, so grid pages are untouched. :has() is supported in every browser
   the site targets, and the rule simply does not apply where it is not. */
main:has(> .container--narrow) > .page-header,
main:has(> .article-body) > .page-header,
main:has(> .article-header) > .page-header {
  max-width: calc(var(--content-w) + var(--gutter) * 2);
}

/* Very small phones: claw back horizontal room so the measure clears 40
   characters instead of sitting in the mid thirties. */
@media (max-width: 400px) {
  :root { --gutter: 1.125rem; }
}

/* Desktop: the screen can carry a slightly longer line comfortably, and doing
   so reduces the outer margin without pushing past the readable band. */
@media (min-width: 1280px) {
  :root { --content-w: 40rem; --heading-w: 40rem; }
}

/* Large desktop and above: a touch longer again, plus a little more leading,
   which is what keeps a longer line comfortable rather than tiring. */
@media (min-width: 1700px) {
  :root { --content-w: 41rem; --heading-w: 41rem; }
  .article-body { line-height: 1.8; }
  body { line-height: 1.65; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   S314 frontend pass: print stylesheet. PE partners and senior execs print and
   PDF advisory pages; without this the sticky black nav, forms, and dark panels
   waste ink and the sage-on-black masthead prints as a black slab. Tokens only,
   no new colour. Chrome/Safari "Save as PDF" and physical print both covered.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  :root { --gutter: 0; }

  html { scroll-behavior: auto; }

  body {
    color: #000;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Chrome-first: strip sticky/dark navigation and interactive-only chrome. */
  .nav,
  .nav__mobile,
  .skip-link,
  .subscribe-form,
  .form,
  .btn,
  .hero__cta,
  .dark-panel__cta,
  .masthead__meta { display: none !important; }

  /* Dark surfaces to paper so ink and legibility survive the print. */
  .section--dark,
  .masthead,
  .footer {
    background: #fff !important;
    color: #000 !important;
    padding-block: var(--sp-3);
  }
  .section--dark *,
  .masthead *,
  .footer * { color: #000 !important; }
  .masthead { border-bottom: 1px solid #000; }
  .footer {
    border-top: 1px solid #000;
    margin-top: var(--sp-4);
  }
  .footer__logo, .masthead__logo { filter: invert(1); }

  a { text-decoration: underline; }
  /* Reveal destination URLs for external links on paper. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
  main a[href^="/"]::after,
  main a[href^="#"]::after,
  main a[href^="mailto"]::after { content: ""; }

  /* Keep exhibits, cases, and headings whole across page breaks. */
  .chart-figure, .figure, .article-figure, .banner-figure,
  svg, .case, .card, .stat-strip > div, .timeline__item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  .section { padding-block: var(--sp-4); }
  main { max-width: 100%; }
}