/* ==========================================================================
   AccreHealth by MEDAS — Design System
   --------------------------------------------------------------------------
   Editorial, print-influenced. The rules that keep it from reading as a
   template:

     1. Serif display type at large sizes with tight negative tracking, and an
        italic phrase carrying the emotional beat of each headline.
     2. Card grids are a hairline LATTICE — one shared 1px rule between cells.
        No per-card borders, radii, shadows or hover lift.
     3. No decorative icons. Icons appear only where they are functional
        (phone, mail, WhatsApp, disclosure arrows).
     4. Asymmetric section heads: display line left, supporting note right.
     5. Whitespace is the main design material. Sections breathe.

   Palette: deep teal on cool, faintly green paper.
       brand  #058B7E (graphic) / #046B60 (text)
       paper  #FBFDFC  ·  sage #F2F7F5  ·  mint #DFF3EC
       ink    #0B1F32  ·  dark grounds #092535 / #061C29

   The AccreHealth mark ships in two colourways. The site uses the teal one
   (assets/img/brand/accrehealth-logo-teal.svg) so the logo and the palette
   agree. The original blue mark is still in the same folder — swap the two
   filenames in tools/components.py to revert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink — a deep teal-navy, never neutral grey */
  --ink-900: #0B1F32;
  --ink-800: #16303F;
  --ink-700: #2C4150;
  --ink-600: #41535F;
  --ink-500: #5E6D78;
  --ink-400: #91AAA8;
  --ink-300: #A8B9BC;

  /* Paper — cool, faintly green. This is what makes the site read "clean". */
  --paper:   #FBFDFC;
  --paper-2: #F2F7F5;   /* alternating sections */
  --paper-3: #DFF3EC;   /* mint highlight band */
  --line:    #DCE7E5;
  --line-2:  #C6D6D2;

  /* Brand — deep teal. Sampled to sit beside the AccreHealth mark. */
  /* Two tones, deliberately:
       --brand-700  text, links, eyebrows, the CTA ground  (>= 4.5:1 on paper)
       --brand-600  graphic elements only — chart lines, rules, marks
     The vivid tone fails contrast as small text, so it is never used for copy. */
  --brand-900: #033F39;
  --brand-800: #04574E;
  --brand-700: #046B60;   /* text-safe primary */
  --brand-600: #058B7E;   /* graphic primary */
  --brand-500: #058B7E;
  --brand-400: #00A88F;
  --brand-300: #57C9B7;
  --brand-200: #9BDCCE;
  --brand-100: #DFF3EC;
  --brand-50:  #F0F9F6;

  /* Deep grounds — dark, but teal-lifted rather than black */
  --deep:   #092535;
  --deep-2: #061C29;

  /* Signals — used only inside product mockups */
  --sig-green: #058B7E;  --sig-green-bg: #DFF3EC;
  --sig-amber: #A97514;  --sig-amber-bg: #FBF2E0;
  --sig-rose:  #A83B4C;  --sig-rose-bg:  #FBECEE;

  /* Type */
  /* Display face matches the parent brand at medassolutions.com. */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Space */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 28px;  --sp-7: 36px;  --sp-8: 48px;
  --sp-9: 64px; --sp-10: 88px; --sp-11: 120px;

  /* Shape — near-square. Softness reads as "template". */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-pill: 999px;

  /* Layout */
  --container: 1320px;
  --container-prose: 700px;
  --gutter: clamp(22px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 148px);
  --header-h: 84px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur: .7s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 28px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-600);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-500); }

/* --- Display type ------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 .42em;
  letter-spacing: -.022em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 1.8rem + 2.4vw, 3.75rem);
  letter-spacing: -.028em;
  line-height: 1.08;
}
h2 {
  font-size: clamp(1.85rem, 1.35rem + 2.1vw, 3.05rem);
  letter-spacing: -.026em;
  line-height: 1.12;
}
h3 { font-size: clamp(1.18rem, 1.06rem + .48vw, 1.42rem); letter-spacing: -.018em; line-height: 1.3; font-weight: 700; }

/* The italic phrase that carries the sentence. Used once per headline. */
.em { font-style: italic; color: var(--brand-700); }
.section--dark .em, .page-hero--dark .em { color: var(--brand-300); }
/* On the teal band a mid-tone accent is too close to the ground — go lighter. */
.band .em { color: var(--brand-100); }

h4, h5 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.008em; color: var(--ink-900);
  margin: 0 0 .5em; line-height: 1.4;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink-900); font-weight: 600; }
em { font-style: italic; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .5em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-9) 0; }

