/* ============================================================
   NJ Commercial Auto Insurance — Site Styles
   Built on Crazy Rich Agents design tokens
   Conversion-focused: bolder hero, bigger CTAs, more orange
   ============================================================ */

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

:root {
  /* CRA tokens — verbatim from design system */
  --navy-deep:   #0D1F30;
  --navy-dark:   #132942;
  --navy:        #1B3A5C;
  --blue:        #4A8EC2;
  --blue-light:  #6BAED6;
  --blue-pale:   #E8F1F8;
  --orange:       #E8853D;
  --orange-hover: #D4742F;
  --orange-light: #F5A94D;
  --orange-pale:  #FFF4E8;
  --white:      #FFFFFF;
  --off-white:  #F7F9FC;
  --gray-50:    #F0F3F7;
  --gray-100:   #E2E7EE;
  --gray-400:   #8896A7;
  --gray-600:   #556275;
  --gray-800:   #2D3A48;

  --bg: var(--off-white);
  --bg-elevated: var(--white);
  --bg-subtle: var(--gray-50);
  --bg-inverse: var(--navy-deep);
  --fg: var(--navy-deep);
  --fg-muted: var(--gray-600);
  --fg-subtle: var(--gray-400);
  --fg-inverse: var(--white);
  --fg-brand: var(--orange);
  --fg-link: var(--navy);
  --border: var(--gray-100);
  --border-strong: var(--gray-400);
  --border-focus: var(--blue);
  --accent: var(--orange);
  --accent-hover: var(--orange-hover);
  --accent-soft: var(--orange-pale);
  --success: #2F8F5F;
  --warning: var(--orange);
  --danger: #C84B3F;
  --info: var(--blue);

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px;
  --fs-4xl: 48px; --fs-5xl: 60px; --fs-6xl: 76px;

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.7;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(13, 31, 48, 0.06);
  --shadow-sm: 0 2px 4px rgba(13, 31, 48, 0.06), 0 1px 2px rgba(13, 31, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 31, 48, 0.08), 0 2px 4px rgba(13, 31, 48, 0.04);
  --shadow-lg: 0 12px 28px rgba(13, 31, 48, 0.12), 0 4px 8px rgba(13, 31, 48, 0.06);
  --shadow-xl: 0 24px 48px rgba(13, 31, 48, 0.18), 0 8px 16px rgba(13, 31, 48, 0.08);
  --shadow-orange: 0 8px 24px rgba(232, 133, 61, 0.38);
  --shadow-inset: inset 0 1px 2px rgba(13, 31, 48, 0.08);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  --max-w: 1280px;
  --gutter: 24px;
  --header-h: 106px;
  --nav-h: 72px;
  --topbar-h: 34px;
  --mobile-cta-h: 64px;
}

