/* ==========================================================================
   Noble Arc — Design System
   Built directly from the Noble Arc brand board (Aug 2026):
   Deep Teal / Bright Teal / Faded Teal / Stone / Grey / Gold / Plum.
   Poppins 600 for display and headings, Inter 300–600 for body/UI,
   Lora italic for quotes and taglines only (one line, never a paragraph).
   Plum is a punctuation-scale detail mark only — never a button fill,
   never running text. Gold is used freely, at full strength, for stats,
   badges and data — never as a large background fill elsewhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Inter:wght@300;400;500;600&family=Lora:ital@1&display=swap');

:root {
  color-scheme: light;

  /* Brand colour tokens — exact values from the brand board */
  --teal-deep: #0D3D42;      /* headings, primary actions, statement bands */
  --teal-bright: #187F86;    /* links, active states, overlines, icons */
  --teal-bright-text: #0F6D73; /* bright teal, darkened ~8% for AA text on Stone */
  --teal-faded: #2E6F72;     /* background arcs — nothing else */
  --stone: #F6F5F3;          /* the page */
  --grey: #818181;           /* chrome, rules, dividers, disabled */
  --gold: #EFC180;           /* the working accent — stats, badges, chart series */
  --plum: #833E62;           /* detail mark only — full stops, bullets, underlines */
  --tint: #EFEEEB;           /* tinted block, one step down from Stone */
  --white: #FFFFFF;

  /* Legacy aliases kept so component rules don't need renaming */
  --teal-sea: var(--teal-bright);
  --teal-sea-dark: var(--teal-bright-text);
  --teal-deep-80: #164852;
  --ink: var(--teal-deep);
  --ink-muted: #4A4947;      /* body copy — neutral dark grey, AA on Stone */
  --gold-deep: var(--teal-bright-text); /* eyebrows/overlines are Bright Teal's job, not gold */
  --bone: var(--tint);
  --bone-line: #E2E1DE;
  --paper: var(--stone);
  --paper-white: var(--white);

  /* Semantic */
  --color-bg: var(--stone);
  --color-bg-band: var(--tint);
  --color-surface: var(--white);
  --color-text: var(--teal-deep);
  --color-text-muted: var(--ink-muted);
  --color-border: var(--bone-line);
  --color-interactive: var(--teal-bright);
  --color-interactive-hover: var(--teal-bright-text);
  --color-focus: var(--teal-bright-text);

  /* Type */
  --font-head: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-quote: 'Lora', Georgia, serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-section: 6rem;
  --space-section-sm: 3.5rem;

  /* Radii + shadow — calm radii, warm-grey borders, one soft shadow */
  --radius-btn: 4px;
  --radius-tag: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(13, 61, 66, 0.04), 0 8px 20px -12px rgba(13, 61, 66, 0.16);
  --shadow-lift: 0 2px 4px rgba(13, 61, 66, 0.05), 0 16px 32px -16px rgba(13, 61, 66, 0.22);

  --container-w: 1200px;
  --container-wide: 1440px;
  --header-h: 5.75rem;  /* pill + its outer padding, used to clear the fixed nav */
  --border-hair: 1px solid var(--color-border);

  /* On-teal text ramp. Solid values, not alpha, so contrast is verifiable
     against the deep teal plane and against the arc where it crosses. */
  --on-teal: #FFFFFF;
  --on-teal-muted: #C5D4D4;
  --on-teal-rule: #2C585C;

  /* Display scale — the page gets its energy from the gap between these
     and 1rem body copy, not from decorative colour. */
  --fs-display: clamp(2.5rem, 1.15rem + 5.1vw, 4.75rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3.2vw, 3.75rem);
  --fs-h2: clamp(1.85rem, 1.45rem + 1.7vw, 2.75rem);
}

/* --------------------------------------------------------------------- */
/* Reset                                                                  */
/* --------------------------------------------------------------------- */
*, *::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; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 1rem;
  min-height: 100svh;
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--teal-deep);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.125rem; font-weight: 500; }

p { max-width: 62ch; }
p.no-measure { max-width: none; }

/* --------------------------------------------------------------------- */
/* Accessibility                                                         */
/* --------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On a deep teal plane the bright-teal ring disappears; gold is the
   reversed focus colour and clears 3:1 against #0D3D42 comfortably. */
.on-teal :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--teal-deep);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.15s ease;
  font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* The Home header is fixed, so anchor targets need to clear it. */
#main { scroll-margin-top: var(--header-h); }

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

/* --------------------------------------------------------------------- */
/* Layout                                                                 */
/* --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2.5rem; } }

.section {
  padding-block: var(--space-section-sm);
}
@media (min-width: 900px) {
  .section { padding-block: var(--space-section); }
}

.band-bone { background: var(--bone); }
.band-paper { background: var(--paper); }
.band-teal {
  background: var(--teal-deep);
  color: var(--paper);
}
.band-teal h1, .band-teal h2, .band-teal h3, .band-teal h4 { color: var(--white); }
.band-teal p { color: rgba(250, 247, 243, 0.82); }

.band-teal .band-teal .section-head p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 1.0625rem; }

.stack { display: grid; gap: var(--space-3); }

/* Quote / tagline styling — Lora italic, one line only */
.quote-line {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  color: var(--teal-deep);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  min-height: 44px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Primary actions are Deep Teal's job, per the brand board */
.btn-primary {
  background: var(--teal-deep);
  color: var(--white);
}
.btn-primary:hover { background: var(--teal-deep-80); }

.btn-primary::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-primary.no-icon::before { display: none; }

/* White surface button — for use on Deep Teal statement bands. Gold and
   plum never fill a button, per the brand board. */
.btn-white {
  background: var(--white);
  color: var(--teal-deep);
}
.btn-white:hover { background: var(--stone); }
.btn-white::before { background-color: var(--teal-deep); }

.btn-outline {
  background: transparent;
  border-color: var(--grey);
  color: var(--teal-deep);
}
.btn-outline:hover { background: rgba(13, 61, 66, 0.05); border-color: var(--teal-deep); }

.band-teal .btn-outline { color: var(--paper); border-color: rgba(250, 247, 243, 0.4); }
.band-teal .btn-outline:hover { background: rgba(250, 247, 243, 0.1); border-color: var(--paper); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--teal-bright-text);
  min-height: 44px;
}
.btn-link:hover { color: var(--teal-deep); }
.btn-link svg { transition: transform 0.15s ease; }
.btn-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------- */
/* Header / Nav                                                          */
/* --------------------------------------------------------------------- */
/* A floating pill, inset from the page edges, that sits over whatever it
   is scrolling across. At the top of the page there is no backdrop, so the
   pill reads as an object on the deep teal hero plane; once scrolled, a
   stone backdrop appears so it never floats over running text. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  padding-block: 0.85rem;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--bone-line);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: -1;
}
.site-header.is-stuck::before { opacity: 1; }

.site-header > .container { max-width: var(--container-wide); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.5rem 0.5rem 0.5rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}
/* The right padding has to clear the pill's own 999px end-cap, not just its
   straight edge: at the CTA's corner height the curve has already pulled in
   by ~10px, so a 4px-radius button set flush to the straight edge pokes out
   through the curve. 1.15rem keeps the square button inside the round end. */
@media (min-width: 1180px) { .header-inner { padding: 0.45rem 1.15rem 0.45rem 1.5rem; } }

.brand-mark { display: inline-flex; align-items: center; min-height: 44px; }
.brand-mark img { height: 34px; width: auto; }
@media (min-width: 640px) { .brand-mark img { height: 38px; } }

