/* ==========================================================================
   Optimise Group
   Light-first: white ground, ink type, petrol for action and data, sand for
   warmth. Cards sit on a warm tint so they separate from the white. Petrol and ink bands invert via .band-petrol / .band-ink.

   Three values from the source concept fail on paper and are darkened here,
   keeping the hue:
     steel   #81838C -> #5C5F68   2.86 -> 4.83   small text
     greige  #B6AFA3 -> #7E7565   1.65 -> 3.44   large display only
   Sand and the original greige are kept for dark grounds and decoration,
   where they measure fine, and are never used as small text on paper.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --ink: #2a2c2d;
  --slate: #50575d;          /*  5.55 on paper */
  --steel: #5c5f68;          /*  4.83 on paper */
  --greige-display: #7e7565; /*  3.44 on paper, large only */
  --greige: #b6afa3;         /*  dark grounds and decoration only */
  --sand: #cabba7;
  --mist: #cfd6df;
  --petrol: #24534e;         /*  6.56 on paper */
  --petrol-mid: #2e6b64;
  --paper: #fbfaf8;      /* warm off-white, not stark */
  --pure: #fff;
  --surface: #f2ede6;   /* warm card tint; 1.19 against white, and it is the
                           border that does the separating, not the fill */
  --white: #fff;

  --line: rgb(42 44 45 / .14);
  --line-strong: rgb(42 44 45 / .3);
  --line-dark: rgb(230 223 214 / .18);

  --font: 'Raleway', ui-sans-serif, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  --r-pill: 999px;
  --r-panel: 18px;
  --r-soft: 12px;

  --nav-h: 74px;
  --focus: var(--petrol);
  --eyebrow: var(--steel);
  --body-muted: var(--slate);
  --label: var(--steel);
  --accent: var(--petrol);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-synthesis: none;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

nav a, .btn, .pill, .chip, .brand, .nav-cta, .cred, footer a { text-decoration: none; }

button { font: inherit; color: inherit; }

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

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
h1, h2, h3 { text-wrap: balance; }

/* No italic is used anywhere; emphasis is carried by colour. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--greige-display); }

section[id], header[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

::selection { background: var(--petrol); color: var(--paper); }

/* --------------------------------------------------------------------------
   2b. Depth
   Two devices, both cheap and both restrained. A fine grain over the whole
   page, which is what stops large flat colour fields reading as unfinished,
   and soft radial blooms inside the dark bands so they have a light source
   rather than being slabs. No section-divider shapes: wave and blob dividers
   are a template signature and read as less considered, not more.

   The grain is an SVG data URI, so it costs one tiny inline asset and no
   network request. It sits above everything at very low opacity and never
   takes pointer events, so it cannot affect interaction or measured
   contrast in any meaningful way.
   -------------------------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blooms. Each is a single radial gradient on a pseudo-element, clipped by
   the band, sized generously so no edge is visible. */
.hero, .band-ink, .band-petrol, .gap, .cta-box { position: relative; overflow: hidden; }
.hero > *, .band-ink > *, .band-petrol > *, .gap > *, .cta-box > * { position: relative; z-index: 1; }

.hero::before {
  content: "";
  position: absolute;
  top: -340px; right: -260px;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(202 187 167 / .5), transparent 62%);
  pointer-events: none;
}

.band-ink::before, .band-petrol::before {
  content: "";
  position: absolute;
  top: -280px; right: -200px;
  width: 820px; height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(202 187 167 / .12), transparent 66%);
  pointer-events: none;
}
.band-ink::after {
  content: "";
  position: absolute;
  bottom: -320px; left: -240px;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(36 83 78 / .38), transparent 64%);
  pointer-events: none;
}

.gap::before, .cta-box::before {
  content: "";
  position: absolute;
  top: -220px; right: -160px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(202 187 167 / .16), transparent 64%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* nothing here animates, but keep the grain out of the way for anyone who
     has asked for a calmer interface */
  body::after { opacity: .03; }
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 100;
  background: var(--petrol);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1340px; margin: 0 auto; padding: 0 56px; width: 100%; }