/* ============ Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Skip-to-content link (WCAG 2.1 AA) */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--white); outline-offset: 2px; }
main:focus { outline: none; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--orange); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0; text-wrap: balance; color: var(--fg); }
p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
}
.h1 { font-size: var(--fs-6xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.body-lg { font-size: var(--fs-md); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-sm); color: var(--fg-muted); }
.muted { color: var(--fg-muted); }

@media (max-width: 768px) {
  .h1 { font-size: 44px; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 22px; }
}

/* ============ Layout ============ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s-20) 0; }
.section-tight { padding: var(--s-12) 0; }
@media (max-width: 768px) {
  .section { padding: var(--s-12) 0; }
  .section-tight { padding: var(--s-10) 0; }
}

main { padding-top: var(--header-h); }
@media (max-width: 768px) {
  main { padding-bottom: var(--mobile-cta-h); }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 16px 28px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all var(--dur-base) var(--ease-standard);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover {
  background: var(--orange-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(232, 133, 61, 0.5);
}
.btn-secondary {
  background: var(--white);
  color: var(--navy-deep);
  border-color: var(--gray-100);
}
.btn-secondary:hover {
  background: var(--gray-50);
  color: var(--navy-deep);
  border-color: var(--gray-400);
}
.btn-ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-lg {
  padding: 20px 36px;
  font-size: var(--fs-md);
  border-radius: var(--r-md);
}
.btn-xl {
  padding: 24px 44px;
  font-size: var(--fs-lg);
  border-radius: var(--r-lg);
}
.btn-block { display: flex; width: 100%; }
.btn .icon { width: 20px; height: 20px; stroke-width: 2.5; }

/* ============ Site header shell (topbar + condensing nav) ============ */
.site-shell {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--white);
}
.topbar {
  height: var(--topbar-h);
  background: var(--navy-deep);
  color: rgba(255,255,255,0.78);
  font-size: 12.5px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar__inner {
  height: var(--topbar-h);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.topbar__left { display: flex; align-items: center; gap: var(--s-6); }
.topbar__right { display: flex; align-items: center; gap: var(--s-5); }
.topbar a { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: var(--fw-semibold); }
.topbar a:hover { color: var(--orange-light); }
.topbar__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 8px; }
@media (max-width: 860px) { .topbar__hours { display: none; } }
@media (max-width: 560px) { .topbar { display: none; } }

/* ============ Site header ============ */
.site-header {
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .topbar { transition: height var(--dur-base, 200ms) var(--ease, cubic-bezier(0.2,0,0,1)), opacity var(--dur-base, 200ms) var(--ease, cubic-bezier(0.2,0,0,1)); }
  .site-header { transition: height var(--dur-base, 200ms) var(--ease, cubic-bezier(0.2,0,0,1)); }
  .site-shell { transition: box-shadow var(--dur-base, 200ms) var(--ease, cubic-bezier(0.2,0,0,1)); }
}
.site-shell.scrolled { box-shadow: 0 6px 18px rgba(13,31,48,0.10); }
.site-shell.scrolled .topbar { height: 0; opacity: 0; }
.site-shell.scrolled .site-header { height: 58px; }
.site-shell.scrolled .brand__sub { opacity: 0; visibility: hidden; }

/* ============ Nav items + dropdowns ============ */
.nav-item { position: relative; }
.nav-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-top .caret { font-size: 9px; opacity: .5; transition: transform 120ms var(--ease, cubic-bezier(0.2,0,0,1)); }
.dropdown {
  position: absolute;
  top: 100%; left: -10px;
  min-width: 264px;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease, cubic-bezier(0.2,0,0,1)), transform 200ms var(--ease, cubic-bezier(0.2,0,0,1)), visibility 200ms;
  z-index: 60;
}
.dropdown-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dropdown-inner a {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-inner a:hover { background: var(--off-white); color: var(--navy-deep); }
.dropdown-inner a.active { color: var(--orange); }
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item.has-dropdown:hover .nav-top .caret { transform: rotate(180deg); }

/* ============ Mobile sheet ============ */
.nav-toggle {
  display: none;
  background: var(--navy-deep);
  color: var(--white);
  border: none;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4) var(--gutter) var(--s-6);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mm-group { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mm-top { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--navy-deep); text-decoration: none; padding: 6px 0; }
.mm-kids { display: flex; flex-direction: column; padding-left: 12px; }
.mm-kids a { font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: none; padding: 5px 0; }
.mm-kids a:hover { color: var(--orange); }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

.site-header__inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-10);
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: inherit; }
.brand__logo {
  display: block;
  height: 52px;
  width: auto;
  align-self: flex-start;
  flex-shrink: 0;
  transition: height 200ms var(--ease-standard);
}
.site-shell.scrolled .brand__logo { height: 40px; }
@media (max-width: 640px) { .brand__logo { height: 38px; } }
.brand__sub { transition: opacity 200ms var(--ease, cubic-bezier(0.2,0,0,1)); }
.brand__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy-deep);
}
.brand__mark .accent { color: var(--orange); }
.brand__sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-nav {
  display: flex;
  gap: 2px;
  margin-left: var(--s-6);
  align-items: center;
}
.site-nav .nav-top {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--navy-deep);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  position: relative;
  white-space: nowrap;
  transition: color 120ms var(--ease, cubic-bezier(0.2,0,0,1)), background 120ms var(--ease, cubic-bezier(0.2,0,0,1));
}
.site-nav .nav-top.active::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 11px; right: 11px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.site-nav .nav-top:hover { color: var(--orange); background: var(--off-white); }
.site-header__cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--navy-deep);
  text-decoration: none;
}
.site-header__phone svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }
.site-header__phone { white-space: nowrap; }
/* The topbar already carries the phone, so the in-header one is redundant once the
   dropdown nav needs the room. */
@media (max-width: 1360px) { .site-header__phone { display: none; } }
.site-header__phone:hover { color: var(--orange); }
.site-header__menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--navy-deep);
  padding: 8px;
  margin-left: auto;
}