.nav-desktop {
  display: none;
}
@media (min-width: 1180px) {
  .nav-desktop {
    display: flex;
    align-items: center;
  }
  .nav-desktop ul { display: flex; gap: 1.15rem; }
  .nav-desktop a {
    font-weight: 500;
    font-size: 0.845rem;
    letter-spacing: -0.005em;
    padding: 0.5rem 0.1rem;
    position: relative;
    min-height: 44px;
    min-width: 44px;          /* short labels ("Home", "About") still get a 44px target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  .nav-desktop a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.45rem;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.15s ease;
  }
  .nav-desktop a:hover::after,
  .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-desktop a[aria-current="page"] { color: var(--teal-sea-dark); }
}
@media (min-width: 1340px) { .nav-desktop ul { gap: var(--space-3); } .nav-desktop a { font-size: 0.9rem; } }

/* The pill only has room for the CTA once the nav itself has stopped
   fighting for width. Below this the hero CTA is the first thing on screen. */
.header-cta { display: none; }
@media (min-width: 1280px) {
  .header-cta { display: inline-flex; font-size: 0.85rem; padding: 0.75rem 1.25rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: var(--border-hair);
  border-radius: var(--radius-sm);
}
@media (min-width: 1180px) { .nav-toggle { display: none; } }

.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile { display: none; }
.nav-mobile.is-open { display: block; margin-top: 0.6rem; }
@media (min-width: 1180px) { .nav-mobile { display: none !important; } }

.nav-mobile > .container { max-width: var(--container-wide); }
.nav-mobile .nav-mobile-panel {
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 0.4rem 1.15rem 1rem;
  /* Short landscape viewports: the panel scrolls rather than running off. */
  max-height: calc(100svh - var(--header-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-mobile ul { padding: 0.25rem 0; }
.nav-mobile li:last-child a { border-bottom: 0; }
.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-weight: 500;
  font-size: 1.02rem;
  border-bottom: var(--border-hair);
}
.nav-mobile .header-cta { display: inline-flex; margin-top: 0.75rem; width: 100%; justify-content: center; font-size: 0.95rem; padding: 0.85rem 1.4rem; }

/* --------------------------------------------------------------------- */
/* Footer                                                                 */
/* --------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--teal-deep);
  color: rgba(250, 247, 243, 0.85);
  padding-block: var(--space-5) var(--space-4);
}
.site-footer .footer-grid,
.site-footer .footer-bottom { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
/* Footer type runs a step down from body copy. It is reference material,
   not reading matter, so it should sit quietly under the page. */
.footer-brand img { height: 26px; width: auto; margin-bottom: var(--space-3); }
.footer-brand p {
  color: rgba(250, 247, 243, 0.72);
  max-width: 44ch;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.footer-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.footer-links li { margin-bottom: 0; }
/* 36px clears the 24x24 CSS-pixel AA target-size minimum with room to
   spare, without the loose, over-spaced rhythm a full 44px mobile-app
   target gave this desktop text-link list. */
.footer-links a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.footer-links a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(250, 247, 243, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(250, 247, 243, 0.62);
}
.footer-legal-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.footer-legal-links a:hover { color: var(--gold); }

/* --------------------------------------------------------------------- */
/* Cards                                                                  */
/* --------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--teal-sea-dark);
}
.card-icon svg { width: 26px; height: 26px; }

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--color-text-muted); font-size: 0.98rem; }

.card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:has(a):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Card variants — the surface is always the plain white card (per the
   brand board's three-surface system); only the icon chip carries colour. */
.card-tint-teal .card-icon { background: rgba(24, 127, 134, 0.14); color: var(--teal-bright-text); }
.card-tint-gold .card-icon { background: rgba(239, 193, 128, 0.35); color: var(--teal-deep); }
.card-tint-deep .card-icon { background: rgba(13, 61, 66, 0.10); color: var(--teal-deep); }

/* card-solid / card-accent: all three now resolve to the same compliant
   white-card treatment (white bg, hairline border, one soft shadow) —
   only the icon chip carries colour. Solid colour fills and accent bars
   aren't part of the brand's three approved surfaces (white card / tinted
   block / statement band), so those variants no longer add a fill. */
.card-solid .card-icon { background: rgba(13, 61, 66, 0.08); color: var(--teal-deep); }
.card-solid-teal .card-icon { background: rgba(24, 127, 134, 0.14); color: var(--teal-bright-text); }
.card-solid-gold .card-icon { background: rgba(239, 193, 128, 0.35); color: var(--teal-deep); }
.card-solid-deep .card-icon { background: rgba(13, 61, 66, 0.10); color: var(--teal-deep); }

.card-accent.accent-teal .card-icon { background: rgba(24, 127, 134, 0.14); color: var(--teal-bright-text); }
.card-accent.accent-gold .card-icon { background: rgba(239, 193, 128, 0.35); color: var(--teal-deep); }
.card-accent.accent-deep .card-icon { background: rgba(13, 61, 66, 0.10); color: var(--teal-deep); }

/* --------------------------------------------------------------------- */
/* Tags — 2px radius, per the brand board                                */
/* --------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-tag);
  background: rgba(24, 127, 134, 0.12);
  color: var(--teal-bright-text);
}
.tag-gold { background: var(--gold); color: var(--teal-deep); }

/* --------------------------------------------------------------------- */
/* The Arc — the one graphic device the brand board permits.             */
/* Faded teal only (gold competes with the mark at this scale). Cropped, */
/* bleeding off the frame edge, sweeping upward left to right. One per   */
/* artefact — never blown past frame, never two in one view.             */
/* --------------------------------------------------------------------- */
.brand-arc {
  position: absolute;
  left: -4%;
  width: 108%;
  pointer-events: none;
  display: block;
}
.brand-arc path { fill: var(--teal-faded); }
.brand-arc.arc-under-content { opacity: 0.65; }
.brand-arc.arc-behind-text { opacity: 0.22; }

.site-footer .brand-arc { bottom: 0; height: 200px; }
@media (min-width: 900px) { .site-footer .brand-arc { height: 260px; } }

/* Section decoration wrapper — clips the arc to its own artefact */
.section-decorated { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------- */
/* Utility grids                                                         */
/* --------------------------------------------------------------------- */
.grid-2 { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; } }

.grid-3 { display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-6 { display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-6 { grid-template-columns: repeat(3, 1fr); } }

/* ===================================================================== */
/* HOME — HERO                                                           */
/* The page opens on a deep teal plane rather than on Stone. The nav pill */
/* floats on it, the photograph is cut into it flush to the right edge,   */
/* and the single arc sweeps under the type. All the energy comes from    */
/* the tonal jump and the display scale, not from decorative colour.      */
/* ===================================================================== */

/* On Home only, the pill overlays the hero instead of stacking above it. */
.home .site-header { position: fixed; left: 0; right: 0; }

/* Home runs on the wide measure so every section, the hero type and the nav
   pill share one left edge. Measure is controlled per component instead. */
.home .container { max-width: var(--container-wide); }

/* Legacy hero, used by the interior pages: a light Stone opening. Left
   intact so the Leadership Transition Coaching page is unaffected. */
/* ===================================================================== */
/* INTERIOR PAGE HERO                                                     */
/* Every page except Home opens on this: Stone ground, the arc cropped    */
/* bottom-left in faded teal, rule label, display H1, one lede.           */
/* ===================================================================== */
/* Interior pages open on a Deep Teal band so they carry the same weight as
   the Home hero. Stone alone read as a bare title block. */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--teal-deep);
  color: var(--on-teal);
  padding-block: calc(var(--header-h, 84px) + var(--space-5)) var(--space-6);
}
/* The arc is the one graphic device, in faded teal, cropped off the edge. */
.page-hero .brand-arc { bottom: -34%; opacity: 0.5; height: 320px; }
.page-hero .container { position: relative; z-index: 1; }

.page-hero h1 { font-size: var(--fs-h1); max-width: 20ch; margin-bottom: var(--space-3); color: var(--white); }
/* Bright Teal is 2.5:1 on Deep Teal, so the accent word takes gold here. */
.page-hero h1 .accent { color: var(--gold); }
.page-hero .full-stop { color: var(--gold); }
/* Eyebrows on any Deep Teal ground take gold: Bright Teal is only 2.5:1 there.
   .on-teal is handled with the .overline block; these are the two dark-band
   contexts that do not carry that class. */
.page-hero .overline.overline,
.band-teal .overline.overline { color: var(--gold); }

/* Components that also appear on light grounds need their body colour lifted
   when they land on a Deep Teal band. Scoped through .on-teal so the light
   version is untouched, and specific enough to outrank the component's own
   colour rule, which a bare `.band-teal p` would not do. */
.on-teal .expect-list p,
.on-teal .section-intro p,
.on-teal .statement-body p { color: rgba(255, 255, 255, 0.86); }

/* Where a Deep Teal section runs straight into the Deep Teal closing band,
   the same hairline that separates the closing band from the footer keeps
   the two from reading as one slab. */
.band-teal + .closing { border-top: 1px solid var(--on-teal-rule); }

/* Six cards run three-up on desktop and two-up on tablet, so the grid never
   leaves a single orphan on the last row the way a 3-only rule would. */
@media (min-width: 1024px) { .why-grid-6 { grid-template-columns: repeat(3, 1fr); } }

/* Four cards read best as a balanced square, not a cramped four-across row
   or a lopsided 3+1. Doubled class: .why-grid's own 720px rule sits later in
   the file at equal specificity and would otherwise win the 3-column layout
   back on any element carrying both classes. */
@media (min-width: 720px) { .why-grid-4.why-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ===================================================================== */
/* TILE CARDS — solid-colour header band, plain body beneath              */
/* ===================================================================== */
.tile-grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.tile-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
  transition: box-shadow 0.18s ease;
}
.tile-card:hover { box-shadow: var(--shadow-soft); }
.tile-card:focus-visible { outline: 3px solid var(--teal-bright-text); outline-offset: 3px; }
/* The head is a fixed-height band, not a shrink-to-fit one: a two-line title
   next to a one-line title would otherwise leave the coloured blocks at
   different depths across the row. Centring holds the shorter titles in the
   middle of that fixed band. A subtle gradient and the gold underline stop
   the block reading as a flat slab. */
.tile-card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  /* Flat colour declared first so the band still paints if the gradient is
     unsupported, and so tooling can read the real backdrop behind the text. */
  background-color: var(--teal-deep);
  background-image: linear-gradient(160deg, #12525A 0%, var(--teal-deep) 70%);
  border-bottom: 3px solid var(--gold);
}
.tile-card-head h3 { color: var(--white); font-size: 1.1875rem; margin: 0; text-wrap: balance; }
.tile-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.tile-card-body p { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6; flex: 1; }
.tile-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--teal-bright-text);
}
.tile-card:hover .tile-card-cta { color: var(--teal-deep); }

/* A section-level action sitting under a card grid rather than beside it. */
.section-action { margin-top: var(--space-5); }

/* ===================================================================== */
/* LEAD FIGURE — eyebrow + heading beside a single section image          */
/* ===================================================================== */
.lead-figure-grid { display: grid; gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); }
@media (min-width: 900px) {
  .lead-figure-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.lead-figure { margin: 0; }
.lead-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* Audience cards: flat panels with a short gold rule above each heading. */
.audience-grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .audience-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

/* Four-up variant: two-column on tablet so nothing sits alone on its own row. */
@media (min-width: 720px) {
  .audience-grid-4.audience-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .audience-grid-4.audience-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.audience-card {
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
  padding: var(--space-4);
}
@media (min-width: 640px) { .audience-card { padding: var(--space-5); } }
.audience-rule { display: block; width: 40px; height: 3px; background: var(--gold); margin-bottom: var(--space-3); }
.audience-card h3 { font-size: 1.1875rem; margin-bottom: 0.6rem; }
.audience-card p { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6; }

/* ===================================================================== */
/* STEP CARDS — numbered process steps as cards, wraps 3-then-2 rather    */
/* than forcing an even grid or a rigid icon row.                         */
/* ===================================================================== */
.step-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.step-card {
  flex: 1 1 280px;
  max-width: 340px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
}
@media (min-width: 640px) { .step-card { padding: var(--space-5); } }
.step-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-bright-text);
  margin-bottom: 0.5rem;
}
.step-card h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; color: var(--teal-deep); }
.step-card p { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6; }

/* ===================================================================== */
/* WORK CARDS — photo-top cards that expand in place (Option A)           */
/* ===================================================================== */
.work-grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.work-card {
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
  transition: box-shadow 0.18s ease;
}
.work-card:hover { box-shadow: var(--shadow-soft); }
.work-card summary {
  cursor: pointer;
  list-style: none;
  display: block;
}
.work-card summary::-webkit-details-marker { display: none; }
.work-card summary:focus-visible { outline: 3px solid var(--teal-bright-text); outline-offset: -3px; }
.work-card summary img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.work-card-body { display: block; padding: var(--space-4); }
.work-card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.work-card-title h3 { font-size: 1.1875rem; }
.work-card-chevron {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--teal-bright-text);
  border-bottom: 2px solid var(--teal-bright-text);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.work-card[open] .work-card-chevron { transform: rotate(-135deg); }
.work-card-summary {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.work-card:hover .work-card-title h3 { color: var(--teal-bright-text); }
/* The panel sits outside .work-card-body (it's a sibling of <summary> in the
   markup, so name-grouped native <details> can close the other three), so it
   needs its own matching horizontal padding and a rule to separate it from
   the always-visible summary above. */
.work-card > .accordion-panel {
  padding-inline: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--bone-line);
}

/* ===================================================================== */
/* RICH ACCORDION — title + always-visible summary, bullets on expand     */
/* ===================================================================== */
.accordion-rich summary { align-items: flex-start; padding-block: var(--space-3); }
.accordion-title { display: block; }
.accordion-rich .accordion-summary {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 68ch;
}
.accordion-rich summary::after { margin-top: 0.55rem; }
.accordion-panel { padding-bottom: var(--space-4); }
.accordion-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--teal-deep);
  margin-bottom: var(--space-2);
}
.accordion-list { display: grid; gap: 0.5rem; max-width: 72ch; }
.accordion-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
/* Plum earns its keep here as a bullet mark, which the brand board allows. */
.accordion-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--plum);
}

