@charset "utf-8";
/* ============================================================================
   Al Essa Investment
   Authored against the approved comp. Colour values are sampled from it and
   verified for contrast; see DESIGN.md before changing any of them.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts ---- */

@font-face {
  font-family: "Libre Bodoni";
  src: url("/assets/fonts/libre-bodoni-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Metric-matched fallback. Segoe UI is the face the comp was rendered in, so this
   keeps the pre-swap layout close enough that the swap costs no visible shift. */
@font-face {
  font-family: "Sans Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 98%; ascent-override: 95%; descent-override: 26%; line-gap-override: 0%;
}

/* --------------------------------------------------------------- tokens ---- */

:root {
  /* Ground: navy. Sampled #01101F from every dark section of the comp. */
  --navy-950: oklch(0.1392 0.0294 243.11);   /* #010A14 footer floor, scrims        */
  --navy-900: oklch(0.1677 0.0399 246.14);   /* #01101F primary dark ground         */
  --navy-850: oklch(0.2119 0.0443 248.05);   /* #061A2C raised panels on navy       */
  --navy-800: oklch(0.2520 0.0489 245.69);   /* #0B2438 hover fill on navy          */

  /* Ground: ivory. Sampled #F3EDE7. */
  --ivory-50:  oklch(0.9748 0.0079 73.74);   /* #FAF6F1 card fill                   */
  --ivory-100: oklch(0.9491 0.0103 67.70);   /* #F3EDE7 primary light ground        */
  --ivory-200: oklch(0.9197 0.0149 70.88);   /* #EBE3DA alt band, input fill        */
  --ivory-300: oklch(0.8610 0.0250 71.43);   /* #DCCFC0 disabled, deep hairline     */

  /* Accent. bronze-700 is the only bronze that is AA body text on ivory (5.05:1).
     bronze-600 (3.38:1) is for hairlines, icon strokes and large text only. */
  --bronze-700: oklch(0.5111 0.0868 61.32);  /* #8A5A2E                              */
  --bronze-600: oklch(0.6075 0.0888 59.08);  /* #AA754A                              */
  --bronze-500: oklch(0.5987 0.0864 59.55);  /* #A67349 the comp's button fill; hover */
  --copper-500: oklch(0.6969 0.1131 53.50);  /* #D48957                              */
  --copper-400: oklch(0.7772 0.1121 52.85);  /* #EFA271 on navy, 9.20:1              */
  --copper-300: oklch(0.8393 0.0873 56.00);  /* #F7BC93 focus ring on navy, 11.48:1  */

  /* Ink. Ratios measured against the ground each is used on. */
  --on-navy-strong: oklch(0.9653 0.0102 81.80);  /* #F7F3EC 17.34:1 */
  --on-navy-body:   oklch(0.8750 0.0151 80.70);  /* #DBD5CB 13.14:1 */
  --on-navy-muted:  oklch(0.7308 0.0145 78.24);  /* #ADA79E  8.03:1 */
  --on-ivory-strong: oklch(0.1629 0.0333 257.00); /* #050E1C 16.65:1 */
  --on-ivory-body:   oklch(0.2292 0.0304 259.03); /* #141D2B 14.58:1 */
  --on-ivory-muted:  oklch(0.4279 0.0266 256.81); /* #46505E  7.04:1 */

  --danger: oklch(0.4604 0.1652 29.49);          /* #A02016  6.66:1 on ivory */

  /* Type: fluid 375 -> 1440, ratio >= 1.25. --step-5 caps at 78px, under the 6rem
     hero ceiling. */
  --step--1: clamp(0.875rem, 0.853rem + 0.09vw, 0.9375rem);
  --step-0:  clamp(1rem,     0.978rem + 0.09vw, 1.0625rem);
  --step-1:  clamp(1.25rem,  1.206rem + 0.19vw, 1.375rem);
  --step-2:  clamp(1.5rem,   1.368rem + 0.56vw, 1.875rem);
  --step-3:  clamp(1.875rem, 1.655rem + 0.94vw, 2.5rem);
  --step-4:  clamp(2.25rem,  1.854rem + 1.69vw, 3.375rem);
  /* Caps at 72px. The comp sets the hero at ~78px on a 1672px frame with ~4.7% side
     margins; reproducing that proportion needs the wider shell below, and at 78px
     "next chapter of growth." still wraps to a third line. Well under the 6rem ceiling. */
  --step-5:  clamp(2.75rem,  2.05rem  + 2.99vw, 4.5rem);

  --lh-display: 1.08;
  --lh-heading: 1.16;
  --lh-body: 1.62;
  --lh-body-on-dark: 1.7;    /* light-on-dark reads lighter and needs the extra */
  --track-display: -0.015em; /* floor is -0.04em; a Didone must stay open       */
  --track-eyebrow: 0.18em;

  --font-display: "Libre Bodoni", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Sans Fallback", "Segoe UI", system-ui, sans-serif;

  /* Space */
  --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-s: 1rem;
  --space-m: 1.5rem;   --space-l: 2rem;    --space-xl: 3rem;
  --space-2xl: 4rem;   --space-3xl: 6rem;
  --section-y: clamp(4rem, 2.24rem + 7.51vw, 9rem);
  --gutter: clamp(1.25rem, 0.28rem + 4.13vw, 4rem);
  /* The comp's content spans ~90% of a 1672px frame, not a 1320px centred column;
     1320 made every heading wrap a line earlier than the approved design. */
  --shell-max: 1560px;
  --measure: 68ch;
  --header-h: 72px;

  /* Geometry. The comp is 0-radius throughout; squareness is the discipline. */
  --radius: 0;
  --hair: 1px;
  --focus-w: 2px;
  --focus-offset: 3px;

  /* Semantic z-index. Never an arbitrary 999. */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200;
  --z-overlay: 300; --z-drawer: 400; --z-toast: 500;

  /* Motion */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 520ms;

  /* Paper grain. Replaces the two supplied 2.3 MB texture PNGs, which are not
     seamless; this is ~300 bytes and tiles perfectly. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 1100px) { :root { --header-h: 96px; } }

/* -------------------------------------------------- the ground system ------ */
/* Sections declare a ground; components read only these aliases, never the ramps.
   One component therefore works on both grounds with no duplicated CSS. */

[data-ground] { background-color: var(--bg); color: var(--fg-body); position: relative; }

[data-ground="navy"] {
  --bg: var(--navy-900);
  --fg: var(--on-navy-strong);
  --fg-body: var(--on-navy-body);
  --fg-muted: var(--on-navy-muted);
  --accent: var(--copper-400);
  --accent-quiet: var(--copper-500);
  --rule: color-mix(in oklab, var(--copper-400) 30%, transparent);
  --rule-strong: color-mix(in oklab, var(--copper-400) 52%, transparent);
  --surface: var(--navy-850);
  --surface-hover: var(--navy-800);
  --focus: var(--copper-300);
  --lh-body-local: var(--lh-body-on-dark);
  --grain-opacity: .30;
  --grain-blend: overlay;
}

[data-ground="ivory"] {
  --bg: var(--ivory-100);
  --fg: var(--on-ivory-strong);
  --fg-body: var(--on-ivory-body);
  --fg-muted: var(--on-ivory-muted);
  --accent: var(--bronze-600);
  --accent-quiet: var(--bronze-700);
  --rule: color-mix(in oklab, var(--bronze-600) 34%, transparent);
  --rule-strong: color-mix(in oklab, var(--bronze-600) 55%, transparent);
  --surface: var(--ivory-50);
  --surface-hover: var(--ivory-200);
  --focus: var(--bronze-700);
  --lh-body-local: var(--lh-body);
  --grain-opacity: .40;
  --grain-blend: multiply;
}

/* The CTA band. The comp's raw texture leaves its brightest tenth at 2.78:1 against
   white -- below even the 3:1 large-text floor -- so a 28% navy scrim is composited
   over it, taking the worst case to 4.74:1 and the mean to 8.79:1. Approved. */
[data-ground="bronze"] {
  --bg: var(--bronze-500);
  --fg: var(--on-navy-strong);
  --fg-body: var(--on-navy-strong);
  --fg-muted: color-mix(in oklab, var(--on-navy-strong) 82%, transparent);
  --accent: var(--on-navy-strong);
  --rule: color-mix(in oklab, var(--ivory-50) 42%, transparent);
  --rule-strong: color-mix(in oklab, var(--ivory-50) 62%, transparent);
  --focus: var(--ivory-50);
  --lh-body-local: var(--lh-body-on-dark);
  --grain-opacity: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--navy-900) 28%, transparent),
                    color-mix(in oklab, var(--navy-900) 28%, transparent)),
    image-set(url("/assets/img/textures/bronze-1600.avif") type("image/avif"),
              url("/assets/img/textures/bronze-1600.webp") type("image/webp"));
  background-size: cover;
  background-position: center;
}
@media (max-width: 1100px) {
  [data-ground="bronze"] {
    background-image:
      linear-gradient(color-mix(in oklab, var(--navy-900) 28%, transparent),
                      color-mix(in oklab, var(--navy-900) 28%, transparent)),
      image-set(url("/assets/img/textures/bronze-1000.avif") type("image/avif"),
                url("/assets/img/textures/bronze-1000.webp") type("image/webp"));
  }
}

