@charset "UTF-8";
/* ==========================================================================
   Elite1 / Elite Mobile DOT Services — Design System + Site Styles
   Author: Nexavorix (v0 draft)
   Structure:
     01. Tokens
     02. Reset & base
     03. Typography
     04. Layout utilities
     05. Buttons & links
     06. Header / navigation
     07. Footer
     08. Cards & content components
     09. Accordion (FAQ)
     10. Forms
     11. Tables
     12. Page sections (hero, CTA band, steps, etc.)
     13. Utilities & motion
   Mobile-first. All colors meet WCAG 2.1 AA against their stated background.
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* --- Brand palette -------------------------------------------------- */
  --brand-navy: #0b2c4d;        /* 14.2:1 with white text */
  --brand-navy-700: #082238;
  --brand-navy-050: #eef3f8;

  --brand-blue: #10559a;        /* 7.5:1 on white — safe for body links */
  --brand-blue-700: #0d4680;
  --brand-blue-100: #e7f0f9;
  --brand-blue-050: #f3f8fd;

  --brand-green: #0f7b5f;       /* 5.2:1 on white — safe for text 16px+ */
  --brand-green-700: #0b6450;
  --brand-green-100: #e5f3ee;
  --brand-green-050: #f2faf7;

  /* Gold is DECORATIVE ONLY on light backgrounds (2.4:1).
     Use for rules, icons, badges on navy, and small ornaments — never body text on white. */
  --brand-gold: #c9a227;
  --brand-gold-200: #f0deae;
  --brand-gold-050: #fbf6e7;

  /* --- Neutrals ------------------------------------------------------- */
  --ink: #12212f;               /* 15.4:1 on white */
  --ink-2: #3f5060;             /* 8.3:1 on white  */
  --ink-3: #5e6e7d;             /* 5.2:1 on white  */
  --line: #dce4ec;
  --line-strong: #c3d0dc;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --surface-3: #eaf1f7;

  --danger: #a4262c;
  --danger-050: #fdf3f3;
  --focus-ring: #0b6bd3;

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-accent: "Caveat", "Segoe Script", cursive;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9062rem;   /* ~14.5px */
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.0625rem, 0.99rem + 0.34vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem);
  --text-h4: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --text-h3: clamp(1.3125rem, 1.19rem + 0.56vw, 1.625rem);
  --text-h2: clamp(1.625rem, 1.34rem + 1.24vw, 2.375rem);
  --text-h1: clamp(2rem, 1.55rem + 2.05vw, 3.25rem);
  --text-display: clamp(2.125rem, 1.55rem + 2.6vw, 3.625rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* --- Space scale (4px base) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-y: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --container: 78rem;      /* 1248px */
  --container-narrow: 52rem;
  --gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);

  /* --- Radius & shadow ------------------------------------------------ */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.625rem;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 44, 77, 0.06);
  --shadow-sm: 0 1px 2px rgba(11, 44, 77, 0.06), 0 2px 6px rgba(11, 44, 77, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 44, 77, 0.05), 0 8px 20px rgba(11, 44, 77, 0.08);
  --shadow-lg: 0 4px 8px rgba(11, 44, 77, 0.05), 0 18px 42px rgba(11, 44, 77, 0.12);

  --transition: 180ms cubic-bezier(0.33, 0.1, 0.25, 1);
  --header-h: 4.5rem;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

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

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

/* Visible, consistent focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 999;
  transform: translateY(-160%);
  background: var(--brand-navy);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--brand-navy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); font-weight: 700; }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); font-weight: 700; }
h5 { font-size: var(--text-base); font-weight: 700; }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

.lead {
  font-size: var(--text-lg);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--brand-gold);
  border-radius: 2px;
}
.eyebrow--on-dark { color: var(--brand-gold-200); }

/* Marker-style accent — short highlights only, never long copy (client preference).
   House rule: use it INSTEAD of .eyebrow, never stacked with one, and never on
   pricing figures, disclaimers or compliance wording. One per section, maximum. */
.accent-script {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--brand-green);
  letter-spacing: 0;
}
.accent-script--on-dark { color: var(--brand-gold-200); }

/* Section-kicker size: sits above an h2 where .eyebrow would otherwise go. */
.accent-script--sm {
  font-size: clamp(1.25rem, 1.12rem + 0.62vw, 1.5625rem);
  margin-bottom: var(--space-2);
}

