/* ==========================================================================
   Aptos
   --------------------------------------------------------------------------
   Aptos is Microsoft's font. It is installed on any machine with Microsoft 365
   or a recent Office, which covers most corporate visitors, and those visitors
   already see Aptos through the font stack below with no download at all.

   To serve Aptos to EVERY visitor, place the web font files in
   /assets/fonts/ using exactly these names, then delete the two lines marked
   REMOVE below to switch the @font-face rules on:

       aptos-regular.woff2
       aptos-semibold.woff2
       aptos-bold.woff2

   Check your Microsoft licence before doing this. Aptos ships with Office and
   Windows for use ON those products; redistributing it from a public web
   server is a separate permission. If the licence does not allow it, leave
   this block switched off. The site then uses Aptos for anyone who has it and
   falls back to Helvetica for everyone else, which is what the original brief
   specified.

   Nothing here breaks if the files are absent: the rules stay commented out
   and no failed requests are made.
   ========================================================================== */

/* REMOVE this line to enable self hosted Aptos
@font-face {
  font-family: "Aptos Web";
  src: url("/assets/fonts/aptos-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos Web";
  src: url("/assets/fonts/aptos-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos Web";
  src: url("/assets/fonts/aptos-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
REMOVE this line to enable self hosted Aptos */

/* ==========================================================================
   Ark Associates Limited
   Design system and site styles
   No external CSS frameworks, no web fonts, no icon fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Type */
  --font-sans: "Aptos Web", "Aptos", "Aptos Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-100: 0.75rem;    /* 12 - labels, eyebrows */
  --fs-200: 0.8125rem;  /* 13 - meta */
  --fs-300: 0.9375rem;  /* 15 - small body */
  --fs-400: 1rem;       /* 16 - body */
  --fs-500: 1.0625rem;  /* 17 - lead body */
  --fs-600: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);   /* h4 / lead */
  --fs-700: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);       /* h3 */
  --fs-800: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);        /* h2 */
  --fs-900: clamp(2rem, 1.55rem + 2vw, 3.125rem);           /* h1 hero */

  --lh-tight: 1.14;
  --lh-snug: 1.28;
  --lh-body: 1.62;

  /* Brand colour. Ark cyan is retained as the identity colour.
     Darker cyans are used wherever the colour carries text, for contrast. */
  --brand: #00adee;
  --brand-600: #0090c8;
  --brand-700: #00749f;
  --brand-800: #005b7d;
  --brand-tint: #e8f6fd;

  /* Institutional neutrals */
  --ink: #0d1f2b;
  --ink-800: #14293648;
  --ink-700: #17313f;
  --ink-500: #41596a;
  --muted: #5b7280;
  --grey: #939697;

  --line: #dde5ea;
  --line-strong: #c3d0d8;

  --bg: #ffffff;
  --bg-soft: #eff6fa;
  --bg-deep: #0b3a56;

  /* Blue ramp drawn from the cyan in the Ark mark. These carry the dark
     surfaces so the site reads as blue rather than near black. */
  --blue-900: #072a3e;
  --blue-800: #0a3a56;
  --blue-700: #0d4a6b;
  --blue-600: #125c81;

  --focus: #0090c8;

  /* Layout */
  --container: 1180px;
  --container-narrow: 780px;
  --gutter: clamp(1.125rem, 0.7rem + 1.8vw, 2.25rem);
  --sp-section: clamp(3.25rem, 2.2rem + 3.4vw, 5.25rem);
  --sp-section-tight: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);

  --radius: 3px;
  --radius-lg: 5px;

  --shadow-sm: 0 1px 2px rgba(13, 31, 43, 0.06);
  --shadow-md: 0 6px 20px -8px rgba(13, 31, 43, 0.22);
  --shadow-lg: 0 18px 42px -22px rgba(13, 31, 43, 0.38);

  --t-fast: 140ms ease;
  --t-base: 220ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-900); line-height: var(--lh-tight); letter-spacing: -0.024em; }
