/* Self-hosted web fonts — subset to latin + latin-ext. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-400-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-500-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-600-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-700-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-normal-800-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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-400-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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-500-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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-600-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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-italic-700-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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-400-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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-500-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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-600-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: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Newsreader-normal-700-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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Newsreader-italic-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Newsreader-italic-400-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: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Newsreader-italic-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Newsreader-italic-500-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: 'Newsreader';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Newsreader-italic-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Newsreader-italic-600-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;
}

/* ==========================================================================
   Nextalent — Membersite Improvement
   Design system tokens + primitives.  Design frame: 1280px.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --bg:            #F6F5F0;   /* page background (warm off-white)            */
  --surface:       #FFFFFF;   /* cards                                       */
  --surface-2:     #FAF9F5;   /* subtle raised band                          */
  --green-900:     #18332A;   /* brand dark green — full-bleed sections      */
  --green-800:     #233D34;   /* raised block inside a dark section          */
  --green-700:     #2E4B40;
  --lime:          #D6EC6D;   /* accent — stat numerals, primary dark CTA     */
  --terracotta:    #D3885E;   /* accent — eyebrows, card rules               */

  --ink-900:       #1F2523;   /* headings                                    */
  --ink-700:       #3C413D;
  --ink-600:       #4A4D48;   /* body copy                                   */
  --ink-500:       #676964;   /* muted UI text — nav, footer links, meta     */
  --ink-400:       #767873;   /* meta / muted                                */
  --ink-300:       #9AA09A;

  --on-dark:       #FFFFFF;
  --on-dark-muted: rgba(255, 255, 255, .72);
  --on-dark-faint: rgba(255, 255, 255, .54);

  --line:          rgba(31, 37, 35, .12);
  --line-soft:     rgba(31, 37, 35, .07);
  --line-dark:     rgba(255, 255, 255, .14);

  /* ---- type ---- */
  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* ---- layout ---- */
  --frame:     1280px;  /* design frame                                       */
  --gutter:      52px;  /* content starts at x=52 → 1176px content column      */
  --gutter-hero: 72px;  /* the hero sits 16px further in                       */
  --radius-sm:    8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  --shadow-card: 0 1px 2px rgba(31, 37, 35, .04), 0 6px 20px rgba(31, 37, 35, .05);
  --shadow-soft: 0 1px 2px rgba(31, 37, 35, .03), 0 2px 10px rgba(31, 37, 35, .04);
}

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-600);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---- layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--hero { padding-inline: var(--gutter-hero); }

.section { position: relative; }
.section--dark { background: var(--green-900); color: var(--on-dark); }
.section--raised { background: var(--surface-2); }

/* ---- type primitives --------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.eyebrow--bare::before { display: none; }
.eyebrow--lime { color: var(--lime); }
.eyebrow--ink  { color: var(--ink-400); }

/* pill-shaped eyebrow with an outline (hero, section tags) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex: none;
}
.tag--dark {
  background: var(--green-800);
  border-color: transparent;
  color: var(--lime);
}
.tag--dark::before { background: var(--lime); }
.tag--lime-ghost {
  background: var(--green-800);
  border-color: transparent;
  color: var(--lime);
}

.h-display {           /* 64 / 72 — hero. Tracking solved against the design ink box. */
  font-size: 64px;
  line-height: 1.125;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--ink-900);
  font-family: var(--sans);
}
.h-display--serif {    /* hero line 2 — same size, Newsreader italic */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--green-900);
}
/* Serif headings carry NO tracking — solved against the design's own ink boxes
   (stats 48 / sections 44 / sub-head 30, all at letter-spacing: normal). */
.h-serif-xl {          /* 48 — serif heading on dark */
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: normal;
}
.h-serif-lg {          /* 44 — serif section heading */
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink-900);
}
.h-serif-md {          /* 30 — serif sub-heading */
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.h-sans-md {           /* 20 — card titles */
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-600); }
.meta { font-size: 14px; line-height: 1.55; color: var(--ink-400); }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-400); }

.on-dark .h-serif-xl,
.on-dark .h-serif-lg,
.section--dark .h-serif-xl,
.section--dark .h-serif-lg { color: var(--on-dark); }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;          /* measured off the design, not 15 */
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { font-size: 15px; line-height: 1; translate: 0 .5px; }

.btn--primary { background: var(--green-900); color: var(--on-dark); }
.btn--primary:hover { background: #10261E; }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-900);
}
.btn--ghost:hover { border-color: rgba(31,37,35,.28); }

.btn--lime { background: var(--lime); color: var(--green-900); }
.btn--lime:hover { background: #CBE45C; }

.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }

/* a bare text link with a trailing arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  transition: gap .18s ease, color .18s ease;
}
.link-arrow:hover { gap: 12px; color: var(--ink-900); }

/* ---- cards ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: none; border: 1px solid var(--line-soft); }

/* ---- global state ------------------------------------------------------ */
/* Set by main.js while the mobile nav drawer is open. Global by necessity:
   the scroll lock has to live on <body>. */
@media (max-width: 1199px) {
  body.nav-open { overflow: hidden; }
}

/* ---- utility ----------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== header ===== */
/* ===== header — design y 0–78 (78px tall, 1px hairline at y=77) ===== */

.s-header {
  /* the muted nav grey measures half-way between --ink-600 and --ink-400 */
  --ink-500: #676964;

  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* the header gutter is 52px, not the 56px site gutter: the wordmark ink
   lands on x=56 and the CTA's right edge on x=1228 (= 1280 − 52) */
.s-header .container {
  padding-inline: 52px;
}

.s-header__bar {
  display: flex;
  align-items: center;
  height: 77px;
  padding-top: 1px;      /* the bar's optical centre is y=39, not 38.5 */
}

/* ---- wordmark --------------------------------------------------- */
.s-header__brand {
  display: flex;
  flex: none;
}
.s-header__logo {
  width: 163px;          /* 305×60 asset scaled 0.534 → ink 154×26  */
  height: auto;
}

/* ---- centred nav ------------------------------------------------ */
.s-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.s-header__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.s-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 76px;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-500);
  transition: color .18s ease;
}
.s-header__link:hover { color: var(--ink-900); }

.s-header__link.is-active {
  font-weight: 600;
  color: var(--ink-900);
}
.s-header__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54.5px;
  height: 2px;
  background: var(--ink-900);
}

.s-header__caret {
  flex: none;
  position: relative;
  top: 2px;
}

/* ---- right-hand actions ----------------------------------------- */
.s-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* EN / ID toggle */
.s-header__lang {
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-soft);
}
.s-header__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32.5px;
  height: 25px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink-500);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.s-header__lang-btn.is-active {
  min-width: 34px;
  background: var(--green-900);
  color: var(--lime);
  font-weight: 600;
}

/* "Let's Talk" pill — 114×39, smaller than the page-wide .btn */
.s-header__cta {
  height: 39px;
  padding: 0 20px;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.s-header__arrow {
  flex: none;
  position: relative;
  top: -.5px;
}

/* ---- hamburger drawer -------------------------------------------- */
/* On desktop .s-header__panel is display:contents, so .s-header__nav and
   .s-header__actions stay direct flex children of the bar — the 1280px
   layout is unchanged.  Below 1024 the panel becomes a real drawer.      */

.s-header { --header-h: 78px; }

.s-header__panel { display: contents; }

.s-header__toggle,
.s-header__backdrop { display: none; }

@media (max-width: 1199px) {
  .s-header {
    position: relative;
    z-index: 70;
  }
  .s-header .container { padding-inline: 32px; }
  .s-header__bar {
    position: relative;
    z-index: 65;
    background: var(--bg);
  }

  /* --- toggle button --- */
  .s-header__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-900);
    cursor: pointer;
    transition: border-color .18s ease;
  }
  .s-header__toggle:hover { border-color: rgba(31, 37, 35, .28); }

  .s-header__burger {
    position: relative;
    flex: none;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: background-color .2s ease;
  }
  .s-header__burger::before,
  .s-header__burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease;
  }
  .s-header__burger::before { top: -5px; }
  .s-header__burger::after  { top: 5px; }

  .s-header__toggle[aria-expanded="true"] .s-header__burger { background: transparent; }
  .s-header__toggle[aria-expanded="true"] .s-header__burger::before {
    transform: translateY(5px) rotate(45deg);
  }
  .s-header__toggle[aria-expanded="true"] .s-header__burger::after {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* --- the drawer --- */
  .s-header__panel {
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    padding: 26px 28px 40px;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(101%);
    visibility: hidden;
    z-index: 60;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
  }
  .s-header__panel.is-open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }

  .s-header__nav { flex: none; display: block; }
  .s-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .s-header__link {
    display: flex;
    height: auto;
    padding: 11px 0 11px 14px;
    font-size: 15px;
    font-weight: 500;
    border-left: 2px solid transparent;
  }
  .s-header__link--caret { justify-content: space-between; }
  .s-header__caret { top: 0; }
  .s-header__link.is-active { border-left-color: var(--ink-900); }
  .s-header__link.is-active::after { content: none; }

  .s-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
  }
  .s-header__lang { align-self: flex-start; }
  .s-header__cta {
    height: 46px;
    justify-content: center;
    font-size: 14px;
  }

  /* --- backdrop + scroll lock --- */
  .s-header__backdrop {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0;
    background: rgba(31, 37, 35, .38);
    opacity: 0;
    visibility: hidden;
    z-index: 55;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  body.nav-open .s-header__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
  }
}