/* One step below --sm. Used where the script sits directly above a large heading
   and was reading as a competing title rather than an eyebrow. */
.accent-script--xs {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  margin-bottom: var(--space-3);
}

/* Optional hand-drawn underline for a single standout phrase. */
.accent-script--underline {
  display: inline-block;
  padding-bottom: 0.32em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5c34-4 68-5.6 102-4.6 30 .9 60 3.2 92 5.4' fill='none' stroke='%23c9a227' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.42em;
}

.section-head--center .accent-script { display: block; }

a {
  color: var(--brand-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}
a:hover { color: var(--brand-blue-700); }

strong, b { color: var(--ink); font-weight: 650; }

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); }
.prose ul:not([class]) { padding-left: 1.25rem; }
.prose ul:not([class]) li + li { margin-top: var(--space-2); }

/* ==========================================================================
   04. LAYOUT UTILITIES
   ========================================================================== */
.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--tight { padding-block: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); }
.section--alt { background: var(--surface-2); }
.section--tint { background: linear-gradient(180deg, var(--brand-blue-050), var(--surface)); }
.section--navy {
  background: var(--brand-navy);
  color: #d7e3ee;
}
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: #fff; }

.section-head { max-width: 46rem; margin-bottom: var(--space-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-4); font-size: var(--text-lg); }

.grid { display: grid; gap: var(--space-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40em) {
  .grid { gap: var(--space-6); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
/*
 * Grid items default to min-width:auto, so a child wider than the track (a
 * pricing table inside .table-wrap) pushes the track past the viewport instead
 * of letting the child scroll inside itself. That put 175px of horizontal
 * overflow on the homepage and /services at phone widths.
 */
.split > * { min-width: 0; }
@media (min-width: 62em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split--media-first > .split__media { order: -1; }
}

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

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--gap-lg { gap: var(--space-5); }

.text-center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.visually-hidden {
  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;
}

/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8125rem 1.5rem;
  min-height: 2.875rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn svg { flex: none; width: 1.125em; height: 1.125em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--brand-blue-700);
  border-color: var(--brand-blue-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn--green {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--green:hover {
  background: var(--brand-green-700);
  border-color: var(--brand-green-700);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--brand-navy);
}
.btn--outline:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue-700);
  background: var(--brand-blue-050);
}

.btn--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-navy);
}

.btn--gold {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #22190a;              /* dark ink on gold = 8.9:1 */
}
.btn--gold:hover {
  background: #b78f19;
  border-color: #b78f19;
  color: #22190a;
}

.btn--sm { padding: 0.5rem 1rem; min-height: 2.375rem; font-size: var(--text-sm); }
.btn--full { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--brand-blue);
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--transition);
}
.link-arrow:hover { color: var(--brand-blue-700); text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   06. HEADER / NAVIGATION
   ========================================================================== */
.topbar {
  background: var(--brand-navy);
  color: #cfdcea;
  font-size: var(--text-xs);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  padding-block: 0.5rem;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.topbar__item svg { width: 0.95rem; height: 0.95rem; color: var(--brand-gold); flex: none; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--brand-gold-200); text-decoration: underline; }
.topbar__item--optional { display: none; }
@media (min-width: 48em) {
  .topbar__inner { justify-content: space-between; }
  .topbar__item--optional { display: inline-flex; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
.brand img { width: auto; height: 2.5rem; }
@media (min-width: 48em) { .brand img { height: 2.875rem; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color var(--transition);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), top var(--transition);
}
.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); }

/* --- Mobile nav panel ------------------------------------------------- */
.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--gutter) var(--space-6);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.site-nav.is-open { display: block; }

.site-nav__list { display: flex; flex-direction: column; }
.site-nav__item { border-bottom: 1px solid var(--line); }

.site-nav__link,
.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 0.875rem 0.25rem;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--brand-navy);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link:hover,
.site-nav__toggle:hover { color: var(--brand-blue); }
.site-nav__link[aria-current="page"] { color: var(--brand-blue); }

.site-nav__chevron {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  transition: transform var(--transition);
}
[aria-expanded="true"] > .site-nav__chevron { transform: rotate(180deg); }

