@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Mulish:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Urbanist:wght@400;500&display=swap');

/* @figma-tokens:start */
/* Generated by tools/figma/tokens-css.mjs from Website.fig — do not edit by hand. */
:root {
  /* Primitives */
  --color-white: #ffffff;
  --color-neutral-darkest: #07090b;
  --color-nile-blue: #183856;
  --opacity-neutral-darkest-15: #07090b26;
  --opacity-white-20: #ffffff33;
  --color-astral: #3971ad;
  --color-cornflower-lightest: #f3f6fc;
  --opacity-white-60: #ffffff99;
  --color-astral-light: #749bc5;
  --color-astral-darker: #162d45;
  --opacity-neutral-darkest-20: #07090b33;
  --opacity-white-50: #ffffff80;
  --opacity-neutral-darkest-40: #07090b66;
  --color-nile-blue-dark: #132c44;
  --color-nile-blue-light: #5d7388;
  --color-neutral: #838485;
  --color-nile-blue-lightest: #e7ebee;
  --color-cornflower-light: #abc4ea;

  /* primitives */
  --color-neutral-900: #000000;
  --color-neutral-500: #6b7280;
  --color-neutral-300: #d1d5db;
  --color-neutral-100: #f3f4f6;
  --color-neutral-800: #1f2937;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f9fafb;
  --color-neutral-700: #374151;
  --neutral-neutral-darkest-50: #07090b80;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-200: #e5e7eb;
  --color-neutral-600: #4b5563;
  --color-neutral-400: #9ca3af;
  --color-brand-primary: #183856;
  --color-brand-secondary: #88ace1;
  --color-brand-accent: #3971ad;
  --color-success-500: #16a34a;
  --color-success-600: #15803d;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-error-500: #dc2626;
  --color-error-600: #b91c1c;
  --color-info-500: #3971ad;
  --color-info-600: #183856;
  --space-none: 0px;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 54px;
  --space-5xl: 56px;
  --space-6xl: 64px;
  --space-7xl: 72px;
  --space-8xl: 84px;
  --space-9xl: 92px;
  --space-10xl: 124px;
  --space-11xl: 224px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-4xl: 40px;
  --radius-5xl: 48px;
  --radius-full: 999px;
  --opacity-transparent: 0;
  --opacity-low: 32;
  --opacity-medium: 65;
  --opacity-high: 85;
  --opacity-solid: 100;
  --border-width-none: 0px;
  --border-width-sm: 0.5px;
  --border-width-md: 1px;
  --border-width-lg: 85px;
  --border-width-solid: 100px;
  --typography-font-family-serif: Georgia;
  --typography-font-family-body: Inter;
  --typography-size-xs: 12px;
  --typography-size-sm: 14px;
  --typography-size-lg: 32px;
  --typography-size-base: 16px;
  --typography-size-md: 24px;
  --typography-size-xl: 36px;
  --typography-size-2xl: 42px;
  --typography-size-3xl: 48px;
  --typography-size-4xl: 54px;
  --typography-size-5xl: 56px;
  --typography-size-6xl: 64px;
  --typography-size-7xl: 124px;
  --typography-weight-regular: 400;
  --typography-weight-medium: 500;
  --typography-weight-bold: 700;
  --typography-line-height-tight: 1.4px;
  --typography-line-height-normal: 1.6px;
  --typography-line-height-relaxed: 1.8px;
  --typography-font-family-display: Mulish;
  --color-brand-dark: #0a1624;
  --color-brand-dark-soft: #0d1b2a;
  --color-brand-tint: #edeef9;

  /* UI Styles */
  --radius-large: 8px;
  --radius-medium: 8px;
  --stroke-border-width: 1px;
  --stroke-divider-width: 1px;
  --radius-small: 8px;

  /* Typography */
  --text-sizes-text-medium: 20px;
  --text-sizes-text-regular: 18px;
  --text-sizes-text-small: 16px;
  --text-sizes-text-tiny: 12px;
  --text-sizes-text-large: 26px;

  /* Spacing & Sizing */
  --section-padding-padding-section-large: 112px;
  --container-container-large: 1280px;
  --max-width-max-width-large: 768px;
  --section-padding-padding-section-medium: 80px;
  --page-padding-padding-global: 224px;
  --section-padding-padding-section-small: 48px;

  /* Color Schemes */
  --color-scheme-1-text: [object Object];
  --color-scheme-2-text: [object Object];
  --color-scheme-5-background: [object Object];
  --color-scheme-5-text: [object Object];
  --color-scheme-3-background: [object Object];
  --color-scheme-3-text: [object Object];
  --color-scheme-3-foreground: [object Object];
  --color-scheme-3-border: [object Object];
  --color-scheme-6-background: [object Object];
  --color-scheme-6-text: [object Object];
  --color-scheme-6-border: [object Object];
  --color-scheme-5-border: [object Object];
  --color-scheme-3-accent: [object Object];
  --color-scheme-4-accent: [object Object];

  /* semantic */
  --bg-primary: var(--color-brand-primary);
  --bg-secondary: var(--color-neutral-50);
  --bg-inverse: var(--color-neutral-900);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-inverse: var(--color-neutral-0);
  --text-brand-primary: var(--color-brand-primary);
  --text-muted: var(--color-neutral-500);
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-500);
  --border-primary: var(--color-brand-primary);
  --surface-primary: var(--color-neutral-0);
  --surface-secondary: var(--color-neutral-50);
  --surface-brand: var(--color-brand-primary);
  --text-brand-secondary: var(--color-brand-secondary);
  --text-brand-accent: var(--color-brand-accent);
  --surface-dark: var(--color-brand-dark);
  --border-inverse: var(--color-neutral-0);
  --surface-accent: var(--color-brand-accent);
  --surface-tertiary: var(--color-neutral-100);
  --surface-brand-secondary: var(--color-brand-secondary);
  --surface-muted: var(--color-neutral-200);
  --surface-dark-soft: var(--color-brand-dark-soft);
  --surface-subtle: var(--color-brand-tint);

  /* components */
  --button-primary-bg: var(--bg-primary);
  --button-primary-text: var(--text-inverse);
  --button-primary-border: var(--border-primary);
  --button-primary-hoverbg: var(--color-brand-accent);
  --button-secondary-bg: var(--bg-secondary);
  --button-secondary-text: var(--text-inverse);
  --button-secondary-border: var(--color-brand-secondary);
  --button-secondary-bg-hover: var(--color-brand-accent);
  --card-primary-bg: var(--bg-primary);
  --card-primary-text: var(--text-inverse);
  --card-primary-border: var(--border-default);
  --card-secondary-bg: var(--bg-secondary);
  --card-secondary-text: var(--text-primary);
  --card-secondary-border: var(--color-brand-secondary);
  --card-secondary-hoverbg: var(--color-brand-accent);
  --card-primary-radius: var(--radius-sm);
  --card-primary-padding: var(--space-lg);
  --button-secondary-text-hover: var(--text-brand-secondary);
  --button-primary-text-hover: var(--text-brand-primary);

  /* Color Schemes (2) */
  --color-scheme-5-accent: [object Object];
  --color-scheme-6-accent: [object Object];
  --global-saturated: #6a9de9;
}

/* The Typography and Spacing & Sizing collections carry a Mobile mode.
   Only these 9 values differ; everything else is mode-agnostic. */
@media (max-width: 640px) {
  :root {
    --text-sizes-text-medium: 16px;
    --text-sizes-text-regular: 14px;
    --text-sizes-text-small: 12px;
    --text-sizes-text-tiny: 10px;
    --text-sizes-text-large: 18px;
    --section-padding-padding-section-large: 64px;
    --section-padding-padding-section-medium: 48px;
    --page-padding-padding-global: 20px;
    --section-padding-padding-section-small: 32px;
  }
}
/* @figma-tokens:end */

/* ==========================================================================
   ICME — design system
   Transcribed from Figma file RgBhbrrs6D7YBffaiqmkPh, page "UI V1.4".
   Reference viewport 1920: gutter 124, content 1672, inner 1608.
   ========================================================================== */

/* The short names below are what the rules in this file use. Each one now points
   at the generated Figma token above, so values come from the file rather than
   from transcription. Only names with no token of their own hold a literal. */