section { padding: 84px 0; }

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

/* --------------------------------------------------------------------------
   4. Dark bands
   -------------------------------------------------------------------------- */

.band-petrol, .band-ink {
  color: var(--paper);
  --body-muted: var(--mist);
  --label: var(--sand);
  --eyebrow: var(--sand);
  --line: var(--line-dark);
  --line-strong: rgb(230 223 214 / .3);
  --surface: rgb(230 223 214 / .07);
  --focus: var(--sand);
  --accent: var(--sand);
}
.band-petrol { background: var(--petrol); }
.band-ink { background: var(--ink); }

.band-petrol h1, .band-petrol h2, .band-petrol h3, .band-petrol h4,
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--white); }

.band-petrol h1 em, .band-petrol h2 em, .band-ink h1 em, .band-ink h2 em { color: var(--sand); }

/* --------------------------------------------------------------------------
   5. Shared elements
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow b { color: var(--ink); font-weight: 700; }
.band-petrol .eyebrow b, .band-ink .eyebrow b { color: var(--white); }
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line-strong); }
.eyebrow.plain { display: block; }
.eyebrow.plain::after { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--petrol);
  color: var(--paper);
  border: 1px solid var(--petrol);
  border-radius: var(--r-pill);
  padding: 17px 34px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.btn:hover { background: var(--petrol-mid); border-color: var(--petrol-mid); color: var(--white); transform: translateY(-2px); }
.btn .arw { color: var(--sand); font-weight: 400; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.band-petrol .btn { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.band-petrol .btn:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.band-petrol .btn .arw { color: var(--petrol); }
.band-ink .btn.ghost { color: var(--paper); border-color: var(--line-strong); }
.band-ink .btn.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--petrol);
  margin-top: 20px;
}
a.pill { transition: background .2s ease, color .2s ease, border-color .2s ease; }
a.pill:hover { background: var(--petrol); border-color: var(--petrol); color: var(--paper); }
.band-petrol .pill, .band-ink .pill { color: var(--sand); border-color: var(--line-strong); }
.band-ink a.pill:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  color: var(--steel);
}
.band-petrol .chip, .band-ink .chip { color: var(--mist); }

.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  margin: 0;
}
.section-head p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.65;
  color: var(--body-muted);
  margin: 16px 0 0;
}

/* On a white ground a transparent card with a 14% border has no presence.
   The note takes a petrol wash so it reads as an aside from us rather than
   another card, which is the same treatment the hero callout used. */
.note {
  margin-top: 22px;
  background: rgb(36 83 78 / .07);
  border: 1px solid rgb(36 83 78 / .18);
  border-left: 3px solid var(--petrol);
  border-radius: var(--r-soft);
  padding: 18px 20px;
  color: var(--body-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 860px;
}
.note strong { color: var(--petrol); font-weight: 700; }
.band-petrol .note, .band-ink .note { border-left-color: var(--sand); }
.band-petrol .note strong, .band-ink .note strong { color: var(--white); }

/* Hero eyebrow badge: a pill sitting on the ground rather than a bare label,
   which gives the top of the page an object to start from. */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pure);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 18px 9px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 30px;
  box-shadow: 0 1px 2px rgb(42 44 45 / .04);
}
.badge-pill .badge-mark {
  width: 26px; height: 18px; flex: none; color: var(--petrol);
}

/* The mark riding inside the primary button, as the reference does with its
   avatar. It only appears on the button that starts the report. */
.btn .btn-mark {
  width: 24px; height: 17px; flex: none;
  color: currentColor;
  opacity: .85;
}

/* Hero illustration: a line drawing with a stipple fill, drawn in petrol and
   sitting behind the type. Line weight is uniform so it reads as one object. */
.hero-art {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: min(520px, 40vw);
  color: var(--petrol);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1100px) { .hero-art { display: none; } }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.brand-mark { width: 38px; height: 26px; flex: none; color: var(--ink); }