.submenu {
  display: none;
  padding: 0 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--brand-gold);
  margin-left: 0.25rem;
}
.submenu.is-open { display: block; }
.submenu a {
  display: block;
  padding: 0.625rem 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.submenu a:hover,
.submenu a[aria-current="page"] { color: var(--brand-blue); }
.submenu span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.4;
}

.site-nav__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- Desktop nav ------------------------------------------------------ */
@media (min-width: 62em) {
  .nav-toggle { display: none; }

  .site-nav {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    max-height: none;
    overflow: visible;
  }
  /* Wrap rather than overflow: the nav now carries 6 items plus two CTA
     buttons, which is tight at this breakpoint on narrower laptops. */
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
  .site-nav__item { border: 0; position: relative; }

  .site-nav__link,
  .site-nav__toggle {
    width: auto;
    padding: 0.5rem 0.6875rem;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
  }
  .site-nav__link:hover,
  .site-nav__toggle:hover { background: var(--brand-blue-050); }
  .site-nav__link[aria-current="page"] { background: var(--brand-blue-100); }

  .submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    width: 20rem;
    padding: var(--space-3);
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand-gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .submenu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  .submenu a { padding: var(--space-3); border-radius: var(--radius-sm); }
  .submenu a:hover { background: var(--brand-blue-050); }

  .site-nav__cta { flex-direction: row; margin-top: 0; }
}

/* ==========================================================================
   07. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--brand-navy);
  color: #c3d3e2;
  font-size: var(--text-sm);
  padding-top: var(--section-y);
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: #e7eef5; text-decoration: none; }
.site-footer a:hover { color: var(--brand-gold-200); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-10); } }

.footer-brand img { height: 3rem; width: auto; margin-bottom: var(--space-4); }

.footer-heading {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-gold-200);
  margin-bottom: var(--space-4);
}

.footer-list li + li { margin-top: var(--space-2); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.footer-contact li + li { margin-top: var(--space-3); }
.footer-contact svg {
  width: 1.0625rem;
  height: 1.0625rem;
  color: var(--brand-gold);
  flex: none;
  margin-top: 0.2rem;
}

.social-list { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social-list a {
  display: inline-grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
}
.social-list a:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--brand-gold); }
.social-list svg { width: 1.0625rem; height: 1.0625rem; }

/* BBB Accredited Business seal. Self-contained badge with its own background,
   so it sits on the navy footer without a containment plate. */
.bbb-seal { display: inline-block; margin-top: var(--space-5); border-radius: 4px; }
.bbb-seal img { width: 160px; height: auto; }
.bbb-seal:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }

.review-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 40em) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.review blockquote { margin: 0; flex: 1 1 auto; }
.review blockquote p { color: var(--ink-2); }
.review__stars { color: var(--brand-gold); font-size: 1.125rem; letter-spacing: 0.08em; line-height: 1; }
.review__by { font-weight: 700; color: var(--brand-navy); font-size: var(--text-sm); }
.review__by span { font-weight: 400; color: var(--ink-3); }
.text-center { text-align: center; }

.review-stars { font-size: 2rem; letter-spacing: 0.12em; color: var(--brand-gold); line-height: 1; margin-bottom: var(--space-4); }
.cluster--center { justify-content: center; }

.footer-note {
  margin-top: var(--space-10);
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: #b4c6d6;
}

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

/* Agency credit. Sits on its own line at the widest sizes so it reads as a
   credit rather than a fourth site link. */