h2 { font-size: var(--fs-800); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-800); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15rem; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
figure { margin: 0; }

strong { font-weight: 700; color: var(--ink); }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  font-size: var(--fs-300);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: var(--sp-section-tight); }
.section--soft { background: var(--bg-soft); }
.section--deep {
  background: linear-gradient(155deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #cbe0ea;
}
.section--deep p { color: #b6d0dd; }
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }

.grid { display: grid; gap: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem); }

/* Grid and flex items default to min-width:auto, which lets wide children such
   as data tables force the whole track open. Reset it everywhere it matters. */
.grid > *,
.split > *,
.article-layout > *,
.contact-grid > *,
.cta-band__inner > *,
.section-head--split > *,
.site-footer__grid > * { min-width: 0; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.measure { max-width: 66ch; }
.measure-tight { max-width: 56ch; }

/* --------------------------------------------------------------------------
   4. Signature: checker rule
   Derived from the chequered mark inside the Ark logotype. Used as the
   section eyebrow marker throughout the site.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 8px;
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: 0.85;
}
.section--deep .eyebrow { color: var(--brand); }

.section-head { margin-bottom: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.section-head p { color: var(--muted); font-size: var(--fs-500); max-width: 62ch; }
.section--deep .section-head p { color: #b6d0dd; }

.section-head--split { display: grid; gap: 1rem 3rem; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn svg { flex: none; }

.btn--primary { background: var(--brand-700); color: #fff; }
.btn--primary:hover { background: var(--brand-800); color: #fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #071620; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

.btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #eef4f7; color: var(--ink); }

/* On the blue surfaces a blue button loses its edge, so the primary action
   inverts to white. The secondary stays outlined. */
.hero .btn--primary,
.cta-band .btn--primary,
.section--deep .btn--primary {
  background: #ffffff;
  color: var(--blue-900);
}
.hero .btn--primary:hover,
.cta-band .btn--primary:hover,
.section--deep .btn--primary:hover {
  background: #d8ecf7;
  color: var(--blue-900);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 15px; height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M10.2.3 9.1 1.4l2.3 2.3H0v1.6h11.4L9.1 7.6l1.1 1.1L14.6 4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M10.2.3 9.1 1.4l2.3 2.3H0v1.6h11.4L9.1 7.6l1.1 1.1L14.6 4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--t-fast);
}
.link-arrow:hover { color: var(--brand-800); text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* On the dark sections the darker cyan does not carry enough contrast,
   so links there use the full brand cyan. */
.section--deep .link-arrow,
.cta-band .link-arrow,
.hero .link-arrow { color: var(--brand); }
.section--deep .link-arrow:hover,
.cta-band .link-arrow:hover,
.hero .link-arrow:hover { color: #6fd2f7; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--blue-900);
  color: #b9d2de;
  font-size: var(--fs-200);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
}
.topbar__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.topbar a { color: #ddeef6; text-decoration: none; display: inline-block; padding-block: 0.2rem; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar__item svg { flex: none; opacity: 0.75; }
.topbar__social { display: inline-flex; align-items: center; gap: 0.75rem; }
.topbar__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 2px;
}
.topbar__social a:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 767px) {
  .topbar__social { display: none; }
  .topbar .container { justify-content: center; }
  .topbar__contact { justify-content: center; gap: 0.35rem 1rem; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 82px;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

/* Brand: the Ark mark on its own. The firm name is carried for assistive
   technology and search engines by the visually hidden label beside it. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.brand__mark {
  width: auto;
  height: 62px;
  flex: none;
  transition: transform var(--t-base);
}
.brand:hover .brand__mark { transform: translateY(-1px); }
@media (max-width: 560px) { .brand__mark { height: 50px; } }

/* Primary navigation */
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0; padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  color: var(--ink-700);
  font-size: var(--fs-300);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.35rem;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__caret { transition: transform var(--t-fast); }

/* Desktop dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 292px;
  margin: 0; padding: 0.5rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.dropdown a {
  display: block;
  padding: 0.6rem 0.75rem;
  color: var(--ink-700);
  font-size: var(--fs-300);
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  border-left: 2px solid transparent;
}
.dropdown a:hover,
.dropdown a[aria-current="page"] {
  background: var(--bg-soft);
  border-left-color: var(--brand);
  color: var(--ink);
}
@media (min-width: 1024px) {
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown,
  .has-dropdown > .nav__link[aria-expanded="true"] + .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .has-dropdown:hover .nav__caret,
  .has-dropdown:focus-within .nav__caret { transform: rotate(180deg); }
}

.nav__cta { flex: none; }

/* Mobile navigation */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 48px; height: 48px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast), top var(--t-base);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 3;          /* stays above the panel so the close control is reachable */
    background: #fff;
  }
  .nav {
    position: fixed;
    z-index: 2;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    display: block;
    padding: 1.25rem var(--gutter) 2rem;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 40px -28px rgba(13, 31, 43, 0.6);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-base), visibility var(--t-base);
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__list { display: block; padding-top: 4.25rem; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.95rem 0.15rem;
    font-size: var(--fs-500);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--brand-700); }
  .dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0.6rem 0.15rem;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .dropdown.is-open { display: block; }
  .dropdown a { padding: 0.62rem 0 0.62rem 0.85rem; border-left: 2px solid var(--line); }
  .nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
  .nav__cta { margin-top: 1.5rem; display: block; }
  .nav__cta .btn { width: 100%; }
}

/* Without JavaScript the off canvas panel cannot be opened, so the navigation
   falls back to a plain stacked list and the toggle button is hidden. */
@media (max-width: 1023px) {
  .no-js .nav {
    position: static;
    width: 100%;
    padding: 0 0 1rem;
    border-left: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
  .no-js .nav__list { padding-top: 0; }
  .no-js .nav-toggle { display: none; }
  .no-js .dropdown { display: block; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-bottom: 0.5rem; }
  .no-js .site-header { position: static; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 43, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
  z-index: 99;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
@media (min-width: 1024px) { .nav-scrim { display: none; } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #d3e6ef;
}

/* Mobile first: the text block sits on the dark panel and the photograph gets
   its own band underneath, so it is never obscured and never makes the hero
   too tall to see the business content. */
.hero__figure { order: 2; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}
.hero__inner {
  order: 1;
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}
.hero__content { max-width: 40rem; }
.hero h1 { color: #fff; margin-bottom: 0.6em; text-wrap: balance; }
.hero__lead {
  font-size: var(--fs-600);
  line-height: 1.55;
  color: #c6dde9;
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
.hero .eyebrow { color: var(--brand); }
.hero .btn-row { margin-bottom: 0; }

/* Desktop: the same photograph becomes the full bleed backdrop, with a scrim
   heavy enough on the left for text contrast and light enough on the right to
   leave the meeting room visible. */
@media (min-width: 900px) {
  .hero { display: block; }
  .hero__figure { position: absolute; inset: 0; overflow: hidden; }
  .hero__figure img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 42% 50%;
  }
  .hero__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(7, 42, 62, 0.96) 0%,
        rgba(7, 42, 62, 0.93) 30%,
        rgba(8, 48, 70, 0.74) 52%,
        rgba(8, 48, 70, 0.3) 78%,
        rgba(8, 48, 70, 0.12) 100%);
  }
  .hero__inner { padding-block: clamp(3rem, 1.9rem + 3.4vw, 4.75rem); }
}

/* Accreditation band. The ACCA mark is a primary trust signal, so it is
   given real size rather than being reduced to a footnote. */
.credentials { border-bottom: 1px solid var(--line); background: #fff; }
.credentials__inner {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .credentials__inner { grid-template-columns: auto 1px minmax(0, 1fr); }
}
.credentials__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem) clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.credentials__badge img {
  width: clamp(190px, 17vw, 250px);
  height: auto;
}
.credentials__divider { background: var(--line); align-self: stretch; }
@media (max-width: 859px) { .credentials__divider { display: none; } }

.credentials__list {
  display: grid;
  gap: 1.15rem clamp(1.5rem, 1rem + 2vw, 2.75rem);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .credentials__list { grid-template-columns: repeat(2, 1fr); } }
.credentials__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
}
.credentials__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  color: var(--brand-700);
  background: var(--brand-tint);
  border-radius: var(--radius);
}
.credentials__mark svg { width: 20px; height: 20px; }
.credentials__text { font-size: var(--fs-300); color: var(--muted); }
.credentials__text strong { display: block; color: var(--ink); font-size: var(--fs-400); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
/* Only cards laid out in a grid row need to match their siblings' height.
   A standalone card must size to its own content. */
.grid > .card { height: 100%; }
.card::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--brand);
  opacity: 0;
  transition: opacity var(--t-base);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card:hover::before { opacity: 1; }