/* Grain overlay. Decorative and inert. */
[data-ground="navy"]::before,
[data-ground="ivory"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
  z-index: var(--z-base);
}
[data-ground] > * { position: relative; z-index: var(--z-raised); }

/* ----------------------------------------------------- reset and base ------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--on-ivory-body);
  background: var(--ivory-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

:target { scroll-margin-block-start: calc(var(--header-h) + var(--space-l)); }

/* One focus treatment for the whole site. Always an outline plus, on form fields,
   a border change -- never colour alone. */
:focus-visible {
  outline: var(--focus-w) solid var(--focus, var(--bronze-700));
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent, var(--bronze-600)); color: var(--ivory-50); }

/* --------------------------------------------------------- typography ------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--fg, var(--on-ivory-strong));
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: var(--lh-display); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li, dd, figcaption {
  line-height: var(--lh-body-local, var(--lh-body));
  text-wrap: pretty;
}
p { max-inline-size: var(--measure); }

strong, b { font-weight: 600; }

.lede {
  font-size: var(--step-1);
  color: var(--fg-body);
  max-inline-size: 54ch;
}

/* The one eyebrow on the site (hero). Written sentence case in the DOM and
   uppercased here, so screen readers don't spell it out letter by letter. */
.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--accent);
  font-weight: 600;
  max-inline-size: none;
}

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