.brand-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-name span { color: var(--steel); font-weight: 500; }
a.brand:hover .brand-mark { color: var(--petrol); }
.logo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--slate);
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--petrol); }

.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-cta {
  background: var(--petrol);
  border: 1px solid var(--petrol);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease;
}
.nav-cta:hover { background: var(--petrol-mid); border-color: var(--petrol-mid); color: var(--white); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav-toggle-bars { position: relative; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: background .18s ease; }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .22s ease;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.nav-sheet[data-open='true'] { display: block; }
.nav-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgb(42 44 45 / .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: sheet-fade .22s ease;
}
.nav-sheet-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 20px 24px 32px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  animation: sheet-in .26s cubic-bezier(.32, .72, 0, 1);
}
.nav-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--nav-h) - 20px); margin-bottom: 14px;
}
.nav-sheet-panel a:not(.btn) {
  padding: 15px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-sheet-panel a:not(.btn):last-of-type { border-bottom: 0; }
.nav-sheet-panel .btn { margin-top: 18px; justify-content: center; }
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
body.nav-open { overflow: hidden; }

/* Social */
.social { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.social a {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.social a:hover { background: var(--petrol); border-color: var(--petrol); color: var(--paper); transform: translateY(-2px); }
.social svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.nav .social a { width: 30px; height: 30px; }
.nav .social svg { width: 12.5px; height: 12.5px; }
.band-petrol .social a, .band-ink .social a { border-color: var(--line-strong); color: var(--mist); }
.band-petrol .social a:hover, .band-ink .social a:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.social-sheet { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.social-sheet a { width: 44px; height: 44px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding: 86px 0 76px; }
.hero h1 {
  font-size: clamp(40px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 19ch;
  margin: 0;
}
.hero h1 .turn { display: block; color: var(--greige-display); }

.lead { margin-top: 44px; }
.sub { font-size: 19px; line-height: 1.62; color: var(--slate); max-width: 56ch; margin: 0; }


.ctas { margin-top: 50px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-note { font-size: 13.5px; color: var(--slate); flex-basis: 100%; margin: 2px 0 0; }
.cta-note em { font-style: normal; color: var(--petrol); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Proof cards and sectors
   -------------------------------------------------------------------------- */

.proof-cards { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.pcard { padding: 44px 40px 48px 0; border-right: 1px solid var(--line); }
.pcard:nth-child(2) { padding-left: 40px; }
.pcard:nth-child(3) { padding-left: 40px; border-right: none; padding-right: 0; }
.pcard-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 10px; margin-bottom: 18px;
  border-radius: var(--r-pill); background: rgb(202 187 167 / .5);
  font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--ink);
}
.pcard h3 { font-size: 18px; letter-spacing: -.01em; margin: 0 0 12px; }
.pcard p:not(.pcard-num) { font-size: 14.5px; line-height: 1.72; color: var(--slate); margin: 0; }

.sectors {
  border-top: 1px solid var(--line);
  padding: 30px 0 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--steel);
}
.sectors .dot { color: var(--steel); }
.sectors .region {
  margin-left: auto; color: var(--petrol);
  display: flex; align-items: center; gap: 9px;
  border: 1px solid rgb(36 83 78 / .3);
  border-radius: var(--r-pill); padding: 7px 16px;
}
.sectors .region::before { content: ""; width: 6px; height: 6px; background: var(--petrol); border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   9. Capability bento
   -------------------------------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 30px;
  min-height: 230px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tile.large { grid-column: span 6; }
.tile.medium { grid-column: span 3; }
.tile.wide { grid-column: span 8; }
.tile.smallwide { grid-column: span 4; }
.tile.accent { background: var(--petrol); border-color: var(--petrol); }
.tile.accent h3 { color: var(--white); }
.tile.accent p:not(.num) { color: var(--mist); }
.tile.accent .num { color: var(--sand); }
.tile.accent .chip { color: var(--mist); border-color: var(--line-dark); }
.tile.dark { background: var(--ink); border-color: var(--ink); }
.tile.dark h3 { color: var(--white); }
.tile.dark p:not(.num) { color: var(--mist); }
.tile.dark .num { color: var(--sand); }
.tile.dark .chip { color: var(--mist); border-color: var(--line-dark); }
.tile .num { font-size: 10px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--steel); margin: 0; }
.tile h3 { font-size: 26px; margin: 18px 0 10px; }
.tile p:not(.num) { color: var(--slate); margin: 0; max-width: 520px; font-size: 14.5px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   10. Problem selector
   -------------------------------------------------------------------------- */

.question-panel { border-radius: var(--r-panel); padding: 0; }
.question-panel h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; max-width: 900px; margin: 0 0 16px; }
.question-panel .intro { color: var(--mist); max-width: 720px; font-size: 16px; line-height: 1.7; margin: 0; }

.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; }
.choice {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-soft);
  background: rgb(230 223 214 / .05);
  color: var(--paper);
  font-family: var(--font);
  text-align: left;
  padding: 20px;
  min-height: 112px;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.choice:hover, .choice[aria-pressed='true'] {
  transform: translateY(-3px);
  border-color: var(--sand);
  background: rgb(230 223 214 / .1);
}
.choice .idx { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--sand); }
.choice b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.choice-result {
  margin-top: 16px; border-top: 1px solid var(--line-dark); padding-top: 24px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center;
}
.choice-result[hidden] { display: none; }
.choice-result h3 { font-size: 24px; margin: 0 0 8px; color: var(--white); }
.choice-result h3:focus { outline: none; }
.choice-result p:not(.eyebrow) { color: var(--mist); margin: 0; font-size: 15px; line-height: 1.7; }
.choice-result .actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   11. The Gap Report
   -------------------------------------------------------------------------- */

.gap-outer { padding: 60px 0; }
.gap {
  background: var(--petrol);
  color: var(--paper);
  border-radius: var(--r-panel);
  padding: 66px 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center;
}
.gap-label {
  display: inline-block; border-radius: var(--r-pill);
  background: transparent; border: 1px solid rgb(202 187 167 / .4);
  padding: 7px 16px; margin: 0 0 20px;
  font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--sand);
}
.gap h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; color: var(--white); margin: 0; }
.gap p:not(.gap-label) { margin: 18px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--mist); max-width: 46ch; }
.gap .btn { margin-top: 30px; }