.footer-credit { color: #8fa4b8; }
.footer-credit a { color: #c3d3e2; text-decoration: none; font-weight: 600; }
.footer-credit a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 62em) { .footer-credit { flex-basis: 100%; text-align: right; margin-top: calc(var(--space-3) * -1); } }

/* ==========================================================================
   08. CARDS & CONTENT COMPONENTS
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card h3 { font-size: var(--text-h4); }
.card p { font-size: var(--text-base); margin: 0; }
.card--link:hover,
.card--link:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-blue-100);
}
.card__foot { margin-top: auto; padding-top: var(--space-2); }

/* Whole-card click target that keeps the link accessible */
.card--link .stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card--link { position: relative; }

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--brand-blue-100);
  color: var(--brand-blue-700);
  flex: none;
}
.card-icon svg { width: 1.5rem; height: 1.5rem; }
.card-icon--green { background: var(--brand-green-100); color: var(--brand-green-700); }
.card-icon--gold { background: var(--brand-gold-050); color: #7a6110; }
.card-icon--navy { background: var(--brand-navy-050); color: var(--brand-navy); }

.card--audience {
  border-top: 4px solid var(--brand-blue);
}
.card--audience:nth-child(2) { border-top-color: var(--brand-green); }
.card--audience:nth-child(3) { border-top-color: var(--brand-gold); }
.card--audience:nth-child(4) { border-top-color: var(--brand-navy); }

.card--flat {
  box-shadow: none;
  background: var(--surface-2);
  border-color: transparent;
}

/* Icon/feature list */
.icon-list { display: grid; gap: var(--space-3); }
.icon-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-base);
}
.icon-list li::before {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b6450' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
  background-size: 1.375rem 1.375rem;
}
.icon-list--tight li { font-size: var(--text-sm); }
.icon-list--on-dark li::before {
  background-color: rgba(201, 162, 39, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f0deae' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
}
@media (min-width: 48em) {
  .icon-list--2col { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }
}

/* Chips / badges */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
}
.chip svg { width: 0.9rem; height: 0.9rem; color: var(--brand-green); flex: none; }
.chip--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #e2ebf3;
}
.chip--on-dark svg { color: var(--brand-gold); }

/* Callout / disclaimer */
.callout {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-blue-100);
  border-left: 4px solid var(--brand-blue);
  background: var(--brand-blue-050);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.callout h2, .callout h3, .callout h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.callout--gold {
  border-color: var(--brand-gold-200);
  border-left-color: var(--brand-gold);
  background: var(--brand-gold-050);
}
.callout--green {
  border-color: var(--brand-green-100);
  border-left-color: var(--brand-green);
  background: var(--brand-green-050);
}
.callout--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: var(--brand-gold);
  color: #cddbe8;
}
/* Headings default to --brand-navy, which is invisible here. Must be reset. */
.callout--on-dark h2,
.callout--on-dark h3,
.callout--on-dark h4,
.callout--on-dark strong { color: #ffffff; }
.callout--on-dark a { color: var(--brand-gold-200); }

/* Placeholder marker for unverified content */
.placeholder-flag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--brand-gold-050);
  border: 1px dashed #9a7c14;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b5510;   /* 6.4:1 on the gold-050 tint */
  letter-spacing: 0.01em;
}

/* Media frames */
.media-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-3);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--sm { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.media-badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  right: var(--space-4);
  padding: var(--space-4);
  background: rgba(11, 44, 77, 0.92);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.media-badge strong { color: var(--brand-gold-200); display: block; }

/* Stat strip */
.stat-strip {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 62em) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.1;
}
.stat__label { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-2); }

/* Partner logo wall (text-based until real logos are supplied) */
.partner-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 48em) { .partner-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .partner-wall { grid-template-columns: repeat(6, 1fr); } }
.partner-wall li {
  display: grid;
  place-items: center;
  min-height: 4.25rem;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--brand-navy);
  text-align: center;
}

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--space-6); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, 1fr); } }
/* Three across from 62em. Four across only from 75em: between 992px and 1200px
   four columns are ~200px wide, which forces every heading to wrap no matter how
   short the copy is, so below 1200px this falls back to the 2-up layout. */
@media (min-width: 62em) {
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 75em) {
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 62em) {
  .steps--3, .steps--4 { column-gap: var(--space-12); row-gap: var(--space-10); }

  /* Safety net for the widths where a heading still wraps: subgrid gives every
     step the same two parent rows, so row 1 is as tall as the tallest heading
     and all the paragraphs start level. When nothing wraps, row 1 is one line
     tall and this costs nothing. Skipped entirely without subgrid support. */
  @supports (grid-template-rows: subgrid) {
    .steps--3, .steps--4 { grid-template-rows: auto auto; }
    .steps--3 > .step,
    .steps--4 > .step {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      /* A subgrid inherits the parent's 40px row-gap; that belongs BETWEEN rows
         of steps, not between a heading and its own paragraph. */
      row-gap: var(--space-3);
    }
    .steps--3 > .step > h3,
    .steps--4 > .step > h3 { margin-bottom: 0; align-self: start; }
  }
}