.shell {
  inline-size: 100%;
  max-inline-size: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section-head { text-align: center; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.section-head h2 { margin-inline: auto; max-inline-size: 20ch; }
.section-head p { margin-inline: auto; text-align: center; }

/* The short rule under a centred heading. */
.rule-mark {
  inline-size: 56px;
  block-size: var(--hair);
  background: var(--accent);
  border: 0;
  margin: var(--space-m) auto 0;
}
.rule-mark--start { margin-inline: 0; }

.u-sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-s);
  z-index: var(--z-toast);
  background: var(--ivory-50); color: var(--navy-900);
  padding: var(--space-2xs) var(--space-s);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--space-2xs); }

/* ------------------------------------------------------------- buttons ----- */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: .9rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--step-0);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out-quart),
              color var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
  min-block-size: 48px;
}
.btn svg { transition: transform var(--dur) var(--ease-out-quart); flex: none; }
.btn:hover svg { transform: translateX(3px); }

/* Solid. The comp's #A67349 puts a white label at 4.06:1 -- a fail -- so the resting
   fill is bronze-700 (5.86:1) and #A67349 becomes the hover state. Approved. */
.btn--solid {
  background: var(--bronze-700);
  color: var(--ivory-50);
}
.btn--solid:hover { background: var(--bronze-500); }