::selection { background: var(--brand-100); color: var(--ink-900); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-900); color: #fff; padding: 14px 22px; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

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

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

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 88px); }
.section--alt  { background: var(--paper-2); }
.section--tint { background: var(--paper-3); }
.section--line { border-top: 1px solid var(--line); }
.section--dark { background: var(--deep); color: rgba(255,255,255,.68); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.grid { display: grid; gap: var(--sp-7); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide-left  { grid-template-columns: 1.18fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.18fr; }

/* --------------------------------------------------------------------------
   4. Section furniture
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .705rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: var(--sp-6);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.section--dark .eyebrow, .page-hero--dark .eyebrow { color: var(--brand-300); }
.band .eyebrow { color: var(--brand-100); }

/* Asymmetric head: display line left, supporting note right. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.head > :first-child > h2:last-child { margin-bottom: 0; }
.head-note { font-size: .97rem; color: var(--ink-500); line-height: 1.72; padding-bottom: .4em; }
.section--dark .head-note, .band .head-note { color: rgba(255,255,255,.66); }
.head--single { grid-template-columns: minmax(0, 820px); }
/* Genuinely centred head — a block, not a one-column grid, so the max-width
   centres instead of hugging the left gutter. */
.head--center {
  display: block; max-width: 760px; margin-inline: auto; text-align: center;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.head--center h2 { margin-bottom: 0; }
.head--center .eyebrow { justify-content: center; }
.head--center .lede { margin-inline: auto; }

.lede {
  font-size: clamp(1.04rem, 1rem + .3vw, 1.18rem);
  line-height: 1.66; color: var(--ink-500);
}
.section--dark .lede, .band .lede, .page-hero--dark .lede { color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 26px;
  font-size: .93rem; font-weight: 600; letter-spacing: -.002em; line-height: 1.2;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  cursor: pointer; text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { color: var(--btn-fg); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primary { --btn-bg: var(--ink-900); }
.btn--primary:hover { --btn-bg: var(--brand-800); }
.btn--brand { --btn-bg: var(--brand-600); }
.btn--brand:hover { --btn-bg: var(--brand-700); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: var(--line-2); }
.btn--outline:hover { --btn-bd: var(--ink-900); }
.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.btn--on-dark:hover { --btn-bd: rgba(255,255,255,.7); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink-900); }
.btn--white:hover { --btn-fg: var(--brand-700); }

.btn--lg { padding: 19px 32px; font-size: .98rem; }
.btn--sm { padding: 11px 18px; font-size: .87rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Underlined text link with a travelling arrow — the tertiary action */
.rule-link {
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: .92rem; color: var(--ink-900);
  padding-bottom: 11px; border-bottom: 1px solid var(--line-2);
  transition: border-color .25s var(--ease), color .2s var(--ease);
}
.rule-link svg { width: 16px; height: 16px; color: var(--brand-500); transition: transform .3s var(--ease); }
.rule-link:hover { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.rule-link:hover svg { transform: translateX(5px); }
.section--dark .rule-link, .band .rule-link { color: #fff; border-bottom-color: rgba(255,255,255,.26); }
.section--dark .rule-link svg { color: var(--brand-300); }
.band .rule-link svg { color: var(--brand-100); }
.section--dark .rule-link:hover, .band .rule-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,.7); }

/* Compact inline link used inside lattice cells */
.cell-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 600; color: var(--brand-700);
}
.cell-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.cell-link:hover svg { transform: translateX(4px); }
.section--dark .cell-link { color: var(--brand-300); }
.band .cell-link { color: var(--brand-100); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner { position: relative; height: var(--header-h); display: flex; align-items: center; gap: var(--sp-6); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 182px; height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; }
.nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  font-size: .935rem; font-weight: 500; letter-spacing: -.004em;
  color: var(--ink-700); white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav-link:hover, .nav-item.is-open > .nav-link { color: var(--ink-900); }
.nav-link[aria-current="page"] { color: var(--brand-700); font-weight: 600; }
.nav-link .chev { width: 11px; height: 11px; opacity: .5; transition: transform .22s var(--ease); }
.nav-item.is-open .chev { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: var(--sp-6); margin-left: var(--sp-7); flex: none; }
.header-tel { font-size: .87rem; color: var(--ink-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-tel:hover { color: var(--brand-700); }

/* Mega menu — anchored to the header container so it never leaves the viewport */
.nav-item { position: static; }
.mega {
  position: absolute; top: calc(100% + 1px); left: 50%;
  transform: translate(-50%, 6px);
  width: min(940px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--line);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .26s var(--ease-out), visibility .18s;
  z-index: 80;
  box-shadow: 0 34px 68px -44px rgba(9,37,53,.3);
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }

.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--sp-8); }
.mega-col-head {
  font-size: .655rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 600;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.mega-item { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mega-grid > div > .mega-item:last-child { border-bottom: 0; }
.mega-item .mi-title {
  display: block; font-weight: 600; font-size: .93rem; color: var(--ink-900); line-height: 1.35;
  transition: color .16s var(--ease);
}
.mega-item .mi-desc { display: block; font-size: .82rem; color: var(--ink-500); line-height: 1.5; margin-top: 3px; }
.mega-item:hover .mi-title { color: var(--brand-700); }

.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--ink-500);
}
.mega-foot .rule-link { padding-bottom: 6px; }

/* Mobile */
.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink-900); transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: #fff; overflow-y: auto; padding-bottom: 48px;
  transform: translateX(100%);
  transition: transform .34s var(--ease-out);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.mobile-nav-head img { width: 164px; }
.mobile-close {
  width: 44px; height: 44px; border: 1px solid var(--line-2); background: #fff;
  border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer;
}
.mobile-close svg { width: 18px; height: 18px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mnav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 19px var(--gutter);
  font-family: var(--font-display); font-weight: 400; font-size: 1.35rem;
  letter-spacing: -.022em; color: var(--ink-900);
  border-bottom: 1px solid var(--line);
  width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0;
  text-align: left; cursor: pointer;
}
.mnav-link svg { width: 16px; height: 16px; color: var(--ink-400); transition: transform .22s var(--ease); }
.mnav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav-panel { display: none; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.mnav-panel.is-open { display: block; }
.mnav-panel a {
  display: block; padding: 14px var(--gutter) 14px calc(var(--gutter) + 16px);
  font-size: .95rem; color: var(--ink-600); border-bottom: 1px solid var(--line);
}
.mnav-panel a:last-child { border-bottom: 0; }
.mobile-nav-cta { padding: var(--sp-8) var(--gutter) 0; display: grid; gap: 10px; }
.mobile-nav-meta { padding: var(--sp-8) var(--gutter) 0; font-size: .93rem; display: grid; gap: 12px; }
.mobile-nav-meta a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-700); }
.mobile-nav-meta svg { width: 15px; height: 15px; color: var(--brand-500); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--paper); overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(52px, 6vw, 92px) clamp(64px, 7vw, 112px);
}
.hero h1 { margin-bottom: var(--sp-6); }
.hero-lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.16rem);
  line-height: 1.7; color: var(--ink-500);
  max-width: 46ch; margin-bottom: var(--sp-8);
}

/* Stat row: serif figures over a hairline, uppercase micro-labels */
.figures { display: flex; flex-wrap: wrap; margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.figure { padding-right: clamp(26px, 3.6vw, 52px); margin-right: clamp(26px, 3.6vw, 52px); border-right: 1px solid var(--line); }
.figure:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.figure .f-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem);
  color: var(--ink-900); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure .f-label {
  font-size: .665rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-400); margin-top: 11px; font-weight: 500; max-width: 15ch; line-height: 1.55;
}
.section--dark .figures, .band .figures { border-top-color: rgba(255,255,255,.16); }
.section--dark .figure, .band .figure { border-right-color: rgba(255,255,255,.16); }
.section--dark .f-num, .band .f-num { color: #fff; }
.section--dark .f-label, .band .f-label { color: rgba(255,255,255,.55); }

/* Interior page hero */
.page-hero { background: var(--paper); padding-block: clamp(40px, 4.5vw, 72px) clamp(48px, 6vw, 88px); }
.page-hero h1 { max-width: 17ch; }
.page-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 5vw, 84px); align-items: end;
}
.page-hero--dark { background: var(--deep); color: rgba(255,255,255,.7); }
.page-hero--dark h1 { color: #fff; }

/* Breadcrumbs */
.crumbs { font-size: .78rem; margin-bottom: var(--sp-7); color: var(--ink-400); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--brand-700); }
.page-hero--dark .crumbs { color: rgba(255,255,255,.45); }
.page-hero--dark .crumbs a { color: rgba(255,255,255,.68); }
.page-hero--dark .crumbs a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   8. Lattice — the primary content grid
   One shared hairline between cells. No card chrome.
   -------------------------------------------------------------------------- */
.lattice { display: grid; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lattice > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 2.8vw, 40px);
  display: flex; flex-direction: column;
  background: transparent;
  transition: background-color .3s var(--ease);
}
.lattice > a:hover { background: var(--paper-2); }
.section--alt .lattice > a:hover { background: #fff; }
.section--dark .lattice, .band .lattice { border-color: rgba(255,255,255,.15); }
.section--dark .lattice > *, .band .lattice > * { border-color: rgba(255,255,255,.15); }
.section--dark .lattice > a:hover, .band .lattice > a:hover { background: rgba(255,255,255,.035); }

.lattice--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.lattice--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.lattice--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Cell furniture */
.cell-index {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--brand-500); letter-spacing: .02em;
  margin-bottom: var(--sp-6);
}
.section--dark .cell-index { color: var(--brand-300); }
.band .cell-index { color: var(--brand-100); }
.cell-index--lg { font-size: 2rem; color: var(--ink-300); margin-bottom: var(--sp-8); }
.section--dark .cell-index--lg { color: rgba(255,255,255,.28); }

.cell-kicker {
  font-size: .655rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-700); font-weight: 600; margin-bottom: var(--sp-5);
}
.section--dark .cell-kicker { color: var(--brand-300); }
.band .cell-kicker { color: var(--brand-100); }

.lattice h3 { margin-bottom: .5em; }
.lattice p { font-size: .93rem; color: var(--ink-500); line-height: 1.65; }
.section--dark .lattice p, .band .lattice p { color: rgba(255,255,255,.62); }

/* Micro spec line under a cell description */
.spec {
  font-size: .655rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-400); margin-top: var(--sp-5); line-height: 1.9;
}
.section--dark .spec, .band .spec { color: rgba(255,255,255,.42); }

.cell-spacer { flex: 1; min-height: var(--sp-6); }

/* --------------------------------------------------------------------------
   9. Panels — where a bordered block genuinely helps
   -------------------------------------------------------------------------- */
.panel { border: 1px solid var(--line); background: #fff; padding: clamp(26px, 3vw, 40px); }
.panel--alt { background: var(--paper-2); }
.section--alt .panel { background: #fff; }
.panel h3 { font-size: 1.2rem; }
.section--dark .panel { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.15); }
.section--dark .panel p { color: rgba(255,255,255,.65); }

/* --------------------------------------------------------------------------
   10. Ribbon — thin dark band of labels
   -------------------------------------------------------------------------- */
.ribbon { background: var(--deep); color: rgba(255,255,255,.86); }
.ribbon-inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3.2vw, 48px); padding-block: 26px; }
.ribbon-label { font-size: .655rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 600; }
.ribbon-item { font-family: var(--font-display); font-size: 1.02rem; color: rgba(255,255,255,.9); letter-spacing: -.012em; }

/* --------------------------------------------------------------------------
   11. Product mockup — an app shell, not a browser window
   -------------------------------------------------------------------------- */
.mock-wrap { position: relative; }
.mock {
  display: grid; grid-template-columns: 58px 1fr;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 44px 90px -56px rgba(9,37,53,.42), 0 2px 8px -4px rgba(9,37,53,.05);
  overflow: hidden;
}
.mock--flat { box-shadow: none; }

.mock-rail { background: var(--deep); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mock-rail .rail-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-500); display: grid; place-items: center; flex: none; }
.mock-rail .rail-mark svg { width: 15px; height: 15px; color: #fff; }
.mock-rail i { display: block; width: 16px; height: 16px; border-radius: 3px; background: rgba(255,255,255,.14); }
.mock-rail i.on { background: var(--brand-400); }

.mock-body { padding: 22px 24px 24px; min-width: 0; }
.mock-greeting { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); font-weight: 600; }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 20px; }
.mock-title { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--ink-900); letter-spacing: -.024em; }
.mock-sub { font-size: .72rem; color: var(--ink-400); margin-top: 3px; }

.mock-chip { font-size: .63rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border-radius: var(--r-xs); white-space: nowrap; }
.chip-green { background: var(--sig-green-bg); color: var(--sig-green); }
.chip-amber { background: var(--sig-amber-bg); color: var(--sig-amber); }
.chip-rose  { background: var(--sig-rose-bg);  color: var(--sig-rose); }
.chip-blue  { background: var(--brand-50); color: var(--brand-700); }
.chip-grey  { background: var(--paper-3); color: var(--ink-500); }
.chip-solid { background: var(--ink-900); color: #fff; }

.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 18px; }
.mock-kpi { background: #fff; padding: 13px 14px; }
.mock-kpi .k-label { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); font-weight: 600; }
.mock-kpi .k-value {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-900);
  letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.mock-kpi .k-delta { font-size: .66rem; margin-top: 3px; color: var(--ink-400); }
.k-up { color: var(--sig-green); } .k-down { color: var(--sig-rose); }

.mock-split { display: grid; grid-template-columns: 1.32fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mock-pane { background: #fff; padding: 14px 15px; min-width: 0; display: flex; flex-direction: column; }
.mock-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; white-space: nowrap; }
.mock-pane-title { font-size: .76rem; font-weight: 600; color: var(--ink-800); }
.mock-pane-meta { font-size: .62rem; color: var(--ink-400); }
.mock-chart { width: 100%; height: auto; display: block; margin-top: auto; }
.mock-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.mock-chart .line { fill: none; stroke: var(--brand-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mock-chart .dot { fill: #fff; stroke: var(--brand-500); stroke-width: 2; }
.mock-chart .tick { font-size: 7px; fill: var(--ink-400); }

.mock-list { display: grid; }
.mock-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.mock-item:last-child { border-bottom: 0; }
.mock-item .dotmark { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
.dot-green { background: var(--sig-green); } .dot-amber { background: var(--sig-amber); } .dot-rose { background: var(--sig-rose); }
.mock-item > span:nth-child(2) { min-width: 0; flex: 1; }
.mock-item .mi-t { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-800); line-height: 1.35; }
.mock-item .mi-s { display: block; font-size: .655rem; color: var(--ink-400); margin-top: 2px; }
.mock-item .mi-when { margin-left: auto; font-size: .62rem; color: var(--ink-400); white-space: nowrap; padding-top: 2px; }

/* Bars */
.mock-bars { display: grid; gap: 11px; }
.mock-bar-item { display: grid; grid-template-columns: 134px 1fr 42px; gap: 12px; align-items: center; font-size: .73rem; }
.mock-bar-item .bl { color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-track { display: block; height: 6px; background: var(--paper-3); overflow: hidden; }
.mock-fill { display: block; height: 100%; background: var(--brand-500); width: 0; transition: width 1.1s var(--ease-out); }
.mock-fill.teal { background: var(--sig-green); }
.mock-fill.amber { background: var(--sig-amber); }
.mock-bar-item .bv { text-align: right; color: var(--ink-800); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Floating annotation */
.mock-note {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 22px 48px -28px rgba(9,37,53,.34);
  padding: 13px 17px; max-width: 262px;
}
.mock-note b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--ink-900); letter-spacing: -.018em; }
.mock-note span { display: block; font-size: .73rem; color: var(--ink-500); margin-top: 3px; line-height: 1.45; }
.mock-note--br { bottom: -56px; right: -36px; }
.mock-note--bl { bottom: -56px; left: -36px; }

/* --------------------------------------------------------------------------
   12. Logo wall
   -------------------------------------------------------------------------- */
.trustbar { background: #fff; border-block: 1px solid var(--line); padding-block: clamp(32px, 4vw, 48px); }
.trustbar-label {
  text-align: center; font-size: .655rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-400);
  font-weight: 600; margin-bottom: var(--sp-7);
}
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: clamp(14px, 2.4vw, 32px); align-items: center; }
.logo-wall img {
  width: 100%; max-width: 148px; height: auto; margin-inline: auto;
  filter: grayscale(1); opacity: .62;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-wall a:hover img, .logo-wall img:hover { filter: none; opacity: 1; }

.logo-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-marquee-track { display: flex; gap: clamp(32px, 4.5vw, 64px); align-items: center; width: max-content; animation: marquee 52s linear infinite; }
.logo-marquee-track img { width: 124px; flex: none; filter: grayscale(1); opacity: .66; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-track img:hover { filter: none; opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   13. Checked feature list
   -------------------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0; }
/* The marker is absolutely positioned, never a flex child — a flex <li> turns
   every inline <strong> and text node into its own flex item. */
.ticks li {
  position: relative; padding: 16px 0 16px 32px; margin: 0;
  font-size: .95rem; line-height: 1.65; color: var(--ink-600);
  border-bottom: 1px solid var(--line);
}
.ticks li:first-child { padding-top: 0; }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 20px; width: 15px; height: 15px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23058B7E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6l4.4 4.4L17 5.4'/%3E%3C/svg%3E") center/15px no-repeat;
}
.ticks li:first-child::before { top: 4px; }
.ticks--plain li { border-bottom: 0; padding-block: 7px; }
.ticks--plain li::before { top: 11px; }
.ticks--plain li:first-child::before { top: 4px; }
.section--dark .ticks li, .band .ticks li { color: rgba(255,255,255,.7); border-bottom-color: rgba(255,255,255,.15); }
.section--dark .ticks li::before, .band .ticks li::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2357C9B7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6l4.4 4.4L17 5.4'/%3E%3C/svg%3E");
}
.ticks--two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   14. Media
   -------------------------------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--paper-3); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--tall   { aspect-ratio: 4 / 5; }
.media--wide   { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1 / 1; }

/* Offset colour block behind the image */
.media-frame { position: relative; }
.media-frame::before {
  content: ""; position: absolute; z-index: 0;
  left: -20px; top: -20px; width: 46%; height: 52%;
  background: var(--brand-100);
}
.media-frame > .media { position: relative; z-index: 1; }
.media-frame--tint::before { background: var(--paper-3); }

/* Caption card overlapping the lower edge */
.media-caption {
  position: absolute; z-index: 2; left: 24px; bottom: 0;
  background: #fff; border: 1px solid var(--line);
  padding: 15px 20px; max-width: 76%;
  transform: translateY(40%);
  box-shadow: 0 22px 48px -30px rgba(9,37,53,.34);
}
.media-caption .mc-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink-900); letter-spacing: -.018em; }
.media-caption .mc-sub { font-size: .76rem; color: var(--ink-500); margin-top: 3px; }
.media-frame.has-caption { margin-bottom: 48px; }

/* --------------------------------------------------------------------------
   15. Standards
   -------------------------------------------------------------------------- */
/* Standards read as a small lattice so the hairlines line up with the rest
   of the page rather than trailing raggedly under each label. */
.standards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.standard-pill {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--ink-900); letter-spacing: -.014em;
  padding: 15px 16px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.standards--dark { border-top-color: rgba(255,255,255,.16); border-left-color: rgba(255,255,255,.16); }
.standards--dark .standard-pill { color: #fff; border-color: rgba(255,255,255,.16); }

/* --------------------------------------------------------------------------
   16. Accordion
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6);
  padding: 26px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 400; color: var(--ink-900);
  letter-spacing: -.022em; line-height: 1.35;
  transition: color .2s var(--ease);
}
.acc-trigger:hover { color: var(--brand-700); }
.acc-icon { flex: none; width: 20px; height: 20px; margin-top: 7px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-500);
  transition: transform .3s var(--ease), background-color .2s;
}
.acc-icon::before { width: 15px; height: 1.5px; transform: translate(-50%, -50%); }
.acc-icon::after  { width: 1.5px; height: 15px; transform: translate(-50%, -50%); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.acc-trigger[aria-expanded="true"] .acc-icon::before { background: var(--brand-500); }
.acc-panel { overflow: hidden; height: 0; transition: height .34s var(--ease-out); }
.acc-panel-inner { padding: 0 clamp(36px, 6vw, 90px) 28px 0; color: var(--ink-500); font-size: .97rem; line-height: 1.75; }
.section--dark .accordion, .section--dark .acc-item { border-color: rgba(255,255,255,.15); }
.section--dark .acc-trigger { color: #fff; }
.section--dark .acc-icon::before, .section--dark .acc-icon::after { background: rgba(255,255,255,.6); }
.section--dark .acc-panel-inner { color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------------------
   17. Sticky sub-nav
   -------------------------------------------------------------------------- */
.subnav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-block: 1px solid var(--line);
}
.subnav-inner { display: flex; align-items: center; gap: var(--sp-6); overflow-x: auto; scrollbar-width: none; height: 58px; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  font-size: .86rem; font-weight: 500; color: var(--ink-500);
  white-space: nowrap; padding: 5px 1px; border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}
.subnav a:hover { color: var(--ink-900); }
.subnav a.is-active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.subnav-cta { margin-left: auto; flex: none; white-space: nowrap; }

/* --------------------------------------------------------------------------
   18. Steps
   -------------------------------------------------------------------------- */
.steps { display: grid; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-7); padding: var(--sp-8) 0; border-bottom: 1px solid var(--line); }
.step-num { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink-300); line-height: 1; }
.step h3 { font-size: 1.4rem; margin-bottom: .35em; }
.step p { font-size: .96rem; color: var(--ink-500); margin: 0; max-width: 70ch; }
.section--dark .steps, .section--dark .step { border-color: rgba(255,255,255,.15); }
.section--dark .step-num { color: rgba(255,255,255,.3); }
.section--dark .step p { color: rgba(255,255,255,.65); }

/* --------------------------------------------------------------------------
   19. Bands (CTA)
   -------------------------------------------------------------------------- */
.band { background: var(--brand-700); color: rgba(255,255,255,.76); padding-block: clamp(64px, 7vw, 112px); }
.band h2 { color: #fff; max-width: 15ch; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.band--deep { background: var(--deep); }

.contact-lines { display: grid; border-top: 1px solid rgba(255,255,255,.2); }
.contact-line {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.2);
  transition: padding-left .25s var(--ease);
}
.contact-line:hover { padding-left: 8px; }
.contact-line > svg { width: 17px; height: 17px; color: var(--brand-200); flex: none; }
.contact-line .cl-label { display: block; font-size: .655rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; }
.contact-line .cl-value { display: block; font-family: var(--font-display); font-size: 1.1rem; color: #fff; letter-spacing: -.018em; margin-top: 3px; }
.contact-line .cl-arrow { margin-left: auto; width: 15px; height: 15px; color: rgba(255,255,255,.45); }

.contact-lines--light { border-top-color: var(--line); }
.contact-lines--light .contact-line { border-bottom-color: var(--line); }
.contact-lines--light > .contact-line > svg { color: var(--brand-500); }
.contact-lines--light .cl-label { color: var(--ink-400); }
.contact-lines--light .cl-value { color: var(--ink-900); }
.contact-lines--light .cl-arrow { color: var(--ink-300); }

/* --------------------------------------------------------------------------
   20. Forms
   -------------------------------------------------------------------------- */
.form-card { background: #fff; border: 1px solid var(--line); padding: clamp(26px, 3vw, 42px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .72rem; font-weight: 600; color: var(--ink-700); letter-spacing: .12em; text-transform: uppercase; }
.field label .req { color: var(--sig-rose); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .95rem; color: var(--ink-900);
  padding: 13px 14px; border: 1px solid var(--line-2); border-radius: var(--r-xs);
  background: #fff; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235E6D78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  padding-right: 38px;
}
.field textarea { resize: vertical; min-height: 124px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(5,139,126,.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }
.field .hint { font-size: .78rem; color: var(--ink-400); }
.field .error { font-size: .78rem; color: var(--sig-rose); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--sig-rose); }
.field.has-error .error { display: block; }

/* Higher specificity than `.field label`, which is uppercase + tracked. */
.field label.checkbox, .checkbox {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .85rem; color: var(--ink-500);
  text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1.6;
}
.checkbox input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--brand-500); }

.form-note { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--ink-400); margin-top: var(--sp-5); }
.form-note svg { width: 14px; height: 14px; color: var(--brand-500); flex: none; margin-top: 3px; }

.form-status { display: none; padding: 15px 17px; font-size: .9rem; margin-top: var(--sp-5); border-radius: var(--r-xs); }
.form-status.is-ok  { display: block; background: var(--sig-green-bg); color: var(--sig-green); border: 1px solid #BFE0CF; }
.form-status.is-err { display: block; background: var(--sig-rose-bg);  color: var(--sig-rose);  border: 1px solid #F0C8CE; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------------------------------------
   20b. Contact page — centred hero, quick actions, office grid
   -------------------------------------------------------------------------- */

/* Small status pill. The one place a rounded shape is allowed, because it is
   reading as a label rather than as decoration. */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff;
  font-size: .82rem; color: var(--ink-600);
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-600); flex: none;
  box-shadow: 0 0 0 3px rgba(5,139,126,.16);
}

/* Centred hero variant */
.hero--center { text-align: center; padding-block: clamp(48px, 6vw, 88px) clamp(48px, 5vw, 76px); }
.hero--center h1 { max-width: 19ch; margin-inline: auto; }
.hero--center .lede { max-width: 62ch; margin-inline: auto; }
.hero--center .eyebrow { justify-content: center; }

/* Row of primary contact actions */
.action-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.action {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 22px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; color: var(--ink-900);
  font-size: .93rem; font-weight: 600;
  transition: border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .25s var(--ease), background-color .22s var(--ease);
}
.action svg { width: 17px; height: 17px; color: var(--brand-600); }
.action:hover {
  color: var(--ink-900); border-color: var(--ink-900);
  transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(9,37,53,.4);
}
.action--wa { background: #1FA855; border-color: #1FA855; color: #fff; }
.action--wa svg { color: #fff; }
.action--wa:hover { background: #178E47; border-color: #178E47; color: #fff; }

/* Reassurance chips above the form */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--brand-100); color: var(--brand-800);
  font-size: .8rem; font-weight: 600;
}
.chip svg { width: 13px; height: 13px; }

/* Support panel on the dark ground */
.panel--dark {
  background: var(--deep); border-color: var(--deep);
  color: rgba(255,255,255,.72);
}
.panel--dark h3 { color: #fff; }
.panel--dark p { color: rgba(255,255,255,.68); }
.panel--dark .cell-kicker { color: var(--brand-300); }
.support-actions { display: grid; gap: 8px; margin-top: var(--sp-6); }
.support-action {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--r-xs);
  background: rgba(255,255,255,.07); color: #fff;
  font-size: .89rem; font-weight: 600;
  transition: background-color .22s var(--ease), padding-left .22s var(--ease);
}
.support-action:hover { background: rgba(255,255,255,.14); color: #fff; padding-left: 22px; }
.support-action svg { width: 16px; height: 16px; color: var(--brand-300); flex: none; }
.support-action--wa svg { color: #46D486; }

/* Office cells */
.office-flag { font-size: 1.5rem; line-height: 1; }
.office-place { margin-left: auto; text-align: right; }
.office-place .op-country { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; color: var(--ink-900); letter-spacing: -.02em; }
.office-place .op-city { display: block; font-size: .8rem; color: var(--ink-500); margin-top: 2px; }
.office-rows { display: grid; gap: 11px; margin-top: var(--sp-6); }
.office-row { display: flex; gap: 11px; align-items: flex-start; font-size: .87rem; color: var(--ink-600); line-height: 1.55; }
.office-row svg { width: 15px; height: 15px; color: var(--brand-600); flex: none; margin-top: 3px; }
.office-row a { color: var(--ink-600); }
.office-row a:hover { color: var(--brand-700); }
.office-call {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: var(--sp-6); padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--paper-2); color: var(--ink-900);
  font-size: .85rem; font-weight: 600;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.office-call svg { width: 15px; height: 15px; color: var(--brand-600); }
.office-call:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.office-call:hover svg { color: #fff; }
.office-hq { position: relative; }
.office-hq::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px;
  background: var(--brand-600);
}

/* --------------------------------------------------------------------------
   21. Offices
   -------------------------------------------------------------------------- */
.office-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--sp-5); }
.office-head h3 { font-size: 1.24rem; margin: 0; }
.office .o-badge { margin-left: auto; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700); font-weight: 600; }
.office address { font-style: normal; font-size: .89rem; color: var(--ink-500); line-height: 1.7; }
.office-links { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.office-links a { font-size: .88rem; display: inline-flex; align-items: center; gap: 9px; color: var(--ink-700); }
.office-links a:hover { color: var(--brand-700); }
.office-links svg { width: 14px; height: 14px; color: var(--brand-500); flex: none; }

/* --------------------------------------------------------------------------
   22. Editorial / insights
   -------------------------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card .pc-media { aspect-ratio: 16/10; overflow: hidden; margin-bottom: var(--sp-6); background: var(--paper-3); }
.post-card .pc-media img { transition: transform .7s var(--ease-out); }
.post-card:hover .pc-media img { transform: scale(1.035); }
/* Not scoped to .post-card — the same meta line is used on article pages. */
.pc-meta {
  font-size: .655rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400);
  font-weight: 600; margin-bottom: 12px; display: flex; gap: 16px; flex-wrap: wrap;
}
.post-card h3 { font-size: 1.3rem; line-height: 1.24; margin-bottom: .45em; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--brand-700); }
.post-card p { font-size: .92rem; color: var(--ink-500); margin-bottom: var(--sp-6); }
.post-card .cell-link { margin-top: auto; }

.prose { font-size: 1.08rem; line-height: 1.78; color: var(--ink-700); }
.prose > .lede { font-size: 1.22rem; line-height: 1.62; color: var(--ink-800); margin-bottom: 1.5em; }
.prose h2 { margin-top: 2em; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem); }
.prose h3 { margin-top: 1.7em; font-size: 1.32rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }
.prose ul li::marker { color: var(--brand-500); }
.prose blockquote {
  margin: 2em 0; padding: 0 0 0 28px; border-left: 2px solid var(--brand-500);
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1.4;
  color: var(--ink-900); letter-spacing: -.022em;
}
.prose .callout {
  background: var(--paper-2); border-top: 2px solid var(--ink-900);
  padding: var(--sp-6); margin: 2em 0; font-size: .98rem;
}
.prose .callout strong { color: var(--ink-900); }

/* --------------------------------------------------------------------------
   23. Quote
   -------------------------------------------------------------------------- */
.quote blockquote {
  margin: 0 0 var(--sp-7);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.32; letter-spacing: -.026em; color: var(--ink-900);
}
.section--dark .quote blockquote { color: #fff; }
.quote-by { display: flex; align-items: center; gap: 14px; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.quote-by .qb-name { display: block; font-weight: 600; color: var(--ink-900); font-size: .93rem; }
.quote-by .qb-role { display: block; font-size: .84rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   24. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--deep-2); color: rgba(255,255,255,.6); font-size: .92rem; }
.footer-main { padding-block: clamp(56px, 6vw, 88px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(28px, 4vw, 60px); }
.footer-brand img { width: 186px; margin-bottom: var(--sp-6); }
.footer-brand p { font-size: .92rem; color: rgba(255,255,255,.56); max-width: 32ch; }
.footer-col h4 { font-size: .655rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: var(--sp-6); font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-col a { color: rgba(255,255,255,.7); }
.footer-col a:hover { color: #fff; }
.footer-col a svg { display: inline-block; vertical-align: -1px; margin-left: 3px; }
.footer-contact { display: grid; gap: 12px; margin-top: var(--sp-6); }
.footer-contact a { display: inline-flex; align-items: center; gap: 11px; color: rgba(255,255,255,.8); }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 15px; height: 15px; color: var(--brand-400); flex: none; }
.footer-social { display: flex; gap: 18px; margin-top: var(--sp-7); }
.footer-social a { color: rgba(255,255,255,.55); transition: color .2s; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 17px; height: 17px; }
.footer-iso { display: flex; align-items: center; gap: 14px; margin-top: var(--sp-7); }
.footer-iso img { width: 50px; height: auto; background: #fff; padding: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; justify-content: space-between;
  font-size: .83rem; color: rgba(255,255,255,.44);
}
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

/* --------------------------------------------------------------------------
   25. Floating actions
   -------------------------------------------------------------------------- */
.fab-stack {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  display: flex; flex-direction: column-reverse; gap: 12px; align-items: flex-end;
}

/* Pill collapses to a circle and expands on hover, so two stacked buttons
   never dominate the corner of the page. */
.fab {
  display: inline-flex; align-items: center; gap: 0;
  height: 52px; width: 52px; padding: 0;
  border-radius: var(--r-pill);
  color: #fff; font-size: .88rem; font-weight: 600; white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 14px 30px -12px rgba(9,37,53,.45);
  transition: width .38s var(--ease-out), gap .38s var(--ease-out),
              padding .38s var(--ease-out), background-color .22s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
  justify-content: center;
}
.fab svg { flex: none; }
.fab .fab-text {
  max-width: 0; opacity: 0;
  transition: max-width .38s var(--ease-out), opacity .24s var(--ease);
}
.fab:hover, .fab:focus-visible {
  width: auto; gap: 10px; padding: 0 22px; color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px rgba(9,37,53,.55);
}
.fab:hover .fab-text, .fab:focus-visible .fab-text { max-width: 140px; opacity: 1; }

.fab--wa { background: #1FA855; }
.fab--wa:hover { background: #178E47; }
/* A quiet ring, once, to draw the eye without becoming a nightclub. */
.fab--wa::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
  box-shadow: 0 0 0 0 rgba(31,168,85,.55);
  animation: fab-ring 3.4s var(--ease) 1.5s 3;
  pointer-events: none;
}
.fab--wa { position: relative; }
@keyframes fab-ring {
  0%   { box-shadow: 0 0 0 0 rgba(31,168,85,.5); }
  60%  { box-shadow: 0 0 0 18px rgba(31,168,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,168,85,0); }
}

.fab--call { background: var(--brand-700); }
.fab--call:hover { background: var(--brand-800); }

.fab--top {
  width: 44px; height: 44px; padding: 0; justify-content: center;
  background: #fff; color: var(--ink-900);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: 0 12px 26px -14px rgba(9,37,53,.32);
  opacity: 0; pointer-events: none; transform: translateY(10px);
}
.fab--top:hover { background: #fff; color: var(--brand-700); width: 44px; padding: 0; transform: translateY(-2px); }
.fab--top svg { width: 17px; height: 17px; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 84;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mobile-bar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px; border-radius: var(--r-xs);
  font-weight: 600; font-size: .88rem;
}
.mobile-bar svg { width: 16px; height: 16px; }
.mb-call { background: var(--paper-3); color: var(--ink-900); }
.mb-wa   { background: #1FA855; color: #fff; }
.mb-demo { background: var(--ink-900); color: #fff; }

/* --------------------------------------------------------------------------
   26. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); } .mt-9 { margin-top: var(--sp-9); }
.mb-0 { margin-bottom: 0; } .mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-7 { margin-bottom: var(--sp-7); }
.mb-8 { margin-bottom: var(--sp-8); }
.muted { color: var(--ink-500); }
.small { font-size: .87rem; }
.nowrap { white-space: nowrap; }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.022em; }

/* ==========================================================================
   MOTION
   All of it is scoped to `.js` and switched off under prefers-reduced-motion.
   The intent is confident and quiet: things settle into place, they never
   bounce, spin or slide in from off-screen.
   ========================================================================== */

/* --- Scroll reveal ------------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* --- Staggered children -------------------------------------------------
   Put `reveal-stagger` on a grid; its cells settle one after another from a
   single observer, with no per-element JavaScript. */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out),
              background-color .3s var(--ease);
}
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: .02s; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .09s; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .23s; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .30s; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .37s; }
.js .reveal-stagger.is-in > *:nth-child(7) { transition-delay: .44s; }
.js .reveal-stagger.is-in > *:nth-child(8) { transition-delay: .51s; }

/* --- Hero entrance ------------------------------------------------------
   Runs on load rather than on scroll, so the first thing a visitor sees is
   the page composing itself. `both` fill keeps it correct if JS never runs. */
@keyframes ah-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ah-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.enter > * { animation: ah-rise .85s var(--ease-out) both; }
.enter > *:nth-child(1) { animation-delay: .05s; }
.enter > *:nth-child(2) { animation-delay: .13s; }
.enter > *:nth-child(3) { animation-delay: .21s; }
.enter > *:nth-child(4) { animation-delay: .29s; }
.enter > *:nth-child(5) { animation-delay: .37s; }
.enter-late { animation: ah-rise 1s var(--ease-out) .3s both; }

/* --- Section headline rule ---------------------------------------------- */
.eyebrow::before { transform-origin: left center; transition: width .6s var(--ease-out); }
.js .reveal .eyebrow::before, .js .head.reveal .eyebrow::before { width: 0; }
.js .reveal.is-in .eyebrow::before { width: 26px; transition-delay: .18s; }

/* --- The readiness chart draws itself -----------------------------------
   The hidden state is applied ONLY inside a container that will animate, so a
   chart placed anywhere else is drawn normally and can never be stranded
   invisible. */
.js .reveal .mock-chart .line,
.js .enter-late .mock-chart .line { stroke-dasharray: 340; stroke-dashoffset: 340; }
.js .reveal.is-in .mock-chart .line,
.js .enter-late .mock-chart .line { animation: ah-draw 1.7s var(--ease-out) .4s forwards; }
@keyframes ah-draw { to { stroke-dashoffset: 0; } }

.js .reveal .mock-chart .dot,
.js .enter-late .mock-chart .dot { opacity: 0; }
.js .reveal.is-in .mock-chart .dot,
.js .enter-late .mock-chart .dot { animation: ah-fade .45s var(--ease) both; }
.mock-chart .dot:nth-of-type(1) { animation-delay: .62s; }
.mock-chart .dot:nth-of-type(2) { animation-delay: .84s; }
.mock-chart .dot:nth-of-type(3) { animation-delay: 1.06s; }
.mock-chart .dot:nth-of-type(4) { animation-delay: 1.28s; }
.mock-chart .dot:nth-of-type(5) { animation-delay: 1.50s; }
.mock-chart .dot:nth-of-type(6) { animation-delay: 1.72s; }

/* --- Lattice cells ------------------------------------------------------
   A teal rule grows along the top edge on hover — the only "decoration"
   anywhere on the site, and it is doing a job: showing what is clickable. */
.lattice > a { position: relative; }
.lattice > a::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--brand-600);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.lattice > a:hover::after { transform: scaleX(1); }
.lattice > a h3 { transition: color .25s var(--ease); }
.lattice > a:hover h3 { color: var(--brand-700); }

/* --- Navigation --------------------------------------------------------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px;
  background: currentColor; opacity: .8;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--brand-600); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .28s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }
.btn--primary:hover { box-shadow: 0 12px 26px -12px rgba(9,37,53,.5); }
.btn--brand:hover, .btn--white:hover { box-shadow: 0 12px 26px -14px rgba(5,139,126,.6); }
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn:hover svg[data-flat] { transform: translateX(3px); }

/* --- Photography settles in --------------------------------------------- */
.js .reveal .media img { transform: scale(1.05); transition: transform 1.4s var(--ease-out); }
.js .reveal.is-in .media img { transform: none; }
.media-frame::before { transition: transform .9s var(--ease-out), opacity .9s var(--ease); }
.js .reveal .media-frame::before { transform: translate(14px, 14px); opacity: 0; }
.js .reveal.is-in .media-frame::before { transform: none; opacity: 1; }

/* --- Caption card ------------------------------------------------------- */
.js .reveal .media-caption { opacity: 0; transform: translateY(52%); transition: opacity .7s var(--ease-out) .35s, transform .7s var(--ease-out) .35s; }
.js .reveal.is-in .media-caption { opacity: 1; transform: translateY(40%); }

/* --- Figures ------------------------------------------------------------ */
.figure { transition: transform .4s var(--ease); }

/* --- Contact rows ------------------------------------------------------- */
.contact-line .cl-arrow { transition: transform .3s var(--ease), opacity .3s var(--ease); opacity: .55; }
.contact-line:hover .cl-arrow { transform: translate(3px, -3px); opacity: 1; }

/* --- Header condenses once you leave the top of the page ---------------- */
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 28px -26px rgba(9,37,53,.35); }
.site-header .brand img { transition: width .35s var(--ease-out); }
.site-header.is-stuck .brand img { width: 164px; }

/* --- Ticked lists reveal line by line ----------------------------------- */
.js .reveal .ticks li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.is-in .ticks li { opacity: 1; transform: none; }
.js .reveal.is-in .ticks li:nth-child(1) { transition-delay: .10s; }
.js .reveal.is-in .ticks li:nth-child(2) { transition-delay: .17s; }
.js .reveal.is-in .ticks li:nth-child(3) { transition-delay: .24s; }
.js .reveal.is-in .ticks li:nth-child(4) { transition-delay: .31s; }
.js .reveal.is-in .ticks li:nth-child(5) { transition-delay: .38s; }
.js .reveal.is-in .ticks li:nth-child(6) { transition-delay: .45s; }

/* --- Steps draw their rule --------------------------------------------- */
.step { position: relative; }
.step::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--brand-600); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--ease-out);
}
.js .step.is-in::after { transform: scaleX(1); }

