/* Private Equity Systems: main stylesheet
   Layers keep specificity predictable. See docs/WEBSITE-STANDARDS.md §5. */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- Reset ---------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    text-size-adjust: none;
  }

  img,
  svg,
  video,
  picture {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------- Tokens ---------- */
@layer tokens {
  :root {
    /* Brand palette (from the logo and the original site) */
    --green-leaf: #7ab93f; /* logo leaf: decoration, icons, bars only (2.4:1 on white) */
    --green: #5b821b; /* original site accent: 4.5:1 on white, large text and UI */
    --green-text: #466614; /* 6.6:1 on white: links, small coloured text */
    --green-pale: #c5e3a3; /* on charcoal: accents and small text (11.4:1) */
    --grey: #6a6a6f; /* logo grey */
    --charcoal: #1c2320; /* dark backgrounds, green-tinted */
    --ink: #262b28;

    /* Semantic roles: components use these, never the raw palette */
    --color-ink: var(--ink);
    --color-surface: #fff;
    --color-surface-alt: #f3f7ee;
    --color-surface-accent: var(--green-pale);
    --color-brand: var(--green-leaf);
    --color-brand-strong: var(--green);
    --color-link: var(--green-text);
    --color-link-hover: var(--ink);
    --color-inverse-bg: var(--charcoal);
    --color-inverse-ink: #fff;
    --color-inverse-accent: var(--green-pale);
    --color-inverse-muted: #8e9a91; /* 5.5:1 on charcoal: low-key small text */
    --color-focus: var(--green);
    --color-muted: #555a57;
    --color-border: #d3dccb;
    --color-error: #b3261e;
    --color-warning: #8a5300; /* 6.3:1 on white: partial or not-checked states */
    --color-success: #1e6b3a;

    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
    --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);
    --step-4: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

    /* Spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    --radius: 0.5rem;
    --container: 72rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --shadow: 0 1px 2px rgb(28 35 32 / 8%), 0 8px 24px rgb(28 35 32 / 8%);
  }
}

/* ---------- Base ---------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 8rem; /* clear the sticky header */
  }

  .nav-open {
    overflow: hidden;
  }

  body {
    min-block-size: 100vh;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-surface);
  }

  h1,
  h2,
  h3 {
    line-height: 1.15;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-3);
  }

  h2 {
    font-size: var(--step-2);
  }

  h3 {
    font-size: var(--step-1);
  }

  p,
  li {
    text-wrap: pretty;
  }

  a {
    color: var(--color-link);
    text-underline-offset: 0.18em;
  }

  a:hover {
    color: var(--color-link-hover);
  }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  address {
    font-style: normal;
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
  }

  caption {
    padding-block-end: var(--space-xs);
    font-weight: 700;
    text-align: start;
  }

  th,
  td {
    padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--color-border);
  }
}

/* ---------- Layout ---------- */
@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

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

  .section--alt {
    background: var(--color-surface-alt);
  }

  .contact-layout {
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 56rem) {
    .contact-layout {
      grid-template-columns: 2fr 1fr;
    }
  }

}