/* Small print sitting under a card grid. */
.contracting-note {
  margin-top: var(--space-4);
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 76ch;
}
.on-teal .contracting-note { color: rgba(255, 255, 255, 0.78); }
.on-teal .tick-list li { color: rgba(255, 255, 255, 0.86); }

/* ===================================================================== */
/* OUTCOME CARDS — icon in a gold ring, centred, on a Deep Teal band      */
/* ===================================================================== */
.outcome-grid { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .outcome-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .outcome-grid { grid-template-columns: repeat(3, 1fr); } }
.outcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
}
.outcome-icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  padding: 5px;
  flex-shrink: 0;
}
.outcome-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.outcome-card p { color: var(--ink-muted); font-size: 1rem; line-height: 1.55; }
.outcome-card strong { color: var(--teal-deep); font-weight: 600; }

/* Icon-free variant: the ring was the only thing needing the taller
   padding, so this drops the section's overall height once it's gone. */
.outcome-grid-plain .outcome-card { padding: var(--space-4); }

/* Benefit list: two columns so a long list sits under its heading instead of
   running down one side of it. */
.benefit-grid { display: grid; gap: var(--space-3); }
@media (min-width: 760px) {
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
}
.benefit-grid > li { display: flex; align-items: flex-start; gap: 0.75rem; }
.benefit-grid p { color: rgba(255, 255, 255, 0.86); font-size: 1rem; line-height: 1.55; }
.benefit-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 0.15rem;
  color: var(--gold);
}
.benefit-tick svg { width: 20px; height: 20px; }

.page-hero-lede {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
}
.page-hero-body { margin-top: var(--space-3); display: grid; gap: var(--space-2); max-width: 60ch; }
.page-hero-body p { color: rgba(255, 255, 255, 0.82); }
.page-hero .hero-actions { margin-top: var(--space-4); }

/* A Deep Teal button would vanish on this band, so the CTA goes white. */
.page-hero .btn-primary {
  background: var(--white);
  color: var(--teal-deep);
}
.page-hero .btn-primary:hover { background: var(--stone); }
.page-hero .btn-primary::before { background-color: var(--teal-deep); }
.page-hero :focus-visible { outline-color: var(--gold); }

/* ===================================================================== */
/* ABOUT — FOUNDER BLOCK                                                  */
/* ===================================================================== */
.founder-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .founder-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; }
}
.founder-figure {
  position: relative;
  margin: 0;
  max-width: 420px;
}
/* border-radius sits on the <img> itself, not a clipping parent — the badge
   is absolutely positioned just past the image's edge, and overflow:hidden
   on the parent would slice it off. Same fix as the Home founder photo. */
.founder-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(13, 61, 66, 0.16);
}
.founder-photo-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.founder-credentials-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--on-teal-rule);
}
.founder-credentials-block h3 {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.founder-body h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); max-width: 18ch; }
.founder-body p { color: var(--ink-muted); margin-bottom: var(--space-2); }
/* .band-teal p and .founder-body p tie on specificity; on Deep Teal the
   on-teal-scoped rule below must win regardless of source order. */
.on-teal .founder-body p { color: rgba(255, 255, 255, 0.86); }

.cred-list-light { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-3); }
.cred-list-light li { color: var(--teal-bright-text); }
.cred-list-light li::before { background: var(--gold); }

/* ===================================================================== */
/* ABOUT — WHAT YOU CAN EXPECT                                            */
/* ===================================================================== */
/* The five points are single lines straight from the copy source. As cards
   they needed a heading each, and every heading just restated its own line.
   Set as a tick list they say the same thing in half the words. */
.expect-list { display: grid; gap: var(--space-2); max-width: 62ch; }
.expect-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.expect-list p { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.55; }
.expect-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-hair);
  color: var(--teal-bright-text);
}
.expect-tick svg { width: 14px; height: 14px; }