.card:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card:focus-within::before { opacity: 1; }

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 1.05rem;
  color: var(--brand-700);
  background: var(--brand-tint);
  border-radius: var(--radius);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--fs-600); margin-bottom: 0.5rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card h3 a:hover { color: var(--brand-800); }
.card p { font-size: var(--fs-300); color: var(--muted); margin-bottom: 1.15rem; }
.card .link-arrow { margin-top: auto; }

/* Insight cards */
.insight {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.grid > .insight { height: 100%; }
.insight:hover, .insight:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.insight__img { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.insight__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.insight:hover .insight__img img { transform: scale(1.03); }
.insight__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem; }
.insight__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin-bottom: 0.7rem;
  font-size: var(--fs-200);
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--muted);
}
/* The date always sits on its own line so every card in a row aligns. */
.insight__meta .date { flex: 0 0 100%; }
.tag {
  display: inline-block;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  background: var(--brand-tint);
  color: var(--brand-800);
  border-radius: 2px;
}
.insight h2, .insight h3 { font-size: var(--fs-600); margin-bottom: 0.55rem; }
.insight h2 a, .insight h3 a { color: inherit; text-decoration: none; }
.insight h2 a::after, .insight h3 a::after { content: ""; position: absolute; inset: 0; }
.insight h2 a:hover, .insight h3 a:hover { color: var(--brand-800); text-decoration: underline; }
.insight p { font-size: var(--fs-300); color: var(--muted); margin-bottom: 1.15rem; }
.insight .link-arrow { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. Split content blocks
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .split__media--first { order: -1; }
}
.split__media img { border-radius: var(--radius); }
.split__media--framed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__media--framed picture,
.split__media--framed img { display: block; height: 100%; width: 100%; object-fit: cover; }

/* Stretch variant. The media column matches the height of the text column
   instead of leaving a band of dead space beneath it. */
@media (min-width: 900px) {
  .split--stretch { align-items: stretch; }
  .split--stretch .split__media { display: flex; flex-direction: column; }
  .split--stretch .split__media--framed { flex: 1; min-height: 340px; }
  .split--top { align-items: start; }
}

/* Supporting illustration. Deliberately kept secondary to the text: capped
   width, no decorative background, and it never sets the section height. */
