/* ==========================================================================
   24/7 Registered Agents — Design System
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Layout primitives
   4. Typography
   5. Buttons & links
   6. Components (header, footer, cards, steps, panels)
   7. Home page sections
   8. Utilities
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Brand palette --------------------------------------------------- */
  /* Client-specified: Deep Navy #1B365D, Clean White #FFFFFF, Cool Gray #E5E7EB.
     The tints and shades below are derived from those three so the whole site
     stays inside the brand while still having enough range to build hierarchy. */
  --navy-900: #0d1c31;
  --navy-700: #16294a;
  --navy:     #1b365d; /* brand primary */
  --navy-600: #274a7d;
  --navy-500: #35608f;
  --navy-300: #8ba3c4;
  --navy-100: #e7eef7;
  --navy-50:  #f4f7fb;

  /* Single restrained accent. Used for emphasis, rules and icons only —
     never for body text on white, where it would not meet contrast. */
  /* gold-600 is the only gold used as text on white, so it is darkened until it
     clears WCAG AA at small sizes (4.81:1). Do not lighten it. */
  --gold-600: #8a6f17;
  --gold:     #c9a227;
  --gold-100: #f8f1da;

  --white:    #ffffff;
  --gray-50:  #f8f9fb;
  --gray-100: #f1f3f6;
  --gray-200: #e5e7eb; /* client-specified Cool Gray */
  --gray-300: #d3d8df;
  --gray-500: #6b7280;
  --gray-600: #515a67;
  --gray-700: #374151;

  /* --- Semantic ---------------------------------------------------------- */
  --color-bg: var(--white);
  --color-bg-muted: var(--gray-50);
  --color-surface: var(--white);
  --color-text: var(--gray-700);
  --color-text-soft: var(--gray-500);
  --color-heading: var(--navy);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-brand: var(--navy);
  --color-on-brand: var(--white);
  --color-accent: var(--gold);

  /* --- Type -------------------------------------------------------------- */
  /* A transitional serif carries the top-level headings. In professional
     services it reads as established and considered where a geometric sans
     reads as a startup. Inter handles everything functional below it. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
  --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.9063rem;  /* 14.5px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px — default body on desktop */
  --text-lg:   1.1875rem;  /* 19px */
  --text-xl:   clamp(1.25rem, 1.16rem + 0.45vw, 1.4375rem);
  --text-2xl:  clamp(1.5rem, 1.36rem + 0.7vw, 1.875rem);
  --text-3xl:  clamp(1.75rem, 1.53rem + 1.1vw, 2.375rem);
  --text-4xl:  clamp(2.125rem, 1.72rem + 1.95vw, 3.125rem);

  --leading-tight: 1.18;
  --leading-snug: 1.32;
  --leading-normal: 1.62;
  --leading-relaxed: 1.72;

  /* The serif needs far less negative tracking than a geometric sans. */
  --tracking-tight: -0.008em;
  --tracking-snug: -0.011em;
  --tracking-wide: 0.09em;

  /* --- Space (4px base) -------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;

  /* Vertical rhythm between page sections, fluid across breakpoints. */
  --section-y: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);

  /* --- Shape ------------------------------------------------------------- */
  /* Tight radii read as precise and corporate; large ones read as consumer. */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 30, 54, 0.05);
  --shadow: 0 2px 8px rgba(16, 30, 54, 0.06), 0 1px 2px rgba(16, 30, 54, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 30, 54, 0.10), 0 2px 8px rgba(16, 30, 54, 0.05);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1160px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Stacking order ------------------------------------------------------
     One scale, declared in one place. Every overlay uses a token from here
     rather than an ad-hoc number, so layering stays predictable once plugins
     start injecting their own overlays.

     The band is deliberately high. Chat widgets, back-to-top buttons and
     notification bars routinely ship at 999-9999, and a menu you cannot reach
     is a broken site, so the menu clears that range.

     Two ceilings it stays under on purpose:
       - the WordPress admin bar at 99999, which logged-in editors need
       - cookie and consent banners, which must never be covered

     Order, lowest first: scrim < menu panel < header < skip link. The header
     sits above the panel so the close button stays clickable, and above the
     scrim so it is never dimmed. */
  --z-scrim: 30000;
  --z-mobile-nav: 30100;
  --z-header: 30200;
  --z-skip-link: 30300;

  /* Overwritten by JS from the header's real height before the menu opens. */
  --nav-top: 72px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
}

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

