/* =========================================================================
   ASPIRE BUILDING — stylesheet
   1. Tokens          2. Reset/base      3. Primitives (btn, icon, eyebrow)
   4. Header/nav      5. Hero            6. Sections & cards
   7. Before/After    8. Process/Why     9. Quotes
   10. Form           11. Footer         12. Motion & reveal
   ========================================================================= */

/* ============ 1. TOKENS ============ */
:root {
  /* --- brand primitives (sampled from the logo) --- */
  --c-navy-900:#0B1B33;  --c-navy-800:#0F2A4D;  --c-navy-700:#143A68;
  --c-blue-700:#1A5595;  --c-blue-600:#1F63B0;  --c-blue-500:#2B76C9;  --c-blue-300:#8FC0F5;
  --c-steel-600:#5C6469; --c-steel-500:#767D83; --c-steel-300:#B4BAC0;
  --c-stone-50:#FBF9F6;  --c-stone-100:#F3EFE9; --c-stone-200:#E6E0D6;
  --c-amber-600:#8A5B12; --c-amber-100:#FBEED3;

  /* --- semantic: light --- */
  --bg:#FFFFFF;
  --bg-alt:var(--c-stone-50);
  --bg-stone:var(--c-stone-100);
  --bg-dark:var(--c-navy-900);
  --surface:#FFFFFF;
  --surface-2:var(--c-stone-50);
  --text:#101820;
  --text-muted:#4C555E;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:rgba(233,240,247,.76);
  --border:#E4E1DB;
  --border-strong:#CDC9C1;
  --border-on-dark:rgba(255,255,255,.16);
  --brand:var(--c-blue-600);
  --brand-hover:var(--c-blue-700);
  --brand-ink:var(--c-navy-800);
  --on-brand:#FFFFFF;
  --focus:#1F63B0;
  --danger:#B3261E;
  --shadow-sm:0 1px 2px rgba(11,27,51,.06), 0 2px 6px rgba(11,27,51,.05);
  --shadow-md:0 4px 10px rgba(11,27,51,.07), 0 12px 28px rgba(11,27,51,.08);
  --shadow-lg:0 8px 20px rgba(11,27,51,.10), 0 28px 60px rgba(11,27,51,.14);

  /* --- spacing (8pt rhythm) --- */
  --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;

  /* --- radii --- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* --- layout --- */
  --shell:1200px;
  --shell-pad:20px;
  --header-h:76px;

  /* --- type --- */
  --font-display:'Archivo', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

  /* --- z-scale --- */
  --z-base:0; --z-raised:10; --z-sticky:40; --z-scrim:80; --z-nav:100; --z-top:1000;

  /* --- motion --- */
  --dur-fast:140ms; --dur:220ms; --dur-slow:380ms;
  --ease-out:cubic-bezier(.22,.75,.3,1);
  --ease-in:cubic-bezier(.6,.05,.9,.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0B1017;
    --bg-alt:#101822;
    --bg-stone:#0E151E;
    --bg-dark:#070C12;
    --surface:#141C28;
    --surface-2:#18212E;
    --text:#EDF2F7;
    --text-muted:#A9B4C0;
    --border:#243040;
    --border-strong:#37485E;
    --border-on-dark:rgba(255,255,255,.14);
    --brand:#6BA8EC;
    --brand-hover:#8FC0F5;
    --brand-ink:#BBD8FA;
    --on-brand:#07121F;
    --focus:#8FC0F5;
    --danger:#FF9B93;
    --c-amber-600:#F3CE8A;
    --c-amber-100:rgba(243,206,138,.12);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 10px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.35);
    --shadow-lg:0 8px 20px rgba(0,0,0,.45), 0 28px 60px rgba(0,0,0,.5);
  }
}

/* ============ 2. RESET / BASE ============ */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked { overflow:hidden; }

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

h1, h2, h3, h4 {
  font-family:var(--font-display);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}
p { text-wrap:pretty; }

a { color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px; }
ul, ol { padding:0; list-style:none; }

button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }

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

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