/* ---------- Components ---------- */
@layer components {
  /* Skip link */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 100;
    padding: var(--space-xs) var(--space-s);
    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
    border-radius: var(--radius);
    transform: translateY(-200%);
  }

  .skip-link:focus {
    color: var(--color-inverse-ink);
    transform: none;
  }

  /* Header: charcoal contact strip, then a clean white bar. Sticky; main.js
     adds .is-scrolled to tighten it and add a shadow once the page moves. */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--color-surface);
    transition: box-shadow 0.2s;
  }

  /* Thin brand bar across the very top */
  .site-header::before {
    display: block;
    block-size: 4px;
    content: "";
    background: linear-gradient(90deg, var(--color-brand-strong), var(--color-brand) 55%, var(--color-inverse-accent));
  }

  .site-header.is-scrolled {
    box-shadow: 0 6px 24px rgb(28 35 32 / 12%);
  }

  .topbar {
    font-size: var(--step--1);
    color: var(--color-inverse-muted);
    background: var(--color-inverse-bg);
  }

  .topbar__inner {
    display: flex;
    gap: var(--space-xs) var(--space-m);
    align-items: center;
    justify-content: center;
    min-block-size: 2.25rem;
  }

  .topbar__tagline {
    display: none;
  }

  .topbar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-m);
    justify-content: center;
    padding: 0;
    list-style: none;
  }

  .topbar a {
    display: inline-block;
    padding-block: var(--space-2xs);
    color: var(--color-inverse-ink);
    text-decoration: none;
  }

  .topbar a:where(:hover) {
    color: var(--color-inverse-accent);
    text-decoration: underline;
  }

  /* "Let's talk": chat icon + link to the contact page (top strip, footer) */
  :is(.topbar, .site-footer) .lets-talk {
    display: inline-flex;
    gap: 0.4em;
    align-items: center;
    font-weight: 600;
  }

  .lets-talk__icon {
    flex: none;
    fill: var(--color-brand);
  }

  .topbar__duo {
    padding: 0 var(--space-xs);
    font-weight: 700;
    line-height: 1.8;
    color: var(--color-ink);
    background: var(--color-inverse-accent);
    border-radius: 999px;
  }

  .topbar__duo[hidden] {
    display: none;
  }

  .topbar__signin::before {
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-end: 0.45em;
    vertical-align: 0.1em;
    content: "";
    background: var(--color-brand);
    border-radius: 50%;
  }

  @media (min-width: 60rem) {
    .topbar__inner {
      justify-content: space-between;
    }

    .topbar__tagline {
      display: block;
    }
  }

  .site-header__inner {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-border);
    transition: padding-block 0.2s;
  }

  .is-scrolled .site-header__inner {
    padding-block: var(--space-xs);
  }

  .site-header__logo img {
    inline-size: 180px;
  }

  @media (min-width: 60rem) {
    .site-header__logo img {
      inline-size: 200px;
    }
  }

  /* Menu button: word + two-line icon, becomes a close button */
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    min-block-size: 44px;
    padding: 0 var(--space-s);
    font-weight: 700;
    color: var(--color-ink);
    cursor: pointer;
    background: transparent;
    border: 2px solid var(--color-ink);
    border-radius: 999px;
  }

  .nav-toggle[hidden] {
    display: none;
  }

  .nav-toggle__icon,
  .nav-toggle__icon::before {
    display: block;
    inline-size: 18px;
    block-size: 2px;
    background: currentcolor;
    transition: transform 0.2s;
  }

  .nav-toggle__icon {
    position: relative;
    transform: translateY(-3px);
  }

  .nav-toggle__icon::before {
    position: absolute;
    inset-block-start: 6px;
    content: "";
  }

  .nav-toggle[aria-expanded="true"] {
    color: var(--color-inverse-ink);
    border-color: var(--color-inverse-accent);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
    inset-block-start: 0;
    transform: rotate(-90deg);
  }

  /* Phones and tablets: full-screen charcoal menu (no-JS shows the list) */
  .main-nav__list,
  .mega__list {
    padding: 0;
    list-style: none;
  }

  .main-nav {
    inline-size: 100%;
  }

  .js .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: none;
    padding: 7rem var(--gutter) var(--space-l);
    overflow-y: auto;
    color: var(--color-inverse-ink);
    background:
      radial-gradient(circle at 90% 10%, rgb(122 185 63 / 22%), transparent 50%),
      var(--color-inverse-bg);
  }

  .js .nav-toggle[aria-expanded="true"] + .main-nav {
    display: block;
  }

  .main-nav__link {
    display: block;
    padding-block: var(--space-xs);
    font-size: var(--step-1);
    font-weight: 700;
    color: inherit;
    text-decoration: none;
  }

  .js .main-nav__item {
    border-block-end: 1px solid rgb(169 214 122 / 20%);
  }

  .js .main-nav__link {
    font-size: var(--step-2);
  }

  .main-nav__link[aria-current="page"],
  .main-nav__link[data-section="current"] {
    color: var(--color-link);
  }

  .js .main-nav__link[aria-current="page"],
  .js .main-nav__link[data-section="current"] {
    color: var(--color-inverse-accent);
  }

  .mega__heading {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .js .mega__heading {
    color: var(--color-inverse-muted);
  }

  .mega__group {
    padding-block-end: var(--space-s);
  }

  .mega__link {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    color: inherit;
    text-decoration: none;
  }

  .mega__label {
    font-weight: 600;
  }

  .mega__text,
  .mega__promo {
    display: none;
  }

  .mega__link:hover .mega__label,
  .mega__link[aria-current="page"] .mega__label {
    color: var(--color-link);
    text-decoration: underline;
  }

  .js .mega__link:hover .mega__label,
  .js .mega__link[aria-current="page"] .mega__label {
    color: var(--color-inverse-accent);
  }

  .main-nav__item--cta .main-nav__link {
    margin-block-start: var(--space-m);
  }

  /* Desktop: inline menu with a growing green underline, mega menu panel,
     and a green pill for Contact */
  @media (min-width: 60rem) {
    .nav-toggle,
    .js .nav-toggle {
      display: none;
    }

    .main-nav,
    .js .main-nav {
      position: static;
      display: block;
      inline-size: auto;
      padding: 0;
      overflow: visible;
      color: var(--color-ink);
      background: none;
    }

    .main-nav__list {
      display: flex;
      gap: var(--space-m);
      align-items: center;
    }

    .main-nav__item,
    .js .main-nav__item {
      border: 0;
    }

    .main-nav__link,
    .js .main-nav__link {
      position: relative;
      padding-block: var(--space-xs);
      font-size: var(--step-0);
      font-weight: 600;
    }

    .main-nav__link::after {
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      block-size: 3px;
      content: "";
      background: var(--color-brand);
      border-radius: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }

    .main-nav__link:hover::after,
    .main-nav__link[aria-current="page"]::after,
    .main-nav__link[data-section="current"]::after,
    .main-nav__item--parent:where(:focus-within) > .main-nav__link::after {
      transform: scaleX(1);
    }

    .main-nav__link[aria-current="page"],
    .main-nav__link[data-section="current"],
    .js .main-nav__link[aria-current="page"],
    .js .main-nav__link[data-section="current"] {
      color: var(--color-ink);
    }

    .main-nav__item--parent > .main-nav__link {
      padding-inline-end: 1.1em;
    }

    .main-nav__item--parent > .main-nav__link::before {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-end: 0.1em;
      inline-size: 0.4em;
      block-size: 0.4em;
      content: "";
      border-block-end: 2px solid var(--color-brand-strong);
      border-inline-end: 2px solid var(--color-brand-strong);
      transform: translateY(-70%) rotate(45deg);
      transition: transform 0.2s;
    }

    .main-nav__item--parent:where(:hover, :focus-within) > .main-nav__link::before {
      transform: translateY(-30%) rotate(225deg);
    }

    .main-nav__item--cta .main-nav__link,
    .js .main-nav__item--cta .main-nav__link {
      padding: 0.55em 1.2em;
      margin: 0;
      color: var(--color-ink);
      background: var(--color-surface-accent);
      border-radius: 999px;
      transition: background-color 0.2s, color 0.2s;
    }

    .main-nav__item--cta .main-nav__link::after {
      display: none;
    }

    .main-nav__item--cta .main-nav__link:hover,
    .main-nav__item--cta .main-nav__link[aria-current="page"] {
      color: var(--color-inverse-ink);
      background: var(--color-brand-strong);
    }

    .main-nav__item--cta .main-nav__link::before {
      display: inline-block;
      margin-inline-end: 0.4em;
      content: "→";
      transition: transform 0.2s;
    }

    .main-nav__item--cta .main-nav__link:hover::before {
      transform: translateX(3px);
    }

    /* Stretch the item to the header's lower edge so the pointer can move
       from "What we do" down into the panel without the menu closing */
    .main-nav__item--parent {
      padding-block: var(--space-s) var(--space-m);
      margin-block: calc(-1 * var(--space-s)) calc(-1 * var(--space-m));
    }

    /* Mega menu: full-width panel under the header */
    .mega {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0;
      visibility: hidden;
      background: var(--color-surface);
      border-block: 1px solid var(--color-border);
      box-shadow: 0 24px 40px rgb(28 35 32 / 14%);
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .main-nav__item--parent:hover .mega,
    .main-nav__item--parent:focus-within .mega {
      visibility: visible;
      opacity: 1;
      transform: none;
    }

    .mega__inner {
      display: grid;
      grid-template-columns: 1fr 1.6fr 1fr;
      gap: var(--space-l);
      padding-block: var(--space-l);
    }

    .js .mega__heading {
      margin-block-end: var(--space-xs);
      color: var(--color-muted);
    }

    .mega__group:nth-of-type(2) .mega__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 var(--space-m);
    }

    .mega__link {
      display: block;
      padding: var(--space-xs) var(--space-s);
      margin-inline: calc(-1 * var(--space-s));
      border-radius: var(--radius);
    }

    .mega__link:hover {
      background: var(--color-surface-alt);
    }

    .mega__text {
      display: block;
      font-size: var(--step--1);
      color: var(--color-muted);
    }

    .js .mega__link:hover .mega__label,
    .js .mega__link[aria-current="page"] .mega__label {
      color: var(--color-link);
    }

    .mega__promo {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-block-size: 11rem;
      padding: var(--space-s);
      overflow: hidden;
      color: var(--color-inverse-ink);
      text-decoration: none;
      background: var(--color-inverse-bg);
      border-radius: var(--radius);
    }

    .mega__promo::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      background: linear-gradient(180deg, transparent, rgb(28 35 32 / 90%) 70%);
    }

    .mega__promo-image {
      position: absolute;
      inset: 0;
      z-index: -2;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }

    .mega__promo:hover .mega__promo-image {
      transform: scale(1.05);
    }

    .mega__promo .mega__heading,
    .js .mega__promo .mega__heading {
      margin: 0;
      color: var(--color-inverse-accent);
    }

    .mega__promo-title {
      font-weight: 700;
    }
  }

  /* Heroes */
  .home-hero,
  .page-hero {
    color: var(--color-inverse-ink);
    background:
      linear-gradient(135deg, rgb(91 130 27 / 35%), transparent 60%),
      var(--color-inverse-bg);
  }

  /* Image heroes and bands: photo behind, navy fade in front, text on top.
     Phones get an even fade (text spans the image); wider screens fade
     from solid navy behind the text to a clear view of the image. */
  .page-hero--image,
  .section--image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 70% center;
  }

  .page-hero--image::before,
  .section--image::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: rgb(28 35 32 / 78%);
  }

  @media (min-width: 48rem) {
    .page-hero--image::before {
      background: linear-gradient(90deg, var(--color-inverse-bg) 0%, rgb(28 35 32 / 88%) 35%, rgb(28 35 32 / 35%) 70%, rgb(28 35 32 / 10%) 100%);
    }

    .page-hero--image {
      padding-block: var(--space-2xl);
    }
  }

  .section--image {
    --mark-color: var(--color-inverse-accent);
    --rule-color: rgb(169 214 122 / 35%);

    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
  }

  .section--image::before {
    background: rgb(28 35 32 / 72%);
  }

  .home-hero {
    padding-block: var(--space-2xl);
  }

  .page-hero {
    padding-block: var(--space-xl);
  }

  .home-hero__title {
    max-inline-size: 18ch;
    font-size: var(--step-4);
  }

  .page-hero__eyebrow {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-inverse-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .page-hero__eyebrow a {
    color: inherit;
  }

  .lead {
    max-inline-size: 60ch;
    font-size: var(--step-1);
    line-height: 1.45;
  }

  .home-hero .lead,
  .page-hero .lead {
    color: var(--color-inverse-accent);
  }

  /* Buttons: dark blue + white = 15.8:1 */
  .button {
    display: inline-block;
    min-block-size: 44px;
    padding: 0.7em 1.4em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-inverse-ink);
    text-decoration: none;
    cursor: pointer;
    background: var(--color-inverse-bg);
    border: 2px solid var(--color-inverse-bg);
    border-radius: var(--radius);
  }

  .button:hover {
    color: var(--color-inverse-bg);
    background: var(--color-inverse-accent);
  }

  .home-hero .button,
  .page-hero .button,
  .cta-band .button,
  .section--image .button {
    color: var(--color-ink);
    background: var(--color-inverse-accent);
    border-color: var(--color-inverse-accent);
  }

  .home-hero .button:hover,
  .page-hero .button:hover,
  .cta-band .button:hover,
  .section--image .button:hover {
    color: var(--color-inverse-ink);
    background: transparent;
  }

  /* Home page carousel: a horizontal scroller with snap points, so it works
     (by swiping or scrolling) without JavaScript. main.js adds the controls,
     auto-advance and a pause button, and hides the scrollbar. */
  .hero-carousel {
    position: relative;
    isolation: isolate;
    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
  }

  .hero-carousel__track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .js .hero-carousel__track {
    scrollbar-width: none;
  }

  .js .hero-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .hero-slide {
    flex: 0 0 100%;
    padding-block-end: calc(var(--space-2xl) + 3rem); /* room for the controls */
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .hero-carousel__controls {
    position: absolute;
    inset-block-end: var(--space-m);
    inset-inline: 0;
    z-index: 1;
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
  }

  .hero-carousel__controls[hidden] {
    display: none;
  }

  .hero-carousel__button {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0 var(--space-s);
    font-weight: 700;
    color: var(--color-inverse-ink);
    cursor: pointer;
    background: rgb(28 35 32 / 60%);
    border: 2px solid var(--color-inverse-accent);
    border-radius: 999px;
  }

  .hero-carousel__button:hover {
    color: var(--color-ink);
    background: var(--color-inverse-accent);
  }

  .hero-carousel__dots {
    display: flex;
    flex: 1;
    gap: var(--space-2xs);
    justify-content: center;
    min-inline-size: 0;
    padding: 0;
    list-style: none;
  }

  .hero-carousel__dot {
    display: block;
    inline-size: 1.25rem;
    min-block-size: 44px;
    padding: 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--color-inverse-muted);
    cursor: pointer;
    background: none;
    border: 0;
    border-block-end: 4px solid rgb(169 214 122 / 30%);
    transition: color 0.2s, border-color 0.2s;
  }

  .hero-carousel__dot:hover {
    color: var(--color-inverse-ink);
    border-block-end-color: var(--color-inverse-accent);
  }

  .hero-carousel__dot[aria-current="true"] {
    color: var(--color-inverse-ink);
    border-block-end-color: var(--color-brand);
  }

  /* Phones: plain bars; the label stays for screen readers */
  .hero-carousel__dot-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (min-width: 40rem) {
    .hero-carousel__controls {
      gap: var(--space-xs);
    }

    .hero-carousel__dot {
      inline-size: 2rem;
    }
  }

  @media (min-width: 60rem) {
    .hero-carousel__dots {
      justify-content: flex-start;
    }

    .hero-carousel__dot {
      inline-size: auto;
      padding: 0 var(--space-xs);
    }

    .hero-carousel__dot-label {
      position: static;
      inline-size: auto;
      block-size: auto;
      overflow: visible;
      clip-path: none;
    }
  }

  /* Service cards */
  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-m);
    padding: 0;
    margin-block-start: var(--space-m);
    list-style: none;
  }

  .service-card {
    position: relative;
    padding: var(--space-m);
    color: var(--color-ink);
    background: var(--color-surface);
    border-block-start: 4px solid var(--color-brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .service-card__title {
    margin-block-end: var(--space-xs);
  }

  .service-card__title a {
    color: inherit; /* follows the card: dark blue, white over the photo */
    text-decoration: none;
  }

  /* Whole card clickable, link text stays the accessible name */
  .service-card__title a::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .service-card:hover,
  .service-card:focus-within {
    outline: 2px solid var(--color-brand);
  }

  .service-card--photo {
    isolation: isolate;
    overflow: hidden;
    transition: color 0.25s;
  }

  .service-card__image,
  .service-card--photo::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.25s;
  }

  .service-card__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Navy tint over the photo keeps white text above 7:1 */
  .service-card--photo::before {
    content: "";
    background: linear-gradient(160deg, rgb(28 35 32 / 92%), rgb(28 35 32 / 72%));
  }

  .service-card--photo:hover,
  .service-card--photo:focus-within {
    color: var(--color-inverse-ink);
  }

  .service-card--photo:hover .service-card__image,
  .service-card--photo:focus-within .service-card__image,
  .service-card--photo:hover::before,
  .service-card--photo:focus-within::before {
    opacity: 1;
  }

  /* Forms */
  .field {
    display: grid;
    gap: var(--space-2xs);
  }

  .field label {
    font-weight: 600;
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    padding: 0.65em 0.8em;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 2px solid var(--color-muted);
    border-radius: var(--radius);
  }

  .field [aria-invalid="true"] {
    border-color: var(--color-error);
  }

  .field__error {
    font-weight: 600;
    color: var(--color-error);
  }

  .field__optional,
  .field__hint {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  /* CAPTCHA box: 24px checkbox inside a 44px-tall target */
  .captcha__box {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    min-block-size: 44px;
    padding: var(--space-xs) var(--space-s);
    background: var(--color-surface-alt);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
  }

  .captcha__box[hidden] {
    display: none;
  }

  .captcha__box input {
    inline-size: 24px;
    block-size: 24px;
    accent-color: var(--color-ink);
  }

  .captcha__box label {
    font-weight: 600;
  }

  .captcha__status {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  .captcha.is-verified .captcha__status {
    font-weight: 600;
    color: var(--color-success);
  }

  .field--hp {
    position: absolute;
    inset-inline-start: -9999px;
  }

  /* Contact page offices: static map (no third-party loads) linking out.
     Stacked on phones; map beside the address, two offices side by side, wider up. */
  .office-grid {
    display: grid;
    gap: var(--space-l);
  }

  .office {
    display: grid;
    gap: var(--space-s);
    align-items: start;
    scroll-margin-block-start: var(--space-2xl);
  }

  .office__map {
    display: block;
    max-inline-size: 15rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .office__map img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  @media (min-width: 40rem) {
    .office {
      grid-template-columns: 12rem 1fr;
    }
  }

  @media (min-width: 60rem) {
    .office-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .office__credit {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  /* Admin (enquiries) */
  .admin-login {
    max-inline-size: 24rem;
  }

  .admin-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    justify-content: space-between;
  }

  .admin-bar form {
    display: flex;
    gap: var(--space-s);
    align-items: center;
  }

  .admin-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: 0;
    list-style: none;
  }

  .admin-nav__link {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius);
  }

  .admin-nav__link:hover {
    background: var(--color-surface-alt);
  }

  .admin-nav__link[aria-current="page"] {
    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
  }

  .admin-panel {
    padding: var(--space-m);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
  }

  .admin-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .admin-inline input {
    min-block-size: 44px;
    padding: 0.4em 0.8em;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius);
  }

  .recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-2xs) var(--space-s);
    padding: 0;
    font-size: var(--step-1);
    list-style: none;
  }

  .totp-qr {
    padding: var(--space-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .totp-secret {
    font-size: var(--step-0);
    word-break: break-all;
  }

  .table-scroll {
    overflow-x: auto;
  }

  .admin-bar__user {
    color: var(--color-muted);
  }

  .admin-badge,
  .admin-tag {
    display: inline-block;
    padding: 0.1em 0.6em;
    font-size: var(--step--1);
    font-weight: 600;
    vertical-align: middle;
    border-radius: 999px;
  }

  .admin-badge {
    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
  }

  .admin-tag {
    color: var(--color-ink);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
  }

  .admin-tag--warn {
    color: var(--color-error);
    border-color: currentcolor;
  }

  .admin-button {
    min-block-size: 44px;
    padding: 0.4em 1em;
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
    background: var(--color-surface);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius);
  }

  .admin-button:hover {
    background: var(--color-surface-alt);
  }

  .admin-button--danger {
    color: var(--color-error);
    border-color: currentcolor;
  }

  .enquiry {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-border);
    border-radius: var(--radius);
  }

  .enquiry--unread {
    border-inline-start-color: var(--color-brand);
    box-shadow: var(--shadow);
  }

  .enquiry__name {
    font-size: var(--step-1);
  }

  .enquiry--unread .enquiry__name {
    font-weight: 800;
  }

  .enquiry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    align-items: center;
    color: var(--color-muted);
  }

  .enquiry__message {
    max-inline-size: 75ch;
    padding: var(--space-s);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
  }

  .enquiry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .admin-pages {
    display: flex;
    gap: var(--space-m);
    justify-content: center;
  }

  /* Client area (and the admin Clients pages) */
  .client-bar {
    padding: var(--space-s) var(--space-m);
    background: var(--color-surface-alt);
    border-block-start: 4px solid var(--color-brand);
    border-radius: var(--radius);
  }

  .client-bar__org {
    display: grid;
    line-height: 1.3;
  }

  .client-bar__label {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-link);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .client-bar__name {
    font-weight: 700;
  }

  .client-signin {
    display: grid;
    gap: var(--space-l);
    align-items: start;
  }

  @media (min-width: 56rem) {
    .client-signin {
      grid-template-columns: 1fr 1fr;
    }
  }

  .client-panels {
    display: grid;
    gap: var(--space-m);
    align-items: start;
  }

  @media (min-width: 56rem) {
    .client-panels {
      grid-template-columns: 1fr 1fr;
    }
  }

  .stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-m);
    padding: 0;
    list-style: none;
  }

  .stat-tile {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-m);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-block-start: 4px solid var(--color-brand);
    border-radius: var(--radius);
  }

  .stat-tile--due {
    border-block-start-color: var(--color-error);
  }

  .stat-tile__value {
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1.1;
  }

  .stat-tile__label {
    color: var(--color-muted);
  }

  .stat-tile__link {
    font-weight: 600;
  }

  .data-table th,
  .data-table td {
    padding-inline-end: var(--space-m);
  }

  .data-table thead th {
    font-size: var(--step--1);
    color: var(--color-muted);
    white-space: nowrap;
  }

  .data-table tbody th {
    font-weight: 600;
  }

  .data-table__num {
    text-align: end;
    white-space: nowrap;
  }

  .licence-list {
    display: grid;
    gap: var(--space-m);
    padding: 0;
    list-style: none;
  }

  .licence {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-brand);
    border-radius: var(--radius);
  }

  .licence__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
    align-items: baseline;
  }

  .licence__type {
    flex-basis: 100%;
  }

  .licence__title {
    font-size: var(--step-1);
  }

  .licence__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-xs) var(--space-m);
  }

  .licence__facts dt {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  .licence__facts dd {
    margin: 0;
    font-weight: 600;
  }

  .licence__key {
    grid-column: 1 / -1;
  }

  .licence__key code {
    word-break: break-all;
  }

  .licence__details {
    color: var(--color-muted);
  }

  .choice-list {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    border: 0;
  }

  .choice-list legend {
    margin-block-end: var(--space-xs);
    font-weight: 600;
  }

  .choice {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    min-block-size: 44px;
  }

  .choice input {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    accent-color: var(--color-brand-strong);
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-s) var(--space-m);
  }

  .invite-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-s) var(--space-m);
    align-items: end;
  }

  .admin-row summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
    align-items: center;
    min-block-size: 44px;
    cursor: pointer;
  }

  .admin-row > form {
    margin-block-start: var(--space-s);
  }

  .admin-row + .admin-row {
    margin-block-start: var(--space-xs);
  }

  /* Admin site index: pages as a tree with connecting lines */
  .site-tree {
    padding: 0;
    list-style: none;
  }

  .site-tree .site-tree {
    padding-inline-start: var(--space-m);
    margin-inline-start: var(--space-xs);
    border-inline-start: 2px solid var(--color-border);
  }

  .site-tree__item {
    position: relative;
    padding-block-start: var(--space-xs);
  }

  .site-tree .site-tree .site-tree__item::before {
    position: absolute;
    inset-block-start: 1.4em;
    inset-inline-start: calc(-1 * var(--space-m));
    inline-size: calc(var(--space-m) - var(--space-2xs));
    content: "";
    border-block-start: 2px solid var(--color-border);
  }

  .site-tree__page {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-brand);
    border-radius: var(--radius);
  }

  .site-tree__title {
    font-weight: 700;
  }

  .site-tree__title code {
    margin-inline-start: var(--space-2xs);
    font-size: var(--step--1);
    font-weight: 400;
    color: var(--color-muted);
  }

  .site-tree__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    align-items: center;
    font-size: var(--step--1);
  }

  .site-tree__description {
    max-inline-size: 75ch;
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  .site-tree__folder {
    display: inline-block;
    padding: var(--space-2xs) var(--space-s);
    font-weight: 700;
    background: var(--color-surface-alt);
    border-radius: var(--radius);
  }

  .admin-tag--ok {
    color: var(--color-success);
    border-color: currentcolor;
  }

  .admin-tag--due {
    color: var(--color-error);
    background: var(--color-surface);
    border-color: currentcolor;
  }

  .admin-tag--partial {
    color: var(--color-warning);
    border-color: currentcolor;
  }

  /* Admin → Maintenance: security rules grouped by section */
  .rule-section {
    background: var(--color-surface-alt);
    border-radius: var(--radius);
  }

  .rule-section__summary {
    min-block-size: 44px;
    padding: var(--space-s) var(--space-m);
    font-weight: 700;
    cursor: pointer;
  }

  .rule {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-m);
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
  }

  .rule__head,
  .rule__text,
  .rule__meta {
    margin: 0;
  }

  .rule__meta {
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  .rule__record summary {
    min-block-size: 44px;
    padding-block: var(--space-2xs);
    font-weight: 600;
    color: var(--color-link);
    cursor: pointer;
  }

  .rule__form {
    display: grid;
    gap: var(--space-2xs);
    max-inline-size: 40rem;
  }

  .rule__form select,
  .rule__form textarea {
    min-block-size: 44px;
    padding: 0.4em 0.8em;
    font: inherit;
    border: 2px solid var(--color-muted);
    border-radius: var(--radius);
  }

  .rule__form .admin-button {
    justify-self: start;
  }

  .maintenance__detail {
    overflow-wrap: anywhere;
  }

  /* Admin → Analytics: inline SVG chart and share bars (widths are classes,
     as the CSP allows no style attributes) */
  .chart {
    inline-size: 100%;
    block-size: auto;
  }

  .chart__bar {
    fill: var(--color-surface-accent);
  }

  .chart__line {
    fill: none;
    stroke: var(--color-brand-strong);
    stroke-width: 2.5;
  }

  .chart__axis {
    stroke: var(--color-border);
  }

  .chart__label {
    font-size: 11px;
    text-anchor: middle;
    fill: var(--color-muted);
  }

  .chart-key {
    display: inline-block;
    inline-size: 1.2em;
    block-size: 0.8em;
    margin-inline: var(--space-s) var(--space-2xs);
    vertical-align: middle;
  }

  .chart-key--bar {
    background: var(--color-surface-accent);
  }

  .chart-key--line {
    block-size: 3px;
    background: var(--color-brand-strong);
  }

  .analytics-table th[scope="row"] {
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .share {
    display: block;
    block-size: 4px;
    margin-block-start: var(--space-2xs);
    background: var(--color-surface-alt);
    border-radius: 2px;
  }

  .share__bar {
    display: block;
    block-size: 100%;
    background: var(--color-brand);
    border-radius: 2px;
  }

  .share__bar--0 {
    inline-size: 0%;
  }

  .share__bar--5 {
    inline-size: 5%;
  }

  .share__bar--10 {
    inline-size: 10%;
  }

  .share__bar--15 {
    inline-size: 15%;
  }

  .share__bar--20 {
    inline-size: 20%;
  }

  .share__bar--25 {
    inline-size: 25%;
  }

  .share__bar--30 {
    inline-size: 30%;
  }

  .share__bar--35 {
    inline-size: 35%;
  }

  .share__bar--40 {
    inline-size: 40%;
  }

  .share__bar--45 {
    inline-size: 45%;
  }

  .share__bar--50 {
    inline-size: 50%;
  }

  .share__bar--55 {
    inline-size: 55%;
  }

  .share__bar--60 {
    inline-size: 60%;
  }

  .share__bar--65 {
    inline-size: 65%;
  }

  .share__bar--70 {
    inline-size: 70%;
  }

  .share__bar--75 {
    inline-size: 75%;
  }

  .share__bar--80 {
    inline-size: 80%;
  }

  .share__bar--85 {
    inline-size: 85%;
  }

  .share__bar--90 {
    inline-size: 90%;
  }

  .share__bar--95 {
    inline-size: 95%;
  }

  .share__bar--100 {
    inline-size: 100%;
  }

  .notice {
    padding: var(--space-s) var(--space-m);
    border-inline-start: 6px solid;
    border-radius: var(--radius);
  }

  .notice--success {
    background: #e9f6ee;
    border-color: var(--color-success);
  }

  .notice--error {
    background: #fbeceb;
    border-color: var(--color-error);
  }

  .todo {
    padding: var(--space-xs) var(--space-s);
    background: #fff4d6;
    border: 1px dashed #b88600;
  }

  /* Credentials strip under the home hero: facts, not claims */
  .credentials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-s) var(--space-m);
    padding: 0;
    list-style: none;
  }

  .credentials__item {
    padding-inline-start: var(--space-s);
    border-inline-start: 4px solid var(--color-brand);
  }

  .credentials__value {
    display: block;
    font-size: var(--step-1);
    font-weight: 800;
    line-height: 1.2;
  }

  .credentials__label {
    display: block;
    font-size: var(--step--1);
    color: var(--color-muted);
  }

  /* Eyebrow above section headings */
  .eyebrow {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-link);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .section--image .eyebrow,
  .cta-band .eyebrow,
  .focus-card .eyebrow {
    color: var(--color-inverse-accent);
  }

  /* Headline specialisms (AI, regulatory reporting): photo panels */
  .focus-grid {
    display: grid;
    gap: var(--space-m);
    padding: 0;
    margin-block-start: var(--space-l);
    list-style: none;
  }

  @media (min-width: 48rem) {
    .focus-grid {
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
  }

  .focus-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    justify-content: flex-end;
    min-block-size: 26rem;
    padding: var(--space-l) var(--space-m) var(--space-m);
    overflow: hidden;
    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
    border-radius: var(--radius);
  }

  .focus-card__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 75% center;
    transition: transform 0.6s ease;
  }

  .focus-card::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, rgb(28 35 32 / 15%) 0%, rgb(28 35 32 / 80%) 45%, rgb(28 35 32 / 96%) 100%);
  }

  .focus-card:hover .focus-card__image,
  .focus-card:focus-within .focus-card__image {
    transform: scale(1.04);
  }

  .focus-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .focus-card__title a::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .focus-card:focus-within {
    outline: 3px solid var(--color-brand);
    outline-offset: 3px;
  }

  .focus-card__more {
    font-weight: 700;
    color: var(--color-inverse-accent);
  }

  /* Text beside a photo; the photo goes first on phones */
  .split {
    display: grid;
    gap: var(--space-l);
    align-items: center;
  }

  .split__media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 70% center;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  @media (min-width: 56rem) {
    .split {
      grid-template-columns: 1fr 1fr;
    }

    .split--reverse .split__media {
      order: 2;
    }
  }

  /* Ticked list */
  .check-list {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    list-style: none;
  }

  .check-list li {
    position: relative;
    padding-inline-start: 2em;
  }

  .check-list li::before {
    position: absolute;
    inset-block-start: 0.3em;
    inset-inline-start: 0.35em;
    inline-size: 0.5em;
    block-size: 0.9em;
    content: "";
    border-block-end: 3px solid var(--mark-color, var(--color-brand-strong));
    border-inline-end: 3px solid var(--mark-color, var(--color-brand-strong));
    transform: rotate(45deg);
  }

  .check-list--columns {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-xs) var(--space-l);
  }

  /* Cards without photo hover: capabilities, regulations, insights */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-m);
    padding: 0;
    margin-block-start: var(--space-m);
    list-style: none;
  }

  /* Six items: three by two on wide screens */
  .card-grid--thirds {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    overflow: hidden;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-block-start: 4px solid var(--color-brand);
    border-radius: var(--radius);
  }

  .card h3 {
    font-size: var(--step-1);
  }

  .card__tag {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-link);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .card--link a {
    color: var(--color-ink);
    text-decoration: none;
  }

  .card--link a::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .card--link:hover,
  .card--link:focus-within {
    outline: 2px solid var(--color-brand-strong);
  }

  .card__image {
    inline-size: calc(100% + 2 * var(--space-m));
    max-inline-size: none;
    margin: calc(-1 * var(--space-m)) calc(-1 * var(--space-m)) var(--space-xs);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 70% center;
  }

  .card--media {
    border-block-start-width: 1px;
  }

  /* Numbered approach steps */
  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-m);
    padding: 0;
    margin-block-start: var(--space-m);
    list-style: none;
    counter-reset: step;
  }

  .steps li {
    padding-block-start: var(--space-s);
    border-block-start: 2px solid var(--rule-color, var(--color-border));
    counter-increment: step;
  }

  .steps li::before {
    display: block;
    margin-block-end: var(--space-2xs);
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1;
    color: var(--mark-color, var(--color-brand-strong));
    content: counter(step, decimal-leading-zero);
  }

  .steps h3 {
    margin-block-end: var(--space-2xs);
    font-size: var(--step-1);
  }


  /* Questions and answers */
  .faq {
    max-inline-size: 70ch;
  }

  .faq details {
    border-block-end: 1px solid var(--color-border);
  }

  .faq summary {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    justify-content: space-between;
    min-block-size: 44px;
    padding-block: var(--space-s);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    flex: none;
    font-size: var(--step-1);
    font-weight: 400;
    color: var(--color-brand-strong);
    content: "+";
  }

  .faq details[open] summary::after {
    content: "−";
  }

  .faq details > :not(summary) {
    padding-block-end: var(--space-s);
  }

  /* Closing call to action */
  .cta-band {
    color: var(--color-inverse-ink);
    background:
      radial-gradient(circle at 85% 20%, rgb(122 185 63 / 30%), transparent 45%),
      var(--color-inverse-bg);
  }

  .cta-band__inner {
    display: grid;
    gap: var(--space-m);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .cta-band__inner {
      grid-template-columns: 2fr auto;
    }
  }

  .cta-band .lead {
    color: var(--color-inverse-accent);
  }

  .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .home-hero .button--ghost,
  .page-hero .button--ghost {
    color: var(--color-inverse-ink);
    background: transparent;
    border-color: var(--color-inverse-accent);
  }

  .home-hero .button--ghost:hover,
  .page-hero .button--ghost:hover {
    color: var(--color-ink);
    background: var(--color-inverse-accent);
  }

  /* Partner names (text only) */
  .partner-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0;
    list-style: none;
  }

  .partner-list li {
    padding: var(--space-2xs) var(--space-m);
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
  }

  /* Insight articles */
  .article {
    max-inline-size: 70ch;
  }

  .article h2 {
    margin-block-start: var(--space-l);
    font-size: var(--step-1);
  }

  .article blockquote {
    padding-inline-start: var(--space-m);
    font-size: var(--step-1);
    font-weight: 600;
    border-inline-start: 4px solid var(--color-brand);
  }

  .aside-note {
    padding: var(--space-m);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
  }

  /* Call-out on an alternate-shaded section: white panel, green edge */
  .aside-note--feature {
    max-inline-size: 70ch;
    margin-block-end: var(--space-l);
    background: var(--color-surface);
    border-inline-start: 6px solid var(--color-brand);
  }

  /* Contact page: one large map beside the address */
  .office-feature {
    display: grid;
    gap: var(--space-l);
    align-items: center;
  }

  .office-feature__map {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .office-feature__map img {
    inline-size: 100%;
    block-size: auto;
  }

  @media (min-width: 56rem) {
    .office-feature {
      grid-template-columns: 3fr 2fr;
    }
  }

  /* Footer */
  .site-footer {
    padding-block: var(--space-xl) var(--space-m);
    color: var(--color-inverse-ink);
    background: var(--color-inverse-bg);
  }

  .site-footer a {
    color: var(--color-inverse-ink);
  }

  .site-footer a:hover {
    color: var(--color-inverse-accent);
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-l);
  }

  .site-footer__heading {
    margin-block-end: var(--space-xs);
    font-size: var(--step-0);
    color: var(--color-inverse-accent);
  }

  .site-footer__strap {
    margin-block-start: var(--space-s);
    color: var(--color-inverse-accent);
  }

  .site-footer__reg {
    font-size: var(--step--1);
    opacity: 0.85;
  }

  .site-footer__list li + li {
    margin-block-start: var(--space-2xs);
  }

  .site-footer__list,
  .site-footer__social,
  .site-footer__legal,
  .plain-list {
    padding: 0;
    list-style: none;
  }

  .site-footer__social,
  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
    margin-block-start: var(--space-s);
  }

  .site-footer__social {
    gap: var(--space-xs);
  }

  .site-footer__legal {
    gap: var(--space-2xs) 0;
  }

  .site-footer__legal li + li::before {
    padding-inline: var(--space-xs);
    color: var(--color-inverse-muted);
    content: "|";
  }

  .site-footer .site-footer__legal a,
  .site-footer .site-footer__list a {
    text-decoration: none;
  }

  .site-footer .site-footer__legal a:hover,
  .site-footer .site-footer__legal a:focus-visible,
  .site-footer .site-footer__list a:hover,
  .site-footer .site-footer__list a:focus-visible {
    text-decoration: underline;
  }

  /* Office addresses: a block that highlights on hover; pin icon on phones */
  .site-footer .site-footer__office-link {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
    padding: var(--space-xs) var(--space-s);
    margin-inline: calc(-1 * var(--space-s));
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: background-color 0.15s, border-color 0.15s;
  }

  .site-footer .site-footer__office-link:hover,
  .site-footer .site-footer__office-link:focus-visible {
    color: var(--color-inverse-ink);
    background: rgb(169 214 122 / 10%);
    border-color: rgb(169 214 122 / 35%);
  }

  .site-footer__pin {
    flex: none;
    margin-block-start: 0.15em;
    fill: var(--color-inverse-accent);
  }

  @media (min-width: 48rem) {
    .site-footer__pin {
      display: none;
    }
  }

  /* Round icon buttons: light blue on dark blue (12.1:1), 44px targets */
  .site-footer .social-link {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    color: var(--color-inverse-accent);
    border: 1px solid rgb(169 214 122 / 35%);
    border-radius: 50%;
    transition: color 0.15s, background-color 0.15s;
  }

  .site-footer .social-link:hover {
    color: var(--color-inverse-bg);
    background: var(--color-inverse-accent);
  }

  .social-link__icon {
    inline-size: 20px;
    block-size: 20px;
    fill: currentcolor;
  }

  .site-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    justify-content: space-between;
    padding-block-start: var(--space-m);
    margin-block-start: var(--space-l);
    font-size: var(--step--1);
    border-block-start: 1px solid rgb(169 214 122 / 25%);
  }

  .site-footer__version {
    color: var(--color-inverse-muted);
    white-space: nowrap;
  }

}