/* --- Icons --------------------------------------------------------------
   Every inline icon carries .icon. Without an explicit size an <svg> with a
   viewBox stretches to fill its container, so this rule is load-bearing, not
   cosmetic. Sizes are in em so icons track the text they sit beside. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}
.btn .icon { width: 1.05em; height: 1.05em; }
.topbar .icon { width: 0.95em; height: 0.95em; opacity: 0.75; }
.hero__trust .icon { width: 1em; height: 1em; color: var(--gold); }
.pillar__icon .icon { width: 22px; height: 22px; }
.card__icon .icon { width: 20px; height: 20px; }
.panel__title .icon { width: 20px; height: 20px; color: var(--navy-500); }
.feature__list .icon { width: 18px; height: 18px; color: var(--gold-600); margin-top: 0.28em; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--navy); }

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

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

::selection { background: var(--navy-100); color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Skip link — visible only on keyboard focus. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-5);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: var(--white); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

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

.section { padding-block: var(--section-y); }
.section--muted { background: var(--color-bg-muted); }

/* Sections hide themselves when empty, so which ones end up adjacent varies by
   page. Two of the same background in a row would merge into one block, so any
   such pair gets a hairline between it. */
.section--muted + .section--muted,
.section--tint + .section--tint,
.section:not([class*="--"]) + .section:not([class*="--"]) { border-top: 1px solid var(--color-border); }
/* Hairline between two consecutive plain sections, so the page reads as
   structured rather than as one continuous scroll. */
.section--bordered { border-top: 1px solid var(--color-border); }
.section--tint { background: var(--navy-50); }
.section--brand { background: var(--navy); color: var(--navy-100); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: var(--color-heading);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* Display level — serif. */
h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }

/* Working level — sans, so labels and card titles stay crisp at small sizes. */
h3, .h3, h4, .h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h3, .h3 { font-size: var(--text-xl); }
h4, .h4 { font-size: var(--text-lg); }

p { text-wrap: pretty; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--navy-500);
}
.eyebrow--on-brand { color: var(--gold); }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.lead--on-brand { color: var(--navy-100); }

.muted { color: var(--color-text-soft); }
.small { font-size: var(--text-sm); }

/* Section heading block: eyebrow + title + optional intro. */
.section-head { max-width: 46rem; margin-bottom: var(--space-8); }
.section-head > * + * { margin-top: var(--space-3); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Prose — for editor-managed body content on inner pages. */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}

.btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); box-shadow: var(--shadow); }

.btn--secondary { background: var(--white); border-color: var(--color-border-strong); color: var(--navy); }
.btn--secondary:hover { background: var(--navy-50); border-color: var(--navy-300); color: var(--navy); }

/* For use on navy backgrounds. */
.btn--invert { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--invert:hover { background: var(--navy-50); border-color: var(--navy-50); color: var(--navy); }

.btn--ghost-invert { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.btn--ghost-invert:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.6); color: var(--white); }

