/* Self-hosted webfonts. Playfair Display and Inter, SIL Open Font License 1.1.
   Downloaded from Google Fonts and served from this origin, so no external
   request is made and the Content Security Policy stays closed. */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — the 100°E mark only. Self-hosted for the same CSP reason
   as Playfair and Inter above. Added 2026-09-03 when the logo moved off the
   serif: the mark needed to read as a mark, not as website body type. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* IBM Plex Sans, the body face from the layout go-live (homepage v4, locked 27 Sept 2026).
   SIL Open Font License 1.1. Downloaded from @fontsource/ibm-plex-sans 5.3.0 (cdn.jsdelivr.net) and
   served from this origin for the same CSP reason as the faces above. Static weights 400, 500, 600. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   HundredEast Co., Ltd.
   Dark navy house style. Gold accent, serif headings.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Ground */
  --bg:         #071523;
  --bg-deep:    #04101c;
  --surface:    #0d2135;
  --surface-2:  #0a1b2c;
  --raise:      #12293f;

  /* Ink */
  --ink:        #eef3f8;
  --ink-2:      #c4d1de;
  --muted:      #a9b8c7;   /* was #8b9daf; lighter for readability (buyer run 6, Marc 27 Sept) */
  --faint:      #8194a7;

  /* Accent */
  --gold:       #c9a44c;
  --gold-warm:  #dcbd74;
  --gold-deep:  #9a7a2e;

  /* Lines */
  --line:       rgba(201, 164, 76, .18);
  --line-soft:  rgba(255, 255, 255, .07);
  --line-hard:  rgba(255, 255, 255, .13);
  --brand-size: clamp(1.60rem, 1.09rem + 1.34vw, 2.20rem);

  --focus:      #7fb5f0;

  --serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  /* Body face IBM Plex Sans since the layout go-live (was "Inter"; homepage v4, f-plex). */
  --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif;
  --geo: "Space Grotesk", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
         "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: min(1680px, 93vw);
  --measure: 68ch;
  --gut: clamp(20px, 5vw, 52px);

  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.77rem);
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.35vw, 1.33rem);
  --step-2:  clamp(1.36rem, 1.19rem + 0.74vw, 1.80rem);
  --step-3:  clamp(1.68rem, 1.36rem + 1.40vw, 2.55rem);
  --step-4:  clamp(2.10rem, 1.52rem + 2.55vw, 3.70rem);

  --r: 2px;
  --shadow: 0 2px 4px rgba(0,0,0,.34), 0 18px 46px -20px rgba(0,0,0,.72);
  --glow: 0 0 0 1px rgba(201,164,76,.28), 0 20px 50px -26px rgba(201,164,76,.30);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
  background: var(--bg);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: #071523; }

/* --- Type --------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.10;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-weight: 500; letter-spacing: -0.026em; }
h3, h4 { font-weight: 500; letter-spacing: -0.008em; line-height: 1.22; }
body { font-feature-settings: "kern" 1, "liga" 1; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); line-height: 1.3; }

/* Service block titles on services.html.
   They are h2 so the document outline runs h1 to h2 with no skipped level.
   The first h2 on that page used to appear after six h3 blocks, which is the
   heading-order defect found in the 2026-09-02 audit.
   They are sized and tracked as h3 because the design is unchanged. Do not
   remove this rule without changing the tags back. */
.svc-title { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.008em; }

p { text-wrap: pretty; }

.lede { font-size: var(--step-1); line-height: 1.58; color: var(--ink-2); max-width: 52ch; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.7em; font-size: var(--step-1); }
.prose a { color: var(--gold-warm); text-decoration-color: var(--line); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--gold); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: .55em; }
.prose strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); flex: none;
}

/* --- Layout ------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

section { padding-block: clamp(60px, 9.5vw, 120px); position: relative; }
section.tight { padding-block: clamp(44px, 6.5vw, 76px); }

/* Alternating grounds, all navy */
.band { background: var(--surface-2); }
.band-raise { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.band-line { border-block: 1px solid var(--line-soft); }

.rule { width: 58px; height: 2px; background: var(--gold); margin-bottom: 28px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--gold); color: #071523; font-weight: 600;
  padding: 12px 18px; z-index: 300;
}
.skip:focus { left: 12px; top: 12px; }

.section-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 64ch; }
.section-head p { margin-top: 18px; color: var(--muted); }
/* Section headlines read too close to the hero at the default h1/h2 scale
   (Marc, 2026-09-03). Scoped to .section-head so hero-sub h1 — which shares
   --step-3 — and other h2 uses already tuned to their own size (.svc-title,
   the inline step-2 closing bands, legal-page subheadings) are untouched. */
.section-head h2 { font-size: clamp(1.5rem, 1.28rem + 1.05vw, 2.15rem); }

/* --- Brand lockup -------------------------------------------------------
   100 degrees E beside HundredEast, divided by a full-height gold hairline.
   Horizontal since 2026-08-30, on Marc's ruling. It was stacked until then.

   Why horizontal. The coordinate and the word travel together as one lockup,
   so the coordinate never has to stand alone and the
   stacked mark-over-caption structure was not buying anything. Horizontal is
   also what the identity actually gets used in, which is document headers,
   email signatures, letterhead and contract paper, where a stacked lockup has
   to shrink until the word is unreadable. One line rather than two also fits a
   larger mark inside the 96px header.

   Playfair's lining figures sit well below cap height, so the E is set at
   77.3% to bring its cap down onto the same optical line as the digits.
   Measured, not eyeballed. Keep that on every surface.

   The divider is a pseudo-element on .brand-word deliberately, so no page
   markup changes. Do not add a bar element to the HTML.

   The word is .64 of the coordinate, up from .53 on 2026-09-02 and .40 when it
   was stacked. A caption under a mark can be small. A name standing beside one
   cannot. At .53 the name rendered at 17.4px against a 46px h1 and read as
   understated rather than deliberate; .64 puts it at 21px. The coordinate is
   untouched, so the lockup does not grow vertically and the header stays 97px.

   2026-09-03 — typography moved off Playfair entirely, per Marc: the logo
   needs to work as a mark, not read like website type, and the serif is now
   reserved for headlines only. 100°E is set in Space Grotesk (geometric,
   architectural — it is the recognisable mark). HundredEast is set in Inter,
   lighter than the mark, Hundred in ink, East lifted to gold and medium
   weight — the existing b/em markup already carried this split, only the
   color assignment changes. Space Grotesk's cap height and lining figures
   sit level with each other, unlike Playfair's, so the E's 77.3% optical
   correction is no longer needed and resets to 80%. Vertical alignment stays
   centered rather than top-aligned — top-align was tried and read as
   diagonal, the word floating above the coordinate's baseline instead of
   sitting with it. */

.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink);
  margin-right: auto; line-height: 1;
}

.brand-lockup { display: flex; align-items: center; }

.brand-coord {
  display: block;
  font-family: var(--geo);
  font-weight: 600;
  font-size: var(--brand-size);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.brand-coord i {            /* the degree mark */
  font-style: normal;
  font-size: .44em;
  vertical-align: .66em;
  letter-spacing: 0;
  margin-left: .02em;
}
.brand-coord em {           /* the E, optically matched to the figures */
  font-style: normal;
  font-weight: 600;
  font-size: .8em;
  color: var(--gold);
  margin-left: .04em;
}

.brand-word {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 300;
  font-size: calc(var(--brand-size) * .64);
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  margin-top: -.02em;   /* small lift so the name sits with 100°E, not under it */
}
.brand-word::before {      /* the gold divider. Not in the markup, on purpose */
  content: "";
  display: block;
  flex: none;
  width: 1px;
  height: calc(var(--brand-size) * 1.15);
  background: var(--gold);
  margin: 0 calc(var(--brand-size) * .42);
}
.brand-word b { font-weight: 300; color: var(--ink); }
.brand-word em { font-style: normal; font-weight: 500; color: var(--gold); }

.site-footer .brand-coord, .site-footer .brand-word b { color: var(--on-navy); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--gut); min-height: 96px;
  display: flex; align-items: center; gap: 20px;
}
.nav-links { display: flex; align-items: center; gap: 12px; list-style: none; padding: 0; }
.nav-links a {
  display: block; padding: 10px 14px;
  font-size: .97rem; letter-spacing: .01em;
  color: var(--muted); text-decoration: none;
  border-radius: var(--r);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.045); }
.nav-links a[aria-current="page"] { color: var(--gold); }

.nav-cta {
  margin-left: 10px; padding: 10px 20px !important;
  border: 1px solid var(--line); color: var(--gold) !important;
  border-radius: var(--r);
}
.nav-cta:hover { background: var(--gold) !important; color: #071523 !important; border-color: var(--gold); }

.icon-btn {
  width: 44px; height: 44px; display: none; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--muted); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-hard); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

@media (max-width: 900px) {
  .icon-btn.nav-toggle { display: grid; }
  .nav { min-height: 84px; }
  .nav-links {
    position: fixed; inset: 84px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gut) 24px;
    box-shadow: var(--shadow);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: 14px 4px; font-size: 1.03rem; border-bottom: 1px solid var(--line-soft); }
  .nav-cta { margin: 14px 0 0; text-align: center; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn, .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-size: .95rem; font-weight: 600; letter-spacing: .015em;
  text-decoration: none; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn { background: var(--gold); color: #061320; }
.btn:hover { background: var(--gold-warm); transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(201,164,76,.6); }
.btn-ghost { border-color: var(--line-hard); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn-ghost:hover { transform: none; } }

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(64px, 11vw, 140px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(201,164,76,.10), transparent 58%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 62%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 28px; }

.hero-figure { position: relative; }
.hero-figure svg { width: 100%; height: auto; overflow: visible; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 52px; border-top: 1px solid var(--line-soft);
}
.hero-stats div {
  padding: 22px 30px 0 0; margin-right: 30px;
  border-right: 1px solid var(--line-soft);
}
.hero-stats div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-stats .n { font-family: var(--serif); font-size: var(--step-2); color: var(--gold); line-height: 1; }
.hero-stats .l { font-size: var(--step--1); color: var(--muted); margin-top: 8px; letter-spacing: .04em; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: 380px; margin-inline: auto; }
}

.hero-sub {
  padding-block: clamp(52px, 7.5vw, 84px) clamp(40px, 5.5vw, 60px);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}
.hero-sub h1 { font-size: var(--step-3); max-width: 24ch; }
.hero-sub p { margin-top: 20px; color: var(--muted); max-width: 52ch; }
/* Board, Services, About and the Insights index carry a photo-band hero, the
   same role as Home's, so it gets the same dominance treatment (Marc,
   2026-09-03). Scoped to the photo-band variant so privacy/terms — a plain
   .hero-sub with no photo, legal-document genre, same exclusion as the
   section-headline pass — keep the unmodified --step-3 size. */
.photo-band.hero-sub h1 { font-size: clamp(1.78rem, 1.40rem + 1.60vw, 2.70rem); line-height: 1.16; }

/* --- Cards -------------------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
/* Three-card grid, same reasoning as grid-5 and grid-6, but the symptom is the
   opposite end. Auto-fit collapses empty tracks, so three cards never render more
   than three columns. What it does instead is render 2+1 wherever only two 272px
   tracks fit, which is roughly 680px to 1045px of viewport, and that range holds
   tablet landscape. Explicit counts instead: 1, then 3. Never 2, which orphans
   the third card on its own row. */
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* Four-card grid, same reasoning again. Under auto-fit four cards render 3+1
   between roughly 1250px and 1500px of viewport, which is most laptops, and
   again below 1100px. Explicit counts instead: 1, then 2, then 4. Never 3,
   which orphans the fourth card on its own row. */
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* Five-card grid. Five is prime, so auto-fit strands a lone fifth card at common
   laptop widths. Explicit counts instead: 1, then 3 (a clean 3+2), then 5 where
   five genuinely fit. Never 2 or 4, which orphan one card on its own row. */
.grid-5 { grid-template-columns: 1fr; }
@media (min-width: 760px)  { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }
/* Six-card grid, same reasoning as grid-5. Under auto-fit these cards render five
   across at the site's own max wrap of 1680px, stranding a lone sixth. Explicit
   counts instead: 1, then 2, then 3. Never 4 or 5, which orphan one card. */
.grid-6 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid-6 { grid-template-columns: repeat(3, 1fr); } }
/* /board credential cards: reserve two heading lines so every role line starts level.
   The JFCCT heading wraps to two lines; the others do not. Single column: auto. 2026-09-23 */
.grid-creds .card h3 { min-height: 2.4em; min-height: 2lh; }
/* Thai wraps some headings to three lines: subgrid makes each row's heading track
   as tall as its tallest heading, so role lines stay level whatever the wrap. */
@supports (grid-template-rows: subgrid) {
  .grid-creds .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .grid-creds .card h3 { min-height: 0; }
}
@media (max-width: 639px) { .grid-creds .card h3 { min-height: auto; } }
/* Seven credential cards: the last one takes the full row rather than sitting alone. 2026-09-26 */
@media (min-width: 640px) { .grid-creds .card-span { grid-column: 1 / -1; } }
/* Its text runs the full width of the box, so the box stays two or three lines tall. 2026-09-26 */
.grid-creds .card-span p { max-width: none; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 34px 30px;
  overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: var(--step-1); margin-bottom: 12px; }
.card p { color: var(--muted); font-size: .96rem; max-width: 42ch; }
.card .num {
  font-family: var(--serif); font-size: .82rem; letter-spacing: .18em;
  color: var(--gold-deep); display: block; margin-bottom: 16px;
}
.card-icon { width: 42px; height: 42px; margin-bottom: 20px; }
.card-icon path, .card-icon circle, .card-icon rect, .card-icon line,
.card-icon polyline, .card-icon ellipse, .card-icon polygon {
  stroke: var(--gold); fill: none; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-icon .fill { fill: var(--gold); stroke: none; }
.card-icon-photo {
  width: 72px; height: 72px; margin-bottom: 20px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold); display: block;
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* --- Service blocks ----------------------------------------------------- */

.service {
  display: grid;
  grid-template-columns: 62px minmax(0, 200px) minmax(0, 1fr);
  gap: 14px 40px;
  padding-block: 32px;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.service:last-of-type { border-bottom: 1px solid var(--line-soft); }
.service .svc-icon { width: 46px; height: 46px; }
.service .svc-icon path, .service .svc-icon circle, .service .svc-icon rect,
.service .svc-icon line, .service .svc-icon polyline, .service .svc-icon ellipse,
.service .svc-icon polygon {
  stroke: var(--gold); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.service .svc-icon .fill { fill: var(--gold); stroke: none; }
.service .tag {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold); padding-top: 9px;
}
.service h3 { margin-bottom: 16px; }
.service p { color: var(--muted); max-width: var(--measure); }
.service p + p { margin-top: 15px; }
.service ul { margin: 22px 0 0; padding-left: 0; list-style: none; }
.service li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--muted); font-size: .95rem; }
.service li::before { content: ""; position: absolute; left: 0; top: .64em; width: 9px; height: 1px; background: var(--gold); }
@media (min-width: 881px) {
  .service ul { columns: 2; column-gap: 32px; }
  .service li { break-inside: avoid; }
}
@media (max-width: 880px) {
  .service { grid-template-columns: 46px minmax(0, 1fr); gap: 10px 22px; }
  .service .tag { grid-column: 2; padding-top: 10px; }
  .service > div:last-child { grid-column: 1 / -1; }
}

/* --- Network / partners ------------------------------------------------- */

