/* ═══════════════════════════════════════════════════════════
   permits.agency — Shared Stylesheet
   Navy (#1e3a5f) + Orange (#f97316) Theme
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --navy:        #1e3a5f;
  --navy-dark:   #0d2137;
  --navy-mid:    #2d5282;
  --navy-light:  #3b6fa0;
  --orange:      #f97316;
  --orange-dark: #c05a0b;
  --orange-hover:#ea6c0a;
  --orange-light:#fed7aa;
  --white:       #ffffff;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow:      0 4px 12px rgba(0,0,0,0.10);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg:   0 20px 40px rgba(0,0,0,0.14);
  --radius:      10px;
  --radius-lg:   16px;
  --transition:  all 0.25s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-800);
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-lg { padding: 100px 0; }
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.2;
}
.section-subtitle {
  font-size: 1.05rem;
  color: var(--gray-500);
  margin-top: 12px;
  max-width: 560px;
}
.section-header { margin-bottom: 52px; }
.section-header.center { text-align: center; }
.section-header.center .section-subtitle { margin: 12px auto 0; }

.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange-light);
  color: var(--orange-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* ── Navigation ──────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: -0.02em;
}
.nav-logo svg {
  width: 32px;
  height: 32px;
  color: var(--orange);
}
.nav-logo .logo-accent { color: var(--orange); }
.nav-irs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy-dark);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray-600);
  border-radius: 8px;
  transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--navy);
  background: var(--gray-100);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--gray-700);
}
.nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--gray-200);
  padding: 12px 24px 20px;
  gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: 8px;
}
.nav-mobile a:hover { background: var(--gray-100); }
.nav-mobile .btn { margin-top: 8px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249,115,22,0.35);
}
.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.7);
}
/* Borderless white. One step quieter than .btn-outline-white, for the second
   of two secondary links -- the hero has two of them under the lookup bar and
   giving both the same outline made them read as a pair of equal choices
   sitting where the primary action used to be. */
.btn-ghost-white {
  background: transparent;
  color: rgba(255,255,255,0.72);
  border-color: transparent;
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}
.btn-navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn-navy:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.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-lg {
  padding: 15px 32px;
  font-size: 1rem;
  border-radius: var(--radius);
}
.btn-sm {
  padding: 8px 18px;
  font-size: 0.82rem;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Hero ─────────────────────────────────────────────────────
   SINGLE COLUMN, CENTRED, MONOCHROMATIC.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   This was a 1fr 1fr grid with an illustration in the right half and an
   orange radial glow bleeding across both. The lookup bar -- the only thing
   on the page a visitor can operate -- was capped at 520px inside the left
   column and sat under a filled orange button pointing somewhere else.

   The rules below are what enforce the new hierarchy: one column, one accent
   (white), and nothing between the headline and the input. NO ORANGE BELONGS
   IN THIS SECTION. Adding a colour back here does not add emphasis, it takes
   emphasis away from .dot-check, which is the element that has to win. */
.hero {
  background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy) 100%);
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding: 76px 0 80px;
}
/* One wash, white, low, behind the search bar. It exists to lift the input
   off a flat field, not to decorate the corner of the section -- which is why
   it is centred on the column rather than parked off the right edge. */
.hero::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  width: 900px;
  max-width: 140%;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.055) 0%, transparent 68%);
  pointer-events: none;
}
/* A single hairline under the fold. Replaces the second radial glow, which
   was doing nothing a border cannot do more quietly. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
/* THE TWO <br>-SEPARATED LINES MUST NOT WRAP AGAIN.
   At 3.35rem in a 760px column each sentence broke a second time, the title
   grew from two lines to four, and that pushed the lookup bar to y=581 --
   below the fold on a 1280x720 laptop, which defeats the entire point of
   putting it first. The column is 860px and the cap is 3rem so both lines
   fit; check this in a browser before raising either number. */
.hero-title {
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  text-wrap: balance;
}
/* The second line is the instruction, and it is DIMMED rather than coloured.
   Orange here competed directly with the white submit button 200px below it;
   a step down in value reads as the same emphasis without the fight. */
.hero-title em {
  font-style: normal;
  font-weight: 700;
  color: rgba(255,255,255,0.50);
}
.hero-description {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.66);
  line-height: 1.7;
  margin: 0 auto 40px;
  max-width: 580px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
/* One line, no icons, no boxes. Four bordered badge tiles with orange stars
   used to sit here; they were four separate objects making one claim. */
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.52);
}
.hero-proof span { color: rgba(255,255,255,0.25); }
.hero-live-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 14px 7px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
/* White, not green. The dot means "this number is live", and in a section
   whose whole point is that one white control is the thing to use, a second
   saturated colour reads as a second call to action. */
.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 rgba(255,255,255,0.5);
  animation: hero-live-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes hero-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live-dot { animation: none; }
}
/* ── Hero carrier lookup ─────────────────────────────────────
   MONOCHROMATIC BY DESIGN. Everything else in this hero competes for
   attention with orange; the lookup bar is white on navy and nothing else,
   so it reads as an instrument rather than another advertisement. The one
   colour that does appear is the amber overdue flag, and it earns it by
   carrying information the customer did not have a moment ago. */
/* CENTRED AND WIDE, because it is now the primary control on the page rather
   than one element in a left-hand column. 620px is wide enough that the bar
   reads as the subject of the hero and still narrow enough that the cursor
   and the submit button are in the same glance. */
.dot-check {
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
}
.dot-check-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}
.dot-check-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 14px;
  padding: 7px 7px 7px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dot-check-bar:focus-within {
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.10);
}
.dot-check-icon {
  width: 19px;
  height: 19px;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.dot-check-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--white);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  padding: 14px 0;
  letter-spacing: 0.01em;
}
.dot-check-bar input::placeholder {
  color: rgba(255,255,255,0.40);
  font-weight: 400;
  letter-spacing: 0;
}
.dot-check-submit {
  flex-shrink: 0;
  background: var(--white);
  color: var(--navy-dark);
  border: 0;
  border-radius: 10px;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  min-width: 116px;
}
.dot-check-submit:hover:not(:disabled) {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}
.dot-check-submit:disabled { opacity: 0.55; cursor: default; }
/* The spinner replaces the label rather than sitting beside it, so the
   button does not change width mid-request and shift the bar under the
   cursor that is still hovering it. */
.dot-check-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(13,33,55,0.25);
  border-top-color: var(--navy-dark);
  border-radius: 50%;
  animation: dot-check-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes dot-check-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dot-check-spinner { animation-duration: 2.4s; }
  .dot-check-submit:hover:not(:disabled) { transform: none; }
}
.dot-check-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-top: 9px;
}
/* LEFT-ALIGNED inside a centred form, deliberately. Everything above it is a
   headline and reads centred; this is a record -- a company name, an address,
   a due date, a row of actions -- and a ragged-both-edges block of facts is
   harder to scan than a flush-left one. */
.dot-check-result {
  text-align: left;
  margin-top: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-left: 3px solid rgba(255,255,255,0.45);
  border-radius: 10px;
  padding: 15px 17px;
}
.dot-check-result.is-error {
  border-left-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}
.dot-check-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.35;
}
.dot-check-meta {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.60);
  margin-top: 5px;
  line-height: 1.6;
}
.dot-check-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 0.79rem;
  font-weight: 600;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.14);
}
.dot-check-flag.is-overdue {
  background: rgba(251,191,36,0.13);
  border-color: rgba(251,191,36,0.32);
  color: #fde68a;
}
.dot-check-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 13px;
}
.dot-check-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--navy-dark);
  border-radius: 7px;
  padding: 9px 15px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}
.dot-check-action:hover { background: rgba(255,255,255,0.88); }
.dot-check-action.is-secondary {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.28);
}
.dot-check-action.is-secondary:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}
.dot-check-source {
  font-size: 0.71rem;
  color: rgba(255,255,255,0.38);
  margin-top: 11px;
  line-height: 1.5;
}

/* .hero-graphic is GONE, not hidden. It styled a 480x400 inline SVG of a
   truck that occupied the right half of the hero and pushed the lookup bar
   into a 520px column. The markup went with it -- an illustration that is
   display:none on every phone and competing with the primary control on every
   desktop is not carrying its weight in the most valuable block on the site. */

/* Page hero (inner pages) */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.page-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  margin: 0 auto;
}
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}
.breadcrumb a { color: rgba(255,255,255,0.65); }
.breadcrumb a:hover { color: var(--orange-light); }
.breadcrumb span { color: rgba(255,255,255,0.35); }

/* ── Stats Bar ───────────────────────────────────────────── */
.stats-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 0;
}
.stats-bar-inner {
  display: grid;
  /* Sized to however many stats the page actually has. Hard-coding four
     columns left empty cells behind the moment a stat was removed, which is
     what happened when the filings-processed and acceptance-rate figures came
     off the home page. The 160px floor still gives two columns on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 288px));
  justify-content: center;
}
.stat-item {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--gray-200);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-number .orange { color: var(--orange); }
.stat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-top: 4px;
}

/* ── Service Cards ───────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Services bento ──────────────────────────────────────────
   OPT-IN, AND THE SPANS COME FROM POSITION, NOT FROM CLASSES ON THE CARDS.
   verify_price_sync section 3 finds each homepage price by splitting the page
   on the literal `<div class="service-card">`; a `service-card wide` modifier
   would drop that card out of the probe without failing anything, which is the
   quiet version of the exact bug the probe was written to catch. So the cards
   stay identical and the grid does the work.

   Six equal cards, then a seventh across the full width. The wide one is
   MCS-150 -- the filing the hero lookup exists to warn people about -- and it
   gets the width because it is the only card here answering a deadline the
   visitor may have already missed. */
.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;
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
}
.services-bento > .service-card:nth-child(7) .service-icon { margin-bottom: 0; }
/* .service-card-body exists only on the wide card. h3 and p have to travel
   together as one column between the icon and the price, and stacking them in
   a single grid area would overlap them -- a wrapper is the honest fix. */
.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;
}
@media (max-width: 900px) {
  .services-bento > .service-card:nth-child(7) {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .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;
  }
}
.service-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--orange));
  opacity: 0;
  transition: var(--transition);
}
.service-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.service-icon svg {
  width: 26px;
  height: 26px;
  color: var(--white);
}
.service-icon.orange {
  background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 100%);
}
.service-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 8px;
}
.service-card p {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: 20px;
}
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.service-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.service-price span {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--gray-400);
  letter-spacing: 0;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange);
  transition: var(--transition);
}
.service-link:hover { gap: 8px; color: var(--orange-dark); }
.service-link svg { width: 15px; height: 15px; }

/* ── Why Choose Us ───────────────────────────────────────── */
.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: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--orange-light), #fde68a);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.benefit-icon svg {
  width: 24px;
  height: 24px;
  color: var(--orange-dark);
}
.benefit-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 6px;
}
.benefit-item p {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.65;
}

/* ── Testimonials ────────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
}
.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}
.testimonial-stars svg {
  width: 16px;
  height: 16px;
  color: #fbbf24;
}
.testimonial-text {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.author-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
}
.author-title {
  font-size: 0.78rem;
  color: var(--gray-400);
}

/* ── CTA Banner ──────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-mid) 100%);
  color: var(--white);
  text-align: center;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 65%);
}
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cta-banner p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 36px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

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

/* ── Pricing ─────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  transition: var(--transition);
}
.pricing-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.pricing-card.featured {
  border-color: var(--orange);
  background: linear-gradient(180deg, #fff7f0 0%, var(--white) 100%);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15), var(--shadow-md);
}
.featured-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.pricing-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 8px;
}
.pricing-service {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 6px;
}
.pricing-price {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 20px 0 6px;
}
.pricing-price sup {
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
}
.pricing-price-note {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-bottom: 24px;
}
.pricing-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 24px 0;
}
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--gray-600);
}
.pricing-feature svg {
  width: 16px;
  height: 16px;
  color: #22c55e;
  flex-shrink: 0;
}
.pricing-feature.muted { color: var(--gray-400); }
.pricing-feature.muted svg { color: var(--gray-300); }

/* ── Service Detail (services page) ─────────────────────── */
.service-detail {
  padding: 72px 0;
  border-bottom: 1px solid var(--gray-200);
}
.service-detail:last-child { border-bottom: none; }
.service-detail:nth-child(even) { background: var(--gray-50); }
.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.service-detail-visual {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-mid));
  border-radius: var(--radius-lg);
  padding: 48px;
  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: 72px;
  height: 72px;
  color: var(--orange);
  margin-bottom: 20px;
}
.service-detail-visual h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.service-detail-visual p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
}
.service-detail-badge {
  background: rgba(249,115,22,0.2);
  color: var(--orange-light);
  border: 1px solid rgba(249,115,22,0.3);
  font-size: 1rem;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 100px;
  margin-top: 20px;
}
.service-detail-content h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.service-detail-content p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 24px;
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--gray-600);
}
.check-list li svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 1px;
}
.info-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.info-box p {
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-bottom: 0;
}

/* ── Services page ───────────────────────────────────────── */
.services-quick-nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 69px; /* sits right below the also-sticky main .nav (69px tall) instead of overlapping it */
  z-index: 90;
}
.services-quick-nav-scroll {
  display: flex;
  gap: 2px;
  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;
  padding: 14px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-400);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.services-quick-nav a:hover { color: var(--navy); }
.services-quick-nav a.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.services-quick-nav a .cat-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.service-category-header {
  padding: 40px 0 8px;
}
.service-category-header .label-tag { margin-bottom: 10px; }
.service-category-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: -0.02em;
}
.service-category-header p {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-top: 6px;
  max-width: 60ch;
}

.service-price-card {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.service-detail:nth-child(even) .service-price-card,
.service-block.alt .service-price-card { background: var(--white); }
.service-price-card .price-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
}
.service-price-card .price-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy-dark);
  letter-spacing: -0.03em;
}
.service-price-card .price-value .price-suffix {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-400);
}
.service-price-card .price-note {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-top: 2px;
}

.service-info-panel {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 32px;
}
.service-block.alt .service-info-panel { background: var(--white); }
.service-info-panel .panel-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-bottom: 16px;
}

.info-row-list { display: flex; flex-direction: column; gap: 12px; }
.info-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row .k { font-size: 0.875rem; color: var(--gray-500); }
.info-row .v { font-weight: 700; color: var(--navy-dark); }
.info-row .v.good { color: #22c55e; }

.qualify-list { display: flex; flex-direction: column; gap: 8px; }
.qualify-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.18);
  border-radius: 8px;
}
.qualify-item svg { width: 16px; height: 16px; color: #22c55e; flex-shrink: 0; }
.qualify-item span { font-size: 0.82rem; color: var(--gray-500); }

.fact-list { display: flex; flex-direction: column; gap: 8px; }
.fact-list li {
  font-size: 0.85rem;
  color: var(--gray-500);
  padding: 10px 14px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}
.service-block.alt .fact-list li { background: var(--gray-50); }

.mini-callout {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
}
.mini-callout.orange {
  background: rgba(249,115,22,0.07);
  border: 1px solid rgba(249,115,22,0.2);
}
.mini-callout.navy {
  background: rgba(30,58,95,0.05);
  border: 1px solid rgba(30,58,95,0.12);
}
.mini-callout .callout-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.mini-callout.orange .callout-title { color: var(--orange); }
.mini-callout.navy .callout-title { color: var(--navy-dark); }
.mini-callout .callout-body { font-size: 0.8rem; color: var(--gray-500); }
.mini-callout a.callout-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}

.mc-timeline { display: flex; flex-direction: column; }
.mc-timeline-step { display: flex; gap: 16px; padding-bottom: 16px; }
.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(--orange);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mc-timeline-step.done .mc-timeline-marker .dot { background: #22c55e; }
.mc-timeline-marker .line {
  width: 2px;
  flex: 1;
  background: var(--gray-200);
  margin-top: 6px;
}
.mc-timeline-step-body { padding-top: 4px; }
.mc-timeline-step-body .step-title { font-weight: 700; font-size: 0.875rem; color: var(--navy-dark); }
.mc-timeline-step-body .step-desc { font-size: 0.8rem; color: var(--gray-400); margin-top: 2px; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  cursor: pointer;
  transition: var(--transition);
}
.faq-question:hover { background: var(--gray-50); color: var(--navy); }
.faq-question.open { color: var(--navy); background: var(--gray-50); }
.faq-chevron {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.faq-question.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--orange);
}
.faq-answer {
  display: none;
  padding: 0 24px 20px;
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.75;
}
.faq-answer.open { display: block; }

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}
.contact-info h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 12px;
}
.contact-info > p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 36px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.contact-item-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon svg {
  width: 20px;
  height: 20px;
  color: var(--white);
}
.contact-item-text strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 2px;
}
.contact-item-text span {
  font-size: 0.875rem;
  color: var(--gray-500);
}
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}
.contact-form-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 24px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--gray-800);
  background: var(--white);
  transition: var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(59,111,160,0.12);
}
.form-group textarea { resize: vertical; min-height: 110px; }

/* ── About ───────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-visual {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.about-visual::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(249,115,22,0.2) 0%, transparent 70%);
}
.about-metric {
  position: relative;
  margin-bottom: 28px;
}
.about-metric:last-child { margin-bottom: 0; }
.about-metric-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: -0.04em;
  line-height: 1;
}
.about-metric-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}
.credential-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}
.credential-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.credential-item svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
  flex-shrink: 0;
}
.credential-item p {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy-dark);
  margin: 0;
}
.credential-item span {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-weight: 400;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer-brand h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand h2 svg {
  width: 28px;
  height: 28px;
  color: var(--orange);
}
.footer-brand h2 .logo-accent { color: var(--orange); }
.footer-brand p {
  font-size: 0.855rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.footer-col h3 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col ul li a {
  font-size: 0.855rem;
  color: rgba(255,255,255,0.55);
  transition: var(--transition);
}
.footer-col ul li a:hover { color: var(--orange); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.855rem;
  margin-bottom: 10px;
}
.footer-contact-item svg {
  width: 14px;
  height: 14px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 3px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  transition: var(--transition);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.65); }
.irs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.25);
  color: var(--orange-light);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
}

/* ── Utility ─────────────────────────────────────────────── */
.text-orange { color: var(--orange); }
.text-navy { color: var(--navy); }
.text-muted { color: var(--gray-500); }
.bg-gray { background: var(--gray-50); }
.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: 700; }

/* ── Experience Banner ───────────────────────────────────── */
.experience-banner {
  background: linear-gradient(90deg, var(--navy-dark) 0%, #1a3a6b 50%, var(--navy-dark) 100%);
  border-bottom: 2px solid var(--orange);
  padding: 13px 0;
  text-align: center;
}
.experience-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.experience-banner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.experience-banner-item svg {
  width: 14px;
  height: 14px;
  color: var(--orange);
  flex-shrink: 0;
}
.experience-banner-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.15);
}
.experience-years {
  color: var(--orange);
  font-weight: 800;
}

/* ── Bundle Cards ────────────────────────────────────────── */
.bundles-section {
  background: var(--navy-dark);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.bundles-section::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.bundles-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59,111,160,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.bundles-section .section-title { color: var(--white); }
.bundles-section .section-subtitle { color: rgba(255,255,255,0.55); }
.bundles-section .label-tag {
  background: rgba(249,115,22,0.2);
  color: var(--orange-light);
  border: 1px solid rgba(249,115,22,0.3);
}
.bundles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.bundle-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}
.bundle-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-4px);
}
.bundle-card.featured {
  background: linear-gradient(160deg, rgba(249,115,22,0.18) 0%, rgba(249,115,22,0.08) 100%);
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 0 0 1px rgba(249,115,22,0.2), 0 20px 40px rgba(0,0,0,0.3);
}
.bundle-card.monthly {
  background: rgba(59,111,160,0.12);
  border-color: rgba(59,111,160,0.35);
}
.bundle-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.bundle-tier {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 6px;
}
.bundle-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.2;
}
.bundle-tagline {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.bundle-price {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.bundle-price sup {
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
}
.bundle-price-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 24px;
}
.bundle-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.bundle-includes-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}
.bundle-includes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 28px;
  flex: 1;
}
.bundle-includes li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}
.bundle-includes li svg {
  width: 15px;
  height: 15px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 1px;
}
.bundle-includes li.highlight {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}

/* ── Free Services Bar ───────────────────────────────────── */
.free-services-bar {
  background: linear-gradient(90deg, #064e3b, #065f46);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.free-tag {
  background: #22c55e;
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.free-services-bar p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  flex: 1;
}
.free-services-bar strong { color: white; }

/* ── Individual Pricing Table ────────────────────────────── */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pricing-table th {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  text-align: left;
}
.pricing-table th:last-child { text-align: right; }
.pricing-table td {
  padding: 16px 20px;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--gray-100);
  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: 700; color: var(--navy); }
.pricing-table .service-name { font-weight: 700; color: var(--navy-dark); }
.pricing-table .service-desc { font-size: 0.78rem; color: var(--gray-400); margin-top: 2px; }
.price-free { color: #22c55e !important; }
.price-custom { color: var(--orange) !important; font-size: 0.82rem !important; }

/* ── Positioning Banner ──────────────────────────────────── */
.positioning-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
}
.positioning-block h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.positioning-block p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.75;
  max-width: 680px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  /* Two per row, so the six equal cards need 3 of a 6-column track each and
     the wide one still spans everything. */
  .services-bento > .service-card { grid-column: span 3; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .bundles-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-lg { padding: 64px 0; }
  .container { padding: 0 16px; }

  .bundles-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .experience-banner-inner { gap: 16px; }
  .experience-banner-divider { display: none; }
  .free-services-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .positioning-block { padding: 24px 20px; }

  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  /* THE BADGE WAS PUSHING THE HAMBURGER OFF THE SCREEN.
     At 375px the row is logo (187px) + badge (139px) + hamburger (38px) = 364
     in a 328px container, so the menu button landed at x=380 and the whole
     document scrolled sideways -- on every page, not just this one. The claim
     is not lost: it is in .hero-proof one screen down and in the footer. */
  .nav-irs-badge { display: none; }

  /* Hero */
  .dot-check { max-width: none; }
  .dot-check-bar { flex-wrap: wrap; padding: 10px; }
  /* The input keeps the icon company on row one; the button takes the whole
     of row two rather than being squeezed to a stub next to a 4-character
     input, which is what a plain flex-shrink gives you at 360px. */
  .dot-check-bar input { flex: 1 1 60%; padding: 6px 0; }
  .dot-check-submit { flex: 1 0 100%; }
  .dot-check-actions .dot-check-action { flex: 1 1 auto; justify-content: center; }
  .hero { padding: 56px 0 48px; }
  .hero-title { font-size: 2rem; }
  .hero-description { margin-bottom: 30px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-proof { gap: 8px; font-size: 0.78rem; }

  /* Grids */
  .services-grid { grid-template-columns: 1fr; }
  .services-bento > .service-card { grid-column: 1 / -1; }
  .benefits-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 28px 20px; }
  .cta-banner-actions { flex-direction: column; align-items: center; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}