.btn--sm { padding: 0.5625rem 1rem; font-size: var(--text-sm); }
.btn--lg { padding: 0.9375rem 1.875rem; font-size: var(--text-lg); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

/* Text link with a moving arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--navy-600);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform var(--transition); }
.link-arrow:hover { color: var(--navy); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Top bar (phone / hours) ------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: var(--navy-300);
  font-size: var(--text-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
  flex-wrap: wrap;
}
.topbar a { color: var(--white); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--gold); }
.topbar__note { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Keeps the phone note hard right even when the hours note is not rendered. */
.topbar__inner > :last-child { margin-left: auto; }
@media (max-width: 640px) { .topbar { display: none; } }

/* --- Site header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy);
  letter-spacing: var(--tracking-tight);
}
.brand__tagline {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
@media (max-width: 400px) { .brand__text { display: none; } }

.site-header__logo-img { max-height: 44px; width: auto; }

/* --- Primary navigation ------------------------------------------------- */
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--space-1); }
.nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.nav a:hover { color: var(--navy); background: var(--navy-50); }
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--navy); }

/* --- Services dropdown (desktop) ----------------------------------------
   Opens on hover and on keyboard focus. `visibility` rather than `display` so
   the panel can transition, and so it stays out of the tab order while closed.

   Top-level items stretch to the full header height. That is what lets the
   panel sit exactly on the header's bottom edge: anchored to a centred, shorter
   item it starts 16px up and cuts into the header. Full height also removes the
   dead gap the pointer would otherwise cross on the way down. */
/* The <nav> is a centred flex child of the header row, so stretching inside it
   achieves nothing — the chain has to start with the nav itself. */
@media (min-width: 960px) {
  .site-header__inner > .nav { display: flex; align-self: stretch; }
  .site-header .nav > ul { height: 100%; align-items: stretch; gap: 0; }
  .site-header .nav > ul > li { display: flex; }
  .site-header .nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  .site-header .nav > ul > li > a:hover {
    background: transparent;
    color: var(--navy);
    border-bottom-color: var(--navy-300);
  }
  .site-header .nav > ul > .current-menu-item > a,
  .site-header .nav > ul > .current_page_item > a,
  .site-header .nav > ul > .current-menu-ancestor > a { border-bottom-color: var(--navy); }
}

.nav .menu-item-has-children { position: relative; }

.nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.4em; }
.nav .menu-item-has-children > a::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.14em) rotate(45deg);
  transition: transform var(--transition);
}
.nav .menu-item-has-children:hover > a::after,
.nav .menu-item-has-children:focus-within > a::after {
  transform: translateY(0.04em) rotate(225deg);
}

.nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 22rem;
  padding: var(--space-2);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav .sub-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius);
  font-weight: 500;
  color: var(--gray-700);
  white-space: normal;
}
.nav .sub-menu a:hover { background: var(--navy-50); color: var(--navy); }
.nav .sub-menu .current-menu-item > a { background: var(--navy-50); color: var(--navy); font-weight: 600; }

.sub-menu__label { flex: 1 1 auto; }
.sub-menu__price {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}
.nav .sub-menu a:hover .sub-menu__price { color: var(--navy-600); }

.nav .sub-menu .is-group-start {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.header-actions { display: none; align-items: center; gap: var(--space-3); }

@media (min-width: 960px) {
  .nav { display: block; }
  .header-actions { display: flex; }
}

/* --- Mobile navigation -------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* Must come after the base rule above: same specificity, so source order is
   what decides. Declared earlier it loses, and the hamburger shows on desktop
   beside the full nav. */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
}

/* Dimmer behind the open menu. Also the click-outside target. */
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(13, 28, 49, 0.5);
  opacity: 0;
  transition: opacity var(--transition);
  border: 0;
  padding: 0;
  cursor: default;
}
.nav-scrim.is-open { display: block; opacity: 1; }

/* Fixed to the viewport and a sibling of the header, not a child of it.
   Two reasons this matters: it escapes the header's stacking context so its
   z-index competes at the top level, and the header's backdrop-filter would
   otherwise become the containing block for any fixed descendant, anchoring
   this panel to the header instead of the viewport. */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: var(--z-mobile-nav);
  max-height: calc(100dvh - var(--nav-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--color-border);
  background: var(--white);
  box-shadow: 0 20px 40px rgba(13, 28, 49, 0.20);
  padding-block: var(--space-4) var(--space-6);
}
.mobile-nav.is-open { display: block; }