.btn--ghost {
  border: var(--hair) solid var(--accent);
  color: var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: var(--navy-900); }

.btn--navy { background: var(--navy-900); color: var(--on-navy-strong); }
.btn--navy:hover { background: var(--navy-800); }

.btn--text {
  padding-inline: 0;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  transition: text-decoration-thickness var(--dur) var(--ease-out-quart);
}
.btn--text:hover { text-decoration-thickness: 2px; }

.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------- header ---- */

.site-header {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  block-size: var(--header-h);
  border-block-end: var(--hair) solid transparent;
  transition: border-color var(--dur) var(--ease-out-quart);
}
/* Fixed height and an opaque ground: no layout animation, no CLS, and no
   backdrop-filter (the hero behind it is navy anyway). */
.site-header[data-scrolled] { border-block-end-color: var(--rule-strong); }

.site-header__row {
  block-size: 100%;
  display: flex; align-items: center; gap: var(--space-m);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { inline-size: clamp(132px, 12vw, 161px); block-size: auto; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); }

.nav__link {
  position: relative;
  text-decoration: none;
  color: var(--fg-body);
  font-size: var(--step-0);
  padding-block: var(--space-2xs);
  transition: color var(--dur) var(--ease-out-quart);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: var(--hair); background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out-quart);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--fg); }

.nav__cta { flex: none; padding: .65rem 1.15rem; font-size: var(--step--1); min-block-size: 44px; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  color: var(--fg);
  padding: var(--space-2xs);
  min-inline-size: 48px; min-block-size: 48px;
  align-items: center; justify-content: center;
}

@media (max-width: 1099px) {
  .nav--desktop, .site-header .nav__cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile drawer. position: fixed so it can never be clipped by an ancestor's
   overflow, per the interaction rule. */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  padding: var(--space-s) var(--gutter) var(--space-2xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[hidden] { display: none; }
.drawer__top { display: flex; align-items: center; block-size: var(--header-h); }
.drawer__top .nav-toggle { display: inline-flex; }
.drawer__list { margin-block-start: var(--space-l); }
.drawer__list li + li { border-block-start: var(--hair) solid var(--rule); }
.drawer__link {
  display: block; padding-block: var(--space-s);
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--fg); text-decoration: none;
}
.drawer__link[aria-current="page"] { color: var(--accent); }
.drawer .btn { margin-block-start: var(--space-l); justify-content: center; }
.drawer__offices {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--hair) solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s);
  color: var(--fg-muted); font-size: var(--step--1);
}

body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------- hero ----- */

/* The hero is the one full-bleed section: in the comp the render runs off the right
   edge of the frame while the copy stays on the page's left margin. So the grid is NOT
   inside .shell -- the copy column carries the margin itself, and the figure column
   simply runs to the viewport edge. */
.hero { padding-block-start: clamp(3rem, 6vw, 5.5rem); overflow-x: clip; }
.hero__grid {
  display: grid; align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-inline: var(--gutter);
}
.hero__copy > * + * { margin-block-start: var(--space-m); }
.hero__title { margin-block-start: var(--space-s); }
.hero__sub { font-size: var(--step-1); color: var(--fg-body); max-inline-size: 44ch; }
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-m) var(--space-xl);
  margin-block-start: var(--space-l);
}
.hero__figure img { inline-size: 100%; }

/* The comp breaks the headline after "the". Only honour that above 900px -- below it
   the break would force an overflow, which is a hard ban. */
.hero__title .lb { display: inline; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    padding-inline: 0;
    align-items: stretch;
  }
  /* Aligns the copy with every other section's left edge without constraining the
     figure, which is what lets the render bleed off the right. */
  .hero__copy {
    align-self: center;
    padding-inline-start: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)));
  }
  .hero__title .lb { display: block; }
  .hero__figure { min-block-size: 100%; }
  .hero__figure picture, .hero__figure img { block-size: 100%; }
  /* The source render has empty navy down its left third, which is where the copy
     sits in the comp; cropping to the right keeps the stepped volumes and the seam. */
  .hero__figure img { object-fit: cover; object-position: 72% center; }
}
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; padding-inline: var(--gutter); }
  .hero__figure { order: -1; margin-inline: calc(var(--gutter) * -1); }
}