:root {
  /* palette */
  --navy: var(--color-brand-primary);       /* #183856 */
  --ink: var(--surface-dark);               /* #0a1624 */
  --footer: var(--surface-dark-soft);       /* #0d1b2a */
  --accent: var(--color-brand-accent);      /* #3971ad */
  --astral-light: var(--color-astral-light);
  --sky: var(--color-brand-secondary);      /* #88ace1 */
  --cta-end: #347abc;                       /* gradient stop, not a variable in the file */
  --page: var(--surface-subtle);            /* #edeef9 */
  --surface-3: var(--surface-tertiary);
  --card-border: var(--card-primary-border);
  --muted: var(--text-muted);               /* #6b7280 — was #5a6b7b by hand */
  --scheme-text: var(--color-neutral-darkest);

  /* radii — the file's radius scale; --r-md was 12.5 by hand, the token is 12 */
  --r-xs: var(--radius-xs);   --r-sm: var(--radius-sm);  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);   --r-xl: var(--radius-xl);  --r-2xl: var(--radius-2xl);
  --r-3xl: var(--radius-3xl); --r-4xl: var(--radius-4xl); --r-5xl: var(--radius-5xl);
  --r-full: var(--radius-full);

  /* spacing — full scale; xs/md/2xl/4xl/5xl/7xl/9xl had no equivalent before */
  --s-3xs: var(--space-3xs); --s-2xs: var(--space-2xs); --s-xs: var(--space-xs);
  --s-sm: var(--space-sm);   --s-md: var(--space-md);   --s-lg: var(--space-lg);
  --s-xl: var(--space-xl);   --s-2xl: var(--space-2xl); --s-3xl: var(--space-3xl);
  --s-4xl: var(--space-4xl); --s-5xl: var(--space-5xl); --s-6xl: var(--space-6xl);
  --s-7xl: var(--space-7xl); --s-8xl: var(--space-8xl); --s-9xl: var(--space-9xl);
  --s-10xl: var(--space-10xl); --s-11xl: var(--space-11xl);

  /* layout — the three gutters the artboards actually use, each keyed to 1920 */
  --gutter: clamp(20px, 6.4583vw, 124px);        /* 124/1920 -> 1672 track */
  --gutter-flush: clamp(20px, 6.6667vw, 128px);  /* 128/1920 -> 1664 track */
  --gutter-wide: clamp(16px, 5vw, 96px);         /*  96/1920 -> 1728 track */
  --pad: clamp(16px, 1.667vw, 32px);

  /* type ramp keyed to the 1920 frame */
  --t-display: clamp(34px, 3.3333vw, 64px);   /* 64 @1920 */
  --t-hero: clamp(46px, 6.4846vw, 124.505px); /* 124.505 @1920 */
  --t-card: 24px;
  --t-body: 16px;
  --t-lead: 18px;
  --t-eyebrow: 11.2px;

  --shadow-panel: 0 99px 64px -77px rgba(57, 113, 173, .75);

  /* header block height: 32 padding + 88 pill = 120 at 1920 (nav sits at y=32,
     h=88 in the artboards). Interior heroes run full-bleed underneath it. */
  --header-h: 120px;

  /* motion — read off the 973 prototype interactions in design/interactions.json.
     Easing is overwhelmingly INOUT_CUBIC (828 of 960 transitions); durations
     cluster at 300ms and 500ms for hover, 200ms for press. Nothing here is a
     taste call — the previous .18s/.2s/.25s values were invented. */
  /* These are the curves the .fig actually carries, not the Penner cubics that
     share the names: every INOUT_CUBIC interaction in design/interactions.json
     records the bezier .42,0,.58,1 (×850), OUT_CUBIC 0,0,.58,1, IN_CUBIC
     .42,0,1,1. The Penner easeInOutCubic that was here (.645,.045,.355,1)
     idles at both ends and lunges through the middle — that snap is what made
     the services accordion read as less smooth than the prototype. */
  --ease: cubic-bezier(.42, 0, .58, 1);            /* INOUT_CUBIC  ×850 */
  --ease-out: cubic-bezier(0, 0, .58, 1);          /* OUT_CUBIC    ×49  */
  --ease-in: cubic-bezier(.42, 0, 1, 1);           /* IN_CUBIC     ×10  */
  --dur-fast: 200ms;                               /* ON_CLICK     ×39  */
  --dur: 300ms;                                    /* ON_HOVER     ×335 */
  --dur-slow: 500ms;                               /* ON_HOVER     ×358 */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--navy);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- layout ------------------------------------------------------ */

/* Container tracks, counted off the artboards rather than assumed. The design
   uses five, not one:
     124/1672  33 sections   the main track            .wrap
     128/1664  12 sections   disciplines, values, …    .wrap--flush
      96/1728   3 sections   clients band              .wrap--wide
                             (2 built — the board's auto-loop logo strip
                              under the grid was dropped on request)
       0/1920  10 sections   footer, offices strip     (no wrapper)
     125/1670  10 sections   the nav pill              .header__pill
   Rendering a 1664@128 section on the 1608@156 track is what put 31 desktop
   elements 28px too far right. */
