/* ====================================================================
     1. DESIGN TOKENS
  ==================================================================== */
  :root {
    /* Colour */
    --ink:          #0F1825;
    --ink-2:        #1A2433;
    --paper:        #FFFFFF;
    --paper-2:      #F4F6F8;
    --paper-3:      #E9ECEF;
    --swyft-blue:   #1DA7E3;
    --swyft-blue-d: #1689BC;
    --swyft-blue-l: #C8E9F8;
    --line:         #E1E5EA;
    --line-ink:     #2A3445;
    --muted:        #5C6675;
    --muted-ink:    #8892A3;
    --success:      #1F8A5B;
    --alert:        #C0492C;
    --star:         #F2B01E;

    /* Type family — neutral grotesk; final family set at build via Typekit */
    --font: "trust-1a", Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: "finder", "trust-1a", sans-serif;

    /* Type scale */
    --t-0:  0.75rem;
    --t-1:  0.875rem;
    --t-2:  1rem;
    --t-3:  1.125rem;
    --t-4:  1.25rem;
    --t-5:  1.5rem;
    --t-6:  1.875rem;
    --t-7:  2.5rem;
    --t-8:  3.5rem;
    --t-9:  4.5rem;
    --t-10: 6rem;

    /* Spacing */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --space-9: 96px; --space-10: 128px;

    /* Radius + elevation */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;
    --shadow-card: 0 8px 24px -12px rgba(15, 24, 37, 0.10);
    --shadow-lift: 0 18px 48px -20px rgba(15, 24, 37, 0.22);

    /* Layout grid — mobile-first base (4 columns) */
    --col-count: 4;
    --col-gutter: 16px;
    --page-pad: 20px;
    --container-max: 100%;

    /* Brand mark (declared once, reused as background-image) */
    --bird-img: url('../img/swyft-bird.png');

    --header-h: 64px;
  }

  @media (min-width: 768px) {
    :root { --col-count: 8; --col-gutter: 24px; --page-pad: 40px; --header-h: 72px; }
  }
  @media (min-width: 1200px) {
    :root { --col-count: 12; --col-gutter: 32px; --page-pad: clamp(20px, 4vw, 80px); }
  }

  /* ====================================================================
     2. RESET / BASE
  ==================================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + var(--space-3)); }
  body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-2);
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }
  ul { list-style: none; margin: 0; padding: 0; }
  h1, h2, h3, h4, p { margin: 0; }
  address { font-style: normal; }
  .tnum { font-variant-numeric: tabular-nums; }

  :where(a, button, input, select):focus-visible {
    outline: 2px solid var(--swyft-blue);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* ====================================================================
     3. LAYOUT PRIMITIVES
  ==================================================================== */
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    gap: var(--col-gutter);
    max-width: var(--container-max);
    padding-inline: var(--page-pad);
    margin-inline: auto;
  }
  .container {
    max-width: var(--container-max);
    padding-inline: var(--page-pad);
    margin-inline: auto;
  }
  .section { padding-block: clamp(var(--space-7), 9vw, var(--space-9)); }
  .section--band { padding-block: clamp(var(--space-8), 11vw, var(--space-10)); }
  .bleed-dark { background: var(--ink); color: var(--paper); }
  .bleed-light-2 { background: var(--paper-2); }

  /* ====================================================================
     4. ELEMENTS — eyebrow, headings, buttons
  ==================================================================== */
  .eyebrow {
    display: inline-block;
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--swyft-blue);
    margin-block-end: var(--space-4);
  }
  .eyebrow--ink { color: var(--swyft-blue); }

  .h2 {
    font-family: var(--font-display);
    font-size: clamp(var(--t-7), 5vw, var(--t-8));
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
  .h2--lg { font-size: clamp(var(--t-7), 6vw, var(--t-9)); }
  .lede {
    font-size: var(--t-4);
    color: var(--muted);
    line-height: 1.5;
    max-width: 52ch;
  }
  .lede--ink { color: var(--muted-ink); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 14px 22px;
    border-radius: var(--radius);
    font-size: var(--t-2);
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn--primary { background: var(--swyft-blue); color: #fff; }
  .btn--primary:hover { background: var(--swyft-blue-d); }
  .btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(255,255,255,0.45); }
  .btn--ghost-light:hover { border-color: var(--paper); background: rgba(255,255,255,0.06); }
  .btn--ghost-ink { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn--ghost-ink:hover { border-color: var(--ink); }
  .btn--lg { padding: 18px 28px; }
  .btn--block { width: 100%; justify-content: center; }
  .btn__arrow { transition: transform .18s ease; }
  .btn:hover .btn__arrow { transform: translateX(3px); }

  /* SEO-friendly arrow link: substantive anchor text + sliding arrow */
  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--swyft-blue);
    font-weight: 600;
    font-size: var(--t-2);
  }
  .arrow-link svg { transition: transform .18s ease; }
  .arrow-link:hover svg { transform: translateX(4px); }

  /* ====================================================================
     5. IMAGE-SLOT PLACEHOLDER (§6)
        Visually quiet: dark fill, faint diagonal hairline, corner label.
  ==================================================================== */
  .img-slot {
    position: relative;
    background: var(--ink-2);
    overflow: hidden;
    isolation: isolate;
  }
  .img-slot::before { /* faint hairline diagonal stroke */
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to bottom right,
      transparent calc(50% - 0.5px),
      rgba(255,255,255,0.07) 50%,
      transparent calc(50% + 0.5px)
    );
    z-index: -1;
  }
  .img-slot__label {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: var(--space-3);
    font-size: var(--t-0);
    letter-spacing: 0.04em;
    color: var(--muted-ink);
    background: rgba(15, 24, 37, 0.55);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
  }

  /* ====================================================================
     6. HEADER  (§8.1)
  ==================================================================== */
  /* Meta strip — utility row, scrolls away with the page (not sticky), desktop only */
  .site-header__meta {
    background: var(--ink-2);
    color: var(--paper);
    font-size: var(--t-0);
  }
  .site-header__meta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
    gap: var(--space-4);
    font-weight: 500;
  }
  .site-header__meta-left {
    letter-spacing: 0.04em;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header__meta-left a:hover { color: var(--swyft-blue); }
  .site-header__meta-right { display: flex; align-items: center; gap: var(--space-4); }
  .site-header__meta-track { color: var(--paper); opacity: 0.85; }
  .site-header__meta-track:hover { opacity: 1; color: var(--swyft-blue); }
  .site-header__meta-divider { inline-size: 1px; block-size: 14px; background: var(--line-ink); flex: none; }
  .site-header__lang { display: flex; align-items: center; gap: var(--space-2); }
  .site-header__lang a { color: var(--paper); opacity: 0.85; font-weight: 600; letter-spacing: 0.04em; }
  .site-header__lang a:hover { opacity: 1; }
  .site-header__lang a.is-inactive { color: var(--muted-ink); opacity: 0.5; }
  .site-header__lang a.is-inactive:hover { opacity: 0.8; }

  /* Primary nav bar — sticky to top once the meta strip scrolls past */
  .site-header__nav-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--ink);
    color: var(--paper);
    border-block-start: 1px solid var(--line-ink);
    border-block-end: 1px solid var(--line-ink);
  }
  .site-header__nav-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 72px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
    gap: var(--space-4);
  }

  .brand { display: inline-flex; align-items: center; gap: 10px; }
  .brand__mark {
    background-image: var(--bird-img);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex: none;
  }
  .brand__mark--sm { inline-size: 30px; block-size: 32px; }
  .brand__mark--lg { inline-size: 48px; block-size: 50px; }
  .brand__word {
    color: var(--paper);
    font-weight: 700;
    font-size: var(--t-4);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .brand__word b { font-weight: 700; }

  /* Centre nav */
  .nav {
    display: none;
    gap: var(--space-6);
    align-items: center;
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
  .nav > a, .nav > .nav-dropdown > a {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--paper);
    opacity: 0.85;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .15s ease;
  }
  .nav > a:hover, .nav > .nav-dropdown > a:hover { opacity: 1; }

  /* Services dropdown */
  .nav-dropdown {
    position: relative;
  }
  .nav-dropdown__toggle {
    display: inline-flex; align-items: center; gap: 5px;
    cursor: default;
  }
  .nav-dropdown__chevron {
    display: inline-block; inline-size: 6px; block-size: 6px;
    flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.6;
    transition: transform .2s ease;
  }
  .nav-dropdown:hover .nav-dropdown__chevron,
  .nav-dropdown:focus-within .nav-dropdown__chevron { transform: rotate(-135deg) translateY(-2px); opacity: 0.85; }
  .nav-dropdown__panel {
    position: absolute; inset-block-start: 100%; inset-inline-start: 50%;
    /* padding-block-start bridges the gap so the cursor never leaves the hover zone */
    padding-block-start: 10px;
    transform: translateX(-50%);
    min-inline-size: 220px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s, transform .18s ease;
    transform: translateX(-50%) translateY(-6px);
  }
  .nav-dropdown:hover .nav-dropdown__panel,
  .nav-dropdown:focus-within .nav-dropdown__panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .18s ease, visibility 0s, transform .18s ease;
  }
  /* The visible card is a child so it doesn't interfere with the hover bridge */
  .nav-dropdown__panel-inner {
    background: var(--ink-2);
    border: 1px solid var(--line-ink);
    border-radius: var(--radius-lg);
    padding: var(--space-3) 0;
    box-shadow: var(--shadow-lift);
  }
  .nav-dropdown__panel a {
    display: block;
    padding: var(--space-3) var(--space-5);
    font-size: var(--t-1);
    font-weight: 500;
    color: var(--paper);
    opacity: 0.8;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: opacity .12s ease, color .12s ease;
  }
  .nav-dropdown__panel a:hover { opacity: 1; color: var(--swyft-blue); }

  /* Right cluster */
  .nav-bar__actions { display: flex; align-items: center; gap: var(--space-3); }
  .nav-bar__cta { display: none; }
  .nav-bar__call {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px;
    color: var(--paper); opacity: 0.9;
  }
  .nav-bar__call:hover { opacity: 1; color: var(--swyft-blue); }

  /* Hamburger toggle (mobile) */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; padding: 0;
    background: transparent; border: none; cursor: pointer; color: currentColor;
  }
  .nav-toggle__box { position: relative; display: block; inline-size: 24px; block-size: 16px; }
  .nav-toggle__bar {
    position: absolute; inset-inline: 0; block-size: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease;
  }
  .nav-toggle__bar:nth-child(1) { inset-block-start: 0; }
  .nav-toggle__bar:nth-child(2) { inset-block-start: 7px; }
  .nav-toggle__bar:nth-child(3) { inset-block-start: 14px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (min-width: 1200px) {
    .nav { display: flex; }
    .nav-bar__cta { display: inline-flex; }
    .nav-bar__call, .nav-toggle { display: none; }
  }
  @media (max-width: 1199px) {
    .site-header__meta { display: none; }
    .site-header__nav-bar { border-block-start: none; }
  }
  @media (max-width: 767px) {
    .site-header__nav-inner { min-height: 60px; }
  }

  /* ====================================================================
     6b. MOBILE NAV DRAWER  — slides from the right, blue page overlay
  ==================================================================== */
  .nav-overlay {
    position: fixed; inset: 0; z-index: 280;
    background: rgba(17, 110, 160, 0.46);
    backdrop-filter: blur(4px) saturate(1.12);
    -webkit-backdrop-filter: blur(4px) saturate(1.12);
    opacity: 0; visibility: hidden;
    transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 400ms;
  }
  .nav-overlay.is-open {
    opacity: 1; visibility: visible;
    transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }

  .mobile-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 300;
    inline-size: min(86vw, 380px);
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7);
    padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-7);
    background: var(--ink);
    color: var(--paper);
    box-shadow: -34px 0 64px -34px rgba(0, 0, 0, 0.65);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 480ms;
  }
  .mobile-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  .mobile-drawer__nav { display: flex; flex-direction: column; }
  .mobile-drawer__link {
    display: block;
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--line-ink);
    color: var(--paper);
    font-size: var(--t-4);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mobile-drawer__link:hover { color: var(--swyft-blue); }
  .mobile-drawer__sub { display: flex; flex-direction: column; }
  .mobile-drawer__sub-link {
    display: block;
    padding: var(--space-2) var(--space-5);
    border-block-end: 1px solid var(--line-ink);
    color: rgba(255,255,255,0.72);
    font-size: var(--t-3);
    font-weight: 500;
    transition: color .12s ease;
  }
  .mobile-drawer__sub-link:hover { color: var(--swyft-blue); }
  .mobile-drawer__foot { display: grid; gap: var(--space-5); }
  .mobile-drawer__phone {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--paper); font-size: var(--t-3); font-weight: 600;
  }
  .mobile-drawer__phone svg { color: var(--swyft-blue); flex: none; }
  .mobile-drawer__cta { width: 100%; justify-content: center; }
  .mobile-drawer__langs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .mobile-drawer__langs a {
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--line-ink);
    color: rgba(255, 255, 255, 0.78); font-size: var(--t-1); font-weight: 600;
  }
  .mobile-drawer__langs a:hover { color: var(--paper); border-color: var(--swyft-blue); }
  .mobile-drawer__langs a[aria-current="true"] { color: var(--swyft-blue); border-color: var(--swyft-blue); }

  body.nav-open { overflow: hidden; }
  /* keep the sticky bar (and its morphing hamburger) above the drawer as the close control */
  body.nav-open .site-header__nav-bar { z-index: 320; }

  /* ====================================================================
     7. HERO  (§8.2) — full-bleed dark, image fills viewport area
  ==================================================================== */
  .hero {
    position: relative;
    /* client revision 2026-06-11: content-driven height (was min 70vh/85vh)
       — kills the blank band between the chips and the scroll indicator */
    display: flex;
    align-items: flex-start;
    background: var(--ink);
    overflow: hidden;
    isolation: isolate;
  }
  @media (min-width: 768px) { .hero { align-items: center; } }

  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__media-pic { display: block; block-size: 100%; }
  .hero__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /* gradient overlay for text contrast over the hero photo */
  .hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
      135deg,
      rgba(15, 24, 37, 0.86) 0%,
      rgba(15, 24, 37, 0.60) 55%,
      rgba(15, 24, 37, 0.74) 100%
    );
    z-index: 1;
  }
  @media (max-width: 767px) {
    .hero__overlay {
      background: linear-gradient(
        180deg,
        rgba(15, 24, 37, 0.72) 0%,
        rgba(15, 24, 37, 0.88) 100%
      );
    }
  }
  /* abstract faceted brand accent (decorative, allowed §6.3) */
  .hero__accent {
    position: absolute;
    inset-block-start: -8%;
    inset-inline-end: -6%;
    inline-size: min(46vw, 520px);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
  }
  .hero__inner {
    position: relative;
    z-index: 2;
    /* client revision 2026-06-11: bottom padding reserves just enough room
       for the scroll indicator instead of a viewport-coupled blank band */
    padding-block-start: clamp(var(--space-9), 16vh, var(--space-10));
    padding-block-end: var(--space-10);
    text-align: center;
    margin-inline: auto;
    width: 100%;
  }
  @media (min-width: 768px) {
    .hero { align-items: flex-start; }
    .hero__inner { padding-block-start: clamp(var(--space-10), 22vh, 220px); }
  }
  .hero__eyebrow {
    display: inline-block;
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 246, 248, 0.62);
    margin-block-end: var(--space-5);
  }
  .hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--paper);
    max-inline-size: 16ch;
    margin-inline: auto;
  }
  .hero__sub {
    margin-block-start: var(--space-5);
    margin-inline: auto;
    font-size: var(--t-4);
    line-height: 1.45;
    color: rgba(255,255,255,0.8);
    max-inline-size: 52ch;
  }
  .hero__actions {
    margin-block-start: var(--space-5);
    display: flex;
    justify-content: center;
  }
  .hero__rates-btn {
    box-shadow: 0 18px 44px -30px rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Hero quote bar = primary CTA. Mirrors the dedicated quote section, dropped on dark. */
  .hero__quote {
    margin-block-start: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__quote-card {
    inline-size: 100%;
    max-inline-size: 760px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -28px rgba(8, 18, 30, 0.6);
    padding: var(--space-4);
    text-align: start;
  }
  .hero__track-link {
    font-size: var(--t-1);
    color: var(--paper);
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-block-start: var(--space-3);
  }
  .hero__track-link:hover { opacity: 1; }

  .hero__chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    color: rgba(255,255,255,0.7);
    font-size: clamp(0.62rem, 2.6vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .hero__chips span:not(.hero__dot) { white-space: nowrap; }
  .hero__dot { opacity: 0.5; }

  /* Scroll indicator — a deliberate "Scroll" label + gently bobbing arrow */
  .hero__scroll {
    position: absolute;
    inset-block-end: var(--space-6); /* client revision 2026-06-11: tighter */
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--paper);
    opacity: 0.75;
    font-size: var(--t-0);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
    z-index: 3;
    transition: opacity 200ms ease;
  }
  .hero__scroll:hover { opacity: 1; }
  .hero__scroll-arrow {
    inline-size: 18px;
    block-size: 24px;
    animation: hero-scroll-bob 2s ease-in-out infinite;
  }
  @keyframes hero-scroll-bob {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(6px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__scroll-arrow { animation: none; }
  }

  /* ====================================================================
     8. STAT COUNTERS  (§8.3)
  ==================================================================== */
  .stats { background: var(--paper); }
  .stats__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-5);
    text-align: center;
  }
  @media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
  .stat__n {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stat__label {
    display: block;
    margin-block-start: var(--space-3);
    font-size: var(--t-2);
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
  }

  /* ====================================================================
     9. SERVICES  (§8.4) — three uniform dark cards
  ==================================================================== */
  .services__head { grid-column: 1 / -1; max-inline-size: 40ch; margin-block-end: var(--space-7); }
  .services__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  @media (min-width: 768px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

  .service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--ink-2);
    min-block-size: 380px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover {
    border-color: var(--swyft-blue);
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -28px rgba(29, 167, 227, 0.45);
  }
  .service-card__icon {
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    background: rgba(29, 167, 227, 0.12);
    border-radius: var(--radius);
    color: var(--swyft-blue);
  }
  .service-card__icon svg { inline-size: 24px; block-size: 24px; }
  .service-card__eyebrow {
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--swyft-blue);
  }
  .service-card__title { font-size: var(--t-5); font-weight: 700; line-height: 1.15; }
  .service-card__desc { color: var(--muted-ink); font-size: var(--t-2); }
  .service-card__list { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-3); }
  .service-card__item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    color: rgba(255,255,255,0.86); font-size: var(--t-2);
  }
  .service-card__bullet {
    flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%;
    background: var(--swyft-blue); margin-block-start: 9px;
  }
  .service-card__foot { margin-block-start: auto; padding-block-start: var(--space-4); }

  /* ====================================================================
     10. MISSION BAND  (§8.5) — full-bleed dark
  ==================================================================== */
  .mission { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
  .mission__bg { position: absolute; inset: 0; opacity: 0.22; }
  .mission__bg .img-slot { position: absolute; inset: 0; }
  .mission__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,24,37,0.85), rgba(15,24,37,0.95));
  }
  .mission__inner { position: relative; z-index: 1; }
  .mission__head { grid-column: 1 / -1; text-align: left; max-inline-size: 60ch; }
  @media (min-width: 768px) { .mission__head { grid-column: 1 / span 7; } }
  .mission__head .lede { margin-block-start: var(--space-4); max-inline-size: 48ch; }
  .proof__logos-title { font-size: clamp(var(--t-6), 4vw, var(--t-7)); }
  .mission__features {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    margin-block-start: var(--space-9);
  }
  @media (min-width: 768px) { .mission__features { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
  .feature { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
  .feature__icon {
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    background: rgba(29, 167, 227, 0.12);
    border-radius: var(--radius);
    color: var(--swyft-blue);
  }
  .feature__icon svg { inline-size: 24px; block-size: 24px; }
  .feature__title { font-size: var(--t-4); font-weight: 600; color: var(--paper); line-height: 1.25; }
  .feature__desc { color: var(--muted-ink); font-size: var(--t-2); max-inline-size: 34ch; }

  /* ====================================================================
     11. QUOTE STARTER  (§8.6)
  ==================================================================== */
  .quote { background: var(--paper); }
  .quote__head { grid-column: 1 / -1; text-align: center; max-inline-size: 46ch; margin-inline: auto; }
  .quote__head .lede { margin-inline: auto; margin-block-start: var(--space-4); }
  .quote__card {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: 100%;
    max-inline-size: 880px;
    margin-block-start: var(--space-7);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
  }
  /* ── Homepage quote form — always single-row at ≥ 880px viewport ── */
  .quote-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  @media (min-width: 880px) {
    .quote-form { grid-template-columns: 1fr 1fr 1.2fr auto; gap: 0; align-items: stretch; }
  }
  .quote-field { display: flex; flex-direction: column; gap: 6px; padding-inline: var(--space-4); }
  .quote-field:first-child { padding-inline-start: var(--space-2); }
  @media (min-width: 880px) {
    .quote-field + .quote-field { border-inline-start: 1px solid var(--line); }
  }
  .quote-field__label {
    font-size: var(--t-0); font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted);
  }
  .quote-field__control {
    border: none; background: transparent; padding: 0;
    font-size: var(--t-3); font-weight: 500; color: var(--ink);
    inline-size: 100%; min-height: 30px;
  }
  .quote-field__control::placeholder { color: #9aa4b2; font-weight: 400; }
  select.quote-field__control { appearance: none; cursor: pointer; }
  .quote-form__submit { padding-inline: var(--space-4); display: flex; align-items: stretch; }
  @media (min-width: 880px) { .quote-form__submit { padding-inline: 0; padding-inline-start: var(--space-4); } }
  .quote-form__submit .btn { width: 100%; }
  @media (max-width: 879px) {
    .quote-form .quote-field:nth-child(3) { grid-column: 1 / -1; }
    .quote-form .quote-form__submit { grid-column: 1 / -1; padding-inline: var(--space-2); margin-block-start: var(--space-2); }
  }

  /* ── Sidebar / narrow-context quote form — stacked layout always ── */
  .quote-form--sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
  .quote-form--sidebar .quote-field,
  .quote-form--sidebar .quote-field:first-child {
    padding-inline: 0;
    border-inline-start: none !important;
    border-block-end: 1px solid var(--line);
    padding-block-end: var(--space-3);
  }
  .quote-form--sidebar .quote-field:nth-child(3) { grid-column: 1 / -1; }
  .quote-form--sidebar .quote-form__submit {
    grid-column: 1 / -1;
    padding-inline: 0;
    margin-block-start: var(--space-1);
    display: flex; align-items: stretch;
  }
  .quote-form--sidebar .quote-form__submit .btn { width: 100%; }
  .quote__signin { grid-column: 1 / -1; text-align: center; margin-block-start: var(--space-5); }
  .quote__signin a { color: var(--muted); font-size: var(--t-2); font-weight: 500; }
  .quote__signin a:hover { color: var(--swyft-blue); }

  /* ====================================================================
     12. LOGOS + REVIEWS  (§8.7)
  ==================================================================== */
  .proof { background: var(--paper-2); }
  .proof__logos-head { grid-column: 1 / -1; text-align: center; margin-block-end: var(--space-7); }
  .proof__logos-head .eyebrow { display: block; }
  .logo-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
    align-items: center;
  }
  @media (min-width: 768px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1200px) { .logo-grid { grid-template-columns: repeat(5, 1fr); } }
  .logo-grid__item {
    display: flex; align-items: center; justify-content: center;
    block-size: clamp(64px, 7vw, 86px);
    color: var(--ink);
    opacity: 0.6;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: var(--t-3);
    text-align: center;
    transition: opacity .2s ease;
  }
  .logo-grid__link {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    color: inherit;
  }
  .logo-grid__item img {
    display: block;
    inline-size: 100%;
    max-inline-size: 190px;
    max-block-size: 78px;
    object-fit: contain;
    filter: grayscale(1);
  }
  .logo-grid__item .logo-grid__img--asset { filter: none; }
  .logo-grid__item:hover { opacity: 0.9; }

  .proof__divider {
    grid-column: 1 / -1;
    block-size: 1px; background: var(--line);
    margin-block: clamp(var(--space-7), 8vw, var(--space-9));
  }

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

  /* Google trust badge — single centered row */
  .reviews__badge {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: var(--space-3);
    margin-block-end: clamp(var(--space-7), 7vw, var(--space-8));
  }
  .reviews__badge-g { flex: none; display: block; }
  .reviews__badge-text { font-weight: 600; color: var(--ink); font-size: var(--t-2); }
  .reviews__badge-stars { color: var(--star); letter-spacing: 1px; font-size: var(--t-2); }
  .reviews__badge-count { color: var(--muted); font-size: var(--t-1); }

  /* Featured pulled quote — bracketed by hairlines, editorial register */
  .reviews__featured {
    max-inline-size: 760px;
    margin-inline: auto;
    text-align: center;
    border-block: 1px solid var(--line);
    padding-block: clamp(var(--space-6), 6vw, var(--space-8));
  }
  .reviews__quote {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .reviews__quote-mark {
    color: var(--swyft-blue);
    font-weight: 700;
    margin-inline-end: 0.12em;
  }
  .reviews__quote-mark--close { margin-inline: 0.12em 0; }
  .reviews__attr {
    margin-block-start: var(--space-5);
    font-size: var(--t-2);
  }
  .reviews__attr-name { font-weight: 600; color: var(--ink); }
  .reviews__attr-meta { font-weight: 400; color: var(--muted); }

  /* Three supporting mini-quotes — no avatars, no per-card source */
  .reviews__mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-block-start: clamp(var(--space-7), 7vw, var(--space-8));
  }
  @media (min-width: 768px) { .reviews__mini { grid-template-columns: repeat(3, 1fr); } }
  .mini-quote {
    display: flex; flex-direction: column; gap: 6px;
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--line);
  }
  .mini-quote__name { font-weight: 600; font-size: var(--t-2); color: var(--ink); }
  .mini-quote__stars { color: var(--star); letter-spacing: 1px; font-size: var(--t-1); }
  .mini-quote__body {
    font-size: var(--t-2); color: var(--muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Link out to the full Google profile */
  .reviews__all {
    margin-block-start: var(--space-7);
    text-align: end;
  }
  .reviews__all-link {
    font-weight: 600; font-size: var(--t-2);
    color: var(--swyft-blue);
  }
  .reviews__all-link:hover { color: var(--swyft-blue-d); }
  @media (max-width: 767px) { .reviews__all { text-align: center; } }

  /* ====================================================================
     13. FINAL CTA  (§8.8) — full-bleed dark
  ==================================================================== */
  .final-cta { background: #eaf6fc; color: var(--ink); text-align: center; }
  .final-cta__inner { grid-column: 1 / -1; max-inline-size: 620px; margin-inline: auto; }
  .final-cta__inner h2 { max-inline-size: 22ch; margin-inline: auto; }
  .final-cta .lede { color: var(--muted); margin-inline: auto; margin-block-start: var(--space-4); }
  .final-cta__row {
    display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center;
    margin-block-start: var(--space-7);
  }
  @media (max-width: 479px) {
    .final-cta__row { flex-direction: column; }
    .final-cta__row .btn { width: 100%; justify-content: center; }
  }

  /* ====================================================================
     14. FOOTER  (§8.9)
  ==================================================================== */
  /* client revision 2026-06-11: footer compacted — tighter paddings/gaps,
     wordmark scaled down, mobile nav in two columns. */
  .site-footer {
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden; /* contain the wordmark bleed */
    padding-block-start: clamp(var(--space-5), 4vw, var(--space-7));
    padding-block-end: var(--space-4);
  }
  .site-footer .grid { position: relative; z-index: 2; }

  .site-footer__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-5) var(--col-gutter);
    align-items: start;
  }

  .site-footer__brand {
    grid-column: 1 / span 5;            /* tight editorial block on the left */
    display: grid;
    gap: var(--space-3);
    align-self: start;
  }
  .site-footer__statement {
    font-size: var(--t-1);
    line-height: 1.5;
    max-inline-size: 36ch;
    color: var(--paper);
  }
  .site-footer__cta {
    justify-self: start;
    font-size: var(--t-2);
    font-weight: 600;
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
  }
  .site-footer__cta:hover { color: var(--swyft-blue); }

  .site-footer__nav-row {
    grid-column: 7 / span 6;            /* nav begins at the grid centre */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--col-gutter);
  }
  .site-footer__nav-row--two { margin-block-start: var(--space-4); }

  .site-footer__col h3 {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-ink);
    margin-block-end: var(--space-4);
  }
  .site-footer__col a {
    display: block;
    font-size: var(--t-2);
    color: rgba(255, 255, 255, 0.82);
    padding-block: 5px;
  }
  .site-footer__col a:hover { color: var(--swyft-blue); }
  .site-footer__contact {
    display: flex; flex-direction: column; gap: var(--space-2);
    font-size: var(--t-2); color: rgba(255, 255, 255, 0.82);
  }
  .site-footer__contact a { padding-block: 0; }
  .site-footer__contact span { color: var(--muted-ink); line-height: 1.5; padding-block-start: 4px; }
  .site-footer__contact-link {
    display: inline-block;
    margin-block-start: var(--space-4);
    font-size: var(--t-2); font-weight: 600;
    color: var(--swyft-blue);
  }
  .site-footer__contact-link:hover { color: var(--paper); }

  /* Compact wordmark sits with the brand statement instead of dominating the footer. */
  .site-footer__wordmark {
    inline-size: min(180px, 46vw);
    block-size: auto;
    display: block;
    margin-block-start: var(--space-1);
    fill: rgba(29, 167, 227, 0.72);
    overflow: visible;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
    margin-block-start: var(--space-4);
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    align-items: center; justify-content: space-between;
    font-size: var(--t-0); color: var(--muted-ink);
  }
  .site-footer__legal-links { display: flex; gap: var(--space-5); }
  .site-footer__legal-links a { color: var(--muted-ink); }
  .site-footer__legal-links a:hover { color: var(--paper); }

  @media (max-width: 1199px) {
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__nav-row,
    .site-footer__nav-row--two { grid-column: 1 / -1; }
    .site-footer__wordmark { max-inline-size: 180px; }
  }
  @media (max-width: 767px) {
    .site-footer__nav-row,
    .site-footer__nav-row--two { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--col-gutter); }
    .site-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  }

  /* ====================================================================
     15. SCROLL REVEAL — one quiet opacity+translate per section (§7)
  ==================================================================== */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero__scroll-arrow { animation: none; }
    .mobile-drawer, .nav-overlay, .nav-toggle__bar { transition: none; }
  }

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

  /* ====================================================================
     16. WORDPRESS EXTRAS — additions for the WP port only; everything
         above this block is the reference stylesheet, verbatim.
  ==================================================================== */
  /* brand_word is now a settings field rendered with esc_html, so the
     reference's   is replaced by nowrap. */
  .brand__word { white-space: nowrap; }

  /* A media-library logo replaces the baked-in bird (settings: Globals → Logo). */
  .brand__mark--custom { background-image: none; }
  .brand__mark--custom img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* Sticky header sits below the admin bar for logged-in users. */
  body.admin-bar .site-header__nav-bar {
    inset-block-start: var(--wp-admin--admin-bar-height, 32px);
  }

  .skip-link {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link:focus {
    width: auto; height: auto; margin: 0; clip: auto;
    position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
    z-index: 400;
    padding: var(--space-2) var(--space-3);
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
  }

  /* ====================================================================
     17. BUSINESS PRICING BAND — client addition (2026-06-11), composed
         from the existing vocabulary; collapsed until opened.
  ==================================================================== */
  .biz-pricing { background: var(--paper-2); }
  .biz-pricing__head {
    grid-column: 1 / -1;
    text-align: center;
    max-inline-size: 52ch;
    margin-inline: auto;
  }
  .biz-pricing__head .lede { margin-inline: auto; margin-block-start: var(--space-4); }
  .biz-pricing__toggle { margin-block-start: var(--space-5); }
  .biz-pricing__chevron svg { transition: transform 0.25s ease; }
  .biz-pricing__toggle[aria-expanded="true"] .biz-pricing__chevron svg { transform: rotate(180deg); }

  .biz-pricing__panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
  }
  .biz-pricing__panel.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.35s ease, visibility 0s;
  }
  .biz-pricing__panel-inner { overflow: hidden; min-block-size: 0; }
  .biz-pricing__card {
    justify-self: center;
    inline-size: 100%;
    max-inline-size: 880px;
    margin-block-start: var(--space-7);
    margin-inline: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
  }
  .biz-pricing__note {
    margin-block-start: var(--space-4);
    font-size: var(--t-1);
    color: var(--muted);
  }

  /* Business-pricing form: 2-column compact layout (scoped to this card so it
     never touches other Fluent forms, e.g. Contact). Fluent wraps the field
     groups (.ff-el-group) in a <fieldset> inside the form, so the grid goes on
     that fieldset. Section headings, textareas, the checkbox, the conditional
     provider field, and the submit span full width. */
  @media (min-width: 700px) {
    .biz-pricing__card form.frm-fluent-form > fieldset {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-5);
      row-gap: var(--space-4);
      align-items: start;
    }
    /* Each field group is one column by default */
    .biz-pricing__card .ff-el-group { margin: 0; }
    /* Full-width rows: section breaks, any group with a textarea,
       the checkbox group, the conditional field, and the submit button */
    .biz-pricing__card .ff-el-section-break,
    .biz-pricing__card .ff-el-group:has(textarea),
    .biz-pricing__card .ff-el-group:has(.ff-el-form-check),
    .biz-pricing__card .ff-el-group.has-conditions,
    .biz-pricing__card .ff_submit_btn_wrapper {
      grid-column: 1 / -1;
    }
    /* Tighten the section-break spacing inside the denser grid */
    .biz-pricing__card .ff-el-section-break { margin-block: var(--space-2) 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .biz-pricing__panel, .biz-pricing__chevron svg { transition: none; }
  }

  /* Fluent Forms skin — harmonize plugin markup with the design system. */
  .biz-pricing .fluentform { font-family: var(--font); }
  .biz-pricing .ff-el-section-break {
    border-block-end: 1px solid var(--line);
    margin-block: var(--space-5) var(--space-4);
    padding-block-end: var(--space-2);
  }
  .biz-pricing .ff-el-section-break hr { display: none; }
  .biz-pricing .ff-el-section-title {
    font-size: var(--t-3);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .biz-pricing .ff-el-group:first-child .ff-el-section-break { margin-block-start: 0; }
  .biz-pricing .ff-el-input--label label {
    font-size: var(--t-0);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .biz-pricing .ff-el-form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--t-2);
    padding: 10px 12px;
  }
  .biz-pricing .ff-el-form-control:focus {
    border-color: var(--swyft-blue);
    box-shadow: 0 0 0 3px var(--swyft-blue-l);
    outline: none;
  }
  .biz-pricing .ff-el-form-check-label { color: var(--ink); font-size: var(--t-2); }
  .biz-pricing .ff-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--swyft-blue);
    color: var(--paper);
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px 22px;
    font-family: var(--font);
    font-size: var(--t-2);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .biz-pricing .ff-btn-submit:hover { background: var(--swyft-blue-d); }
  .biz-pricing .ff-message-success {
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--success);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    color: var(--ink);
  }

  /* ====================================================================
     INTERIOR TEMPLATES (interior-templates-spec.md)
     Page-header band, .prose, hub/service/service-area, contact, faq, blog.
     Composes from the homepage vocabulary — no new tokens.
  ==================================================================== */

  /* --- small heading utility (sub-h2, used inside interior sections) --- */
  .h3 {
    font-family: var(--font-display);
    font-size: clamp(var(--t-5), 3.2vw, var(--t-6));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  /* ---------- Page-header band ---------- */
  .page-header {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    isolation: isolate;
  }
  .page-header__bg { position: absolute; inset: 0; z-index: -2; }
  .page-header__bg img { width: 100%; height: 100%; object-fit: cover; }
  .page-header__veil {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(15,24,37,0.72), rgba(15,24,37,0.88));
  }
  .page-header__content { grid-column: 1 / -1; max-inline-size: 60ch; }
  @media (min-width: 1200px) { .page-header__content { grid-column: 1 / span 9; } }
  .page-header__title { margin-block-start: var(--space-2); }
  .page-header__lede { margin-block-start: var(--space-4); max-inline-size: 56ch; }

  /* Service hero icon — lives in the right-hand whitespace, vertically centred,
     large and white. The content column narrows to make room on desktop. */
  .page-header__icon { display: inline-flex; color: #fff; }
  .page-header__aside {
    grid-column: 1 / -1;
    display: none;                 /* hidden on small screens (no room) */
    align-items: center; justify-content: flex-end;
  }
  .page-header__icon-svg { height: 56px; width: auto; }
  @media (min-width: 900px) {
    .page-header__inner--has-aside { align-items: center; }
    .page-header__inner--has-aside .page-header__content { grid-column: 1 / span 7; }
    .page-header__inner--has-aside .page-header__aside {
      display: flex; grid-column: 9 / -1;
    }
    .page-header__inner--has-aside .page-header__icon-svg { height: clamp(120px, 16vw, 200px); }
    .page-header__icon { opacity: .92; }
  }

  /* ---------- .prose — editor content typography ---------- */
  .prose { color: var(--ink); font-size: var(--t-3); line-height: 1.7; }
  .prose > * + * { margin-block-start: var(--space-5); }
  .prose h2 {
    font-family: var(--font-display);
    font-size: clamp(var(--t-6), 3vw, var(--t-7));
    font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
    margin-block-start: var(--space-7);
  }
  .prose h3 {
    font-family: var(--font-display);
    font-size: var(--t-5); font-weight: 700; line-height: 1.2;
    margin-block-start: var(--space-6);
  }
  .prose h4 { font-size: var(--t-4); font-weight: 700; margin-block-start: var(--space-5); }
  .prose p { color: var(--muted); }
  .prose a { color: var(--swyft-blue); text-decoration: underline; text-underline-offset: 2px; }
  .prose a:hover { color: var(--swyft-blue-d); }
  .prose strong { color: var(--ink); font-weight: 700; }
  .prose ul, .prose ol { padding-inline-start: var(--space-6); color: var(--muted); }
  .prose li + li { margin-block-start: var(--space-2); }
  .prose ul { list-style: none; padding-inline-start: 0; }
  .prose ul > li { position: relative; padding-inline-start: var(--space-5); }
  .prose ul > li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
    inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--swyft-blue);
  }
  .prose ol { list-style: decimal; }
  .prose blockquote {
    border-inline-start: 3px solid var(--swyft-blue);
    padding-inline-start: var(--space-5);
    color: var(--ink); font-size: var(--t-4); font-style: italic;
  }
  .prose img { border-radius: var(--radius-lg); max-inline-size: 100%; height: auto; }
  .prose figure img { width: 100%; }
  .prose figcaption { font-size: var(--t-1); color: var(--muted); margin-block-start: var(--space-2); text-align: center; }
  .prose hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-7); }
  .prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em; background: var(--paper-2); padding: 2px 6px; border-radius: var(--radius-sm);
  }
  .prose pre { background: var(--ink); color: var(--paper); padding: var(--space-5); border-radius: var(--radius); overflow: auto; }
  .prose pre code { background: transparent; padding: 0; color: inherit; }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
  .prose th, .prose td { text-align: start; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); }
  .prose thead th { background: var(--paper-2); font-weight: 700; color: var(--ink); }
  .prose .wp-block-button__link, .prose .wp-element-button {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 14px 22px; border-radius: var(--radius);
    background: var(--swyft-blue); color: #fff; font-weight: 600; text-decoration: none;
  }
  .prose .wp-block-button__link:hover { background: var(--swyft-blue-d); }

  /* Centre the default prose column on one-off pages + posts */
  .page-body .grid > .prose,
  .post-single__content { grid-column: 1 / -1; max-inline-size: 72ch; margin-inline: auto; }
  /* FAQ shares the Legal two-column layout (.legal__index + .legal__content);
     no extra column rules needed — see the .legal__* block below. */

  /* ---------- Legal pages (Privacy / Terms): sticky index + prose ---------- */
  /* Mobile-first: both columns stack full-width; index sits above content. */
  .legal__index { grid-column: 1 / -1; margin-block-end: var(--space-6); }
  .legal__content { grid-column: 1 / -1; max-inline-size: 72ch; }

  .legal__index-title {
    font-size: var(--t-1); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    margin-block-end: var(--space-4);
  }
  .legal__index-list { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--line); }
  .legal__index-list li { margin: 0; }
  .legal__index-list a {
    display: block; padding: var(--space-2) var(--space-4);
    margin-inline-start: -2px; border-inline-start: 2px solid transparent;
    color: var(--muted); text-decoration: none; font-size: var(--t-2); line-height: 1.4;
    transition: color .15s ease, border-color .15s ease;
  }
  .legal__index-list a:hover { color: var(--ink); }
  .legal__index-list a.is-active {
    color: var(--swyft-blue); border-inline-start-color: var(--swyft-blue); font-weight: 600;
  }

  /* Tablet+ : two columns, index becomes a sticky rail. */
  @media (min-width: 768px) {
    .legal__index { grid-column: 1 / span 3; margin-block-end: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
    .legal__content { grid-column: 4 / -1; }
  }
  /* Desktop 12-grid : tighter index, content begins at column 5. */
  @media (min-width: 1200px) {
    .legal__index { grid-column: 1 / span 3; }
    .legal__content { grid-column: 5 / span 8; }
  }

  /* ---------- Hub (child-page grid) ---------- */
  .hub__intro { grid-column: 1 / -1; max-inline-size: 72ch; margin-inline: auto; margin-block-end: var(--space-7); }
  .hub__grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  }
  @media (min-width: 768px) { .hub__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .hub__grid { grid-template-columns: repeat(3, 1fr); } }
  .hub-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .hub-card:hover { border-color: var(--swyft-blue); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  /* Large, free-standing service icon (like the reference sheet) — no box. */
  .hub-card__icon-wrap {
    display: inline-flex; align-items: center;
    color: var(--ink);
    margin-block-end: var(--space-2);
    transition: color .2s ease;
  }
  .hub-card__icon { height: 60px; width: auto; }
  .hub-card:hover .hub-card__icon-wrap { color: var(--swyft-blue); }
  .hub-card__title { font-family: var(--font-display); font-size: var(--t-5); font-weight: 700; line-height: 1.15; color: var(--ink); }
  .hub-card__desc { color: var(--muted); font-size: var(--t-2); }
  .hub-card__more { margin-block-start: auto; padding-block-start: var(--space-3); }

  /* ---------- "Explore more" related-links band (site-wide interlinking) ---------- */
  .related-links__head {
    grid-column: 1 / -1; max-inline-size: 60ch; margin-block-end: var(--space-7);
  }
  .related-links__head .h2 { margin-block-start: var(--space-2); }
  .related-links__grid {
    grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  }
  @media (min-width: 600px) { .related-links__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .related-links__grid { grid-template-columns: repeat(3, 1fr); } }
  .related-links__card {
    display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
    padding: var(--space-6);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .related-links__card:hover { border-color: var(--swyft-blue); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .related-links__card-title { font-family: var(--font-display); font-size: var(--t-4); font-weight: 700; color: var(--ink); }
  .related-links__card-desc { color: var(--muted); font-size: var(--t-2); }
  .related-links__card-more { margin-block-start: auto; padding-block-start: var(--space-3); }

  /* ---------- Service + Service-area (main + aside) ---------- */
  .service .grid, .service-area .grid { align-items: start; row-gap: var(--space-8); }
  .service__main, .service-area__main { grid-column: 1 / -1; }
  .service__aside, .service-area__map { grid-column: 1 / -1; }
  .service__siblings, .service-area__siblings { grid-column: 1 / -1; }
  @media (min-width: 1200px) {
    .service__main, .service-area__main { grid-column: 1 / span 7; }
    .service__aside, .service-area__map { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 24px); }
  }
  .service__features { margin-block-start: var(--space-7); }
  .feature-list { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-4); }
  .feature-list__item { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink); font-size: var(--t-3); }
  .feature-list__bullet { flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--swyft-blue); margin-block-start: 10px; }
  .service__quote {
    background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .service__quote-title { margin-block-end: var(--space-4); }
  .link-row { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-4); }
  @media (min-width: 768px) { .link-row { flex-flow: row wrap; gap: var(--space-3) var(--space-7); } }
  .service-area__map iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--radius-lg); }

  /* ---------- Contact ---------- */
  .contact .grid { align-items: start; row-gap: var(--space-7); }
  .contact__info { grid-column: 1 / -1; }
  .contact__form { grid-column: 1 / -1; }
  @media (min-width: 1200px) {
    .contact__info { grid-column: 1 / span 6; }
    .contact__form { grid-column: 8 / -1; }
  }
  .contact__methods { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }
  @media (min-width: 600px) { .contact__methods { grid-template-columns: repeat(2, 1fr); } }
  .contact-method { display: flex; flex-direction: column; gap: var(--space-1); }
  .contact-method__label { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--swyft-blue); }
  .contact-method__value { font-size: var(--t-3); color: var(--ink); line-height: 1.5; }
  a.contact-method__value:hover { color: var(--swyft-blue); }
  .contact__links { margin-block-start: var(--space-7); padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
  .contact__links-title { font-family: var(--font-display); font-size: var(--t-4); font-weight: 700; color: var(--ink); margin-block-end: var(--space-4); }

  /* ---------- FAQ accordion ---------- */
  .faq-item { border-block-end: 1px solid var(--line); }
  .faq-item__q { margin: 0; }
  .faq-item__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-5) 0; background: none; border: 0; cursor: pointer; text-align: start;
    font-family: var(--font-display); font-size: var(--t-4); font-weight: 700; color: var(--ink);
  }
  .faq-item__trigger:hover { color: var(--swyft-blue); }
  .faq-item__icon { flex: none; position: relative; inline-size: 16px; block-size: 16px; }
  .faq-item__icon::before, .faq-item__icon::after {
    content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
    inline-size: 16px; block-size: 2px; background: var(--swyft-blue); transform: translateY(-50%); transition: transform .2s ease;
  }
  .faq-item__icon::after { transform: translateY(-50%) rotate(90deg); }
  .faq-item__trigger[aria-expanded="true"] .faq-item__icon::after { transform: translateY(-50%) rotate(0deg); }
  .faq-item__answer { padding-block-end: var(--space-5); color: var(--muted); font-size: var(--t-3); line-height: 1.7; }

  /* FAQ closing CTA → contact / resources / blog */
  .faq-cta__inner { grid-column: 1 / -1; max-inline-size: 60ch; }
  .faq-cta__inner .lede { margin-block-start: var(--space-3); }
  .faq-cta__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
    margin-block-start: var(--space-6);
  }
  .faq-item__answer > * + * { margin-block-start: var(--space-4); }

  /* ---------- Careers: centred driver panel, generous whitespace ---------- */
  .careers__panel {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-5);
    max-inline-size: 60ch; margin-inline: auto;
    padding: clamp(var(--space-7), 6vw, var(--space-9)) var(--space-6);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  }
  @media (min-width: 768px) { .careers__panel { grid-column: 3 / -3; } }
  @media (min-width: 1200px) { .careers__panel { grid-column: 4 / span 6; } }
  .careers__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 72px; block-size: 72px; border-radius: 50%;
    background: var(--swyft-blue-l); color: var(--swyft-blue-d);
  }
  .careers__title {
    font-family: var(--font-display); font-weight: 700; line-height: 1.15;
    font-size: clamp(var(--t-5), 3vw, var(--t-7)); color: var(--ink);
  }
  .careers__lede { font-size: var(--t-3); color: var(--muted); line-height: 1.7; }
  .careers__cta { margin-block-start: var(--space-2); }
  .careers__note {
    grid-column: 1 / -1;
    max-inline-size: 52ch; margin: var(--space-7) auto 0; text-align: center;
    font-size: var(--t-2); color: var(--muted);
  }

  /* ---------- Blog: intro + category filter + card grid ---------- */
  .blog__inner { grid-column: 1 / -1; }
  .blog__intro { max-inline-size: 72ch; margin-block-end: var(--space-7); }
  .blog__filter {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    margin-block-end: var(--space-7);
  }
  .blog__pill {
    display: inline-flex; align-items: center;
    padding: 8px 18px; border-radius: 999px;
    border: 1.5px solid var(--line); background: var(--paper);
    color: var(--muted); font-size: var(--t-2); font-weight: 600; text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
  }
  .blog__pill:hover { border-color: var(--swyft-blue); color: var(--ink); }
  .blog__pill.is-active { background: var(--swyft-blue); border-color: var(--swyft-blue); color: #fff; }
  .post-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
  @media (min-width: 600px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
  .post-card {
    display: flex; flex-direction: column;
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .post-card:hover { border-color: var(--swyft-blue); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
  .post-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .post-card__placeholder { width: 100%; height: 100%; }
  .post-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
  .post-card__cat { align-self: flex-start; font-size: var(--t-0); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--swyft-blue); }
  .post-card__title { font-family: var(--font-display); font-size: var(--t-4); font-weight: 700; line-height: 1.2; }
  .post-card__title a { color: var(--ink); }
  .post-card__title a:hover { color: var(--swyft-blue); }
  .post-card__date { font-size: var(--t-1); color: var(--muted); }
  .post-card__excerpt { font-size: var(--t-2); color: var(--muted); line-height: 1.5; }
  .post-card__more { margin-block-start: var(--space-3); }
  .post-empty { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-3); }

  .pagination { grid-column: 1 / -1; margin-block-start: var(--space-8); }
  .pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; align-items: center; }
  .pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-inline-size: 42px; padding: 10px 14px;
    border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; font-size: var(--t-2);
  }
  .pagination .page-numbers:hover { border-color: var(--swyft-blue); color: var(--swyft-blue); }
  .pagination .page-numbers.current { background: var(--swyft-blue); border-color: var(--swyft-blue); color: #fff; }
  .pagination .page-numbers.dots { border-color: transparent; }

  /* ---------- Single post ---------- */
  .post-single__header { background: var(--ink); color: var(--paper); }
  .post-single__meta { grid-column: 1 / -1; max-inline-size: 72ch; margin-inline: auto; text-align: center; }
  .post-single__cat { color: var(--swyft-blue); margin-block-end: var(--space-3); }
  .post-single__date { display: block; margin-block-start: var(--space-4); color: var(--muted-ink); font-size: var(--t-2); }
  .post-single__feature { grid-column: 1 / -1; max-inline-size: 980px; margin-inline: auto; margin-block: calc(-1 * var(--space-8)) var(--space-7); position: relative; z-index: 2; }
  .post-single__feature img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
  .post-single__content { padding-block-start: var(--space-5); }
  .post-nav { grid-column: 1 / -1; max-inline-size: 72ch; margin-inline: auto; margin-block-start: var(--space-8); display: grid; gap: var(--space-4); border-block-start: 1px solid var(--line); padding-block-start: var(--space-6); }
  @media (min-width: 600px) { .post-nav { grid-template-columns: 1fr 1fr; } }
  .post-nav__link { display: flex; flex-direction: column; gap: var(--space-1); }
  .post-nav__link--next { text-align: end; }
  .post-nav__dir { font-size: var(--t-0); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--swyft-blue); }
  .post-nav__t { font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1.2; }
  .post-nav__link:hover .post-nav__t { color: var(--swyft-blue); }

  /* ====================================================================
     SERVICE PAGE — benefits grid + process steps + mid-CTA band
  ==================================================================== */

  /* --- Benefits grid --- */
  .svc-benefits__head {
    grid-column: 1 / -1;
    margin-block-end: var(--space-6);
  }
  .svc-benefits__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  @media (min-width: 600px) { .svc-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .svc-benefits__grid { grid-template-columns: repeat(3, 1fr); } }

  .svc-benefit-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-6);
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .svc-benefit-card:hover { border-color: var(--swyft-blue); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .svc-benefit-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px;
    background: var(--swyft-blue-l);
    color: var(--swyft-blue);
    border-radius: var(--radius);
    flex: none;
    margin-block-end: var(--space-1);
  }
  .svc-benefit-card__title {
    font-family: var(--font-display);
    font-size: var(--t-4);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .svc-benefit-card__desc { font-size: var(--t-2); color: var(--muted); line-height: 1.6; }

  /* --- Mid-page CTA band --- */
  .svc-mid-cta {
    padding-block: clamp(var(--space-7), 8vw, var(--space-9));
  }
  .svc-mid-cta__inner {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
  }
  @media (min-width: 768px) {
    .svc-mid-cta__inner {
      flex-direction: row; align-items: center; justify-content: space-between;
    }
  }
  .svc-mid-cta__text {
    font-family: var(--font-display);
    font-size: clamp(var(--t-5), 3.5vw, var(--t-7));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--paper);
    max-inline-size: 56ch;
  }
  .btn--outline-white {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 14px 26px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: var(--radius);
    color: var(--paper);
    font-weight: 700;
    font-size: var(--t-2);
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease;
    flex: none;
  }
  .btn--outline-white:hover { background: var(--swyft-blue); border-color: var(--swyft-blue); }

  /* --- Process steps --- */
  .svc-process__head {
    grid-column: 1 / -1;
    margin-block-end: var(--space-7);
  }
  .svc-process__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7) var(--space-6);
  }
  @media (min-width: 600px) { .svc-process__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .svc-process__grid { grid-template-columns: repeat(4, 1fr); } }

  .svc-step {
    display: flex; flex-direction: column; gap: var(--space-3);
    position: relative;
    padding-block-start: var(--space-7);
  }
  .svc-step__num {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    font-family: var(--font-display);
    font-size: var(--t-6);
    font-weight: 700;
    color: var(--swyft-blue);
    opacity: 0.25;
    line-height: 1;
  }
  .svc-step__title {
    font-family: var(--font-display);
    font-size: var(--t-4);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .svc-step__desc { font-size: var(--t-2); color: var(--muted); line-height: 1.65; }

  /* ====================================================================
     HOW IT WORKS PAGE
  ==================================================================== */

  /* --- Intro split --- */
  .hiw-intro__inner {
    grid-column: 1 / -1;
    max-inline-size: 68ch;
  }
  .hiw-intro__inner .h2 { margin-block-end: var(--space-4); }
  .hiw-intro__stats {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--line);
  }
  .hiw-stat { display: flex; flex-direction: column; gap: var(--space-1); }
  .hiw-stat__num {
    font-family: var(--font-display);
    font-size: var(--t-7); font-weight: 700; letter-spacing: -0.03em;
    color: var(--swyft-blue); line-height: 1;
  }
  .hiw-stat__label { font-size: var(--t-2); color: var(--muted); font-weight: 500; }

  /* --- Steps --- */
  .hiw-steps__head {
    grid-column: 1 / -1;
    margin-block-end: var(--space-7);
  }
  .hiw-steps__head .h2 { margin-block-end: var(--space-3); }
  .hiw-step-list {
    grid-column: 1 / -1;
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0;
  }
  .hiw-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 var(--space-5);
    padding-block-end: var(--space-8);
  }
  .hiw-step:last-child { padding-block-end: 0; }
  @media (min-width: 768px) {
    .hiw-step { grid-template-columns: 72px 1fr; gap: 0 var(--space-7); }
  }
  .hiw-step__marker {
    display: flex; flex-direction: column; align-items: center;
    padding-block-start: 4px;
  }
  .hiw-step__num {
    font-family: var(--font-display);
    font-size: var(--t-6); font-weight: 700; letter-spacing: -0.02em;
    color: var(--swyft-blue); line-height: 1;
    flex: none;
  }
  .hiw-step__line {
    flex: 1; inline-size: 2px;
    background: linear-gradient(to bottom, var(--swyft-blue-l), transparent);
    margin-block-start: var(--space-3);
    min-block-size: var(--space-8);
  }
  .hiw-step__body {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding-block-end: var(--space-2);
  }
  .hiw-step__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px;
    background: var(--swyft-blue-l); color: var(--swyft-blue);
    border-radius: var(--radius); flex: none;
    margin-block-end: var(--space-1);
  }
  .hiw-step__title {
    font-family: var(--font-display);
    font-size: clamp(var(--t-5), 2.8vw, var(--t-6));
    font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--ink);
  }
  .hiw-step__desc { font-size: var(--t-3); color: var(--muted); line-height: 1.7; max-inline-size: 64ch; }
  .hiw-step__detail {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-2);
  }
  .hiw-step__detail span {
    font-size: var(--t-1); font-weight: 600; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase;
  }

  /* --- Scroll-pinned step stack (desktop, motion-OK) ---
     Each step pins near the top of the viewport as you scroll into it; the next
     step then scrolls up and over the previous one, like a stack of cards. Cards
     get an opaque panel so the overlap reads cleanly. Mobile and reduced-motion
     keep the plain vertical list above. */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hiw-step-list { gap: 0; }
    .hiw-step {
      position: sticky;
      top: calc(var(--header-h) + var(--space-6));
      padding: var(--space-7);
      background: var(--paper);
      border: 1.5px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lift);
      margin-block-end: var(--space-6);
    }
    /* Stagger the pin offset so stacked cards peek slightly, not pixel-perfect. */
    .hiw-step:nth-child(2) { top: calc(var(--header-h) + var(--space-6) + 14px); }
    .hiw-step:nth-child(3) { top: calc(var(--header-h) + var(--space-6) + 28px); }
    .hiw-step:nth-child(4) { top: calc(var(--header-h) + var(--space-6) + 42px); }
    .hiw-step:last-child { padding-block-end: var(--space-7); }
    /* The connecting line is redundant once cards stack. */
    .hiw-step__line { display: none; }
    /* Give the track height so there's scroll distance to drive the stacking. */
    .hiw-steps__head { margin-block-end: var(--space-8); }
  }

  /* --- Trust bar --- */
  .hiw-trust__inner {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  @media (min-width: 600px) { .hiw-trust__inner { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .hiw-trust__inner { grid-template-columns: repeat(4, 1fr); } }
  .hiw-trust-item { display: flex; flex-direction: column; gap: var(--space-3); }
  .hiw-trust-item__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 48px; block-size: 48px;
    background: rgba(29,167,227,0.15); color: var(--swyft-blue);
    border-radius: var(--radius); flex: none;
  }
  .hiw-trust-item__title {
    font-family: var(--font-display);
    font-size: var(--t-4); font-weight: 700; color: var(--paper); line-height: 1.2;
  }
  .hiw-trust-item__desc { font-size: var(--t-2); color: var(--muted-ink); line-height: 1.6; }

  /* --- Services cross-link grid --- */
  .hiw-services__head {
    grid-column: 1 / -1;
    margin-block-end: var(--space-6);
  }
  .hiw-services__head .h2 { margin-block-end: var(--space-3); }
  .hiw-services__grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  }
  @media (min-width: 600px) { .hiw-services__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .hiw-services__grid { grid-template-columns: repeat(3, 1fr); } }

  /* ====================================================================
     SERVICE AREA PAGE — redesigned
  ==================================================================== */

  /* Intro prose + quote aside (reuses .service layout at desktop) */
  .sva-body .grid { align-items: start; row-gap: var(--space-8); }
  .sva-body__main { grid-column: 1 / -1; }
  .sva-body__aside { grid-column: 1 / -1; }
  @media (min-width: 1200px) {
    .sva-body__main  { grid-column: 1 / span 7; }
    .sva-body__aside { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 24px); }
  }

  /* Quick-stats row */
  .sva-stats {
    display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7);
    padding-block: var(--space-6);
    border-block: 1px solid var(--line);
    margin-block-start: var(--space-7);
  }
  .sva-stat { display: flex; flex-direction: column; gap: 2px; }
  .sva-stat__val {
    font-family: var(--font-display); font-size: var(--t-6);
    font-weight: 700; color: var(--swyft-blue); line-height: 1;
  }
  .sva-stat__label { font-size: var(--t-1); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

  /* Benefits grid */
  .sva-benefits__head { grid-column: 1 / -1; margin-block-end: var(--space-5); }
  .sva-benefits__grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  }
  @media (min-width: 600px) { .sva-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .sva-benefits__grid { grid-template-columns: repeat(3, 1fr); } }
  .sva-benefit {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  }
  .sva-benefit__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 40px; block-size: 40px;
    background: var(--swyft-blue-l); color: var(--swyft-blue);
    border-radius: var(--radius); flex: none; margin-block-end: var(--space-1);
  }
  .sva-benefit__title { font-family: var(--font-display); font-size: var(--t-4); font-weight: 700; color: var(--ink); line-height: 1.2; }
  .sva-benefit__desc { font-size: var(--t-2); color: var(--muted); line-height: 1.6; }

  /* Neighbourhoods */
  .sva-hoods__head { grid-column: 1 / -1; margin-block-end: var(--space-4); }
  .sva-hoods__list {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: var(--space-2);
  }
  .sva-hood-tag {
    display: inline-block;
    padding: 8px 16px;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--t-2); font-weight: 500; color: var(--ink);
  }

  /* Map */
  .sva-map { grid-column: 1 / -1; }
  .sva-map iframe { width: 100%; min-block-size: 360px; border: 0; border-radius: var(--radius-lg); }

  /* Services + siblings */
  .sva-services__head { grid-column: 1 / -1; margin-block-end: var(--space-4); }
  .sva-services__grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  }
  @media (min-width: 600px) { .sva-services__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .sva-services__grid { grid-template-columns: repeat(3, 1fr); } }
  .sva-service-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    font-family: var(--font-display); font-size: var(--t-3); font-weight: 600; color: var(--ink);
    transition: border-color .18s ease, color .18s ease;
  }
  .sva-service-card:hover { border-color: var(--swyft-blue); color: var(--swyft-blue); }
  .sva-siblings__head { grid-column: 1 / -1; margin-block-end: var(--space-4); }
  .sva-siblings__list { grid-column: 1 / -1; }

  /* ====================================================================
     RESOURCES PAGE
  ==================================================================== */
  .resources-hub__head { grid-column: 1 / -1; margin-block-end: var(--space-6); }
  .resources-hub__grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  }
  @media (min-width: 600px) { .resources-hub__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .resources-hub__grid { grid-template-columns: repeat(3, 1fr); } }
  .resource-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .resource-card:hover { border-color: var(--swyft-blue); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .resource-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 48px; block-size: 48px;
    background: var(--swyft-blue-l); color: var(--swyft-blue);
    border-radius: var(--radius); flex: none;
  }
  .resource-card__eyebrow { font-size: var(--t-0); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--swyft-blue); }
  .resource-card__title { font-family: var(--font-display); font-size: var(--t-5); font-weight: 700; color: var(--ink); line-height: 1.15; }
  .resource-card__desc { font-size: var(--t-2); color: var(--muted); line-height: 1.6; flex: 1; }
  .resource-card__more { margin-block-start: auto; padding-block-start: var(--space-3); }

  /* ====================================================================
     RATES PAGE — per-origin cards (all visible), surcharges, CTA
  ==================================================================== */
  .rates__head { grid-column: 1 / -1; margin-block-end: var(--space-6); }
  .rates__head .h2 { margin-block-end: var(--space-3); }
  .rates__grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  }
  @media (min-width: 600px)  { .rates__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .rates__grid { grid-template-columns: repeat(3, 1fr); } }

  .rate-card {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .rate-card:hover { border-color: var(--swyft-blue); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
  .rate-card__origin {
    display: flex; align-items: baseline; gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: var(--t-4); font-weight: 700; letter-spacing: -0.01em;
  }
  .rate-card__from {
    font-family: var(--font);
    font-size: var(--t-0); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--swyft-blue);
  }
  .rate-card__list { display: flex; flex-direction: column; padding: var(--space-3) var(--space-5) var(--space-5); }

  .rate-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
  }
  .rate-row:last-child { border-block-end: none; }
  .rate-row__to { font-size: var(--t-2); color: var(--muted); line-height: 1.4; }
  .rate-row__price {
    flex: none;
    font-family: var(--font-display); font-weight: 700; font-size: var(--t-4);
    color: var(--ink); font-variant-numeric: tabular-nums;
  }

  /* Surcharge strip */
  .rates-extra__inner {
    grid-column: 1 / -1; max-inline-size: 720px; margin-inline: auto;
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .rates-extra__inner .h3 { margin-block-end: var(--space-4); }
  .rates-extra__list { display: flex; flex-direction: column; }
  .rates-extra__note { margin-block-start: var(--space-4); font-size: var(--t-1); color: var(--muted); font-style: italic; }

  /* Business-pricing CTA band */
  .rates-cta { padding-block: clamp(var(--space-7), 8vw, var(--space-9)); }
  .rates-cta__inner {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  }
  @media (min-width: 900px) {
    .rates-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-7); }
    .rates-cta__copy { max-inline-size: 60ch; }
  }
  .rates-cta__copy .h2 { margin-block-end: var(--space-3); }
  .rates-cta__btn { flex: none; }

  /* ====================================================================
     SERVICE-AREAS — interactive Lower Mainland map + services CTA
  ==================================================================== */
  /* Map-led layout: heading centred, map the hero, chips beneath. */
  .areas-map__head {
    grid-column: 1 / -1;
    max-inline-size: 60ch; margin-inline: auto; text-align: center;
    margin-block-end: var(--space-7);
  }
  .areas-map__head .h2 { margin-block: var(--space-2) var(--space-3); }
  .areas-map__head .lede { margin-inline: auto; }

  /* One framed panel: the map and the "we serve" chip row read as a single
     coverage module rather than two detached blocks. */
  .areas-map__figure {
    grid-column: 1 / -1;
    max-inline-size: 940px; margin-inline: auto;
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
  }
  .areas-map__figure .areas-map__svg { border-radius: 0; }
  /* Map palette — Swyft brand, soft. Served land is a muted sky-blue (brand
     hue, desaturated so it isn't harsh); ocean is a deeper companion of the
     same family; off-area land stays grey. */
  .areas-map {
    --map-water:  #E3F1F8;  /* soft pale-blue ocean — recedes behind land  */
    --map-land:   #6FB7DD;  /* soft sky-blue served land                   */
    --map-land-d: #4FA3CF;  /* hover/active emphasis                       */
    --map-off:    #E4E8EC;  /* grey out-of-area / not-yet-served land      */
    --map-stroke: #FFFFFF;  /* white municipality borders                 */
    --map-ink:    #0F1825;  /* near-black labels (legible on soft blue)    */
  }
  .areas-map__svg {
    width: 100%; height: auto; display: block;
    background: var(--map-water);  /* water shows through gaps between land */
  }

  /* Out-of-area landforms (islands / far context) — grey, behind regions. */
  .areas-map__land {
    fill: var(--map-off);
    stroke: var(--map-stroke);
    stroke-width: 1.5;
    pointer-events: none;
  }

  /* Region shapes. Default = green served land with white borders. */
  .areas-map__region { cursor: pointer; }
  .areas-map__shape {
    fill: var(--map-land);
    stroke: var(--map-stroke);
    stroke-width: 1.5;
    transition: fill .18s ease;
  }
  /* Inactive (not-yet-served) regions: muted grey, ready to toggle on. */
  .areas-map__region--off .areas-map__shape { fill: var(--map-off); }
  /* Non-clickable regions (no page yet) don't show a pointer. */
  .areas-map__region--inert { cursor: default; }

  /* Served-region hover/active emphasis (deepen the soft blue). */
  .areas-map__region:not(.areas-map__region--off):hover .areas-map__shape,
  .areas-map__region:not(.areas-map__region--off):focus-visible .areas-map__shape,
  .areas-map__region:not(.areas-map__region--off).is-active .areas-map__shape {
    fill: var(--map-land-d);
  }
  .areas-map__region:focus-visible { outline: none; }
  .areas-map__region:focus-visible .areas-map__shape { stroke: var(--map-ink); stroke-width: 2.5; }

  /* Labels — black, bold, sitting above all fills (matches reference). */
  .areas-map__label {
    fill: var(--map-ink);
    font-family: var(--font-display);
    font-size: 13px; font-weight: 700;
    pointer-events: none;
  }
  .areas-map__label--off { opacity: .85; }

  /* Chip row — a footer of the same panel, separated by a divider. */
  .areas-map__chips-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
    padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-7));
    border-block-start: 1px solid var(--line);
    background: var(--paper-2);
  }
  .areas-map__chips-label {
    font-size: var(--t-1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
  }
  .areas-map__chips {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none;
  }
  .areas-map__chip {
    display: inline-flex; align-items: center;
    padding: 7px var(--space-4);
    border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--paper);
    font-family: var(--font-display); font-size: var(--t-2); font-weight: 600; color: var(--ink);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .areas-map__chip:hover,
  .areas-map__chip.is-active { border-color: var(--swyft-blue); color: #fff; background: var(--swyft-blue); }

  /* Services CTA band on the areas hub */
  .areas-services-cta__inner {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  }
  @media (min-width: 900px) {
    .areas-services-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-7); }
    .areas-services-cta__copy { max-inline-size: 60ch; }
  }
  .areas-services-cta__copy .h2 { margin-block-end: var(--space-3); }
  .areas-services-cta__btn { flex: none; }