.net-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .net-grid { grid-template-columns: 1fr; } }
.net-figure svg { width: 100%; height: auto; overflow: visible; }
/* Diagram scales fluidly with its column, so at phone widths the node-label
   text (set at 10.5 SVG units) shrinks below legibility, e.g. ~8px at 360px.
   Floor it without touching the diagram's own size, which Marc already
   settled at full width after 80%/92% both read too small.
   12 (not 15): at 15 the longest side labels (de PRODUKTZULASSUNG, fr/de/es/it
   AUDIT & TAX, th PRODUCT REG.) ran past the viewBox at 375px. Marc, 27 Sept:
   smaller text on phones only, no shortened labels. */
@media (max-width: 480px) { .net-figure svg .net-node-label text { font-size: 12px; } }

.net-list { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 8px; }
.net-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 16px;
  padding-block: 17px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2); font-size: .97rem;
}
.net-list li:first-child { border-top: 1px solid var(--line-soft); }
.net-list svg { width: 18px; height: 18px; margin-top: 4px; }
.net-list svg path { stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.net-list b { color: var(--ink); font-weight: 600; }

/* --- Track record ------------------------------------------------------- */

.record { list-style: none; padding: 0; }
.record li {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 6px 28px; padding-block: 18px;
  border-bottom: 1px solid var(--line-soft);
  break-inside: avoid;
}
.record li:first-child { border-top: 1px solid var(--line-soft); }
.record .figure { font-family: var(--serif); font-size: var(--step-2); color: var(--gold); line-height: 1.1; }
.record .detail { color: var(--muted); align-self: center; font-size: .95rem; }
@media (min-width: 700px) { .record { columns: 2; column-gap: 40px; } .record li:first-child { border-top: 1px solid var(--line-soft); } }
@media (max-width: 660px) { .record li { grid-template-columns: 1fr; gap: 5px; } }

/* --- Brand story -------------------------------------------------------- */

.origin {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}
@media (max-width: 900px) { .origin { grid-template-columns: 1fr; } .origin-figure { max-width: 340px; margin-inline: auto; } }
.origin-figure svg { width: 100%; height: auto; overflow: visible; }
.origin p { color: var(--muted); }
.origin p + p { margin-top: 16px; }
.origin .coord {
  font-family: var(--serif); font-size: var(--step-2); color: var(--gold);
  letter-spacing: .04em; margin-bottom: 18px;
}

/* --- About -------------------------------------------------------------- */

.about-grid {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr);
  gap: clamp(34px, 6vw, 76px); align-items: start;
}
.about-grid p { color: var(--muted); }
.about-grid p + p { margin-top: 17px; }
.portrait-col { position: relative; max-width: 420px; margin-left: auto; }
/* No border and no radius. Both portraits are cut-outs on transparency, alpha
   zero in the corners and still transparent well inside the frame, so a 1px
   rule drew a rectangle through empty navy above his head with nothing in it.
   A frame separates a photograph from the page; a cut-out has no edge to
   separate and the frame just puts back the panel the cut-out removed.
   Marc's ruling, 2026-09-08. The filter stays: it holds the skin tones to the
   house palette and is doing real work. */
.portrait {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: saturate(.9) contrast(1.03);
}
.portrait-cap { margin-top: 14px; font-size: var(--step--1); color: var(--muted); letter-spacing: .04em; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-grid .portrait-col { max-width: 350px; } }

.credentials { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 11px; }
.credentials li { position: relative; padding-left: 26px; color: var(--muted); font-size: .95rem; }
.credentials li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%;
}

/* --- Services at-a-glance strip ----------------------------------------- */

/* Nine boxes, three rows of three. The icon sits left of the title rather than
   above it, which is what actually shortens the strip: each box becomes two
   short lines instead of a block. Copy is written to a measured budget of two
   lines at 1280px, the tightest width at which this is still a 3-column grid
   (299px of text per line at 1366px, 42 characters in Inter at .855rem).
   Do not lengthen a description without re-measuring. */
@media (min-width: 620px) {
  #svc-glance .card-link {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 13px;
    align-items: start;
    padding: 15px 18px;
  }
  #svc-glance .card-link .card-icon {
    grid-column: 1; grid-row: 1;
    width: 26px; height: 26px; margin: 1px 0 0;
  }
  #svc-glance .card-link h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: .99rem; line-height: 1.3; }
  #svc-glance .card-link p  { grid-column: 2; grid-row: 2; margin: 5px 0 0; font-size: .855rem; line-height: 1.5; max-width: 44ch; } /* 44ch, not the 42ch card default: keeps Market Entry at three lines at desktop width (Marc, 26 Sept) */
}
/* Board Advisory card carries the /board line beneath it, inside the same grid cell. 2026-09-26 */
#svc-glance .svc-card-wrap { display: flex; flex-direction: column; gap: 10px; }
#svc-glance .svc-card-wrap > .card-link { flex: 1; }
#svc-glance .svc-card-wrap > .small { margin: 0 4px; }
/* Below 620px a 26px column plus text is cramped, so the icon returns above. */
@media (max-width: 619px) {
  #svc-glance .card-link { padding: 18px; }
  #svc-glance .card-link .card-icon { width: 28px; height: 28px; margin-bottom: 10px; }
}

/* The ninth box opens mail rather than jumping down the page, and carries the
   only gold fill in the strip because it is the only one that acts. */
#svc-glance .card-cta { border-color: var(--gold); background: rgba(201, 164, 76, .07); }
#svc-glance .card-cta h3 { color: var(--gold-warm); }

/* --- Pull-quote --------------------------------------------------------- */

/* Promotes a line out of running text. No quotation marks and no italics: the
   gold rule and the shift to the display serif carry it.
   Deliberately NO max-width. The rice bowl line is 21.3em in Playfair and a
   34ch cap is 20.4em, so a measure set by eye broke it onto three lines for
   the sake of 4%. The column decides: one line where it fits, two where it
   does not. */
.pullquote {
  margin: 34px 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--gold);
}
.pullquote p {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;   /* when it must wrap, split evenly rather than orphan the last word */
}
@media (max-width: 660px) {
  .pullquote { margin: 26px 0; padding-left: 18px; }
}

/* --- Articles ----------------------------------------------------------- */

.article-meta { font-size: var(--step--1); color: var(--faint); letter-spacing: .1em; text-transform: uppercase; padding-top: 7px; }

.article-head { border-bottom: 1px solid var(--line-soft); padding-bottom: 34px; margin-bottom: 42px; }
.article-head .article-meta { padding-top: 0; margin-bottom: 18px; }
.article-body { font-size: var(--step-1); line-height: 1.76; max-width: var(--measure); color: var(--ink-2); }
.article-body p + p { margin-top: 1.2em; }
.article-foot {
  margin-top: 54px; padding-top: 32px; border-top: 1px solid var(--line-soft);
  font-size: .95rem; color: var(--muted); max-width: var(--measure);
}
.article-foot a, .article-body a { color: var(--gold-warm); text-decoration-color: var(--line); text-underline-offset: 3px; }

.back-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--faint); text-decoration: none;
}
.back-link:hover { color: var(--gold); }

/* --- Contact and forms -------------------------------------------------- */

.contact-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 6vw, 76px); align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.detail-row { padding-block: 19px; border-bottom: 1px solid var(--line-soft); }
.detail-row:first-of-type { border-top: 1px solid var(--line-soft); }
.detail-row .label { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.detail-row .value { color: var(--ink); }
.detail-row .value a { color: var(--gold-warm); text-decoration-color: var(--line); text-underline-offset: 3px; }
.detail-row .value a:hover { color: var(--gold); }

.form { display: grid; gap: 19px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .89rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.field .hint { font-size: var(--step--1); color: var(--faint); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line-hard);
  border-radius: var(--r); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(201,164,76,.16);
}
.field textarea { min-height: 152px; resize: vertical; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #d9645a; }
.field .error { font-size: var(--step--1); color: #e0837b; display: none; }
.field.invalid .error { display: block; }
.field select option { background: var(--surface-2); color: var(--ink); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .89rem; color: var(--muted); }
.consent input { width: auto; margin-top: 4px; flex: none; accent-color: var(--gold); }
.consent a { color: var(--gold-warm); }

.form-note { padding: 15px 17px; border-radius: var(--r); font-size: .93rem; display: none; }
.form-note.ok { display: block; background: rgba(201,164,76,.11); border: 1px solid var(--gold); color: var(--ink); }
.form-note.err { display: block; background: rgba(217,100,90,.10); border: 1px solid #d9645a; color: var(--ink); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  padding-block: 66px 36px;
  font-size: .93rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(148px, 100%), 1fr));
  gap: 40px; padding-bottom: 42px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-blurb { margin-top: 18px; max-width: 36ch; color: var(--muted); }
.footer-col h2 {
  font-family: var(--sans); font-size: var(--step--1);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--gold-warm); }
.footer-bottom {
  padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; font-size: .86rem; color: var(--faint);
}
.footer-bottom a { color: var(--faint); }
.footer-bottom a:hover { color: var(--gold-warm); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Phone and tablet footer (2026-09-27, buyer run 6). The desktop grid's first
   track is minmax(0, 1.5fr), so below 901px auto-fit packed the 148px link
   columns in first and starved the brand column to 17-183px. The nowrap
   lockup (about 185px) then ran into the first column heading ("UNTERNEHMEN",
   "LE CABINET") at every width from 320 to 900, and at 390 the email sat
   25px past the content edge, 9px from the screen edge. All six languages.
   Below 901px the brand and blurb take the full row and the link columns
   flow in beneath it from an 8rem basis, so at 390 the two named columns sit
   side by side in every language. A flex item cannot shrink below its
   longest word, so a column holding "Nutzungsbedingungen" or the email moves
   whole onto the next row instead of overlapping or overflowing. The desktop
   grid from 901px up is unchanged. */
@media (max-width: 900px) {
  .footer-top { display: flex; flex-wrap: wrap; gap: 36px 32px; }
  .footer-top > :first-child { flex: 1 1 100%; }
  .footer-col { flex: 1 1 8rem; }
}

/* --- One-screen hero --------------------------------------------------- */

.hero-full {
  min-height: min(calc(100svh - 96px), 560px);
  display: grid; align-items: center;
  padding-block: clamp(16px, 2.5vh, 36px);
  overflow: hidden;
}
.hero-full .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3.4vw, 58px);
  align-items: center;
}
.hero-full h1 { font-size: clamp(1.6rem, 1.05rem + 2.15vw, 3.05rem); line-height: 1.16; max-width: 100%; }
.hero-full .lede { font-size: clamp(1rem, .93rem + .32vw, 1.24rem); margin-top: 14px; }
.hero-full .btn-row { margin-top: 18px; }
.hero-full .geo { margin-top: 16px; }

.hero-jump {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: clamp(24px, 3.5vh, 46px);
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.hero-jump a {
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0;
}
.hero-jump a:hover { color: var(--gold); }
.hero-jump a::after { content: ""; width: 14px; height: 1px; background: currentColor; }

@media (max-width: 900px) {
  .hero-full { min-height: calc(100svh - 87px); padding-block: clamp(16px, 2.5vh, 44px); }
  .hero-full .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-full .hero-figure { order: 2; }
  .hero-full .geo { margin-top: 20px; }
  .hero-jump { display: none; }
}
/* Narrow desktops and small laptops. The container is proportionally tighter
   here, so the text column wraps taller and the hero needs winding in. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-full h1 { font-size: clamp(2.0rem, 1.15rem + 2.5vw, 2.65rem); line-height: 1.16; }
  .hero-full .lede { font-size: 1rem; margin-top: 16px; }
  .hero-full .btn-row { margin-top: 22px; }
  .hero-full .geo { margin-top: 20px; }
  .hero-jump { display: none; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .hero-full .lede { font-size: 1rem; }
  .hero-jump { display: none; }
}

/* Short desktop viewports: claw back the last few pixels */
@media (min-width: 901px) and (max-height: 820px) {
  .hero-full { padding-block: clamp(10px, 1.6vh, 26px); }
  .hero-jump { margin-top: 22px; padding-top: 14px; }
}

/* Short phones: the hero still has to land on one screen */
@media (max-width: 900px) and (max-height: 840px) {
  .hero-full { padding-block: 12px 18px; }
  .hero-full .hero-grid { gap: 15px; }
  .hero-full h1 { font-size: clamp(1.58rem, 1.05rem + 2.2vw, 2.05rem); }
  .hero-full .lede { font-size: .92rem; line-height: 1.5; margin-top: 13px; }
  .hero-full .btn-row { margin-top: 16px; gap: 9px; }
  .hero-full .btn, .hero-full .btn-ghost { padding: 11px 20px; font-size: .88rem; }
  .hero-full .geo { margin-top: 14px; gap: 11px; }
}

/* Very short phones (360x640 and similar). The geography strapline is the
   least load-bearing element here and it is repeated on the services page. */
@media (max-width: 900px) and (max-height: 680px) {
  .hero-full .geo { display: none; }
  .hero-full h1 { font-size: 1.5rem; }
  .hero-full .lede { font-size: .88rem; margin-top: 11px; }
  .hero-full .hero-grid { gap: 12px; }
  .wm-pin i { display: none; }
}

/* --- World map ---------------------------------------------------------- */

.worldmap { position: relative; width: 100%; }
.worldmap > img { width: 100%; height: auto; display: block; opacity: .92; }

.wm-line {
  position: absolute; top: -6%; bottom: -6%; width: 1px;
  transform: translateX(-50%); pointer-events: none;
}
.wm-line.primary {
  left: 50%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 14%, var(--gold-warm) 50%, var(--gold) 86%, transparent);
}
.wm-line.secondary {
  left: 1.67%;
  background: linear-gradient(180deg, transparent, rgba(201,164,76,.55) 22%, rgba(201,164,76,.55) 78%, transparent);
}
.wm-deg {
  position: absolute; top: -2px;
  font-family: var(--sans); font-size: clamp(.62rem, .45rem + .3vw, .78rem);
  font-weight: 600; letter-spacing: .22em; color: var(--gold);
  white-space: nowrap;
}
.wm-deg.primary   { left: calc(50% + 12px); }
.wm-deg.secondary { left: calc(1.67% + 10px); color: rgba(201,164,76,.75); }

.wm-pin {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-warm); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(201,164,76,.16), 0 0 0 11px rgba(201,164,76,.07);
}
.wm-pin.small { width: 6px; height: 6px; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,164,76,.12); }
.wm-pin b {
  position: absolute; left: 15px; top: -8px; white-space: nowrap;
  font-family: var(--sans); font-size: clamp(.6rem, .44rem + .28vw, .74rem);
  font-weight: 600; letter-spacing: .18em; color: var(--ink);
}
.wm-pin.small b { color: var(--muted); font-weight: 500; }
.wm-pin i {
  position: absolute; left: 15px; top: 7px; white-space: nowrap; font-style: normal;
  font-family: var(--sans); font-size: clamp(.54rem, .4rem + .22vw, .66rem);
  letter-spacing: .1em; color: var(--faint);
}
@media (max-width: 620px) {
  .wm-pin i { display: none; }
  .wm-pin b { font-size: .58rem; letter-spacing: .12em; }
}

/* --- Broadcast feature -------------------------------------------------- */

.broadcast {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
@media (max-width: 880px) { .broadcast { grid-template-columns: 1fr; } }

.broadcast-still {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none;
}
.broadcast-still img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease), filter .4s var(--ease); filter: saturate(.9); }
.broadcast-still:hover img { transform: scale(1.03); filter: saturate(1); }
.broadcast-still::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,16,28,.06), rgba(4,16,28,.22));
}
/* Sits top-right, clear of Marc's face (centre-frame) and the BBC chyron (lower band). */
.broadcast-play {
  position: absolute; right: 20px; top: 20px; transform: none;
  width: 62px; height: 62px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
  background: rgba(201,164,76,.92);
  transition: transform .3s var(--ease);
}
.broadcast-still:hover .broadcast-play { transform: scale(1.08); }
@media (max-width: 520px) { .broadcast-play { width: 48px; height: 48px; right: 14px; top: 14px; } }
.broadcast-play svg { width: 22px; height: 22px; fill: #071523; margin-left: 3px; }
.broadcast-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 20px 15px;
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
}