.panel {
  background: rgb(230 223 214 / .08);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-panel);
  padding: 28px 30px 24px;
}
.meter-row { display: flex; align-items: center; gap: 18px; padding: 13px 0; }
.meter-name { flex: 0 0 104px; font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--mist); }
.meter-track { flex: 1; height: 7px; border-radius: var(--r-pill); background: rgb(230 223 214 / .18); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--r-pill); background: var(--sand); width: var(--pct, 0%); transition: width .7s cubic-bezier(.32,.72,0,1); }
.meter-fill.low { background: var(--white); }
.meter-val { flex: 0 0 34px; text-align: right; font-size: 13px; font-weight: 700; color: var(--paper); }
.meter-note {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line-dark);
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--sand);
}

/* Quiz, inside the petrol panel */
.quiz { display: flex; flex-direction: column; min-height: 400px; }
.quiz-progress-top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--mist); margin-bottom: 12px; }
.quiz-dim { color: var(--paper); font-weight: 700; }
.quiz .meter-track { margin-bottom: 26px; }
.quiz-field { border: 0; padding: 0; margin: 0; }
.quiz-legend { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--white); padding: 0; margin-bottom: 18px; }
.quiz-legend:focus { outline: none; }
.quiz-options { display: grid; gap: 8px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line-dark); border-radius: var(--r-soft);
  padding: 14px 16px; cursor: pointer;
  background: rgb(230 223 214 / .05);
  transition: border-color .18s ease, background .18s ease;
}
.quiz-opt:hover { border-color: var(--line-strong); background: rgb(230 223 214 / .1); }
.quiz-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz-opt-mark { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 2px solid rgb(230 223 214 / .45); border-radius: 50%; position: relative; }
.quiz-opt-text { font-size: 14.5px; color: var(--paper); line-height: 1.5; }
.quiz-opt:has(input:checked) { border-color: var(--sand); background: rgb(230 223 214 / .12); }
.quiz-opt:has(input:checked) .quiz-opt-text { color: var(--white); }
.quiz-opt input:checked + .quiz-opt-mark { border-color: var(--sand); }
.quiz-opt input:checked + .quiz-opt-mark::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--sand); }
.quiz-opt:focus-within { outline: 3px solid var(--sand); outline-offset: 3px; }