.sprite { position:absolute; width:0; height:0; overflow:hidden; }

.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;
}

.skip-link {
  position:fixed; top:-100px; left:var(--space-4); z-index:var(--z-top);
  background:var(--brand); color:var(--on-brand);
  padding:var(--space-3) var(--space-5); border-radius:0 0 var(--r-md) var(--r-md);
  font-weight:600; text-decoration:none;
  transition:top var(--dur) var(--ease-out);
}
.skip-link:focus { top:0; }

.shell {
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:max(var(--shell-pad), env(safe-area-inset-left));
}
@media (min-width:768px) { :root { --shell-pad:40px; } }
@media (min-width:1280px){ :root { --shell-pad:56px; } }

/* ============ 3. PRIMITIVES ============ */
.i { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
#i-star, #i-quote { stroke-width:1.5; }
.quote__stars .i, #i-star { fill:currentColor; }

.btn {
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:0 var(--space-5);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:var(--r-md);
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn .i { width:20px; height:20px; stroke-width:2; }
.btn--lg { min-height:56px; padding:0 var(--space-6); font-size:16px; }
.btn--block { width:100%; }

.btn--primary { --btn-bg:var(--brand); --btn-fg:var(--on-brand); --btn-bd:var(--brand); box-shadow:var(--shadow-sm); }
.btn--primary:hover { --btn-bg:var(--brand-hover); --btn-bd:var(--brand-hover); box-shadow:var(--shadow-md); }
.btn--primary:active { transform:scale(.98); box-shadow:var(--shadow-sm); }

.btn--outline-light { --btn-fg:#fff; --btn-bd:rgba(255,255,255,.42); backdrop-filter:blur(6px); background:rgba(11,27,51,.22); }
.btn--outline-light:hover { --btn-bd:#fff; background:rgba(255,255,255,.14); }
.btn--outline-light:active { transform:scale(.98); }

.btn--ghost { --btn-fg:var(--text); padding:0 var(--space-3); }
.btn--ghost:hover { --btn-bg:var(--surface-2); }

.btn[disabled], .btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }

.eyebrow {
  display:flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-ink);
  margin-bottom:var(--space-4);
}
.eyebrow::after { content:""; flex:1; max-width:64px; height:1.5px; background:currentColor; opacity:.35; }
.eyebrow__num { color:var(--brand); }
.eyebrow--light { color:#fff; }
.eyebrow--light .eyebrow__num { color:var(--c-blue-300); }

.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip {
  font-size:13px; font-weight:500; line-height:1;
  padding:7px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border-on-dark); color:var(--text-on-dark-muted);
}
kbd {
  font:600 12px/1 var(--font-body);
  padding:4px 7px; border-radius:5px;
  border:1px solid var(--border-on-dark); background:rgba(255,255,255,.07);
}

/* ============ 4. HEADER / NAV ============ */
.site-header {
  /* Above the drawer and scrim, so the logo and the close button stay reachable
     while the mobile menu is open. */
  position:sticky; top:0; z-index:var(--z-top);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top);
  transition:box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled { box-shadow:var(--shadow-md); }
.site-header__inner { display:flex; align-items:center; gap:var(--space-5); min-height:var(--header-h); }

/* Brand: the logo JPEG has a white background, so the mark sits on a white
   chip that stays legible in both themes. */
.brand { display:flex; align-items:center; min-height:44px; gap:var(--space-3); text-decoration:none; color:var(--text); margin-right:auto; }
.brand__mark {
  position:relative; display:block; flex:none;
  width:62px; height:42px; overflow:hidden;
  background:#fff; border-radius:var(--r-sm);
}
@media (prefers-color-scheme: dark) { .brand__mark { box-shadow:0 0 0 1px rgba(255,255,255,.14); } }
/* Crops the JPEG down to just the house + swoosh mark (drops the baked-in wordmark) */
.brand__mark img { position:absolute; top:-15.7px; left:-6.4px; width:72.6px; height:72.6px; max-width:none; }

.brand__text { display:flex; flex-direction:column; }
.brand__name { font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1.1; letter-spacing:-.01em; text-transform:uppercase; }
.brand__tag { font-size:11px; line-height:1.3; color:var(--text-muted); letter-spacing:.04em; }
@media (max-width:420px) { .brand__tag { display:none; } .brand__name { font-size:17px; } }

.nav { display:flex; align-items:center; gap:var(--space-6); }
.nav__list { display:flex; align-items:center; gap:var(--space-5); }
.nav__link {
  position:relative; display:flex; align-items:center;
  min-height:44px; padding:var(--space-2) 0;
  color:var(--text); text-decoration:none; font-weight:500; font-size:15.5px;
  transition:color var(--dur) var(--ease-out);
}
.nav__link::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav__link:hover { color:var(--brand); }
.nav__link:hover::after, .nav__link.is-active::after { transform:scaleX(1); opacity:1; }
.nav__link.is-active { color:var(--brand); font-weight:600; }
.nav__cta { display:flex; align-items:center; gap:var(--space-3); }

.nav-toggle {
  display:none; place-items:center;
  width:48px; height:48px; margin-right:-10px;
  background:none; border:0; border-radius:var(--r-md); color:var(--text);
  /* The drawer is a descendant of the header, so it shares the header's
     stacking context — the toggle and logo have to outrank it from inside. */
  position:relative; z-index:calc(var(--z-nav) + 1);
}
.brand { position:relative; z-index:calc(var(--z-nav) + 1); }
.nav-toggle:hover { background:var(--surface-2); }
.nav-toggle .i--close { display:none; }
.nav-toggle[aria-expanded="true"] .i--open { display:none; }
.nav-toggle[aria-expanded="true"] .i--close { display:block; }

.nav-scrim {
  position:fixed; inset:0; z-index:var(--z-scrim);
  background:rgba(7,12,18,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.nav-scrim.is-open { opacity:1; }

@media (max-width:1023px) {
  .nav-toggle { display:grid; }
  .nav {
    position:fixed; inset:0 0 0 auto; z-index:var(--z-nav);
    width:min(360px, 88vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--space-6);
    padding:calc(var(--header-h) + env(safe-area-inset-top) + var(--space-6)) var(--space-6)
            calc(var(--space-6) + env(safe-area-inset-bottom));
    background:var(--bg); border-left:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-out);
  }
  .nav.is-open { transform:translateX(0); }
  .nav__list { flex-direction:column; align-items:stretch; gap:var(--space-1); }
  .nav__link { padding:var(--space-4) var(--space-2); font-family:var(--font-display); font-weight:700; font-size:20px; border-bottom:1px solid var(--border); }
  .nav__link::after { display:none; }
  .nav__cta { flex-direction:column; align-items:stretch; }
  .nav__cta .btn { width:100%; }
}

/* ============ 5. HERO ============ */
.hero { position:relative; isolation:isolate; background:var(--bg-dark); color:#fff; }
.hero__media { position:absolute; inset:0; z-index:-1; overflow:hidden; }
/* 4:3 source in a wide, short frame: on desktop only the Y offset bites (width
   fills exactly), on mobile only the X. 40%/25% keeps the crew and the stone
   elevation in shot and pushes the skip off the right edge. */
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* Two stacked gradients: the horizontal one buys contrast for the copy on the
   left, the vertical one only anchors the header and stat bar. Kept light on
   the right so the finished stonework stays legible — it's the proof. */
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,18,35,.62) 0%, rgba(7,18,35,.10) 34%, rgba(7,18,35,.14) 66%, rgba(7,18,35,.70) 100%),
    linear-gradient(97deg, rgba(9,22,42,.94) 0%, rgba(9,22,42,.86) 26%, rgba(9,22,42,.48) 56%, rgba(9,22,42,0) 82%);
}
@media (max-width:767px) {
  /* No room for a text-free zone on phones — darken the whole frame instead */
  .hero__media::after {
    background:linear-gradient(180deg, rgba(7,18,35,.80) 0%, rgba(7,18,35,.68) 45%, rgba(7,18,35,.86) 100%);
  }
}
/* Note: this element is also a .shell. Narrowing its max-width re-centres the
   whole text block rather than pulling it left — constrain the children if the
   copy ever needs to sit further inside the overlay. */
.hero__inner { padding-block:clamp(72px, 12vw, 140px) clamp(56px, 8vw, 96px); max-width:820px; }
.hero__title {
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  letter-spacing:-.03em;
  margin-bottom:var(--space-5);
  text-shadow:0 2px 24px rgba(7,12,18,.4);
}
.hero__lede {
  font-size:clamp(1.03rem, 2.1vw, 1.28rem);
  color:rgba(255,255,255,.94);
  max-width:60ch; margin-bottom:var(--space-7);
  text-shadow:0 1px 14px rgba(7,18,35,.6);
}
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ============ 6. SECTIONS & CARDS ============ */
.section { padding-block:clamp(64px, 9vw, 120px); background:var(--bg); }
.section--alt { background:var(--bg-alt); }
.section--stone { background:var(--bg-stone); }
.section--dark { background:var(--bg-dark); color:#fff; }
.section--dark .section__lede { color:var(--text-on-dark-muted); }

.section__head { max-width:62ch; margin-bottom:clamp(40px, 5vw, 64px); }
.section__head--center { margin-inline:auto; text-align:center; }
.section__head--center .eyebrow { justify-content:center; }
.section__head--center .eyebrow::after { display:none; }
.section__title { font-size:clamp(1.95rem, 4.6vw, 3.15rem); margin-bottom:var(--space-4); }
.section__title em { font-style:normal; color:var(--brand); }
.section--dark .section__title em { color:var(--c-blue-300); }
.section__lede { font-size:clamp(1rem, 1.7vw, 1.14rem); color:var(--text-muted); max-width:58ch; }
.section__head--center .section__lede { margin-inline:auto; }

/* Four services: 2x2 through tablet, then a single row of four on wide screens.
   A 3-col grid would leave an orphan card on the second row. */
.cards { display:grid; gap:var(--space-4); grid-template-columns:1fr; }
@media (min-width:640px){ .cards { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-5); } }
@media (min-width:1180px){ .cards { grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-4); } }