/* Stop the page scrolling behind the open menu. */
body.nav-open { overflow: hidden; }

.mobile-nav ul { display: flex; flex-direction: column; }

/* Scoped to the menu list only. As `.mobile-nav a` this also matched the two
   buttons underneath, forcing display:block over their flex layout (collapsing
   the phone icon to nothing) and repainting the navy "Get started" button with
   navy text — invisible on its own background. */
.mobile-nav nav a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.mobile-nav nav a:hover { color: var(--navy-600); padding-left: var(--space-2); }

/* Services children on mobile: indented and always visible. An accordion here
   would add a toggle, ARIA state and another way to get it wrong, to save a
   scroll inside a panel that already scrolls. */
.mobile-nav .sub-menu { padding-left: var(--space-4); }
.mobile-nav .sub-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--gray-700);
}
.mobile-nav .sub-menu li:last-child a { border-bottom: 0; }
.mobile-nav .sub-menu .sub-menu__price { font-size: var(--text-sm); }
.mobile-nav .menu-item-has-children > a { border-bottom: 0; }

.mobile-nav .btn-row { margin-top: var(--space-6); flex-direction: column; }
.mobile-nav .btn { width: 100%; }
@media (min-width: 960px) {
  .mobile-nav, .mobile-nav.is-open,
  .nav-scrim, .nav-scrim.is-open { display: none; }
}

/* --- Card --------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card > * + * { margin-top: var(--space-3); }
.card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--navy); letter-spacing: var(--tracking-snug); }
.card__text { font-size: var(--text-base); color: var(--color-text); }

/* Compact circular icon for service cards — smaller and lighter than the
   pillar icon so nine of them in a grid stay quiet. */
.card__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius);
  color: var(--navy-600);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Service card — whole card is the link target. No lift and no colour wipe:
   restraint reads as more established than motion does. */
.card--link { position: relative; }
.card--link:hover { border-color: var(--navy-300); box-shadow: var(--shadow); }
.card--link:hover .card__icon { background: var(--navy); border-color: var(--navy); color: var(--white); }
.card--link:focus-within { border-color: var(--navy-300); }
.card--link .card__title a { color: inherit; text-decoration: none; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; }

.card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.price { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--navy); letter-spacing: var(--tracking-tight); }
.price__unit { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-text-soft); letter-spacing: 0; }
.price--quote { font-size: var(--text-base); font-weight: 700; color: var(--gray-600); }

/* --- Pillars ------------------------------------------------------------ */
.pillar { display: flex; flex-direction: column; gap: var(--space-3); }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius);
  color: var(--navy);
}
.pillar__icon svg { width: 22px; height: 22px; }
.pillar__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--navy); letter-spacing: var(--tracking-snug); }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; }

.step { position: relative; padding-top: var(--space-6); }

/* Numbered disc, with a hairline running to the next step on wide screens. */
.step__num {
  counter-increment: step;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--navy);
  letter-spacing: 0;
}
.step__num::before { content: counter(step); }

.step::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 48px;
  right: calc(var(--space-5) * -1);
  height: 2px;
  background: var(--navy-100);
}
.step:last-child::after { display: none; }
@media (max-width: 899px) { .step::after { display: none; } }

.step { padding-top: 56px; }
.step__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--navy); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2); }
.step__text { font-size: var(--text-base); }

/* --- Included / excluded panel ------------------------------------------ */
.panel {
  padding: var(--space-7);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.panel--plain { background: transparent; border: 1px dashed var(--color-border-strong); box-shadow: none; }
.panel__title {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  color: var(--navy); letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-5);
}