.diag-start, .quiz-btn {
  margin-top: 20px; width: 100%;
  font-family: var(--font);
  background: var(--sand); color: var(--ink); border: 1px solid var(--sand);
  border-radius: var(--r-pill); padding: 15px 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.diag-start:hover, .quiz-btn:hover { background: var(--white); border-color: var(--white); }
.quiz-btn.ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); }
.quiz-btn.ghost:hover { background: rgb(230 223 214 / .12); border-color: var(--line-strong); color: var(--white); }
.quiz-btn[disabled] { background: rgb(230 223 214 / .05); border-color: var(--line-dark); color: var(--paper); cursor: not-allowed; }
.quiz-btn[disabled]:hover { background: rgb(230 223 214 / .05); border-color: var(--line-dark); }
.quiz-nav { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.quiz-nav .quiz-btn { margin-top: 0; }

.result-verdict { margin: 22px 0 0; border-top: 1px solid var(--line-dark); padding-top: 20px; }
.result-verdict h4 { font-size: 20px; margin: 0 0 12px; color: var(--white); }
.result-verdict h4 strong { color: var(--sand); }
.result-moves { margin: 0; padding-left: 20px; color: var(--mist); font-size: 14px; line-height: 1.7; }
.result-moves li { margin-bottom: 9px; }
.result-method, .result-optional, .score-foot { font-size: 11.5px; color: var(--mist); margin: 14px 0 0; line-height: 1.6; }

/* --------------------------------------------------------------------------
   12. Intelligence
   -------------------------------------------------------------------------- */

.intel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.intel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 26px; min-height: 190px;
  display: flex; flex-direction: column;
}
.intel small { display: block; color: var(--steel); font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: auto; padding-bottom: 28px; }
.intel strong { font-size: 38px; font-weight: 800; letter-spacing: -.03em; display: block; color: var(--ink); }
.intel span { font-size: 13px; color: var(--slate); }
.intel.feature { border-color: var(--petrol); }
.intel.feature small, .intel.feature strong { color: var(--petrol); }

/* --------------------------------------------------------------------------
   13. Optimise OS
   -------------------------------------------------------------------------- */

.product-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.product-card h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; margin: 0 0 14px; }
.product-card .sub { font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--petrol); margin: 0 0 18px; }
.product-card p:not(.sub):not(.eyebrow) { color: var(--slate); font-size: 15px; line-height: 1.7; margin: 0; }

.dashboard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; box-shadow: 0 24px 60px rgb(42 44 45 / .1); }
.dash-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-tab {
  font-family: var(--font); border: 1px solid var(--line); background: transparent; color: var(--slate);
  border-radius: var(--r-pill); padding: 8px 14px; min-height: 36px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dash-tab[aria-selected='true'] { background: var(--petrol); color: var(--paper); border-color: var(--petrol); }
.dash-top { display: flex; justify-content: space-between; color: var(--steel); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-soft); padding: 16px; min-height: 90px; }
.metric span { display: block; color: var(--steel); font-size: 10.5px; margin-bottom: 8px; }
.metric b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.metric.wide { grid-column: 1 / -1; min-height: 130px; }
.metric.wide b { font-size: 14.5px; line-height: 1.6; font-weight: 400; color: var(--slate); }
.dash-caption { margin: 14px 0 0; font-size: 11.5px; color: var(--steel); }