.card {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:var(--space-6) var(--space-5) var(--space-5);
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card:hover::before { transform:scaleX(1); }
.card__index {
  position:absolute; top:var(--space-4); right:var(--space-5);
  font-family:var(--font-display); font-weight:800; font-size:13px;
  color:var(--border-strong); letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.card__icon {
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:var(--space-5);
  border-radius:var(--r-md); background:var(--brand); color:var(--on-brand);
}
.card__icon .i { width:26px; height:26px; }
.card__title { font-size:1.32rem; margin-bottom:var(--space-3); }
.card__body { color:var(--text-muted); font-size:15.5px; margin-bottom:var(--space-5); }
.card__list { margin-top:auto; display:grid; gap:var(--space-2); padding-top:var(--space-4); border-top:1px solid var(--border); }
.card__list li { position:relative; padding-left:22px; font-size:14.5px; color:var(--text-muted); }
.card__list li::before {
  content:""; position:absolute; left:0; top:.58em;
  width:9px; height:9px; border-radius:2px;
  background:var(--brand); opacity:.85;
}

/* ============ 7. BEFORE / AFTER COMPARE ============ */
.compare { margin:0; }
.compare__frame {
  position:relative; isolation:isolate;
  aspect-ratio:4/3;
  border-radius:var(--r-lg); overflow:hidden;
  background:#070C12;
  box-shadow:var(--shadow-lg);
  --pos:50%;
  touch-action:pan-y;          /* horizontal drag = slider, vertical = page scroll */
  user-select:none; -webkit-user-select:none;
}
/* Held at 4:3 on every size. The "after" is natively 1.357 so it shows almost
   whole, and the portrait "before" (0.75) loses as little height as a fixed
   frame allows — a wider 3:2 frame would cut half of it away. */

.compare__img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}
/* The pair is portrait vs landscape, so each needs its own crop point to keep
   the dormer itself centred on both sides of the wipe. */
.compare__img--after  { object-position:58% 46%; }
.compare__img--before { object-position:56% 48%; }
/* clip-path never triggers layout, so dragging stays on the compositor */
.compare__img--before { clip-path:inset(0 calc(100% - var(--pos)) 0 0); }

/* The real control: a full-bleed range input. Gives us pointer drag, touch drag,
   click-to-jump, arrow-key stepping and screen-reader support for free. */
.compare__range {
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; -webkit-appearance:none; appearance:none;
  background:transparent; border:0;
  cursor:ew-resize;
  touch-action:pan-y;
}
.compare__range::-webkit-slider-thumb { -webkit-appearance:none; width:56px; height:100vh; cursor:ew-resize; }
.compare__range::-moz-range-thumb { width:56px; height:100vh; border:0; border-radius:0; cursor:ew-resize; }

.compare__ui { position:absolute; inset:0; z-index:2; pointer-events:none; }

.compare__divider { position:absolute; top:0; bottom:0; left:var(--pos); width:0; }
.compare__divider::before {
  content:""; position:absolute; top:0; bottom:0; left:-2px; width:4px;
  background:#fff; box-shadow:0 0 0 1px rgba(7,12,18,.28), 0 0 22px rgba(7,12,18,.45);
}
.compare__grip {
  position:absolute; top:50%; left:0;
  display:grid; place-items:center;
  width:60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%;
  background:#fff; color:var(--c-navy-800);
  box-shadow:0 4px 14px rgba(7,12,18,.34), 0 0 0 1px rgba(7,12,18,.1);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.compare__grip .i { width:30px; height:30px; stroke-width:2.25; }
.compare__frame:hover .compare__grip { transform:scale(1.06); }
.compare__frame.is-dragging .compare__grip { transform:scale(.94); }
/* Focus ring rides on the visible grip, since the range itself is transparent */
.compare__range:focus-visible + .compare__ui .compare__grip {
  box-shadow:0 0 0 4px var(--c-blue-500), 0 0 0 8px rgba(255,255,255,.85), 0 4px 14px rgba(7,12,18,.34);
}

.compare__tag {
  position:absolute; top:var(--space-4);
  padding:7px 14px; border-radius:var(--r-pill);
  background:rgba(7,12,18,.72); backdrop-filter:blur(8px);
  color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity var(--dur) var(--ease-out);
}
.compare__tag--before { left:var(--space-4); }
.compare__tag--after  { right:var(--space-4); background:rgba(31,99,176,.85); }

.compare__hint {
  position:absolute; left:50%; bottom:var(--space-5); transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--space-2);
  padding:9px 16px 9px 12px; border-radius:var(--r-pill);
  background:rgba(7,12,18,.72); backdrop-filter:blur(8px);
  color:#fff; font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.compare__hint .i { width:18px; height:18px; }
.compare__frame.is-touched .compare__hint { opacity:0; transform:translateX(-50%) translateY(8px); }

.compare__caption {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-3) var(--space-5);
  margin-top:var(--space-5);
}
.compare__project { font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; }
.compare__note {
  margin-top:var(--space-5); text-align:center;
  font-size:14px; color:var(--text-on-dark-muted);
}
@media (max-width:600px) {
  .compare__grip { width:52px; height:52px; margin:-26px 0 0 -26px; }
  .compare__grip .i { width:26px; height:26px; }
  .compare__tag { font-size:11px; padding:6px 11px; }
  .compare__note { display:none; }   /* keyboard hint is desktop-only guidance */
}

/* ============ 8. PROCESS & WHY ============ */
.steps { display:grid; gap:var(--space-5); grid-template-columns:1fr; counter-reset:step; }
@media (min-width:640px){ .steps { grid-template-columns:repeat(2, 1fr); gap:var(--space-6); } }
@media (min-width:1024px){ .steps { grid-template-columns:repeat(4, 1fr); } }

.step { position:relative; padding-top:var(--space-6); }
/* Dashed connector, pinned to the vertical centre of the numbered discs */
.step::before {
  content:""; position:absolute; top:calc(var(--space-6) + 26px); left:64px;
  right:calc(var(--space-6) * -1); height:1.5px;
  background:repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
}
@media (max-width:1023px){ .step::before { display:none; } }
.steps .step:last-child::before { display:none; }
.step__num {
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:var(--space-4);
  border-radius:50%; background:var(--bg-dark); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:20px;
  position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--bg);
}
/* In dark mode a near-black disc on a near-black page reads as nothing */
@media (prefers-color-scheme: dark) {
  .step__num { background:var(--brand); color:var(--on-brand); }
}
.step__title { font-size:1.22rem; margin-bottom:var(--space-2); }
.step__body { color:var(--text-muted); font-size:15.5px; }