.wrap { width: min(1672px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--flush { width: min(1664px, 100% - 2 * var(--gutter-flush)); margin-inline: auto; }
.wrap--wide { width: min(1728px, 100% - 2 * var(--gutter-wide)); margin-inline: auto; }
.inner { padding-inline: var(--pad); }           /* 1672 -> 1608 */

/* At 402 the artboards put 38 of 44 sections at x=0 spanning the full width, with
   the inset carried as the section's own padding: pad=[*,12,*,12], so content
   lands at x=12 and nested lists at x=24.
   Note this is 12, NOT the Mobile-mode `padding-global` of 20 — that token is not
   what these sections use, which is why this had to be measured rather than
   inferred from the token set. */
@media (max-width: 640px) {
  .wrap, .wrap--flush, .wrap--wide { width: 100%; padding-inline: 12px; }
  .inner { padding-inline: 0; }        /* the section padding above already supplies it */
  /* insights is the one page whose 402 sections sit at x=10, w=382 */
  .main--insights .wrap,
  .main--insights .wrap--flush { padding-inline: 10px; }
  /* the 402 board runs the article grid straight after the feature — the divider
     above it is a desktop-only rule */
  .main--insights .rule { display: none; }
  .main--insights .ihero__inner { padding-inline: 22px; }
}
/* the Figma frames sit 84px apart with no extra section padding */
/* --sec-gap is the rhythm between top-level sections. Each 402 artboard uses one
   value for the whole page but the pages disagree (10 · 24 · 48 · 64), so the
   four that are not 24 set it inline on <main>. Desktop is uniform at 84. */
.main { display: flex; flex-direction: column; gap: var(--s-8xl); padding-bottom: var(--s-8xl); }
.main > .hero { margin-top: 4px; }
.stack { display: flex; flex-direction: column; }
.gap-64 { gap: var(--s-6xl); }
.gap-48 { gap: var(--s-3xl); }
.gap-32 { gap: var(--s-xl); }
.gap-20 { gap: var(--s-md); }   /* space/md — the form field rhythm */
.gap-36 { gap: 36px; }          /* insights' feature head, both widths */
.gap-16 { gap: var(--s-sm); }

/* ---------- display headings -------------------------------------------- */
/* Mulish 400 / 64 / 1.2, capitalize; accent clause italic #3971ad. */

.dhead {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.1;
  letter-spacing: -1.79px;      /* fixed px at every size; see FIGMA-PARITY on the -0.86 pages */
  text-transform: capitalize;
  color: var(--navy);
}
.dhead em { font-style: italic; color: var(--accent); }
.dhead i { font-style: italic; }

.dhead--inverse { color: #fff; }
.dhead--inverse em { color: var(--accent); }

/* Tracking in the file is a fixed px value per heading, not an em ratio — the
   same string keeps its spacing when the board drops from 64 to 27. Two values
   are in use: -1.79 for most, -0.86 on the four headings marked --loose. */
.dhead--loose { letter-spacing: -.86px; }

/* the one Mulish display heading on a light ground (home services, 64/1.2, ls 0).
   The offices strip below is the other; every remaining .dhead is Georgia. */
.dhead--sans {
  font-family: Mulish, system-ui, sans-serif;
  line-height: 1.2;
  letter-spacing: 0;
}

/* offices strip: single line, both clauses upright, accent = sky */
.dhead--flat {
  font-family: Mulish, system-ui, sans-serif;
  text-transform: none;
  line-height: 1.1;
  letter-spacing: -1.49px;
  color: #fff;
}
.dhead--flat em { font-style: normal; color: var(--sky); }

/* Footer CTA: white + sky italic. Mulish, not Georgia — the footer is an
   INSTANCE in the .fig so extract.mjs never decoded its children and the
   Georgia sweep swept it up with the rest. Measured off the reference render:
   "Build A Healthier Future." is 712px of ink and the two lines sit 76 apart,
   which is Mulish 400 / 64 / 1.2 at tracking 0 (Mulish 64 advances 720.9,
   ~713 of ink). Georgia at the same size plus -.0185em wrapped it to 3 lines. */
.dhead--cta {
  font-family: Mulish, system-ui, sans-serif;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
}
.dhead--cta em { color: var(--sky); }

.eyebrow {
  font-size: var(--t-eyebrow);
  line-height: 1.5;
  letter-spacing: 2.464px;
  text-transform: uppercase;
}

/* section header: heading left, button right (px 32 / py 48, gap 48) */
/* The board nests these three deep: section 124 -> header frame 156 (this
   padding) -> heading 188, with the button's right edge 32 in from the frame. */
.shead {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3xl);
  padding: var(--s-3xl) var(--pad);
}
.shead .dhead { flex: 1 1 0; min-width: 0; margin-left: 32px; }

/* two headings the file indents 32 from their own section (156 off a 124 track) */
.dhead--inset { margin-left: 32px; }

/* ---------- buttons ------------------------------------------------------ */
/* label pill (px16 py14, r-full) + 8px gap + 56px dot */

.btn {
  display: inline-flex;
  align-items: stretch;
  /* label and dot butt together — every `button` frame in the .fig is gap 0,
     and the 8px here made each button 8 too wide (hero 251.6 vs 243). */
  gap: 0;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.btn__label {
  display: flex;
  align-items: center;
  padding: 14px var(--s-sm);
  border-radius: var(--r-full);
  font-size: var(--t-body);
  line-height: 1.4;
  text-transform: capitalize;
  white-space: nowrap;
}
.btn__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.btn__dot svg, .btn__dot img { width: 24px; height: 24px; }

.btn--primary .btn__label,
.btn--primary .btn__dot { background: var(--navy); color: #fff; }

.btn--sky .btn__label,
.btn--sky .btn__dot { background: var(--sky); color: var(--navy); }

.btn--inverse .btn__label,
.btn--inverse .btn__dot { background: transparent; color: #fff; }

.btn--primary:hover .btn__label, .btn--primary:hover .btn__dot { background: var(--accent); }
.btn--sky:hover .btn__label, .btn--sky:hover .btn__dot { background: #a4c0ea; }
.btn--inverse:hover .btn__label, .btn--inverse:hover .btn__dot { background: rgba(255, 255, 255, .12); }
.btn { transition: opacity var(--dur) var(--ease); }
.btn__label, .btn__dot { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }

/* link style: text + boxed arrow, 2px underline; pl16 pr8 */
.btnlink {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: var(--s-sm);
  padding-right: var(--s-2xs);
  border-radius: var(--r-full);
}
.btnlink__row { display: flex; align-items: center; gap: 10px; }
.btnlink__row > span { font-size: var(--t-body); line-height: 1.4; text-transform: capitalize; white-space: nowrap; }
.btnlink__icon { display: flex; align-items: center; justify-content: center; padding: var(--s-2xs); border-radius: var(--r-xs); }
.btnlink__icon svg { width: 24px; height: 24px; }
.btnlink::after { content: ""; display: block; width: 100%; height: 2px; background: currentColor; }
.btnlink--inverse { color: #fff; }
.btnlink { color: var(--navy); }
.btnlink:hover .btnlink__icon { transform: translateX(3px); }
.btnlink__icon { transition: transform var(--dur) var(--ease); }

/* ---------- nav ---------------------------------------------------------- */
/* glass pill 1670x88 inside the 1920 frame: px 32, py 16 */

.header { position: sticky; top: 0; z-index: 60; padding-top: var(--s-xl); }

/* On interior pages the artboards place the hero at y=0, h=860 with the nav
   OVERLAYING it (nav y=32) — not stacked above it. Leaving the sticky header in
   flow pushed every interior page down by the full header height, which is what
   put the hero title ~136px below the design on all nine of them. */
.main > .ihero:first-child { margin-top: calc(-1 * var(--header-h)); }
.header__pill {
  width: min(1670px, 100% - 2 * clamp(16px, 6.51vw, 125px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-sm) var(--s-xl);
  /* inset ring, not a border: a .5px border rounds up to 1px per side and made
     the pill 89.6 tall against the artboard's 88 (and 60.5 against 59.49 at 402),
     which also left --header-h short by the same amount on interior pages. */
  box-shadow: inset 0 0 0 .5px var(--card-border);
  border-radius: var(--r-full);
  background: rgba(245, 246, 254, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav__logo { height: 56px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__links a {
  font-size: 18px;
  font-weight: 500;
  line-height: 19.68px;
  color: var(--navy);
  padding-top: 1.6px;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover, .nav__links a.is-active { border-bottom-color: var(--navy); }
.nav__burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; }
.nav__burger svg { width: 24px; height: 24px; }

/* ---------- hero --------------------------------------------------------- */
/* card 1664x816 inside the 1672 frame (4px inset each side), r 16 */

.hero { padding-inline: 4px; }
.hero__card {
  position: relative;
  height: 816px;
  border-radius: var(--r-lg);
  background: var(--ink);
  overflow: hidden;
}
/* heroSlides: 1735.043 x 1116.959 at (-35.214, -151) inside the 1664x816 card */
.hero__media {
  position: absolute;
  left: -2.116%;
  top: -18.505%;
  width: 104.269%;
  height: 136.882%;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* the overlay's gradient ellipse is ~11784px wide vs 1222px tall, so it reads
   as a vertical wash running y -66 -> 1156 in image space (-5.9% -> 103.5%) */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Decorative wash only. Without this it is the topmost hit target over the whole
     hero image, and a pseudo-element hit-tests as its originating element — so the
     edit overlay resolved every hero hover to .hero__media, which carries no marker,
     and no hero image on any page could be clicked to replace. */
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4, 29, 54, 0) -5.9%,
    rgba(4, 29, 54, .5) 48.8%,
    rgba(7, 43, 82, .75) 76.2%,
    rgba(9, 57, 109, 1) 103.5%);
}
.hero__headline {
  position: absolute;
  left: 92px;
  top: 76px;
  width: min(638.592px, 60%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21.086px;
  z-index: 2;
}
.hero__title {
  font-family: Mulish, system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.2;
  color: #fff;
  text-transform: capitalize;
  white-space: nowrap;
}
.hero__title em { display: block; font-style: italic; }
.hero__title span { display: block; }
.hero__lead {
  width: 445.81px;
  max-width: 100%;
  font-size: 16.065px;
  line-height: 1.4;
  color: #fff;
  text-transform: capitalize;
}

/* featured-work overlay: bottom 223.22 / right 220.56 / w 351.828 */
.hero__featured {
  position: absolute;
  right: 220.56px;
  bottom: 223.22px;
  width: 351.828px;
  display: flex;
  flex-direction: column;
  gap: 16.065px;
  color: #fff;
  z-index: 2;
}
.hero__featured .eyebrow { line-height: 16.868px; letter-spacing: 2.464px; font-size: 11.25px; }
.hero__bars { display: flex; align-items: center; gap: 4.016px; margin-top: var(--s-3xs); }
.hero__bars i { flex: 1 1 0; height: 4.016px; background: #fff; }
.hero__bars i.is-on { background: #fff; }
.hero__fname {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 24.1px;
  line-height: 1.2;
}
.hero__fmeta { display: flex; align-items: center; gap: 12.049px; font-size: 12.53px; line-height: 18.796px; }
.hero__fmeta .sep { opacity: .4; }
.hero__fmeta .cat { letter-spacing: 1.4976px; }

/* ---------- services accordion ------------------------------------------ */
/* 1608 = open panel + 3 x 180.33 collapsed + 3 x 16 gap; h 600, r 32 */

.services { display: flex; gap: var(--s-sm); align-items: stretch; }
.service {
  position: relative;
  display: flex;
  height: 600px;
  border-radius: var(--r-3xl);
  overflow: hidden;
  cursor: pointer;
  /* The open panel is grown into, not resized: `flex-basis: auto` and
     `max-width: none` are both non-interpolatable, so the old
     180.33px -> auto/none pair snapped to full width in a single frame and no
     amount of duration showed. flex-grow is a plain <number> and does animate;
     0 -> 1 lands the panel on 1019.01 (1608 - 3x180.33 - 3x16), the artboard's
     open width, without naming it. */
  flex: 0 0 180.33px;
  transition: flex-grow var(--dur-slow) var(--ease), min-height var(--dur-slow) var(--ease);
}
.service.is-open { flex-grow: 1; }
.service__bg { position: absolute; inset: 0; }
.service__bg img { width: 100%; height: 100%; object-fit: cover; }
.service__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--navy), var(--accent));
  mix-blend-mode: color;
}
.service__body {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2xs);
  padding: var(--s-sm);
  color: #fff;
}
.service__title {
  font-family: Urbanist, system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--t-card);
  line-height: 28.8px;
  width: 100%;
}
.service__row { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
.service.is-open .service__row { flex: 1 1 0; }
.service.is-open .service__title--collapsed { display: none; }
.service:not(.is-open) .service__card { display: none; }
.service:not(.is-open) .service__row { justify-content: flex-end; }
.service__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--ink);
  font-family: Urbanist, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 18.4px;
  margin-left: var(--s-sm);
  flex-shrink: 0;
}
.service__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: 520px;
  padding: var(--s-3xl);
  border-radius: var(--r-sm);
  background: rgba(57, 113, 173, .15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.service__card p {
  font-family: Urbanist, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 24px;
  padding-top: var(--s-sm);
}
.service__card .btn { margin-top: var(--s-lg); }

/* ---------- work cards --------------------------------------------------- */

.works { display: flex; flex-direction: column; gap: var(--s-6xl); }
.workrow { display: flex; gap: var(--s-xl); }
.workcard { display: flex; flex-direction: column; gap: var(--s-sm); min-width: 0; }
.workcard__media {
  position: relative;
  height: 465px;
  border-radius: var(--r-3xl);
  background: var(--ink);
  overflow: hidden;
}
.workcard__media img { width: 100%; height: 100%; object-fit: cover; }
.workcard__badge {
  position: absolute;
  right: 25px;
  bottom: 21.2px;
  display: flex;
  align-items: center;
  height: 24.8px;
  padding-inline: 12px;
  border-radius: var(--r-full);
  background: var(--navy);
  color: #fff;
  font-size: 11.2px;
  line-height: 16.8px;
  letter-spacing: 2.464px;
  text-transform: uppercase;
  white-space: nowrap;
}
.workcard__logo {
  position: absolute;
  left: var(--s-sm);
  top: var(--s-sm);
  width: 120.556px;
  height: 120.556px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .65);
  overflow: hidden;
}
.workcard__logo img { width: 60%; height: 34.755px; object-fit: contain; }
.workcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--navy);
  text-transform: capitalize;
}
.workcard__meta .push { flex: 1 1 auto; min-width: max-content; display: flex; justify-content: flex-end; }

/* ---------- whyICME: dot grid + triangle -------------------------------- */
/* 2px dots on a 12 x 12.0625 grid, panel 1608x790 */

.whypanel {
  position: relative;
  padding: 130.5px 80.5px;
}
.whypanel__grid {
  position: absolute;
  inset: var(--s-3xl) var(--pad);
  background-image: radial-gradient(circle at 1px 1px, rgba(24, 56, 86, .22) 1px, transparent 1.5px);
  background-size: 12px 12.0625px;
  pointer-events: none;
}
.triangle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3xl);
}
.triangle__copy { width: 771.4px; max-width: 100%; }
.triangle__body {
  margin-top: 36px;
  width: 456.904px;
  max-width: 100%;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--navy);   /* design paints body copy navy; text/muted is used once in the whole file */
}
.triangle__copy .btn { margin-top: var(--s-lg); }
.triangle__fig { position: relative; width: 510px; height: 430px; flex-shrink: 0; }
.triangle__fig > img { width: 100%; height: 100%; }
/* label + logo coordinates measured from the exported 510x430 vector */
.triangle__fig b {
  position: absolute;
  font-family: Mulish, system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-card);
  line-height: 1;
  color: var(--scheme-text);
  white-space: nowrap;
}
.triangle__fig .t-med { left: 17.96%; top: 77.67%; }
.triangle__fig .t-fin { left: 40.18%; top: 30.37%; }
.triangle__fig .t-tec { left: 63.06%; top: 77.67%; }
.triangle__fig .t-logo {
  position: absolute;
  left: 36.81%;
  top: 61.74%;
  width: 26.27%;
  height: 9.30%;
  object-fit: contain;
}

/* ---------- clients ------------------------------------------------------ */

.clients {
  display: flex;
  align-items: center;
  gap: var(--s-3xl);
  padding-block: var(--s-8xl);
  border-top: .8px solid var(--navy);
}
.clients__head { width: 654px; flex-shrink: 0; padding: var(--s-3xl) var(--pad); }
.clients__grid {
  /* `auto`, not 0: at <=1200 .clients turns into a column, and a 0 basis is a
     zero *height* there — the parent's auto height ignored the grid entirely
     (64px for 411px of logos) and `overflow: hidden` below cropped every row to
     a sliver. Basis auto sizes on whichever axis is the main one, so this holds
     in both directions; in the row the head is flex-shrink 0 at 654, so the
     grid still ends up with exactly the remainder. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 44px 56px;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.clients__row { display: flex; align-items: center; gap: 12px; }
.clients__cell {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  overflow: hidden;
}
.clients__cell img { width: 100%; height: 100%; object-fit: contain; }


/* ---------- stats panel -------------------------------------------------- */

.stats {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: var(--s-3xl) 0 var(--s-3xl) var(--s-10xl);
  border-radius: var(--r-2xl);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(148.993deg, #183856 1.0034%, var(--ink) 109.19%);
  box-shadow: var(--shadow-panel);
}
.stats__head { flex: 1 1 0; min-width: 0; padding-block: var(--s-3xl); }
.stats__grid { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 56px 40px;
  text-align: center;
}
.stats__n {
  font-family: Mulish, system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--t-display);
  line-height: 53.748px;
  letter-spacing: -2.1499px;
}
/* what-we-do sets the same numbers in Mulish Regular 53.75 where home uses
   Black 64 — leading (53.75) and tracking (-2.15) are shared, only the face and
   size differ. One .stats__n rule was serving both boards. */
.stats--plain .stats__n { font-weight: 400; font-size: 53.75px; }
.stats__l { font-size: 15px; font-weight: 500; line-height: 19.68px; }
.stats__s { font-size: 12.5px; line-height: 17.28px; }

/* ---------- offices strip ------------------------------------------------ */

.offices {
  background: var(--ink);
  padding-block: var(--s-8xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-6xl);
  align-items: center;
  color: #fff;
}
.offices__head {
  width: min(1728px, 100%);
  padding: var(--s-3xl) var(--s-xl);
}
.offices__headrow {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  border-bottom: .8px solid #fff;
  padding-bottom: var(--s-lg);
}
.offices__headrow .dhead { flex: 1 1 0; min-width: 0; }
.offices__rail { width: 100%; padding-inline: var(--s-xl); overflow: hidden; }
.offices__track {
  display: flex;
  gap: 32.2px;
  padding-left: 542px;
  height: 510px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.offices__track::-webkit-scrollbar { display: none; }
.office {
  position: relative;
  width: 382px;
  height: 510px;
  flex-shrink: 0;
  border-radius: var(--r-3xl);
  overflow: hidden;
  scroll-snap-align: start;
}
.office img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.office::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 36, .7) 0%, rgba(0, 0, 0, 0) 50%);
}
.office__n { position: absolute; left: 19.8px; top: 20.1px; z-index: 2; font-size: 11.2px; line-height: 16.8px; letter-spacing: 2.464px; }
.office__cap { position: absolute; left: var(--s-lg); top: 418.61px; width: 334px; z-index: 2; display: flex; flex-direction: column; gap: 4.194px; }
.office__city { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 28.666px; line-height: 42.998px; }
.office__country { font-size: 13.6px; line-height: 20.4px; }

/* ---------- CTA band + footer ------------------------------------------- */

.cta {
  padding: 80px var(--s-11xl) 0;
  min-height: 339.663px;
  background: linear-gradient(161.522deg, #183856 1.0034%, var(--cta-end) 109.19%);
  border-radius: var(--r-3xl) var(--r-3xl) 0 0;
  color: #fff;
}
.cta__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3xl); }
/* 721 = the 720.9 advance of the longer clause; at 618.525 it wrapped. */
.cta__title { width: 721px; max-width: 100%; }
.cta__aside { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.cta__aside p {
  width: 433px;
  max-width: 100%;
  font-family: Mulish, system-ui, sans-serif;
  font-weight: 300;
  font-size: 15.2px;
  line-height: 25.84px;
}
.cta__btns { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; }
/* The CTA pair is the one place the file sets these labels upper — the render
   measures 154px of ink for "EMAIL US DIRECTLY", which is Inter 400 16 upper
   (156.8 advance); capitalize gave 127. */
.cta__btns .btn__label { text-transform: uppercase; }

.footer { background: var(--footer); color: #fff; padding-inline: var(--s-11xl); }
.footer__top {
  display: flex;
  /* stretch, so the .footcol--rule dividers run the full height of the block as
     they do in the render — flex-start ended them just under the link lists. */
  align-items: stretch;
  gap: var(--s-3xl);
  padding-block: var(--s-6xl);
  border-bottom: .8px solid #fff;
}
.footer__brand { width: 308px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s-lg); }
.footer__brand img.logo { width: 210px; height: 63px; object-fit: contain; }
.footer__blurb { font-family: Mulish, system-ui, sans-serif; font-weight: 300; font-size: 13.6px; line-height: 23.12px; }
.footer__social { display: flex; align-items: center; gap: 12px; }
.footer__social a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: .8px solid #fff; border-radius: var(--r-full);
}
.footer__social svg { width: 14px; height: 14px; }
.footer__cols {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-3xl);
  font-family: Mulish, system-ui, sans-serif;
}
/* The three columns only just fit at 1920. Between 1200 (where they wrap) and
   1500 (where the footer gutter shrinks) they overflowed by ~6px — invisible at
   the two design widths, which is why widening the regression sweep to 1280
   found it. Let them wrap and shrink instead of forcing the row. */
.footer__cols { flex-wrap: wrap; }
.footcol { display: flex; gap: var(--s-lg); padding-right: var(--s-xl); min-width: 0; }
.footcol--rule { border-right: 1px solid rgba(255, 255, 255, .32); }
.footcol h4 { font-size: 9.6px; font-weight: 400; line-height: 14.4px; letter-spacing: 2.112px; text-transform: uppercase; white-space: nowrap; }
.footcol__lists { display: flex; gap: var(--s-xl); }
.footcol__lists ul { display: flex; flex-direction: column; gap: var(--s-sm); }
/* On the li, not the a: max-width is ignored on a non-replaced inline box, so
   this never bound and the services items ran on one line — 179px for
   "Implementation & Supervision" against the render's 106 + 69 over two. 108
   is the only window that breaks all four after the ampersand (>=106 for
   "Implementation &", <110 for "Planning & Design"). */
.footcol--svc .footcol__lists li { max-width: 108px; }
.footcol--svc .footcol__lists a { white-space: normal; }
.footcol__lists a { font-size: 13.12px; line-height: 19.68px; white-space: nowrap; }
.footcol__lists a:hover { color: var(--sky); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding-block: var(--s-lg);
  font-family: Mulish, system-ui, sans-serif;
  font-size: 12px;
  line-height: 18px;
}
.footer__legal { display: flex; gap: 20px; }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1500px) {
  .offices__track { padding-left: var(--s-xl); }
  .cta { padding-inline: var(--gutter); }
  .footer { padding-inline: var(--gutter); }
  .stats { padding-left: var(--s-6xl); }
}

@media (max-width: 1200px) {
  .hero__card { height: 640px; }
  .hero__headline { left: var(--s-xl); top: var(--s-xl); width: min(638px, 72%); }
  .hero__title { white-space: normal; }
  .hero__featured { right: var(--s-xl); bottom: var(--s-xl); }
  .service { height: 520px; }
  .workcard__media { height: 380px; }
  .clients { flex-direction: column; align-items: stretch; }
  .clients__head { width: auto; }
  .clients__grid { padding: var(--s-xl); }
  .triangle { flex-direction: column; align-items: flex-start; }
  .stats { flex-direction: column; align-items: stretch; padding: var(--s-xl); }
  .stats__head { padding-block: var(--s-xl); }
  .footer__cols { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: calc(100% + 12px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-sm);
    padding: var(--s-lg);
    background: rgba(245, 246, 254, .97);
    border: .5px solid var(--card-border);
    border-radius: var(--r-2xl);
    backdrop-filter: blur(12px);
  }
  .header.is-open .nav__links { display: flex; }
  .header__pill { position: relative; }
  .nav__burger { display: flex; }
  .nav__logo { height: 40px; }
  .header__pill .btn { display: none; }

  .hero__card { height: 560px; }
  .hero__featured { display: none; }
  .hero__lead { width: 100%; }

  .services { flex-direction: column; }
  /* the desktop flex-basis is a *width*; once the rail is a column it would
     pin every panel to 180.33px tall, so hand the sizing back to min-height */
  .service, .service.is-open { flex: 0 0 auto; max-width: none; height: auto; min-height: 220px; }
  .service.is-open { min-height: 480px; }
  .service__card { max-width: none; padding: var(--s-lg); }

  .workrow { flex-direction: column; }
  .workcard__media { height: 260px; }
  .workcard__logo { width: 72px; height: 72px; }
  .workcard__logo img { height: 24px; }

  .triangle__fig { width: 100%; max-width: 510px; height: auto; aspect-ratio: 510 / 430; }
  .triangle__fig > img { width: 100%; height: 100%; }
  .triangle__fig b { font-size: 16px; }
  .triangle__fig .t-med { left: 17.5%; top: 60.6%; }
  .triangle__fig .t-fin { left: 50%; transform: translateX(-50%); top: 12%; }
  .triangle__fig .t-tec { left: 63%; top: 60.6%; }
  .triangle__fig .t-logo { width: 26%; height: auto; }

  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats__cell { padding: var(--s-lg) var(--s-sm); }

  .offices__track { height: 400px; }
  .office { width: 280px; height: 400px; }
  .office__cap { top: auto; bottom: var(--s-lg); width: calc(100% - 48px); }

  .cta { padding-top: var(--s-3xl); }
  .cta__row { flex-direction: column; align-items: flex-start; gap: var(--s-xl); }
  .footer__top { flex-direction: column; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legal { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .shead { flex-direction: column; }
  .clients__row { flex-wrap: wrap; }
  .clients__cell { flex: 0 0 calc(33.333% - 8px); }
  .stats__grid { grid-template-columns: 1fr; }
  .btn__dot { width: 48px; height: 48px; }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* ---------- interior hero (806:9950) — full-bleed 860, blurred bg --------- */

.ihero {
  position: relative;
  height: 860px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
}
.ihero__bg { position: absolute; inset: 0; }
.ihero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.06); }
/* Figma stacks a mix-blend-multiply layer over the blur — this is that composite */
.ihero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;                 /* same reason as .hero__media::after */
  background: linear-gradient(180deg, rgba(10, 22, 36, .78), rgba(10, 22, 36, .62) 45%, rgba(10, 22, 36, .8));
}
/* the two soft side glows (806:9959 / 806:9960) */
.ihero__glow {
  position: absolute;
  top: 167.88px;
  width: 552.349px;
  height: 552.349px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 207, 214, .28), rgba(126, 207, 214, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
}
.ihero__glow--l { left: -361.02px; }
.ihero__glow--r { right: -361.02px; }
.ihero__inner {
  position: relative;
  z-index: 2;
  width: min(1672px, 100% - 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-lg);
  padding: var(--s-3xl) var(--s-xl);
  text-align: center;
}
.crumbs { display: flex; align-items: center; gap: var(--s-2xs); color: #fff; font-size: 14px; }
.crumbs a { display: flex; align-items: center; gap: var(--s-3xs); }
.crumbs svg { width: 16px; height: 16px; }
.crumbs .sep { opacity: .8; }
.crumbs .here { font-weight: 500; }
.ihero__title {
  font-family: Mulish, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.165vw, 79.97px);   /* 79.97 @1920 */
  line-height: 1.2;
  color: #fff;
  text-transform: capitalize;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Every interior artboard puts this block at exactly 541 wide, centred
     ((1920-541)/2 = 689.5), with the lines centred inside it. Letting each line
     size to its own content instead made x drift per page. */
  width: 541px;
  max-width: 100%;
  text-align: center;
}
.ihero__title em { font-style: italic; color: var(--sky); }

/* ---------- disciplines list (806:9961) --------------------------------- */

.disc { display: flex; flex-direction: column; gap: 44px; }
.disc__h { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 48px; line-height: 1.18; color: var(--navy); }
.disc__list { display: flex; flex-direction: column; }
.disc__row {
  display: flex;
  gap: var(--s-3xl);
  align-items: flex-start;
  padding-block: 36px;
  border-top: 1px solid var(--card-border);
}
.disc__n { width: 80px; flex-shrink: 0; font-family: Mulish, system-ui, sans-serif; font-size: 40px; line-height: 1; color: var(--sky); }
.disc__mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; color: var(--navy); }
.disc__mid h3 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 26px; line-height: 1.2; }
.disc__mid p { font-size: var(--t-body); line-height: 1.5; max-width: 620px; }
.disc__tags { width: 340px; flex-shrink: 0; color: var(--navy); font-size: var(--t-body); }
.disc__tags span { display: block; line-height: 1.85; }

/* ---------- case-study rail (806:9990) ---------------------------------- */

.cases {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: var(--s-10xl);
  border-radius: var(--r-3xl);
  background: var(--navy);
  overflow: hidden;
  color: #fff;
}
.cases__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); }
.cases__head h2 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 48px; line-height: 1.18; }
.cases__head .btn--accent .btn__label,
.cases__head .btn--accent .btn__dot { background: var(--accent); color: #fff; }
.cases__rail { display: flex; gap: 44px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.cases__rail::-webkit-scrollbar { display: none; }
.cases__rail .workcard { width: 768px; flex-shrink: 0; scroll-snap-align: start; }
.cases__rail .workcard__media { border-radius: var(--r-lg); }
.cases__rail .workcard__meta { color: #fff; }
.cases__rail .btnlink { color: #fff; }
.cases__nav { display: flex; align-items: center; gap: 10px; }
.cases__bar { flex: 1 1 0; min-width: 0; height: 8px; border-radius: var(--r-full); background: #d9d9d9; overflow: hidden; }
.cases__bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width var(--dur) var(--ease); }
.cases__btn {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--navy); color: #fff; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .25);
}
.cases__btn svg { width: 24px; height: 24px; }
.cases__btn--prev svg { transform: rotate(180deg); }

/* ---------- partner cards (849:9707) ------------------------------------ */

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pcard { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.pcard__logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--s-6xl);
  border-radius: var(--r-3xl);
  background: rgba(136, 172, 225, .1);
}
.pcard__logo img { max-width: 62%; height: 57.962px; object-fit: contain; }
.pcard h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 16.8px; line-height: 20.16px; letter-spacing: -.084px; color: var(--navy); }
.pcard p { font-size: 14px; line-height: 19.68px; color: var(--navy); }
.pcard__links { display: flex; gap: 4px; }
.pcard__links a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: .8px solid var(--navy); border-radius: var(--r-full); color: var(--navy);
}
.pcard__links svg { width: 14px; height: 14px; }

/* ---------- interior responsive ----------------------------------------- */

@media (max-width: 1200px) {
  .cases { padding: var(--s-3xl); }
  .cases__rail .workcard { width: min(768px, 82vw); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disc__tags { width: 240px; }
}
@media (max-width: 900px) {
  .ihero { height: 560px; }
  .ihero__glow { display: none; }
  /* the 402 panel is 36 · number · 48 · title+body · 48 · tags · 36 = 427 tall;
     16 between the rows collapsed it to 379 and compounded down the list */
  .disc__row { flex-direction: column; gap: 48px; }
  /* the board holds the capabilities block 64 clear of its section, top and bottom */
  .disc { padding-block: 64px; }
  .disc__n { width: auto; }
  .disc__tags { width: auto; }
  .disc__h, .cases__head h2 { font-size: 32px; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Remaining page components — values read from the file via the REST API
   ========================================================================== */

/* ---------- section header used across interior pages ------------------- */
/* Title-left, count-right across the full track — the board puts no eyebrow in
   this row, and having one there pushed "Browse our work." from 128 to 785. */
.shead2 { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-lg); }
.shead2 h2:not(.dhead), h2.shead2:not(.dhead) { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 48px; line-height: 1.18; color: var(--navy); }
.shead2 .aside { font-size: 15px; line-height: 21px; color: var(--navy); white-space: nowrap; }
.rule { height: 1px; background: var(--card-border); border: 0; margin: 0; }

/* ---------- values grid (842:9333) — 532x293, #88ace1@10%, r16 ---------- */
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.vcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 293px;
  padding: 64px 84px;
  border-radius: var(--r-lg);
  background: rgba(136, 172, 225, .1);
}
.vcard svg { width: 64px; height: 64px; stroke: var(--navy); stroke-width: 1.33; fill: none; }
.vcard h3 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 32px; line-height: 38.4px; color: var(--navy); }

/* ---------- group-of-companies cards (874:39187) ------------------------ */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ccard { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.ccard__logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-3xl);
  background: rgba(136, 172, 225, .1);
  overflow: hidden;
}
.ccard__logo img { max-width: 62%; max-height: 40%; object-fit: contain; }
.ccard h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 16.8px; line-height: 20.16px; letter-spacing: -.08px; color: var(--navy); }
.ccard p { font-size: 14px; line-height: 19.68px; color: var(--navy); }
.ccard__links { display: flex; gap: 4px; }

/* ---------- team member card (849:9535 / 806:9872) ---------------------- */
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 84px; }
.tgrid--lead { gap: 32px; padding-inline: 164px; }
.tcard { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.tcard__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 355 / 473.33;
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--accent);
}
.tcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.tcard__photo::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: color; }
.tcard h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 16.8px; line-height: 20.16px; letter-spacing: -.08px; color: var(--navy); }
.tcard p { font-size: 13.12px; line-height: 19.68px; color: var(--navy); }
.tcard a.li, .ccard__links a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: .8px solid var(--navy); border-radius: var(--r-full); color: var(--navy);
}
.tcard a.li svg, .ccard__links svg { width: 14px; height: 14px; }

/* ---------- interactive tabs (806:9869) --------------------------------- */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tabs button {
  padding: 11px 18px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--card-border);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
}
.tabs button.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- filter bar (806:10210) -------------------------------------- */
.fbar { display: flex; flex-direction: column; gap: 32px; }
.fbar__selects { display: flex; gap: 32px; flex-wrap: wrap; }
/* the board's filter row is 1304 of 1664 — two 636 selects, not two halves */
.fbar > .fbar__selects > .field:has(.selwrap) { flex: 0 0 636px; }
.field { display: flex; flex-direction: column; gap: 9px; flex: 1 1 0; min-width: 0; }
/* Upper: the strings in the file are sentence case ("Full name", "Filter by
   Region") but every one of them renders upper in the artboards — the 1px
   tracking on an 11px label is the giveaway. Contact and the projects filter
   bar share this rule, and both were showing sentence case. */
.field > label { font-size: 11px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); }
.input, .field select, .field input, .field textarea {
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background-color: #fff;
  background-image: linear-gradient(rgba(31, 139, 255, .05), rgba(31, 139, 255, .05));
  color: var(--navy);
  font-family: inherit;
  font-size: 15px;
  line-height: 21.75px;
  appearance: none;
}
.field textarea { height: 150px; padding-block: 16px; resize: vertical; line-height: 1.45; }
.field select { background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.field select::-ms-expand { display: none; }
.selwrap { position: relative; }
.selwrap svg { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 12px; height: 7px; pointer-events: none; color: var(--navy); }
/* the board's search box is a 165 x 43 field inset 18 from its own left edge and
   centred in the filter row — not a bare 17px line pinned to the row's baseline */
.fbar__search { display: flex; align-items: center; gap: 10px; width: 165px; flex-shrink: 0;
                height: 43px; padding-left: 18px; align-self: center; }
.fbar__search svg { width: 14px; height: 14px; color: var(--navy); flex-shrink: 0; }
.fbar__search input { border: 0; background: none; padding: 0; height: auto; font-family: inherit; font-size: 14px; color: var(--navy); width: 100%; }

/* ---------- insights: featured + article grid --------------------------- */
.feat { display: flex; align-items: center; gap: 64px; padding-top: 12px; }
.feat__img { width: 800px; max-width: 50%; flex-shrink: 0; aspect-ratio: 800 / 500; border-radius: var(--r-lg); overflow: hidden; }
.feat__img img { width: 100%; height: 100%; object-fit: cover; }
.feat__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.kicker { font-size: 11px; line-height: 13.2px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--sky); }
.feat__meta { display: flex; align-items: center; gap: 12px; color: var(--navy); font-size: 12.5px; line-height: 15px; }
.feat__title { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 38px; line-height: 45.6px; color: var(--navy); }
.feat__excerpt { font-size: 17px; line-height: 26.86px; color: var(--navy); }
/* the "auth" frame: 40 avatar · 12 · a 43-tall name block of 21.6 + 2.4 + 18.9 */
.byline { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.byline > span { display: flex; flex-direction: column; gap: 2.4px; width: 210px; }
/* the featured insight carries the same byline two steps down: 14/18.9 over
   12.5/16.9 in a 188 block, avatar 40 + 12 */
.byline.byline--sm > span { gap: 2px; width: 188px; }
.byline.byline--sm b { font-size: 14px; line-height: 18.9px; }
.byline.byline--sm > span > span { font-size: 12.5px; line-height: 16.88px; }
.byline b { font-weight: 500; font-size: 16px; line-height: 21.6px; color: var(--navy); }
.byline > span > span { font-size: 14px; line-height: 18.9px; color: var(--navy); }
.readmore { font-weight: 500; font-size: 15px; line-height: 21px; color: var(--navy); }

.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.acard { display: flex; flex-direction: column; gap: 16px; }
.acard__img { aspect-ratio: 533.33 / 236; border-radius: 14px; overflow: hidden; background: var(--surface-3); }
.acard__img img { width: 100%; height: 100%; object-fit: cover; }
.acard .kicker { font-size: 10.5px; line-height: 12.6px; letter-spacing: 1.7px; }
.acard h3 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 22px; line-height: 28.16px; color: var(--navy); }
.acard time { font-size: 12.5px; line-height: 17.5px; color: var(--navy); }