/* --- Product mock composes itself --------------------------------------- */
.js .reveal .mock-kpi .k-value, .js .enter-late .mock-kpi .k-value { animation: ah-rise .7s var(--ease-out) both; }
.mock-kpi:nth-child(1) .k-value { animation-delay: .30s; }
.mock-kpi:nth-child(2) .k-value { animation-delay: .40s; }
.mock-kpi:nth-child(3) .k-value { animation-delay: .50s; }
.js .reveal .mock-item, .js .enter-late .mock-item { animation: ah-rise .6s var(--ease-out) both; }
.mock-item:nth-child(1) { animation-delay: .55s; }
.mock-item:nth-child(2) { animation-delay: .65s; }
.mock-item:nth-child(3) { animation-delay: .75s; }
.mock-item:nth-child(4) { animation-delay: .85s; }
.mock-item:nth-child(5) { animation-delay: .95s; }

/* --- Standards tint on hover -------------------------------------------- */
.standard-pill { transition: background-color .3s var(--ease), color .25s var(--ease); }
.standards .standard-pill:hover { background: var(--brand-100); color: var(--brand-800); }
.office:hover .office-call { border-color: var(--brand-600); }

/* --- Badge breathes, quietly -------------------------------------------- */
.badge::before { animation: badge-pulse 2.8s var(--ease) infinite; }
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(5,139,126,.16); }
  50%      { box-shadow: 0 0 0 6px rgba(5,139,126,.06); }
}

/* --- Ribbon items ------------------------------------------------------- */
.ribbon-item { transition: color .25s var(--ease); }

/* --------------------------------------------------------------------------
   27. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-lede { max-width: 56ch; }
}

@media (max-width: 1000px) {
  :root { --header-h: 72px; }
  .nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .split, .split--wide-left, .split--wide-right,
  .page-hero-grid, .band-grid, .head { grid-template-columns: 1fr; }
  .head { gap: 24px; align-items: start; }
  .head-note { padding-bottom: 0; }
  .lattice--4, .lattice--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mock { grid-template-columns: 48px 1fr; }
  .mock-note { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 70px; }
  .lattice--2, .lattice--3, .lattice--4 { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4, .form-grid, .ticks--two, .mega-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .figures { gap: 22px 0; }
  .figure { border-right: 0; padding-right: 20px; margin-right: 20px; flex: 0 0 40%; }
  .mobile-bar { display: flex; }
  .fab--wa, .fab--call { display: none; }
  .fab--top { display: inline-flex; }
  .fab-stack { bottom: 80px; right: 14px; }
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .mock-kpis > :last-child { grid-column: 1 / -1; }
  .mock-split { grid-template-columns: 1fr; }
  .subnav { display: none; }
  .media-caption { position: static; transform: none; max-width: none; border-top: 0; }
  .media-frame.has-caption { margin-bottom: 0; }
  .media-frame::before { display: none; }
  .prose blockquote { font-size: 1.22rem; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
  .mock-bar-item { grid-template-columns: 96px 1fr 38px; }
  .figure { flex: 0 0 100%; padding-right: 0; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   28. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Everything must land in its final state, not mid-animation. */
  .js .reveal,
  .js .reveal-stagger > *,
  .enter > *,
  .enter-late { opacity: 1 !important; transform: none !important; }
  .js .reveal .media img,
  .js .reveal .media-frame::before { transform: none !important; opacity: 1 !important; }
  .js .reveal .media-caption { opacity: 1 !important; transform: translateY(40%) !important; }
  .js .reveal .eyebrow::before { width: 26px !important; }
  .mock-chart .line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .mock-chart .dot { opacity: 1 !important; }
  .lattice > a::after { display: none; }
  .js .reveal .ticks li { opacity: 1 !important; transform: none !important; }
  .step::after { transform: scaleX(1) !important; }
  .badge::before, .fab--wa::after { animation: none !important; }
  .logo-marquee-track { animation: none; }
}

@media print {
  .site-header, .fab-stack, .mobile-bar, .band, .subnav, .ribbon { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section--dark, .page-hero--dark { background: #fff !important; color: #000 !important; }
  .section--dark h2, .page-hero--dark h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}