@media (max-width: 1024px) {
  .site-nav { display: none; }
  .site-header__phone .label { display: none; }
}
@media (max-width: 640px) {
  .site-header__cta .btn { padding: 12px 20px; font-size: var(--fs-sm); }
  .site-header__phone { display: none; }
  .brand__sub { display: none; }
}

/* ============ Mobile CTA bar ============ */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-cta-h);
  background: var(--navy-deep);
  z-index: 99;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  gap: 8px;
}
.mobile-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-radius: var(--r-md);
}
.mobile-cta__call { background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.2); }
.mobile-cta__quote { background: var(--orange); color: var(--white); }
.mobile-cta svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
  .mobile-cta { display: flex; }
}

/* ============ Footer ============ */
.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  padding: var(--s-16) 0 var(--s-8);
  margin-top: var(--s-20);
}
.site-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-10); }
.footer-col h5 {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--orange-light); }
.footer-nap__brand {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--white);
  margin-bottom: var(--s-2);
}
.footer-nap__brand .accent { color: var(--orange); }
/* The lockup's wordmark is navy, so it needs a light chip to read on the navy footer. */
.footer-nap__logo {
  display: inline-block;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: var(--s-4);
  line-height: 0;
}
.footer-nap__logo img { display: block; height: 96px; width: auto; }
.footer-nap__tag {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--blue-light);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.footer-nap p { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); margin-bottom: var(--s-2); line-height: 1.5; }
.footer-nap .phone-big {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--s-2);
}
.footer-nap .phone-big:hover { color: var(--orange-light); }
.footer-legal {
  grid-column: 1 / -1;
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.footer-legal p { margin: 0; font-size: var(--fs-xs); line-height: 1.65; color: rgba(255,255,255,0.55); }
.footer-legal__entity { font-family: var(--font-display); font-weight: var(--fw-semibold); color: rgba(255,255,255,0.78) !important; letter-spacing: .01em; }
.footer-legal__disclosure { font-style: italic; color: rgba(255,255,255,0.45) !important; }
.footer-bottom {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.7); }

@media (max-width: 900px) {
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer .container { grid-template-columns: 1fr; }
}

/* ============ Hero (navy bg) ============ */
.hero {
  background: var(--navy-deep);
  background-image:
    radial-gradient(ellipse at 80% 0%, rgba(75, 142, 194, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(232, 133, 61, 0.1) 0%, transparent 50%);
  color: var(--white);
  padding: var(--s-20) 0 var(--s-16);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 30%, var(--orange-light) 70%, transparent 100%);
}
.hero h1, .hero h2, .hero h3 { color: var(--white); }
.hero .lede { color: rgba(255,255,255,0.85); font-size: var(--fs-md); line-height: var(--lh-normal); max-width: 580px; }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 133, 61, 0.15);
  border: 1px solid rgba(232, 133, 61, 0.4);
  border-radius: var(--r-pill);
  color: var(--orange-light);
  margin-bottom: var(--s-5);
}
.hero .eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--orange);
}

.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.hero-split__copy h1 { font-size: var(--fs-6xl); font-weight: var(--fw-black); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: var(--s-5); }
.hero-split__copy h1 .accent { color: var(--orange); }
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-8);
}
.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  padding: 8px 0;
}
.hero-phone:hover { color: var(--orange-light); }
.hero-phone .label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 2px;
}
.hero-phone .num { display: block; }
.hero-phone .icon { width: 22px; height: 22px; color: var(--orange); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero-split__copy h1 { font-size: 44px; }
}

/* ============ Video card ============ */
.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.video-card:hover { transform: translateY(-4px); }
.video-card__poster {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: var(--s-6);
}
.video-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Caption needs a scrim to stay legible over a light-background poster. */
.video-card__poster:has(.video-card__img)::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,48,0) 45%, rgba(13,31,48,0.78) 100%);
}
/* Playing state: the Drive iframe replaces the poster. Drive's own top-right
   popout/fullscreen control sends the viewer off to drive.google.com, which loses the
   visitor and shows them a Google file page instead of the site. The logo plate sits
   over that control — branding in the corner, and the exit is no longer reachable. */