/* The Noble Arc / AliciaNoble.com boundary, kept next to the bio it belongs
   to instead of holding a section of its own. */
.founder-aside {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hair);
}

.expect-grid { display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .expect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .expect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.expect-grid > li {
  background: var(--white);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}
.expect-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--teal-bright-text);
  margin-bottom: var(--space-2);
}
.expect-grid h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.expect-grid p { color: var(--ink-muted); font-size: 0.9688rem; }

/* ===================================================================== */
/* CROSS-LINK PANEL (individual coaching, and reused on service pages)    */
/* ===================================================================== */
.cross-link-panel {
  display: grid;
  gap: var(--space-4);
  background: var(--white);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 820px) {
  .cross-link-panel { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-5); }
}
.cross-link-panel h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); margin-bottom: var(--space-2); }
.cross-link-panel p { color: var(--ink-muted); }
.cross-link-panel .btn { justify-self: start; }

/* ===================================================================== */
/* EXPANDABLE Q&A (Speaking page starting points)                         */
/* ===================================================================== */
.qa-list { display: grid; gap: var(--space-2); }
.qa-item {
  background: var(--white);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.qa-item h3 { margin: 0; font-size: inherit; letter-spacing: normal; }
.qa-trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--teal-deep);
}
.qa-trigger:hover { background: var(--stone); }
.qa-num {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--teal-bright-text);
  padding-top: 0.35rem;
  flex-shrink: 0;
}
.qa-q { flex: 1; }
.qa-chevron { flex-shrink: 0; margin-top: 0.15rem; color: var(--teal-bright-text); transition: transform 0.18s ease; }
.qa-trigger[aria-expanded="true"] .qa-chevron { transform: rotate(180deg); }
.qa-panel { padding: 0 var(--space-4) var(--space-4); }
.qa-panel p { color: var(--ink-muted); max-width: 68ch; }
@media (min-width: 700px) {
  .qa-panel { padding-left: calc(var(--space-4) + 1.75rem); }
}

/* ===================================================================== */
/* TICK LIST                                                              */
/* ===================================================================== */
.tick-list { display: grid; gap: var(--space-2); }
.tick-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-muted);
}
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--gold);
}

/* Two-column variant for longer, denser lists (credentials, tags). */
@media (min-width: 640px) {
  .tick-list-2col.tick-list-2col {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-5);
  }
}

/* A flat service row: same panels, no stair offset, used on interior pages. */
.service-row-flat { padding-top: 0 !important; }
.service-row-flat > * { transform: none !important; }
@media (min-width: 880px) {
  .service-row-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================== */
/* CONTACT                                                                */
/* ===================================================================== */
.contact-section { background: var(--tint); }
.contact-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; }
}
.contact-intro h2 { font-size: var(--fs-h2); margin-bottom: var(--space-2); max-width: 14ch; }
/* :not(.overline) matters — this selector outranks .overline's own colour,
   so without it the eyebrow renders as muted body grey instead of teal. */
.contact-intro > p:not(.overline) { color: var(--ink-muted); }
.contact-intro > p a {
  color: var(--teal-bright-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-intro > p a:hover { color: var(--teal-deep); }

/* Standing contact details, set apart from the enquiry copy above. */
.contact-details {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.contact-follow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-bright-text);
  margin-bottom: var(--space-2);
}
.contact-social { display: flex; gap: 0.6rem; }
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--teal-deep);
  background: var(--white);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.contact-social a:hover { border-color: var(--teal-bright); color: var(--teal-bright-text); }
.contact-social svg { width: 20px; height: 20px; }
.contact-email { margin-top: var(--space-3); }
.contact-email a {
  color: var(--teal-bright-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-email a:hover { color: var(--teal-deep); }

.contact-card {
  background: var(--white);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}
@media (min-width: 640px) { .contact-card { padding: var(--space-5); } }

.contact-form .field { margin-bottom: var(--space-3); }
.contact-form label { color: var(--teal-deep); }
.contact-form .hint { color: var(--ink-muted); }
.form-privacy {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: var(--space-3) 0;
}
.form-privacy a { color: var(--teal-bright-text); text-decoration: underline; text-underline-offset: 2px; }
.form-privacy a:hover { color: var(--teal-deep); }
.contact-form .btn { width: 100%; justify-content: center; }
@media (min-width: 520px) { .contact-form .btn { width: auto; } }

/* Honeypot: present in the DOM for bots, invisible and unreachable for
   real visitors — off-screen rather than display:none, since some bots
   skip fields hidden that way. */
.form-trap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-status {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}
.form-status-error {
  background: rgba(131, 62, 98, 0.08);
  border: 1px solid rgba(131, 62, 98, 0.25);
  color: var(--plum);
}
.form-status-error a { color: inherit; text-decoration: underline; }

/* ===================================================================== */
/* LEGAL PAGES                                                            */
/* ===================================================================== */
.page-hero-legal { padding-bottom: var(--space-5); }
.page-hero-legal h1 { max-width: 24ch; }
/* .prose-meta is styled for light grounds; on the teal band it needs lifting. */
.page-hero-legal .prose-meta { color: rgba(255, 255, 255, 0.78); margin-bottom: 0; }
.page-hero-legal .prose-meta strong { color: var(--white); }
.legal-section { background: var(--white); }

.coming-soon {
  max-width: 46rem;
  background: var(--stone);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 640px) { .coming-soon { padding: var(--space-5); } }
/* Specificity: .coming-soon p would otherwise win over .tag and grey it out. */
.coming-soon p.tag {
  margin-bottom: var(--space-3);
  background: var(--gold);
  color: var(--teal-deep);
  font-weight: 600;
}
.coming-soon h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); margin-bottom: var(--space-3); }
.coming-soon p { color: var(--ink-muted); margin-bottom: var(--space-2); max-width: 60ch; }
.coming-soon a:not(.btn) { color: var(--teal-bright-text); text-decoration: underline; text-underline-offset: 2px; }
.coming-soon a:not(.btn):hover { color: var(--teal-deep); }
.coming-soon .btn { margin-top: var(--space-3); }

/* A plain content block on Stone or Tint, used by the legal pages. */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); margin: var(--space-5) 0 var(--space-2); }
.prose h3 { font-size: 1.125rem; margin: var(--space-4) 0 var(--space-1); }
.prose p, .prose li { color: var(--ink-muted); }
.prose p { margin-bottom: var(--space-2); max-width: none; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--space-3); }
.prose ul li { margin-bottom: 0.4rem; }
.prose a { color: var(--teal-bright-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--teal-deep); }
.prose > :first-child { margin-top: 0; }
.prose-meta { font-size: 0.9rem; color: var(--ink-muted); margin-bottom: var(--space-4); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); vertical-align: top; }
.prose th { background: var(--tint); font-weight: 600; color: var(--teal-deep); }
.prose td { color: var(--ink-muted); }
.table-scroll { overflow-x: auto; }

.hero { position: relative; overflow: hidden; background: var(--paper); padding-block: var(--space-6) var(--space-5); }
.hero-eyebrow { margin-bottom: var(--space-2); }
.hero h1 { margin-bottom: var(--space-3); }
.hero h1 .accent { color: var(--teal-bright-text); }
.hero-lede { color: var(--color-text-muted); font-size: 1.15rem; margin-bottom: var(--space-4); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(82vh, 720px);
  background: var(--teal-deep);
  color: var(--on-teal);
  padding-top: calc(var(--header-h) + var(--space-3));
}

/* The hero is carried by the client's footage, desaturated and veiled in a
   FLAT Deep Teal (a solid alpha, never a gradient) so it reads as the brand
   plane rather than as mauve stock video. The veil also sets a fixed ceiling
   on how light any pixel behind the headline can get, which is what makes
   the contrast figure verifiable rather than a guess: measured against the
   brightest actual pixel in the headline's region, white is 8.94:1.
   The footage is dark on the left, which is where the type sits. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--teal-deep);
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  filter: grayscale(1) brightness(0.7) contrast(1.05);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 61, 66, 0.82);
}

/* Scroll cue, as on the reference. A real link to the next section, so it
   works on a keyboard and tells a screen reader where it goes. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--on-teal);
  background: transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.hero-scroll svg { width: 20px; height: 20px; }
.hero-scroll:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--on-teal); }
.hero-scroll:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
#transition, #what-we-do { scroll-margin-top: var(--header-h); }

.hero-inner {
  position: relative;
  max-width: var(--container-wide);
  margin-inline: auto;
  width: 100%;
  /* Bottom padding clears the scroll cue (48px plus its offset). Kept
     tighter on small screens so the cue stays above the fold on a 812px
     viewport rather than sitting exactly on it. */
  padding: var(--space-5) 1.25rem calc(var(--space-5) + 3rem);
}
@media (min-width: 640px) { .hero-inner { padding-inline: 2rem; } }
@media (min-width: 1080px) {
  .hero-inner { padding-inline: 2.5rem; padding-block: var(--space-6) calc(var(--space-6) + 3rem); }
}