.figure-illus { margin: 2rem 0 0; max-width: 420px; }
.figure-illus img { width: 100%; height: auto; }
.figure-illus figcaption {
  margin-top: 0.75rem;
  font-size: var(--fs-200);
  color: var(--muted);
}
.section--deep .figure-illus figcaption { color: #9dbdcd; }

/* Practice structure list, used in About */
.facts { margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li {
  display: grid;
  gap: 0.15rem 1.5rem;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) { .facts li { grid-template-columns: 13rem minmax(0, 1fr); } }
.facts dt, .facts__label { font-weight: 700; color: var(--ink); font-size: var(--fs-300); }
.facts__value { font-size: var(--fs-300); color: var(--muted); }

/* Numbered approach list */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  margin: 0;
  padding: 1.25rem 0 1.25rem 3.4rem;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1.35rem;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-700);
}
.steps h3 { font-size: var(--fs-600); margin-bottom: 0.3rem; }
.steps p { font-size: var(--fs-300); color: var(--muted); }
.section--deep .steps li { border-color: rgba(255, 255, 255, 0.18); }
.section--deep .steps p { color: #b6d0dd; }
.section--deep .steps li::before { color: var(--brand); }

/* Checklist */
.ticks { list-style: none; padding: 0; margin: 0 0 1.1em; }
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.65rem;
  font-size: var(--fs-300);
  color: var(--ink-500);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 13px; height: 10px;
  background: var(--brand-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M4.8 9.6.2 5l1.5-1.5 3.1 3.1L11.3.4l1.5 1.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M4.8 9.6.2 5l1.5-1.5 3.1 3.1L11.3.4l1.5 1.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   10. Page title / breadcrumbs
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-900) 72%);
  color: #bdd6e2;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-700) 42%, transparent 82%);
}
.page-head h1 { color: #fff; margin-bottom: 0; text-wrap: balance; }
.page-head p { color: #bdd6e2; font-size: var(--fs-500); margin-bottom: 0; }
.page-head .eyebrow { color: var(--brand); }

.page-head__inner { display: grid; gap: 1.25rem; }
.page-head__solo { max-width: 46rem; }
@media (min-width: 900px) {
  .page-head__solo { max-width: 52rem; }
  .page-head__inner {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 3.5rem;
    align-items: end;
  }
  .page-head__intro {
    padding-left: 2.25rem;
    border-left: 2px solid rgba(0, 173, 238, 0.55);
  }
}

.breadcrumbs { margin-bottom: 1rem; }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-200);
}
.breadcrumbs li { margin: 0; color: #93b6c8; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: #5f8ba3; }
.breadcrumbs a { color: #bdd6e2; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------------------
   11. Article
   -------------------------------------------------------------------------- */
.article-layout { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr) 300px; } }

.prose { font-size: var(--fs-500); color: var(--ink-500); }
.prose > h2 {
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-700);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h3 { margin-top: 1.9rem; font-size: var(--fs-600); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5em; }
.prose figure { margin: 1.75rem 0; }
.prose figcaption { font-size: var(--fs-200); color: var(--muted); margin-top: 0.6rem; }

.lead { font-size: var(--fs-600); line-height: 1.55; color: var(--ink-500); }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-300);
  color: var(--muted);
  letter-spacing: 0.01em;
  font-weight: 600;
}

.table-wrap {
  margin: 1.5rem 0 2rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
table.data {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--fs-300);
  background: #fff;
}
table.data caption {
  text-align: left;
  padding: 0.9rem 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
table.data th, table.data td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.data thead th {
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-300);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) td { background: #fafcfd; }

.sidebar { align-self: start; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 104px; } }
.widget {
  padding: 1.35rem;
  margin-bottom: 1.25rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.widget h2 { font-size: var(--fs-400); letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: 0.2rem; font-size: var(--fs-300); }
.widget li:last-child { margin-bottom: 0; }
.widget a { text-decoration: none; }
.widget ul:not(.service-nav) li a,
.widget p a { display: inline-block; padding-block: 0.22rem; min-height: 24px; }
.widget a:hover { text-decoration: underline; }

.doc-callout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.35rem;
  margin: 1.75rem 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}