.step {
  /* The number badge is absolutely positioned at top:0 and is --step-badge tall,
     so the content must clear it. This padding was 2rem against a 2.5rem badge,
     which let the number overlap the heading by 8px. Derived from the badge size
     now so the two cannot drift apart again. */
  --step-badge: 2.5rem;
  position: relative;
  padding-top: calc(var(--step-badge) + var(--space-5));
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--step-badge);
  height: var(--step-badge);
  border-radius: var(--radius-pill);
  background: var(--brand-navy);
  color: var(--brand-gold-200);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
}
.step h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.step p { font-size: var(--text-base); }
.steps--on-dark .step::before { background: var(--brand-gold); color: #22190a; }

/* Breadcrumbs */
.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "›"; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { color: var(--brand-blue); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--brand-navy); font-weight: 600; }

/* Quick "on this page" nav */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.jump-nav a {
  padding: 0.375rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.jump-nav a:hover { background: var(--brand-blue-050); border-color: var(--brand-blue); color: var(--brand-blue-700); }

/* Testimonial slot (structure only — real reviews to be added by client) */
.testimonial {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.testimonial blockquote { font-size: var(--text-lg); color: var(--ink); line-height: 1.55; }
.testimonial figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-3); }

.review-slot {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* ==========================================================================
   09. ACCORDION (native <details> — no JS required)
   ========================================================================== */
.accordion { display: grid; gap: var(--space-3); }

.accordion__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion__item[open] { border-color: var(--brand-blue-100); box-shadow: var(--shadow-sm); }

.accordion__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--brand-navy);
  cursor: pointer;
  list-style: none;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary:hover { background: var(--brand-blue-050); }
.accordion__item summary::after {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.1rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-blue-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230d4680' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  background-size: 1.375rem 1.375rem;
  transition: transform var(--transition);
}
.accordion__item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230d4680' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 10h10'/%3E%3C/svg%3E");
}
.accordion__body {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-base);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.accordion__body > * + * { margin-top: var(--space-3); }
.accordion__body ul { padding-left: 1.25rem; }
.accordion__body li + li { margin-top: var(--space-2); }

/* ==========================================================================
   10. FORMS
   ========================================================================== */
.form-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 48em) { .form-card { padding: var(--space-8); } }

.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 48em) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field label,
.fieldset-legend {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--brand-navy);
}
.field .hint {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-3);
  font-family: var(--font-body);
}
.req { color: var(--danger); font-weight: 700; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9375rem;
  min-height: 2.875rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233f5060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
}
.field input::placeholder,
.field textarea::placeholder { color: #8493a1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(16, 85, 154, 0.18);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--danger); }

.field-error {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--danger);
  min-height: 1em;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.choice-grid { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 34em) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.8125rem var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.choice:hover { border-color: var(--brand-blue); background: var(--brand-blue-050); }
.choice input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; accent-color: var(--brand-blue); }
.choice:has(input:checked) {
  border-color: var(--brand-blue);
  background: var(--brand-blue-050);
  color: var(--brand-navy);
}
.choice:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-2);
}
.consent input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; accent-color: var(--brand-blue); }

/* Honeypot — visually and programmatically hidden from real users */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
}
.form-status--error { background: var(--danger-050); border: 1px solid #e6bcbe; color: #7d1d22; }
.form-status--ok { background: var(--brand-green-050); border: 1px solid var(--brand-green-100); color: var(--brand-green-700); }
.form-status a { color: inherit; }

/* Server responses are shown with :target, so the confirmation works with JS disabled.
   form-handler.php redirects (303) to /contact#sent or /contact#send-error. */
.form-status[id] { display: none; }
.form-status[id]:target { display: block; }

/* ==========================================================================
   11. TABLES
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
caption {
  padding: var(--space-4) var(--space-5) 0;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
th, td {
  padding: 0.875rem var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-navy);
  white-space: nowrap;
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 650; color: var(--ink); }

/* ==========================================================================
   12. PAGE SECTIONS
   ========================================================================== */
/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 1.9rem + 4vw, 5rem);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(16, 85, 154, 0.10), transparent 60%),
    radial-gradient(45rem 26rem at 5% 105%, rgba(15, 123, 95, 0.10), transparent 62%),
    var(--surface);
  overflow: hidden;
}
.hero__grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 62em) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
}
.hero h1 { margin-bottom: var(--space-5); font-size: var(--text-display); }
.hero .lead { margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero__media { position: relative; }
.hero__proof {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Compact hero for interior pages */
.page-hero {
  padding-block: clamp(2.5rem, 1.8rem + 3.4vw, 4.25rem);
  background:
    radial-gradient(48rem 22rem at 88% 0%, rgba(201, 162, 39, 0.10), transparent 65%),
    linear-gradient(160deg, var(--brand-navy) 0%, #0d3a63 100%);
  color: #cfdcea;
}
.page-hero h1 { color: #fff; margin-bottom: var(--space-4); }
/* Defensive: anything else that lands in the dark hero must stay legible. */
.page-hero h2,
.page-hero h3,
.page-hero h4 { color: #fff; }
.page-hero .lead { color: #cfdcea; }
.page-hero p { color: #cfdcea; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.page-hero__grid { display: grid; gap: var(--space-8); }
@media (min-width: 62em) {
  .page-hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-12); align-items: center; }
}

/* --- CTA band ---------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(40rem 20rem at 10% 0%, rgba(15, 123, 95, 0.35), transparent 60%),
    linear-gradient(135deg, var(--brand-navy) 0%, #0e3f6d 100%);
  color: #d7e3ee;
}
.cta-band__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: clamp(2.5rem, 1.9rem + 3vw, 4rem);
}
@media (min-width: 62em) {
  .cta-band__inner { grid-template-columns: 1.35fr auto; gap: var(--space-12); }
}
.cta-band h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Service detail blocks --------------------------------------------- */
.service-block {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-10);
  border-top: 1px solid var(--line);
}
.service-block:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 62em) {
  .service-block { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); }
}
.service-block__head h2 { font-size: var(--text-h3); }
.service-block__head p { margin-top: var(--space-3); font-size: var(--text-base); }

/* --- Contact detail list ----------------------------------------------- */
.contact-methods { display: grid; gap: var(--space-4); }
.contact-method {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.contact-method h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.contact-method p { font-size: var(--text-sm); margin: 0; }
.contact-method a { font-weight: 650; }

/* --- Map placeholder ---------------------------------------------------- */
.map-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.map-card img { width: 100%; }

/* Live Google Maps embed. A fixed aspect keeps the card the same shape the
   drawn placeholder had, so nothing reflows when the iframe loads. */
.map-card--live { aspect-ratio: 4 / 3; }
.map-card__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 404 ---------------------------------------------------------------- */
.error-page {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem);
  background:
    radial-gradient(48rem 24rem at 50% 0%, rgba(16, 85, 154, 0.10), transparent 65%),
    var(--surface);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-navy-050);
  -webkit-text-stroke: 2px var(--brand-blue-100);
}

/* ==========================================================================
   13. UTILITIES & MOTION
   ========================================================================== */
.no-wrap { white-space: nowrap; }
.text-muted { color: var(--ink-3); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.max-60 { max-width: 60ch; }

.divider {
  height: 1px;
  border: 0;
  background: var(--line);
  margin-block: var(--space-8);
}
.divider--gold {
  height: 3px;
  width: 3.5rem;
  background: var(--brand-gold);
  border-radius: 2px;
  margin: 0 0 var(--space-5);
}

@media print {
  .topbar, .site-header, .site-footer, .cta-band, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

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

@media (forced-colors: active) {
  .btn, .card, .accordion__item, .field input, .field select, .field textarea { border: 1px solid; }
  .icon-list li::before { forced-color-adjust: none; }
}

/* ==========================================================================
   18b. APPLICATION FORM — numbered section cards
   A long form needs rhythm. Each fieldset becomes its own card with a numbered
   badge and a real heading, so six sections read as six steps rather than one
   undifferentiated wall.
   ========================================================================== */

.form-sections { counter-reset: formstep; display: grid; gap: var(--space-6); }

.form-section {
  counter-increment: formstep;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0;
}
@media (min-width: 48em) {
  .form-section { padding: var(--space-8); }
}

.form-section__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.form-section__head::before {
  content: counter(formstep);
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
}

.form-section__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--brand-navy);
  margin: 0;
  line-height: var(--leading-tight);
}
.form-section__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* Optional-section flag, e.g. "only if you have a permanent site" */
.form-section--optional .form-section__head::before { background: var(--ink-3); }

/* ==========================================================================
   19. CHECKBOX GRIDS — network application form
   Multi-select groups (51 states, services, laboratories) rendered as real
   checkboxes so the form works with no JavaScript at all.
   ========================================================================== */

.checkbox-group-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.checkbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.checkbox-toolbar__count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
  margin-left: auto;
}

/* --- State picker, grouped by region so 51 options stay scannable -------- */
.state-regions { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .state-regions { grid-template-columns: repeat(2, 1fr); } }

.state-region {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--surface-2);
}
.state-region__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.state-region__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--brand-navy);
  margin: 0;
}
.state-region__all {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.state-region__all:hover { color: var(--brand-navy); }

.state-region .checkbox-grid { grid-template-columns: 1fr; gap: 0 var(--space-3); }
@media (min-width: 34em) { .state-region .checkbox-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .state-region .checkbox-grid { grid-template-columns: repeat(2, 1fr); } }

.state-region .checkbox-item { font-size: var(--text-xs); padding: 0.3rem 0.2rem; }
.state-region .checkbox-item:hover { background: #fff; }

.checkbox-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 30em) { .checkbox-grid--states { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) { .checkbox-grid--states { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .checkbox-grid--states { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48em) { .checkbox-grid--wide  { grid-template-columns: repeat(2, 1fr); } }

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.375rem 0.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  cursor: pointer;
}
.checkbox-item:hover { background: var(--surface-2); }

.checkbox-item input {
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.14rem;
  accent-color: var(--brand-blue);
}

/* The label wraps the input, so mirror the focus ring onto the whole row. */
.checkbox-item:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   20. CSP-SAFE UTILITIES
   The site sends `style-src 'self'` with no 'unsafe-inline', so every inline
   style="" attribute is DROPPED by the browser in production. These classes
   replace the ones that used to be inline. Values are identical to what they
   replaced, so nothing moves.

   Declared last on purpose: several of these must win over an earlier
   single-class rule (.card--flat's background, .lead's colour).
   ========================================================================== */

/* Text on navy / dark sections ------------------------------------------- */
.text-on-dark        { color: #cfdcea; }   /* body copy on navy */
.text-on-dark-strong { color: #fff; }      /* bold lead-ins and headings on navy */
.text-gold-200       { color: var(--brand-gold-200); }

/* Translucent card for dark sections. Must override .card--flat, which sets a
   near-white background — that pairing is what blanked the C/TPA pricing cards. */
.card--on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Spacing ----------------------------------------------------------------- */
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mx-auto { margin-inline: auto; }

/* Type and alignment ------------------------------------------------------ */
.text-md        { font-size: var(--text-md); }
.text-left      { text-align: left; }
.justify-center { justify-content: center; }

/* <address> defaults to italic; this restores normal. */
.address-plain { font-style: normal; }

/* -----------------------------------------------------------------------------
   21. Contact page — compact hero, 65/35 form + info card, selectable tiles
   Added when Contact was reorganised: the page previously stacked a full privacy
   notice and a policies accordion below the form, which are now their own pages.
   -------------------------------------------------------------------------- */

/* Slim hero: one column, no second callout card. */
.page-hero--slim { padding-block: var(--space-12) var(--space-10); }
.page-hero--slim .lead { max-width: 60ch; }
.page-hero--slim .page-hero__actions { margin-top: var(--space-8); }

.hero-notice {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brand-gold);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  max-width: 60ch;
}
.hero-notice strong { color: #fff; }

/* 65/35 on desktop; the form comes first in the DOM so it also comes first on
   mobile, where the info card reads better underneath it. */
.contact-layout { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62em) {
  .contact-layout { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: var(--space-10); }
  .contact-aside { position: sticky; top: calc(var(--header-h, 76px) + var(--space-6)); }
}

/* One obvious white card around the whole form. */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}
@media (min-width: 48em) { .form-card { padding: var(--space-10); } }
/* Inside the card the sections are separated by rules, not nested boxes. */
.form-card .form-section { background: none; border: 0; padding: 0; box-shadow: none; }
.form-card .form-section + .form-section {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}

/* Unified contact card — replaces the old four separate bordered cards. */
.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.info-card__title { font-size: var(--text-lg); margin: 0 0 var(--space-6); color: var(--brand-navy); }
.info-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.info-row + .info-row { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.info-row__icon {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-navy-050, rgba(11, 42, 82, 0.08)); color: var(--brand-navy);
}
.info-row__icon svg { width: 1.125rem; height: 1.125rem; }
.info-row__label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-1);
}
.info-row__value { margin: 0; font-weight: 600; color: var(--brand-navy); font-style: normal; }
.info-row__value a { color: inherit; }

.info-card__urgent {
  margin-top: var(--space-8); padding-top: var(--space-8);
  border-top: 2px solid var(--brand-gold);
}
.info-card__urgent p { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--ink-2); }
.info-card__tel {
  display: inline-block; margin-top: var(--space-1);
  font-size: var(--text-xl); font-weight: 800; color: var(--brand-navy); text-decoration: none;
}
.info-card__tel:hover { text-decoration: underline; }

/* Selectable customer-type tiles. The radio stays in the DOM for keyboard and
   assistive tech; it is visually hidden and the tile carries the selected state. */
.type-tiles { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 34em) { .type-tiles { grid-template-columns: repeat(2, 1fr); } }
.type-tile {
  position: relative; display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.type-tile:hover { border-color: var(--brand-navy-300, #9db2d0); }
.type-tile input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.type-tile__icon { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--ink-3); }
.type-tile__icon svg { width: 100%; height: 100%; }
.type-tile__text { display: block; }
.type-tile__title { display: block; font-weight: 700; color: var(--brand-navy); line-height: 1.3; }
.type-tile__sub { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; }
.type-tile:has(input:checked) {
  border-color: var(--brand-navy);
  background: var(--brand-navy-050, rgba(11, 42, 82, 0.05));
  box-shadow: 0 0 0 1px var(--brand-navy) inset;
}
.type-tile:has(input:checked) .type-tile__icon { color: var(--brand-navy); }
/* :has() is unsupported in older browsers; :focus-visible still shows the ring,
   and the underlying radio remains fully functional either way. */
.type-tile:has(input:focus-visible) { outline: 3px solid var(--focus, #1a73e8); outline-offset: 2px; }

.section--tight { padding-block: var(--space-8); }
.policy-links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; }
.address-lg { font-size: var(--text-lg); font-weight: 600; color: var(--brand-navy); font-style: normal; margin-bottom: var(--space-4); }

/* -----------------------------------------------------------------------------
   22. "Local service. Nationwide reach." — airy variant of the check list
   -------------------------------------------------------------------------- */

/* Roomier rows so four bullets scan instead of reading as a paragraph block,
   with a slightly larger check pulled closer to its text. */
.icon-list--airy { gap: var(--space-6); }
.icon-list--airy li { gap: var(--space-3); line-height: 1.55; }
.icon-list--airy li::before {
  width: 1.625rem;
  height: 1.625rem;
  background-size: 1.625rem 1.625rem;
  margin-top: 0.05rem;
}
.icon-list--airy strong { display: block; margin-bottom: var(--space-1); }

/* The bullets are the denser column, so cap their measure rather than letting
   them run the full track width; long lines are what made this feel heavy. */
/* The section heading has no bottom margin of its own, so it was butting
   straight into the lead paragraph. */
.split--reach h2 { margin-bottom: var(--space-5); }

@media (min-width: 62em) {
  .split--reach { align-items: center; }
  .split--reach > div:last-child { max-width: 30rem; margin-left: auto; }
}

/* -----------------------------------------------------------------------------
   23. About page — "Elite1 at a glance" and supporting utilities
   -------------------------------------------------------------------------- */

/* `.callout h2` (0,1,1) outranks a bare `.callout__title` (0,1,0) and was
   flattening this to 16px, so it read as another list term rather than a title.
   Scoping to `.callout .callout__title` (0,2,0) wins without !important. */
.callout .callout__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: inherit;
}

/* Definition list so each label/value pair is a real term-and-description
   relationship rather than styled paragraphs. */
.glance { margin: 0; }
.glance dt {
  font-weight: 700;
  color: #fff;
  font-size: var(--text-sm);
}
.glance dd {
  margin: var(--space-1) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.glance dd + dt {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Fine print on a navy background. Kept above the 4.5:1 contrast floor:
   rgba(255,255,255,0.72) over #0b2c4d resolves to ~#b9c4ce = 8.4:1. */
.text-on-dark-muted { color: rgba(255, 255, 255, 0.72); }

/* Centred fine print that should not run the full container width. */
.measure-center { max-width: 62ch; margin-inline: auto; }