@media (max-width: 640px) {
  .s-header { --header-h: 64px; }
  .s-header .container { padding-inline: 20px; }
  .s-header__bar { height: 63px; }
  .s-header__logo { width: 140px; }
  .s-header__toggle { padding: 0 13px; }
  .s-header__toggle-label { display: none; }
}

/* ===== hero ===== */
/* ===== hero — design y 78–655 (577px tall) ===================== */

.s-hero {
  padding-block: 51px 47px;
}

.s-hero__grid {
  display: grid;
  grid-template-columns: 1fr 445px;   /* 659 + 32 + 445 = 1136 */
  column-gap: 32px;
  align-items: center;
}

/* ---- copy column ------------------------------------------------ */
.s-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-hero__tag {
  padding: 8px 13px 12px 14px;
  gap: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
  margin-bottom: 20px;
}
.s-hero__tag::before {
  width: 7px;
  height: 7px;
}

.s-hero__title {
  margin-bottom: 19px;
}
.s-hero__title-line {
  display: block;
  letter-spacing: -.030em;
}
.s-hero__title-line--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.020em;
  /* the serif sits lower on its line than the sans — 1.297 puts both
     baselines on the design's 165.5 / 233.5 rhythm */
  line-height: 1.297;
  color: var(--green-900);
}

.s-hero__lede {
  max-width: 562px;
  line-height: 1.63;
  margin-bottom: 30.6px;
}

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}
.s-hero__cta {
  font-size: 14px;
  padding-inline: 25px;
  gap: 7.5px;
  text-decoration: none;
}
.s-hero__arrow {
  flex: none;
}

.s-hero__note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  letter-spacing: -.03em;
  color: var(--ink-700);
}
.s-hero__note::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  translate: 0 -1.5px;
}

/* ---- photo column ----------------------------------------------- */
.s-hero__media {
  position: relative;
  margin: 0;
  border-radius: 22px;
  box-shadow: 0 8px 22px -4px rgba(31, 37, 35, .09);
}
/* the design darkens the photograph toward its lower edge — measured off
   the reference: green-900 at 0% / 32% / 90% over top → middle → bottom */
.s-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--green-900)  0%, transparent)   0%,
    color-mix(in srgb, var(--green-900) 32%, transparent)  50%,
    color-mix(in srgb, var(--green-900) 90%, transparent) 100%);
}
.s-hero__photo {
  width: 445px;
  height: 460px;
  object-fit: cover;
  border-radius: 22px;
}

/* ---- reflow below the 1280 design frame -------------------------- */
@media (max-width: 1024px) {
  .s-hero {
    padding-block: 44px 48px;
  }
  .s-hero__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .s-hero__media {
    order: -1;
  }
  .s-hero__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 445 / 460;
    max-height: 420px;
  }
  .s-hero__lede {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .s-hero {
    padding-block: 32px 40px;
  }
  .s-hero__grid {
    padding-inline: 24px;
  }
  .s-hero__title {
    font-size: 40px;
    margin-bottom: 20px;
  }
  .s-hero__lede {
    margin-bottom: 26px;
  }
  .s-hero__actions {
    gap: 12px;
    margin-bottom: 22px;
  }
  .s-hero__cta {
    width: 100%;
  }
  .s-hero__photo {
    aspect-ratio: 4 / 3;
    max-height: none;
  }
}

/* ---- 1025-1279: the design's fixed 445px photo column has no room here --- */
@media (min-width: 1025px) and (max-width: 1279px) {
  .s-hero { --gutter-hero: 40px; }
  .s-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 445px); }
  .s-hero__photo { width: 100%; height: auto; aspect-ratio: 445 / 460; }
  .s-hero__title { font-size: 54px; }
  .s-hero__lede { max-width: none; }
}

/* ===== logos ===== */
/* ===== logos — design y 653–1004 (351px tall) =====================
   The band is a shade lighter than the page; the cards sit on it in --bg.
   Two full-bleed marquee rows drift in opposite directions, driven by JS.
   The prototype itself measures 16.8px/s; 1.5x of that was requested. */

.s-logos {
  /* the band reads lighter than --surface-2; measured off the crop      */
  --logos-band: #FCFBF9;
  /* one logo slot: 246 card + 31 gutter (measured pitch 276.8)          */
  --logos-card: 246px;
  --logos-gap: 31px;

  background: var(--logos-band);
  border-top: 1px solid var(--line-soft);
  padding-block: 50px 48px;
}

/* ---- heading block ---------------------------------------------- */
/* this band runs 16px wider than .container — content starts at x=40 */
.s-logos__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: 40px;
}

.s-logos__eyebrow {
  /* block-level, so no inline strut pads the line box */
  display: flex;
  /* measured cap height 9.0px → 12px, not the system 11px             */
  font-size: 12px;
  letter-spacing: .125em;
  line-height: 1;
  margin-bottom: 9px;
}

.s-logos__title {
  max-width: 640px;
}

.s-logos__note {
  flex: none;
  width: 448px;
  line-height: 1.5;
  letter-spacing: -.03em;
  /* optical: the design sets this block 1.5px below the heading's foot */
  margin-bottom: -1.5px;
}

/* ---- marquee ----------------------------------------------------- */
.s-logos__rows {
  display: grid;
  row-gap: 31px;
  margin-top: 32px;
}

/* the rows bleed past both edges of the frame */
.s-logos__row {
  overflow: hidden;
}

/* The drift is driven by main.js (requestAnimationFrame writing `transform`),
   not by CSS @keyframes.  A CSS animation is silently disabled by the OS-level
   "reduce motion" setting, which left the wall looking broken on machines that
   have it on; a JS transform is not subject to that rule.  Each track holds its
   set twice, so wrapping at half its width repeats seamlessly.
   Pause on hover / keyboard focus is handled in JS too.                       */
.s-logos__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* the design's own phase: row 1 sits 167px left of the frame, row 2 112px */
.s-logos__row--a .s-logos__track { margin-left: -167px; }
.s-logos__row--b .s-logos__track { margin-left: -112px; }

.s-logos__set {
  display: flex;
}

/* margin rather than gap, so one slot is always card + gutter and the
   half-way translate lands exactly on a repeat */
.s-logos__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--logos-card);
  height: 65px;
  margin-right: var(--logos-gap);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

/* the supplied PNGs carry their own transparent padding, so each one is
   sized by its full box — the trimmed artwork then lands at 140×50 max.
   The design prints the wall almost black with only a trace of each
   brand colour left; this is the closest filter to the crop's own ink. */
.s-logos__img {
  flex: none;
  width: 140px;
  height: auto;
  max-width: none;
  filter: brightness(.22) saturate(.6);
}

.s-logos__img--astrazeneca     { width: 150px; }
.s-logos__img--chevron         { width:  45px; }
.s-logos__img--cimbniaga       { width: 140px; }
.s-logos__img--mandiri         { width: 140px; }
.s-logos__img--bankbri         { width: 140px; }
.s-logos__img--malaysiaair     { width: 160px; }
.s-logos__img--pehafeman       { width: 140px; }
.s-logos__img--temanlamamedia  { width: 158px; }
.s-logos__img--monoform        { width: 174px; }
.s-logos__img--airbus          { width: 140px; }
.s-logos__img--cinemags        { width: 136px; }
.s-logos__img--vivagoal        { width: 139px; }
.s-logos__img--katiga          { width: 138px; }
.s-logos__img--airasia         { width: 143px; }
.s-logos__img--aia             { width: 138px; }
.s-logos__img--aeon            { width: 140px; }