.doc-callout__icon { flex: none; color: var(--brand-700); }
.doc-callout h3 { font-size: var(--fs-600); margin-bottom: 0.3rem; }
.doc-callout p { font-size: var(--fs-300); color: var(--muted); margin-bottom: 0.9rem; }
.doc-callout__meta { font-size: var(--fs-200); color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Services detail page
   -------------------------------------------------------------------------- */
.service-nav { list-style: none; margin: 0; padding: 0; }
.service-nav li { margin: 0; }
.service-nav a {
  display: block;
  padding: 0.8rem 1rem;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-left: 3px solid transparent;
}
.service-nav li:last-child a { border-bottom: 1px solid var(--line); }
.service-nav a:hover { background: var(--bg-soft); border-left-color: var(--line-strong); }
.service-nav a[aria-current="page"] {
  background: var(--bg-soft);
  border-left-color: var(--brand);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(115deg, var(--blue-700) 0%, var(--blue-800) 58%, var(--blue-900) 100%);
  color: #c8dfeb;
  padding-block: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
}
.cta-band__inner { display: grid; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.cta-band h2 { color: #fff; margin-bottom: 0.4rem; }
.cta-band p { color: #bcd7e4; max-width: 58ch; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }

.contact-block { margin-bottom: 1.6rem; }
.contact-block:last-child { margin-bottom: 0; }
.contact-block h2 {
  font-size: var(--fs-300);
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.contact-block p, .contact-block address { font-size: var(--fs-400); color: var(--ink-500); margin-bottom: 0.35rem; }
.contact-block a { font-weight: 600; display: inline-block; padding-block: 0.22rem; min-height: 24px; }

/* Forms */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--fs-300); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--fs-200); color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--fs-300);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px rgba(0, 173, 238, 0.18);
  outline: none;
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #b42318; }
.field .error { font-size: var(--fs-200); color: #b42318; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: var(--fs-300);
  border: 1px solid;
}
.form-status[data-state="error"] { background: #fef3f2; border-color: #fda29b; color: #912018; }
.form-status[data-state="success"] { background: #ecfdf3; border-color: #a6f4c5; color: #05603a; }
.form-status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--blue-900);
  color: #a6c2d1;
  font-size: var(--fs-300);
  border-top: 3px solid var(--brand);
}
.site-footer__top { padding-block: clamp(2.5rem, 2rem + 2.2vw, 3.5rem); }
.site-footer__grid { display: grid; gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.site-footer h2 {
  font-size: var(--fs-400);
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.3rem; }
.site-footer a { color: #c6dfec; text-decoration: none; }
/* WCAG 2.2 target size: standalone links get a 24px minimum tap area. */
.site-footer li a,
.site-footer address a,
.site-footer p a { display: inline-block; padding-block: 0.22rem; min-height: 24px; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__mark { width: auto; height: 74px; margin-bottom: 1.4rem; }
.site-footer address { line-height: 1.65; margin-bottom: 1rem; }
.site-footer strong { color: #fff; }
.site-footer__acca { margin: 1.6rem 0 0; display: block; }
.site-footer__acca img { width: min(100%, 215px); height: auto; }
.site-footer__acca figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-200);
  color: #9dbdcd;
  max-width: 30ch;
}

.site-footer__bottom {
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-200);
}
.site-footer__bottom .container {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-footer__legal li { margin: 0; }

.social { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius);
  color: #c6dfec;
}
.social a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Back to top */
.to-top {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--blue-700);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background-color var(--t-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-800); }

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }
.text-muted { color: var(--muted); }
.small { font-size: var(--fs-300); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .cta-band, .topbar { display: none; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   Feature panel, FAQ and wide illustrations
   -------------------------------------------------------------------------- */
.feature-panel {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  align-items: center;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}
@media (min-width: 900px) {
  .feature-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}
.feature-panel h2 { font-size: var(--fs-700); }
.feature-panel p { color: var(--muted); font-size: var(--fs-300); }

.figure-illus--wide { max-width: 440px; width: 100%; }
.figure-illus--wide img { width: 100%; height: auto; }

.faq { border-top: 1px solid var(--line); }
.faq__item { padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.faq__item h3 { font-size: var(--fs-600); margin-bottom: 0.4rem; }
.faq__item p { font-size: var(--fs-300); color: var(--muted); margin-bottom: 0; }
.section--soft .faq { border-color: var(--line-strong); }

/* Two column step list, used where the sequence is long enough that a single
   column would leave the facing column empty. */
@media (min-width: 900px) {
  .steps--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  }
  .steps--split li:nth-last-child(2):nth-child(odd),
  .steps--split li:last-child { border-bottom: 0; }
}