/* --- Media -------------------------------------------------------------- */

.media-band {
  position: relative; overflow: hidden;
  min-height: clamp(340px, 46vw, 560px);
  display: grid; align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}
.media-band > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.88);
}
.media-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--bg) 4%, rgba(7,21,35,.90) 40%, rgba(7,21,35,.58) 72%, rgba(7,21,35,.42) 100%);
}
.media-band > .wrap { position: relative; z-index: 2; }
.media-band h2 { max-width: 20ch; }
.media-band .lede { max-width: 52ch; }

.figure { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 20px 14px;
  background: linear-gradient(180deg, transparent, rgba(4,16,28,.92));
  font-size: var(--step--1); color: var(--ink-2); letter-spacing: .05em;
}

.media-split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
.media-split.narrow-left { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
@media (max-width: 880px) {
  .media-split, .media-split.narrow-left { grid-template-columns: 1fr; }
  .media-split .figure { max-width: 420px; margin-inline: auto; }
}

.credits { font-size: var(--step--2); color: var(--faint); line-height: 1.7; }
.credits a { color: var(--muted); text-decoration-color: var(--line); text-underline-offset: 2px; }
.credits a:hover { color: var(--gold-warm); }

/* --- Geography strapline ------------------------------------------------ */

.geo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 38px;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.geo span { position: relative; padding-right: 16px; }
.geo span:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); opacity: .55; transform: translateY(-50%);
}

/* --- Sector lists ------------------------------------------------------- */

.sector-list { list-style: none; padding: 0; display: grid; gap: 0; }
.sector-list li {
  position: relative; padding: 11px 0 11px 24px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2); font-size: .95rem;
}
.sector-list li:last-child { border-bottom: 0; }
.sector-list li::before {
  content: ""; position: absolute; left: 0; top: 1.2em;
  width: 9px; height: 1px; background: var(--gold);
}

/* --- Credential band ---------------------------------------------------- */

.creds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0; border-top: 1px solid var(--line-soft);
}
.creds div {
  padding: 26px 30px 26px 0;
  border-bottom: 1px solid var(--line-soft);
}
.creds .k {
  font-family: var(--serif); font-size: var(--step-1);
  color: var(--gold); line-height: 1.25; margin-bottom: 8px;
}
.creds .v { color: var(--muted); font-size: .94rem; }

/* --- Reveal ------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* Draw-on animation */
.js .draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.js .reveal.in .draw { animation: draw 1.9s var(--ease) forwards; }

/* First-screen content is never hidden behind JS: an opacity:0 element is not
   an LCP candidate, which was costing 3.4s of measured LCP. */
.js #main > section:nth-of-type(-n+3) .reveal { opacity: 1; transform: none; transition: none; }
.js #main > section:nth-of-type(-n+3) .draw { stroke-dashoffset: 0; }

/* Independent failsafe armed in the head: if site.js never runs, nothing stays invisible. */
.js.no-anim .reveal { opacity: 1; transform: none; transition: none; }
.js.no-anim .draw { stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .draw { stroke-dashoffset: 0; }
  .js .reveal.in .draw { animation: none; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .btn-row, .hero-figure { display: none; }
  body, html { background: #fff; color: #000; }
  h1, h2, h3, h4, .lede, .prose, p { color: #000 !important; }
}

/* --- Proof strip (homepage) --------------------------------------------
   Three equal columns across the full width. Deliberately NOT .record,
   which is a two-column list built for the longer About page set and
   clips anything wider than its 150px figure column. */
.proof-strip {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 3.4vw, 56px);
}
.proof-strip li {
  padding-top: 20px; padding-bottom: 24px;
  border-top: 1px solid var(--line-soft);
}
.proof-strip .figure,
.record .figure {
  border: 0; border-radius: 0; overflow: visible;
}
.proof-strip .figure {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-2);
  color: var(--gold);
  line-height: 1.15;
  margin-bottom: 10px;
}
.proof-strip .detail {
  display: block;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .proof-strip { grid-template-columns: 1fr; gap: 0; }
  .proof-strip li { padding-block: 18px; }
}

/* Tighter rhythm between homepage bands so nothing reads as the end of the page. */
.hero-full + section { padding-block: clamp(34px, 4.4vw, 52px); }
section.tight { padding-block: clamp(34px, 4.6vw, 56px); }
.band.band-line { padding-block: clamp(38px, 5vw, 62px); }

/* Hero map was driving 160px of empty hero. Constrain it so the fold is worked. */
.hero-full .worldmap { max-width: 620px; margin-left: auto; }
@media (max-width: 900px) { .hero-full .worldmap { max-width: 100%; } }

/* Clickable service cards on Home. The whole card is an anchor. */
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link h3 { transition: color .2s ease; }
.card-link:hover h3, .card-link:focus-visible h3 { color: var(--gold); }
.card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Board hero portrait. Half-length crop, 10:9, deliberately not the 4/5 About shape. */
.board-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  gap: clamp(28px, 5vw, 64px); align-items: center; }
.board-portrait-col { max-width: 360px; margin-left: auto; }
.board-portrait { width: 100%; height: auto; display: block;
  filter: saturate(.9) contrast(1.03); }   /* border and radius removed, see .portrait */
@media (max-width: 860px) {
  .board-hero { grid-template-columns: 1fr; }
  .board-portrait-col { max-width: 260px; margin-left: 0; }
}

/* --- Insights index: tiled grid, one photo per article -------------------
   Marc, 2026-09-03. Supersedes the 2026-08-31 lead-plus-list layout, which
   gave only the newest piece a thumbnail and dropped the other six to a
   text-only row apiece. Reopened on his own instruction, once photography
   existed for every article's share card and he wanted all seven visible at
   once rather than one lead image and six bare lines. Each tile reuses that
   article's own share-card photo (a 520x273 downsize of images/og/*.png),
   so a reader sees on the index what a receiving app shows when the piece
   is shared. The old .insight-lead / .insight-more / .insight-index rules
   are retired with it. */

.insight-tile {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.insight-tile:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow); }
.insight-tile img { width: 100%; height: auto; display: block; }

/* --- Photo bands (added 2026-09-02) --------------------------------------
   Marc's ruling stands: the night photographs go on the site AS SHOT. No
   filter, no duotone, no hue or saturation change. Bangkok at night already
   is the palette.

   ONE EXCEPTION, made by him on 2026-09-02: the blue-hour Wat Arun on Board.
   He tuned it in Website-docs/HundredEast_Photo-Colour-Tuner_v2.html and the
   grade sits inline on that section as --ph-filter. It is scoped to that one
   band on purpose. Previous style.css is in
   Website-docs/backups/colour_pre_2026-09-02/.

   The scrim is separate and still per page, and it exists so white text stays legible
   over a lit city. It is a legibility control, not a colour one.

   Every value is PER PAGE and was set by Marc in
   Website-docs/HundredEast_Page-Imagery-Plan_v2.html. Do not unify them.
     --ph-scrim  how dark the text side goes
     --ph-reach  how far across that darkening carries, in percent
     --ph-pos    vertical framing of the crop
     --ph-min    minimum band height
   The declarations sit inline on each section so the value and the page that
   owns it stay in one place.                                              */
.photo-band { position: relative; overflow: hidden; background: var(--bg-deep); }
.photo-band > .ph-img {
  /* AS SHOT is the default and stays the default. Marc graded ONE photograph,
     the blue-hour Wat Arun on Board, and only that section sets --ph-filter.
     Do not put a grade here: a global default silently recoloured four bands
     he had not asked to change, which is the mistake this line now prevents. */
  filter: var(--ph-filter, none);
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center var(--ph-pos, 50%);
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7,21,35, var(--ph-scrim, .62)) 0%,
    rgba(7,21,35, calc(var(--ph-scrim, .62) * .8)) calc(var(--ph-reach, 54) * 1%),
    rgba(7,21,35, .06) 100%);
}
.photo-band > .wrap {
  position: relative; z-index: 1;
  /* The band is sized by SHAPE, not by pixels. Marc set these on a 1462px
     frame; a fixed height would have shown less of the photograph the wider
     the screen got, which is exactly the fault he caught. --ph-ar is
     width divided by height, so the share of the frame on screen is the same
     at every width. Capped at 92vh so a hero never exceeds one screen. */
  /* No vh cap here. When Marc supplies his own crop, the band must show that
     crop whole; a viewport cap silently trims his top and bottom, which is
     what happened to the Services bridge at 92vh on a 1920x890 window.
     Home keeps its own cap below, because it alone is bound by the
     DEPLOY section 18 one-screen rule. */
  min-height: calc(100vw / var(--ph-ar, 2));
  display: flex; flex-direction: column; justify-content: center;
}
/* Copy sitting at the foot of the band. Marc's ask on Services. It is done by
   anchoring rather than by a --ph-drop in pixels: a fixed drop is measured at
   1920 and overflows the band at narrower widths, which grows the band and
   silently changes the crop. Anchoring holds at every width. */
.photo-band.copy-bottom > .wrap { justify-content: flex-end; padding-bottom: 44px; }

.photo-band .hero-copy { max-width: 620px; }
/* 620px is what the approval preview used. At 62ch the lede ran past the
   point where the scrim has faded and the last lines sat on lit windows. */
/* On a narrow screen the copy runs the full width, so a left-to-right scrim
   leaves the last lines sitting on lit windows. Below 760px it becomes a
   vertical wash instead, slightly deeper because there is nowhere to hide. */
@media (max-width: 760px) {
  .photo-band::after {
    background: linear-gradient(180deg,
      rgba(7,21,35, calc(var(--ph-scrim, .62) + .10)) 0%,
      rgba(7,21,35, calc(var(--ph-scrim, .62) + .22)) 100%);
  }
}
/* The band height is Marc's setting, so the section's own vertical padding is
   removed and the breathing room moves inside the wrap. Without this the
   .hero and .hero-sub padding stacks on top of --ph-min and the band renders
   far taller than what he approved, which also changes what the crop shows. */
.photo-band.hero, .photo-band.hero-sub { padding-block: 0; }
.photo-band > .wrap { padding-block: calc(18px + var(--ph-drop, 0px)) 18px; }
/* --ph-drop nudges the copy down inside the band without touching its size.
   The wrap is centred, so extra padding at the top moves the block lower.
   Type size is set by the viewport, never by the band, so nothing here can
   shrink the text. */
/* The one-screen hero rule pins .hero-full to min(100svh - 96px, 560px), and
   that was overriding the band height Marc set. On a photo band his value
   governs instead. Home cannot go below about 380px because the copy itself
   is 345px tall at desktop, so 340 is the floor rather than the exact number. */
.photo-band.hero-full { min-height: 0; }  /* the wrap governs, see --ph-ar above */
/* Home is the only band still bound by the DEPLOY section 18 one-screen rule,
   so its shape is additionally capped to leave the header and a margin above
   the fold. Without this it overshoots by 36px at 1366x768, which is the most
   common laptop on the list. Every other page is free to run to 92vh. */
.photo-band.hero-full > .wrap {
  min-height: min(calc(100vw / var(--ph-ar, 1.874)), calc(100svh - 150px));
}

/* Type on a photograph. The site's ink (#eef3f8) and muted (#8b9daf) are both
   blue, which reads as dull against lit gold and was Marc's note on Services.
   White on the band only. Everything off a photograph keeps the site palette. */