.video-card.is-playing { cursor: default; }
.video-card.is-playing:hover { transform: none; }
.video-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-card__badge {
  position: absolute;
  top: 0; right: 0;
  z-index: 4;
  width: 30%;
  min-width: 96px;
  max-width: 150px;
  padding: 10px 12px;
  background: var(--white);
  border-bottom-left-radius: var(--r-md);
  box-shadow: -2px 2px 10px rgba(13,31,48,0.22);
  display: none;
}
.video-card.is-playing .video-card__badge { display: block; }
.video-card__badge img { width: 100%; height: auto; display: block; }
@media (max-width: 560px) {
  .video-card__badge { padding: 7px 8px; min-width: 78px; }
}
.video-card__poster.placeholder {
  background:
    linear-gradient(180deg, rgba(13,31,48,0.0) 30%, rgba(13,31,48,0.85) 100%),
    linear-gradient(135deg, #1B3A5C 0%, #0D1F30 60%, #132942 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
.video-placeholder-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--r-sm);
  align-self: flex-start;
  margin: var(--s-4);
}
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-orange), 0 0 0 8px rgba(232,133,61,0.15);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
}
.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: var(--shadow-orange), 0 0 0 16px rgba(232,133,61,0.18);
}
.video-card__play svg { width: 32px; height: 32px; color: var(--white); margin-left: 4px; }
.video-card__caption {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  margin: var(--s-4);
  align-self: flex-end;
  line-height: 1.3;
}
.video-card__caption .duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.5);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
  backdrop-filter: blur(8px);
}

/* ============ Photo placeholder ============ */
.photo-ph {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(13,31,48,0.04) 12px, rgba(13,31,48,0.04) 13px),
    var(--gray-50);
  border: 1px dashed var(--gray-400);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  color: var(--gray-600);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.photo-ph::before { content: '📷  '; opacity: 0.5; }
.photo-ph.dark {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(255,255,255,0.03) 12px, rgba(255,255,255,0.03) 13px),
    rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
}

/* ============ Form validation states (WCAG 2.1 AA) ============ */
/* Honeypot: visually hidden but still rendered + focusable-by-bot. Do NOT use
   display:none — headless spam bots skip display:none fields. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--danger, #C0392B) !important;
  background: rgba(192,57,43,0.03);
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  color: var(--danger, #C0392B);
}
.field-error::before { content: '!'; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--danger, #C0392B); color: var(--white); font-size: 10px; font-weight: 700; text-align: center; line-height: 14px; }
.form-error-summary {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(192,57,43,0.35);
  border-left: 3px solid var(--danger, #C0392B);
  border-radius: var(--r-md);
  background: rgba(192,57,43,0.05);
  color: var(--danger, #C0392B);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
}
.form-error-summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.form-error-summary a { color: var(--danger, #C0392B); text-decoration: underline; }

/* ============ Principal bio (About — E-E-A-T anchor) ============ */
.principal {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-6);
  align-items: start;
  margin: var(--s-6) 0 var(--s-10);
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.principal__photo {
  aspect-ratio: 4/5;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--navy-deep);
  background-image: radial-gradient(ellipse at 70% 20%, rgba(75,142,194,0.22) 0%, transparent 60%);
  display: flex;
  align-items: center;
  padding: var(--s-4);
}
img.principal__photo { padding: 0; position: sticky; top: 96px; }
.placeholder-label {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
}
.principal__body h3 { margin-top: 0 !important; }
.principal__role {
  font-family: var(--font-display);
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-hover) !important;
  margin-bottom: var(--s-3) !important;
}
.principal__contact { font-size: var(--fs-sm) !important; margin-bottom: 0 !important; }
@media (max-width: 700px) {
  .principal { grid-template-columns: 1fr; }
  .principal__photo { max-width: 200px; }
}

/* ============ Office map embed (contact page) ============ */
.office-map {
  margin: var(--s-4) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--off-white);
}
.office-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ============ GHL hosted form embed (contact page) ============ */
/* Reserves the form's height so the card doesn't collapse or jump while the
   third-party script initialises. form_embed.js owns the iframe's own styles. */
.ghl-embed {
  min-height: 704px;
  border-radius: 18px;
  overflow: hidden;
}
.ghl-fallback {
  margin-top: var(--s-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  background: var(--off-white);
  padding: var(--s-6);
}
.ghl-fallback h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--navy-deep); margin-bottom: var(--s-2); }
.ghl-fallback p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.65; margin-bottom: var(--s-3); }
.ghl-fallback p:last-child { margin-bottom: 0; }
.ghl-fallback a { color: var(--navy-deep); font-weight: var(--fw-semibold); }

/* Homepage magic-box teaser — mirrors the drop target on the quote page */
.home-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: var(--s-8) var(--s-5);
  margin-bottom: var(--s-5);
  border: 2px dashed var(--orange);
  border-radius: var(--r-lg);
  background: var(--orange-pale);
  color: var(--orange);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.home-drop:hover { background: var(--white); border-color: var(--orange-hover); color: var(--orange-hover); }
.home-drop strong { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-md); color: var(--navy-deep); }
.home-drop span { font-size: var(--fs-xs); color: var(--fg-muted); }
.home-drop-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-direction: column; gap: 8px; }
.home-drop-list li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--fg-muted); }
.home-drop-list li::before { content: '\2713'; color: var(--success); font-weight: 800; flex: 0 0 auto; }

/* Auto-scrolling carrier marquee. The list is duplicated in markup (second copy
   aria-hidden) so translateX(-50%) loops seamlessly. Pauses on hover; falls back
   to a static wrapped row under prefers-reduced-motion. */
.carrier-mq {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carrier-mq .carrier-strip {
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  animation: carrier-marquee 42s linear infinite;
  will-change: transform;
}
/* The inter-name gap lives here as trailing padding so every run is the same width and
   one run is an exact quarter of the track. A flex gap on the track instead would make
   the seam land half a gap short and the row would visibly hitch once per cycle. */
.carrier-run {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-right: var(--s-8);
  flex: 0 0 auto;
}
.carrier-mq:hover .carrier-strip,
.carrier-mq:focus-within .carrier-strip { animation-play-state: paused; }
@keyframes carrier-marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) {
  .carrier-mq { -webkit-mask-image: none; mask-image: none; }
  .carrier-mq .carrier-strip { animation: none; width: auto; }
  .carrier-run { flex-wrap: wrap; padding-right: 0; }
  .carrier-run[aria-hidden="true"] { display: none; }
}

.trust-bar__inner.trust-bar__inner--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-4);
}
.trust-bar__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  text-align: center;
}
/* ============ Trust bar ============ */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--s-6) 0;
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-6);
}
.trust-bar__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  /* Navy rather than muted gray: at 900 weight the muted tone read as smudged, not bold. */
  color: var(--navy-deep);
}
.carrier-strip {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  align-items: center;
}
.carrier-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--gray-600);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  background: var(--orange-pale);
  color: var(--navy-deep);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.trust-pill svg { width: 14px; height: 14px; color: var(--orange); }
.trust-stars { display: inline-flex; gap: 2px; color: var(--orange); }
.trust-stars svg { width: 16px; height: 16px; }

/* ============ Section heading ============ */
.section-head { margin-bottom: var(--s-12); text-align: center; }
.section-head .eyebrow { margin-bottom: var(--s-3); display: inline-block; }
.section-head h2 { font-size: var(--fs-4xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); margin-bottom: var(--s-3); }
.section-head h2 .accent { color: var(--orange); }
.section-head .lede { color: var(--fg-muted); font-size: var(--fs-md); max-width: 640px; margin: 0 auto; }
.section-head--left { text-align: left; }
.section-head--left .lede { margin-left: 0; }

@media (max-width: 768px) {
  .section-head h2 { font-size: 32px; }
}

/* ============ Grid card ============ */
.card-grid { display: grid; gap: var(--s-5); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  text-decoration: none;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: all var(--dur-base) var(--ease-standard);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange);
  color: var(--fg);
}
.card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--navy-deep);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card__icon svg { width: 24px; height: 24px; stroke-width: 2; }
.card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--navy-deep);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.card__desc { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; flex: 1; }
.card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--orange);
  margin-top: var(--s-2);
}
.card__arrow svg { width: 14px; height: 14px; transition: transform var(--dur-base); }
.card:hover .card__arrow svg { transform: translateX(4px); }

/* Coverage card variant: numbered + orange spine */
.cov-card {
  position: relative;
  padding-left: var(--s-6);
}
.cov-card::before {
  content: '';
  position: absolute;
  top: 24px; left: 0;
  width: 4px; height: calc(100% - 48px);
  background: var(--orange);
  border-radius: 0 2px 2px 0;
  transition: height var(--dur-base);
}
.cov-card:hover::before { height: calc(100% - 36px); top: 18px; }
.cov-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--orange);
  letter-spacing: 0.1em;
}

/* ============ Process / Steps ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  border: 1px solid var(--border);
  position: relative;
}
.step__num {
  position: absolute;
  top: -20px; left: var(--s-6);
  width: 48px; height: 48px;
  background: var(--orange);
  color: var(--white);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  box-shadow: var(--shadow-orange);
}
.step h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: var(--s-3) 0 var(--s-2); }
.step p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ============ Industry card (photo on top) ============ */
.ind-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  transition: all var(--dur-base) var(--ease-standard);
}
.ind-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: var(--fg);
  border-color: var(--orange);
}
.ind-card__photo {
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  padding: var(--s-4);
  letter-spacing: 0.04em;
  background-image:
    linear-gradient(135deg, rgba(232,133,61,0.05) 0%, rgba(75,142,194,0.05) 100%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px);
}
.ind-card__photo::after {
  content: '';
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
}
/* Real photography: the img fills the frame and the placeholder chrome stands down.
   Shown untreated — no tint, no desaturation. Nothing is set over these frames, so an
   overlay bought no legibility and only muted the photos. */
.ind-card__photo:has(img) { padding: 0; background-image: none; }
.ind-card__photo:has(img)::after { display: none; }
.ind-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ind-card:hover .ind-card__photo img { transform: scale(1.035); }
.ind-card__body { padding: var(--s-5) var(--s-6) var(--s-6); }
.ind-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  margin-bottom: var(--s-2);
  color: var(--navy-deep);
}
.ind-card__desc { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; }

/* ============ Why us / features ============ */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
@media (max-width: 768px) { .why-grid { grid-template-columns: 1fr; } }
.why-item {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border);
}
.why-item:last-child { border-bottom: none; }
.why-item__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--orange-pale);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(232, 133, 61, 0.2);
}
.why-item__icon svg { width: 28px; height: 28px; stroke-width: 2; }
.why-item h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.why-item p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ============ FAQ ============ */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--navy-deep);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--orange);
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--dur-base);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { color: var(--orange); }
.faq-item__body {
  padding: 0 var(--s-10) var(--s-5) 0;
  color: var(--fg-muted);
  line-height: 1.7;
  font-size: var(--fs-md);
}

/* ============ Mid-page CTA banner ============ */
.cta-banner {
  background: var(--navy-deep);
  background-image:
    linear-gradient(95deg, var(--navy-deep) 0%, var(--navy-dark) 100%),
    radial-gradient(ellipse at top right, rgba(232,133,61,0.2) 0%, transparent 60%);
  color: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s-12) var(--s-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(232,133,61,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta-banner h3 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: 1.1;
  color: var(--white);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-2);
  max-width: 560px;
}
.cta-banner h3 .accent { color: var(--orange); }
.cta-banner p { color: rgba(255,255,255,0.8); font-size: var(--fs-md); }
.cta-banner__actions { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; position: relative; z-index: 1; }
@media (max-width: 768px) {
  .cta-banner { flex-direction: column; align-items: flex-start; padding: var(--s-8); }
  .cta-banner h3 { font-size: 26px; }
}

/* ============ Lead form ============ */
.quote-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  box-shadow: var(--shadow-md);
}
.quote-form-card h3 { font-size: var(--fs-2xl); font-weight: var(--fw-black); margin-bottom: var(--s-2); }
.quote-form-card .sub { color: var(--fg-muted); font-size: var(--fs-sm); margin-bottom: var(--s-6); }
.form-grid { display: grid; gap: var(--s-4); }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field label .req { color: var(--orange); }
.field input, .field select, .field textarea {
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--gray-100);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--navy-deep);
  background: var(--white);
  transition: all var(--dur-base);
}
.field textarea { height: auto; min-height: 100px; padding-top: 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(232,133,61,0.12);
}
.field input::placeholder { color: var(--gray-400); }

/* Progress indicator */
.form-progress {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.form-progress__step {
  flex: 1;
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  position: relative;
}
.form-progress__step.done { background: var(--orange); }
.form-progress__step.active { background: linear-gradient(90deg, var(--orange) 50%, var(--gray-100) 50%); }
.form-progress__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ============ Breadcrumbs ============ */
.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--s-5);
}
.breadcrumbs a { color: rgba(255,255,255,0.8); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange-light); }
.breadcrumbs .sep { color: rgba(255,255,255,0.3); }
.breadcrumbs--light { color: var(--fg-muted); }
.breadcrumbs--light a { color: var(--navy-deep); }

/* ============ Stat tile ============ */
/* minmax(0,…) not plain 1fr: a long unbreakable stat number ("35/70/25") has a min-content
   wider than its equal share, and bare 1fr = minmax(auto,1fr) lets that column grow and
   steal width from its siblings. Pinning to 0 keeps the four tiles equal; .stat__num scales
   itself so the number still fits the narrower box. */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 768px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.stat { container-type: inline-size; }
.stat__num {
  font-family: var(--font-display);
  /* Caps at 48px, so this is identical to the old fixed size at every comfortable width.
     The cqi term only engages once the tile is genuinely too narrow to hold the value —
     which fixed a pre-existing overflow of 4-character numbers ("$842") in the 769-810px
     band, where the grid is still 4-up but tiles are ~170px. */
  font-size: var(--fs-4xl);
  font-size: clamp(var(--fs-xl), 38cqi, var(--fs-4xl));
  font-weight: var(--fw-black);
  color: var(--navy-deep);
  line-height: 1;
  letter-spacing: -0.03em;
  position: relative;
  display: inline-block;
  padding-bottom: var(--s-2);
}
/* Long values only ("35/70/25" is 8 unbreakable characters). Sized against the tile's
   content box via cqi so it fits the same column as "$1M" instead of widening it —
   22cqi is the largest ratio at which 8 characters of Montserrat Black still clear the
   box, and the 24px floor holds down to the narrowest 2-up mobile tile. Short values
   keep the full 48px above. Plain font-size first as the no-container-query fallback. */
.stat__num--long {
  font-size: var(--fs-2xl);
  font-size: clamp(var(--fs-lg), 22cqi, var(--fs-4xl));
}
/* Text labels in stat tiles (e.g. "Route-based", "Non-FMCSA") are not numbers, so the
   big 48px Black treatment looks wrong. Use a calmer heading scale while keeping the
   tile structure and a subtle orange underline. */
.stat__num--text {
  font-size: var(--fs-xl);
  font-size: clamp(var(--fs-base), 4cqi, var(--fs-xl));
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1.25;
  display: block;
}
.stat__num--text::after {
  width: 28px;
  height: 3px;
}
.stat__num::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 4px;
  background: var(--orange);
  border-radius: 2px;
}
.stat__label { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--s-3); line-height: 1.4; }

/* ============ Pill list (towns, cities) ============ */
.pill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2) var(--s-6);
}
@media (max-width: 768px) { .pill-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pill-grid { grid-template-columns: 1fr; } }
.pill-grid li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pill-grid li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}
.pill-grid li.county-seat { font-weight: var(--fw-bold); }
.pill-grid li.county-seat::after {
  content: 'Our office';
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 3px 8px;
  background: var(--orange-pale);
  border-radius: var(--r-pill);
}

/* ============ Coverage page TOC / required-vs-optional ============ */
.req-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 768px) { .req-opt-grid { grid-template-columns: 1fr; } }
.req-opt {
  border-radius: var(--r-lg);
  padding: var(--s-6);
  border: 1px solid var(--border);
  background: var(--white);
}
.req-opt h4 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.req-opt__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.req-opt--req .req-opt__tag { background: var(--orange-pale); color: var(--orange-hover); }
.req-opt--opt .req-opt__tag { background: var(--blue-pale); color: var(--navy); }
.req-opt ul { list-style: none; padding: 0; margin: 0; }
.req-opt li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--fg);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.req-opt li:last-child { border-bottom: none; }
.req-opt li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.req-opt--req li svg { color: var(--orange); }
.req-opt--opt li svg { color: var(--blue); }

/* ============ Page hero (sub-pages, navy slim) ============ */
.page-hero {
  background: var(--navy-deep);
  background-image:
    radial-gradient(ellipse at 80% 0%, rgba(75, 142, 194, 0.18) 0%, transparent 55%);
  color: var(--white);
  padding: var(--s-12) 0 var(--s-16);
  position: relative;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 30%, var(--orange-light) 70%, transparent 100%);
}
.page-hero h1 { font-size: var(--fs-5xl); font-weight: var(--fw-black); line-height: 1.05; letter-spacing: var(--ls-tight); color: var(--white); }
.page-hero h1 .accent { color: var(--orange); }
.page-hero .lede { color: rgba(255,255,255,0.85); font-size: var(--fs-md); max-width: 700px; margin-top: var(--s-4); }
@media (max-width: 768px) { .page-hero h1 { font-size: 38px; } }

/* ============ Long-form content ============ */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin: var(--s-12) 0 var(--s-4); letter-spacing: var(--ls-tight); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: var(--s-8) 0 var(--s-3); }
.prose p { color: var(--fg); font-size: var(--fs-md); line-height: 1.7; margin-bottom: var(--s-4); }
.prose ul { padding-left: 22px; margin: var(--s-3) 0 var(--s-4); }
.prose ul li { margin-bottom: var(--s-2); color: var(--fg); font-size: var(--fs-md); line-height: 1.6; }
.prose ul li::marker { color: var(--orange); }
.prose .callout {
  background: var(--orange-pale);
  border-left: 4px solid var(--orange);
  padding: var(--s-5) var(--s-6);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--s-6) 0;
}
.prose .callout strong { color: var(--orange-hover); }

/* Layout for prose + sidebar */
.content-with-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s-12);
  align-items: flex-start;
}
@media (max-width: 960px) { .content-with-side { grid-template-columns: 1fr; } }
.side-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: sticky;
  /* The header condenses to 58px once the page is scrolled, which is the only
     time the sticky offset is actually used. */
  top: 82px;
  max-height: calc(100vh - 106px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Stacked layout — a sticky block would swallow the viewport on a phone. */
@media (max-width: 960px) {
  .side-card { position: static; max-height: none; overflow-y: visible; }
}
.side-card h4 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-bottom: var(--s-3); }
.side-card p { color: var(--fg-muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.side-card__nav { display: flex; flex-direction: column; gap: 4px; margin: var(--s-4) 0; }
.side-card__nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--navy-deep);
  text-decoration: none;
  background: var(--off-white);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.side-card__nav a:hover { border-color: var(--orange); color: var(--orange); }
.side-card__nav a.active { background: var(--navy-deep); color: var(--white); }
.side-card__nav a.active::after { content: '→'; color: var(--orange); }

/* Anchor targets must clear the fixed header when jumped to. */
.prose h2[id], .prose h3[id], section[id], [id].scroll-anchor { scroll-margin-top: 96px; }

/* ============ Map block (NJ outline placeholder) ============ */
.nj-map-block {
  background: var(--navy-deep);
  background-image: radial-gradient(ellipse at center, rgba(75,142,194,0.15) 0%, transparent 70%);
  border-radius: var(--r-xl);
  padding: var(--s-12);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-10);
  align-items: center;
  color: var(--white);
}
@media (max-width: 900px) { .nj-map-block { grid-template-columns: 1fr; } }
.nj-map-block h3 { font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--white); letter-spacing: var(--ls-tight); margin-bottom: var(--s-3); }
.nj-map-block p { color: rgba(255,255,255,0.8); margin-bottom: var(--s-5); }
.nj-map-block .county-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nj-map-block .county-chips a {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--white);
  text-decoration: none;
  background: rgba(255,255,255,0.05);
  transition: all var(--dur-base);
}
.nj-map-block .county-chips a:hover {
  background: var(--orange);
  border-color: var(--orange);}

/* ============ NJ map pin ============ */
.nj-flem-pin {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.nj-flem-pin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  animation: njPinPulse 2s ease-out infinite;
}
@keyframes njPinPulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nj-flem-pin::after { animation: none; opacity: 0.4; }
}

/* ============ Reviews ============ */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 960px) { .review-grid { grid-template-columns: 1fr; } }
.review {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.review__stars { color: var(--orange); display: inline-flex; gap: 2px; }
.review__stars svg { width: 18px; height: 18px; }
.review__quote { color: var(--navy-deep); font-size: var(--fs-md); line-height: 1.55; font-family: var(--font-serif); font-style: italic; flex: 1; }
.review__author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}
.review__author-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.review__author-meta { font-size: var(--fs-xs); color: var(--fg-muted); }
.review__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--orange-pale);
  color: var(--orange-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

/* ============ Utilities ============ */
.flow > * + * { margin-top: var(--s-4); }
.flow-lg > * + * { margin-top: var(--s-6); }
.center { text-align: center; }
.bg-white { background: var(--white); }
.bg-subtle { background: var(--bg-subtle); }
.bg-navy { background: var(--navy-deep); color: var(--white); }
.divider { height: 1px; background: var(--border); border: none; margin: var(--s-8) 0; }
.divider-orange { height: 3px; background: var(--orange); width: 60px; border: none; border-radius: 2px; margin: var(--s-4) 0; }
.section-bg-stripe {
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}

/* Section-bg variants */
.bg-pattern-dots {
  background-image: radial-gradient(var(--gray-100) 1px, transparent 1px);
  background-size: 24px 24px;
}