/* Facts bar. A <dl>, so each number binds to its label. Not a metric hero: no
   gradient, no count-up, numerals at --step-3 rather than oversized. */
.stat-strip {
  display: flex; flex-wrap: wrap;
  margin-block-start: clamp(3rem, 6vw, 5rem);
  border-block-start: var(--hair) solid var(--rule);
}
.stat {
  display: flex; align-items: center; gap: var(--space-s);
  padding: var(--space-m) clamp(1rem, 3vw, 2.5rem);
  flex: 1 1 220px;
}
.stat + .stat { border-inline-start: var(--hair) solid var(--rule); }
.stat:first-child { padding-inline-start: 0; }
.stat__icon { color: var(--accent); flex: none; }
.stat__num {
  display: block;
  font-family: var(--font-display); font-size: var(--step-3);
  color: var(--fg); line-height: 1.1;
}
.stat__label {
  display: block;
  font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-muted);
}
@media (max-width: 699px) {
  .stat-strip { display: block; }
  .stat { padding-inline: 0; }
  .stat + .stat { border-inline-start: 0; border-block-start: var(--hair) solid var(--rule); }
}

/* ------------------------------------------------------------- pillars ----- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.pillar {
  border: var(--hair) solid var(--rule-strong);
  background: var(--surface);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s);
}
.pillar__icon {
  inline-size: 76px; block-size: 76px;
  border: var(--hair) solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  margin-block-end: var(--space-2xs);
}
.pillar h3 { margin-block-start: var(--space-2xs); }
.pillar p { color: var(--fg-body); max-inline-size: 30ch; }

/* ------------------------------------------------- criteria + profile ------ */