/* ---------- careers: split, benefits, roles ----------------------------- */
/* the board spaces these two heads at 52 and 36, not the 48 the stack utility
   gives, and closes both to 12 at 402 */
.benefits-sec { gap: 52px; }
.roles-sec { gap: 36px; }
.split { display: flex; align-items: center; gap: 80px; }
.split__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.split__text h2 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 52px; line-height: 1.18; color: var(--navy); }
.split__text p { font-size: 17px; line-height: 1.58; color: var(--navy); }
/* the history split is the one place the file uses text/muted, and the one
   heading it tracks at -0.5 — see the muted-node scan in FIGMA-PARITY */
/* the history split runs 694 + 80 + 890, not the shared 800 + 80 + 792 — the
   narrower column is what wraps its heading to two lines, and the copy sits 82
   below it rather than the shared 24 */
.split--history .split__text { flex: 0 0 694px; gap: 82px; }
.split--history .split__img { flex: 1 1 0; width: auto; max-width: none; aspect-ratio: 890 / 540; }
.split--history .split__text h2 { letter-spacing: -.5px; }
.split--history .split__text p { color: var(--muted); }
.split__img { width: 792px; max-width: 50%; flex-shrink: 0; aspect-ratio: 792 / 540; border-radius: var(--r-lg); overflow: hidden; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }

.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.bcard { display: flex; flex-direction: column; gap: 20px; }
.bcard__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--sky); color: var(--navy);
}
.bcard__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.bcard h3 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 23px; line-height: 28.06px; color: var(--navy); }
.bcard p { font-size: 15px; line-height: 23.25px; color: var(--navy); }

.roles { display: flex; flex-direction: column; }
.role {
  display: flex; align-items: center; gap: var(--s-xl);
  padding-block: 28px;
  border-top: 1px solid var(--card-border);
}
.role:last-child { border-bottom: 1px solid var(--card-border); }
.role__l { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.role__l h3 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 23px; line-height: 28.52px; color: var(--navy); }
.role__l span { font-size: 14px; line-height: 19.6px; color: var(--navy); }
.role__r { display: flex; align-items: center; gap: 28px; flex-shrink: 0; color: var(--navy); font-size: 15px; line-height: 21px; }
.chip { padding: 6px 12px; border-radius: var(--r-full); background: var(--navy); color: #fff; font-size: 12px; font-weight: 500; line-height: 14.4px; white-space: nowrap; }
.role__r .arw { font-weight: 500; font-size: 18px; line-height: 18px; }

/* ---------- document hero (project details / blog) ---------------------- */
.dochero {
  position: relative;
  height: 564px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--ink);
}
.dochero img { width: 100%; height: 100%; object-fit: cover; }
.dochero__glow {
  position: absolute; top: 50%; width: 552px; height: 552px; border-radius: 50%;
  background: #7ecfd6; filter: blur(180px); opacity: .5; transform: translateY(-50%); pointer-events: none;
}
.dochero__glow--l { left: -180px; }
.dochero__glow--r { right: -180px; }

.docmeta { display: flex; flex-direction: column; gap: var(--s-sm); }
/* the read-time sits in its own "meta" frame, inset 8 from the section edge */
.docmeta > .aside { font-size: 14px; line-height: 16.8px; margin-left: 8px; }
.docmeta__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-sm); }
.docmeta__row h1 { font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 32px; line-height: 38.4px; color: var(--navy); }
.docmeta__row .yr { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 32px; line-height: 38.4px; color: var(--accent); }
.docmeta__row .dot { color: var(--navy); font-size: 16px; }

.dsec { display: flex; gap: var(--s-8xl); align-items: flex-start; }
.dsec__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* AUTO leading, not 24 — see the note in diff.mjs. `normal` lands on 29 for
   Inter at 24px, which is what the file's boxes measure. */
.dsec h2, .dsec h3,
.dsec__main h2, .dsec__main h3 { font-weight: 700; font-size: 24px; line-height: normal; color: var(--navy); }
/* body copy on the document pages is 24/24. `.docbody` blocks reuse
   `.dsec__main` but live outside `.dsec`, so the descendant rule never reached
   them and they fell back to the 16px default — the same trap the headings hit. */
.dsec p, .docbody .dsec__main p { font-size: 24px; line-height: normal; color: var(--navy); }
/* Both detail pages lay this out as ONE row: a 181.33 label, 10, then a 406.67
   chip area of fixed 194.2 x 37 pills, 10 apart, wrapping. It was a column with
   16px pills, which put the chips a row too low and 8px small. */
.dsec__side { width: 598px; max-width: 40%; display: flex; gap: 10px; align-items: flex-start; }
.dsec__side > h3 { flex: 0 0 181.33px; }
.scope { flex: 1 1 0; min-width: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.scope span {
  display: flex; align-items: center; justify-content: center;
  width: 194.2px; height: 37px;
  border-radius: 99px;
  background: rgba(57, 113, 173, .44);
  color: var(--navy); font-size: 24px; line-height: 24px;
}
.docblocks { display: flex; flex-direction: column; gap: var(--s-3xl); }
.docblocks figure { margin: 0; border-radius: var(--r-2xl); overflow: hidden; }
.docblocks img { width: 100%; height: auto; display: block; }
.docpair { display: flex; gap: var(--s-xl); align-items: center; }
.docpair > * { flex: 1 1 0; min-width: 0; }
.docbody { display: flex; flex-direction: column; gap: var(--s-lg); }
.docbody figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.docbody figure img { width: 100%; height: auto; display: block; }

/* ---------- careers teaser (806:9841) ----------------------------------- */
.teaser { padding: 104px var(--s-10xl); display: flex; flex-direction: column; gap: var(--s-lg); align-items: flex-start; }
.teaser h2 { font-family: Mulish, system-ui, sans-serif; font-weight: 400; font-size: 48px; line-height: 1.2; color: var(--navy); }
.teaser p { font-size: 17px; line-height: 1.55; color: var(--navy); }

.loadmore { display: flex; justify-content: center; }
.loadmore .btn__label { justify-content: center; min-width: 302px; }
.loadmore .btn__dot { width: 50px; height: 50px; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1200px) {
  .vgrid, .cgrid, .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .tgrid--lead { padding-inline: 0; }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat { flex-direction: column; align-items: flex-start; gap: var(--s-xl); }
  .feat__img { width: 100%; max-width: none; }
  .split { flex-direction: column; align-items: stretch; gap: var(--s-xl); }
  .split__img { width: 100%; max-width: none; }
  /* stacked, the history split drops its 694 track and its 82 — a flex basis in
     a column would set a height, and the narrow boards space it at 24 */
  .split--history .split__text { flex: 0 1 auto; gap: var(--s-lg); }
  .split--history .split__img { flex: 0 1 auto; width: 100%; }
  .dsec { flex-direction: column; gap: var(--s-xl); }
  /* at 402 the board stands the scope row 84 clear of the overview */
  .dsec__side { width: 100%; max-width: none; }
  .vcard { padding: 40px; }
  .teaser { padding: 64px var(--s-xl); }
}
@media (max-width: 900px) {
  .vgrid, .cgrid, .agrid, .bgrid { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .dochero { height: 320px; }
  .docpair { flex-direction: column; }
  /* the board keeps the role row two-up at 402 — a 128 title column that wraps
     to three lines and a 194 meta column, 32 apart — rather than stacking them */
  .role { gap: 32px; }
  /* the discipline tag stays on one line — the board's is 119 wide in a 128
     column, and ours renders a hair over, which added a line to every row */
  /* 0 1, not 0 0: 128 + 32 + 194 is 354 and the 402 board leaves 378, so these
     never shrink at the design width — but below it they have to. At 360 the
     fixed pair pushed the page to 379 and gave every screen under 402 a
     horizontal scrollbar. */
  .role__l { flex: 0 1 128px; }
  .role__l span { white-space: nowrap; }
  .role__r { flex: 0 1 194px; gap: var(--s-sm); }
  .split__text h2, .shead2 h2:not(.dhead), h2.shead2:not(.dhead), .teaser h2 { font-size: 32px; }
  .feat__title { font-size: 28px; }
  /* the 402 board keeps the 24/24 headings and only shrinks the body copy */
  .dsec p, .docbody .dsec__main p { font-size: 18px; line-height: 1.45; }
  .dsec { gap: var(--s-8xl); }
}

/* ---------- history timeline (806:9375) --------------------------------- */
.tl { display: flex; flex-direction: column; gap: 44px; padding-block: 13px; }
.tl__years, .tl__texts { display: flex; }
.tl__years span {
  flex: 1 1 0; min-width: 0; padding: 10px;
  font-family: Mulish, system-ui, sans-serif; font-size: 24px; line-height: 1.18;
  letter-spacing: -.2px; color: var(--accent);
}
.tl__track { display: flex; align-items: center; height: 16px; }
.tl__track i {
  flex: 1 1 0; height: 2px; background: var(--accent); position: relative;
}
.tl__track i::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--page); border: 3px solid var(--accent);
}
/* the last column carries a dot but no trailing line — 9 dots, 8 segments */
.tl__track i:last-child { background: none; }
.tl__texts { gap: 29px; }
.tl__texts p { flex: 1 1 0; min-width: 0; padding: 10px; font-size: var(--t-body); line-height: 1.5; color: var(--navy); }

.vcard img { width: 64px; height: 64px; object-fit: contain; }
.bcard__icon img { width: 22px; height: 22px; object-fit: contain; }

/* mobile (806:9284): the rail turns vertical — year | dot+line | text.
   The three rows are dissolved with display:contents and re-interleaved by
   column; `dense` is what makes dot 1 land on row 1 rather than after the
   nine years. */
@media (max-width: 900px) {
  .tl { display: grid; grid-auto-flow: row dense; grid-template-columns: 56px 16px minmax(0, 1fr); gap: 0 12px; padding-block: 0; }
  .tl__years, .tl__track, .tl__texts { display: contents; }
  .tl__years span { grid-column: 1; padding: 0 0 28px; font-size: 18px; text-align: right; color: var(--astral-light); }
  .tl__track { height: auto; }
  .tl__track i { grid-column: 2; flex: none; height: auto; background: none; }
  .tl__track i::before { left: 50%; top: 5px; transform: translate(-50%, 0); }
  .tl__track i::after {
    content: ""; position: absolute; left: 50%; top: 19px; bottom: -6px;
    width: 1px; background: var(--accent); opacity: .35; transform: translateX(-50%);
  }
  .tl__track i:last-child::after { display: none; }
  .tl__texts { gap: 0; }
  .tl__texts p { grid-column: 3; padding: 2px 0 28px; font-size: 14px; }
}

/* ==========================================================================
   Mobile — transcribed from the Figma 402px frames
   806:9153 home · 806:9284 who we are · 806:10089 what we do ·
   806:10400 projects · 806:9893 full team
   Insights 806:10531 · Careers 806:10718 · Contact 806:10882 ·
   ProjectDetails 896:16591 (the 806:16591 in the older notes was a wrong id)
   ========================================================================== */

@media (max-width: 640px) {

  /* ---------- home hero: the absolute layout collapses to flow ----------- */
  /* card is 370x745 in the frame, content bottom-aligned, featured visible */
  .hero { padding-inline: 17px; }    /* card x=17 in the artboard */
  .hero__card {
    height: auto;
    min-height: 745px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-lg);
    padding: 20px;                   /* artboard pad=[164,20,164,20] */
  }
  .hero__headline, .hero__featured {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
  }
  .hero__featured { display: flex; }
  .hero__title { font-size: 40px; white-space: normal; }
  .hero__lead { font-size: 15px; }
  .hero__headline .btn { align-self: flex-end; }

  /* ---------- section headers ------------------------------------------- */
  .shead { padding: var(--s-xl) 0; gap: var(--s-lg); }
  .shead2 { flex-direction: column; align-items: flex-start; gap: var(--s-lg); }
  .benefits-sec, .roles-sec { gap: 12px; }
  .shead2 .aside { white-space: normal; }

  /* ---------- services --------------------------------------------------- */
  /* collapsed: a 96px bar reading [num] [title]. The body's DOM order is
     title-then-row, so row-reverse is what puts the number first. */
  .service { min-height: 96px; border-radius: var(--r-2xl); }
  .service__num { margin-left: 0; width: 48px; height: 48px; }
  .service__title { width: auto; font-size: 20px; line-height: 1.2; }
  .service__card { padding: var(--s-lg); width: 100%; }

  .service:not(.is-open) .service__body {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;      /* main-start is the right in row-reverse */
    gap: var(--s-sm);
  }
  .service:not(.is-open) .service__title--collapsed { flex: 1 1 0; min-width: 0; }
  .service:not(.is-open) .service__row { flex: 0 0 auto; width: auto; }

  /* open: number pinned top-left, copy card on the floor */
  .service.is-open { min-height: 500px; }
  .service.is-open .service__body { align-items: stretch; }
  .service.is-open .service__row {
    flex: 1 1 0;
    flex-direction: column-reverse;  /* lays out bottom-up: card floor, num ceiling */
    justify-content: space-between;
    align-items: flex-start;
  }
  .service.is-open .service__card { flex: 0 0 auto; }   /* hug the floor, don't stretch */

  /* ---------- work cards ------------------------------------------------- */
  .works { gap: 28px; }              /* 64 at 1920, 28 at 402 */
  .workcard__media { height: auto; aspect-ratio: 370 / 450; border-radius: var(--r-2xl); }
  .workcard__logo { width: 96px; height: 96px; border-radius: 14px; }
  .workcard__logo img { height: 28px; }
  .workcard__meta { row-gap: var(--s-2xs); }
  .workcard__meta .push { flex-basis: 100%; }

  /* ---------- whyICME: the triangle sits above the copy ------------------ */
  .whypanel { padding: var(--s-xl) var(--s-sm); }
  .triangle { flex-direction: column-reverse; gap: var(--s-xl); }
  .triangle__fig { align-self: center; max-width: 320px; }
  .triangle__body { margin-top: var(--s-lg); font-size: 15px; }

  /* ---------- clients: 2 up, panel padding drops out --------------------- */
  .clients { padding-block: var(--s-3xl); gap: var(--s-xl); }
  .clients__head { padding: 0; }
  .clients__grid { padding: 0; gap: var(--s-3xl); }
  .clients__row { flex-wrap: wrap; gap: var(--s-xl); }
  .clients__cell { flex: 0 0 calc(50% - var(--s-sm)); aspect-ratio: auto; height: 56px; }
  .clients__cell img { object-fit: contain; }

  /* ---------- roles list carries its own 12 inset (design: list pad 0/12) -- */
  .roles { padding-inline: 12px; }

  /* ---------- stats stay 2 x 2 ------------------------------------------- */
  /* home's stats and hero are the 20/20 sections, not the 12/12 default */
  .stats { padding: 0; border-radius: var(--r-2xl); margin-inline: 8px; }
  .stats__head { padding: var(--s-lg); }
  /* the board insets the 2x2 by 24 inside the card (362 -> 314) and stands each
     cell 218 tall: 56 + 54 + 7 + 20 + 7 + 18 + 56 */
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--s-lg); }
  /* 6 of side padding, not 16 — the board's cell is 157 wide and its widest line
     145, so 16 wrapped "EU · MENA · Africa · Asia" and stretched every cell */
  /* 4 of side padding: the board's widest cell line is 145 in a 157 cell, and at
     6 the DOM renders it a hair over 145 and wraps, which stretched every cell
     from 218 to 234 and pushed the whole strip down */
  .stats__cell { padding: 56px 4px; gap: 7px; }
  .stats__n { font-size: 48px; line-height: 53.75px; letter-spacing: -2.15px; }
  /* labels do NOT shrink at 402 — the board keeps the desktop 15 / 12.5 */

  /* ---------- offices: button drops under the heading -------------------- */
  /* heading is 27px/29.7 at 402 (the --t-display clamp floor of 34 was too big)
     and the head sits at x=52: 20 strip padding + 32 of its own */
  .offices { padding-block: var(--s-3xl); gap: var(--s-xl); }
  .offices__head { padding: 0 32px; }
  .offices { padding-inline: 20px; }
  /* size only — the ratios (1.1, and 1.2 on --sans) carry down from the base rule */
  .dhead { font-size: 27px; }
  /* the 32 indent is a desktop-only nesting; the 402 boards run flush */
  .shead .dhead, .dhead--inset { margin-left: 0; }
  .hero__title { font-size: 39px; line-height: 1.04; }
  .offices__headrow { flex-direction: column; align-items: flex-start; gap: var(--s-sm); }
  .offices__rail { padding-inline: 0; }             /* .offices supplies the 20 */
  /* the artboard steps each card by 340.4 (326.4 + 14) and stands them 505 tall.
     Rounding the step to 341 drifts ~0.6px per card along the rail, which the
     gate sees as a growing x error on cards 3, 4 and 5. */
  .offices__track { padding-left: 0; gap: 14px; height: 505px; }
  .office { width: 326.4px; height: 505px; }

  /* ---------- CTA: full-width stacked buttons ---------------------------- */
  .cta { padding: var(--s-3xl) var(--s-sm); }
  .cta__row { width: 100%; }
  .cta__title { width: 100%; }
  .cta__aside { width: 100%; }
  .cta__aside p { width: auto; }
  .cta__btns { flex-direction: column; align-items: stretch; width: 100%; }
  .cta__btns .btn { width: 100%; }
  .cta__btns .btn__label { flex: 1 1 auto; justify-content: center; text-transform: uppercase; letter-spacing: .5px; }
  .cta__btns .btn--inverse .btn__label,
  .cta__btns .btn--inverse .btn__dot { background: rgba(255, 255, 255, .12); }

  /* ---------- footer: everything centres, rules between the groups ------- */
  .footer { padding-inline: var(--s-sm); text-align: center; }
  .footer__top { align-items: center; gap: var(--s-xl); border-bottom: 0; }
  .footer__brand { width: 100%; align-items: center; }
  .footer__cols { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .footcol {
    flex-direction: column;
    align-items: center;
    gap: var(--s-sm);
    padding: var(--s-xl) 0;
    border-top: .8px solid rgba(255, 255, 255, .32);
  }
  .footcol--rule { border-right: 0; }
  .footcol__lists { flex-direction: column; align-items: center; gap: var(--s-sm); }
  .footcol--svc .footcol__lists a { max-width: none; }
  .footcol__lists a { white-space: normal; }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--s-sm);
    padding-block: var(--s-xl);
    border-top: .8px solid rgba(255, 255, 255, .32);
  }
  .footer__legal { flex-direction: column; gap: var(--s-2xs); align-items: center; }

  /* ---------- interior hero (806:10089 / 806:10400 / 806:9893) ----------- */
  /* the 402 boards stand the dark hero at 520, and space sections by the page's
     own --sec-gap rather than the desktop 84 */
  .main { gap: var(--sec-gap, 24px); }
  .ihero { height: 520px; }
  .ihero__inner { width: 100%; padding: var(--s-lg) 12px; gap: var(--s-sm); }
  /* 50.8 x 1.2 = 61, which is exactly the line pitch in the artboards — the 4px
     stack gap that desktop uses (79.97 x 1.2 + 4 = 100) is not applied at 402 */
  /* at 402 the block is full width at x=12, not the fixed 541 track */
  .ihero__title { font-size: 50.8px; gap: 0; width: 100%; }
  .crumbs { font-size: 13px; flex-wrap: wrap; justify-content: center; }

  /* ---------- filter bar: stacked fields, search becomes a pill ---------- */
  .fbar__selects { flex-direction: column; gap: var(--s-lg); }
  /* 402: a 354-wide pill inset 12, 50 tall, with the 24px lens */
  .fbar__search svg { width: 24px; height: 24px; }
  .fbar__search {
    width: auto;
    align-self: stretch;      /* the row is align-items:flex-end; without this it shrinks to content */
    margin-inline: 12px;
    height: 50px;
    padding: 0 18px;
    border: 1px solid var(--card-border);
    border-radius: var(--r-full);
    background: #fff;
  }

  /* ---------- grids ------------------------------------------------------ */
  /* measured off the 402 artboards: article cards are 185 wide on a 382 track
     with a 12 gap — two up, not the single column this used to collapse to */
  .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xl); }
  .vcard { min-height: 0; padding: var(--s-lg); gap: var(--s-sm); }
  .vcard svg, .vcard img { width: 52px; height: 52px; }
  .vcard h3 { font-size: 20px; line-height: 1.2; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sm); }
  .tgrid--lead { gap: var(--s-sm); }

  /* ---------- case rail + load more -------------------------------------- */
  /* 48 above the head, 12 at the sides — the board's case-studies frame */
  .cases { padding: 48px 12px; gap: var(--s-lg); }
  .cases__head { flex-direction: column; align-items: stretch; gap: var(--s-sm); }
  .cases__head .btn { width: 100%; }
  .cases__head .btn__label { flex: 1 1 auto; justify-content: center; }
  .cases__rail { gap: var(--s-lg); }
  .cases__rail .workcard { width: 100%; }
  .loadmore .btn { width: 100%; }
  .loadmore .btn__label { min-width: 0; flex: 1 1 auto; }
  .loadmore .btn__dot { display: none; }

  /* ---------- documents -------------------------------------------------- */
  .dochero { height: 240px; border-radius: var(--r-lg); }
  .docmeta__row h1, .docmeta__row .yr { font-size: 24px; line-height: 1.2; }
  .teaser { padding: var(--s-3xl) var(--s-sm); }
  /* 27/31.86 is the 402 section heading. who-we-are's history split is the one
     board that sets 28/33.04 — the two artboards disagree by a pixel. */
  .split__text h2 { font-size: 27px; line-height: 31.86px; }
  .split--history .split__text h2 { font-size: 28px; line-height: 33.04px; }
  .shead2 h2:not(.dhead), h2.shead2:not(.dhead) { font-size: 27px; line-height: 31.86px; }
  /* Contact's "Tell us about your project." and insights' "Latest thinking."
     are the two section headings the 402 boards keep at 48 — every other one
     drops to 27/28, which is what this blanket rule assumes. */
  h2.shead2--lg:not(.dhead) { font-size: 48px; line-height: 1.18; }
  .disc__h { font-size: 27px; line-height: 31.86px; }
  .feat__title { font-size: 27px; line-height: 32.4px; }
  /* both card images are near-square at 402 (382x500 and 185x236) — carrying the
     desktop ratios down made them 239 and 82 tall against the board's 500 and 236 */
  .feat__img { aspect-ratio: 382 / 500; }
  .acard__img { aspect-ratio: 185 / 236; }
  /* the case-studies head centres its title at 402 (24 + 354/2 - 162/2 = 120) */
  .cases__head { align-items: center; }
  .cases__head h2 { font-size: 27px; line-height: 31.86px; }
  /* the board runs the scope row above the overview on the detail pages */
  .dsec__side { order: -1; }
}

/* ==========================================================================
   Motion — implemented from design/interactions.json (973 prototype
   interactions). Durations and easing come from the file, not from taste;
   see the --ease / --dur tokens at the top.
   ========================================================================== */

/* projectCard: 210 hover interactions, all adding a 1px #07090b border.
   The width/height deltas alongside them are component-variant frame sizes,
   not a hover scale — animating those would be reading the data wrong. */
.workcard__media {
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.workcard:hover .workcard__media { border-color: var(--color-neutral-darkest); }

/* projectImages / media inside a card lift slightly under the same easing */
.workcard__media img,
.acard__img img,
.feat__img img {
  transition: transform var(--dur-slow) var(--ease);
}
.workcard:hover .workcard__media img,
.acard:hover .acard__img img { transform: scale(1.03); }

/* Card: fill #f9fafb -> none, stroke #88ace1 -> none on hover */
.acard, .pcard, .ccard, .tcard, .bcard {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* filter chips + tabs — ON_CLICK is the 200ms bucket */
.tabs button {
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

/* nav underline */
.nav__links a { transition: border-color var(--dur) var(--ease); }

/* Service panel copy fades behind the flex-grow move. `display` is in the
   transition so the closing panel's copy fades out instead of vanishing on the
   first frame — the collapsed rule below is display:none, and without
   allow-discrete that swap is immediate and the opacity fade never runs. */
.service__card { transition: opacity var(--dur-slow) var(--ease), display var(--dur-slow) allow-discrete; }
.service:not(.is-open) .service__card { opacity: 0; }
.service.is-open .service__card { opacity: 1; }

/* office / case rails */
.office img { transition: transform var(--dur-slow) var(--ease); }
.office:hover img { transform: scale(1.04); }

/* ---------- scroll reveal ------------------------------------------------
   The prototype plays section entrances on the way down the page. Sections are
   revealed by site.js adding .is-in via IntersectionObserver; the no-JS and
   reduced-motion paths both leave content fully visible. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- reduced motion ----------------------------------------------
   One global switch rather than per-rule opt-outs, so nothing added later can
   silently escape it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- contact: form + details, two columns (806:10838) -------------
   The design lays the contact section out as a horizontal row, gap 96, with a
   420-wide details panel (r20, #f3f4f6, pad 40, gap 28). The panel did not
   exist in the markup at all — eight design strings were simply absent. */
/* The details panel is not a flex sibling that squeezes the form — the artboard
   puts the form at the full 1664 width with its 894 field column centred, and
   floats the 420 panel against the section's right edge.
   Eyebrow, title and panel all sit on the section's FIRST row: eyebrow at 128 in
   the left margin, title at 519/882, panel top-aligned at 1372 — 944 + its own 40
   of padding puts "Direct" at 984, eight pixels above the eyebrow. Reading the
   panel as vertically centred, and the eyebrow/title as rows stacked above the
   form, put the whole right column 270px low and the form 67. */
.contactsec {
  position: relative;
  display: grid;
  /* The left track is the eyebrow's margin and gives way first, so the 894 field
     column holds its width — and with it the 437 fields and Email at 970 — for
     as long as the section can carry it. */
  grid-template-columns: clamp(0px, 100% - 894px, 385px) minmax(0, 894px);
  align-items: start;
  /* the section is a card: 1664 x 729 at 128/944, #becedf at 20%, r32, 48 inside */
  padding-block: var(--s-3xl);
  background: rgba(190, 206, 223, .2);
  border-radius: 32px;
}
.contactsec > .eyebrow { grid-column: 1; grid-row: 1; }
.contactsec > h2       { grid-column: 2; grid-row: 1; margin-inline: 6px; }
.contactsec > .contactrow { grid-column: 2; grid-row: 2; padding-top: 32px; }
/* the two-up row is 894 wide with a 20 gutter (437 + 20 + 437), so Email starts
   at 970 — the shared filter-bar 32 put it at 976 */
.contactsec .fbar__selects { gap: 20px; }
.contactrow > form { max-width: 894px; margin-inline: auto; width: 100%; }

@media (max-width: 1400px) {
  /* the two fixed tracks stop fitting; the form takes the full section width */
  .contactsec { display: flex; flex-direction: column; gap: var(--s-3xl); }
  .contactsec > h2 { margin-inline: 0; }
  .contactsec > .contactrow { padding-top: 0; }
}
@media (max-width: 640px) {
  /* padding AND the 28 gap stay — the artboard reduces neither, and 24 pulled
     every rule in the panel 9px above the design */
  /* the 402 board drops the scope row to a column of auto-width 35px pills */
  /* the 402 board runs the section edge-to-edge: no card, no padding of its own,
     and 32 between the title and the fields (the desktop 48 put the first label
     16 low) */
  .contactsec { background: none; border-radius: 0; padding-block: 0; gap: var(--s-xl); }
  .dsec__side { flex-direction: column; }
  .dsec__side > h3 { flex: none; }
  .scope span { width: auto; height: 35px; padding-inline: 8px; font-size: 16px; }
}

/* ---------- interior hero: the light 402 variant --------------------------
   Four pages (careers · insights · contact · who-we-are) use a different hero
   at 402: `Frame 31`, y=48, h=296, no background image, navy title with a
   #3971ad italic — where projects / what-we-do / full-team keep the dark 520
   `Hero` with imagery. Verified across all four boards, so this is a design
   decision rather than the one-frame anomaly it was first taken for. */
@media (max-width: 640px) {
  .ihero--light {
    height: auto;
    min-height: 0;
    background: none;
    padding-block: var(--s-3xl);
  }
  .ihero--light .ihero__bg,
  .ihero--light .ihero__glow { display: none; }
  /* Frame 31 is 48 · crumbs · headline · 48 — the inner adds no padding or gap
     of its own, which is what put the headline 16 low and the section 24 late */
  .ihero--light .ihero__inner { padding-inline: 12px; padding-block: 0; gap: 0; }
  .main--insights .ihero--light .ihero__inner { padding-inline: 22px; }
  .ihero--light .ihero__title { color: var(--navy); }
  .ihero--light .ihero__title em { color: var(--accent); }
  .ihero--light .crumbs { color: var(--navy); }
}

/* ---------- desktop scale band ------------------------------------------
   The artboards are a fixed 1920 composition, and only --t-display / --t-hero /
   the gutters tracked the viewport — body, card and eyebrow text, the 88 nav,
   the 56 controls and every gap and track are hard px. Below 1920 the frame
   narrowed but those did not, so at a 1536 viewport (a 1920 laptop at Windows
   125% scaling) the button dot went from 3.35% of the layout frame to 4.19% and
   body text from 0.962% to 1.202% — everything read 25% larger than the design.

   Rather than make several hundred px values fluid, the whole composition is
   laid out at 1920 and drawn to fit, which is what the design *is*. `zoom` on
   body gives the document a ~1920px internal coordinate space (it divides the
   containing block, so no overflow and no horizontal scrollbar), and the tokens
   below are pinned to the values their clamps reach at 1920: vw units resolve
   against the real viewport, outside this coordinate space, so left alone they
   would be scaled a second time and come out ~20% short.

   1501 is the floor because 1500 is the highest layout breakpoint — inside the
   band there are none, so nothing here fights a media query, and below it the
   existing responsive rules take over unscaled. Firefox < 126 ignores `zoom`
   and simply keeps the previous behaviour. */
@media (min-width: 1501px) and (max-width: 1919px) {
  body { zoom: calc(100vw / 1920px); }
  :root {
    --gutter: 124px;
    --gutter-flush: 128px;
    --gutter-wide: 96px;
    --pad: 32px;
    --t-display: 64px;
    --t-hero: 124.505px;
  }
  .header__pill { width: min(1670px, 100% - 250px); }
  .ihero__title { font-size: 79.97px; }
}