.home-hero /* Gold on Deep Teal measures 7.1:1 — safe as an accent word, not just large text. */
.home-hero h1 .accent { color: var(--gold); }
/* Plum: a detail mark only — the closing full stop, nothing more.
   Plum is mixed for Stone: on Deep Teal it measures 1.34:1, so on teal
   surfaces the mark switches to Gold (7.1:1). Same idea, same punctuation
   scale, but it is legible on both planes. This follows the rule the
   pull-quote already used for its own full stop. */
.full-stop { color: var(--plum); }
.on-teal .full-stop,
.band-teal .full-stop { color: var(--gold); }

.home-hero-lede {
  color: var(--on-teal-muted);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 44ch;
  margin-bottom: var(--space-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

@media (min-width: 1080px) {
  .home-hero { padding-top: calc(var(--header-h) + var(--space-5)); }
}

.statement-body p { color: var(--ink-muted); }
.statement-body p + p { margin-top: var(--space-3); }
.statement-body .kicker {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--teal-deep);
}

@media (min-width: 900px) {
  .statement-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-4);
    align-items: start;
  }
  .statement-lead { grid-column: 1 / 8; }
  .statement-body { grid-column: 9 / 13; padding-top: 0.5rem; }
}

/* ===================================================================== */
/* HOME — INDEX ROW                                                       */
/* The reference site's row of saturated cards, rebuilt without fill:     */
/* three columns divided by hairlines, a gold rule as the only colour.    */
/* ===================================================================== */
.index-head { max-width: 34rem; margin-bottom: var(--space-5); }
.index-head h2 { font-size: var(--fs-h2); }
.index-head p { margin-top: var(--space-2); color: var(--ink-muted); font-size: 1.0625rem; }

/* Three white cards side by side, gold rule across the top of each. */
.index-row { display: grid; gap: var(--space-3); }
.index-row > li {
  background: var(--white);
  border: var(--border-hair);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}
.index-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--teal-bright-text);
  margin-bottom: var(--space-2);
}
.index-row h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.index-row p { color: var(--ink-muted); font-size: 0.9688rem; max-width: 32ch; }

@media (min-width: 720px) {
  .index-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================================================================== */
/* HOME — PERSPECTIVE BAND                                               */
/* One Lora line at display scale, one narrow column of Inter beside it.  */
/* Plum is invisible on Deep Teal (1.6:1), so on dark planes the terminal */
/* mark is Gold, which measures 7.1:1.                                    */
/* ===================================================================== */
.on-teal .full-stop,
.band-teal .full-stop { color: var(--gold); }

.perspective { background: var(--teal-deep); }
.perspective-grid { display: grid; gap: var(--space-4); }

.pull-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  color: var(--on-teal);
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 18ch;
  text-wrap: balance;
}
.perspective-body p { color: var(--on-teal-muted); font-weight: 300; max-width: 46ch; }
.perspective-body p + p { margin-top: var(--space-3); }

@media (min-width: 900px) {
  .perspective-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-4);
    align-items: start;
  }
  .pull-quote { grid-column: 1 / 7; }
  .perspective-body { grid-column: 8 / 13; padding-top: 0.6rem; }
}

/* ===================================================================== */
/* HOME — SERVICE PANELS                                                 */
/* The reference site wanted a row of bold saturated cards. Deep Teal is  */
/* the one fill the brand board sanctions, so all three take it and the   */
/* differentiation is typographic. They step up left to right, echoing    */
/* the direction of the arc.                                              */
/* ===================================================================== */
.services { background: var(--stone); }
.services-head { font-size: var(--fs-h2); max-width: 20ch; margin-bottom: var(--space-5); }

.service-row { display: grid; gap: var(--space-3); }

/* Shaded colour panels. Each is a tint of a real brand hue (Gold at full
   strength, Bright Teal and Plum stepped down towards Stone) so the row
   reads as three colours while every panel keeps Deep Teal text above AA. */
.service-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--panel-bg, var(--teal-deep));
  color: var(--panel-ink, var(--white));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 260px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/* A tonal ladder through the three palette greens, darkest to lightest.
   All three carry white text above AA. Brand Grey (#818181) is not an
   option here: it fails with white (3.90) and with Deep Teal (3.06). */
.panel-deep   { --panel-bg: #0D3D42; --panel-ink: #FFFFFF; }  /* Deep Teal    11.91:1 */
.panel-faded  { --panel-bg: #2E6F72; --panel-ink: #FFFFFF; }  /* Faded Teal    5.78:1 */
.panel-bright { --panel-bg: #187F86; --panel-ink: #FFFFFF; }  /* Bright Teal   4.75:1 */

.service-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  filter: saturate(1.08);
}
.service-panel:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }

/* Scalloped seal. Reads as a credential mark, which suits this audience.
   Near-white disc on every panel, glyph in that panel's own colour so the
   mark reads as cut out of the card rather than printed on it. */
.service-seal { display: block; width: 60px; height: 60px; }
.service-seal svg { width: 100%; height: 100%; }
.service-seal .seal { fill: rgba(255, 255, 255, 0.94); }
.service-seal .glyph { fill: var(--panel-bg); stroke: var(--panel-bg); }
.service-seal .glyph [fill="none"] { fill: none; }

.service-panel h3 {
  color: inherit;
  font-size: 1.3125rem;
  margin-top: var(--space-1);
}
.service-panel p {
  color: inherit;
  font-weight: 400;
  font-size: 0.9688rem;
}
.service-go {
  margin-top: auto;
  padding-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: inherit;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.service-go svg { transition: transform 0.18s ease; }
.service-panel:hover .service-go svg { transform: translateX(4px); }

@media (min-width: 880px) {
  .service-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .service-panel { min-height: 320px; padding: var(--space-4) var(--space-3); }
}
@media (min-width: 1080px) {
  .service-panel { padding: var(--space-4); }
  /* The stair: each panel sits a step higher than the last. */
  .service-row { align-items: start; padding-top: var(--space-5); }
  .service-row > :nth-child(1) { transform: translateY(var(--space-5)); }
  .service-row > :nth-child(2) { transform: translateY(var(--space-3)); }
  .service-row > :nth-child(3) { transform: translateY(0); }
  .service-row > :nth-child(1):hover { transform: translateY(calc(var(--space-5) - 4px)); }
  .service-row > :nth-child(2):hover { transform: translateY(calc(var(--space-3) - 4px)); }
  .service-row > :nth-child(3):hover { transform: translateY(-4px); }
}
/* The global reduced-motion reset already collapses these transitions to
   0.01ms, so the stair offsets stay intact and nothing animates. */

/* ===================================================================== */
/* HOME — PROCESS                                                        */
/* Deliberately not a third card row: a ruled list, closer to a schedule  */
/* than a grid, which is the register this audience reads all day.        */
/* ===================================================================== */
.process-head { font-size: var(--fs-h2); max-width: 22ch; margin-bottom: var(--space-5); }

/* Heading left, a wide flat photo right. The image sits beside the process
   rather than above it, so it never competes with the hero portrait. */
.process-top { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.process-top .process-head { margin-bottom: 0; align-self: center; }
.process-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tint);
}
.process-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
@media (min-width: 900px) {
  .process-top { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
  .process-figure img { aspect-ratio: 4 / 3; }
}

.process { display: grid; }
.process > li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: 0.35rem;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.process > li:last-child { border-bottom: 1px solid var(--color-border); }

.process-num {
  grid-row: 1 / 3;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--teal-bright-text);
  padding-top: 0.15rem;
}
.process h3 { font-size: 1.1875rem; }
.process p { color: var(--ink-muted); font-size: 0.9688rem; }
.process-link { margin-top: var(--space-4); }

@media (min-width: 860px) {
  .process > li {
    grid-template-columns: 5rem minmax(0, 17rem) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-4);
  }
  .process-num { grid-row: 1; font-size: 1.25rem; }
  .process h3 { font-size: 1.3125rem; }
  .process p { max-width: 52ch; }
}