.profile {
  display: grid; align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (min-width: 900px) {
  .profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.criteria li { display: grid; grid-template-columns: 40px 1fr; align-items: center;
  gap: var(--space-s); padding-block: var(--space-m); }
.criteria li + li { border-block-start: var(--hair) solid var(--rule); }
.criteria__icon { color: var(--accent); }
.criteria__label { font-size: var(--step-1); color: var(--fg); }

/* Container query, not a media query: the panel is reused at a different width on
   /target-companies, and it should reflow on its own size, not the viewport's. */
.panel {
  container-type: inline-size;
  border: var(--hair) solid var(--rule-strong);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.panel__title { color: var(--accent); font-size: var(--step-2); }
.panel__body {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4cqi, 3rem);
  align-items: center; margin-block-start: var(--space-m);
}
/* The diagram is 642:1018, so its width drives the panel's height -- which is what
   gives the panel the tall proportion it has in the comp. */
.panel__diagram { color: var(--accent); inline-size: clamp(170px, 30cqi, 265px); }
@container (max-width: 620px) {
  .panel__body { grid-template-columns: 1fr; }
  .panel__diagram { inline-size: min(230px, 60%); margin-inline: auto; }
}

/* ------------------------------------------------------------- process ----- */

.process { position: relative; overflow: clip; }
.process__inner { padding-inline-end: calc(var(--strip, 0px) + var(--gutter)); }

.process__strip {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: var(--strip, 0px);
  background-image: image-set(url("/assets/img/process/accent-720.avif") type("image/avif"),
                              url("/assets/img/process/accent-720.webp") type("image/webp"));
  background-size: cover; background-position: center;
  z-index: var(--z-base);
}
@media (min-width: 900px) { .process { --strip: clamp(0px, 18vw, 300px); } }
/* display:none rather than width:0, so a phone never downloads it at all. */
@media (max-width: 899px) { .process__strip { display: none; } }

.steps { display: grid; gap: clamp(2rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.step__head { display: flex; align-items: center; gap: var(--space-s); }
.step__num {
  font-family: var(--font-display); font-size: var(--step-3);
  color: var(--accent); line-height: 1; flex: none;
}
.step__rule { flex: 1; block-size: var(--hair); background: var(--rule); transform-origin: left; }
.step h3 { margin-block-start: var(--space-s); }
.step p { margin-block-start: var(--space-2xs); color: var(--fg-body); max-inline-size: 26ch; }

/* Suppress the trailing connector on whichever item ends a row. */
.steps > :nth-child(4n) .step__rule { display: none; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > :nth-child(4n) .step__rule { display: block; }
  .steps > :nth-child(2n) .step__rule { display: none; }
}
@media (max-width: 599px) {
  .steps { grid-template-columns: 1fr; }
  /* Stacked, the sequence reads as an ordered list; a dangling rule would be noise. */
  .steps .step__rule { display: none; }
}

/* -------------------------------------------------------- global reach ----- */

.reach { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .reach { grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); } }

.map { position: relative; }
.map__svg { inline-size: 100%; block-size: auto; color: var(--accent); opacity: .55; }
.map__svg path { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }

/* Each office is a zero-size anchor placed at its projected coordinate; the pin, the
   leader and the chip are positioned around that origin. */
.map__office {
  position: absolute;
  inset-block-start: var(--y); inset-inline-start: var(--x);
  inline-size: 0; block-size: 0;
  text-decoration: none;
}
.map__pin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  transform: translate(-50%, -50%);
  inline-size: 12px; block-size: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
  transition: background-color var(--dur) var(--ease-out-quart);
}
.map__lead {
  position: absolute; inset-inline-start: 0;
  inline-size: var(--hair); block-size: 26px;
  background: var(--rule-strong);
}
.map__chip {
  position: absolute; inset-inline-start: 0;
  transform: translateX(-50%);
  background: var(--navy-900); color: var(--ivory-50);
  font-size: var(--step--1); line-height: 1;
  padding: .5rem .7rem;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.map__office[data-place="above"] .map__lead { inset-block-end: 6px; }
.map__office[data-place="above"] .map__chip { inset-block-end: 32px; }
.map__office[data-place="below"] .map__lead { inset-block-start: 6px; }
.map__office[data-place="below"] .map__chip { inset-block-start: 32px; }

.map__office:hover .map__chip,
.map__office:focus-visible .map__chip { background: var(--navy-800); }
.map__office:hover .map__pin,
.map__office:focus-visible .map__pin { background: var(--accent); }
.map__office:focus-visible { outline: none; }
.map__office:focus-visible .map__chip {
  outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset);
}

/* The map is decoration with the same content as the list beneath it; below 900px
   only the list renders, so nothing is duplicated for a screen reader. */
@media (max-width: 899px) { .map { display: none; } }

.office-list { border-block-start: var(--hair) solid var(--rule); }
.office-list li { border-block-end: var(--hair) solid var(--rule); }
.office-list a {
  display: flex; align-items: baseline; gap: var(--space-s);
  padding-block: var(--space-s); text-decoration: none;
}
.office-list .city { color: var(--fg); font-size: var(--step-1); }
.office-list .region { color: var(--accent); font-size: var(--step--1); }
@media (min-width: 900px) { .reach .office-list { display: none; } }

/* ---------------------------------------------------------- principles ----- */

.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.principle {
  padding: var(--space-s) clamp(1rem, 2.5vw, 2rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
}
.principle + .principle { border-inline-start: var(--hair) solid var(--rule-strong); }
.principle__icon { color: var(--accent); }
.principle p { color: var(--fg-body); max-inline-size: 26ch; }
@media (max-width: 1023px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) 0; }
  .principle:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 639px) {
  .principles { grid-template-columns: 1fr; gap: 0; }
  .principle { border-inline-start: 0 !important; padding-block: var(--space-xl); }
  .principle + .principle { border-block-start: var(--hair) solid var(--rule-strong); }
}

/* ------------------------------------------------------------ CTA band ----- */

.cta-band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cta-band__row {
  display: grid; align-items: center;
  grid-template-columns: 1fr auto auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.cta-band h2 { color: var(--fg); max-inline-size: 14ch; }
.cta-band__rule { inline-size: var(--hair); block-size: 100%; min-block-size: 5rem;
  background: var(--rule-strong); }
@media (max-width: 767px) {
  .cta-band__row { grid-template-columns: 1fr; }
  .cta-band__rule { inline-size: 100%; block-size: var(--hair); min-block-size: 0; }
  .cta-band .btn { justify-content: center; }
}

/* --------------------------------------------------------------- footer ---- */

.site-footer { padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-l); }
.site-footer__top {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-m);
  padding-block-end: var(--space-l);
}
.site-footer__offices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-block-start: var(--hair) solid var(--rule);
}
.site-footer__offices li { padding-block: var(--space-m); padding-inline-end: var(--space-m); }
.site-footer__offices li + li { border-inline-start: var(--hair) solid var(--rule);
  padding-inline-start: var(--space-m); }