.ticklist > li { position: relative; padding-left: 1.875rem; font-size: var(--text-base); }
.ticklist > li + li { margin-top: var(--space-3); }
.ticklist > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 1.125rem; height: 1.125rem;
  border-radius: var(--radius-pill);
  background: var(--navy-50) center / 0.7rem no-repeat;
  border: 1px solid var(--navy-100);
}
.ticklist--yes > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b365d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}
.ticklist--no > li::before {
  background-color: var(--gray-100);
  border-color: var(--gray-200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

/* --- Note / disclosure -------------------------------------------------- */
.note {
  padding: var(--space-4) var(--space-5);
  background: var(--gold-100);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-base);
  color: var(--gray-700);
}

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--navy-300); padding-block: var(--space-9) var(--space-6); }
.site-footer a { color: var(--navy-100); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer .brand__name { color: var(--white); }
.site-footer .brand__tagline { color: var(--navy-300); }
.site-footer .brand__mark { background: var(--white); color: var(--navy); }

.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.footer-col__title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-4);
}
.footer-col li + li { margin-top: var(--space-3); }
.footer-col .small { color: var(--navy-300); }

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}

/* ==========================================================================
   7. HOME PAGE SECTIONS
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--navy-100);
  padding-block: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Gradient wash sits over any background image so text contrast holds no
   matter what photo the client uploads. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(53, 96, 143, 0.55) 0%, rgba(27, 54, 93, 0) 60%),
    linear-gradient(180deg, rgba(13, 28, 49, 0.82) 0%, rgba(18, 37, 63, 0.92) 100%);
}
/* Drawn ridge along the bottom edge — a Montana cue that needs no photograph. */
.ridge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: -1;
  width: 100%;
  height: clamp(70px, 9vw, 130px);
  pointer-events: none;
}
.ridge__far { fill: rgba(255, 255, 255, 0.05); }
.ridge__near { fill: rgba(255, 255, 255, 0.08); }

/* Left-aligned, two column. A centred mega-headline reads as a marketing page;
   copy on the left with a factual card on the right reads as a firm. */
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); }
}

.hero__body > * + * { margin-top: var(--space-5); }
.hero h1 { color: var(--white); max-width: 18ch; }
.hero .lead { max-width: 46ch; }
.hero__title-accent { color: var(--gold); }
.hero .btn-row { margin-top: var(--space-7); }

.hero__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--navy-100);
}

/* --- Hero spec card ------------------------------------------------------ */
.hero__card {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 44px rgba(6, 16, 30, 0.28);
}
.hero__card-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.hero__card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-bottom: var(--space-5);
}
.hero__card-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.25rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}
.hero__card-unit { font-size: var(--text-base); color: var(--navy-100); }

.hero__card-rows { margin: 0; }
.hero__card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: var(--text-base);
}
.hero__card-row dt { color: var(--navy-300); }
.hero__card-row dd { margin: 0; color: var(--white); font-weight: 600; text-align: right; }

.hero__card-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: var(--text-sm);
  color: var(--navy-300);
}

/* --- Included section --------------------------------------------------- */
.included-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 860px) { .included-grid { grid-template-columns: 1.35fr 1fr; gap: var(--space-6); } }

.page-figure {
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.page-figure img { width: 100%; height: auto; }
.page-figure--overlap { margin-top: var(--section-y); margin-bottom: 0; }

/* --- Inner page header ---------------------------------------------------
   Quieter than the home hero: light ground, navy type, a hairline to close it. */
.page-header {
  padding-block: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
  background: var(--navy-50);
  border-bottom: 1px solid var(--navy-100);
}
.page-header__inner { max-width: 44rem; }
.page-header__inner > * + * { margin-top: var(--space-4); }
.page-header h1 { font-size: var(--text-3xl); }

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-soft); }
.breadcrumb li + li::before { content: "/"; color: var(--navy-300); }
.breadcrumb a { color: var(--navy-600); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--gray-700); font-weight: 500; }

/* --- Service page header: copy beside a summary box ---------------------- */
.service-head { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 940px) {
  .service-head { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-8); }
  /* No summary box: one column, so the intro is not squeezed beside an empty one. */
  .service-head--solo { grid-template-columns: 1fr; }
}
/* The button that replaces the summary box sits a little further from the intro
   than the intro sits from the heading. */