/* these two carry a lot of transparent padding off-centre, so the
   artwork needs nudging back to the middle of its card */
.s-logos__img--sepuluhsebelas {
  width: 132px;
  transform: translateY(.8px);
}
.s-logos__img--milikumi {
  width: 167px;
  transform: translate(1.7px, 3.8px);
}

/* ---- reflow below the 1280 design frame -------------------------- */
@media (max-width: 1024px) {
  .s-logos {
    padding-block: 44px 44px;
  }
  .s-logos__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .s-logos__note {
    width: auto;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .s-logos {
    padding-block: 36px 36px;
  }
  .s-logos__head {
    padding-inline: 24px;
  }
  .s-logos__title {
    font-size: 26px;
  }
  .s-logos__rows {
    row-gap: 14px;
    margin-top: 26px;
  }
  .s-logos__item {
    width: 184px;
    height: 56px;
    margin-right: 14px;
  }
  .s-logos__img {
    width: 108px;
  }
  .s-logos__img--astrazeneca     { width: 113px; }
  .s-logos__img--chevron         { width:  35px; }
  .s-logos__img--malaysiaair     { width: 120px; }
  .s-logos__img--temanlamamedia  { width: 119px; }
  .s-logos__img--monoform        { width: 131px; }
  .s-logos__img--sepuluhsebelas  { width:  99px; }
  .s-logos__img--cinemags        { width: 102px; }
  .s-logos__img--vivagoal        { width: 104px; }
  .s-logos__img--milikumi        { width: 125px; }
  .s-logos__img--katiga          { width: 104px; }
  .s-logos__img--airasia         { width: 107px; }
  .s-logos__img--aia             { width: 104px; }
  .s-logos__row--a .s-logos__track { margin-left: -90px; }
  .s-logos__row--b .s-logos__track { margin-left: -60px; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-logos__note { width: auto; max-width: 448px; }
}

/* ===== stats ===== */
/* ===== stats — full-bleed --green-900 band, design y 1008–1488 ============ */

.s-stats {
  /* the dark band measures 480px tall in the reference crop */
  padding-block: 48.05px 49.83px;
  /* the vertical column rules are fainter than --line-dark (measured ~8% white) */
  --stats-divider: rgba(255, 255, 255, .08);
}

/* ---- headline row ------------------------------------------------- */
.s-stats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.s-stats__eyebrow {
  display: block;
  font-size: 12.5px;
  line-height: 1;
  margin-bottom: 11.64px;
}

.s-stats__title {
  max-width: 640px;
  line-height: 54.22px;
  color: var(--on-dark);
}

.s-stats__note {
  flex: none;
  width: 386px;
  font-size: 14px;
  line-height: 22.9px;
  color: var(--on-dark-faint);
}

/* ---- hairline ------------------------------------------------------ */
.s-stats__rule {
  height: 1px;
  margin: 33.01px 0 0;
  border: 0;
  background: var(--line-dark);
}

/* ---- three stat columns -------------------------------------------- */
.s-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 52.45px;
}

.s-stats__item {
  position: relative;
}
.s-stats__item + .s-stats__item {
  padding-left: 40px;
}
/* the divider runs the height of the column and fades out at both ends */
.s-stats__item + .s-stats__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1px;
  bottom: -5.3px;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0,
    var(--stats-divider) 8.4%,
    var(--stats-divider) 91.6%,
    transparent 100%);
}

.s-stats__figure {
  display: flex;
  align-items: baseline;
  gap: 17.4px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: normal;
  color: var(--lime);
}
.s-stats__unit {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: var(--on-dark);
}

.s-stats__label {
  margin-top: 12.74px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .163em;
  color: var(--on-dark);
}

.s-stats__copy {
  max-width: 352px;
  margin-top: 9.64px;
  font-size: 13.5px;
  line-height: 21.7px;
  color: var(--on-dark-muted);
}

/* ---- reflow below the 1280 design frame ----------------------------- */
@media (max-width: 1024px) {
  .s-stats {
    padding-block: 56px 56px;
  }
  .s-stats__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .s-stats__title {
    max-width: none;
  }
  .s-stats__note {
    width: auto;
    max-width: 520px;
  }
  .s-stats__rule {
    margin-top: 28px;
  }
  .s-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
    margin-top: 40px;
  }
  .s-stats__item:nth-child(2n + 1) {
    padding-left: 0;
  }
  .s-stats__item:nth-child(2n + 1)::before {
    display: none;
  }
  .s-stats__item + .s-stats__item::before {
    bottom: 0;
  }
}

@media (max-width: 640px) {
  .s-stats {
    padding-block: 44px 44px;
  }
  .s-stats__title {
    font-size: 34px;
    line-height: 1.2;
  }
  .s-stats__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    margin-top: 32px;
  }
  .s-stats__item + .s-stats__item {
    padding-left: 0;
  }
  .s-stats__item + .s-stats__item::before {
    display: none;
  }
  .s-stats__figure {
    font-size: 60px;
    gap: 11px;
  }
  .s-stats__unit {
    font-size: 28px;
  }
  .s-stats__copy {
    max-width: none;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-stats__note { width: auto; max-width: 386px; }
}

/* ===== challenges ===== */
/* ===== challenges — design y 1485–2366 (881px tall) =====================
   Heading row (serif 44 left, 15px supporting note right) over a 3x2 grid
   of white cards, each with a 4px coloured top bar.                      */

.s-challenges {
  /* the oversized card numerals are a flat neutral grey — colder than
     --ink-300, measured straight off the reference                       */
  --challenges-num: #AAAAAA;
  /* the CHALLENGE NN label is a muted brown, not --terracotta: the reference
     renders it around rgb(160 138 121), far less saturated than the top bar  */
  --challenges-label: #A08A79;

  padding-block: 50px 48px;
}

/* this section sits on a 52px gutter, not the 56px site gutter: the card
   row runs x = 52 → 1228 (three 376px cards with 24px gutters) */
.s-challenges .container {
  padding-inline: 52px;
}

/* ---- heading row -------------------------------------------------- */
.s-challenges__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

/* the pill is a 16% terracotta wash, no outline, and sits on a 24.6px box */
.s-challenges__tag {
  display: flex;
  width: fit-content;
  padding: 5.8px 12px;
  gap: 8px;
  letter-spacing: .175em;
  line-height: 1;
  background: color-mix(in srgb, var(--terracotta) 16%, transparent);
  border-color: transparent;
  margin-bottom: 10.9px;
}
.s-challenges__tag::before {
  width: 7px;
  height: 7px;
}

.s-challenges__title {
  max-width: 720px;
  line-height: 50px;
}

.s-challenges__note {
  flex: none;
  width: 448px;
  margin-bottom: 1.5px;
  font-size: 15px;        /* measured: 15/24, not the 18px body size */
  line-height: 24px;
  color: var(--ink-600);
}

/* ---- card grid ------------------------------------------------------ */
.s-challenges__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px 24px;
  margin-top: 64.3px;
}

.s-challenges__item {
  display: flex;
}

.s-challenges__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top-width: 4px;
  border-radius: 14px;
  padding: 34.2px 33.5px 34.4px;
}
.s-challenges__card--clay   { border-top-color: var(--terracotta); }
.s-challenges__card--forest { border-top-color: var(--green-900); }

/* ---- card head: eyebrow left, oversized numeral right --------------- */
.s-challenges__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  line-height: 1;
}

.s-challenges__eyebrow {
  font-size: 10px;        /* measured: 10px, not the system 11px eyebrow */
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--challenges-label);
}

.s-challenges__num {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  color: var(--challenges-num);
  translate: 0 2px;
}

/* ---- card body ------------------------------------------------------ */
.s-challenges__card-title {
  margin-top: 21.7px;
  font-family: var(--sans);
  font-size: 19px;        /* measured off the ink box: 19, not 20 */
  line-height: 27px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink-900);
}

.s-challenges__card-body {
  /* absorbs the slack so the rule + link sit on the bottom of every card in
     a row, whatever the title/body line count */
  flex-grow: 1;
  margin-top: 9px;
  font-size: 14px;
  line-height: 23px;
  color: var(--ink-600);
}

/* ---- card footer ---------------------------------------------------- */
.s-challenges__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 23.5px;
  padding-top: 18.6px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-900);
  transition: gap .18s ease;
}
.s-challenges__link:hover { gap: 16px; }

.s-challenges__arrow { flex: none; }

/* ---- reflow below the 1280 design frame ----------------------------- */
@media (max-width: 1024px) {
  .s-challenges {
    padding-block: 44px 46px;
  }
  .s-challenges__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .s-challenges__note {
    width: auto;
    max-width: 560px;
    margin-bottom: 0;
  }
  .s-challenges__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
  }
}

@media (max-width: 640px) {
  .s-challenges .container {
    padding-inline: 24px;
  }
  .s-challenges {
    padding-block: 36px 40px;
  }
  .s-challenges__title {
    font-size: 32px;
    line-height: 1.18;
  }
  .s-challenges__grid {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }
  .s-challenges__card {
    padding: 28px 24px 26px;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-challenges__note { width: auto; max-width: 448px; }
}

/* ===== practices ===== */
/* ===== practices — design y 2368–3622 (1254px tall) ==================== */

.s-practices {
  background: var(--surface-2);
  padding-block: 38px 49px;
}

/* this section sits on a 52px gutter, not the 56px .container default */
.s-practices__inner {
  padding-inline: 52px;
}

/* ---- heading block ---------------------------------------------- */
.s-practices__eyebrow {
  letter-spacing: .18em;
  margin-bottom: 5px;
}

.s-practices__title {
  max-width: 720px;
  line-height: 50px;          /* measured: 50px baseline-to-baseline */
  margin-bottom: 12px;
}

.s-practices__lede {
  max-width: 640px;
  font-size: 15px;            /* measured off the crop — not the 18px body */
  line-height: 24px;
  margin-bottom: 58px;
}

/* ---- the card ---------------------------------------------------- */
.s-practices__list {
  border-radius: 22px;        /* measured off the corner arc in the crop */
}

.s-practices__row {
  display: flex;
  align-items: center;
  height: 157.5px;            /* 6 x 157.5 = 945 card height */
  padding-inline: 36px;
}
.s-practices__row + .s-practices__row {
  border-top: 1px solid var(--line);
}

.s-practices__index,
.s-practices__body {
  align-self: flex-start;
  margin-top: 36.5px;
}

.s-practices__index {
  flex: none;
  margin-top: 43.5px;         /* the serif figures sit higher in their line box */
  width: 50.5px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 27px;
  color: var(--ink-300);
}

.s-practices__body {
  flex: none;
  width: 713px;               /* wraps every description where the design does */
}

.s-practices__name {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: normal;     /* the design sets no tracking on these titles */
  line-height: 27px;
  margin-bottom: 9.5px;
}

.s-practices__icon {
  flex: none;
  align-self: flex-start;
  margin-top: 6px;
  width: 20px;
  height: 20px;
  color: var(--ink-900);
}

.s-practices__desc {
  font-size: 14.5px;
  line-height: 22.5px;
  color: var(--ink-600);
}

.s-practices__more {
  margin-left: auto;
  flex: none;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-900);
  white-space: nowrap;
}
.s-practices__more:hover { gap: 10px; }

.s-practices__arrow {
  flex: none;
}

/* ---- reflow below the 1280 design frame -------------------------- */
@media (max-width: 1024px) {
  .s-practices {
    padding-block: 56px 48px;
  }
  .s-practices__row {
    height: auto;
    padding-block: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .s-practices__index,
  .s-practices__body {
    margin-top: 0;
  }
  .s-practices__body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .s-practices__more {
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: 14px;
    padding-left: 50.5px;
  }
  .s-practices__title,
  .s-practices__lede {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .s-practices {
    padding-block: 40px 36px;
  }
  .s-practices__inner {
    padding-inline: 24px;
  }
  .s-practices__title {
    font-size: 32px;
    line-height: 1.2;
  }
  .s-practices__row {
    padding-inline: 20px;
    padding-block: 22px;
  }
  .s-practices__index {
    width: 38px;
    font-size: 22px;
  }
  .s-practices__more {
    padding-left: 38px;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-practices__body { width: auto; max-width: 713px; }
}

/* ===== wolf ===== */
/* ===== wolf — "The Wolf Trainer" feature card ==========================
   Measured off 07-wolf.png.  The section rule sits at crop y 31 and the
   journey rule at crop y 717, so the band is 686px tall (the section map's
   714 counts 31px of the practices tail that sits above the rule).
   One full-container dark card, x 52 → 1228 (1176 wide), y 79.8 → 668.5
   (589 tall), copy left, photograph bleeding to the card's right edge. */

.s-wolf {
  /* the band behind the card is a touch lighter than --surface-2 — it is
     exactly halfway between --surface and --surface-2 (#FDFCFA)          */
  --wolf-band: color-mix(in srgb, var(--surface) 50%, var(--surface-2));
  /* the wash over the photograph — solved against the untouched asset:
     --green-900 taken ~39% toward black (#0E2019)                        */
  --wolf-veil: color-mix(in srgb, var(--green-900) 61%, #000);

  background: var(--wolf-band);
  border-top: 1px solid var(--line-soft);
  padding-block: 48px 48.5px;
}

/* this section sits on a 52px gutter, not the 56px .container default */
.s-wolf__inner { padding-inline: 52px; }

/* ---- the card ------------------------------------------------------ */
.s-wolf__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 491px;
  background: var(--green-900);
  border-radius: 24px;
  overflow: hidden;
  color: var(--on-dark);
  box-shadow: 0 18px 40px rgba(31, 37, 35, .28);
}

/* ---- copy column --------------------------------------------------- */
.s-wolf__copy {
  padding: 57px 0 56.6px 56px;
}

/* brand lockup: 44px mark + two lines ---------------------------------- */
.s-wolf__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 32px;
}
.s-wolf__mark {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
/* the two lines ride ~1px above the optical centre of the 44px mark */
.s-wolf__brand-text { translate: 0 -1px; }

.s-wolf__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 5.5px;
}
.s-wolf__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--on-dark);
}

/* heading --------------------------------------------------------------- */
/* .h-serif-lg, pulled down to the 42/48 this card uses */
.s-wolf__title {
  max-width: 560px;
  font-size: 42px;
  line-height: 48px;
  color: var(--on-dark);
  margin-bottom: 25px;
}

/* lede ------------------------------------------------------------------ */
.s-wolf__lede {
  max-width: 520px;
  font-size: 17px;          /* measured: 17/27.7, not the 18px body size */
  line-height: 27.7px;
  color: var(--on-dark-muted);
  margin-bottom: 31px;
}

/* tick list: 2 x 2 --------------------------------------------------- */
.s-wolf__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 262px));
  column-gap: 32px;
  row-gap: 17px;
  margin-bottom: 33.1px;
}
.s-wolf__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--on-dark-muted);
}
.s-wolf__tick {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--lime);
}

/* lime pill ------------------------------------------------------------- */
.s-wolf__cta {
  height: 48px;
  padding-inline: 28.5px 23px;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: normal;
}
.s-wolf__arrow { flex: none; translate: 0 -.5px; }

/* ---- photograph ------------------------------------------------------- */
.s-wolf__media {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.s-wolf__photo {
  width: 491px;
  height: 100%;
  /* the design places the untouched 1170x780 photograph with its top-left
     corner at card-relative (-13, 0) and lets the card clip it */
  object-fit: none;
  object-position: -13px 0;
}
/* the card veils the photograph more strongly toward its lower edge.  Solved
   against the untouched asset: one flat colour (--wolf-veil) whose alpha runs
   12% → 47% → 100% down the card reproduces all seven measured bands. */
.s-wolf__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--wolf-veil)  12%, transparent)   0%,
    color-mix(in srgb, var(--wolf-veil)  47%, transparent)  50%,
    var(--wolf-veil)                                       100%);
}

/* ---- reflow below the 1280 design frame ------------------------------ */
@media (max-width: 1024px) {
  .s-wolf { padding-block: 44px; }
  .s-wolf__inner { padding-inline: 32px; }
  .s-wolf__card { grid-template-columns: 1fr; }
  .s-wolf__media { order: -1; height: 320px; }
  .s-wolf__photo {
    width: 100%;
    object-fit: cover;
    object-position: 28% 50%;
  }
  .s-wolf__copy { padding: 40px 40px 44px; }
  .s-wolf__title { font-size: 38px; line-height: 44px; }
  .s-wolf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .s-wolf { padding-block: 32px; }
  .s-wolf__inner { padding-inline: 20px; }
  .s-wolf__card { border-radius: 18px; }
  .s-wolf__media { height: 230px; }
  .s-wolf__copy { padding: 28px 24px 32px; }
  .s-wolf__title { font-size: 30px; line-height: 36px; margin-bottom: 20px; }
  .s-wolf__lede { margin-bottom: 24px; }
  .s-wolf__list { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-bottom: 26px; }
  .s-wolf__cta { width: 100%; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-wolf__card { grid-template-columns: minmax(0, 1fr) clamp(320px, 38vw, 491px); }
  .s-wolf__photo { width: 100%; }
}

/* ===== journey ===== */
/* ===== journey — "the complete employee journey" ======================
   Measured off 08-journey.png plus the first 180 rows of 09-culture.png:
   the milestone card runs past the bottom of its own crop, so the band is
   523px tall (rule to rule), not the 352 the section map lists.
   Heading row with a dark pill on the right, then one white card holding
   ten 98.8 x 99 milestone tiles in a single row.                        */

.s-journey {
  /* the rule threaded through the numbered circles is about twice the
     weight of --line; everything else on the card uses --line            */
  --journey-rule: rgba(31, 37, 35, .21);

  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding-block: 50.5px 49.5px;
}

/* this section sits on a 52px gutter, not the 56px .container default */
.s-journey__inner { padding-inline: 52px; }

/* ---- heading row ---------------------------------------------------- */
.s-journey__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 49.5px;
}

.s-journey__eyebrow {
  display: flex;
  width: fit-content;
  line-height: 1;
  letter-spacing: .18em;
  margin-bottom: 9.25px;
}

.s-journey__title {
  line-height: 52.8px;
  letter-spacing: normal;
  margin-bottom: 6px;
}

.s-journey__sub {
  font-size: 15px;          /* measured: 15/24, not the 18px body size */
  line-height: 24px;
  color: var(--ink-600);
}

/* the pill is solid --green-900 and sits on a 34px box, tighter than .tag */
.s-journey__pill {
  flex: none;
  height: 33.8px;
  padding: 0 14px 0 16px;
  gap: 10px;
  background: var(--green-900);
  font-size: 11.5px;
  letter-spacing: .08em;
  line-height: 1;
}
.s-journey__pill::before { width: 8px; height: 8px; }

/* ---- the card -------------------------------------------------------- */
.s-journey__card {
  padding: 44.7px 40px 55px;
  border-radius: 22px;
}

.s-journey__cardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  line-height: 1;
  padding-bottom: 17.3px;
  border-bottom: 1px solid var(--line);
}

.s-journey__count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.s-journey__count::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-900);
}

.s-journey__note {
  font-size: 12px;
  color: var(--ink-500);
  text-align: right;
}

/* ---- the ten milestone tiles ----------------------------------------- */
.s-journey__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}
/* The rule runs behind the row, 20.5px down.  The tiles are a 58% wash of
   --bg rather than a solid fill, so it reads at full strength in the gaps
   and muted inside a tile; the opaque white circles mask it completely. */
.s-journey__steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 23.5px;
  right: 23.5px;
  top: 20.5px;
  height: 1px;
  background: var(--journey-rule);
}

.s-journey__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 99px;
  padding-top: 12px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.s-journey__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
}

.s-journey__label {
  margin-top: 13px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.s-journey__word {
  margin-top: 4.7px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

/* ---- reflow below the 1280 design frame ------------------------------ */
@media (max-width: 1024px) {
  .s-journey { padding-block: 44px; }
  .s-journey__inner { padding-inline: 32px; }
  .s-journey__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .s-journey__title { font-size: 36px; line-height: 44px; }
  .s-journey__card { padding: 32px 28px 36px; }
  .s-journey__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 12px; }
  .s-journey__steps::before { display: none; }
}

@media (max-width: 640px) {
  .s-journey { padding-block: 32px; }
  .s-journey__inner { padding-inline: 20px; }
  .s-journey__title { font-size: 30px; line-height: 36px; }
  .s-journey__card { padding: 24px 20px 28px; border-radius: 16px; }
  .s-journey__cardhead { flex-direction: column; align-items: stretch; gap: 10px; }
  .s-journey__note { text-align: left; }
  .s-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== culture ===== */
/* ===== culture — the diagnostic / culture-check band ======================
   Measured band: design y 4857–5438 (581px tall, 1px rule on top).
   Gutter is 52px here (not the 56px default), content 1176 wide.
   ========================================================================= */

.s-culture {
  /* the band sits a shade lighter than --bg and a shade warmer than white;
     measured #FCFBF9 — not one of the shared tokens */
  --culture-bg: #FCFBF9;

  --gutter: 52px;                  /* this section's own gutter */
  background: var(--culture-bg);
  border-top: 1px solid var(--line);
  padding-block: 51px 55px;
}

.s-culture__grid {
  display: grid;
  grid-template-columns: 478px 666px;   /* 478 + 32 + 666 = 1176 */
  column-gap: 32px;
  align-items: center;
}

/* ---- left column -------------------------------------------------- */
.s-culture__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  margin-top: 21.5px;          /* the copy sits a hair above the card's centre */
}

.s-culture__tag {
  height: 30px;
  padding: 0 14.5px 0 12.5px;
  gap: 7px;
  line-height: 1;
  background: var(--green-900);
  color: var(--lime);
}
.s-culture__tag::before { display: none; }       /* an icon replaces the dot */
.s-culture__tag-icon { flex: none; }

.s-culture__title {
  line-height: 50px;                /* measured baseline rhythm, not 1.2 */
  margin-top: 13px;
}

.s-culture__lede {
  max-width: 472px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-600);
}

.s-culture__list {
  margin-top: 24.5px;
  display: flex;
  flex-direction: column;
  gap: 14.5px;
}
.s-culture__item {
  display: flex;
  align-items: flex-start;
  gap: 10.5px;
  font-size: 14px;
  line-height: 18.5px;
  color: var(--ink-700);
}
.s-culture__tick {
  flex: none;
  color: var(--ink-900);
}

.s-culture__cta {
  margin-top: 33px;
  height: 50px;
  padding-inline: 29px;
  gap: 4px;
}
.s-culture__arrow { flex: none; }

/* ---- the question card --------------------------------------------- */
.s-culture__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 36px 36px;
  box-shadow: 0 1px 2px rgba(31, 37, 35, .035), 0 9px 30px rgba(31, 37, 35, .06);
}

/* meta row: pill · dimension · language toggle */
.s-culture__meta {
  display: flex;
  align-items: center;
  gap: 5px;
}
.s-culture__qpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-900);
  white-space: nowrap;
}
.s-culture__dimension {
  font-size: 12px;
  line-height: 1;
  color: var(--ink-500);
  white-space: nowrap;
}
.s-culture__langs {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 11.5px 0 10.5px;
  gap: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg);
}
.s-culture__lang {
  display: inline-flex;
  align-items: center;
  height: 26px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-500);
  white-space: nowrap;
}
.s-culture__lang--on {
  padding-inline: 6px;
  background: var(--surface);
  font-weight: 600;
  color: var(--ink-900);
}

.s-culture__rule {
  height: 1px;
  margin-top: 19px;
  background: var(--line);
}
.s-culture__rule--soft {
  margin-top: 30.5px;
  background: var(--line-soft);
}

/* progress */
.s-culture__progress {
  height: 8px;
  margin-top: 24px;
  border-radius: 999px;
  background: var(--line-soft);
}
.s-culture__progress-fill {
  display: block;
  width: 4.1667%;               /* 1 of 24 */
  height: 100%;
  border-radius: 999px;
  background: var(--green-900);
}

.s-culture__eyebrow {
  margin-top: 34px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.s-culture__question {
  margin-top: 9.5px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink-900);
}

/* 1–5 scale */
.s-culture__scale { margin-top: 34px; }
.s-culture__scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-500);
}
.s-culture__scale-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 11px;
}
.s-culture__option {
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--culture-bg);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.s-culture__option:hover { border-color: rgba(31, 37, 35, .28); }
.s-culture__option--on,
.s-culture__option--on:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--lime);
}

/* footer row */
.s-culture__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.s-culture__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-400);
}
.s-culture__lock { flex: none; }

.s-culture__next {
  height: 41px;
  padding-inline: 21px;
  gap: 7.5px;
  font-size: 13px;
}

/* ---- reflow below the 1280 design frame ----------------------------- */
@media (max-width: 1280px) {
  .s-culture__grid {
    grid-template-columns: minmax(0, 478px) minmax(0, 666px);
  }
  .s-culture__card { width: 100%; }
}

@media (max-width: 1024px) {
  .s-culture { padding-block: 48px 52px; }
  .s-culture__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .s-culture__copy { margin-top: 0; }
  .s-culture__lede,
  .s-culture__title { max-width: 620px; }
  .s-culture__card { padding: 28px; }
}

@media (max-width: 640px) {
  .s-culture { padding-block: 36px 40px; }
  .s-culture__title { font-size: 34px; line-height: 40px; }
  .s-culture__card { padding: 20px; }
  .s-culture__meta { flex-wrap: wrap; gap: 10px; }
  .s-culture__langs { margin-left: 0; }
  .s-culture__question { font-size: 19px; line-height: 28px; }
  .s-culture__scale-options { gap: 6px; }
  .s-culture__option { height: 44px; }
  .s-culture__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .s-culture__cta { width: 100%; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-culture__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr); }
}

/* ===== method ===== */
/* ===== method — the four-phase advisory cycle ============================
   Measured band: design y 5438–6028 (589px tall) on the --surface-2 band.
   Gutter is 52px here (not the 56px default), content 1176 wide.
   ========================================================================= */

.s-method {
  --gutter: 52px;                   /* this section's own gutter */
  background: var(--surface-2);
  padding-block: 42.5px 47px;
}

/* ---- heading row ---------------------------------------------------- */
.s-method__head {
  display: grid;
  grid-template-columns: 1fr 384px;   /* 760 + 32 + 384 = 1176 */
  column-gap: 32px;
  align-items: end;
}

.s-method__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-method__eyebrow {
  line-height: 1;
  letter-spacing: .16em;
}

.s-method__title {
  margin-top: 9.7px;
  line-height: 50px;                /* measured baseline rhythm, not 1.2 */
  max-width: 690px;
}

.s-method__lede {
  margin-bottom: 2.8px;
  font-size: 14.5px;                /* measured off the design's own line width */
  line-height: 22px;
  color: var(--ink-500);
}

/* ---- phase cards ---------------------------------------------------- */
.s-method__phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 × 276 + 3 × 24 = 1176 */
  gap: 24px;
  margin-top: 56.3px;
}

.s-method__card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 33px 28px 29px;
  box-shadow: 0 1px 2px rgba(31, 37, 35, .03), 0 6px 20px rgba(31, 37, 35, .04);
}

.s-method__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.s-method__phase {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11.5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-900);
  white-space: nowrap;
}

.s-method__num {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--ink-300);
}

.s-method__name {
  font-size: 19px;                  /* measured — a shade under the 20px card title */
  margin-top: 31.4px;
}

.s-method__body {
  margin-top: 8.1px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -.02em;      /* the design's card body runs ~3% tight */
  color: var(--ink-500);
}

/* ---- closing button -------------------------------------------------- */
.s-method__cta {
  margin-top: 47.5px;
  height: 50px;
  padding-inline: 24.5px;
  gap: 8.5px;
  font-size: 13px;
}
.s-method__arrow { flex: none; }

/* ---- reflow below the 1280 design frame ------------------------------ */
@media (max-width: 1280px) {
  .s-method__head { grid-template-columns: 1fr minmax(0, 384px); }
}

@media (max-width: 1024px) {
  .s-method { padding-block: 40px 44px; }
  .s-method__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    align-items: start;
  }
  .s-method__lede { margin-bottom: 0; max-width: 560px; }
  .s-method__phases {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .s-method__cta { margin-top: 36px; }
}

@media (max-width: 640px) {
  .s-method { padding-block: 34px 38px; }
  .s-method__title { font-size: 34px; line-height: 40px; }
  .s-method__phases {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
  .s-method__card { padding: 24px 20px; }
  .s-method__name { margin-top: 24px; }
  .s-method__cta { width: 100%; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-method__head { grid-template-columns: minmax(0, 1fr) minmax(0, 384px); }
}

/* ===== cases ===== */
/* ===== cases — design y 6028–6802 (774px tall) ======================
   Heading row with a bordered note box on the right, then three white
   cards on a 52px gutter: 376px wide, 24px apart, 576px tall, each with
   a 6x45 rounded accent bar on its left edge.

   The card type here runs smaller than the system defaults — measured
   off the crop, not guessed: card title 18/24 (not 20/1.35, and with no
   tracking), card summary 12.5/21, inset copy 12.5/18, note box and the
   PDF link 11/18, client pill 11, sector label 11, "Read Case Study"
   11.5/700.  Only the 44px serif heading matches the spec table.        */

.s-cases {
  /* the three client pills are three different pale tints — measured off
     the crop; none of them is one of the system colours                 */
  --cases-pill-a: #EFEEE9;
  --cases-pill-b: #F2EDE8;
  --cases-pill-c: #E7E9E9;

  background: var(--bg);
  padding-block: 53.5px 50px;
}

/* this section sits on a 52px gutter, not the 56px .container default */
.s-cases__inner { padding-inline: 52px; }

/* ---- heading row ---------------------------------------------------- */
.s-cases__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 46.2px;
}

.s-cases__eyebrow {
  display: block;
  line-height: 1;
  margin-bottom: 9.5px;
}

/* the note box: 448 wide, 50 tall, hairline border, flush with the
   right-hand edge of the card grid                                      */
.s-cases__note {
  flex: none;
  width: 448px;
  margin-top: 22px;
  padding: 5px 15px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-500);
  font-size: 11px;
  line-height: 18px;
}

/* ---- the three cards ------------------------------------------------ */
.s-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.s-cases__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 576px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 29px 27.5px 35px;
}

/* the accent bar on the left edge */
.s-cases__bar {
  position: absolute;
  left: 0;
  top: 30px;
  width: 6px;
  height: 45px;
  border-radius: 3px;
  background: var(--green-900);
}
.s-cases__card--b .s-cases__bar { background: var(--terracotta); }
.s-cases__card--c .s-cases__bar { background: var(--green-800); }

/* ---- client pill + sector label ------------------------------------- */
.s-cases__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.s-cases__client {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 2px 14px 0;
  border-radius: 999px;
  background: var(--cases-pill-a);
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.s-cases__card--b .s-cases__client { background: var(--cases-pill-b); }
.s-cases__card--c .s-cases__client { background: var(--cases-pill-c); }

.s-cases__sector {
  margin-top: 4px;        /* rides 2px below the pill's optical centre */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}

/* ---- title + one-line summary --------------------------------------- */
.s-cases__name {
  font-size: 18px;        /* 18, not the system 20 — measured */
  line-height: 24px;
  letter-spacing: normal; /* .h-sans-md's -.01em is not in the design */
  margin-top: 15.5px;
}

.s-cases__summary {
  margin-top: 13.5px;
  font-size: 12.5px;
  line-height: 21px;
  color: var(--ink-400);
}

/* ---- the pale inset block ------------------------------------------- */
.s-cases__detail {
  margin-top: 11px;
  padding: 20px 16px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-600);
}
.s-cases__detail p + p { margin-top: 12px; }
/* the bold runs are tracked a touch tighter than the body copy */
.s-cases__detail strong {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.s-cases__result {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

/* ---- footer row ----------------------------------------------------- */
.s-cases__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16.5px;
}
/* the rule reaches past the content column — 10px on the left, 3px on
   the right — and fades out at both ends                                */
.s-cases__foot::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -3px;
  top: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(31, 37, 35, 0) 0,
    var(--line) 10px,
    var(--line) calc(100% - 7px),
    rgba(31, 37, 35, 0) 100%);
}

.s-cases__pdf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 18px;
  color: var(--ink-500);
  transition: color .18s ease;
}
.s-cases__pdf:hover { color: var(--ink-900); }
.s-cases__pdficon { flex: none; }

.s-cases__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  top: 2px;          /* the design sets this link 2px below the PDF link */
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: normal;
  color: var(--ink-900);
  transition: gap .18s ease;
}
.s-cases__more:hover { gap: 11px; }
.s-cases__arrow { flex: none; }

/* ---- reflow below the 1280 design frame ----------------------------- */
@media (max-width: 1024px) {
  .s-cases { padding-block: 44px 44px; }
  .s-cases__head {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
  }
  .s-cases__note {
    width: 100%;
    max-width: 448px;
    margin-top: 0;
  }
  .s-cases__grid { grid-template-columns: repeat(2, 1fr); }
  .s-cases__card { min-height: 0; }
}

@media (max-width: 640px) {
  .s-cases { padding-block: 36px 36px; }
  .s-cases__inner { padding-inline: 24px; }
  .s-cases__title { font-size: 32px; }
  .s-cases__grid { grid-template-columns: 1fr; }
  .s-cases__card { padding: 24px 20px 24px 26px; }
  .s-cases__meta {
    flex-wrap: wrap;
    gap: 10px;
  }
  .s-cases__foot {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-cases__note { width: auto; max-width: 448px; }
}

/* ===== insights ===== */
/* ===== insights — "Insights, Ideas & Practical Tools" ====================
   Measured band: the rule-to-rule panel runs design y 6827–8094 (1267px),
   not the 6798–8098 the section map lists — the first 29 rows of the crop
   still belong to `cases`.  The panel sits on its own near-white ground
   (#FDFCFA, one step lighter than --surface-2) on a 52px gutter, so the
   content column is 1176 wide and the 3-up tracks are 376 with 24px gaps.

   Type here runs a notch smaller than the page default: lede 16/26,
   card + article body 13/21, serif card titles 19, small caps 11.5–12.  */

.s-insights {
  /* the panel ground — measured flat #FDFCFA from the top rule to the
     bottom one; lighter than --surface-2, so it needs its own token */
  --ins-bg:   #FDFCFA;
  /* warm sand behind the FRAMEWORK pill; not a clean mix of --terracotta */
  --ins-sand: #F4E9DC;

  --gutter: 52px;                   /* this section's own gutter, not 56 */

  background: var(--ins-bg);
  border-top: 1px solid var(--line);   /* the panel rule reads heavier than --line-soft */
  padding-block: 49px 47px;
}

/* ---- heading block --------------------------------------------------- */
.s-insights__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-insights__tag {
  height: 26px;
  padding: 0 8px 0 12px;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-900) 6%, transparent);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.s-insights__tag::before {
  width: 8px;
  height: 8px;
  background: currentColor;
}

.s-insights__title {
  font-size: 46px;                  /* 46 here, not the 44 of other sections */
  line-height: 1.2;
  margin-bottom: 7px;
}

.s-insights__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

.s-insights__lede {
  max-width: 672px;
  font-size: 16px;
  line-height: 26px;
}

.s-insights__head-link {
  flex: none;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  padding-bottom: 2px;
}

/* ---- group label row -------------------------------------------------- */
.s-insights__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-top: 57px;
  margin-bottom: 24px;
}

.s-insights__label-text {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  color: var(--ink-500);
}

.s-insights__label-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-400);
}

.s-insights__label--reading { margin-top: 63px; }

/* ---- card rows -------------------------------------------------------- */
.s-insights__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.s-insights__row--2 { margin-top: 24px; }
.s-insights__res--wide { grid-column: span 2; }

/* the cards on this panel carry a hairline as well as a soft drop shadow */
.s-insights__res,
.s-insights__art {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(31, 37, 35, .03), 0 3px 12px rgba(31, 37, 35, .04);
}

/* ---- resource card ---------------------------------------------------- */
.s-insights__res { padding: 24px; }

.s-insights__res-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.s-insights__cat {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10.5px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  color: var(--ink-900);
  white-space: nowrap;
}
.s-insights__cat--deep { background: var(--green-900); color: var(--lime); }
.s-insights__cat--sand { background: var(--ins-sand); }
.s-insights__cat--pale { background: var(--bg); }
.s-insights__cat--mist { background: color-mix(in srgb, var(--green-900) 10%, transparent); }
.s-insights__cat--lime { background: var(--lime); color: var(--green-900); }

.s-insights__format {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-500);
  white-space: nowrap;
}
.s-insights__format-icon { flex: none; }

.s-insights__res-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--ink-900);
  margin-top: 17px;
}

.s-insights__res-body {
  font-size: 13px;
  line-height: 20.5px;
  color: var(--ink-500);
  margin-top: 9px;
  margin-bottom: 27px;              /* the floor under the rule; auto does the rest */
}

.s-insights__res-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 17.5px;
  border-top: 1px solid var(--line);
}

.s-insights__res-kind {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .025em;
  color: var(--ink-900);
}

.s-insights__res-link,
.s-insights__art-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-900);
  white-space: nowrap;
  transition: gap .18s ease;
}
.s-insights__res-link:hover,
.s-insights__art-link:hover { gap: 10px; }
.s-insights__dl { flex: none; translate: 0 .5px; }

/* ---- article card ----------------------------------------------------- */
.s-insights__art { padding: 28px 28px 30px; }

.s-insights__art-meta {
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.s-insights__art-cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .025em;
  color: var(--terracotta);
}
.s-insights__art-cat--deep { color: var(--green-900); }

.s-insights__art-time {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-600);
  margin-left: 12px;
}
.s-insights__art-time::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-300);
}

.s-insights__art-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: normal;
  color: var(--ink-900);
  margin-top: 11px;
}

.s-insights__art-body {
  font-size: 13px;
  line-height: 20.7px;
  color: var(--ink-500);
  margin-top: 13px;
  margin-bottom: 25px;              /* floor under the rule; auto does the rest */
}

.s-insights__art-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.s-insights__art-date {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-500);
}

/* ---- reflow below the 1280 design frame -------------------------------- */
@media (max-width: 1024px) {
  .s-insights { padding-block: 44px 46px; }

  .s-insights__head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .s-insights__lede { max-width: none; }

  .s-insights__row { grid-template-columns: repeat(2, 1fr); }
  .s-insights__res--wide { grid-column: span 2; }
}

@media (max-width: 640px) {
  .s-insights { --gutter: 24px; padding-block: 34px 38px; }

  .s-insights__title { font-size: 34px; }

  .s-insights__row { grid-template-columns: 1fr; }
  .s-insights__res--wide { grid-column: span 1; }

  .s-insights__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 40px;
  }
  .s-insights__label--reading { margin-top: 40px; }

  .s-insights__res,
  .s-insights__art { padding: 20px; }

  .s-insights__res-top {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ===== philosophy ===== */
/* ===== philosophy — design y 8094–8876 (782px tall) ======================
   Measured band: the --surface-2 ground runs from the insights panel's
   bottom rule straight down to the top of the dark contact band, so this
   section is ~782px, not the 780 the section map lists.

   Heading block over a two-column layout: the photograph on the left
   (470 x 441, 20px radius, green wash that deepens toward the bottom)
   and a 2x2 grid of white cards on the right.

   Type measured off the crop — several roles run smaller than the system
   defaults: the section heading is 44px serif on a 48px (not 52.8px)
   baseline rhythm, the lede is 15/25 (not 18/1.6), the eyebrow 11.3px,
   card titles 19/600/-.027em (not 20/-.01em) and card copy 13.5/22.     */

.s-philosophy {
  /* the eyebrow is a muted brown, not --terracotta: the crop renders it
     around rgb(155 133 122) at full stroke — the same desaturated label
     colour the challenges section measured                              */
  --phil-eyebrow: #A08A79;
  /* icon tiles are --bg on white with a --line hairline; 10px radius sits
     between --radius-sm and --radius                                     */
  --phil-tile: 44px;
  --phil-tile-radius: 10px;

  background: var(--surface-2);
  padding-block: 52.9px 52px;
}

/* the gutters here are not symmetric: the content starts on the 52px
   gutter the neighbouring sections use and stops at x = 1226, so the right
   edge sits 54px in.  Content column 1174 wide. */
.s-philosophy__inner { padding-inline: 52px 54px; }

/* ---- heading block ---------------------------------------------------- */
.s-philosophy__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
}

.s-philosophy__eyebrow {
  display: block;
  font-size: 11.3px;          /* measured a shade over the 11px system eyebrow */
  line-height: 1;
  color: var(--phil-eyebrow);
}

.s-philosophy__title {
  margin-top: 10.5px;
  line-height: 48px;          /* measured baseline rhythm, not 1.2 */
}

.s-philosophy__lede {
  margin-top: 12.6px;
  font-size: 15px;            /* measured off the crop — not the 18px body */
  line-height: 25px;          /* measured baseline rhythm */
}

/* ---- two-column layout ------------------------------------------------- */
.s-philosophy__layout {
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);   /* 470 + 34 + 670 = 1174 */
  column-gap: 34px;
  align-items: stretch;
  margin-top: 56.65px;
}

/* ---- photograph -------------------------------------------------------- */
.s-philosophy__media {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.s-philosophy__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 50%;
}
/* the design washes the photograph in --green-900, deepening toward the
   lower edge — fitted against the reference: 19% / 43% / 82% */
.s-philosophy__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--green-900) 19%, transparent)   0%,
    color-mix(in srgb, var(--green-900) 43%, transparent)  50%,
    color-mix(in srgb, var(--green-900) 82%, transparent) 100%);
}

/* ---- card grid --------------------------------------------------------- */
.s-philosophy__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.s-philosophy__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 27px 28px;
  border-radius: var(--radius-lg);
}

.s-philosophy__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--phil-tile);
  height: var(--phil-tile);
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--phil-tile-radius);
  background: var(--bg);
  color: var(--ink-900);
}
.s-philosophy__icon { flex: none; }

/* the text block is pushed to the card's bottom edge: in a row where one
   card runs to three lines of copy, the shorter card's icon stays put and
   the gap below it grows */
.s-philosophy__card-text { margin-top: auto; }

.s-philosophy__card-title {
  font-size: 19px;            /* measured: 19px / -.027em, not 20 / -.01em */
  letter-spacing: -.027em;
  line-height: 1.35;
  margin-bottom: 7.2px;
}

.s-philosophy__card-body {
  font-size: 13.5px;
  line-height: 22px;
  color: var(--ink-600);
}

/* ---- reflow below the 1280 design frame -------------------------------- */
@media (max-width: 1024px) {
  .s-philosophy {
    padding-block: 48px 48px;
  }
  .s-philosophy__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    margin-top: 40px;
  }
  .s-philosophy__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .s-philosophy {
    padding-block: 36px 40px;
  }
  .s-philosophy__inner { padding-inline: 24px; }
  .s-philosophy__title {
    font-size: 34px;
    line-height: 38px;
  }
  .s-philosophy__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .s-philosophy__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-philosophy__layout { grid-template-columns: clamp(300px, 36vw, 470px) minmax(0, 1fr); }
}

/* ===== contact ===== */
/* ===== contact — design y 8870–9562 (681px of dark band) ================= */

:root {
  /* two white tints measured off the crop that sit between the existing
     --on-dark-* steps: the lede is brighter than --on-dark-muted (.72),
     the confidentiality line sits just above --on-dark-faint (.54). */
  --on-dark-soft: rgba(255, 255, 255, .88);
  --on-dark-dim:  rgba(255, 255, 255, .58);
}

.s-contact {
  background: var(--green-900);
  color: var(--on-dark);
  padding-block: 45px 35px;
}

.s-contact .s-contact__inner {
  padding-inline: 52px;            /* this section sits on a 52px gutter */
  display: grid;
  grid-template-columns: 1fr 665px;
  column-gap: 32px;
  align-items: start;
}

/* ---- left column ------------------------------------------------- */
.s-contact__tag {
  padding: 9px 14px;
  gap: 0;
  /* 10% white wash; the outline is only ~6 levels brighter than the wash
     in the crop, so it is a lime hairline rather than a full --line-dark */
  background: rgba(255, 255, 255, .10);
  border-color: rgba(214, 236, 109, .09);
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .13em;
}
.s-contact__tag::before { display: none; }

.s-contact__title {
  margin-top: 22.5px;
  font-size: 53px;
  line-height: 56.5px;
  letter-spacing: normal;
  color: var(--on-dark);
}

.s-contact__lede {
  margin-top: 19px;
  max-width: 479px;
  line-height: 29px;
  color: var(--on-dark-soft);
}

/* ---- direct contact channels panel -------------------------------- */
.s-contact__channels {
  width: 463px;
  margin-top: 20px;
  padding: 39px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--green-800);
}

.s-contact__channels-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--on-dark);
}

.s-contact__channel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 7px;
}

.s-contact__channel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -.01em;
}
.s-contact__channel-icon {
  flex: none;
  color: var(--lime);
}
.s-contact__channel-label { color: var(--on-dark-faint); }
.s-contact__channel-value { color: var(--on-dark-muted); }
.s-contact__channel-link {
  color: var(--lime);
  transition: opacity .18s ease;
}
.s-contact__channel-link:hover { opacity: .78; }

.s-contact__confidential {
  margin-top: 25px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-dim);
}

/* ---- form card ----------------------------------------------------- */
.s-contact__card {
  margin-top: 1.5px;
  padding: 45px 40px 41px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--ink-600);
}

.s-contact__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.s-contact__card-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.s-contact__card-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
}
.s-contact__send-mark {
  flex: none;
  margin-top: 4px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-900);
}

.s-contact__form {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin-top: 22px;
  padding-top: 27px;
  border-top: 1px solid var(--line);
}

.s-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.s-contact__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ink-900);
}

.s-contact__input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-900);
  transition: border-color .18s ease, background-color .18s ease;
}
.s-contact__input::placeholder { color: var(--ink-400); opacity: 1; }
.s-contact__input:focus-visible {
  outline: none;
  border-color: rgba(31, 37, 35, .3);
  background: var(--surface);
}

.s-contact__textarea {
  height: auto;
  padding: 12px 16px;
  resize: none;
}

.s-contact__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 9px;
}
.s-contact__response {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ink-500);
}
.s-contact__submit {
  height: 50px;
  padding-inline: 32px;
}

/* ---- reflow below the 1280 design frame ---------------------------- */
@media (max-width: 1024px) {
  .s-contact { padding-block: 56px; }
  .s-contact .s-contact__inner {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .s-contact__title { font-size: 44px; line-height: 1.1; }
  .s-contact__lede,
  .s-contact__channels { max-width: none; width: auto; }
}

@media (max-width: 640px) {
  .s-contact { padding-block: 40px; }
  .s-contact .s-contact__inner { padding-inline: 24px; }
  .s-contact__title { font-size: 34px; }
  .s-contact__card { padding: 24px; }
  .s-contact__channels { padding: 28px 20px 20px; }
  .s-contact__row { grid-template-columns: 1fr; }
  .s-contact__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .s-contact__submit { width: 100%; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-contact .s-contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .s-contact__channels { width: auto; max-width: 463px; }
  .s-contact__card { width: auto; max-width: none; }
  /* 1fr floors at the inputs' min-content, which is what pushed the card wide */
  .s-contact__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .s-contact__field,
  .s-contact__input,
  .s-contact__textarea { min-width: 0; }
}

/* ===== footer ===== */
/* ===== footer — design y 10122–10500 (378px tall) ================== */

.s-footer {
  /* the muted footer grey measures half-way between --ink-600 and --ink-400 */
  --ink-500: #676964;

  background: var(--bg);
  padding-block: 62px 49px;
}

.s-footer__grid {
  display: grid;
  grid-template-columns: 490px 294px 1fr;   /* columns start at x = 72 / 562 / 856 */
  align-items: start;
}

/* ---- brand column ----------------------------------------------- */
.s-footer__logo {
  width: 163px;          /* 305×60 asset scaled 0.534 → ink 154×26 */
  height: auto;
}

.s-footer__name {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.004em;
  color: var(--ink-900);
}

.s-footer__blurb {
  margin-top: 14px;
  max-width: 352px;
  font-size: 13px;
  line-height: 21px;
  color: var(--ink-500);
}

/* ---- link columns ------------------------------------------------ */
.s-footer__coltitle {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--ink-900);
}

.s-footer__list {
  display: grid;
  row-gap: 9px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
}

.s-footer__link {
  color: inherit;
  transition: color .18s ease;
}
.s-footer__link:hover { color: var(--ink-900); }

/* ---- bottom bar -------------------------------------------------- */
.s-footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 21px;
  padding-top: 33px;
  border-top: 1px solid var(--line);
}

.s-footer__copyright {
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-500);
}

.s-footer__legal {
  display: flex;
  gap: 24px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-500);
}
.s-footer__legal-link {
  transition: color .18s ease;
}
.s-footer__legal-link:hover { color: var(--ink-900); }

/* ---- reflow ------------------------------------------------------ */
@media (max-width: 1024px) {
  .s-footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 48px;
  }
  .s-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .s-footer { padding-block: 48px 40px; }
  .s-footer__grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .s-footer__brand { grid-column: auto; }
  .s-footer__bottom {
    flex-direction: column;
    gap: 16px;
  }
  .s-footer__legal {
    flex-wrap: wrap;
    gap: 12px 20px;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .s-footer { --gutter-hero: 40px; }
  .s-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
}