/* --------------------------------------------------------------------------
   14. Proof / case study
   -------------------------------------------------------------------------- */

.proof-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.case { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 34px; display: flex; flex-direction: column; }
.badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--petrol);
  border: 1px solid rgb(36 83 78 / .35); border-radius: var(--r-pill);
  padding: 8px 14px; align-self: flex-start;
}
.big-result { font-size: clamp(34px, 5vw, 68px); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 32px 0 28px; color: var(--ink); }
.big-result .delta { color: var(--petrol); }
.case-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.case-step { border-top: 1px solid var(--line); padding-top: 15px; }
.case-step small { color: var(--steel); font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; }
.case-step b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin: 9px 0; }
.case-step span { display: block; font-size: 13.5px; color: var(--slate); line-height: 1.65; }
.case-foot { margin: 24px 0 0; font-size: 11.5px; color: var(--steel); }
.case-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.case-side h3 { font-size: 26px; margin: 0; }
.case-side p:not(.eyebrow) { color: var(--slate); font-size: 15px; line-height: 1.7; }
.case-side .pill { align-self: flex-start; }

/* --------------------------------------------------------------------------
   15. Founder
   -------------------------------------------------------------------------- */

.founder { display: grid; grid-template-columns: .42fr .58fr; gap: 50px; align-items: start; }
.founder-portrait { aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; background: var(--surface); }
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.founder-portrait picture { display: contents; }
.founder-copy h3 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 6px; }
.founder-role { font-size: 10px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--petrol); margin: 0 0 20px; }
.founder-copy p:not(.founder-role) { color: var(--slate); font-size: 15px; line-height: 1.72; margin: 0 0 16px; max-width: 620px; }
.founder-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

.cred {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 20px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--r-soft);
  transition: border-color .2s ease;
}
.cred:hover { border-color: var(--petrol); }
.cred-logo { flex: none; display: flex; align-items: center; background: var(--white); border-radius: 8px; padding: 9px 11px; }
.cred-logo img { width: 112px; height: auto; display: block; }
.cred-logo picture { display: contents; }
.cred-text { font-size: 12.5px; color: var(--slate); max-width: 190px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   16. Ventures, CTA, footer
   -------------------------------------------------------------------------- */

.venture { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; border-top: 1px solid var(--line-dark); padding-top: 42px; }
.venture h3 { font-size: clamp(26px, 3vw, 38px); margin: 0; color: var(--white); }
.venture p { font-size: 17px; color: var(--mist); margin: 0; line-height: 1.7; }
.venture-label { cursor: default; }
.venture-links { display: flex; gap: 10px; flex-wrap: wrap; }

.cta { padding-bottom: 96px; }
.cta-box {
  background: var(--petrol);
  --eyebrow: var(--sand);
  --body-muted: var(--mist);
  --line-strong: rgb(230 223 214 / .3);
  border-radius: var(--r-panel); padding: 58px 60px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: end; }
.cta-box h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.08; margin: 0; color: var(--white); }
.cta-box p:not(.eyebrow) { color: var(--mist); font-size: 16px; line-height: 1.7; margin: 0; }
.cta-box .btn { margin-top: 18px; }

footer { border-top: 1px solid var(--line); padding: 34px 0 44px; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 22px 34px; flex-wrap: wrap; }
.foot-meta { font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--steel); display: flex; flex-direction: column; gap: 7px; }
.foot-meta .contact { color: var(--slate); text-transform: none; letter-spacing: .3px; font-size: 13px; font-weight: 400; }
.foot-meta .contact a:hover { color: var(--petrol); }
.footer-links { display: flex; gap: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.footer-links a { color: var(--steel); }
.footer-links a:hover { color: var(--petrol); }
.footer-note { margin: 24px 0 0; font-size: 11.5px; color: var(--steel); max-width: 900px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   17. Legal pages
   -------------------------------------------------------------------------- */

.legal { padding: 64px 0 88px; max-width: 780px; }
.legal h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; margin: 0 0 12px; }
.legal .updated { color: var(--steel); font-size: 13px; margin: 0 0 40px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; }
.legal p:not(.eyebrow), .legal li { color: var(--slate); font-size: 15.5px; line-height: 1.75; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.no-js .diag-start, .no-js .nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   18. Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .wrap { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav .social { display: none; }

  .founder, .product-card, .proof-grid, .venture, .cta-box, .gap { grid-template-columns: 1fr; }
  .gap { gap: 40px; padding: 44px 28px; }
  .gap-outer { padding: 40px 0; }
  .founder { gap: 30px; }
  .founder-portrait { aspect-ratio: 1 / 1; }
  .venture { gap: 26px; }
  .cta-box { padding: 40px 28px; }
  .product-card { padding: 32px; }

  .proof-cards { grid-template-columns: 1fr; }
  .pcard, .pcard:nth-child(2), .pcard:nth-child(3) {
    padding: 30px 0; border-right: none; border-bottom: 1px solid var(--line);
  }
  .pcard:nth-child(3) { border-bottom: none; }

  .bento { grid-template-columns: 1fr 1fr; }
  .tile.large, .tile.medium, .tile.wide, .tile.smallwide { grid-column: auto; }
  .intel-grid { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .choice-result { grid-template-columns: 1fr; }
  .choice-result .actions { justify-content: flex-start; }
  .sectors .region { margin-left: 0; }

  /* The eyebrow is a flex row so the trailing rule can fill the line. Once it
     wraps, that gap turns into ragged spacing and the rule strands, so below
     this width it flows as ordinary text instead. */
  .eyebrow {
    display: block;
    letter-spacing: 1.9px;
    line-height: 2;
    margin-bottom: 30px;
  }
  .eyebrow::after { display: none; }

  /* Same reason as the eyebrow: the sector list is running text, so once it
     wraps the flex gap becomes ragged spacing and the region pill ends up
     stranded beside the last sector. As a block the sectors flow normally and
     the pill, being a block-level flex container, takes its own line. */
  .sectors { display: block; line-height: 2.1; letter-spacing: 2.2px; }
  .sectors .dot { margin: 0 7px; }
  .sectors .region { margin-top: 18px; }
}

@media (max-width: 620px) {
  .hero { padding: 60px 0 56px; }
  .hero h1 { font-size: clamp(32px, 9vw, 46px); letter-spacing: -.018em; max-width: none; }
  section { padding: 64px 0; }
  .nav-cta { display: none; }

  .bento, .intel-grid, .case-steps, .dash-grid, .choice-grid { grid-template-columns: 1fr; }

  .choice { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 56px; padding: 14px 16px; }
  .choice .idx { flex: none; }
  .choice b { font-size: 15px; }
  .choice:hover, .choice[aria-pressed='true'] { transform: none; }

  .ctas { display: grid; }
  .ctas .btn { justify-content: center; }
  .quiz-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .tile { min-height: 200px; padding: 24px; }
  .case, .case-side { padding: 26px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
}

@media (pointer: coarse) {
  .dash-tab { min-height: 44px; padding: 10px 16px; }
  .social a { width: 44px; height: 44px; }
  a.pill { min-height: 44px; }
  .footer-links a { display: inline-block; padding: 10px 0; }
  .nav-sheet-panel a { padding: 17px 4px; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .choice:hover, .choice[aria-pressed='true'], .btn:hover, .social a:hover { transform: none; }
  .nav-sheet-panel { animation: sheet-fade .01ms ease; }
}

/* Static meter widths for the illustrative sample (no inline style, CSP) */
.meter-fill.pct-33 { --pct: 33%; }
.meter-fill.pct-56 { --pct: 56%; }
.meter-fill.pct-78 { --pct: 78%; }
.meter-fill.pct-89 { --pct: 89%; }