.page-header__inner > .btn-row { margin-top: var(--space-6); }

.glance {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.glance__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
}
.glance__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--navy);
  letter-spacing: var(--tracking-tight);
}
.glance__unit { font-size: var(--text-base); color: var(--color-text-soft); }

.glance__rows { margin: 0; }
.glance__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.glance__row dt { color: var(--color-text-soft); }
.glance__row dd { margin: 0; color: var(--navy); font-weight: 600; text-align: right; }

.glance__cta { width: 100%; margin-top: var(--space-5); }

/* Single detail row. The two-column label/value split reads as lopsided when
   there is only one row and its value is a full sentence, so stack it: caption
   above, sentence below, both left-aligned. */
.glance--single .glance__row {
  display: block;
  padding-block: var(--space-5) var(--space-4);
}
.glance--single .glance__row dt {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.glance--single .glance__row dd {
  text-align: left;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* --- Two-column split: prose beside a panel ------------------------------ */
.split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); }
  .split--narrow { grid-template-columns: 1fr 1fr; }
  /* One column when the second would be empty. */
  .split--single { grid-template-columns: 1fr; }
  .split--single > .panel { max-width: 44rem; }
}

/* --- Stacked steps -------------------------------------------------------
   The grid layout on the home page tops out at four. A service page can have
   six, so these run vertically with the rule joining them. */
.steps--stacked { counter-reset: step; }
.steps--stacked .step {
  padding: 0 0 var(--space-7) 60px;
  border-top: 0;
}
.steps--stacked .step:last-child { padding-bottom: 0; }
.steps--stacked .step__num { top: 0; left: 0; }
.steps--stacked .step::after {
  top: 46px;
  left: 19px;
  right: auto;
  bottom: 6px;
  width: 2px;
  height: auto;
  background: var(--navy-100);
  display: block;
}
.steps--stacked .step:last-child::after { display: none; }

/* --- Contact page --------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-9); }
}

.contact-list > li + li {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.contact-list__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-1);
}
.contact-list__value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
a.contact-list__value:hover { color: var(--navy-600); text-decoration: underline; }

/* --- Forms ---------------------------------------------------------------- */
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { margin-bottom: var(--space-5); }
.form__row .field { margin-bottom: 0; }
.form__row { margin-bottom: var(--space-5); }

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--navy);
}
.field__req { color: var(--gold-600); }
.field__opt { font-weight: 400; color: var(--color-text-soft); font-size: var(--text-sm); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--navy-300); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-100);
}
.field [aria-invalid="true"] { border-color: #b3261e; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); }

.field__error { margin-top: var(--space-2); font-size: var(--text-sm); color: #b3261e; }

/* Honeypot. Off-screen rather than display:none, which some bots detect. */
.form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-base);
}
.alert--success { background: var(--navy-50); border-left: 3px solid var(--navy); color: var(--gray-700); }
.alert--success .icon { color: var(--navy); margin-top: 0.2em; }
.alert--error { background: #fdecea; border-left: 3px solid #b3261e; color: #7f1d1a; }

/* --- Link list -----------------------------------------------------------
   A quieter way to list the services on a page that is not the services hub. */
.link-list { display: grid; }
@media (min-width: 720px) {
  .link-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-9); }
}
.link-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.link-list a:hover { color: var(--navy-600); padding-left: var(--space-2); }
.link-list__price {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Stats --------------------------------------------------------------- */
.stats { display: grid; gap: var(--space-6); margin: 0; }
@media (min-width: 560px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.stat { display: flex; flex-direction: column-reverse; gap: var(--space-2); }
.stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--navy);
  letter-spacing: var(--tracking-tight);
}
.stat__label { font-size: var(--text-sm); color: var(--color-text-soft); }

/* --- Chips --------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  padding: 0.5rem 1rem;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--navy);
}

/* --- Feature band: picture beside copy ----------------------------------- */
.feature__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .feature__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}