.office { display: flex; gap: var(--space-xs); font-style: normal; }
.office__icon { color: var(--accent); flex: none; }
.office__city { display: block; color: var(--fg); }
.office__region { display: block; color: var(--accent); font-size: var(--step--1); }
.office__street { display: block; color: var(--fg-muted); font-size: var(--step--1);
  margin-block-start: var(--space-3xs); max-inline-size: 24ch; }

.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s);
  border-block-start: var(--hair) solid var(--rule);
  padding-block-start: var(--space-m);
  color: var(--fg-muted); font-size: var(--step--1);
}
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { color: var(--fg); text-decoration: underline;
  text-underline-offset: .3em; }
.site-footer__legal ul { display: flex; gap: var(--space-m); }
.site-footer__disclaimer {
  max-inline-size: 78ch; color: var(--fg-muted); font-size: var(--step--1);
  margin-block-start: var(--space-m);
}
@media (max-width: 639px) {
  .site-footer__offices li + li { border-inline-start: 0; padding-inline-start: 0;
    border-block-start: var(--hair) solid var(--rule); }
}

/* ---------------------------------------------------------- page header ---- */

.page-header { padding-block: calc(var(--section-y) * .72) calc(var(--section-y) * .55); }
.page-header p { color: var(--fg-body); font-size: var(--step-1); max-inline-size: 52ch; }

/* ------------------------------------------------------------- prose ------- */

.prose > * + * { margin-block-start: var(--space-m); }
.prose h2 { font-size: var(--step-3); margin-block-start: var(--space-2xl); }
.prose h3 { font-size: var(--step-1); margin-block-start: var(--space-xl); }
.prose h2 + p, .prose h3 + p { margin-block-start: var(--space-s); }
.prose ul { display: grid; gap: var(--space-2xs); max-inline-size: var(--measure); }
.prose ul li { padding-inline-start: var(--space-m); position: relative; }
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .75em;
  inline-size: 8px; block-size: var(--hair); background: var(--accent);
}
.prose a { color: var(--fg); text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: .25em; }

/* Two-column split used by the inner pages. */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* Hairline definition rows, reused for criteria and facts. */
.facts { border-block-start: var(--hair) solid var(--rule); }
.facts > div {
  display: grid; gap: var(--space-3xs) var(--space-m);
  padding-block: var(--space-m);
  border-block-end: var(--hair) solid var(--rule);
}
@media (min-width: 640px) { .facts > div { grid-template-columns: 15rem 1fr; } }
.facts dt { color: var(--fg-muted); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .08em; }
.facts dd { color: var(--fg); }

/* ---------------------------------------------------------------- team ----- */

.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.member { display: flex; flex-direction: column; gap: var(--space-2xs); }
.member__portrait {
  aspect-ratio: 4 / 5; background: var(--surface);
  border: var(--hair) solid var(--rule);
  display: grid; place-items: center;
  color: var(--accent);
  margin-block-end: var(--space-s);
}
.member__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.member__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--fg); }
.member__role { color: var(--accent); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .08em; }
.member p { color: var(--fg-body); font-size: var(--step-0); }

.principals { border-block-start: var(--hair) solid var(--rule); }
.principals li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s);
  padding-block: var(--space-m);
  border-block-end: var(--hair) solid var(--rule);
}
.principals .name { color: var(--fg); font-size: var(--step-1); }
.principals .area { color: var(--accent); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .08em; }

/* ---------------------------------------------------------------- forms ---- */

.form { display: grid; gap: var(--space-m); max-inline-size: 44rem; }
.field { display: grid; gap: var(--space-2xs); }
.field--pair { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .field--pair { grid-template-columns: 1fr 1fr; } }

.field label { font-size: var(--step--1); font-weight: 600; color: var(--fg); }
.field .hint { font-size: var(--step--1); color: var(--fg-muted); }
.req { color: var(--accent-quiet); }

.field input, .field select, .field textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: .7rem .9rem;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  transition: border-color var(--dur) var(--ease-out-quart);
}
.field textarea { min-block-size: 8.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); }
/* Focus is an outline AND a border change -- never colour alone. */
.field :focus-visible { border-color: var(--accent-quiet); }

.field [aria-invalid="true"] { border-color: var(--danger); border-inline-start-width: var(--hair); }
.field__error {
  display: flex; align-items: center; gap: var(--space-2xs);
  color: var(--danger); font-size: var(--step--1); font-weight: 600;
}
.field__error svg { flex: none; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s);
  align-items: start; }
.consent input { inline-size: 22px; block-size: 22px; min-block-size: 0; margin-block-start: .2rem; }
.consent label { font-weight: 400; font-size: var(--step-0); color: var(--fg-body); }

.form__summary {
  border: var(--hair) solid var(--danger);
  padding: var(--space-m);
  color: var(--fg);
}
.form__summary h2 { font-size: var(--step-1); color: var(--danger); }
.form__summary ul { margin-block-start: var(--space-2xs); display: grid; gap: var(--space-3xs); }
.form__summary a { color: var(--fg); }

.form__status { font-size: var(--step-0); }
.form__status[data-state="error"] { color: var(--danger); font-weight: 600; }

.form__done { border: var(--hair) solid var(--rule-strong); padding: clamp(1.5rem,4vw,2.5rem); }
.form__done h2 { font-size: var(--step-2); }
.form__done p { margin-block-start: var(--space-s); }

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px;
  overflow: hidden; }

/* --------------------------------------------------------------- motion ---- */

/* There are deliberately NO scroll-triggered reveals on this site.
 *
 * The first build used `animation-timeline: view()` with `fill-mode: both` to draw in
 * the rule marks, the step connectors and the map pins. Because `both` holds the
 * from-state until the element enters its range, anything the timeline failed to
 * resolve stayed pinned at the start keyframe -- and a zero-sized element (the map
 * office anchors) never resolved at all. Every rule mark and all four map pins rendered
 * blank in a headless screenshot. That is the exact failure the "reveals must enhance an
 * already-visible default" rule exists to prevent, so the mechanism is gone rather than
 * patched. Do not reintroduce it.
 *
 * Motion instead lives where it cannot hide content: one transform-only entrance, and
 * hover / focus / state transitions. Nothing here changes opacity from zero, so a
 * renderer that skips animations still shows a complete page.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Transform only -- if this animation never runs, the content is still fully visible,
     merely un-offset. It excludes the h1 and the hero image so LCP is never delayed. */
  .hero__sub, .hero__actions, .stat-strip {
    animation: rise var(--dur-slow) var(--ease-out-expo) both;
  }
  .hero__actions { animation-delay: 60ms; }
  .stat-strip { animation-delay: 120ms; }
}

@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ utilities ---- */

.stack > * + * { margin-block-start: var(--space-m); }
.stack-l > * + * { margin-block-start: var(--space-xl); }
.text-center { text-align: center; }
.mt-0 { margin-block-start: 0; }

@media print {
  .site-header, .drawer, .cta-band, .nav-toggle { display: none; }
  [data-ground] { background: #fff !important; color: #000 !important; }
}