/* ---------- Utilities ---------- */
@layer utilities {
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  /* Readable line length; the children are limited rather than the box, so a
     .container.prose keeps its left edge in line with the rest of the page */
  .nowrap {
    white-space: nowrap;
  }

  .prose > * {
    max-inline-size: 70ch;
  }

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

  /* Duo mode: the page spans two side-by-side screens (dual-screen or
     foldable devices, detected by main.js through the Viewport Segments API;
     add ?duo to any address to preview it). Columns sit one per screen and
     text never runs under the hinge. main.js sets --duo-left (width of the
     left screen) and --duo-hinge (gap between the screens). */
  .duo-h .container {
    inline-size: auto;
    margin-inline: var(--gutter);
  }

  .duo-h :is(.split, .client-panels, .focus-grid, .card-grid, .service-grid, .credentials, .stat-tiles,
    .office-feature, .contact-layout, .client-signin, .cta-band__inner, .site-footer__inner, .steps, .mega__inner) {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--duo-hinge) + 2 * var(--gutter));
  }

  .duo-h :where(.home-hero .container, .page-hero .container, .prose, .article) > * {
    max-inline-size: calc(var(--duo-left) - 2 * var(--gutter));
  }

  /* Carousel controls stay on the left screen, as plain bars */
  .duo-h .hero-carousel__controls {
    inset-inline-end: auto;
    inline-size: calc(var(--duo-left) - 2 * var(--gutter));
  }

  .duo-h .hero-carousel__dots {
    justify-content: center;
  }

  .duo-h .hero-carousel__dot {
    inline-size: 2rem;
    padding: 0;
  }

  .duo-h .hero-carousel__dot-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}