/* Auxara Consulting site styles. Approved design (Amin, 4 Oct 2026), taken from the round 3 home page. */
  @view-transition { navigation: auto; }

  :root {
    /* Colour: one navy family, one sky family, white and two cool greys */
    --navy: #0E2233;
    --navy-2: #1B3A55;
    --navy-glow: #24496A;
    --ink: #0E2233;
    --ink-soft: #3A4D5F;
    --ink-mute: #5B6E80;
    --paper: #FFFFFF;
    --mist: #F3F6F9;
    --mist-2: #E6EDF3;
    --line: #D9E2EB;
    --sky: #E2EEF8;
    --sky-2: #CFE3F4;
    --sky-strong: #BFDDF2;
    --sky-ink: #9CC6E8;
    --hero-from: #E3EEF9;
    --hero-mid: #EEF5FB;
    --hero-to: #FAFCFE;
    --on-navy: #FFFFFF;
    --on-navy-soft: #C9D8E6;
    --hatch: #DCE4EC;

    /* Type */
    --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
    --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    --fs-h1: clamp(40px, 2.6vw + 22px, 60px);
    --fs-h1-2: clamp(24px, 1.1vw + 16px, 32px);
    --fs-h2: clamp(32px, 1.6vw + 20px, 46px);
    --fs-h3: clamp(24px, 0.6vw + 19px, 30px);
    --fs-statement: clamp(24px, 1.2vw + 16px, 34px);
    --fs-lead: clamp(19px, 0.4vw + 16px, 22px);
    --fs-body: 19px;
    --fs-ui: 17px;
    --fs-small: 16px;
    --fs-chart: 15px;
    --fs-chart-sub: 14px;
    --lh-tight: 1.08;
    --lh-head: 1.15;
    --lh-body: 1.55;
    --lh-ui: 1.3;
    --track-display: -0.02em;
    --track-head: -0.012em;
    --measure: 62ch;
    --measure-wide: 72ch;

    /* Space */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
    --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;
    --gutter: clamp(16px, 4vw, 40px);
    --panel-inset: clamp(8px, 1.4vw, 16px);
    --section-y: clamp(72px, 7vw, 120px);
    --container: 1200px;
    --header-h: 72px;

    /* Shape: buttons and chips are pills, cards 24px, panels 36px, photos 20px */
    --r-pill: 999px;
    --r-chip: 12px;
    --r-photo: 20px;
    --r-card: 24px;
    --r-panel: 36px;

    /* Depth: shadows tinted with the navy */
    --shadow-1: 0 1px 2px rgb(14 34 51 / 0.06), 0 2px 6px rgb(14 34 51 / 0.05);
    --shadow-2: 0 2px 4px rgb(14 34 51 / 0.05), 0 14px 32px -10px rgb(14 34 51 / 0.16);
    --shadow-3: 0 6px 14px rgb(14 34 51 / 0.06), 0 34px 70px -22px rgb(14 34 51 / 0.32);
    --shadow-btn: 0 1px 0 rgb(255 255 255 / 0.14) inset, 0 6px 16px -6px rgb(14 34 51 / 0.45);
    --shadow-btn-hover: 0 22px 40px -14px rgb(14 34 51 / 0.55);
    --ring: 0 0 0 4px var(--paper);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-std: cubic-bezier(0.2, 0, 0, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 180ms;
    --dur-med: 420ms;
    --dur-slow: 900ms;
    --dur-draw: 1100ms;
    --rise: 24px;
    --rise-small: 12px;
    --press: 0.98;
    --lift: -2px;
    --step: 90ms;

    /* Chart: plot coordinates (x 0–100 = effort, y 0–88 = impact, top is high).
       --vb-h mirrors the SVG viewBox height; the route is drawn through these same points by script. */
    --vb-h: 88;
    --chart-max: 620px;
    --dot: 30px;
    --chip-gap: 22px;
    --pulse-scale: 2.4;

    /* Inner pages */
    --disc: 40px;
    --disc-lg: 48px;
    --disc-xl: 56px;
    --node: 24px;
    --r-tile: 16px;
    --icon-sm: 16px;
    --icon: 18px;
    --icon-md: 20px;
    --icon-lg: 26px;
    --fs-h4: 20px;
    --fs-plan: 22px;
    --pad-panel: clamp(28px, 4vw, 56px);
    --pad-way: clamp(28px, 3vw, 40px);
    --portrait: 160px;
    --shadow-on-navy: 0 18px 40px -16px rgb(0 0 0 / 0.55);
  }

  * { box-sizing: border-box; }
  html { scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  h1, h2, h3, p { margin: 0; }
  h2 { font: 500 var(--fs-h2)/var(--lh-head) var(--serif); letter-spacing: var(--track-head); text-wrap: balance; }
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .section { padding-block: var(--section-y); }
  .lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: var(--measure); text-wrap: pretty; }
  .icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
  .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; }
  :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: var(--s-1); }
  .on-navy :focus-visible { outline-color: var(--sky-strong); }

  .skip { position: absolute; left: var(--s-4); top: calc(-1 * var(--s-12)); z-index: 30; background: var(--navy); color: var(--on-navy); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); text-decoration: none; font-weight: 600; }
  .skip:focus { top: var(--s-4); }

  /* ---------- Buttons ---------- */
  .btn { position: relative; display: inline-flex; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-6); border-radius: var(--r-pill); background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: var(--on-navy); font: 600 var(--fs-ui)/1 var(--sans); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-btn); transition: transform var(--dur-fast) var(--ease-std); isolation: isolate; }
  .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-btn-hover); opacity: 0; transition: opacity var(--dur-med) var(--ease-std); }
  .btn-badge { position: relative; display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%; background: var(--sky-strong); color: var(--navy); overflow: hidden; }
  .btn-badge .icon { position: absolute; width: 18px; height: 18px; transition: transform var(--dur-med) var(--ease-out); }
  .btn-badge .icon + .icon { transform: translateX(-200%); }
  .btn-light { background: var(--paper); color: var(--navy); box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 10px 24px -10px rgb(0 0 0 / 0.45); }
  .btn-light .btn-badge { background: var(--navy); color: var(--on-navy); }
  .btn-sm { min-height: 46px; padding-left: var(--s-5); gap: var(--s-3); font-size: var(--fs-small); }
  .btn-sm .btn-badge { width: 32px; }
  .btn-sm .btn-badge .icon { width: 15px; height: 15px; }
  @media (hover: hover) {
    .btn:hover { transform: translateY(var(--lift)); }
    .btn:hover::after { opacity: 1; }
    .btn:hover .btn-badge .icon:first-child { transform: translateX(200%); }
    .btn:hover .btn-badge .icon + .icon { transform: translateX(0); }
  }
  .btn:active { transform: translateY(0) scale(var(--press)); }

  .text-link { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-ui)/1.2 var(--sans); color: var(--navy); text-decoration: none; padding-block: var(--s-3); position: relative; }
  .text-link::after { content: ""; position: absolute; left: 0; right: calc(1em + var(--s-2)); bottom: var(--s-2); height: 2px; background: currentColor; transform: scaleX(0.35); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
  .text-link .icon { transition: transform var(--dur-med) var(--ease-out); }
  @media (hover: hover) {
    .text-link:hover::after { transform: scaleX(1); }
    .text-link:hover .icon { transform: translateX(4px); }
  }

  /* ---------- Header ---------- */
  .top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
  .site-header { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.92); transition: box-shadow var(--dur-med) var(--ease-std); }
  .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgb(14 34 51 / 0.35); }
  .header-inner { display: flex; align-items: center; gap: var(--s-6); min-height: var(--header-h); }
  .brand { display: inline-flex; align-items: baseline; gap: var(--s-2); padding-block: var(--s-3); text-decoration: none; margin-right: auto; }
  .brand-name { font: 600 26px/1 var(--serif); letter-spacing: var(--track-head); }
  .brand-sub { font: 500 var(--fs-small)/1 var(--sans); color: var(--ink-soft); }
  .nav ul { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
  .nav a, .header-wa { position: relative; font: 500 var(--fs-ui)/1 var(--sans); text-decoration: none; color: var(--ink); padding-block: var(--s-3); }
  .nav a::after, .header-wa::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--s-1); height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-med) var(--ease-out); }
  @media (hover: hover) { .nav a:hover::after, .header-wa:hover::after { transform: scaleX(1); transform-origin: left; } }
  .header-wa { display: inline-flex; align-items: center; gap: var(--s-2); }
  .header-wa .icon { width: 20px; height: 20px; }
  .menu-toggle { display: none; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: 600 var(--fs-small)/1 var(--sans); cursor: pointer; }
  .menu-toggle .icon { width: 20px; height: 20px; }
  .mobile-menu { border-top: 1px solid var(--line); background: var(--paper); padding: var(--s-4) var(--gutter) var(--s-6); }
  .mobile-menu ul { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; }
  .mobile-menu a:not(.btn) { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; font: 500 var(--fs-ui)/1 var(--sans); text-decoration: none; }
  .mobile-menu a .icon { width: 20px; height: 20px; }
  @media (max-width: 959px) {
    .nav, .header-wa, .header-cta { display: none; }
    .menu-toggle { display: inline-flex; }
  }
  @media (min-width: 960px) { .mobile-menu { display: none; } }

  /* ---------- Hero ---------- */
  .hero { padding: var(--panel-inset); padding-top: var(--s-2); }
  .hero-panel { position: relative; border-radius: var(--r-panel); background:
      radial-gradient(70% 80% at 88% 0%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 60%),
      radial-gradient(60% 70% at 0% 100%, rgb(207 227 244 / 0.7), rgb(207 227 244 / 0) 70%),
      linear-gradient(160deg, var(--hero-from) 0%, var(--hero-mid) 50%, var(--hero-to) 100%);
    overflow: clip; }
  .hero-grid { display: grid; gap: var(--s-10); align-items: center; padding-block: clamp(28px, 3.4vw, 52px) clamp(48px, 5vw, 80px); }
  @media (min-width: 1080px) { .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: var(--s-10); align-items: start; } }
  .hero-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: rgb(255 255 255 / 0.8); box-shadow: var(--shadow-1); font: 500 var(--fs-small)/1.3 var(--sans); color: var(--ink-soft); }
  /* A label that wraps splits into even lines; site.js then fits the box to them (CSS alone keeps it column-wide). */
  .js .hero-pill { text-wrap: balance; }
  .hero-pill .icon { width: 18px; height: 18px; color: var(--navy); }
  .hero-title { margin-top: var(--s-6); }
  .hero-title .t1, .hero-title .t2 { display: block; }
  .hero-title .t1 { font: 500 var(--fs-h1)/var(--lh-tight) var(--serif); letter-spacing: var(--track-display); text-wrap: balance; }
  .hero-title .t2 { margin-top: var(--s-4); font: 400 var(--fs-h1-2)/1.22 var(--serif); color: var(--ink-soft); letter-spacing: var(--track-head); text-wrap: balance; }
  .hero-lead { margin-top: var(--s-6); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-soft); max-width: var(--measure); text-wrap: pretty; }
  .hero-lead strong { color: var(--ink); font-weight: 600; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); margin-top: var(--s-8); }
  .hero-note { display: flex; gap: var(--s-3); margin-top: var(--s-6); max-width: 52ch; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
  .hero-note .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--navy); }

  /* Hero entrance: everything readable within about 0.8 s */
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy > * { animation: rise var(--dur-slow) var(--ease-out) both; }
    .hero-copy > :nth-child(2) { animation-delay: calc(1 * var(--step)); }
    .hero-copy > :nth-child(3) { animation-delay: calc(2 * var(--step)); }
    .hero-copy > :nth-child(4) { animation-delay: calc(3 * var(--step)); }
    .hero-copy > :nth-child(5) { animation-delay: calc(4 * var(--step)); }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } }

  /* ---------- The chart ---------- */
  .hero-visual { position: relative; }
  /* The card's deep bottom padding is the space the roadmap card overlaps, so it never covers the chart. */
  .mx-card { position: relative; margin: 0; padding: var(--s-6) var(--s-6) var(--s-12); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-3); }
  .mx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
  .mx-title { font: 600 var(--fs-ui)/var(--lh-ui) var(--sans); }
  .mx-tag { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--sky); color: var(--ink-soft); font: 500 var(--fs-chart-sub)/1.4 var(--sans); }
  .mx-frame { position: relative; margin-top: var(--s-6); padding: var(--s-7) 0 var(--s-7) var(--s-2); }
  .mx-axis { position: absolute; display: inline-flex; align-items: center; gap: var(--s-1); font: 600 var(--fs-chart-sub)/1 var(--sans); color: var(--ink-soft); }
  .mx-axis-y { top: 0; left: 0; }
  .mx-axis-x { bottom: 0; right: 0; }
  .mx-axis .icon { width: 14px; height: 14px; }
  .mx-axis-y .icon { transform: rotate(-90deg); }
  /* The plot keeps the viewBox's proportions, so SVG units scale evenly and strokes stay true. */
  .mx-plot { position: relative; aspect-ratio: 100 / var(--vb-h); container-type: inline-size;
    --p1x: 11; --p1y: 16;
    --p2x: 26; --p2y: 31;
    --p3x: 70; --p3y: 25;
    --pLx: 84; --pLy: 27;
    --pSx: 14; --pSy: 64;
    --pNx: 76; --pNy: 66; }
  /* Labels, dots and gaps scale with the plot's own width, so the drawing keeps its proportions at every size. */
  .mx-plot > * { --fs-chart: clamp(13px, 3.1cqi, 15px); --fs-chart-sub: clamp(12px, 2.85cqi, 14px); --dot: clamp(22px, 6.3cqi, 30px); --chip-gap: clamp(14px, 4.6cqi, 22px); }
  .mx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .mx-svg .q { stroke: none; }
  .mx-svg .q-qw { fill: url(#qw-fill); }
  .mx-svg .q-bs { fill: var(--mist); }
  .mx-svg .q-se { fill: var(--mist); }
  .mx-svg .q-nw { fill: url(#hatch); }
  .mx-svg .mid { stroke: var(--line); stroke-width: 0.32; stroke-dasharray: 0.8 1.1; }
  /* Butt caps on the drawn paths: a round cap shows as a stray dot at the far end before the draw starts. */
  .mx-svg .axis { fill: none; stroke: var(--navy); stroke-width: 0.45; stroke-linecap: butt; }
  .mx-svg .route { fill: none; stroke: var(--navy); stroke-width: 0.45; stroke-dasharray: 1.3 1.5; stroke-linecap: round; opacity: 0.75; }
  .mx-svg .route-mask { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: butt; }
  .q-label { position: absolute; font: 600 var(--fs-chart-sub)/1 var(--sans); color: var(--ink-mute); }
  .q-label.qw { left: 2%; top: 3%; color: var(--navy); }
  .q-label.bs { right: 2%; top: 3%; }
  .q-label.se { left: 2%; bottom: 3%; }
  .q-label.nw { right: 2%; bottom: 3%; }

  .dot { position: absolute; display: grid; place-items: center; width: var(--dot); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--navy); color: var(--on-navy); font: 700 var(--fs-chart-sub)/1 var(--sans); box-shadow: var(--ring), 0 6px 14px -4px rgb(14 34 51 / 0.5); }
  .dot-later { background: var(--paper); color: var(--navy); border: 2px solid var(--navy); }
  .dot-small { width: calc(var(--dot) * 0.6); background: var(--ink-mute); box-shadow: var(--ring); }
  .dot-no { width: calc(var(--dot) * 0.85); background: var(--paper); color: var(--ink-mute); box-shadow: var(--ring); }
  .dot-no .icon { width: 100%; height: 100%; }
  .d1 { left: calc(var(--p1x) * 1%); top: calc(var(--p1y) / var(--vb-h) * 100%); }
  .d2 { left: calc(var(--p2x) * 1%); top: calc(var(--p2y) / var(--vb-h) * 100%); }
  .d3 { left: calc(var(--p3x) * 1%); top: calc(var(--p3y) / var(--vb-h) * 100%); }
  .dL { left: calc(var(--pLx) * 1%); top: calc(var(--pLy) / var(--vb-h) * 100%); }
  .dS { left: calc(var(--pSx) * 1%); top: calc(var(--pSy) / var(--vb-h) * 100%); }
  .dN { left: calc(var(--pNx) * 1%); top: calc(var(--pNy) / var(--vb-h) * 100%); }
  .pulse { position: absolute; width: var(--dot); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--navy); opacity: 0; pointer-events: none; }

  .chip { position: absolute; padding: var(--s-2) var(--s-3); border-radius: var(--r-chip); background: var(--paper); box-shadow: var(--shadow-2); font: 600 var(--fs-chart)/1.25 var(--sans); color: var(--ink); white-space: nowrap; }
  .chip small { display: block; margin-top: 2px; font: 500 var(--fs-chart-sub)/1.3 var(--sans); color: var(--ink-soft); }
  .chip-muted { color: var(--ink-mute); background: var(--mist); box-shadow: none; text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .c1 { left: calc(var(--p1x) * 1% + var(--chip-gap)); top: calc(var(--p1y) / var(--vb-h) * 100%); translate: 0 -50%; }
  /* On a narrow chart (a 1080–1200px screen) label 1 would run into label 3, so it wraps. */
  @container (max-width: 430px) { .c1 { white-space: normal; max-width: 10.5em; text-wrap: balance; } }
  .c2 { left: calc(var(--p2x) * 1%); top: calc(var(--p2y) / var(--vb-h) * 100% + var(--chip-gap)); translate: -50% 0; }
  .c3 { right: 2%; bottom: calc(100% - var(--p3y) / var(--vb-h) * 100% + var(--chip-gap)); }
  .cL { right: 2%; top: calc(var(--pLy) / var(--vb-h) * 100% + var(--chip-gap)); white-space: normal; max-width: 15em; }
  .cS { left: calc(var(--pSx) * 1% + var(--chip-gap)); top: calc(var(--pSy) / var(--vb-h) * 100%); translate: 0 -50%; font-weight: 500; }
  .cN { right: 2%; top: calc(var(--pNy) / var(--vb-h) * 100% + var(--chip-gap)); font-weight: 500; }
  .mx-legend { display: none; }

  .roadmap { position: relative; z-index: 1; width: min(340px, 84%); margin: calc(-1 * var(--s-11)) 0 0 calc(-1 * var(--s-8)); padding: var(--s-5) var(--s-6); border-radius: var(--r-card); background: var(--navy); color: var(--on-navy); box-shadow: var(--shadow-3); }
  .roadmap-title { display: flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-small)/1 var(--sans); color: var(--sky-strong); }
  .roadmap-title .icon { width: 18px; height: 18px; }
  .roadmap ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-chart-sub); line-height: 1.45; color: var(--on-navy-soft); }
  .roadmap li { position: relative; padding-left: var(--s-5); }
  .roadmap li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--sky-strong); }
  .roadmap li:first-child::before { background: var(--sky-strong); }
  .roadmap b { color: var(--on-navy); font-weight: 600; }
  .roadmap li.no, .roadmap li.no b { color: var(--on-navy-soft); }
  .roadmap li.no::before { border-color: var(--on-navy-soft); }

  @media (max-width: 1079px) {
    /* Stacked: the chart keeps the proportions it has beside the text, instead of stretching across the page. */
    .hero-visual { max-width: var(--chart-max); }
    .roadmap { width: auto; margin: calc(-1 * var(--s-11)) var(--s-5) 0; }
  }
  @media (max-width: 560px) {
    .mx-card { padding: var(--s-5) var(--s-4) var(--s-12); }
    .mx-plot .chip { display: none; }
    .mx-legend { display: grid; gap: var(--s-2); list-style: none; margin: var(--s-4) 0 0; padding: 0; font-size: var(--fs-chart-sub); line-height: 1.4; color: var(--ink-soft); }
    .mx-legend b { color: var(--ink); }
  }

  /* Chart animation: axes draw, quadrants settle, dots arrive in roadmap order, then the route draws */
  @media (prefers-reduced-motion: no-preference) {
    .mx-card { animation: card-in var(--dur-slow) var(--ease-out) 150ms both; }
    .mx-svg .axis { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw var(--dur-draw) var(--ease-std) 500ms forwards; }
    .mx-svg .mid { opacity: 0; animation: fade var(--dur-med) var(--ease-std) 1000ms forwards; }
    .mx-svg .q { opacity: 0; animation: fade var(--dur-slow) var(--ease-std) 800ms forwards; }
    .q-label { opacity: 0; animation: fade var(--dur-med) var(--ease-std) 1100ms forwards; }
    .dot { scale: 0; animation: pop var(--dur-med) var(--ease-back) forwards; }
    .chip { opacity: 0; animation: chip-in var(--dur-med) var(--ease-out) forwards; }
    .d1 { animation-delay: 1250ms; } .c1 { animation-delay: 1350ms; }
    .d2 { animation-delay: 1400ms; } .c2 { animation-delay: 1500ms; }
    .d3 { animation-delay: 1550ms; } .c3 { animation-delay: 1650ms; }
    .dL { animation-delay: 1700ms; } .cL { animation-delay: 1800ms; }
    .dS { animation-delay: 1850ms; } .cS { animation-delay: 1950ms; }
    .dN { animation-delay: 2000ms; } .cN { animation-delay: 2100ms; }
    .route-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1400ms var(--ease-std) 2200ms forwards; }
    .pulse { animation: pulse 1800ms var(--ease-out) 3400ms 3; }
    .roadmap { animation: card-in var(--dur-slow) var(--ease-out) 2600ms both; }
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
  @keyframes pop { to { scale: 1; } }
  @keyframes chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes card-in { from { opacity: 0; transform: perspective(1200px) rotateX(10deg) translateY(36px); } }
  @keyframes pulse { 0% { opacity: 0.55; scale: 1; } 100% { opacity: 0; scale: var(--pulse-scale); } }

  /* ---------- Scroll reveals (only when script runs; once each) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
    .js [data-reveal].is-in { opacity: 1; transform: none; }
    .js [data-reveal].r2 { transition-delay: calc(1 * var(--step)); }
    .js [data-reveal].r3 { transition-delay: calc(2 * var(--step)); }
    .js [data-reveal].r4 { transition-delay: calc(3 * var(--step)); }
    .js [data-reveal].r5 { transition-delay: calc(4 * var(--step)); }
    .js [data-reveal].r6 { transition-delay: calc(5 * var(--step)); }
  }

  /* ---------- Sound familiar? ---------- */
  .familiar-head { display: grid; gap: var(--s-4); max-width: var(--measure); }
  .pains { display: grid; gap: var(--s-5); margin-top: var(--s-9); list-style: none; padding: 0; }
  @media (min-width: 720px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1080px) { .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pain { position: relative; padding: var(--s-7); border-radius: var(--r-card); background: var(--mist); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-std); }
  .pain-icon { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: var(--shadow-1); }
  .pain-icon .icon { width: 26px; height: 26px; }
  .pain h3 { margin-top: var(--s-5); font: 600 20px/1.3 var(--sans); }
  .pain p { margin-top: var(--s-2); font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-soft); }
  .pain-ai { background: var(--navy); color: var(--on-navy); }
  .pain-ai p { color: var(--on-navy-soft); }
  .pain-ai .pain-icon { background: var(--sky-strong); box-shadow: none; }
  @media (hover: hover) { .pain:hover { transform: translateY(-4px); background: var(--paper); box-shadow: var(--shadow-2); } .pain-ai:hover { background: var(--navy); } }
  .familiar-close { margin-top: var(--s-9); font: italic 400 var(--fs-statement)/1.3 var(--serif); color: var(--ink); }

  /* ---------- What's really going on ---------- */
  .statement { margin-inline: var(--panel-inset); border-radius: var(--r-panel); background:
      radial-gradient(60% 90% at 100% 0%, rgb(36 73 106 / 0.9), rgb(36 73 106 / 0) 70%), var(--navy);
    color: var(--on-navy); }
  .statement-grid { display: grid; gap: var(--s-7); padding-block: clamp(56px, 7vw, 112px); }
  @media (min-width: 960px) { .statement-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--s-10); } }
  .statement h2 { color: var(--sky-strong); font-size: var(--fs-h3); }
  .statement p { font: 400 var(--fs-statement)/1.4 var(--serif); letter-spacing: var(--track-head); max-width: 34ch; text-wrap: pretty; }

  /* ---------- What we do (from R) ---------- */
  .do-head { display: grid; gap: var(--s-5); max-width: 760px; }
  .do-head h2 { max-width: 20ch; }
  .steps3 { display: grid; gap: clamp(48px, 6vw, 96px); margin-top: clamp(48px, 6vw, 88px); list-style: none; padding: 0; }
  .step3 { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 900px) {
    .step3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
    .step3:nth-child(even) .step3-photo { order: 2; }
  }
  .step3-photo { position: relative; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-2); }
  .step3-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out); }
  .js .step3:not(.is-in) .step3-photo img { transform: scale(1.12); }
  @media (hover: hover) { .step3.is-in:hover .step3-photo img { transform: scale(1.03); } }
  .step3-num { display: inline-grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--sky); color: var(--navy); font: 600 20px/1 var(--serif); }
  .step3 h3 { margin-top: var(--s-5); font: 500 var(--fs-h3)/1.2 var(--serif); letter-spacing: var(--track-head); }
  .step3 p { margin-top: var(--s-4); color: var(--ink-soft); max-width: 52ch; }

  /* ---------- What you walk away with ---------- */
  .band { background: var(--mist); }
  .walk { display: grid; gap: var(--s-9); align-items: start; }
  @media (min-width: 1000px) { .walk { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-11); } .walk-head { position: sticky; top: calc(var(--header-h) + var(--s-9)); } }
  .walk-head p { margin-top: var(--s-6); }
  .walk-card { margin: 0; padding: var(--s-4) var(--s-7); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-2); list-style: none; }
  .walk-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-6); }
  .walk-item + .walk-item { border-top: 1px solid var(--mist-2); }
  .walk-icon { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 14px; background: var(--sky); color: var(--navy); }
  .walk-icon .icon { width: 24px; height: 24px; }
  .walk-item p { color: var(--ink-soft); align-self: center; }
  .walk-item strong { color: var(--ink); font-weight: 600; }

  /* ---------- What happens next ---------- */
  .next-head { display: grid; gap: var(--s-4); }
  .timeline { position: relative; display: grid; gap: var(--s-8); margin-top: var(--s-10); list-style: none; padding: 0; }
  .timeline::before { content: ""; position: absolute; left: 23px; top: var(--s-6); bottom: var(--s-6); width: 2px; background: var(--sky-2); transform-origin: top; }
  .tl-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-5); align-content: start; }
  .tl-num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: 600 var(--fs-ui)/1 var(--sans); box-shadow: var(--ring); }
  .tl-step h3 { font: 600 21px/1.3 var(--sans); padding-top: var(--s-3); }
  .tl-step p { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--fs-ui); max-width: 40ch; }
  @media (min-width: 1000px) {
    .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7); }
    .timeline::before { left: var(--s-6); right: var(--s-6); top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
    .tl-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    .tl-step h3 { padding-top: var(--s-2); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .js .timeline::before { transform: scaleY(0); transition: transform 1600ms var(--ease-out); }
    @media (min-width: 1000px) { .js .timeline::before { transform: scaleX(0); } }
    .js .timeline.is-in::before { transform: none; }
    .js .timeline .tl-num { scale: 0.4; opacity: 0; transition: scale var(--dur-med) var(--ease-back), opacity var(--dur-fast) var(--ease-std); }
    .js .timeline.is-in .tl-num { scale: 1; opacity: 1; }
    .js .timeline.is-in .tl-step:nth-child(2) .tl-num { transition-delay: 300ms; }
    .js .timeline.is-in .tl-step:nth-child(3) .tl-num { transition-delay: 600ms; }
    .js .timeline.is-in .tl-step:nth-child(4) .tl-num { transition-delay: 900ms; }
  }

  /* ---------- After the audit ---------- */
  .after { display: grid; gap: var(--s-7); }
  @media (min-width: 1000px) { .after { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-11); align-items: start; } }
  .after-intro p { margin-top: var(--s-5); font-size: var(--fs-lead); }
  .choices { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
  .choice { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--paper); font-size: var(--fs-lead); color: var(--ink-soft); transition: border-color var(--dur-med) var(--ease-std), transform var(--dur-med) var(--ease-out); }
  .choice strong { color: var(--ink); font-weight: 600; }
  .choice-icon { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 50%; background: var(--sky); color: var(--navy); flex: none; }
  .choice-icon .icon { width: 26px; height: 26px; }
  @media (hover: hover) { .choice:hover { border-color: var(--navy); transform: translateX(4px); } }
  .after-close { margin-top: var(--s-6); color: var(--ink-soft); }

  /* ---------- Who it's for ---------- */
  .who { display: grid; gap: var(--s-9); }
  @media (min-width: 1000px) { .who { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-11); align-items: start; } .who-head { position: sticky; top: calc(var(--header-h) + var(--s-9)); } }
  .who-head .lead { margin-top: var(--s-6); }
  .who-not { display: flex; gap: var(--s-3); margin-top: var(--s-7); padding: var(--s-4) var(--s-5); border-radius: var(--r-chip); background: var(--mist); color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.45; max-width: 46ch; }
  .who-not .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--ink-mute); }
  .trades { display: grid; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
  @media (min-width: 640px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .trade { position: relative; display: grid; align-content: start; gap: var(--s-3); height: 100%; padding: var(--s-7); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--paper); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-std); }
  .trade::before { content: ""; position: absolute; inset: auto calc(-1 * var(--s-10)) calc(-1 * var(--s-10)) auto; z-index: -1; width: 180px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--sky-2), rgb(207 227 244 / 0)); opacity: 0; transition: opacity var(--dur-med) var(--ease-std); }
  .trade-icon { display: grid; place-items: center; width: 56px; aspect-ratio: 1; margin-bottom: var(--s-3); border-radius: 16px; background: var(--sky); color: var(--navy); transition: background-color var(--dur-med) var(--ease-std), color var(--dur-med) var(--ease-std), transform var(--dur-med) var(--ease-out); }
  .trade-icon .icon { width: 28px; height: 28px; }
  .trade-name { font: 500 var(--fs-h3)/1.2 var(--serif); letter-spacing: var(--track-head); color: var(--ink); }
  .trade-team { color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.5; }
  .trade-more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font: 600 var(--fs-ui)/1 var(--sans); color: var(--navy); }
  .trade-more .icon { width: 18px; height: 18px; transition: transform var(--dur-med) var(--ease-out); }
  @media (hover: hover) {
    .trade:hover { transform: translateY(-4px); border-color: var(--sky-ink); box-shadow: var(--shadow-2); }
    .trade:hover::before { opacity: 1; }
    .trade:hover .trade-icon { background: var(--navy); color: var(--on-navy); transform: rotate(-6deg); }
    .trade:hover .trade-more .icon { transform: translateX(5px); }
  }

  /* ---------- Your information stays private ---------- */
  .private { display: grid; gap: var(--s-8); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-panel); background: linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
  @media (min-width: 1000px) { .private { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-10); } }
  .private ul { display: grid; gap: var(--s-6) var(--s-8); list-style: none; padding: 0; margin: 0; }
  @media (min-width: 720px) { .private ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .private li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .private .p-icon { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: var(--shadow-1); }
  .private .p-icon .icon { width: 24px; height: 24px; }
  .private h3 { font: 600 20px/1.3 var(--sans); padding-top: var(--s-2); }
  .private p { margin-top: var(--s-1); color: var(--ink-soft); font-size: var(--fs-ui); }

  /* ---------- Questions ---------- */
  .faq { display: grid; gap: var(--s-8); }
  @media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-10); } .faq-head { position: sticky; top: calc(var(--header-h) + var(--s-9)); align-self: start; } }
  .faq-list { display: grid; gap: var(--s-3); }
  .faq details { border-radius: var(--r-card); background: var(--mist); transition: background-color var(--dur-med) var(--ease-std), box-shadow var(--dur-med) var(--ease-std); }
  .faq details[open] { background: var(--paper); box-shadow: var(--shadow-2); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 64px; padding: var(--s-4) var(--s-6); cursor: pointer; list-style: none; font: 600 var(--fs-ui)/1.35 var(--sans); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq .pm { display: grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--navy); flex: none; box-shadow: var(--shadow-1); transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-std), color var(--dur-med) var(--ease-std); }
  .faq .pm .icon { width: 16px; height: 16px; }
  .faq details[open] .pm { transform: rotate(45deg); background: var(--navy); color: var(--on-navy); }
  .faq details p { padding: 0 var(--s-6) var(--s-6); color: var(--ink-soft); max-width: 62ch; }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    @media (prefers-reduced-motion: no-preference) {
      .faq details::details-content { height: 0; overflow: clip; transition: height var(--dur-med) var(--ease-std), content-visibility var(--dur-med) var(--ease-std) allow-discrete; }
      .faq details[open]::details-content { height: auto; }
    }
  }

  /* ---------- Closing ---------- */
  .closing { margin: 0 var(--panel-inset) var(--panel-inset); border-radius: var(--r-panel); background:
      radial-gradient(55% 80% at 15% 0%, rgb(36 73 106 / 0.95), rgb(36 73 106 / 0) 70%),
      radial-gradient(50% 70% at 100% 100%, rgb(191 221 242 / 0.18), rgb(191 221 242 / 0) 70%), var(--navy);
    color: var(--on-navy); text-align: center; }
  .closing-inner { display: grid; justify-items: center; gap: var(--s-6); padding-block: clamp(64px, 8vw, 128px); }
  .closing h2 { max-width: 22ch; font-size: clamp(34px, 2.4vw + 18px, 54px); }
  .closing p { max-width: 56ch; color: var(--on-navy-soft); font-size: var(--fs-lead); }
  .closing .btn { margin-top: var(--s-4); }

  /* ---------- Footer ---------- */
  .site-footer { padding-block: var(--s-9) var(--s-10); font-size: var(--fs-small); color: var(--ink-soft); }
  .footer-grid { display: grid; gap: var(--s-5); }
  @media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
  .footer-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0; padding: 0; }
  .footer-links a { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--ink); font-weight: 500; min-height: 44px; }
  .footer-links .icon { width: 18px; height: 18px; color: var(--navy); }

  /* =========================================================================
     Inner pages: the same panels, cards, depth and motion as the home page.
     ========================================================================= */

  /* Hero pictures */
  .steps-card, .plan-card, .contact-card, .fit-card, .quote-card { position: relative; margin: 0; border-radius: var(--r-card); box-shadow: var(--shadow-3); }
  .steps-card, .plan-card, .contact-card, .fit-card { padding: var(--s-7); background: var(--paper); }
  .card-title { font: 600 var(--fs-ui)/var(--lh-ui) var(--sans); }

  .steps-card ol { position: relative; display: grid; gap: var(--s-5); list-style: none; margin: var(--s-6) 0 0; padding: 0; }
  .steps-card ol::before { content: ""; position: absolute; left: calc(var(--disc) / 2 - 1px); top: var(--s-5); bottom: var(--s-5); width: 2px; background: var(--sky-2); }
  .steps-card li { position: relative; display: grid; grid-template-columns: var(--disc) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .steps-card .n { display: grid; place-items: center; width: var(--disc); aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: 700 var(--fs-chart-sub)/1 var(--sans); box-shadow: var(--ring); }
  .steps-card b { display: block; padding-top: var(--s-2); font: 600 var(--fs-ui)/1.3 var(--sans); }
  .steps-card .d { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--ink-soft); }

  .plan-title { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-7); font: 600 var(--fs-small)/1 var(--sans); color: var(--ink-soft); }
  .plan-title .icon { width: var(--icon); height: var(--icon); color: var(--navy); }
  .plan { position: relative; display: grid; gap: var(--s-7); list-style: none; margin: var(--s-5) 0 0; padding: 0; }
  .plan .what::first-letter { text-transform: uppercase; }
  .plan::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--s-3); bottom: var(--s-3); width: 2px; background: var(--sky-2); transform-origin: top; }
  .plan li { position: relative; padding-left: calc(var(--node) + var(--s-5)); }
  .plan li::before { content: ""; position: absolute; left: 0; top: 2px; width: var(--node); aspect-ratio: 1; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy); box-shadow: var(--ring); }
  .plan li:first-child::before { background: var(--navy); }
  .plan .when { display: block; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--ink-soft); }
  .plan .what { display: block; margin-top: var(--s-1); font: 500 var(--fs-plan)/1.3 var(--serif); letter-spacing: var(--track-head); color: var(--ink); }
  .plan .plan-no::before { border-color: var(--ink-mute); border-style: dashed; background: var(--mist); }
  .plan .plan-no .what { color: var(--ink-mute); }

  /* Rows inside a hero card: an icon disc and a line or two. A row that is a link gets an arrow. */
  .card-list { display: grid; gap: var(--s-3); list-style: none; margin: var(--s-5) 0 0; padding: 0; }
  .card-list .row { display: grid; grid-template-columns: var(--disc-lg) minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-chip); background: var(--mist); text-decoration: none; transition: background-color var(--dur-med) var(--ease-std); }
  .card-list .ci { display: grid; place-items: center; width: var(--disc-lg); aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: var(--shadow-1); }
  .card-list .ci .icon { width: var(--icon-md); height: var(--icon-md); }
  .card-list .cl { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
  .card-list .cv { display: block; font: 600 var(--fs-ui)/1.3 var(--sans); color: var(--ink); }
  .card-list .go { width: var(--icon-md); height: var(--icon-md); color: var(--navy); transition: transform var(--dur-med) var(--ease-out); }
  @media (hover: hover) { .card-list a.row:hover { background: var(--sky); } .card-list a.row:hover .go { transform: translateX(4px); } }
  .fit-card .who-not { max-width: none; margin-top: var(--s-6); padding: 0; background: none; }

  .quote-card { padding: var(--pad-panel); background: radial-gradient(70% 90% at 100% 0%, rgb(36 73 106 / 0.9), rgb(36 73 106 / 0) 70%), var(--navy); color: var(--on-navy); }
  .quote-card .q { font: 500 var(--fs-statement)/1.25 var(--serif); letter-spacing: var(--track-head); }
  .quote-card .qs { margin-top: var(--s-5); color: var(--on-navy-soft); }

  @media (prefers-reduced-motion: no-preference) {
    .steps-card, .plan-card, .contact-card, .fit-card, .quote-card { animation: card-in var(--dur-slow) var(--ease-out) 150ms both; }
    .steps-card li, .plan li, .card-list li, .fit-card .who-not { animation: rise var(--dur-slow) var(--ease-out) both; }
    .steps-card li:nth-child(1), .plan li:nth-child(1), .card-list li:nth-child(1) { animation-delay: 550ms; }
    .steps-card li:nth-child(2), .plan li:nth-child(2), .card-list li:nth-child(2) { animation-delay: 700ms; }
    .steps-card li:nth-child(3), .plan li:nth-child(3), .card-list li:nth-child(3) { animation-delay: 850ms; }
    .steps-card li:nth-child(4), .plan li:nth-child(4), .fit-card .who-not { animation-delay: 1000ms; }
    .steps-card li:nth-child(5) { animation-delay: 1150ms; }
    .plan::before { animation: grow-y 1200ms var(--ease-out) 500ms both; }
  }
  @keyframes grow-y { from { transform: scaleY(0); } }

  /* Section intro on inner pages */
  .section-head { display: grid; gap: var(--s-4); max-width: var(--measure-wide); }

  /* Step by step (How it works) */
  .process { position: relative; display: grid; gap: var(--s-9); list-style: none; margin: var(--s-10) 0 0; padding: 0; }
  .process::before { content: ""; position: absolute; left: calc(var(--disc-xl) / 2 - 1px); top: var(--s-6); bottom: var(--s-6); width: 2px; background: var(--sky-2); transform-origin: top; }
  .process > li { position: relative; display: grid; grid-template-columns: var(--disc-xl) minmax(0, 1fr); gap: var(--s-6); }
  .process .pn { position: relative; z-index: 1; display: grid; place-items: center; width: var(--disc-xl); aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: 600 var(--fs-h4)/1 var(--serif); box-shadow: var(--ring); }
  .process h3 { padding-top: var(--s-3); font: 500 var(--fs-h3)/1.2 var(--serif); letter-spacing: var(--track-head); }
  .process .meta { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--sky); color: var(--navy); font: 600 var(--fs-small)/1.4 var(--sans); }
  .process .meta .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .process p { margin-top: var(--s-4); color: var(--ink-soft); max-width: var(--measure); }
  .ticks { display: grid; gap: var(--s-3); list-style: none; margin: var(--s-4) 0 0; padding: 0; }
  .ticks li { display: flex; gap: var(--s-3); color: var(--ink-soft); font-size: var(--fs-ui); line-height: 1.5; }
  .ticks .icon { width: var(--icon-md); height: var(--icon-md); margin-top: 2px; color: var(--navy); }
  @media (prefers-reduced-motion: no-preference) {
    .js .process::before { transform: scaleY(0); transition: transform 2200ms var(--ease-out); }
    .js .process.is-in::before { transform: none; }
  }

  /* Report contents and proof: icon cards in a grid */
  .parts { display: grid; gap: var(--s-5); list-style: none; margin: var(--s-9) 0 0; padding: 0; }
  @media (min-width: 720px) { .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1080px) { .parts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .part { padding: var(--s-7); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--paper); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
  .part-icon, .area-icon, .way-icon { display: grid; place-items: center; width: var(--disc-lg); aspect-ratio: 1; border-radius: var(--r-tile); background: var(--sky); color: var(--navy); }
  .part-icon .icon, .area-icon .icon, .way-icon .icon { width: var(--icon-lg); height: var(--icon-lg); }
  .part h3 { margin-top: var(--s-5); font: 600 var(--fs-h4)/1.3 var(--sans); }
  .part p { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--fs-ui); }
  @media (hover: hover) { .part:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }

  /* What we look at (trade pages): the three lanes */
  .areas { display: grid; gap: var(--s-5); list-style: none; margin: var(--s-9) 0 0; padding: 0; }
  @media (min-width: 960px) { .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .area { padding: var(--s-7); border-radius: var(--r-card); background: var(--mist); }
  .area h3 { margin-top: var(--s-5); font: 500 var(--fs-h3)/1.2 var(--serif); letter-spacing: var(--track-head); }
  .area .ticks { margin-top: var(--s-5); }

  /* Who we talk to (trade pages) */
  .talk { display: grid; gap: var(--s-8); padding: var(--pad-panel); border-radius: var(--r-panel); background: linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
  @media (min-width: 1000px) { .talk { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-10); align-items: start; } }
  .talk .lead { margin-top: var(--s-5); }
  .roles { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
  .roles li { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--disc-lg); padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-1); font: 600 var(--fs-ui)/1.2 var(--sans); }
  .roles .icon { width: var(--icon); height: var(--icon); color: var(--navy); }
  .talk-why { margin-top: var(--s-6); color: var(--ink-soft); max-width: var(--measure); }

  /* Examples of what an audit can find (trade pages): numbered findings from a sample report.
     Each one is what's happening, why, where it was seen, then one recommendation with when and who. */
  .findings { display: grid; gap: var(--s-6); list-style: none; margin: var(--s-9) 0 0; padding: 0; }
  .finding { display: grid; grid-template-columns: var(--disc-lg) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-7); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--paper); }
  .finding-num { display: grid; place-items: center; width: var(--disc-lg); aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: 600 var(--fs-h4)/1 var(--serif); box-shadow: var(--ring); }
  @media (max-width: 559px) { .finding { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .finding-num { width: var(--disc); font-size: var(--fs-ui); } }
  .finding-tag { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--sky); color: var(--navy); font: 600 var(--fs-chart-sub)/1.4 var(--sans); }
  .finding-tag .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .finding h3 { margin-top: var(--s-3); font: 500 var(--fs-h3)/1.2 var(--serif); letter-spacing: var(--track-head); }
  .finding-body > p { margin-top: var(--s-3); max-width: var(--measure); color: var(--ink-soft); font-size: var(--fs-ui); }
  .finding-body > .finding-seen { font-size: var(--fs-small); color: var(--ink-mute); }
  .finding-seen .icon { display: inline-block; width: var(--icon-sm); height: var(--icon-sm); margin-right: var(--s-2); vertical-align: -0.15em; color: var(--navy); }
  .seen-label { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
  .finding-rec { display: grid; gap: var(--s-4); margin-top: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-chip); background: var(--mist); }
  @media (min-width: 900px) { .finding-rec { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-7); } }
  .finding-rec p { max-width: var(--measure); color: var(--ink); font-size: var(--fs-ui); }
  .finding-rec b { font-weight: 600; }
  .rec-text { display: grid; gap: var(--s-2); }
  .finding-rec .finding-worth { color: var(--ink-soft); }
  .finding-worth .icon { display: inline-block; width: var(--icon-sm); height: var(--icon-sm); margin-right: var(--s-2); vertical-align: -0.15em; color: var(--navy); }
  .rec-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
  .rec-chips li { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-1); color: var(--navy); font: 600 var(--fs-chart-sub)/1.4 var(--sans); text-wrap: balance; }
  .rec-chips .icon { width: var(--icon-sm); height: var(--icon-sm); }
  /* The recommendation arrives a beat after the finding, as it would in the report. */
  @media (prefers-reduced-motion: no-preference) {
    .js .finding .finding-rec { opacity: 0; translate: 0 var(--rise-small); transition: opacity var(--dur-med) var(--ease-out), translate var(--dur-med) var(--ease-out); }
    .js .finding.is-in .finding-rec { opacity: 1; translate: none; transition-delay: calc(4 * var(--step)); }
  }

  /* Industries page: the home page's trade cards, larger, with three points each.
     The trade's name is the link; it stretches over the card so the whole card is clickable. */
  .trades-lg { margin-top: var(--s-9); }
  @media (min-width: 640px) and (max-width: 799px) { .trades-lg { grid-template-columns: minmax(0, 1fr); } }
  .trades-lg .trade { display: flex; flex-direction: column; }
  .trades-lg .trade-name a { color: inherit; text-decoration: none; }
  .trades-lg .stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .trades-lg .stretch:focus-visible { outline: none; }
  .trades-lg .trade:has(.stretch:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
  .trades-lg .ticks { margin-top: var(--s-2); }
  .trades-lg .trade-more { margin-top: auto; padding-top: var(--s-4); text-decoration: none; }
  .trade-other { grid-column: 1 / -1; border-style: dashed; border-color: var(--sky-ink); background: var(--mist); }
  .trade-other .trade-team { margin-top: var(--s-2); max-width: var(--measure); }
  @media (min-width: 800px) {
    .trades-lg .trade-other { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
    .trade-other .trade-icon { margin-bottom: 0; }
    .trades-lg .trade-other .trade-more { margin-top: 0; padding-top: 0; }
  }

  /* Two ways to work after the audit (implementation page) */
  .ways { display: grid; gap: var(--s-5); list-style: none; margin: var(--s-9) 0 0; padding: 0; }
  @media (min-width: 900px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .way { padding: var(--pad-way); border-radius: var(--r-card); background: var(--mist); }
  .way-dark { background: radial-gradient(70% 90% at 100% 0%, rgb(36 73 106 / 0.9), rgb(36 73 106 / 0) 70%), var(--navy); color: var(--on-navy); }
  .way-dark .way-icon { background: var(--sky-strong); }
  .way h3 { margin-top: var(--s-5); font: 500 var(--fs-h3)/1.2 var(--serif); letter-spacing: var(--track-head); }
  .way p { margin-top: var(--s-3); color: var(--ink-soft); }
  .way-dark p, .way-dark .ticks li { color: var(--on-navy-soft); }
  .way-dark .ticks .icon { color: var(--sky-strong); }
  .after-note { margin-top: var(--s-6); font: italic 400 var(--fs-lead)/1.4 var(--serif); color: var(--ink); }

  /* Footer page links */
  .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0 0 var(--s-4); padding: 0; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; }
  @media (hover: hover) { .footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; } }

  /* About: the founder's photo under the section label. The source is 256px, so it stays at a size that keeps it sharp. */
  .portrait { width: var(--portrait); height: auto; aspect-ratio: 1; margin-top: var(--s-6); border-radius: var(--r-photo); border: 1px solid var(--navy-glow); box-shadow: var(--shadow-on-navy); object-fit: cover; }

  /* A second, quieter paragraph inside a statement panel */
  .statement .statement-sub { margin-top: var(--s-5); max-width: var(--measure); font: 400 var(--fs-lead)/var(--lh-body) var(--sans); color: var(--on-navy-soft); letter-spacing: normal; }

  /* The current page in the menu keeps its underline */
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .mobile-menu a[aria-current="page"] { font-weight: 700; }

  /* One-column hero for pages without a picture (404) */
  .hero-grid.solo { grid-template-columns: minmax(0, 1fr); }
  .hero-grid.solo .hero-copy { max-width: var(--measure-wide); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    @view-transition { navigation: none; }
  }