/* ===================================================================== */
/* HOME — WHAT CLIENTS SAY                                               */
/* White cards on Stone, one soft shadow, plum reserved for the quote     */
/* mark. The grid takes 1 to 3 cards without changing the markup.         */
/* ===================================================================== */
.say { background: var(--stone); }
.say-head { margin-bottom: var(--space-5); }
.say-head h2 { font-size: var(--fs-h2); max-width: 22ch; }

.say-grid {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}
@media (min-width: 760px) {
  .say-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.say-card {
  margin: 0;
  background: var(--white);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.say-mark {
  width: 34px;
  height: 26px;
  fill: var(--plum);
  flex-shrink: 0;
}
.say-card p {
  font-size: 1.0313rem;
  line-height: 1.55;
  color: var(--teal-deep);
  max-width: 46ch;
  margin: 0;
}
.say-card cite {
  margin-top: auto;
  padding-top: var(--space-2);
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.quote-descriptor {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.say-link { margin-top: var(--space-4); }
.say-grid { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 720px) { .say-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
.say-grid .say-card { height: 100%; }

/* ===================================================================== */
/* HOME — CLOSING PLANE                                                  */
/* The CTA and the footer are one uninterrupted Deep Teal mass, so the    */
/* page begins and ends dark. The second and last arc lives here.         */
/* ===================================================================== */
/* Deep Teal, matching the "Why this matters" and "Meet Alicia" bands above
   it, so the page alternates light/dark on a consistent rhythm rather than
   the closing band reading as an odd colour out. Padding is trimmed from
   the .section default so it stops reading as a second hero. */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--teal-deep);
  color: var(--on-teal);
  padding-block: var(--space-4);
  /* Closing band and footer are both Deep Teal, so without this they read as
     one undifferentiated mass. A single hairline in the on-teal rule tone is
     enough to let the footer stand as its own block. */
  border-bottom: 1px solid var(--on-teal-rule);
}
/* Trial variant for Home: the faded arc read as random rather than
   deliberate, so it is dropped here in favour of a bold gold rule — thicker
   than the hairline it replaces, so it reads as a definite sign-off rather
   than a quiet section boundary. Not yet rolled out to the other pages. */
.closing-signoff { border-bottom: 4px solid var(--gold); }

/* Light closing band for the interior pages. Keeps the page alternating
   between the two grounds only — Stone and Deep Teal — rather than
   introducing a third tone, and lets the gold sign-off rule read clearly
   against the light section before the Deep Teal footer begins. */
.closing-light {
  background: var(--stone);
  color: var(--ink-muted);
  border-bottom: 4px solid var(--gold);
}
.closing-light .closing-lead {
  /* A step down from a full section heading: this is a sign-off, not a
     second hero. */
  color: var(--teal-deep);
  font-size: clamp(1.375rem, 1.15rem + 1.05vw, 1.875rem);
  max-width: 24ch;
}
.closing-light .closing-lead .full-stop { color: var(--plum); }
.closing-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--teal-bright-text);
}
.closing-link:hover { color: var(--teal-deep); }
.closing-arc {
  position: absolute;
  z-index: -1;
  left: -6%;
  bottom: -20%;
  width: 116%;
  max-width: none;
  height: 58%;
  opacity: 0.5;
  pointer-events: none;
}
.closing-arc path { fill: var(--teal-faded); }

.closing-lead {
  /* Matched to the standard h2 size used elsewhere on the page (e.g. "Meet
     Alicia Noble"), not the old display size — this is a closing CTA, not
     a second hero. */
  color: var(--on-teal);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}
.closing-lede {
  margin-top: var(--space-3);
  color: var(--on-teal-muted);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  max-width: 42ch;
}
.closing-grid { display: grid; gap: var(--space-4); }
.closing-action { display: flex; }

@media (min-width: 900px) {
  .closing-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-5);
    align-items: end;
  }
  .closing-action { padding-bottom: 0.35rem; }
}

/* The footer carries no arc of its own: it shares the closing plane's. */
.site-footer { padding-block: var(--space-5) var(--space-4); }
.footer-note { color: var(--on-teal-muted); margin-bottom: 0.6rem; font-size: 0.8125rem; line-height: 1.6; max-width: 34ch; }
.footer-cross-link { color: var(--gold); font-size: 0.8125rem; min-height: 44px; }
.footer-cross-link:hover { color: var(--white); }

/* --------------------------------------------------------------------- */
/* Logo strip / partners                                                 */
/* --------------------------------------------------------------------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
  border-top: var(--border-hair);
}

/* --------------------------------------------------------------------- */
/* Process steps                                                         */
/* --------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  padding-top: var(--space-2);
}
.step-number {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-2);
}
.step-number::before {
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  flex-shrink: 0;
}
.step h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.step p { color: var(--color-text-muted); font-size: 0.97rem; }

/* --------------------------------------------------------------------- */
/* Stat blocks                                                           */
/* --------------------------------------------------------------------- */
.stats-row {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 700px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--paper-white);
  padding: var(--space-4);
  text-align: center;
}
.stat-number {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-sea-dark);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
}
.stat p { margin-top: 0.4rem; color: var(--color-text-muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------- */
/* Photo frame                                                           */
/* --------------------------------------------------------------------- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

.photo-offset-wrap { position: relative; }
.photo-offset-wrap::before {
  content: '';
  position: absolute;
  inset: 8% -7% -7% 8%;
  background: var(--tint);
  border: 1.5px solid var(--bone-line);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.photo-offset-wrap .photo-frame { position: relative; z-index: 1; }
.band-teal .photo-offset-wrap::before { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }

/* --------------------------------------------------------------------- */
/* CTA band                                                               */
/* --------------------------------------------------------------------- */
.cta-band {
  background: var(--teal-deep);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--white); margin-bottom: var(--space-2); }
.cta-band p { color: rgba(250, 247, 243, 0.82); margin-inline: auto; margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------- */
/* Forms                                                                  */
/* --------------------------------------------------------------------- */
.field { display: grid; gap: 0.4rem; margin-bottom: var(--space-3); }
.field label { font-weight: 500; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 400; }
.field input, .field textarea, .field select {
  background: var(--paper-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--teal-sea);
}
.field-required::after { content: ' *'; color: var(--gold-deep); }

/* ===================================================================== */
/* SCROLL REVEAL                                                          */
/* Timings from the ui-ux-pro-max "Scroll Reveal / Subtle" preset:        */
/* opacity + 12px rise, ~350ms, ease-out. Small offset so it reads as a   */
/* fade rather than a slide. Nothing is hidden until JS adds              */
/* .reveal-ready, so no-JS and reduced-motion users see the final state.  */
/* ===================================================================== */
.reveal-ready [data-reveal],
.reveal-ready [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
.reveal-ready [data-reveal].is-revealed,
.reveal-ready [data-reveal-stagger] > .is-revealed {
  opacity: 1;
  transform: none;
}
/* A staggered parent must not fade as a block as well as its children. */
.reveal-ready [data-reveal-stagger] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===================================================================== */
/* THE TRANSITION JOURNEY (Home)                                          */
/* Three stages, imagery carrying the weight. Not a diagram.              */
/* ===================================================================== */
.journey { background: var(--stone); }
.journey-head { max-width: 34rem; margin-bottom: var(--space-5); }
.journey-head h2 { font-size: var(--fs-h2); }

.journey-row { display: grid; gap: var(--space-4); }
@media (min-width: 760px) {
  .journey-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (min-width: 1080px) { .journey-row { gap: var(--space-4); } }

.journey-stage { display: flex; flex-direction: column; }
.journey-figure {
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tint);
  position: relative;
}
.journey-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* Stage marker sits on the image corner, gold on deep teal. */
.journey-marker {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--teal-deep);
  color: var(--gold);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.85rem;
  border-radius: 0 var(--radius-md) 0 0;
}
.journey-stage h3 {
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  margin-bottom: 0.5rem;
}
.journey-stage p {
  color: var(--ink-muted);
  font-size: 0.9688rem;
  max-width: 34ch;
}

/* ===================================================================== */
/* FOUNDER PHOTO + CREDENTIAL BADGE                                       */
/* ===================================================================== */
/* The supplied ICF asset is already a circular badge on a transparent
   ground, so the disc behind it is plain white at the same radius: it stops
   the photograph showing through the corners and gives the mark a clean
   edge where it overhangs the frame. No brand colour is applied to it, the
   credential body owns its own mark. */
.founder-photo { position: relative; }
.icf-badge {
  position: absolute;
  right: -10px;
  bottom: -10px;
  display: block;
  width: clamp(76px, 20vw, 108px);
  height: clamp(76px, 20vw, 108px);
  padding: 4px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
}
.icf-badge img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
@media (min-width: 640px) { .icf-badge { right: -16px; bottom: -16px; } }

/* ===================================================================== */
/* SPLIT — SHORT STATEMENT LEFT, THREE ONE-LINE ITEMS RIGHT               */
/* Replaces the old numbered index row. These three are not a sequence,   */
/* so they take icons rather than 01/02/03 markers: numbering here would  */
/* claim an order the content does not have. The three journey stages     */
/* further up keep their numbers, because those genuinely are a sequence. */
/* ===================================================================== */
.split { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
}
.split-lead h2 { font-size: var(--fs-h2); max-width: 17ch; margin-bottom: var(--space-3); }
.split-lead p { color: var(--ink-muted); max-width: 38ch; font-size: 1.0625rem; }

.split-list { display: grid; gap: var(--space-3); }
.split-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hair);
}
.split-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.split-list p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--teal-deep);
}
.split-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-hair);
  color: var(--teal-bright-text);
}
.split-icon svg { width: 22px; height: 22px; }
.split-lead .btn { margin-top: var(--space-4); }

/* ===================================================================== */
/* ACCORDION                                                              */
/* Native <details>, so it is keyboard operable and correctly announced   */
/* with no JavaScript at all. Six capability cards became six collapsed   */
/* rows: the substance is unchanged, the page just stopped saying all of  */
/* it at once. name="..." makes the group exclusive where supported and   */
/* degrades to plain independent disclosures where it is not.             */
/* ===================================================================== */
.accordion { border-top: var(--border-hair); }
.accordion details { border-bottom: var(--border-hair); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding-block: 0.85rem;
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary h3 {
  font-size: clamp(1rem, 0.96rem + 0.35vw, 1.1875rem);
  line-height: 1.3;
  color: var(--teal-deep);
}
.accordion summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  border-right: 2px solid var(--teal-bright-text);
  border-bottom: 2px solid var(--teal-bright-text);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
}
.accordion details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.accordion summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.accordion summary:hover h3 { color: var(--teal-bright-text); }
.accordion details > p {
  color: var(--ink-muted);
  padding-bottom: var(--space-3);
  max-width: 46ch;
}

/* ===================================================================== */
/* CTA RAIL                                                               */
/* One line, one button, on a flat Deep Teal band. The reference site     */
/* uses a gradient strip here; the brand board forbids gradients, so this */
/* is a solid plane and the rhythm break comes from its shallow height    */
/* against the deep sections either side of it.                           */
/* ===================================================================== */
.cta-rail { background: var(--teal-deep); color: var(--on-teal); }
.cta-rail .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.cta-rail p {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--on-teal);
  max-width: 44ch;
}

/* ===================================================================== */
/* CLOSING — PROOF THEN ACTION                                            */
/* The Zenith quote moved into the closing band so the one cleared piece  */
/* of proof sits immediately before the ask, instead of holding a whole   */
/* section of its own.                                                    */
/* ===================================================================== */
.closing-quote { margin: 0; }
.closing-quote .say-mark { fill: var(--gold); margin-bottom: var(--space-2); }
/* Scoped through .closing so it outranks .lora-card p, which sets the
   quote to Deep Teal for the white cards on the Capability page. */
.closing .closing-quote p { color: var(--on-teal); max-width: 40ch; }
.closing .closing-quote cite {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--on-teal-rule);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-teal);
  max-width: 26ch;
}
.closing-cta { display: grid; justify-items: start; gap: var(--space-3); }
.closing-grid-quote .closing-lead {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
@media (min-width: 900px) {
  .closing-grid-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: start; }
}

/* ===================================================================== */
/* LORA PULL-QUOTE                                                        */
/* One line at a time, per the brand board. Never a paragraph.            */
/* ===================================================================== */
.lora-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.35vw, 2.125rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--teal-deep);
  max-width: 24ch;
}
.on-teal .lora-quote, .band-teal .lora-quote { color: var(--white); }
.lora-quote .full-stop { color: var(--plum); }
.on-teal .lora-quote .full-stop, .band-teal .lora-quote .full-stop { color: var(--gold); }

/* Testimonial cards set their quote in Lora italic. The brand board gives
   Lora exactly this job, and it is the one face that was going unused. */
.lora-card p {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--teal-deep);
}

.quote-attrib {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 26ch;
}
.on-teal .quote-attrib, .band-teal .quote-attrib {
  border-top-color: var(--on-teal-rule);
  color: rgba(255, 255, 255, 0.7);
}

/* ===================================================================== */
/* OVERLINE                                                               */
/* One per view. Inter 600, 11px, .22em tracking, uppercase.              */
/* ===================================================================== */
/* The doubled class is deliberate. An eyebrow is a <p>, so any component rule
   of the form `.some-block p { font-size: ... }` matches it too and, at equal
   specificity, wins on source order. Doubling to (0,2,0) puts the eyebrow out
   of reach of those rules, so it stays 11px wherever it is dropped in. */
.overline.overline,
.overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-bright-text);
  margin-bottom: var(--space-3);
}
.overline-gold.overline-gold { color: var(--gold); }
.on-teal .overline.overline { color: var(--gold); }

/* ===================================================================== */
/* SPLIT HERO — text left, image right                                    */
/* ===================================================================== */
.split-hero {
  background: var(--stone);
  padding-block: calc(var(--header-h, 84px) + var(--space-5)) var(--space-6);
}
.split-hero-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 960px) {
  .split-hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-6); }
}
.split-hero h1 {
  font-size: var(--fs-h1);
  max-width: 16ch;
  margin-bottom: var(--space-3);
}
.split-hero h1 .accent { color: var(--teal-bright-text); }
.split-hero-lede {
  font-size: clamp(1rem, 0.96rem + 0.35vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 58ch;
  margin-bottom: var(--space-4);
}
.split-hero-figure { margin: 0; }
.split-hero-figure img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(13, 61, 66, 0.18);
  display: block;
}
@media (min-width: 960px) {
  .split-hero-figure img { aspect-ratio: 6 / 5; }
}

/* Secondary button: outlined, for the paired hero action. */
.btn-secondary {
  background: transparent;
  border-color: var(--teal-deep);
  color: var(--teal-deep);
}
.btn-secondary:hover { background: #EDF6F6; border-color: var(--teal-bright); color: var(--teal-bright-text); }

/* ===================================================================== */
/* STATEMENT BAND — deep teal, heading left, argument + three facts right  */
/* ===================================================================== */
.statement-band { background: var(--teal-deep); }
.statement-band-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .statement-band-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; }
}
.statement-band h2 { color: var(--white); font-size: var(--fs-h2); max-width: 16ch; }
.statement-band-body > p { color: rgba(255,255,255,0.86); max-width: 66ch; }

.fact-row {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.18);
}
@media (min-width: 720px) { .fact-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.fact-row h3 { color: var(--gold); font-size: 0.9375rem; margin-bottom: 0.4rem; }
.fact-row p { color: rgba(255,255,255,0.78); font-size: 0.875rem; line-height: 1.55; }

/* ===================================================================== */
/* SECTION INTRO + MEDIA CARDS                                            */
/* ===================================================================== */
.section-intro { max-width: 62ch; margin-bottom: var(--space-5); }
.section-intro h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.section-intro p { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.65; }

/* Stacked paragraphs running the full width of the container, rather than
   squeezed into the narrower .section-intro measure used for shorter
   intros elsewhere. */
.full-width-text p {
  max-width: none;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.on-teal .full-width-text p { color: rgba(255, 255, 255, 0.86); }

.media-card-row { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .media-card-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .media-card-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

.media-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.media-card:hover { box-shadow: var(--shadow-soft); border-color: var(--stone-500, #D9D8D3); }
.media-card:focus-visible { outline: 3px solid var(--teal-bright-text); outline-offset: 3px; }
.media-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.media-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.media-card h3 { font-size: 1.1875rem; }
.media-card p { color: var(--ink-muted); font-size: 0.9375rem; flex: 1; }
.media-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--teal-bright-text);
}
.media-card:hover .media-card-link { color: var(--teal-deep); }

/* ===================================================================== */
/* NUMBERED STEPS — tint band                                             */
/* ===================================================================== */
.band-tint { background: var(--tint); }
.steps-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .steps-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; }
}
.steps-intro h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); max-width: 18ch; }
.steps-intro p { color: var(--ink-muted); }

.numbered-steps { display: grid; }
.numbered-steps > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--stone-500, #D9D8D3);
}
.numbered-steps > li:last-child { border-bottom: 1px solid var(--stone-500, #D9D8D3); }
.step-numeral {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold-deep);
}
.numbered-steps h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.numbered-steps p { color: var(--ink-muted); font-size: 0.9375rem; max-width: 62ch; }

/* ===================================================================== */
/* PROOF — Lora quote paired with the credential card                     */
/* ===================================================================== */
.proof-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) {
  .proof-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-6); }
}
.proof-quote blockquote { margin: 0; }
.lora-quote-lg {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--teal-deep);
  max-width: 34ch;
}
.proof-quote cite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-3);
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--teal-deep);
}
.proof-quote cite::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--plum);
  flex-shrink: 0;
}

.credential-card {
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
  padding: var(--space-4);
}
@media (min-width: 640px) { .credential-card { padding: var(--space-5); } }
.credential-head { display: flex; align-items: center; gap: var(--space-3); }
.credential-head img { width: 56px; height: 56px; flex-shrink: 0; }
.credential-head h3 { font-size: 1.0625rem; margin-bottom: 0.2rem; }
.credential-sub { color: var(--ink-muted); font-size: 0.875rem; }
.credential-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--bone-line);
  display: grid;
  gap: 0.6rem;
}
.credential-list li { color: var(--ink-muted); font-size: 0.875rem; line-height: 1.5; }
.credential-list li:first-child { color: var(--text-body, #3F5254); font-size: 0.9375rem; }

/* ===================================================================== */
/* NAV DROPDOWN — "Services" groups the three offer pages so the pill      */
/* nav has room to breathe at 1280px and standard laptop zoom levels.     */
/* ===================================================================== */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-weight: 500;
  font-size: 0.845rem;
  letter-spacing: -0.005em;
  padding: 0.5rem 0.1rem;
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.45rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s ease;
}
.nav-dropdown-trigger:hover::after,
.nav-dropdown.is-open .nav-dropdown-trigger::after { transform: scaleX(1); }
.nav-dropdown-trigger svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.nav-dropdown.is-open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 0.5rem;
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--teal-deep);
  white-space: normal;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible { background: var(--tint); color: var(--teal-bright-text); }

/* ===================================================================== */
/* HERO SWISH — a hand-drawn flourish behind the hero photo               */
/* ===================================================================== */
.hero-swish {
  position: absolute;
  z-index: -1;
  left: -8%;
  bottom: -9%;
  width: 92%;
  opacity: 0.9;
  pointer-events: none;
}
.hero-swish path { fill: var(--teal-deep); }
.split-hero-figure { position: relative; }

/* ===================================================================== */
/* WHY THIS MATTERS — full-width intro paragraph, three image cards       */
/* ===================================================================== */
.why-intro { max-width: 72ch; margin-bottom: var(--space-5); }
.why-intro p { color: rgba(255,255,255,0.86); font-size: 1.0625rem; line-height: 1.65; }
.why-intro p + p { margin-top: var(--space-3); }
.why-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.why-card {
  background: var(--white);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(6, 30, 33, 0.18);
  display: flex;
  flex-direction: column;
}
.why-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
/* The Thinker's head sits close to the top of its crop; on narrow cards the
   fixed-height box is much wider than the source, so a centred crop slices
   into the face. Anchoring high keeps the head in frame at every width. */
.why-card-img-top { object-position: 50% 8%; }
.why-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.why-card h3 { color: var(--teal-deep); font-size: 1.0625rem; margin-bottom: 0; }
.why-card p { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.55; flex: 1; }
/* Optional short list beneath the intro line (Capability page's six cards).
   Not flex:1 like the paragraph, so it sits close under it rather than
   floating to the card's own bottom. */
.why-card-list { display: grid; gap: 0.4rem; margin-top: -0.35rem; }
.why-card-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.why-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--plum);
}

/* Same card, reused as a clickable service link (What We Do section). */
.why-card-link { transition: box-shadow 0.18s ease, transform 0.18s ease; }
.why-card-link:hover { box-shadow: 0 14px 28px rgba(13, 61, 66, 0.16); }
.why-card-link:focus-visible { outline: 3px solid var(--teal-bright-text); outline-offset: 3px; }
.why-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--teal-bright-text);
}
.why-card-link:hover .why-card-cta { color: var(--teal-deep); }

/* ===================================================================== */
/* THIS IS HOW WE DELIVER IT — solid-colour icon cards                    */
/* ===================================================================== */
.icon-card-row { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .icon-card-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .icon-card-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.icon-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
@media (min-width: 640px) { .icon-card { padding: var(--space-5); } }
.icon-card:hover { box-shadow: 0 14px 28px rgba(13, 61, 66, 0.16); }
.icon-card:focus-visible { outline: 3px solid var(--teal-bright-text); outline-offset: 3px; }
.icon-card-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(239, 193, 128, 0.18);
  flex-shrink: 0;
}
.icon-card-glyph svg { width: 26px; height: 26px; }
.icon-card h3 { font-size: 1.1875rem; }
.icon-card p { font-size: 0.9375rem; line-height: 1.55; flex: 1; }
.icon-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.icon-card--deep { background: var(--teal-deep); color: var(--white); }
.icon-card--deep h3 { color: var(--white); }
.icon-card--deep p { color: rgba(255,255,255,0.82); }
.icon-card--deep .icon-card-glyph svg { color: var(--gold); }
.icon-card--deep .icon-card-link { color: var(--gold); }
.icon-card--bright { background: var(--teal-bright); color: var(--white); }
.icon-card--bright h3 { color: var(--white); }
.icon-card--bright p { color: rgba(255,255,255,0.88); }
.icon-card--bright .icon-card-glyph svg { color: var(--white); }
.icon-card--bright .icon-card-link { color: var(--white); }
.icon-card--stone {
  background: var(--white);
  color: var(--teal-deep);
  border: 1px solid var(--bone-line);
  box-shadow: 0 1px 2px rgba(13, 61, 66, 0.06);
}
.icon-card--stone p { color: var(--ink-muted); }
.icon-card--stone .icon-card-glyph { background: rgba(239, 193, 128, 0.28); }
.icon-card--stone .icon-card-glyph svg { color: var(--teal-deep); }
.icon-card--stone .icon-card-link { color: var(--teal-bright-text); }
.icon-card--stone:hover .icon-card-link { color: var(--teal-deep); }

/* ===================================================================== */
/* ABOUT ALICIA NOBLE — homepage founder introduction                     */
/* ===================================================================== */
/* Three separately-placed blocks, not two columns of markup: this is what
   lets mobile read heading -> photo -> bio (client spec) while desktop still
   lays out as a conventional two-column founder introduction. */
.founder-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-areas: "heading" "photo" "bio";
}
@media (min-width: 900px) {
  .founder-grid {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
    grid-template-areas:
      "heading photo"
      "bio     photo";
  }
}
.founder-heading { grid-area: heading; }
.founder-heading h2 { margin-bottom: var(--space-3); }
.founder-credentials {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.credential-rule { display: inline-block; width: 28px; height: 2px; background: var(--gold); flex-shrink: 0; }
.founder-photo-wrap { grid-area: photo; }
@media (min-width: 900px) { .founder-photo-wrap { align-self: center; } }
.founder-bio { grid-area: bio; }
.founder-bio p { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.7; margin-bottom: var(--space-3); }
/* This section sits on Deep Teal (.band-teal already gives white headings);
   the bio copy needs its own light-on-dark colour, since .founder-bio p's
   own specificity would otherwise beat .band-teal p's. */
.band-teal .founder-bio p { color: rgba(255, 255, 255, 0.86); }
.founder-actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.founder-linkedin-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.founder-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--white);
}
.founder-more-link:hover { color: var(--gold); }
/* width:100% is load-bearing here: margin-inline:auto on a grid item opts it
   out of the default stretch, and without a definite width the img's own
   width:100% has nothing to resolve against and collapses to 0. */
.founder-photo-wrap { position: relative; width: 100%; max-width: 26rem; margin-inline: auto; }
.founder-photo-wrap img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(13, 61, 66, 0.16);
  display: block;
}
/* A rounded-square panel, not a circle: the ACC seal has one squared-off
   corner rather than a true circular silhouette, so masking it into a circle
   clipped that corner and read as a distortion. Letting its real shape show
   on a plain backing card fixes that. */
.founder-badge {
  position: absolute;
  right: -0.75rem;
  bottom: -0.75rem;
  width: 84px;
  height: 84px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(13, 61, 66, 0.22);
  padding: 8px;
}
.founder-badge img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 640px) { .founder-badge { width: 96px; height: 96px; } }

/* --------------------------------------------------------------------- */
/* Misc                                                                   */
/* --------------------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }