/* ═══════════════════════════════════════════════════════════════════
   permits.agency — Shared Stylesheet (design system v2)

   Navy (#1e3a5f) + Orange (#f97316), Inter. Same brand, re-executed:
   light-first surfaces, type and space carry the hierarchy, one accent,
   depth used only where it means something (the sticky nav, a lifted card).

   Every class name from v1 is kept -- 16 templates and main.js depend on
   them -- so this file can be swapped without touching markup. What changed
   is what those classes DO:

     · Surfaces are light. Navy is now the ink and the one dark "chapter"
       per page (featured package, the why-us panel, the closing CTA), not
       the wallpaper of every section.
     · Orange is the single accent. It is used as a FILL only for the primary
       call to action (see --cta below) and as a text/icon colour only where
       it clears contrast.
     · Buttons are pills, 44px minimum -- the touch-target floor.
     · Weights top out at 700. 800/900 at display sizes read as shouting.
     · Motion is one easing curve (--ease), 150-350ms, and switches off under
       prefers-reduced-motion.

   Contrast notes (measured against white unless stated):
     --orange  #f97316  2.8:1  -> decoration/icons/logo dot only, never body text
     --cta     #c2410c  5.2:1  -> primary-button fill, orange text on light
     --gray-400 #6b7686 4.8:1   -> the lightest text colour allowed
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --navy:         #1e3a5f;
  --navy-dark:    #0d2137;
  --navy-mid:     #2d5282;
  --navy-light:   #3b6fa0;
  --orange:       #f97316;
  --orange-dark:  #c2410c;   /* text-safe orange */
  --orange-hover: #ea6c0a;
  --orange-light: #fed7aa;
  --cta:          #c2410c;   /* primary button fill: white text = 5.2:1 */
  --cta-hover:    #9a3412;

  /* Neutrals (cool, slightly blue -- they sit next to navy) */
  --white:        #ffffff;
  --gray-50:      #f6f7f9;
  --gray-100:     #eef0f3;
  --gray-200:     #e3e6eb;
  --gray-300:     #cbd1d9;
  --gray-400:     #6b7686;
  --gray-500:     #556070;
  --gray-600:     #414b59;
  --gray-700:     #2f3743;
  --gray-800:     #1d232c;
  --ink:          #0d2137;
  --surface:      #ffffff;
  --surface-alt:  #f5f6f8;
  --hairline:     rgba(13, 33, 55, 0.10);
  --focus:        #4d8fd6;   /* 3:1+ on white AND on navy-dark */

  /* Depth: three levels, all soft */
  --shadow-sm:    0 1px 2px rgba(13,33,55,0.05), 0 1px 1px rgba(13,33,55,0.03);
  --shadow:       0 2px 8px rgba(13,33,55,0.06), 0 1px 2px rgba(13,33,55,0.04);
  --shadow-md:    0 12px 32px rgba(13,33,55,0.10), 0 2px 6px rgba(13,33,55,0.05);
  --shadow-lg:    0 24px 60px rgba(13,33,55,0.16), 0 4px 12px rgba(13,33,55,0.06);

  --radius:       12px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition:   all 0.22s var(--ease);

  --nav-h:        56px;
  --measure:      64ch;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss03';
  color: var(--gray-800);
  line-height: 1.6;
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
::selection { background: rgba(59,111,160,0.22); }

/* One focus treatment for everything keyboard-reachable. The ring is
   #4d8fd6, which holds 3:1 on white and on the navy sections alike, so
   there is no per-surface override to forget. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .dot-check-submit:focus-visible { border-radius: var(--radius-pill); }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.section    { padding: 112px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 136px 0; }
.bg-gray    { background: var(--surface-alt); }

.section-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--gray-500);
  margin-top: 16px;
  max-width: 34em;
  text-wrap: pretty;
}
.section-header { margin-bottom: 64px; }
.section-header.center { text-align: center; }
.section-header.center .section-subtitle { margin: 16px auto 0; }

/* The eyebrow. It used to be an orange-tinted pill -- a box around a
   two-word label, on every section, which is exactly the "template" tell.
   Now it is quiet text. Inline overrides that give it a pill (the dark CTA
   and digital-presence sections) still work: they just add the box back. */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange-dark);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 12px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange-dark);
  margin-bottom: 16px;
}

/* ── Navigation ──────────────────────────────────────────────
   Sticky, translucent, hairline. The border only appears once the page has
   scrolled (main.js toggles .is-scrolled) -- at the top of the page the nav
   is part of the hero instead of a bar sitting on it.
   Grid, not space-between: logo left, links optically centred, actions right,
   so the links do not slide sideways when the right side changes width. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  gap: 24px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  justify-self: start;
  min-height: 44px;
}
.nav-logo svg { width: 26px; height: 26px; color: var(--orange); }
.nav-logo .logo-accent { color: var(--orange-dark); }
.nav-irs-badge { display: none; }   /* v1 badge; the claim lives in the hero proof line and footer */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  border-radius: var(--radius-pill);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--gray-100); }
.nav-links a.active, .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.nav-signin {
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  border-radius: var(--radius-pill);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-signin:hover { color: var(--ink); background: var(--gray-100); }
.nav-hamburger {
  display: none;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: none;
  color: var(--ink);
  border-radius: 50%;
}
.nav-hamburger:hover { background: var(--gray-100); }
.nav-hamburger .icon-close { display: none; }
.nav-hamburger[aria-expanded="true"] .icon-open { display: none; }
.nav-hamburger[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 8px 24px 28px;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--hairline);
}
.nav-mobile.open { display: flex; animation: sheet-in 0.28s var(--ease) both; }
.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.nav-mobile a.btn {
  margin-top: 20px;
  min-height: 52px;
  justify-content: center;
  border-bottom: 0;
  color: var(--white);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Buttons ─────────────────────────────────────────────────
   Pills. 44px floor so a thumb can hit them. One filled colour (--cta) for
   the action the page wants; navy for the quieter filled action; the rest
   are outline or text. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.12s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--cta); color: var(--white); border-color: var(--cta); }
.btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn-navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--gray-300);
}
.btn-outline-navy:hover { border-color: var(--navy); background: var(--gray-50); }
.btn-secondary { background: var(--gray-100); color: var(--ink); border-color: transparent; }
.btn-secondary:hover { background: var(--gray-200); }
/* Text button with a chevron -- Apple's "Learn more >". */
.btn-link {
  min-height: 44px;
  padding: 10px 6px;
  background: none;
  color: var(--orange-dark);
  border: 0;
  font-weight: 600;
}
.btn-link::after { content: '\203A'; font-size: 1.25em; line-height: 1; transition: transform 0.2s var(--ease); }
.btn-link:hover { color: var(--cta-hover); }
.btn-link:hover::after { transform: translateX(3px); }
/* For dark sections (closing CTA, the featured package). */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.75); }
.btn-ghost-white { background: transparent; color: rgba(255,255,255,0.8); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.10); color: var(--white); }
.btn-lg { min-height: 52px; padding: 13px 30px; font-size: 1rem; }
.btn-sm { min-height: 36px; padding: 6px 16px; font-size: 0.875rem; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }

/* ── Hero (home) ──────────────────────────────────────────────
   Light, single column, type-led. The carrier lookup is the widest thing in
   it and the only control with a fill -- a carrier arrives with a number in
   their head, so the page asks for it before it asks for anything else.
   The wash behind the title is one very low navy radial, there to lift the
   headline off a flat field, not to decorate the corner. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  text-align: center;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(59,111,160,0.13), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-alt) 100%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-content { max-width: 1040px; margin: 0 auto; }
.hero-title {
  font-size: clamp(2.25rem, 5.6vw, 4.125rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
/* The instruction line is dimmed, not coloured: same emphasis, no second hue. */
.hero-title em { font-style: normal; color: var(--gray-400); }
.hero-description {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.5;
  color: var(--gray-500);
  margin: 0 auto 44px;
  max-width: 40em;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 40px;
  font-size: 0.875rem;
  color: var(--gray-500);
}
.hero-proof span { color: var(--gray-300); }
.hero-live-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 14px 6px 12px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
  box-shadow: var(--shadow-sm);
}
.hero-live-stat[hidden] { display: none; }
.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  animation: hero-live-pulse 2.4s infinite;
  flex-shrink: 0;
}
@keyframes hero-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.4); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* Staged entrance -- the title is NOT animated (it is the LCP element and
   should paint immediately); everything under it settles in. */
.hero .dot-check, .hero .hero-actions, .hero .hero-proof, .hero .hero-live-stat, .hero-description {
  animation: rise 0.7s var(--ease) both;
}
.hero-description { animation-delay: 0.05s; }
.hero .dot-check { animation-delay: 0.12s; }
.hero .hero-actions { animation-delay: 0.2s; }
.hero .hero-proof { animation-delay: 0.26s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Hero carrier lookup ─────────────────────────────────────
   A search field on a light surface: white, hairline, lifted. The submit is
   navy -- solid, calm, and deliberately NOT the orange that means "buy". */
.dot-check { margin: 0 auto; max-width: 640px; text-align: center; }
.dot-check-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.dot-check-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  padding: 8px 8px 8px 20px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dot-check-bar:focus-within {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 4px rgba(59,111,160,0.16), var(--shadow-md);
}
.dot-check-icon { width: 20px; height: 20px; color: var(--gray-400); flex-shrink: 0; }
.dot-check-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  padding: 14px 0;
  letter-spacing: 0;
}
.dot-check-bar input::placeholder { color: var(--gray-400); font-weight: 400; }
.dot-check-submit {
  flex-shrink: 0;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 14px;
  min-height: 48px;
  padding: 0 26px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background 0.2s var(--ease), transform 0.12s var(--ease);
  min-width: 112px;
}
.dot-check-submit:hover:not(:disabled) { background: var(--navy-dark); }
.dot-check-submit:active:not(:disabled) { transform: scale(0.98); }
.dot-check-submit:disabled { opacity: 0.6; cursor: default; }
.dot-check-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: dot-check-spin 0.7s linear infinite;
  vertical-align: -3px;
}
@keyframes dot-check-spin { to { transform: rotate(360deg); } }
.dot-check-hint { font-size: 0.8125rem; color: var(--gray-400); margin-top: 12px; }
/* Left-aligned inside a centred form: everything above is a headline and
   reads centred; this is a record -- a name, an address, a due date, a row of
   actions -- and a flush-left block of facts is faster to scan. */
.dot-check-result {
  text-align: left;
  margin-top: 16px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  animation: rise 0.3s var(--ease) both;
}
.dot-check-result[hidden] { display: none; }
.dot-check-result.is-error { background: var(--gray-50); box-shadow: none; }
.dot-check-name { font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.015em; }
.dot-check-meta { font-size: 0.875rem; color: var(--gray-500); margin-top: 4px; line-height: 1.6; }
.dot-check-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-700);
}
.dot-check-flag.is-overdue { background: #fef3c7; color: #78350f; }
.dot-check-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.dot-check-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  background: var(--cta);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 0 20px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.2s var(--ease);
}
.dot-check-action:hover { background: var(--cta-hover); }
.dot-check-action.is-secondary { background: var(--gray-100); color: var(--ink); }
.dot-check-action.is-secondary:hover { background: var(--gray-200); }
.dot-check-source { font-size: 0.75rem; color: var(--gray-400); margin-top: 14px; line-height: 1.5; }

/* ── Page hero (inner pages) ─────────────────────────────────
   Light band, centred title. The navy gradient this replaces put a dark
   slab at the top of every one of 15 pages; the content below it is what
   people came for. */
.page-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-alt) 100%);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  padding: 80px 0 72px;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.page-hero p {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--gray-500);
  max-width: 36em;
  margin: 0 auto;
  text-wrap: pretty;
}
.page-hero-inner { max-width: 820px; margin: 0 auto; }
.page-hero .hero-eyebrow { justify-content: center; }
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--gray-400);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--gray-300); }

/* ── Stats bar (about) ───────────────────────────────────── */
.stats-bar { background: var(--white); border-bottom: 1px solid var(--hairline); padding: 0; }
.stats-bar-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.stat-item { padding: 36px 24px; text-align: center; border-right: 1px solid var(--hairline); }
.stat-item:last-child { border-right: none; }
.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-number .orange { color: var(--orange-dark); }
.stat-label { font-size: 0.875rem; color: var(--gray-500); margin-top: 8px; }

/* ── Service cards ───────────────────────────────────────────
   White, hairline, soft lift on hover. The top gradient bar and the solid
   gradient icon tiles are gone: an icon in a tinted square is enough. */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Bento: six equal cards, then a seventh across the full width. Spans are
   driven by position, NOT by classes on the cards -- verify_price_sync splits
   the page on the literal `<div class="service-card">`, and a modifier class
   in that attribute would drop the card out of the probe without failing. */
.services-bento { grid-template-columns: repeat(6, 1fr); }
.services-bento > .service-card { grid-column: span 2; }
.services-bento > .service-card:nth-child(7) {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
}
.services-bento > .service-card:nth-child(7) .service-icon { margin-bottom: 0; }
.services-bento > .service-card:nth-child(7) .service-card-body { flex: 1; min-width: 0; }
.services-bento > .service-card:nth-child(7) p { margin-bottom: 0; max-width: 74ch; }
.services-bento > .service-card:nth-child(7) .service-card-footer {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  flex-shrink: 0;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.service-card:hover {
  border-color: rgba(13,33,55,0.16);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.service-icon {
  width: 44px;
  height: 44px;
  background: rgba(30,58,95,0.07);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.service-icon svg { width: 22px; height: 22px; color: var(--navy); }
.service-icon.orange { background: rgba(249,115,22,0.11); }
.service-icon.orange svg { color: var(--orange-dark); }
.service-card h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.service-card p {
  font-size: 0.9375rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 24px;
}
.service-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.service-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.service-price span { font-size: 0.8125rem; font-weight: 400; color: var(--gray-400); letter-spacing: 0; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--orange-dark);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.service-link:hover { gap: 9px; color: var(--cta-hover); }
.service-link svg { width: 15px; height: 15px; }

/* ── Why choose us / benefits ────────────────────────────── */
.benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.benefit-item { display: flex; gap: 20px; align-items: flex-start; }
.benefit-icon {
  width: 44px;
  height: 44px;
  background: rgba(249,115,22,0.11);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.benefit-icon svg { width: 22px; height: 22px; color: var(--orange-dark); }
.benefit-item h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 6px; }
.benefit-item p { font-size: 0.9375rem; color: var(--gray-500); line-height: 1.6; }

/* ── Testimonials ────────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
}
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-stars svg { width: 15px; height: 15px; color: #d97706; }
.testimonial-text {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.65;
  margin-bottom: 24px;
  flex: 1;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  flex-shrink: 0;
}
.author-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.author-title { font-size: 0.8125rem; color: var(--gray-400); }

/* ── Closing CTA ─────────────────────────────────────────────
   The page's last dark chapter. Type does the work; the one glow is a faint
   navy-light wash so the block does not read as a flat rectangle. */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: var(--white);
  text-align: center;
  padding: 120px 0;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 800px;
  background: radial-gradient(ellipse at center, rgba(59,111,160,0.32) 0%, transparent 65%);
  pointer-events: none;
}
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner .label-tag { margin: 0 auto 20px; color: #fdba74; }
.cta-banner h2 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.cta-banner p {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  margin: 0 auto 40px;
  max-width: 34em;
}
.cta-banner-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-banner .btn-primary { background: var(--white); color: var(--navy-dark); border-color: var(--white); }
.cta-banner .btn-primary:hover { background: rgba(255,255,255,0.88); border-color: transparent; }

/* ── Two-column content ──────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }

/* ── Pricing cards (packages page) ───────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pricing-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pricing-card.featured { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), var(--shadow-md); }
.featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pricing-name { font-size: 0.875rem; font-weight: 600; color: var(--orange-dark); margin-bottom: 8px; }
.pricing-service { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 6px; }
.pricing-price {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 24px 0 8px;
}
.pricing-price sup { font-size: 1.25rem; font-weight: 600; vertical-align: super; letter-spacing: 0; }
.pricing-price-note { font-size: 0.8125rem; color: var(--gray-400); margin-bottom: 24px; }
.pricing-divider { height: 1px; background: var(--hairline); margin: 24px 0; }
.pricing-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.pricing-feature { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--gray-600); }
.pricing-feature svg { width: 16px; height: 16px; color: #15803d; flex-shrink: 0; }
.pricing-feature.muted { color: var(--gray-400); }
.pricing-feature.muted svg { color: var(--gray-300); }

/* ── Service detail (marketing landing pages) ────────────── */
.service-detail { padding: 96px 0; border-bottom: 1px solid var(--hairline); }
.service-detail:last-child { border-bottom: none; }
.service-detail:nth-child(even) { background: var(--surface-alt); }
.service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.service-detail-visual {
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  min-height: 280px;
}
.service-detail-visual svg { width: 64px; height: 64px; color: var(--orange); margin-bottom: 20px; }
.service-detail-visual h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.service-detail-visual p { font-size: 0.9375rem; color: rgba(255,255,255,0.7); }
.service-detail-badge {
  background: rgba(249,115,22,0.18);
  color: var(--orange-light);
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  margin-top: 20px;
}
.service-detail-content h2 { font-size: 1.875rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.03em; }
.service-detail-content p { font-size: 0.9375rem; color: var(--gray-500); line-height: 1.7; margin-bottom: 24px; }
.check-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; color: var(--gray-600); line-height: 1.55; }
.check-list li strong { color: var(--ink); font-weight: 600; }
.check-list li svg { width: 20px; height: 20px; color: #15803d; flex-shrink: 0; margin-top: 1px; }
.info-box {
  background: var(--gray-50);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}
.info-box p { font-size: 0.875rem; color: var(--gray-600); margin-bottom: 0; }

/* ── Services page (static template; the live /services is the SPA) ── */
.services-quick-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.services-quick-nav-scroll { display: flex; gap: 4px; overflow-x: auto; padding: 0 4px; scrollbar-width: none; }
.services-quick-nav-scroll::-webkit-scrollbar { display: none; }
.services-quick-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.services-quick-nav a:hover { color: var(--ink); }
.services-quick-nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.services-quick-nav a .cat-dot { display: none; }
.service-category-header { padding: 64px 0 0; }
.service-category-header h2 { font-size: 1.75rem; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.service-category-header p { font-size: 1rem; color: var(--gray-500); margin-top: 8px; max-width: 60ch; }

.service-price-card {
  margin-top: 32px;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.service-price-card .price-eyebrow { font-size: 0.8125rem; font-weight: 500; color: var(--gray-400); }
.service-price-card .price-value { font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.04em; line-height: 1.2; }
.service-price-card .price-value .price-suffix { font-size: 0.9375rem; font-weight: 500; color: var(--gray-400); letter-spacing: 0; }
.service-price-card .price-note { font-size: 0.8125rem; color: var(--gray-400); margin-top: 2px; }

.service-info-panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.service-detail:nth-child(even) .service-info-panel { background: var(--white); }
.service-info-panel .panel-label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-400); margin-bottom: 18px; }
.info-row-list { display: flex; flex-direction: column; gap: 14px; }
.info-row { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row .k { font-size: 0.9375rem; color: var(--gray-500); }
.info-row .v { font-weight: 600; color: var(--ink); text-align: right; }
.info-row .v.good { color: #15803d; }
.qualify-list { display: flex; flex-direction: column; gap: 8px; }
.qualify-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: var(--radius);
}
.qualify-item svg { width: 18px; height: 18px; color: #15803d; flex-shrink: 0; }
.qualify-item span { font-size: 0.875rem; color: var(--gray-600); }
.fact-list { display: flex; flex-direction: column; gap: 8px; }
.fact-list li { font-size: 0.9375rem; color: var(--gray-600); padding: 14px 16px; background: var(--gray-50); border-radius: var(--radius); }
.mini-callout { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius); }
.mini-callout.orange { background: rgba(249,115,22,0.08); }
.mini-callout.navy   { background: rgba(30,58,95,0.06); }
.mini-callout .callout-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.mini-callout.orange .callout-title { color: var(--orange-dark); }
.mini-callout.navy .callout-title { color: var(--navy-dark); }
.mini-callout .callout-body { font-size: 0.875rem; color: var(--gray-500); line-height: 1.55; }
.mini-callout a.callout-link { font-size: 0.875rem; font-weight: 600; color: var(--orange-dark); }

.mc-timeline { display: flex; flex-direction: column; }
.mc-timeline-step { display: flex; gap: 16px; padding-bottom: 20px; }
.mc-timeline-step:last-child { padding-bottom: 0; }
.mc-timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.mc-timeline-marker .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}
.mc-timeline-step.done .mc-timeline-marker .dot { background: #15803d; }
.mc-timeline-marker .line { width: 2px; flex: 1; background: var(--gray-200); margin-top: 6px; border-radius: 2px; }
.mc-timeline-step-body { padding-top: 3px; }
.mc-timeline-step-body .step-title { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.mc-timeline-step-body .step-desc { font-size: 0.875rem; color: var(--gray-500); margin-top: 2px; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  min-height: 64px;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.faq-question:hover { color: var(--navy-light); }
.faq-chevron { width: 20px; height: 20px; color: var(--gray-400); transition: transform 0.3s var(--ease), color 0.2s; flex-shrink: 0; }
.faq-question.open .faq-chevron { transform: rotate(180deg); color: var(--ink); }
.faq-answer { display: none; padding: 0 4px 24px; font-size: 1rem; color: var(--gray-500); line-height: 1.7; max-width: 70ch; }
.faq-answer.open { display: block; animation: rise 0.3s var(--ease) both; }

/* ── Contact + forms ─────────────────────────────────────────
   .form-input/.form-label/.form-select/.form-textarea are used by the
   contact form (about) and the order form, and had NO rules at all in v1 --
   those forms were rendering with browser-default controls. */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.contact-info h2 { font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; margin-bottom: 12px; }
.contact-info > p { font-size: 1rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 36px; }
.contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.contact-item-icon {
  width: 44px;
  height: 44px;
  background: rgba(30,58,95,0.07);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon svg { width: 20px; height: 20px; color: var(--navy); }
.contact-item-text strong { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.contact-item-text span { font-size: 0.9375rem; color: var(--gray-500); }
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: var(--shadow-md);
}
.contact-form-card h3 { font-size: 1.375rem; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label, .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 8px;
}
.form-group input, .form-group select, .form-group textarea,
.form-input, .form-select, .form-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 1rem;           /* 16px: iOS Safari zooms the page on focus below this */
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-group select, .form-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-group input::placeholder, .form-group textarea::placeholder,
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-400); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 4px rgba(59,111,160,0.16);
}
.form-group textarea, .form-textarea { resize: vertical; min-height: 128px; }

/* ── About ───────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-visual {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  border-radius: var(--radius-lg);
  padding: 56px 44px;
  color: var(--white);
}
.about-visual::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -25%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(59,111,160,0.4) 0%, transparent 70%);
  pointer-events: none;
}
.about-metric { position: relative; margin-bottom: 32px; }
.about-metric:last-child { margin-bottom: 0; }
.about-metric-number { font-size: 3rem; font-weight: 700; color: var(--white); letter-spacing: -0.05em; line-height: 1; }
.about-metric-label { font-size: 0.9375rem; color: rgba(255,255,255,0.7); margin-top: 6px; }
.credential-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.credential-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.credential-item svg { width: 22px; height: 22px; color: var(--orange-dark); flex-shrink: 0; }
.credential-item p { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin: 0; }
.credential-item span { font-size: 0.8125rem; color: var(--gray-500); font-weight: 400; }

/* ── Footer ──────────────────────────────────────────────────
   Light and quiet -- Apple's footer is a gray field of small type, not a
   second hero. Sits directly under the dark closing CTA, so the page ends
   dark -> light instead of dark -> dark. */
.footer {
  background: var(--surface-alt);
  color: var(--gray-500);
  padding: 72px 0 0;
  border-top: 1px solid var(--hairline);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.footer-brand .nav-logo { margin-bottom: 14px; }
.footer-brand h2 { font-size: 1.125rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.footer-brand h2 svg { width: 26px; height: 26px; color: var(--orange); }
.footer-brand h2 .logo-accent { color: var(--orange-dark); }
.footer-brand p { font-size: 0.875rem; line-height: 1.65; margin-bottom: 20px; max-width: 34ch; }
.footer-col h3 { font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 4px; }
.footer-col ul li a {
  display: inline-block;
  padding: 5px 0;
  font-size: 0.875rem;
  color: var(--gray-500);
  transition: color 0.15s var(--ease);
}
.footer-col ul li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; margin-bottom: 10px; color: var(--gray-600); }
.footer-contact-item svg { width: 15px; height: 15px; color: var(--gray-400); flex-shrink: 0; margin-top: 4px; }
.footer-contact-item a { color: inherit; }
.footer-contact-item a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding: 22px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.8125rem; color: var(--gray-400); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 0.8125rem; color: var(--gray-500); padding: 4px 0; transition: color 0.15s; }
.footer-bottom-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.irs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
/* v1 order.html footer markup */
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 0; }
.footer-links, .footer-contact { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.875rem; }
.footer-links a:hover { color: var(--ink); }

/* ── Utility ─────────────────────────────────────────────── */
.text-orange { color: var(--orange-dark); }
.text-navy { color: var(--navy); }
.text-muted { color: var(--gray-500); }
.bg-navy { background: var(--navy-dark); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.fw-bold { font-weight: 600; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Experience banner (legacy) ──────────────────────────────
   Removed from every page's markup in v2 -- the "25+ years" claim now lives
   in the hero copy and footer once, instead of a strip above the nav. The
   rules stay so a stale cached template cannot render it unstyled. */
.experience-banner { background: var(--surface-alt); border-bottom: 1px solid var(--hairline); padding: 10px 0; text-align: center; }
.experience-banner-inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.experience-banner-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--gray-600); white-space: nowrap; }
.experience-banner-item svg { width: 14px; height: 14px; color: var(--gray-400); flex-shrink: 0; }
.experience-banner-divider { width: 1px; height: 14px; background: var(--gray-300); }
.experience-years { color: var(--ink); font-weight: 700; }

/* ── Package cards (home + /packages) ────────────────────────
   Three audience paths -- new carrier, full setup, established fleet --
   on a light field. The featured one is the page's single filled-navy card,
   so the eye lands on it without a badge shouting. */
.bundles-section { background: var(--surface-alt); padding: 112px 0; }
.bundles-section .section-title { color: var(--ink); }
.bundles-section .section-subtitle { color: var(--gray-500); }
.bundles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px 32px 32px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.bundle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bundle-card.featured {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.bundle-card.featured:hover { box-shadow: var(--shadow-lg); }
.bundle-card.monthly { background: var(--white); }
.bundle-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--navy-dark);
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.bundle-tier { font-size: 0.875rem; font-weight: 600; color: var(--orange-dark); margin-bottom: 6px; }
.bundle-card.featured .bundle-tier { color: #fdba74; }
.bundle-name { font-size: 1.375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; margin-bottom: 6px; line-height: 1.2; min-height: 2.4em; }
.bundle-card.featured .bundle-name { color: var(--white); }
.bundle-tagline { font-size: 0.9375rem; color: var(--gray-500); margin-bottom: 28px; line-height: 1.5; min-height: 3em; }
.bundle-card.featured .bundle-tagline { color: rgba(255,255,255,0.68); }
.bundle-price { font-size: 3.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.05em; line-height: 1; margin-bottom: 6px; }
.bundle-card.featured .bundle-price { color: var(--white); }
.bundle-price sup { font-size: 1.375rem; font-weight: 600; vertical-align: super; letter-spacing: 0; }
.bundle-price-note { font-size: 0.8125rem; color: var(--gray-400); margin-bottom: 28px; }
.bundle-card.featured .bundle-price-note { color: rgba(255,255,255,0.55); }
.bundle-divider { height: 1px; background: var(--hairline); margin-bottom: 24px; }
.bundle-card.featured .bundle-divider { background: rgba(255,255,255,0.14); }
.bundle-includes-label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-400); margin-bottom: 14px; }
.bundle-card.featured .bundle-includes-label { color: rgba(255,255,255,0.55); }
.bundle-includes { display: flex; flex-direction: column; gap: 11px; margin-bottom: 32px; flex: 1; }
.bundle-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--gray-600); line-height: 1.45; }
.bundle-card.featured .bundle-includes li { color: rgba(255,255,255,0.8); }
.bundle-includes li svg { width: 16px; height: 16px; color: #15803d; flex-shrink: 0; margin-top: 2px; }
.bundle-card.featured .bundle-includes li svg { color: #86efac; }
.bundle-includes li.highlight { color: var(--ink); font-weight: 500; }
.bundle-card.featured .bundle-includes li.highlight { color: var(--white); }
.bundle-card .btn { width: 100%; }
.bundle-card.featured .btn-primary { background: var(--white); color: var(--navy-dark); border-color: var(--white); }
.bundle-card.featured .btn-primary:hover { background: rgba(255,255,255,0.9); }

/* ── Free services bar / pricing table / positioning ─────── */
.free-services-bar {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.free-tag { background: #15803d; color: var(--white); font-size: 0.75rem; font-weight: 600; padding: 4px 14px; border-radius: var(--radius-pill); white-space: nowrap; }
.free-services-bar p { font-size: 0.9375rem; color: var(--gray-700); flex: 1; }
.free-services-bar strong { color: var(--ink); }
.pricing-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.pricing-table th { background: var(--gray-50); color: var(--gray-500); font-size: 0.8125rem; font-weight: 600; padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--hairline); }
.pricing-table th:last-child { text-align: right; }
.pricing-table td { padding: 18px 20px; font-size: 0.9375rem; border-bottom: 1px solid var(--hairline); background: var(--white); vertical-align: middle; }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:hover td { background: var(--gray-50); }
.pricing-table td:last-child { text-align: right; font-weight: 600; color: var(--ink); }
.pricing-table .service-name { font-weight: 600; color: var(--ink); }
.pricing-table .service-desc { font-size: 0.8125rem; color: var(--gray-400); margin-top: 2px; }
.price-free { color: #15803d !important; }
.price-custom { color: var(--orange-dark) !important; font-size: 0.875rem !important; }
.positioning-block { background: var(--gray-50); border-radius: var(--radius-lg); padding: 40px 44px; }
.positioning-block h3 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.03em; }
.positioning-block p { font-size: 1rem; color: var(--gray-500); line-height: 1.7; max-width: 680px; }

/* ── Home: "not sure" doorway, flow, digital presence, why-us ──
   These lived in an inline <style> and in style="" attributes in
   index.html; they are here now so the design system is in one place. */
.doorway {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 28px 24px 32px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.doorway-eyebrow { font-size: 0.8125rem; font-weight: 600; color: var(--gray-400); margin-bottom: 2px; }
.doorway p { margin: 0; color: var(--gray-600); font-size: 1rem; max-width: 46ch; }
.doorway-wrap { padding: 0 0 8px; background: var(--surface-alt); margin-top: -1px; }

.flow-section { padding: 112px 0; background: var(--white); }
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 0; counter-reset: flow; }
.flow-step { position: relative; padding-top: 20px; border-top: 1px solid var(--gray-300); }
.flow-num {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange-dark);
  margin-bottom: 14px;
  letter-spacing: 0;
}
.flow-step h3 { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.25; }
.flow-step p { font-size: 0.9375rem; color: var(--gray-500); line-height: 1.6; }
.flow-foot { text-align: center; margin-top: 56px; }
.flow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--gray-50);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-700);
}
.flow-badge svg { color: #15803d; flex-shrink: 0; }

.dp-section { padding: 112px 0; background: var(--surface-alt); }
.dp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 880px; margin: 0 auto; }
.dp-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.dp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dp-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(30,58,95,0.07);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.dp-icon svg { width: 22px; height: 22px; stroke: var(--navy); }
.dp-card h3 { font-size: 1.375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; margin-bottom: 8px; }
.dp-card .dp-desc { font-size: 0.9375rem; color: var(--gray-500); line-height: 1.6; flex: 1; }
.dp-price { font-size: 2.5rem; font-weight: 700; color: var(--ink); letter-spacing: -0.04em; margin: 24px 0 4px; line-height: 1.1; }
.dp-price sup { font-size: 1.125rem; font-weight: 600; vertical-align: super; letter-spacing: 0; }
.dp-price .dp-per { font-size: 0.9375rem; font-weight: 500; color: var(--gray-400); letter-spacing: 0; }
.dp-features { list-style: none; padding: 0; margin: 16px 0 28px; }
.dp-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--gray-600); padding: 5px 0; }
.dp-features svg { width: 17px; height: 17px; stroke: #15803d; flex-shrink: 0; margin-top: 3px; }
.dp-note { text-align: center; margin-top: 40px; font-size: 0.9375rem; color: var(--gray-500); }
.dp-card .btn { width: 100%; }

.why-panel {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 44px 44px;
  box-shadow: var(--shadow-lg);
}
.why-panel::before {
  content: '';
  position: absolute;
  top: -35%;
  right: -25%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(59,111,160,0.45) 0%, transparent 70%);
  pointer-events: none;
}
.why-panel > * { position: relative; }
.why-eyebrow { font-size: 0.875rem; font-weight: 600; color: #fdba74; margin-bottom: 10px; }
.why-lede { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--white); margin-bottom: 32px; }
.why-rows { display: flex; flex-direction: column; }
.why-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.9375rem; }
.why-row span:first-child { color: rgba(255,255,255,0.68); }
.why-row span:last-child { font-weight: 600; color: var(--white); text-align: right; }
.why-fine { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin: 16px 0 28px; }
.why-panel .btn { width: 100%; }
.why-panel .btn-primary { background: var(--white); color: var(--navy-dark); border-color: var(--white); }
.why-panel .btn-primary:hover { background: rgba(255,255,255,0.9); }

.center-cta { text-align: center; margin-top: 48px; }

/* ── Scroll reveal ───────────────────────────────────────────
   Opt-in: main.js adds html.js-reveal only when IntersectionObserver exists
   and the visitor has not asked for reduced motion, so a no-JS or
   reduced-motion visitor gets the finished page, never a blank one. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ── Skip link ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -56px;
  left: 12px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 12px; outline: 3px solid var(--white); outline-offset: 2px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .section, .flow-section, .dp-section, .bundles-section { padding-top: 88px; padding-bottom: 88px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-bento > .service-card { grid-column: span 3; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .bundles-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 28px; }
  .bundle-name, .bundle-tagline { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .two-col, .about-grid, .service-detail-grid { gap: 48px; }
}

/* Navigation collapses at 860, not at the phone breakpoint: five links, a
   sign-in and a CTA no longer fit beside the wordmark below that. */
@media (max-width: 860px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: inline-flex; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section, .flow-section, .dp-section, .bundles-section { padding-top: 64px; padding-bottom: 64px; }
  .section-lg { padding: 80px 0; }
  .section-header { margin-bottom: 44px; }
  .cta-banner { padding: 88px 0; }
  .free-services-bar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
  .positioning-block { padding: 28px 22px; }

  /* Hero */
  .hero { padding: 64px 0 56px; }
  .hero-description { margin-bottom: 32px; }
  .dot-check-bar { flex-wrap: wrap; padding: 10px; border-radius: 18px; }
  .dot-check-icon { margin-left: 6px; }
  /* Input keeps the icon company on row one; the button takes all of row
     two rather than being squeezed to a stub beside a 4-character input. */
  .dot-check-bar input { flex: 1 1 60%; padding: 8px 0; }
  .dot-check-submit { flex: 1 0 100%; min-height: 50px; }
  .dot-check-actions .dot-check-action { flex: 1 1 auto; justify-content: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn-link { justify-content: center; }
  .hero-proof { gap: 4px 16px; font-size: 0.8125rem; }
  .hero-proof span { display: none; }

  .page-hero { padding: 56px 0 48px; }

  /* Grids */
  .services-grid { grid-template-columns: 1fr !important; }
  .services-grid, .testimonials-grid, .pricing-grid, .benefits-grid,
  .two-col, .service-detail-grid, .about-grid, .contact-grid,
  .form-row, .dp-grid, .flow-grid { grid-template-columns: 1fr; }
  .services-bento > .service-card { grid-column: 1 / -1; }
  .services-bento > .service-card:nth-child(7) { flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 28px 28px; }
  .services-bento > .service-card:nth-child(7) .service-card-footer { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
  .two-col, .about-grid, .service-detail-grid, .contact-grid { gap: 40px; }
  .service-detail { padding: 64px 0; }
  .service-detail-visual { padding: 40px 28px; }
  .service-info-panel { padding: 28px 22px; }
  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-col ul li a { padding: 11px 0; }
  .footer-bottom-links a { padding: 12px 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .contact-form-card { padding: 32px 22px; }
  .cta-banner-actions { flex-direction: column; align-items: stretch; }
  .cta-banner-actions .btn { width: 100%; }
  .doorway { padding: 24px; }
  .doorway .btn { width: 100%; }
  .why-panel { padding: 36px 26px 30px; }
  .pricing-table th, .pricing-table td { padding: 14px 14px; }
}

@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; }
  .service-card:hover, .bundle-card:hover, .pricing-card:hover, .dp-card:hover { transform: none; }
}
@media print {
  .nav, .nav-mobile, .skip-link, .cta-banner { display: none !important; }
  .hero, .page-hero { background: none; padding: 24px 0; }
}

/* ── Small text helpers used by the home template ──────────── */
.section-more { margin-top: 8px; }
.section-header.center .section-more { text-align: center; }
.fine-print { text-align: center; font-size: 0.8125rem; color: var(--gray-400); margin: 36px auto 0; max-width: 62ch; line-height: 1.6; }
.bundle-per { font-size: 1rem; font-weight: 500; color: var(--gray-400); letter-spacing: 0; }
.bundle-card.featured .bundle-per { color: rgba(255,255,255,0.55); }
.service-price-note { font-size: 0.8125rem; color: var(--gray-400); margin-top: 2px; }
.flow-num::before { content: 'Step '; }

/* Breadcrumb links: inline text, but on a phone they sit 16px tall side by
   side -- pad the hit area without moving the text. */
nav[aria-label="Breadcrumb"] a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }

/* About: the founding-philosophy pull quote. A flat navy panel -- the v1
   version was a navy gradient with an orange stripe down the left edge. */
.pullquote { background: var(--navy-dark); color: var(--white); border-radius: var(--radius-lg); padding: 28px 32px; }
.pullquote-label { font-size: 0.875rem; font-weight: 600; color: #fdba74; margin-bottom: 10px; }
.pullquote p { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,0.88); letter-spacing: -0.01em; margin: 0; }

/* "What you can count on" cards (home): a heading over the body copy. */
.commit-title { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }

/* Footer phone/email: real tap targets on touch widths (they were 22px tall). */
@media (max-width: 768px) {
  .footer-contact-item a { display: inline-block; padding: 11px 0; }
  .footer-contact-item { margin-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND PASS (2026-09-19) -- navy + orange, visibly.

   The v2 redesign went so light that the brand nearly disappeared. This block
   is deliberately an override layer on top of v2: layout, type, spacing,
   components and breakpoints are untouched; only colour and emphasis move.

   ORANGE RULES (accessibility)
     - Orange is a FILL for buttons, badges, icon tiles and accent bars, with
       NAVY text on it: #0d2137 on #f97316 = 5.7:1 (AA). White text on
       #f97316 was 2.8:1 -- that pairing is never used.
     - Orange as TEXT on light surfaces is still the darker #c2410c (5.2:1).
     - On navy, light orange (#fdba74, ~9:1) carries highlights and text.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --cta-fill:        #f97316;
  --cta-fill-hover:  #ea6c0a;
  --on-cta:          #0d2137;
  --orange-300:      #fdba74;
  --orange-icon:     #ea580c;   /* non-text icons on light: 3.6:1 */
  --tint:            #edf2f9;   /* very light navy wash */
  --tint-warm:       #fff4e8;   /* very light orange wash */
  --surface-alt:     #edf2f9;
  --nav-h:           58px;      /* 56px bar + 2px orange rule */
}

/* -- Navigation: navy bar, orange rule ------------------------------ */
.nav {
  background: rgba(13,33,55,0.95);
  border-bottom: 2px solid var(--orange);
}
.nav.is-scrolled { border-bottom-color: var(--orange); }
.nav-inner { height: 56px; }
.nav-logo { color: #fff; }
.nav-logo svg { color: var(--orange); }
.nav-logo .logo-accent { color: var(--orange); }
.nav-links a, .nav-signin { color: rgba(255,255,255,0.84); }
.nav-links a:hover, .nav-signin:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nav-links a.active, .nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.14); }
.nav-hamburger { color: #fff; }
.nav-hamburger:hover { background: rgba(255,255,255,0.12); }
.nav-mobile { background: var(--navy-dark); border-top: 1px solid rgba(255,255,255,0.14); }
.nav-mobile a { color: #fff; border-bottom-color: rgba(255,255,255,0.14); }
.nav-mobile a.btn { color: var(--on-cta); }
/* the footer reuses .nav-logo on a light surface */
.footer .nav-logo { color: var(--ink); }
.footer .nav-logo .logo-accent { color: var(--orange-dark); }

/* -- Buttons ---------------------------------------------------------- */
.btn-primary {
  background: var(--cta-fill);
  color: var(--on-cta);
  border-color: var(--cta-fill);
  box-shadow: 0 4px 14px rgba(249,115,22,0.30);
}
.btn-primary:hover { background: var(--cta-fill-hover); border-color: var(--cta-fill-hover); }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-secondary { background: #dfe8f4; color: var(--navy); }
.btn-secondary:hover { background: #cfdcee; }
.btn-lg.btn-primary { box-shadow: 0 8px 22px rgba(249,115,22,0.34); }

/* -- Section eyebrows: an orange bar, then the label ------------------ */
.label-tag, .hero-eyebrow { font-weight: 700; }
.label-tag::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.section-title { color: var(--navy); }

/* -- Home hero: navy, with the lookup as the one bright control ------- */
.hero {
  color: #fff;
  background:
    radial-gradient(760px 380px at 84% 6%, rgba(249,115,22,0.24), transparent 62%),
    radial-gradient(900px 480px at 10% -12%, rgba(59,111,160,0.45), transparent 66%),
    linear-gradient(180deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.hero-title { color: #fff; }
.hero-title em { color: #fb923c; }
.hero-description { color: rgba(255,255,255,0.80); }
.hero-proof { color: rgba(255,255,255,0.78); }
.hero-proof span { color: rgba(255,255,255,0.35); }
.hero .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); }
.hero .btn-secondary:hover { background: rgba(255,255,255,0.20); }
.hero .btn-link { color: var(--orange-300); }
.hero .btn-link:hover { color: #fff; }

.dot-check-label { color: #fff; font-weight: 700; font-size: 0.875rem; }
.dot-check-bar {
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 6px rgba(249,115,22,0.22), 0 26px 60px rgba(0,0,0,0.38);
}
.dot-check-bar:focus-within {
  border-color: #fff;
  box-shadow: 0 0 0 6px rgba(249,115,22,0.55), 0 26px 60px rgba(0,0,0,0.38);
}
.dot-check-icon { color: var(--orange-dark); }
.dot-check-submit { background: var(--cta-fill); color: var(--on-cta); font-weight: 700; }
.dot-check-submit:hover:not(:disabled) { background: var(--cta-fill-hover); }
.dot-check-spinner { border-color: rgba(13,33,55,0.28); border-top-color: var(--on-cta); }
.dot-check-hint { color: rgba(255,255,255,0.72); }
.dot-check-action { background: var(--cta-fill); color: var(--on-cta); font-weight: 700; }
.dot-check-action:hover { background: var(--cta-fill-hover); }
.dot-check-action.is-secondary { background: var(--gray-100); color: var(--ink); }
.dot-check-flag { background: #dfe8f4; color: var(--navy); }
.dot-check-name { color: var(--navy); }

/* -- Inner-page heroes: same navy band -------------------------------- */
.page-hero {
  color: #fff;
  border-bottom: 0;
  background:
    radial-gradient(700px 300px at 86% 0%, rgba(249,115,22,0.22), transparent 60%),
    linear-gradient(180deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.80); }
.page-hero .hero-eyebrow { color: var(--orange-300); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(255,255,255,0.7); }
.page-hero .btn-outline-navy { color: #fff; border-color: rgba(255,255,255,0.5); }
.page-hero .btn-outline-navy:hover { background: rgba(255,255,255,0.16); border-color: #fff; color: #fff; }
.page-hero .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; }

/* -- Alternating washes ----------------------------------------------- */
.doorway-wrap { background: var(--tint); }
.doorway { border-color: rgba(30,58,95,0.14); }
.doorway-eyebrow { color: var(--orange-dark); font-weight: 700; }
.bundles-section { background: var(--tint); }
.bg-gray { background: var(--tint); }
.dp-section { background: var(--tint-warm); }

/* -- Packages: three distinct cards ----------------------------------- */
.bundle-card { border: 1px solid rgba(30,58,95,0.16); border-top: 4px solid var(--navy); }
.bundle-card.monthly {
  background: var(--tint-warm);
  border-color: rgba(249,115,22,0.38);
  border-top: 4px solid var(--orange);
}
.bundle-card.featured {
  background: linear-gradient(165deg, var(--navy-dark) 0%, var(--navy) 100%);
  border: 1px solid var(--navy-dark);
  border-top: 4px solid var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.30), var(--shadow-lg);
}
.bundle-badge { background: var(--cta-fill); color: var(--on-cta); border: 0; font-weight: 800; box-shadow: 0 4px 12px rgba(249,115,22,0.35); }
.bundle-tier { color: var(--orange-dark); font-weight: 700; }
.bundle-card.featured .bundle-tier { color: var(--orange-300); }
.bundle-name, .bundle-price { color: var(--navy); }
.bundle-card.featured .bundle-name, .bundle-card.featured .bundle-price { color: #fff; }
.bundle-price sup { color: var(--orange-dark); }
.bundle-card.featured .bundle-price sup { color: var(--orange-300); }
.bundle-includes li svg { color: var(--orange-icon); }
.bundle-card.featured .bundle-includes li svg { color: #fb923c; }
.bundle-card.featured .btn-primary { background: var(--cta-fill); color: var(--on-cta); border-color: var(--cta-fill); }
.bundle-card.featured .btn-primary:hover { background: var(--cta-fill-hover); }

/* -- Process ---------------------------------------------------------- */
.flow-step { border-top: 3px solid var(--navy); }
.flow-num {
  display: inline-flex;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--cta-fill);
  color: var(--on-cta);
  font-weight: 700;
  margin-bottom: 14px;
}
.flow-step h3 { color: var(--navy); }
.flow-badge { background: var(--tint-warm); color: var(--navy); }
.flow-badge svg { color: var(--orange-icon); }

/* -- Services / add-ons ----------------------------------------------- */
.service-icon { background: var(--navy); }
.service-icon svg { color: var(--orange-300); }
.service-icon.orange { background: var(--cta-fill); }
.service-icon.orange svg { color: var(--on-cta); }
.service-card:hover { border-color: var(--orange); }
.service-price { color: var(--navy); }
.service-link { font-weight: 700; }
.dp-card { border-top: 4px solid var(--orange); }
.dp-icon { background: var(--navy); }
.dp-icon svg { stroke: var(--orange-300); }
.dp-price { color: var(--navy); }
.dp-price sup { color: var(--orange-dark); }
.dp-features svg { stroke: var(--orange-icon); }
.dp-card .btn-navy { background: var(--cta-fill); color: var(--on-cta); border-color: var(--cta-fill); box-shadow: 0 4px 14px rgba(249,115,22,0.30); }
.dp-card .btn-navy:hover { background: var(--cta-fill-hover); border-color: var(--cta-fill-hover); }
.benefit-icon, .contact-item-icon { background: var(--navy); }
.benefit-icon svg, .contact-item-icon svg { color: var(--orange-300); }

/* -- Why-us panel, commitments ---------------------------------------- */
.why-panel::before { background: radial-gradient(circle, rgba(249,115,22,0.32) 0%, transparent 70%); }
.why-eyebrow { color: var(--orange-300); }
.why-row span:last-child { color: #fff; }
.why-panel .btn-primary { background: var(--cta-fill); color: var(--on-cta); border-color: var(--cta-fill); }
.why-panel .btn-primary:hover { background: var(--cta-fill-hover); }
.testimonial-card { border-top: 4px solid var(--orange); }
.commit-title { color: var(--navy); }

/* -- Closing CTA ------------------------------------------------------- */
.cta-banner {
  background:
    radial-gradient(820px 420px at 50% 125%, rgba(249,115,22,0.34), transparent 66%),
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.cta-banner::before { display: none; }
.cta-banner .btn-primary { background: var(--cta-fill); color: var(--on-cta); border-color: var(--cta-fill); }
.cta-banner .btn-primary:hover { background: var(--cta-fill-hover); border-color: var(--cta-fill-hover); }

/* -- Footer, FAQ, checks, forms ---------------------------------------- */
.footer { border-top: 3px solid var(--orange); }
.footer-col h3 { color: var(--navy); }
.faq-question.open .faq-chevron { color: var(--orange-icon); }
.check-list li svg, .pricing-feature svg { color: var(--orange-icon); }
.about-visual::before { background: radial-gradient(circle, rgba(249,115,22,0.32) 0%, transparent 70%); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.28);
}
.stat-number { color: var(--navy); }
.stat-number .orange { color: var(--orange-dark); }
.flow-num { gap: 0.3em; }
@media (max-width: 768px) {
  /* the separators are hidden on phones; stack the three proof points so they
     read as a list instead of one run-on line */
  .hero-proof { flex-direction: column; gap: 2px; }
}
/* lightest text grey, re-cut so it holds 4.5:1 on the new tinted sections too
   (was #6b7686 = 4.1:1 on --tint) */
:root { --gray-400: #5f6b7a; }