.photo-band h1 { color: #fff; }
.photo-band p, .photo-band .lede { color: rgba(255,255,255,.94); }
/* Broad on purpose. A photo band only ever wraps hero copy, so there is no
   card or list text inside one to catch. Board's paragraph is nested two
   levels down and a child selector missed it. */
.photo-band .btn-ghost { border-color: rgba(255,255,255,.72); color: #fff; }

/* --- Language selector -------------------------------------------------- */
/* Native <details>. It opens and closes with no JavaScript at all, which is
   what the no-JS rule in DEPLOY.md section 7 requires of a control that is the
   only route between six language versions of the site. site.js adds
   outside-click and Escape closing on top; neither is load-bearing. */

.lang { position: relative; flex: 0 0 auto; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 11px 9px 10px;
  font-family: var(--sans); font-size: .86rem; letter-spacing: .06em;
  color: var(--muted); cursor: pointer; list-style: none;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang > summary:hover { color: var(--ink); border-color: var(--line-hard); }
.lang[open] > summary { color: var(--ink); border-color: var(--line); }
.lang > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.lang-globe { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; flex: 0 0 auto; }
.lang-code { font-weight: 600; }
.lang-caret { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; opacity: .7; transition: transform .18s var(--ease); }
.lang[open] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 194px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-hard);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.lang-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 11px; text-decoration: none;
  font-size: .93rem; color: var(--ink-2); border-radius: var(--r);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.lang-menu a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.lang-menu a[aria-current="true"] { color: var(--gold); }
.lang-menu a[aria-current="true"] .lang-tag { color: var(--gold); }
.lang-tag { font-size: .74rem; letter-spacing: .1em; color: var(--faint); }

/* The selector sits outside the collapsing menu, so it stays in the upper
   right at every width. Below 900px the label drops to the code alone. */
@media (max-width: 900px) {
  .lang > summary { padding: 9px; gap: 5px; }
  .lang-caret { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lang-caret { transition: none; } }

/* --- Thai ---------------------------------------------------------------
   Neither Inter nor Playfair carries Thai glyphs, so a Thai page would fall
   through to whatever the browser picked per character. These stacks name the
   fallback instead of leaving it to chance, and every face in them ships with
   an operating system: no new font file, no new request, and the closed CSP in
   _headers stays closed. Thai needs more leading than Latin because the tone
   marks and the upper vowels stack two levels above the baseline. */

:root {
  --thai: "Noto Sans Thai", "IBM Plex Sans Thai", "Sarabun", "Leelawadee UI",
          "Thonburi", Tahoma, sans-serif;
  --thai-display: "Noto Serif Thai", "Noto Sans Thai", "IBM Plex Sans Thai",
          "Leelawadee UI", "Thonburi", Tahoma, sans-serif;
}

html[lang="th"] body { font-family: var(--thai); line-height: 1.85; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="th"] h4, html[lang="th"] .figure, html[lang="th"] .n {
  font-family: var(--thai-display); line-height: 1.5; letter-spacing: 0;
}
html[lang="th"] .eyebrow, html[lang="th"] .lede,
html[lang="th"] .nav-links a, html[lang="th"] .btn, html[lang="th"] .btn-ghost {
  font-family: var(--thai); letter-spacing: 0;
}
/* Thai has no letter case and no word spaces, so tracked-out uppercase styling
   turns into gapped glyphs and a broken line-break opportunity. */
html[lang="th"] .eyebrow, html[lang="th"] .small, html[lang="th"] .lang-tag {
  text-transform: none; word-break: break-word; line-break: loose;
}
/* The brand lockup and the language codes are Latin on every page. */
html[lang="th"] .brand-coord, html[lang="th"] .brand-word,
html[lang="th"] .lang-code, html[lang="th"] .lang-tag { font-family: var(--geo); }
:lang(th) { line-height: 1.85; }
.lang-note { color: var(--faint); margin: 6px 0 0; font-size: var(--step--1); }

/* The hero tiers above were calibrated against the English lede. The same
   sentence runs 20 to 45 per cent longer in French, German, Spanish and
   Italian, and Thai needs more leading, so on short phones the translated
   pages need one more notch to keep the hero on one screen. English is
   deliberately excluded: it already fits and must not be re-tuned. */
@media (max-width: 900px) and (max-height: 720px) {
  html:not([lang="en"]) .hero-full h1 { font-size: 1.42rem; }
  html:not([lang="en"]) .hero-full .lede { font-size: .85rem; line-height: 1.46; margin-top: 10px; }
  html[lang="th"] .hero-full .lede { line-height: 1.62; }
}
/* Very short phones. The tier above is not enough for French, which wraps one
   line more than the others at 360px even at the same character count. */
@media (max-width: 900px) and (max-height: 680px) {
  html:not([lang="en"]) .hero-full h1 { font-size: 1.36rem; }
  html:not([lang="en"]) .hero-full .lede { font-size: .82rem; line-height: 1.42; margin-top: 9px; }
  html[lang="th"] .hero-full .lede { line-height: 1.58; }
}

/* The header gained a third item when the language selector went in, and
   .icon-btn was shrinkable. At 375px the hamburger was being squeezed from
   44px to 22px wide, which is under the 40px tap-target floor the mobile audit
   in DEPLOY.md section 16 claims the site holds. Both controls are fixed size
   now; the brand is the only thing that may give. */
.icon-btn { flex: 0 0 auto; }
.nav .brand { min-width: 0; }

/* Phone header. Three items have to sit on one bar: lockup, language selector,
   menu button. Below 412px they did not fit, and because .icon-btn is now a
   fixed size the brand lockup was the thing being compressed: 38px squeezed
   out of it at 360, 24px at 375. Marc saw it as the selector running into the
   logo, which is exactly what a compressed lockup looks like.

   The fix is to buy the space back rather than move the squeeze somewhere
   else: tighter gaps, a tighter selector, and below 400px a narrower gutter.
   The globe icon stays at every width - see the note below. The lockup then
   renders at its natural width at every width down to 320. */
@media (max-width: 900px) {
  .nav { gap: 10px; }
  .lang > summary { padding: 8px 9px; gap: 5px; }
}
@media (max-width: 400px) {
  .nav { gap: 8px; padding-inline: 14px; }
  .lang > summary { padding: 8px; }
}
/* The globe stays at every width. It is the affordance that makes the control
   read as a language switcher rather than an unexplained country code, and
   once the gutters and gaps were tightened there is room for it down to
   320px. Hiding it was tried and reverted the same day. */
/* 320px is the narrowest width in the section 16 audit set. The lockup still
   loses 15px there, so it steps down one notch and the gutter tightens. */
@media (max-width: 340px) {
  :root { --brand-size: 1.34rem; }
  .nav { padding-inline: 10px; }
}

/* --- Phone heroes on Home and Services (2026-09-07) -----------------------
   Marc, from his phone: the photo is "not rendering full screen" on Home and
   Services while every other page is fine.

   It was not a rendering failure. The photographs are 3.3:1 landscape crops.
   Board, About and Insights take their band height from that ratio, so the
   whole picture shows. Home is forced to full screen height by the one-screen
   rule, and Services is pushed taller by its copy, so object-fit: cover scales
   to the HEIGHT and throws the width away. Measured at 390px: Home showed 19%
   of its photograph, Services 40%, everything else 99%.

   A full-screen hero and a legible 3.3:1 photograph cannot both exist on a
   portrait phone. His ruling, 2026-09-07: match the other pages. The photo
   renders at its own aspect and the copy moves below it onto the navy ground.
   DEPLOY section 18's one-screen rule is given up ON PHONES ONLY and is
   untouched from 901px up, where the crop was never a problem.
   The six service pages (.svc-hero, 25 Sept) were built after this rule and
   missed it: on a phone the band shrank to the copy and cover zoomed into a
   sliver. Marc, 26 Sept: show the whole picture like the rest. Added here. */
@media (max-width: 900px) {
  .photo-band.hero-full,
  .photo-band.copy-bottom,
  .photo-band.svc-hero { min-height: 0; }

  /* Out of the absolute layer and into the flow, so the picture sets its own
     height and shows whole. */
  .photo-band.hero-full > .ph-img,
  .photo-band.copy-bottom > .ph-img,
  .photo-band.svc-hero > .ph-img {
    position: static; display: block; width: 100%; height: auto;
  }

  /* The scrim is a legibility control, not a colour one - the comment on the
     photo-band block says so. No text sits over these two pictures on a phone
     any more, so there is nothing to protect and the wash comes off. That
     returns them to AS SHOT, which is Marc's standing rule for this imagery.
     A hairline keeps the picture from bleeding into the ground below it. */
  .photo-band.hero-full::after,
  .photo-band.copy-bottom::after,
  .photo-band.svc-hero::after { display: none; }
  .photo-band.hero-full > .ph-img,
  .photo-band.copy-bottom > .ph-img,
  .photo-band.svc-hero > .ph-img { border-bottom: 1px solid var(--line-soft); }

  .photo-band.hero-full > .wrap,
  .photo-band.copy-bottom > .wrap,
  .photo-band.svc-hero > .wrap {
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(22px, 5vw, 34px);
    padding-bottom: clamp(24px, 6vw, 40px);
  }
}
/* A bare px floor in an auto-fit track cannot shrink below itself, so at 320px
   the two-column grid forced a 310px column inside a 258px container and the
   page scrolled sideways. Found 2026-09-07 while fixing the phone heroes; it
   predates that work and was missed because the page audit ran at 375, 768 and
   1440 but not at 320. `min(<floor>, 100%)` keeps the intended floor on real
   screens and lets it collapse on very narrow ones. */

/* --- Insights tile dek -------------------------------------------------- */
.tile-dek {
  margin: 10px 2px 0; font-size: var(--step--1); line-height: 1.45;
  color: var(--muted);
}
.insight-tile:hover .tile-dek { color: var(--ink); }

/* --- Service pages, /services/<slug> (2026-09-25) ------------------------
   Six single-service pages built from the 8 Sept one-pager drafts. Only what
   the main stylesheet had no need for before: the service icon at section
   scale, the decision list, and a hero that carries eyebrow, lede and buttons.
   The hero rules are scoped to .svc-hero so the /services, Board and About
   photo bands are untouched. */
/* The icon sits in line with the situation H2, to its left (Marc, 26 Sept).
   The markup order is section-head, icon, body, so the wrap becomes a grid
   and the section-head dissolves into it: eyebrow across the top, icon and
   H2 side by side, body full width below. Without :has() the icon simply
   stacks above the body as before. Since the two-column layout (26 Sept) the
   grid is the situation column, not the whole wrap, and the body sits 28px
   under the H2 to line up with the decision list in the next column. */
.svc-ico { width: 46px; height: 46px; color: var(--gold); margin-bottom: 22px; }
.svc-col:has(> .svc-ico) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px;
}
.svc-col:has(> .svc-ico) > .section-head { display: contents; }
.svc-col:has(> .svc-ico) > .section-head > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
.svc-col:has(> .svc-ico) > .section-head > h2 { grid-column: 2; grid-row: 2; align-self: center; }
.svc-col:has(> .svc-ico) > .svc-ico { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
.svc-col:has(> .svc-ico) > .svc-body { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; }
@media (max-width: 600px) {
  .svc-ico { width: 36px; height: 36px; }
  .svc-col:has(> .svc-ico) { column-gap: 14px; }
}
.svc-ico svg { width: 100%; height: 100%; display: block; stroke: currentColor;
  fill: none; stroke-width: 1.5; }
.svc-ico svg .fill { fill: currentColor; stroke: none; }

.decisions { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.decisions li { padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line-soft);
  position: relative; }
.decisions li:first-child { border-top: 1px solid var(--line-soft); }
.decisions li::before { content: ""; position: absolute; left: 2px; top: 26px;
  width: 12px; height: 1px; background: var(--gold); }

.svc-body p { max-width: 68ch; }
.svc-body p + p { margin-top: 16px; }

.svc-hero.photo-band .hero-copy { max-width: 640px; padding-block: clamp(28px, 5vw, 54px); }
.svc-hero.photo-band .lede { margin-top: 16px; }
.svc-hero.photo-band .btn-row { margin-top: 26px; }
@media (max-width: 900px) {
  .svc-hero.photo-band .hero-copy { padding-block: clamp(22px, 5vw, 36px); }
}
/* Copy low in the photograph, the gap under the buttons matching home's 18px
   (Marc, 26 Sept). Anchored, not a --ph-drop: a pixel drop overflows the band
   below 1920 and changes the crop (see .copy-bottom above). Desktop only; on
   a phone the band is as tall as the copy, so there is no empty photo to take
   up. */
@media (min-width: 901px) {
  .svc-hero.photo-band > .wrap { justify-content: flex-end; }
  .svc-hero.photo-band .hero-copy { padding-bottom: 0; }
}
.svc-close .lede { margin-top: 14px; }
.svc-close .btn-row { margin-top: 24px; }
.svc-close .small { margin-top: 18px; }

/* --- Service pages, two columns down to the figures (2026-09-26) ---------
   Marc picked Option A, paired sections: situation beside decisions, the
   evidence beside the firm and its figures, the mandate beside the network.
   Each page carries its own figures (KPI-Layout brief, approved captions).
   One column below 900px.
   Marc's two requirements on carrying A forward (26 Sept): comfortable text
   size and spacing on all six pages, with each column as tall as its own
   content (align-items: start, no min-heights, no equal-height rows); and on
   a phone the sections stack as situation, work, evidence, credentials,
   engagement process, specialists, contact. That order is the markup order,
   so nothing is reordered in CSS; each stacked column gets the same hairline
   and spacing as a section break, so the phone reads as seven clear steps.
   The padding is set on both selectors because .band.band-line (above)
   outranks section.svc-tight. */
section.svc-tight,
section.svc-tight.band.band-line { padding-block: clamp(52px, 6.5vw, 88px); }
.svc-pair {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(44px, 5.5vw, 104px); align-items: start;
}
.svc-pair .section-head { margin-bottom: 30px; }
.svc-pair .section-head h2 { min-height: 46px; display: flex; align-items: center; }
.svc-pair .svc-body p { line-height: 1.72; }
.svc-pair .svc-body p + p { margin-top: 20px; }
.svc-pair .decisions li { padding-block: 18px; line-height: 1.6; }
@media (max-width: 900px) {
  .svc-pair { grid-template-columns: 1fr; row-gap: 0; }
  .svc-pair > .svc-col + .svc-col {
    margin-top: clamp(48px, 9vw, 64px); padding-top: clamp(48px, 9vw, 64px);
    border-top: 1px solid var(--line-soft);
  }
  .svc-pair .section-head h2 { min-height: 0; }
}
html[lang="th"] .svc-pair .svc-body p { line-height: 1.85; }

.svc-figs {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
}
.svc-figs li { padding: 18px 0 20px; border-top: 1px solid var(--line-soft); }
.svc-figs .figure {
  border: 0; border-radius: 0; overflow: visible; display: block;
  font-family: var(--serif); font-size: var(--step-2); color: var(--gold);
  line-height: 1.15; margin-bottom: 8px;
}
.svc-figs .detail { display: block; color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (max-width: 560px) { .svc-figs { grid-template-columns: 1fr; } }

/* --- Services drop-down (2026-09-26) -------------------------------------
   Marc: "Services" opens a menu of the six service pages with "All services"
   at the top, and "Services" itself still goes to the overview. The caret is a
   real button, so keyboard and screen readers get aria-expanded; site.js adds
   hover on desktop and tap-to-open on touch. Without script the link still
   reaches the overview and the menu stays shut. Below 900px the six pages sit
   as an expandable list inside the phone menu. */
.nav-sub { position: relative; display: flex; align-items: center; }
.nav-sub > a { padding-right: 4px; }
.nav-sub-btn {
  display: grid; place-items: center; width: 26px; height: 38px; padding: 0;
  margin-left: -2px; background: none; border: 0; border-radius: var(--r);
  color: var(--muted); cursor: pointer; transition: color .18s var(--ease);
}
.nav-sub-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 1.9; opacity: .7; transition: transform .18s var(--ease); }
.nav-sub-btn:hover, .nav-sub.open > .nav-sub-btn { color: var(--ink); }
.nav-sub.open > .nav-sub-btn svg { transform: rotate(180deg); }
.nav-sub-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-sub-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  min-width: 300px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-hard);
  border-radius: var(--r); box-shadow: var(--shadow);
}
/* Bridges the 8px gap so the pointer can travel from the link to the menu. */
.nav-sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-sub.open > .nav-sub-menu { display: block; }
.nav-links .nav-sub-menu a { padding: 9px 12px; font-size: .93rem; color: var(--ink-2); white-space: nowrap; }
.nav-links .nav-sub-menu a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-links .nav-sub-menu li:first-child a { color: var(--gold); }
@media (max-width: 900px) {
  .nav-sub { flex-wrap: wrap; }
  .nav-sub > a { flex: 1 1 auto; padding-right: 4px; }
  .nav-sub-btn { width: 48px; height: auto; align-self: stretch; margin: 0;
    border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav-sub-btn svg { width: 15px; height: 15px; }
  .nav-sub-menu { position: static; flex: 1 0 100%; min-width: 0; padding: 2px 0 8px 16px;
    background: none; border: 0; box-shadow: none; }
  .nav-sub-menu::before { content: none; }
  .nav-links .nav-sub-menu a { padding: 11px 4px; font-size: .97rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .nav-sub-btn svg { transition: none; } }


/* ==========================================================================
   Layout go-live, 27 Sept 2026: the approved preview (homepage v3 + pages v1)
   Appended in the order the approved preview loaded its stylesheets.
   The preview's switch panel is resolved: the chosen states (prop-spread,
   ft-clean, bg-ind, bg-svc, ind-light, prop-head, f-plex, seat-acc,
   in-grid-on) apply always, and the rejected options are removed. Where a
   rule was qualified by a chosen body class, ":root body" replaces
   "body.<class>": same specificity, so the cascade is the preview's.
   Image paths moved from /preview-v3/ to /images/home/.
   ========================================================================== */

/* ===== Homepage re-cut v2 (sample only) ===== */
/* Shared split header: eyebrow left, H2 right */
.v2-head { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 64px); align-items: start; margin-bottom: clamp(36px, 5vw, 60px); }
.v2-head .eyebrow { padding-top: .55em; }
.v2-head h2 { font-size: var(--step-3); }
@media (max-width: 760px) {
  .v2-head { grid-template-columns: 1fr; }
  .v2-head h2 { margin-top: 10px; }
}
.v2-label { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
/* 1. Hero: split at the foot of the band (Boaxt), scrim runs bottom-up */
.hero-split > .wrap { padding-bottom: clamp(28px, 3.2vw, 48px); }
.hero-split .hero-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(32px, 5vw, 96px); align-items: end; padding: 0; }
.hero-split .hs-title h1 { max-width: 13ch; }
.hero-split .hs-side .lede { margin-top: 0; font-size: var(--step-0); max-width: 46ch; }
.hero-split .btn-row { margin-top: 22px; }
.hero-split .rule { margin-bottom: 18px; }
.hero-split::after {
  background: linear-gradient(180deg, rgba(7,21,35,.08) 0%, rgba(7,21,35,.34) 26%, rgba(7,21,35,.80) 58%, rgba(7,21,35,.90) 100%);
}
@media (max-width: 900px) {
  .hero-split .hero-copy { grid-template-columns: 1fr; }
  .hero-split .hs-side { margin-top: 16px; }
}
/* 2. The record: one full-bleed accent band (Boaxt), gold by default */
.v2-record { background: var(--gold); color: var(--bg); padding-block: clamp(56px, 8vw, 110px); }
.v2-record .eyebrow { color: var(--bg); }
.v2-record .eyebrow::before { background: var(--bg); }
.v2-record h2 { color: var(--bg); }
.v2-figures { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 56px); }
.v2-figures li { border-top: 1px solid rgba(7,21,35,.34); padding-top: 22px; }
.v2-figures .figure { display: block; font-family: var(--serif); font-size: var(--step-3); line-height: 1.1; margin-bottom: 12px; color: var(--bg); }
.v2-figures .detail { display: block; font-size: .96rem; line-height: 1.6; color: rgba(7,21,35,.86); max-width: 40ch; }
@media (max-width: 860px) {
  .v2-figures { grid-template-columns: 1fr; gap: 0; }
  .v2-figures li { padding-block: 20px; }
}
/* 3. Industries: two-by-two list, no boxes (v1, unchanged) */
.v2-industries { background: var(--bg); }
.v2-ind { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 5vw, 80px); }
.v2-ind article { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 28px; align-items: start; border-top: 1px solid var(--line-soft); padding-top: 28px; }
.v2-ind img { width: 144px; height: 144px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; }
.v2-ind p:not(.v2-label) { color: var(--muted); max-width: 46ch; }
@media (max-width: 900px) {
  .v2-ind { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .v2-ind article { grid-template-columns: 100px minmax(0, 1fr); gap: 20px; }
  .v2-ind img { width: 100px; height: 100px; }
}
/* 4. Proposition: three flush full-bleed panels in stepped tones (Pointe) */
.v2-prop { background: var(--bg-deep); padding-bottom: 0; }
.v2-prop-head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.v2-prop-head .eyebrow { justify-content: center; }
.v2-prop-head h2 { font-size: var(--step-3); margin-top: 10px; }
.v2-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-panels a { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(48px, 5.5vw, 88px) clamp(28px, 4vw, 64px); min-height: 300px; text-decoration: none; color: var(--ink); transition: background .35s var(--ease); }
.v2-panels a:nth-child(1) { background: var(--surface); }
.v2-panels a:nth-child(2) { background: var(--raise); }
.v2-panels a:nth-child(3) { background: var(--surface); }
.v2-panels a:hover, .v2-panels a:focus-visible { background: #17334d; }
.v2-panels .v2-rule { width: 40px; height: 2px; background: var(--gold); margin-bottom: 26px; transition: width .35s var(--ease); }
.v2-panels a:hover .v2-rule, .v2-panels a:focus-visible .v2-rule { width: 88px; }
.v2-panels p:not(.v2-label) { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 30ch; }
@media (max-width: 760px) {
  .v2-panels { grid-template-columns: 1fr; }
  .v2-panels a { min-height: 0; }
}
/* 5. Services: image beside an indexed list; the image follows the row (Boaxt, Pointe split) */
.v2-svc { background: var(--surface-2); border-top: 1px solid var(--line-soft); }
.v2-svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.v2-svc-media { position: sticky; top: 124px; }
.v2-svc-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-soft); }
.v2-svc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.v2-svc-frame img.on { opacity: 1; }
.v2-svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.v2-svc-list li { border-bottom: 1px solid var(--line-soft); }
.v2-svc-list a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 0; padding: 28px 0; text-decoration: none; }
.v2-mini { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; grid-row: span 2; }
.v2-svc-list h3 { font-size: var(--step-2); color: var(--muted); transition: color .3s var(--ease); }
.v2-svc-list p { grid-column: 1; color: var(--muted); font-size: .96rem; max-width: 56ch; margin-top: 8px; }
.v2-svc-list a.on h3, .v2-svc-list a:hover h3, .v2-svc-list a:focus-visible h3 { color: var(--gold); }
.v2-svc-thumb { display: none; }
@media (max-width: 900px) {
  .v2-svc-grid { grid-template-columns: 1fr; }
  .v2-svc-media { display: none; }
  .v2-svc-list h3 { color: var(--ink); }
  .v2-svc-thumb { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; margin-bottom: 18px; border: 1px solid var(--line-soft); }
}
/* 6. Insights: newest large, two stacked (v1, unchanged) */
.v2-ins-grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: 28px; align-items: stretch; }
.v2-ins-grid .v2-feature { grid-row: 1 / span 2; }
.v2-ins-grid .insight-tile { display: block; overflow: hidden; }
.v2-ins-grid .v2-feature img { width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
/* fills the two-tile height, no empty band (Marc, 27 Sept) */
.v2-ins-grid .insight-tile:not(.v2-feature) img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .v2-ins-grid { grid-template-columns: 1fr; }
  .v2-ins-grid .v2-feature { grid-row: auto; }
  .v2-ins-grid .v2-feature img { height: auto; }
  .v2-ins-grid .insight-tile:not(.v2-feature) img { height: auto; }
}
/* Record figures, three treatments on the gold band */
.v2-figures .figure .u { font-family: var(--geo); font-size: .38em; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; vertical-align: .9em; margin-left: .15em; }
.v2-figures .figure .n { font-feature-settings: "lnum" 1; }
/* A: large serif numerals, grotesk units */
.fig-a .v2-figures .figure { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -.01em; }
.fig-a .v2-figures .fig-word { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem); font-style: italic; line-height: 1.7; }
.v2-figures .figure { border: 0; border-radius: 0; background: none; padding: 0; overflow: visible; }
/* Footer: LinkedIn logo + label */
.li-follow { display: inline-flex; align-items: center; gap: 10px; }
.li-follow svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.li-follow:hover svg { fill: var(--gold); }
/* ===== Photo as section background (Pointe's industries band). Existing photos only. ===== */
/* Industries over the industrial-estate aerial */
:root body .v2-industries { position: relative; background: #04101c url('/images/hero-china-plus-one.webp?v=9ef1a52f') center / cover no-repeat; }
:root body .v2-industries::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,16,28,.86), rgba(4,16,28,.93)); }
:root body .v2-industries > .wrap { position: relative; z-index: 1; }
:root body .v2-industries h2 { color: #fff; }
:root body .v2-industries .eyebrow { color: var(--gold); }
:root body .v2-industries .v2-label { color: var(--gold); }
:root body .v2-industries p:not(.v2-label) { color: rgba(255,255,255,.86); }
:root body .v2-ind article { border-top-color: rgba(255,255,255,.16); }
/* Services: the active service's photo fills the whole section */
@media (min-width: 901px) {
  :root body .v2-svc { position: relative; overflow: hidden; min-height: 760px; }
  :root body .v2-svc-media { position: absolute; inset: 0; top: 0; z-index: 0; }
  :root body .v2-svc-frame { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
  :root body .v2-svc-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,16,28,.35) 0%, rgba(4,16,28,.70) 45%, rgba(4,16,28,.92) 62%, rgba(4,16,28,.94) 100%); }
  :root body .v2-svc-list { position: relative; z-index: 1; grid-column: 2; border-top-color: rgba(255,255,255,.16); }
  :root body .v2-svc-list li { border-bottom-color: rgba(255,255,255,.16); }
  :root body .v2-svc-list h3 { color: rgba(255,255,255,.72); }
  :root body .v2-svc-list p { color: rgba(255,255,255,.80); }
  :root body .v2-svc-list a.on h3, :root body .v2-svc-list a:hover h3, :root body .v2-svc-list a:focus-visible h3 { color: var(--gold); }
}
:root body .site-footer:not(.ft2) { display: none; }
:root body .ft2 { display: block; background: var(--bg-deep); padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 120px); border-top: 1px solid var(--line-soft); }
.ft2-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.ft2-contact { font-style: normal; color: var(--ink-2); font-size: .95rem; line-height: 1.75; margin: 22px 0 14px; }
.ft2-contact a { color: var(--ink-2); text-decoration: none; }
.ft2-contact a:hover { color: var(--gold); }
.ft2 .li-follow { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.ft2-right { text-align: right; }
.ft2-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 0; }
.ft2-nav a { color: var(--ink); text-decoration: none; font-size: 1rem; padding: 0 16px; border-left: 1px solid var(--gold); line-height: 1.1; }
.ft2-nav a:first-child { border-left: 0; }
.ft2-nav a:last-child { padding-right: 0; }
.ft2-nav a:hover { color: var(--gold); }
.ft2-legal { margin-top: 16px; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
  .ft2-right { text-align: left; }
  .ft2-nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px 32px; }
  .ft2-nav a { border: 0; padding: 0; }
}
/* ===== Round 4 (Marc 27 Sept): decisions applied ===== */
/* Hero: lede and buttons back under the H1, bottom left */
.hero-split .hero-copy { display: block; max-width: 660px; }
.hero-split .hs-title h1 { max-width: none; }
.hero-split .hs-side { margin-top: 18px; }
/* Record: header stacked, not split */
.v2-record .v2-head { display: block; }
.v2-record .v2-head h2 { margin-top: 4px; }
/* Proposition: Spread only */
:root body .v2-prop { background: #071523; }
:root body .v2-panels a:nth-child(1), :root body .v2-panels a:nth-child(3) { background: #12304d; }
:root body .v2-panels a:nth-child(2) { background: #173a5c; }
:root body .v2-panels a:hover, :root body .v2-panels a:focus-visible { background: #1a4068; }
/* ===== Round 5 ===== */
/* Services, full photo: compact. Names always shown, the active row opens its description. */
@media (min-width: 901px) {
  :root body .v2-svc { min-height: 0; padding-block: clamp(56px, 6vw, 84px); }
  :root body .v2-svc-list a { padding: 16px 0; }
  :root body .v2-svc-list h3 { font-size: var(--step-2); }
  :root body .v2-svc-list p { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease); }
  :root body .v2-svc-list a.on p, :root body .v2-svc-list a:focus-visible p { max-height: 8em; opacity: 1; margin-top: 8px; }
}
/* Proposition labels as headings (option) */
:root body .v2-panels .v2-label { font-family: var(--serif); font-size: var(--step-2); letter-spacing: 0; text-transform: none; color: var(--gold); margin-bottom: 14px; }
:root body .v2-panels p:not(.v2-label) { font-size: var(--step-0); }
/* Industries: Marc's new photo (27 Sept) */
:root body .v2-industries { background-image: url('/images/home/industries-bg.webp?v=cf2b2fcb'); background-position: center 60%; }
:root body .v2-industries::before { background: linear-gradient(180deg, rgba(4,16,28,.70) 0%, rgba(4,16,28,.80) 45%, rgba(4,16,28,.88) 100%); }
:root body .v2-industries::before { background: linear-gradient(180deg, rgba(4,16,28,.55) 0%, rgba(4,16,28,.72) 50%, rgba(4,16,28,.84) 100%); }
/* Figure units: body font, not Space Grotesk (Space Grotesk stays on the 100E mark only) */
.v2-figures .figure .u { font-family: var(--sans); font-weight: 600; }
/* ===== Round 6 ===== */
/* Services, full photo: every description visible again, rows tightened */
@media (min-width: 901px) {
  :root body .v2-svc { padding-block: clamp(48px, 5vw, 72px); }
  :root body .v2-svc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  :root body .v2-svc-list a { padding: 14px 0; }
  :root body .v2-svc-list h3 { font-size: var(--step-1); }
  :root body .v2-svc-list p, :root body .v2-svc-list a.on p { max-height: none; opacity: 1; margin-top: 4px; font-size: .92rem; line-height: 1.5; max-width: 72ch; color: rgba(255,255,255,.80); }
  :root body .v2-svc-frame::after { background: linear-gradient(90deg, rgba(4,16,28,.30) 0%, rgba(4,16,28,.62) 36%, rgba(4,16,28,.90) 50%, rgba(4,16,28,.94) 100%); }
}
/* Record: numbers down, text up, spacing tightened */
.v2-record { padding-block: clamp(48px, 6vw, 80px); }
.v2-record .v2-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.v2-figures { gap: clamp(28px, 3vw, 40px) clamp(28px, 3.4vw, 56px); }
.v2-figures li { padding-top: 18px; }
.fig-a .v2-figures .figure { font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.5rem); }
.fig-a .v2-figures .fig-word { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.6; }
.v2-figures .figure { margin-bottom: 10px; }
.v2-figures .detail { font-size: 1.06rem; line-height: 1.55; max-width: 36ch; }
.v2-figures .figure .u { font-size: .34em; }
/* Hero: slightly taller band (shape 2.8 instead of 3.32); the photo still downsizes, no upscaling */
.photo-band.hero-split { --ph-ar: 3.3167 !important; }
/* 27 Sept: back to the live framing, full photo width (Marc: zoom out) */
/* Services: rules end where the text ends; list pushed to the right */
@media (min-width: 901px) {
  :root body .v2-svc-list { justify-self: end; width: 100%; max-width: 660px; }
  :root body .v2-svc-list p, :root body .v2-svc-list a.on p { max-width: none; }
}
/* Footer clean: less empty space top and bottom */
:root body .ft2 { padding-block: clamp(32px, 3.5vw, 48px) clamp(28px, 3vw, 40px); }
.ft2-contact { margin: 16px 0 10px; }
/* Services full photo: list moves left, the people in the new photos show on the right */
@media (min-width: 901px) {
  :root body .v2-svc-list { grid-column: 1; grid-row: 1; justify-self: start; }
  :root body .v2-svc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  :root body .v2-svc-frame img { object-position: right center; }
  :root body .v2-svc-frame::after { background: linear-gradient(270deg, rgba(4,16,28,.22) 0%, rgba(4,16,28,.55) 34%, rgba(4,16,28,.88) 52%, rgba(4,16,28,.94) 100%); }
}
/* Hero video (preview) */
video.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-pause { position: absolute; right: 16px; bottom: 14px; z-index: 2; font: 500 12px/1 var(--sans); color: rgba(255,255,255,.8); background: rgba(4,16,28,.45); border: 1px solid rgba(255,255,255,.3); padding: 7px 10px; cursor: pointer; }
.hero-pause:hover, .hero-pause:focus-visible { color: #fff; border-color: var(--gold); }
@media (max-width: 760px) {
  .hero-pause { display: none; }
}
/* Services: list back on the right (Marc); photos mirrored so the people sit on the left */
@media (min-width: 901px) {
  :root body .v2-svc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  :root body .v2-svc-list { grid-column: 2; grid-row: 1; justify-self: end; }
  :root body .v2-svc-frame img { object-position: left center; }
  :root body .v2-svc-frame::after { background: linear-gradient(90deg, rgba(4,16,28,.22) 0%, rgba(4,16,28,.55) 34%, rgba(4,16,28,.88) 52%, rgba(4,16,28,.94) 100%); }
}
/* Unflipped crops made for this section; show them whole */
@media (min-width: 901px) {
  :root body .v2-svc-frame img { object-position: left center; }
}
/* Services, final layout (Marc 27 Sept): list on the left, full photos with subjects on the right */
@media (min-width: 901px) {
  :root body .v2-svc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  :root body .v2-svc-list { grid-column: 1; grid-row: 1; justify-self: start; }
  :root body .v2-svc-frame img { object-position: right center; }
  :root body .v2-svc-frame::after { background: linear-gradient(270deg, rgba(4,16,28,.22) 0%, rgba(4,16,28,.55) 34%, rgba(4,16,28,.88) 52%, rgba(4,16,28,.94) 100%); }
}
/* 27 Sept (a10a4d63): hero lighter, as on the live site. Side scrim like live (.72 at the text side,
   fading across), plus a light foot so the buttons keep contrast. Photo untouched. */
.hero-split::after {
  background:
    linear-gradient(90deg, rgba(7,21,35,.72) 0%, rgba(7,21,35,.50) 45%, rgba(7,21,35,.06) 100%),
    linear-gradient(0deg, rgba(7,21,35,.35) 0%, rgba(7,21,35,0) 45%) !important;
}
/* Hero primary button in blue (gold clashed with the gold record band below). Blues already on the page. */
.hero-split .btn { background: #1a4068; color: #fff; border: 1px solid #1a4068; }
.hero-split .btn:hover, .hero-split .btn:focus-visible { background: #22507f; border-color: #22507f; color: #fff; }
/* 27 Sept (a10a4d63): hero copy sits lower, as on the live site (buttons 18px above the band's foot) */
.photo-band.hero-split > .wrap { padding-bottom: 18px !important; }
/* 27 Sept (a10a4d63): hero lede a little wider so "North America." ends the first line; font unchanged */
.hero-split .hs-side .lede { max-width: 51ch; }
/* ---- 27 Sept, buyer run 6 (Marc approved) ---- */
/* Industries: tighter top and bottom (was 120px), closer to the rhythm of the sections around it */
.v2-industries { padding-block: clamp(56px, 6vw, 80px) !important; }
.v2-ind p:not(.v2-label), .v2-svc-list p { color: var(--ink-2); }
.sv-d, .sv-strip-row p, .sp-firm > p, .sp-figs .detail, .sv-fig .detail, .sv-spec p { font-size: max(1rem, 1em); }

/* Page re-cut v1, 27 Sept. Same system as the approved homepage. */
/* Board hero: title over the photo, bottom left, like the homepage */
.bd-hero h1 { font-size: var(--step-4, clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem)); }
/* Intro and portrait: unchanged content, more air */
.bd-intro { padding-block: clamp(48px, 6vw, 88px); }
.bd-intro p { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
/* Three kinds of seats: the homepage proposition panels, not links */
.bd-panels > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(48px, 5.5vw, 88px) clamp(28px, 4vw, 64px); min-height: 300px; color: var(--ink); }
.bd-panels > div:nth-child(1), .bd-panels > div:nth-child(3) { background: #12304d; }
.bd-panels > div:nth-child(2) { background: #173a5c; }
.bd-panels h3.v2-label { font-family: var(--serif); font-size: var(--step-2); line-height: 1.25; color: var(--gold); margin-bottom: 14px; max-width: 18ch; }
.bd-panels p { font-size: var(--step-0); line-height: 1.6; color: var(--ink-2); max-width: 32ch; }
@media (max-width: 760px) {
  .bd-panels > div { min-height: 0; }
}
/* Seats held: rows with hairlines, no boxes (as the homepage services list) */
.bd-held { padding-block: clamp(64px, 8vw, 110px); }
.bd-sub { color: var(--muted); margin-top: 12px; max-width: 60ch; }
.bd-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.bd-rows li { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 64px); padding: 30px 0; border-bottom: 1px solid var(--line-soft); }
.bd-rows h3 { font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; color: var(--ink); }
.bd-rows .bd-role { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
.bd-rows p:not(.bd-role) { color: var(--ink-2); max-width: 68ch; }
@media (max-width: 760px) {
  .bd-rows li { grid-template-columns: 1fr; }
}
/* Credentials: the homepage gold band, navy type, three columns with a hairline over each */
.bd-cred-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); }
.bd-cred-grid li { border-top: 1px solid rgba(7,21,35,.45); padding-top: 22px; }
.bd-cred-grid h3 { font-family: var(--serif); font-size: var(--step-1); color: var(--bg); margin-bottom: 12px; }
.bd-cred-grid p { color: var(--bg); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 900px) {
  .bd-cred-grid { grid-template-columns: 1fr; }
}
/* Closing call to action: centred, blue button so it never sits gold against gold */
.bd-cta { padding-block: clamp(64px, 8vw, 110px); text-align: center; }
.bd-cta h2 { font-size: var(--step-3); }
.bd-cta .btn-row { justify-content: center; margin-top: 28px; }
.bd-cta .btn { background: #1a4068; color: #fff; border: 1px solid #1a4068; }
.bd-cta .btn:hover, .bd-cta .btn:focus-visible { background: #22507f; border-color: #22507f; }
.bd-cta p { color: var(--muted); margin-top: 20px; }
/* Board v1.1 (27 Sept): less empty space at the top */
.bd-intro { padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px); }
.bd-intro .board-portrait { max-height: 300px; width: auto; }
.bd-seats { padding-top: clamp(48px, 5vw, 72px); }
.bd-seats .v2-prop-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.bd-panels > div { min-height: 0; padding-block: clamp(40px, 4.5vw, 64px); }
.bd-held { padding-block: clamp(56px, 6vw, 88px); }
:root body .bd-rows { display: none; }
/* Expandable: Pointe's capabilities list, name and role only, text opens on click */
.bd-acc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.bd-acc li { border-bottom: 1px solid var(--line-soft); }
.bd-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 22px 0; }
.bd-acc summary::-webkit-details-marker { display: none; }
.bd-acc .bd-k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 40px; align-items: baseline; border-left: 2px solid var(--gold); padding-left: 20px; }
.bd-acc .bd-name { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); }
.bd-acc .bd-role { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.bd-acc .bd-plus { width: 16px; height: 16px; position: relative; }
.bd-acc .bd-plus::before, .bd-acc .bd-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--gold); transition: transform .3s var(--ease); }
.bd-acc .bd-plus::after { transform: rotate(90deg); }
.bd-acc details[open] .bd-plus::after { transform: rotate(0); }
.bd-acc summary:hover .bd-name, .bd-acc details[open] .bd-name { color: var(--gold); }
.bd-acc details p { color: var(--ink-2); max-width: 72ch; padding: 0 0 26px 22px; }
@media (max-width: 760px) {
  .bd-acc .bd-k { grid-template-columns: 1fr; }
}
/* Board v1.2 (27 Sept): banner overlay as on the live site (.15, even across), not the homepage scrim.
   A soft shadow keeps the title readable over the photo. Expandable list chosen for Seats held. */
.bd-hero::after {
  background: linear-gradient(90deg, rgba(7,21,35,.15) 0%, rgba(7,21,35,.12) 100%, rgba(7,21,35,.06) 100%) !important;
}
.bd-hero h1 { text-shadow: 0 2px 18px rgba(4,16,28,.85), 0 1px 3px rgba(4,16,28,.9); }
/* ===== About v1 (27 Sept) ===== */
/* Banner: live photo and live overlay (.24 even), title over it bottom left with a soft shadow */
.ab-hero::after { background: linear-gradient(90deg, rgba(7,21,35,.24) 0%, rgba(7,21,35,.19) 100%, rgba(7,21,35,.06) 100%) !important; }
.ab-hero h1 { font-size: var(--step-4, clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem)); }
.ab-hero h1, .ab-hero .ab-eyebrow { text-shadow: 0 2px 18px rgba(4,16,28,.85), 0 1px 3px rgba(4,16,28,.9); }
.ab-hero .ab-eyebrow { color: var(--gold); margin-bottom: 8px; }
.ab-hero .ab-eyebrow::before { display: none; }
/* Story and portrait: tighter top, pull quote larger */
.ab-story { padding-block: clamp(36px, 4vw, 56px) clamp(48px, 5vw, 72px); }
.ab-story .about-grid p { font-size: 1.06rem; line-height: 1.7; }
.ab-story .pullquote p { font-family: var(--serif); font-size: var(--step-2); color: var(--gold); line-height: 1.3; }
/* Public voice: two entries under hairlines on the stepped navy, no boxes */
.ab-voice { background: #12304d; padding-block: clamp(56px, 6vw, 88px); }
.ab-voice .bd-sub { color: var(--ink-2); }
.ab-voice-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 5vw, 80px); }
.ab-voice-grid li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 26px; }
.ab-voice-grid h3 { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); }
.ab-voice-grid .bd-role { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 8px 0 12px; }
.ab-voice-grid p:not(.bd-role) { color: var(--ink-2); }
@media (max-width: 760px) {
  .ab-voice-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* BBC: Pointe's half-and-half band, still full-bleed on the left, text on the right */
.ab-bbc { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-deep); padding: 0; }
.ab-bbc .ab-bbc-img { position: relative; display: block; min-height: 100%; margin: 0; }
.ab-bbc .ab-bbc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-bbc .ab-bbc-text { padding: clamp(48px, 5.5vw, 88px) clamp(28px, 5vw, 96px); max-width: 720px; }
.ab-bbc .ab-bbc-text .lede { font-size: 1.06rem; }
@media (max-width: 900px) {
  .ab-bbc { grid-template-columns: 1fr; }
}
/* About v1 fixes: live band shape; eyebrow clear of the rule; BBC still shown whole, not cropped */
.photo-band.hero-split.ab-hero { --ph-ar: 3.8388 !important; }
.ab-hero .rule { margin-bottom: 14px; }
.ab-hero .ab-eyebrow { display: block; margin-bottom: 6px; }
.ab-bbc { align-items: center; }
.ab-bbc .ab-bbc-img { min-height: 0; }
.ab-bbc .ab-bbc-img img { height: auto; aspect-ratio: 900 / 589; object-fit: contain; }
.ab-hero .ab-eyebrow { color: #fff; font-weight: 600; }
/* ===== Insights index v1 (27 Sept) ===== */
.in-hero .in-dek { color: #fff; margin-top: 10px; max-width: 60ch; text-shadow: 0 1px 10px rgba(4,16,28,.85); }
.in-list { padding-block: clamp(40px, 4.5vw, 64px) clamp(56px, 6vw, 88px); }
.in-feat { margin-top: 0; }
/* Earlier notes: text rows, date and topic in gold, serif title, arrow on hover */
.in-more-head { margin: clamp(48px, 5vw, 72px) 0 18px; }
.in-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.in-rows li { border-bottom: 1px solid var(--line-soft); }
.in-rows a { display: grid; grid-template-columns: 150px 210px minmax(0, 1fr) 32px; gap: 8px 28px; align-items: baseline; padding: 22px 0; text-decoration: none; color: var(--ink); }
.in-rows .in-date, .in-rows .in-topic { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.in-rows .in-date { color: var(--muted); }
.in-rows .in-topic { color: var(--gold); }
.in-rows .in-title { font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; font-weight: 400; color: var(--ink); transition: color .25s var(--ease); }
.in-rows .in-arrow { color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.in-rows a:hover .in-title, .in-rows a:focus-visible .in-title { color: var(--gold); }
.in-rows a:hover .in-arrow, .in-rows a:focus-visible .in-arrow { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .in-rows a { grid-template-columns: auto 1fr; }
  .in-rows .in-title { grid-column: 1 / -1; }
  .in-rows .in-arrow { display: none; }
}
.bd-cta .in-cta-lede { color: var(--ink-2); margin: 14px auto 0; max-width: 60ch; }
@media (min-width: 901px) {
  .in-feat .v2-feature { height: 100%; }
  .in-feat .v2-feature img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: left center; }
}
/* Insights v1.1: three ways to show the earlier notes (switch bottom right) */
.in-thumb { display: none; }
.in-more-btn { display: none; }
:root body .in-rows, :root body .in-more-head { display: none; }
:root body .in-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(16px, 2vw, 28px); }
:root body .in-grid .insight-tile img { width: 100%; height: auto; display: block; }
.js body .in-grid .in-later { display: none; }
.js body.in-all .in-grid .in-later, .js body .in-grid.in-all .in-later { display: block; }
.js body .in-more-btn { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 900px) {
  :root body .in-grid { grid-template-columns: 1fr; }
}
.in-more-btn .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.72); color: #fff; padding: 14px 28px; font: 600 .95rem/1 var(--sans); cursor: pointer; }
.in-more-btn .btn-ghost:hover, .in-more-btn .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
/* ===== Article template v1 (27 Sept) ===== */
/* Banner: the article's own photo, clean. Foot wash so the title reads on any photo */
.art-hero::after { background: linear-gradient(0deg, rgba(4,16,28,.82) 0%, rgba(4,16,28,.45) 38%, rgba(4,16,28,.08) 70%, rgba(4,16,28,0) 100%) !important; }
.art-hero .art-copy { max-width: 960px; }
.art-hero .article-meta { color: rgba(255,255,255,.86); margin-bottom: 12px; padding-top: 0; }
.art-hero h1 { font-size: var(--step-3); line-height: 1.15; color: #fff; text-shadow: 0 2px 18px rgba(4,16,28,.7); }
.art-section { padding-top: clamp(28px, 3vw, 44px) !important; }
/* One type rule: subheadings clearly larger than the body text, same serif as every heading */
.article-body h2 { font-family: var(--serif); font-size: var(--step-2); line-height: 1.25; color: var(--ink); margin: 1.8em 0 .55em; font-weight: 400; }
.article-body h3 { font-family: var(--serif); font-size: calc(var(--step-1) * 1.12); line-height: 1.3; color: var(--ink); margin: 1.6em 0 .5em; font-weight: 400; }
.article-body blockquote.pullquote p { font-family: var(--serif); color: var(--gold); }
.art-section .btn-row .btn { background: #1a4068; color: #fff; border: 1px solid #1a4068; }
.art-section .btn-row .btn:hover, .art-section .btn-row .btn:focus-visible { background: #22507f; border-color: #22507f; }
@media (max-width: 760px) {
  .art-hero h1 { font-size: var(--step-2); }
}
.art-section .back-link { margin-bottom: 26px; }
/* Article banner v1.1: taller band (2.4) from the same frame as the article's tile, so it reads as the same picture */
.photo-band.hero-split.art-hero { --ph-ar: 2.4 !important; }
/* Article v1.2 (27 Sept): more room under subheadings; the closing note (the LinkedIn first comment) on a full-bleed gold band */
.article-body h2 { margin: 1.9em 0 .8em; }
.article-body h3 { margin: 1.7em 0 .7em; }
.art-section .article-foot {
  background: var(--gold); color: var(--bg); border-top: 0;
  margin: clamp(48px, 5vw, 72px) calc(50% - 50vw) 0; padding: clamp(44px, 5vw, 72px) calc(50vw - 50%);
}
.art-section .article-foot > * { max-width: var(--measure); }
.art-section .article-foot p { color: var(--bg); font-size: 1.08rem; line-height: 1.7; }
.art-section .article-foot p.small { font-size: .92rem; color: rgba(7,21,35,.82); }
.art-section .article-foot h2 { font-family: var(--serif); font-size: var(--step-2); line-height: 1.25; color: var(--bg); font-weight: 400; margin: 0 0 .8em; }
.art-section .article-foot a { color: var(--bg); text-decoration-color: rgba(7,21,35,.5); font-weight: 500; }
.art-section .article-foot a:hover { text-decoration-color: var(--bg); }
.art-section > .wrap > .btn-row { margin-top: clamp(40px, 4.5vw, 64px); }
body:has(.art-section) main { overflow-x: clip; }
/* full-bleed gold without moving the text column: paint the band out to both edges */
.art-section .article-foot { margin: clamp(48px, 5vw, 72px) 0 0; padding: clamp(44px, 5vw, 72px) 0; background: none;
  border-image: linear-gradient(var(--gold) 0 0) fill 0 / 0 / 0 100vw; }
html:has(.art-section), html:has(.art-section) body { overflow-x: clip; }
.art-section .article-foot p { font-size: var(--step-1); line-height: 1.7; }
.art-section .article-foot p + p { margin-top: 1em; }
/* Article v1.3: banner lower (2.9, about 497px at 1440); gold note starts closer to the text so it is not missed */
.photo-band.hero-split.art-hero { --ph-ar: 2.9 !important; }
.art-section .article-foot { margin-top: clamp(32px, 3.5vw, 48px); padding-block: clamp(28px, 3vw, 40px) clamp(36px, 4vw, 56px); }
.art-section .article-foot > :first-child { margin-top: 0 !important; }
.art-section .article-body > :last-child { margin-bottom: 0; }
/* Article banners locked at 3.8388, 376px at 1440, the same height as the Insights list and About (Claude's call, Marc 27 Sept) */
.photo-band.hero-split.art-hero { --ph-ar: 3.8388 !important; }
/* ===== Privacy, Terms (legal pages) v1 and 404 (27 Sept) ===== */
/* Title on a slim stepped-navy band, text in the same reading column and type as the articles */
.lg-page .hero-sub { background: #12304d; padding-block: clamp(40px, 4.5vw, 64px) clamp(32px, 3.5vw, 48px); }
.lg-page .hero-sub h1 { font-size: var(--step-3); }
.lg-page .hero-sub p { color: var(--ink-2); margin-top: 10px; }
.lg-page .prose { max-width: var(--measure); padding-block: clamp(36px, 4vw, 56px) clamp(56px, 6vw, 88px); }
.lg-page .prose p, .lg-page .prose li { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }
.lg-page .prose h2 { font-family: var(--serif); font-size: var(--step-2); line-height: 1.25; font-weight: 400; color: var(--ink); margin: 1.9em 0 .8em; }
.lg-page .prose a { color: var(--gold-warm); }
/* 404: same heading size as the page titles, blue main button */
.nf-page h1 { font-size: var(--step-3); }
.nf-page .btn { background: #1a4068; color: #fff; border: 1px solid #1a4068; }
.nf-page .btn:hover, .nf-page .btn:focus-visible { background: #22507f; border-color: #22507f; }
/* legal pages: text column lines up with the title, less gap under the band */
.lg-page > section:not(.hero-sub) { padding-block: 0; }
.lg-page .wrap.prose { max-width: var(--wrap); }
.lg-page .wrap.prose > * { max-width: var(--measure); }
.lg-page .wrap.prose > :first-child { margin-top: 0; }
/* v1.1: compressed. Wider text column (less empty right side), slimmer title band, tighter headings */
.lg-page .hero-sub { padding-block: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 32px); }
.lg-page .wrap.prose > * { max-width: 860px; }
.lg-page .prose { padding-block: clamp(28px, 3vw, 40px) clamp(40px, 4.5vw, 64px); }
.lg-page .prose h2 { margin: 1.4em 0 .55em; }
.lg-page .prose p + p { margin-top: .9em; }
.lg-page .prose ul { margin-block: .6em; }
.nf-page .hero > .wrap, .nf-page .hero { min-height: 0; }
.nf-page .hero { padding-block: clamp(40px, 4.5vw, 64px); }
/* v1.2: legal text runs the full page width on desktop, edge to edge with the header and footer */
.lg-page .wrap.prose > * { max-width: none; }
/* ===================================================================
   Services index re-cut v1, 27 Sept.
   Copy verbatim from the live services page and the six service pages. No new hues.
   Mandates locked as photo panels (Marc, 27 Sept).
   =================================================================== */
.sv-hero h1 { font-size: var(--step-4, clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem)); }
.sv-hero .hero-copy > p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 46ch; }
.sv-mandates { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.sv-list { list-style: none; margin: 0; padding: 0; }
.sv-n { font: 500 .78rem/1 var(--sans); letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sv-h { font-family: var(--serif); font-size: var(--step-2); line-height: 1.22; }
.sv-h a { color: var(--ink); text-decoration: none; }
.sv-h a::after { content: " \2192"; color: var(--gold); font-family: var(--sans); font-size: .7em; opacity: .0; transition: opacity .25s var(--ease), margin .25s var(--ease); margin-left: 0; }
.sv-h a:hover::after, .sv-h a:focus-visible::after { opacity: 1; margin-left: 6px; }
.sv-d { color: var(--ink-2); line-height: 1.6; margin-top: 12px; max-width: 58ch; }
.sv-fig { display: flex; align-items: baseline; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sv-fig .figure { position: static; border: 0; border-radius: 0; overflow: visible; flex: none; font-family: var(--serif); font-size: var(--step-3); line-height: 1; color: var(--gold); white-space: nowrap; }
.sv-fig .detail { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.sv-dec { margin-top: 20px; }
.sv-dec-h { font: 500 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.sv-dec ul { list-style: none; margin: 0; padding: 0; }
.sv-dec li { position: relative; padding: 5px 0 5px 34px; color: var(--ink); font-weight: 500; font-size: .95rem; line-height: 1.45; }
.sv-dec li::before { content: ""; position: absolute; left: 0; top: 1em; width: 22px; height: 1px; background: var(--gold); opacity: .7; }
/* ---------- Photo panels (chosen): six tall photo cards, detail opens on hover. no numbers, dots or icons ---------- */
.sv-strip-row .sv-ico { position: static; width: 36px; height: 36px; margin-bottom: 14px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.sv-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sv-item { border: 0; cursor: pointer; }
.sv-body { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); isolation: isolate; }
.sv-ph, .sv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-ph img { transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.sv-body::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(4,16,28,.94) 0%, rgba(4,16,28,.72) 38%, rgba(4,16,28,.10) 70%); transition: background .5s var(--ease); }
.sv-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 30px); max-height: calc(100% - 40px); overflow: hidden; }
.sv-copy .sv-h { font-size: var(--step-2); }
.sv-fig { margin-top: 14px; padding-top: 14px; }
.sv-fig .figure { font-size: var(--step-2); }
.sv-fig .detail { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-d, .sv-dec { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .6s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.sv-dec li { font-size: .88rem; }
.sv-item:hover .sv-fig, .sv-item:focus-within .sv-fig { display: none; }
.sv-item:hover .sv-ph img, .sv-item:focus-within .sv-ph img { transform: scale(1.05); filter: saturate(.8); }
.sv-item:hover .sv-body::after, .sv-item:focus-within .sv-body::after { background: linear-gradient(to top, rgba(4,16,28,.97) 0%, rgba(4,16,28,.88) 60%, rgba(4,16,28,.55) 100%); }
.sv-item:hover .sv-d, .sv-item:focus-within .sv-d { max-height: 10em; opacity: 1; margin-top: 10px; }
.sv-item:hover .sv-dec, .sv-item:focus-within .sv-dec { max-height: 16em; opacity: 1; margin-top: 16px; }
.sv-item:hover .sv-h a::after { opacity: 1; margin-left: 6px; }
@media (max-width: 1100px) {
  .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: none), (max-width: 700px) {
  .sv-list { grid-template-columns: 1fr; }
  .sv-body { aspect-ratio: auto; }
  .sv-ph { position: relative; aspect-ratio: 16 / 10; display: block; }
  .sv-body::after { display: none; }
  .sv-copy { position: static; padding: 20px 0 8px; max-height: none; }
  .sv-d, .sv-dec { max-height: none; opacity: 1; margin-top: 12px; }
  .sv-fig .detail { -webkit-line-clamp: unset; display: block; }
}
/* ---------- The three anchor cards as an outcome strip ---------- */
.sv-strip { padding-block: 0 clamp(56px, 7vw, 100px); }
.sv-strip-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); }
.sv-strip-row li + li { border-left: 1px solid var(--line-soft); }
.sv-strip-row a { display: block; height: 100%; padding: 26px clamp(20px, 2.4vw, 34px) 28px; color: inherit; text-decoration: none; transition: background .3s var(--ease); }
.sv-strip-row a:hover, .sv-strip-row a:focus-visible { background: var(--surface); }
.sv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-bottom: 16px; }
.sv-strip-row h3 { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); margin-bottom: 8px; transition: color .25s; }
.sv-strip-row a:hover h3 { color: var(--gold); }
.sv-strip-row p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
@media (max-width: 760px) {
  .sv-strip-row { grid-template-columns: 1fr; }
  .sv-strip-row li + li { border-left: 0; border-top: 1px solid var(--line-soft); }
}
/* ---------- One relationship: hub linked to the six specialists ---------- */
.sv-net { background: #12304d; padding-block: clamp(64px, 8vw, 110px); }
.sv-net-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(32px, 5vw, 88px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sv-net-head p { color: var(--ink-2); line-height: 1.65; max-width: 64ch; }
.sv-net-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.sv-hub svg { width: 100%; max-width: 480px; display: block; margin-inline: auto; overflow: visible; }
.sv-spokes line { stroke: rgba(201,164,76,.30); transition: stroke .3s, stroke-width .3s; }
.js .sv-spokes line { stroke-dasharray: 160; stroke-dashoffset: 160; }
.sv-hub.in .sv-spokes line { animation: svDraw 1.2s var(--ease) forwards; }
.sv-hub.in .sv-spokes line:nth-child(2) { animation-delay: .1s; }
.sv-hub.in .sv-spokes line:nth-child(3) { animation-delay: .2s; }
.sv-hub.in .sv-spokes line:nth-child(4) { animation-delay: .3s; }
.sv-hub.in .sv-spokes line:nth-child(5) { animation-delay: .4s; }
.sv-hub.in .sv-spokes line:nth-child(6) { animation-delay: .5s; }
@keyframes svDraw { to { stroke-dashoffset: 0; } }
.sv-nodes g { cursor: default; outline: none; }
/* hover highlight kept; no hand cursor, it is not a link (buyer run 6) */
.sv-nodes circle { fill: #0d2135; stroke: #c9a44c; stroke-width: 1.3; transition: fill .25s, r .25s; }
.sv-nodes text { fill: #8b9daf; transition: fill .25s; }
.sv-nodes g.on circle { fill: #c9a44c; }
.sv-nodes g.on text { fill: #eef3f8; }
.sv-nodes g:focus-visible circle { stroke: var(--focus); stroke-width: 2; }
.sv-spokes line.on { stroke: rgba(201,164,76,.95); stroke-width: 1.8; }
.sv-halo { transform-origin: 210px 210px; animation: svPulse 4s ease-in-out infinite; }
@keyframes svPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.sv-spec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-spec li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; background: rgba(7,21,35,.42); border-left: 2px solid transparent; padding: 18px 20px; cursor: default; transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease); }
.sv-spec li.on { background: var(--bg); border-left-color: var(--gold); transform: translateX(4px); }
.sv-spec li > img { grid-row: span 2; }
.sv-spec li.on h3 { color: var(--gold); }
.sv-spec img { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--gold); object-fit: cover; display: block; }
.sv-spec h3 { font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; color: var(--ink); margin-bottom: 6px; transition: color .25s; }
.sv-spec p { color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
@media (max-width: 1000px) {
  .sv-net-grid, .sv-net-head { grid-template-columns: 1fr; }
  .sv-hub svg { max-width: 380px; }
}
@media (max-width: 620px) {
  .sv-spec { grid-template-columns: 1fr; }
  .sv-spec li { padding: 16px 14px; }
}
/* ---------- Engagements: three steps on a line that fills as you scroll (Pointe Analyze / Implement / Sustain) ---------- */
.sv-steps-sec { padding-block: clamp(64px, 8vw, 110px); --p: 0; }
.sv-steps-sec h2 { font-size: var(--step-3); margin-top: 10px; }
.sv-steps { list-style: none; margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); position: relative; }
.sv-steps::before, .sv-steps::after { content: ""; position: absolute; left: 0; top: 21px; height: 1px; background: var(--line-hard); right: 0; }
.sv-steps::after { background: var(--gold); right: auto; width: calc(var(--p) * 100%); transition: width .15s linear; }
.sv-steps li { position: relative; padding-top: 64px; }
.sv-sn { position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-hard); font: 500 .8rem/1 var(--sans); letter-spacing: .08em; color: var(--muted); z-index: 1; transition: border-color .4s, color .4s, background .4s; }
.sv-steps li.lit .sv-sn { border-color: var(--gold); color: var(--bg); background: var(--gold); }
.sv-steps p { color: var(--ink-2); line-height: 1.65; font-size: var(--step-0); max-width: 40ch; }
.sv-steps li:first-child p { font-family: var(--serif); font-size: var(--step-2); line-height: 1.35; color: var(--ink); }
@media (max-width: 800px) {
  .sv-steps { grid-template-columns: 1fr; gap: 34px; }
  .sv-steps::before, .sv-steps::after { top: 0; bottom: 0; left: 21px; width: 1px; height: auto; right: auto; }
  .sv-steps::after { height: calc(var(--p) * 100%); bottom: auto; width: 1px; }
  .sv-steps li { padding: 6px 0 0 66px; }
}
/* ---------- Fee statement on the gold band ---------- */
.sv-fee { text-align: center; }
.sv-fee { padding-block: clamp(48px, 6vw, 84px); }
.sv-fee-t { font-family: var(--serif); font-size: var(--step-2); line-height: 1.45; color: var(--bg); max-width: 46ch; margin-inline: auto; }
/* ---------- Where the line sits ---------- */
.sv-line { background: #12304d; padding-block: clamp(56px, 7vw, 96px); }
.sv-line-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.sv-line h2 { font-size: var(--step-3); margin-top: 10px; }
.sv-line .prose p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.65; }
@media (max-width: 860px) {
  .sv-line-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-spokes line, .sv-halo, .sv-spec li { animation: none !important; transition: none !important; stroke-dashoffset: 0 !important; transform: none !important; }
}
/* ===================================================================
   Service pages re-cut v1, 27 Sept. Live copy, live hero photos.
   Order kept: situation, work, evidence, credentials, process, specialists, related, contact.
   =================================================================== */
.sp-hero h1 { font-size: var(--step-4, clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem)); max-width: 20ch; }
.sp-hero .lede { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 52ch; }
.sp-hero .btn-row { margin-top: 22px; }
.sp-head h2, .sp-ev h2, .sp-net h2, .sp-run h2 { font-size: var(--step-3); margin-top: 10px; }
/* The firm card is a narrow aside: at h2 size its heading left one word alone on the last line
   (de "Wer die Arbeit / verantwortet", 2026-09-27 visual audit). At step-2 it fits on one line
   at 1440 and 390 in all six languages and balances cleanly where it must wrap. */
html[lang="de"] .sp-firm h2 { font-size: var(--step-2); margin-top: 10px; } /* de only: keeps "Wer die Arbeit verantwortet" on one line; other languages keep the approved size */
.sp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 96px); align-items: start; }
.sp-prose p { color: var(--ink-2); font-size: 1.06rem; line-height: 1.72; max-width: 66ch; }
.sp-prose p + p { margin-top: 1.1em; }
.sp-prose p:first-child { font-family: var(--serif); font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.sp-sit { padding-block: clamp(64px, 8vw, 116px); }
.sp-sit .sp-head { position: sticky; top: 110px; }
.sp-work { background: #12304d; padding-block: clamp(56px, 7vw, 100px); }
.sp-dec { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.sp-dec li { position: relative; padding: 22px 0 22px 40px; border-top: 1px solid rgba(255,255,255,.12); color: var(--ink); font-size: 1.05rem; line-height: 1.5; font-weight: 500; transition: color .25s var(--ease); }
.sp-dec li::before { content: ""; position: absolute; left: 0; top: 34px; width: 24px; height: 1px; background: var(--gold); transition: width .35s var(--ease); }
.sp-dec li:hover { color: var(--gold-warm); }
.sp-dec li:hover::before { width: 32px; }
.sp-ev { padding-block: clamp(64px, 8vw, 116px); background: radial-gradient(120% 90% at 85% 10%, #173a5c 0%, var(--bg) 60%); }
.sp-ev-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 96px); align-items: start; }
.sp-ev .sp-prose { margin-top: 22px; }
.sp-firm { background: rgba(4,16,28,.55); border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 40px); position: sticky; top: 110px; }
.sp-firm > p { color: var(--ink-2); line-height: 1.65; margin-top: 16px; font-size: .98rem; }
.sp-figs { list-style: none; margin: 22px 0 0; padding: 0; }
.sp-figs li { padding: 18px 0; border-top: 1px solid var(--line); }
.sp-figs .figure { position: static; border: 0; border-radius: 0; overflow: visible; display: block; font-family: var(--serif); font-size: var(--step-3); line-height: 1.05; color: var(--gold); }
.sp-figs .detail { display: block; color: var(--ink-2); font-size: .92rem; line-height: 1.5; margin-top: 8px; }
/* 27 Sept ~23:20 (Marc): the case's own figure cards sit under the case; the founder block keeps only the credential cards */
.sp-case-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: clamp(24px, 3vw, 44px); max-width: 66ch; margin-top: 30px; }
.sp-ev .sp-prose-more { margin-top: 26px; }
.sp-run { border-top: 1px solid var(--line-soft); }
.sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-steps li:first-child p { font-family: var(--serif); font-size: var(--step-2); line-height: 1.35; color: var(--ink); }
.sp-steps li:nth-child(2) p { max-width: 52ch; }
.sp-steps-note { margin-top: 28px; color: var(--muted); font-size: .95rem; }
.sp-net { padding-block: clamp(48px, 6vw, 84px); }
.sp-net p { color: var(--bg); font-size: var(--step-1); line-height: 1.6; max-width: 60ch; }
.sp-rel { padding-block: clamp(64px, 8vw, 110px) clamp(40px, 5vw, 64px); }
.sp-rel-list { margin-top: clamp(28px, 3.5vw, 44px); }
.sp-rel-list.sp-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-rel .sv-body { aspect-ratio: 4 / 3; }
.sp-rel-list.sp-n2 .sv-body { aspect-ratio: 16 / 9; }
.sp-rel .sv-d { max-height: none; opacity: 1; margin-top: 8px; }
.sp-rel .sv-h { font-size: var(--step-1); }
@media (max-width: 900px) {
  .sp-split, .sp-ev-grid { grid-template-columns: minmax(0, 1fr); } /* 1fr let min-content push de china-plus-one 8px past a 360px screen */
  .sp-sit .sp-head, .sp-firm { position: static; }
  .sp-rel-list.sp-n2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sp-steps { grid-template-columns: 1fr; }
  .sp-prose p:first-child { font-size: var(--step-1); }
}
.sp-ev .sp-prose p:first-child { font-family: var(--sans); font-size: 1.06rem; line-height: 1.72; color: var(--ink-2); }
/* ---- 27 Sept, round 3 (Marc): gold strip boxes, step line ends on the last step, gold closing button ---- */
.sv-strip-row { border: 0; gap: 14px; }
.sv-strip-row li + li { border-left: 0; }
.sv-strip-row a { background: var(--gold); color: var(--bg); padding: 30px clamp(22px, 2.4vw, 36px) 32px; transition: background .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.sv-strip-row a:hover, .sv-strip-row a:focus-visible { background: var(--gold-warm); transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
.sv-strip-row .sv-ico path, .sv-strip-row .sv-ico circle, .sv-strip-row .sv-ico rect, .sv-strip-row .sv-ico line, .sv-strip-row .sv-ico polyline, .sv-strip-row .sv-ico ellipse { stroke: var(--bg); stroke-width: 1.5; }
.sv-strip-row .sv-ico .fill { fill: var(--bg); stroke: none; }
.sv-strip-row h3, .sv-strip-row a:hover h3 { color: var(--bg); font-size: var(--step-2); font-style: italic; }
.sv-strip-row p { color: rgba(7,21,35,.82); font-size: 1rem; }
@media (max-width: 760px) {
  .sv-strip-row li + li { border-top: 0; }
}
/* Step line: runs from the first step to the last and stops there (svc.js sets --t0 and --tl in px) */
.sv-steps::before, .sv-steps::after { left: var(--t0, 21px); right: auto; width: var(--tl, 0px); }
.sv-steps::after { width: calc(var(--p) * var(--tl, 0px)); }
@media (max-width: 800px) {
  .sv-steps::before, .sv-steps::after { left: 21px; top: var(--t0, 21px); width: 1px; height: var(--tl, 0px); bottom: auto; }
  .sv-steps::after { height: calc(var(--p) * var(--tl, 0px)); width: 1px; }
}
.sp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-steps li:nth-child(2) p { max-width: 40ch; }
@media (max-width: 800px) {
  .sp-steps { grid-template-columns: 1fr; }
}
/* Closing button: gold, the site's primary button (7.8:1 against the navy; the blue measured 1.7:1) */
.bd-cta .btn { background: var(--gold); color: #061320; border-color: var(--gold); }
.bd-cta .btn:hover, .bd-cta .btn:focus-visible { background: var(--gold-warm); border-color: var(--gold-warm); }
/* Phone: related-service cards show photo then title and text (buyer run 6 bug, 27 Sept) */
@media (hover: none), (max-width: 700px) {
  .sp-rel .sv-body, .sp-rel-list.sp-n2 .sv-body { aspect-ratio: auto; }
}
/* Board: print: every seat open, so a nominating committee's printout shows the whole record (buyer run 6) */
@media print {
  .bd-acc details > p { display: block !important; }
  .bd-plus { display: none; }
}
/* Marc, 27 Sept: article titles and the closing line on one line on desktop (they wrapped at 660px / 60ch). Phones wrap naturally. */
@media (min-width: 901px) {
  .art-hero .hero-copy, .art-hero .art-copy { max-width: none !important; }
  .art-hero h1 { max-width: none; font-size: clamp(1.9rem, 2.4vw, 2.55rem); }
  /* longest title (67 chars) fits one line at 1440 */
  .bd-cta .in-cta-lede { max-width: none; }
}
/* Set title breaks on desktop only */
@media (max-width: 900px) {
  .t-br { display: none; }
}
/* Marc, 27 Sept: credentials band on /board, eyebrow and heading sit higher (less space above) */
.v2-record.bd-cred { padding-top: clamp(28px, 3vw, 40px) !important; }
.v2-record.bd-cred .eyebrow { padding-top: 0 !important; }

/* Insights "Show more" (layout go-live): site.js adds "in-all" to <body> on click. The button then goes.
   Without JS (no "js" class on <html>) every tile shows and the button stays hidden. */
body.in-all .in-more-btn, .js body.in-all .in-more-btn, .js body .in-grid.in-all ~ .in-more-btn { display: none; }

/* Thai tier for the layout go-live components (appended after the preview CSS on purpose).
   The Thai rules further up (html[lang="th"] body, headings, .figure, .eyebrow, .btn) lose to the
   preview's more specific class selectors, so these re-assert them for every appended selector that sets
   a Latin face, tracking or tight leading. Each selector is the preview selector with html[lang="th"]
   in front: one step more specific than the rule it answers, and last in the file, so Thai wins over
   IBM Plex Sans and Playfair on these components while the preview's own specificity order holds.
   Order: leading, display face, text face, tracking. Generated by the layout go-live resolver
   (27 Sept 2026) from the appended rules; regenerate it if those rules change. */
html[lang="th"] .v2-figures .detail,
html[lang="th"] .v2-panels p:not(.v2-label),
html[lang="th"] .ft2-contact,
html[lang="th"] body .v2-svc-list p,
html[lang="th"] body .v2-svc-list a.on p,
html[lang="th"] .bd-intro p,
html[lang="th"] .bd-panels p,
html[lang="th"] .bd-cred-grid p,
html[lang="th"] .ab-story .about-grid p,
html[lang="th"] .art-section .article-foot p,
html[lang="th"] .lg-page .prose p,
html[lang="th"] .lg-page .prose li,
html[lang="th"] .sv-hero .hero-copy > p,
html[lang="th"] .sv-d,
html[lang="th"] .sv-fig .detail,
html[lang="th"] .sv-dec li,
html[lang="th"] .sv-strip-row p,
html[lang="th"] .sv-net-head p,
html[lang="th"] .sv-spec p,
html[lang="th"] .sv-steps p,
html[lang="th"] .sv-line .prose p,
html[lang="th"] .sp-hero .lede,
html[lang="th"] .sp-prose p,
html[lang="th"] .sp-dec li,
html[lang="th"] .sp-firm > p,
html[lang="th"] .sp-figs .detail,
html[lang="th"] .sp-net p,
html[lang="th"] .sp-ev .sp-prose p:first-child { line-height: 1.85; }
html[lang="th"] body .v2-panels .v2-label,
html[lang="th"] .bd-panels h3.v2-label,
html[lang="th"] .bd-rows h3,
html[lang="th"] .bd-cred-grid h3,
html[lang="th"] .bd-acc .bd-name,
html[lang="th"] .ab-story .pullquote p,
html[lang="th"] .ab-voice-grid h3,
html[lang="th"] .in-rows .in-title,
html[lang="th"] .article-body h2,
html[lang="th"] .article-body h3,
html[lang="th"] .article-body blockquote.pullquote p,
html[lang="th"] .art-section .article-foot h2,
html[lang="th"] .lg-page .prose h2,
html[lang="th"] .sv-h,
html[lang="th"] .sv-strip-row h3,
html[lang="th"] .sv-spec h3,
html[lang="th"] .sv-steps li:first-child p,
html[lang="th"] .sv-fee-t,
html[lang="th"] .sp-prose p:first-child,
html[lang="th"] .sp-steps li:first-child p { font-family: var(--thai-display); line-height: 1.5; letter-spacing: 0; }
html[lang="th"] .v2-figures .figure .u,
html[lang="th"] .hero-pause,
html[lang="th"] .in-more-btn .btn-ghost,
html[lang="th"] .sv-n,
html[lang="th"] .sv-dec-h,
html[lang="th"] .sv-sn,
html[lang="th"] .sp-ev .sp-prose p:first-child { font-family: var(--thai); }
html[lang="th"] .v2-label,
html[lang="th"] .v2-figures .figure .u,
html[lang="th"] .fig-a .v2-figures .figure,
html[lang="th"] .ft2-legal,
html[lang="th"] .bd-rows .bd-role,
html[lang="th"] .bd-acc .bd-role,
html[lang="th"] .ab-voice-grid .bd-role,
html[lang="th"] .in-rows .in-date,
html[lang="th"] .in-rows .in-topic,
html[lang="th"] .sv-n,
html[lang="th"] .sv-dec-h,
html[lang="th"] .sv-sn { letter-spacing: 0; text-transform: none; }

/* ===== Layout go-live audit fixes (27 Sept) ===== */
/* German footer: "Nutzungsbedingungen" makes three columns wider than a phone; two columns there */
@media (max-width: 760px) { html[lang="de"] .ft2-nav { grid-template-columns: repeat(2, auto); } }
/* /services panels: a long translated figure (über 500 Mio. USD, Más de 500 M USD) drops the caption under it instead of squeezing it */
.sv-fig { flex-wrap: wrap; row-gap: 6px; }
.sv-fig .detail { flex: 1 1 0; min-width: 11rem; }
/* Gold closing buttons, articles and 404 too (Marc, 27 Sept 22:35: the last call to action on every page is gold) */
.art-section .btn-row .btn, .nf-page .btn-row .btn { background: var(--gold); color: #061320; border-color: var(--gold); }
.art-section .btn-row .btn:hover, .art-section .btn-row .btn:focus-visible, .nf-page .btn-row .btn:hover, .nf-page .btn-row .btn:focus-visible { background: var(--gold-warm); border-color: var(--gold-warm); }

/* Thai script takes no tracking: letter-spacing pulls apart the vowel and
   tone-mark stacks. Audit fix, 27 Sept 2026. */
:lang(th) svg text, :lang(th) .small, :lang(th) .back-link, :lang(th) .nf-page a { letter-spacing: 0 !important; }

/* Thai fixes, audit 2026-09-27: Thai has no italic; keep the short footer legal links whole */
html[lang="th"] .sv-strip-row h3, html[lang="th"] .sv-strip-row a:hover h3 { font-style: normal; }
html[lang="th"] a[href="/th/privacy"], html[lang="th"] a[href="/th/terms"] { white-space: nowrap; }
html[lang="th"] .fig-a .v2-figures .fig-word { font-style: normal; }
/* Related-service cards, audit 2026-09-28: text sits over most of the photo, so the overlay is darker behind it (legibility, faces not competing with the text) */
.sp-rel .sv-body::after { background: linear-gradient(to top, rgba(4,16,28,.95) 0%, rgba(4,16,28,.86) 55%, rgba(4,16,28,.45) 100%); }

/* Service cards, 2026-09-28: every card is tall enough for its full text, collapsed and expanded, in every language. site.js measures the tallest card in each list and sets --sv-need; without JS the cards keep the 4:5 shape. The figure detail is shown whole, not cut with an ellipsis. */
.sv-list .sv-body { width: 100%; min-height: var(--sv-need, 0px); }
.sv-fig .detail { display: block; -webkit-line-clamp: unset; overflow: visible; }
.sv-item:hover .sv-d, .sv-item:focus-within .sv-d { max-height: 24em; }
.sv-item:hover .sv-dec, .sv-item:focus-within .sv-dec { max-height: 40em; }
.sv-list.sv-m *, .sv-list.sv-m *::after { transition: none !important; }
.sv-list.sv-m .sv-copy { max-height: none; }
.sv-list.sv-m-open .sv-fig { display: none; }
.sv-list.sv-m-open .sv-d { max-height: none; margin-top: 10px; }
.sv-list.sv-m-open .sv-dec { max-height: none; margin-top: 16px; }
@media (hover: hover) and (max-width: 1200px) and (min-width: 701px) { .sv-list:not(.sp-rel-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* About, Public voice role lines (Marc, 2026-09-28): one row each on desktop */
.ab-voice .bd-sub.ab-role { max-width: none; font-size: 1rem; }
/* Board page rewrite (Marc, 2026-09-28): three intro paragraphs; "Director education and qualifications"
   section built on .bd-held and .v2-head; gold experience band with four items, 2 x 2 on desktop, stacked on phones */
.bd-intro p + p { margin-top: 16px; }
.bd-edu .v2-head { margin-bottom: 0; }
.bd-edu .bd-edu-cred { color: var(--gold); max-width: none; }
.bd-edu-body { margin-top: 22px; }
.bd-edu-body p { color: var(--ink-2); max-width: 68ch; }
.bd-edu-body p + p { margin-top: 16px; }
.bd-cred-grid.bd-cred-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(32px, 4.5vw, 72px); }
@media (max-width: 900px) {
  .bd-cred-grid.bd-cred-4 { grid-template-columns: 1fr; }
}
/* Board tweaks 2026-09-28 (Marc): qualifications line at the foot of the education section, smaller; seat titles on two lines */
.bd-edu .bd-edu-cred { font-size: .875rem; margin-top: 22px; }
:root body .bd-panels .v2-label { font-size: var(--step-1); max-width: none; width: 100%; text-wrap: balance; }
.bd-panels > div { padding-inline: clamp(24px, 3vw, 44px); }
/* /services One relationship (Marc, 2026-09-28): paragraph top aligned with the heading, not the eyebrow */
@media (min-width: 901px) { .sv-net-head { align-items: start; } .sv-net-head > p { margin-top: calc(var(--step--1) * 1.6 + 20px); } }
/* /services fee statement on three lines at desktop (Marc, 2026-09-28) */
.sv-fee-t { max-width: 60ch; text-wrap: balance; }
/* /services network diagram aligned left with the heading column (Marc, 2026-09-28) */
@media (min-width: 1001px) { .sv-hub svg { margin-inline: 0; transform: translateX(-16px); } }
@media (min-width: 1001px) and (max-width: 1200px) { .sv-hub svg { transform: translateX(-44px); } }