.why { display:grid; gap:clamp(40px, 6vw, 72px); align-items:start; }
@media (min-width:1024px){ .why { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.why__logo {
  margin:var(--space-7) 0 0; max-width:280px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--space-4); box-shadow:var(--shadow-sm);
}
.why__list { display:grid; gap:var(--space-5); }
@media (min-width:640px){ .why__list { grid-template-columns:repeat(2, 1fr); gap:var(--space-6) var(--space-5); } }
.why__item { display:flex; gap:var(--space-4); }
.why__item > .i { width:28px; height:28px; color:var(--brand); margin-top:2px; }
.why__item h3 { font-size:1.08rem; margin-bottom:var(--space-1); }
.why__item p { font-size:15px; color:var(--text-muted); }

/* ============ 9. QUOTES ============ */
.quotes { display:grid; gap:var(--space-5); grid-template-columns:1fr; }
@media (min-width:768px){ .quotes { grid-template-columns:repeat(3, 1fr); } }
.quote {
  display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-6) var(--space-5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.quote__glyph { width:38px; height:38px; color:var(--brand); opacity:.35; stroke:none; }
.quote__text { font-size:16px; color:var(--text); }
.quote__by { display:flex; flex-direction:column; margin-top:auto; font-family:var(--font-display); font-weight:700; font-size:15px; }
.quote__meta { font-family:var(--font-body); font-weight:400; font-size:13.5px; color:var(--text-muted); }
.quote__stars { display:flex; gap:3px; color:#D99A1F; }
.quote__stars .i { width:17px; height:17px; }
.quote__stars > span[aria-hidden] { display:flex; gap:3px; }

/* ============ 10. FORM ============ */
.contact { display:grid; gap:clamp(40px, 6vw, 72px); align-items:start; }
@media (min-width:1024px){ .contact { grid-template-columns:minmax(0,1fr) minmax(0,.92fr); } }

/* No form alongside it: centre the intro and sit the two detail blocks
   side by side, so the section doesn't read as a half-empty column. */
.contact--solo { max-width:920px; margin-inline:auto; text-align:center; }
@media (min-width:1024px){ .contact--solo { grid-template-columns:minmax(0,1fr); } }
.contact--solo .eyebrow { justify-content:center; }
.contact--solo .eyebrow::after { display:none; }
.contact--solo .section__lede { margin-inline:auto; }
.contact--solo .contact__details { text-align:left; }
@media (min-width:600px){
  .contact--solo .contact__details { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-4); }
}

.contact__details { display:grid; gap:var(--space-3); margin-top:var(--space-7); }
/* One labelled block per channel, holding however many numbers/addresses there
   are — beats repeating the "Call us" label once per line. */
.contact__block {
  display:flex; align-items:flex-start; gap:var(--space-4);
  padding:var(--space-4);
  border:1px solid var(--border-on-dark); border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease-out);
}
.contact__block:hover { border-color:rgba(255,255,255,.30); }
.contact__block > .i { color:var(--c-blue-300); margin-top:10px; }
.contact__block-body { display:flex; flex-direction:column; min-width:0; }
.contact__block-body strong {
  font-family:var(--font-display); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-on-dark-muted); font-weight:700;
}
.contact__block-body a {
  display:inline-flex; align-items:center; min-height:44px;
  color:#fff; text-decoration:none; font-size:16px;
  overflow-wrap:anywhere;   /* long email addresses must never overflow */
  transition:color var(--dur) var(--ease-out);
}
.contact__block-body a:hover { color:var(--c-blue-300); text-decoration:underline; }

.form {
  padding:clamp(24px, 4vw, 40px);
  background:var(--surface); color:var(--text);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
}
.form__title { font-size:1.5rem; margin-bottom:var(--space-6); }
/* min-width:0 matters: a text input's min-content width is its default `size`
   (~250px), which would otherwise force the grid columns wider than the form. */
.field { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-5); min-width:0; }
.field-row { display:grid; gap:0 var(--space-4); }
@media (min-width:560px){ .field-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.field label { font-weight:600; font-size:14.5px; }
.req { color:var(--danger); }

.field input, .field select, .field textarea {
  width:100%; min-width:0;
  min-height:52px; padding:var(--space-3) var(--space-4);
  background:var(--bg); border:1.5px solid var(--border-strong); border-radius:var(--r-md);
  font-size:16px;   /* >=16px stops iOS auto-zoom on focus */
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { min-height:120px; resize:vertical; line-height:1.6; }
.field select { appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:var(--space-8);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color:var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:2px solid transparent; }

.field__hint { font-size:13.5px; color:var(--text-muted); }
.field__error { font-size:13.5px; font-weight:600; color:var(--danger); display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:var(--danger); }
.field.has-error .field__error { display:flex; align-items:flex-start; gap:6px; }
/* flex-start + nudge keeps the marker on the first line when the message wraps */
.field.has-error .field__error::before {
  content:"!"; display:grid; place-items:center; flex:none;
  width:16px; height:16px; margin-top:2px; border-radius:50%;
  background:var(--danger); color:#fff; font-size:11px; font-weight:700; line-height:1;
}

.btn__spinner { display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; }
.btn.is-busy .btn__spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

.form__status { margin-top:var(--space-4); font-size:15px; font-weight:600; min-height:1px; }
.form__status.is-ok { color:#1B7A46; }
.form__status.is-err { color:var(--danger); }
@media (prefers-color-scheme: dark) { .form__status.is-ok { color:#67D69B; } }
.form__small { margin-top:var(--space-4); font-size:13px; color:var(--text-muted); }

/* ============ 11. FOOTER ============ */
.site-footer { background:var(--bg-dark); color:#fff; padding-block:clamp(48px, 7vw, 80px) 0; }
.site-footer__inner { display:grid; gap:var(--space-7); padding-bottom:var(--space-7); }
@media (min-width:768px){ .site-footer__inner { grid-template-columns:2fr 1fr 1fr; gap:var(--space-8); } }
.wordmark { display:block; font-family:var(--font-display); font-weight:800; font-size:1.55rem; letter-spacing:-.01em; text-transform:uppercase; }
.wordmark__tag { display:block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-blue-300); margin-top:2px; }
.site-footer__blurb { margin-top:var(--space-4); max-width:42ch; font-size:15px; color:var(--text-on-dark-muted); }
.site-footer__h { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:var(--space-4); }
.site-footer ul { display:grid; gap:var(--space-1); }
/* inline-flex + min-height keeps these at the 44px touch minimum on phones */
.site-footer a, .site-footer li > span {
  display:inline-flex; align-items:center; min-height:44px; padding:2px 0;
  color:#fff; text-decoration:none; font-size:15px;
}
.site-footer a:hover { color:var(--c-blue-300); text-decoration:underline; }
.site-footer__base {
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
  justify-content:space-between;
  padding-block:var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-on-dark);
  font-size:13.5px; color:var(--text-on-dark-muted);
}

/* ============ 12. MOTION & REVEAL ============ */
.js .reveal { opacity:0; transform:translateY(18px); }
.js .reveal.is-in {
  opacity:1; transform:none;
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay:var(--d, 0ms);
}

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

@media print {
  .site-header, .nav-scrim, .hero__actions, .form, .skip-link { display:none !important; }
  body { color:#000; background:#fff; }
}