.feature__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* Shown until a photograph is uploaded. Designed to look deliberate rather
   than like a missing image. */
.feature__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
  background:
    radial-gradient(90% 80% at 50% 15%, rgba(53, 96, 143, 0.55), rgba(27, 54, 93, 0) 70%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
}
/* The ridge sits behind the stat but in front of the panel's own gradient, so
   it needs a positive z-index here rather than the -1 it uses in the hero. */
.feature__placeholder .ridge { z-index: 0; }
.feature__placeholder > :not(.ridge) { position: relative; z-index: 1; }

.feature__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 6vw, 5.5rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}
.feature__stat-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--gold);
}
.feature__stat-note {
  font-size: var(--text-sm);
  color: var(--navy-300);
  max-width: 22rem;
}

.feature__list { margin-top: var(--space-6); }
.feature__list li { display: flex; gap: var(--space-3); font-size: var(--text-base); }
.feature__list li + li { margin-top: var(--space-4); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--navy); color: var(--navy-100); padding-block: var(--space-9); }
.cta-band__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1.5fr auto; } }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--navy-100); margin-top: var(--space-3); }

/* ==========================================================================
   8. MOTION
   --------------------------------------------------------------------------
   Restrained on purpose: short, small, and ease-out only. The brand is meant to
   read as established, and heavy motion undercuts that faster than anything.

   Everything here is gated behind the .js class, which is set by a one-line
   script in the document head. Without JavaScript no element is ever hidden,
   so the page degrades to plain static content rather than a blank screen.
   ========================================================================== */

:root {
  --reveal-distance: 14px;
  --reveal-duration: 520ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ra-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ra-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ra-menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Reveal on scroll ----------------------------------------------------
   data-reveal is applied by JS, and only when the browser supports
   IntersectionObserver and the visitor has not asked for reduced motion. If
   either is false the attribute is never added and this rule never applies. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Above-the-fold entrances -------------------------------------------
   These run on load rather than on scroll, because the reader is already
   looking at them. `both` fill keeps the start state before the delay. */
.js .hero__body > *,
.js .hero__card,
.js .page-header__inner > *,
.js .glance {
  animation: ra-rise 600ms var(--ease-out) both;
}
.js .hero__body > *:nth-child(1), .js .page-header__inner > *:nth-child(1) { animation-delay: 40ms; }
.js .hero__body > *:nth-child(2), .js .page-header__inner > *:nth-child(2) { animation-delay: 110ms; }
.js .hero__body > *:nth-child(3), .js .page-header__inner > *:nth-child(3) { animation-delay: 180ms; }
.js .hero__body > *:nth-child(4), .js .page-header__inner > *:nth-child(4) { animation-delay: 250ms; }
.js .hero__body > *:nth-child(5) { animation-delay: 320ms; }
.js .hero__card, .js .glance { animation-delay: 280ms; }
.js .breadcrumb { animation: ra-fade 500ms var(--ease-out) both; }

/* --- Sticky header gains a shadow once the page moves -------------------- */
.site-header { transition: box-shadow var(--transition), border-color var(--transition); }
.site-header.is-stuck {
  box-shadow: 0 1px 0 rgba(16, 30, 54, 0.04), 0 10px 28px rgba(16, 30, 54, 0.07);
  border-bottom-color: transparent;
}

/* --- Mobile menu --------------------------------------------------------- */
.mobile-nav.is-open { animation: ra-menu-in 220ms var(--ease-out) both; }
.nav-scrim.is-open { animation: ra-fade 220ms ease-out both; }

/* --- Respect the visitor's preference -----------------------------------
   The global reduced-motion rule near the top collapses transition and
   animation durations. On its own that would strand a reveal element at
   opacity 0 if the observer never fired, so opt these out explicitly. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .hero__body > *,
  .js .hero__card,
  .js .page-header__inner > *,
  .js .glance,
  .js .breadcrumb,
  .mobile-nav.is-open,
  .nav-scrim.is-open {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   9. UTILITIES
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }