/* ═══════════════════════════════════════════════
   TCN Theme — main stylesheet
   Order: reset → tokens → base → buttons/badges →
   navbar → hero → form → trust bar → social proof →
   settlements → how → why → service → faq →
   final CTA → footer → sticky CTA → utils
═══════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* ── VARIABLES ── */
:root {
  --navy:        #1B2B55;
  --red:         #E53935;
  --body:        #333333;
  --light:       #F4F4F5;
  --border:      #E0E0E0;
  --amber:       #F59E0B;
  --gold:        #F59E0B;
  --navy-lt:     #2D4A8A;
  --green:       #26A459;
  --cream:       #FAFAF8;
  --black:       #111111;
  --gray:        #999999;
  --radius-btn:  6px;
  --radius-card: 10px;
}

/* ── BASE ── */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: white;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  padding-top: 72px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--navy);
  color: white;
  padding: 8px 16px;
  z-index: 9999;
}
.skip-link:focus { left: 8px; }

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

/* ── CONTAINERS ── */
.container     { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.container-sm  { max-width: 760px;  margin: 0 auto; padding: 0 32px; }

/* ── TYPOGRAPHY ── */
.overline {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 12px;
}
.overline-red { color: var(--red); }

.section-heading {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 16px;
}
.section-heading-white { color: white; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--red); color: white; }
.btn-primary:hover { background: #c62828; }
.btn-primary:focus-visible { outline: 3px solid rgba(229,57,53,0.5); outline-offset: 3px; }

.btn-secondary { background: var(--navy); color: white; }
.btn-secondary:hover { background: var(--navy-lt); }

.btn-outlined { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outlined:hover { background: var(--navy); color: white; }

.btn-outlined-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
.btn-outlined-white:hover { background: rgba(255,255,255,0.1); border-color: white; }

.btn-ghost { background: transparent; color: var(--body); border: 2px solid var(--border); }
.btn-ghost:hover { border-color: var(--body); }

.btn-sm { padding: 8px 16px; font-size: 0.7rem; }
.btn-lg { padding: 16px 36px; font-size: 0.85rem; }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 2px;
}
.badge-red   { background: #fce8e8; color: var(--red); }
.badge-navy  { background: #e8ecf5; color: var(--navy); }
.badge-green { background: #e8f5ed; color: var(--green); }
.badge-gray  { background: var(--light); color: var(--gray); }
.badge-white-outline { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.4); }

/* ── STARS ── */
.stars { display: flex; gap: 2px; color: var(--gold); font-size: 14px; }

/* ═══════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(27,43,85,0.06);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.28s ease;
  display: block;
  min-height: 0;
  align-items: initial;
  will-change: box-shadow;
}
.navbar.is-scrolled {
  box-shadow: 0 2px 4px rgba(27,43,85,0.06), 0 8px 24px rgba(27,43,85,0.05);
}
/* WordPress admin bar (32px desktop / 46px mobile) shifts fixed navbar down */
.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .navbar { top: 46px; } }
.navbar-inner {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 28px;
  max-width: 1440px;
  margin: 0 auto;
}
.navbar-logo { flex-shrink: 0; }
.navbar-logo img { height: 36px; object-fit: contain; }
.navbar-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
  list-style: none;
  /* Auto margins on both sides center the menu block, giving it breathing
     room from the logo (left) and the phone/CTA/toggle group (right). */
  margin-left: auto;
  margin-right: auto;
}
.navbar-links a {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(27,43,85,0.7);
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.navbar-links a:hover { color: var(--navy); }

/* ── Navbar dropdown submenu ── */
.navbar-links li { position: relative; }
.navbar-links .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .55;
  transition: transform 0.2s ease;
}
.navbar-links .menu-item-has-children:hover > a::after {
  transform: rotate(225deg) translateY(-2px);
}
.navbar-links .sub-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 244px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27,43,85,0.06), 0 14px 36px rgba(27,43,85,0.16);
  border: 1px solid rgba(27,43,85,0.07);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 300;
}
.navbar-links .sub-menu::before {
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0; height: 18px;
}
.navbar-links .menu-item-has-children:hover > .sub-menu,
.navbar-links .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.navbar-links .sub-menu li { width: 100%; }
.navbar-links .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(27,43,85,0.72);
  white-space: nowrap;
  letter-spacing: 0;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.navbar-links .sub-menu a:hover {
  background: var(--light);
  color: var(--navy);
  padding-left: 18px;
}
.navbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.navbar-phone {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.navbar-phone:hover { color: #c62828; }
.navbar-cta { white-space: nowrap; }

/* ── Language toggle (EN/ES) — wired to Polylang in header.php ───────────
   EN/ES slider in TCN red; white knob shows the ACTIVE language. */
.btn-color-mode-switch { display: inline-block; position: relative; margin: 0; }
.btn-color-mode-switch > label.btn-color-mode-switch-inner {
  margin: 0; width: 62px; height: 25px; background: var(--red); border-radius: 26px;
  overflow: hidden; position: relative; transition: background 0.3s ease; display: block; cursor: pointer;
}
.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
  content: attr(data-on); position: absolute; top: 0; bottom: 0; right: 10px;
  display: flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: #fff;
}
.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
  content: attr(data-off); width: 30px; height: 21px; background: #fff; border-radius: 26px;
  position: absolute; left: 2px; top: 2px; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--navy);
  box-shadow: 0 1px 4px rgba(17,17,17,0.35); transition: left 0.3s ease;
}
.btn-color-mode-switch input[type="checkbox"] {
  cursor: pointer; width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; margin: 0;
}
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
  content: attr(data-on); left: 30px;
}
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
  content: attr(data-off); right: auto; left: 10px;
}
.navbar-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.navbar-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (max-width: 1240px) {
  .navbar-links, .navbar-phone { display: none; }
  .navbar-burger { display: flex; margin-left: auto; }
  .navbar-cta { display: none; }

  /* Mobile slide-down nav panel */
  .navbar.nav-open .navbar-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin: 0;
    padding: 8px 20px 24px;
    gap: 0;
    background: #fff;
    border-top: 1px solid rgba(27,43,85,0.08);
    box-shadow: 0 16px 32px rgba(27,43,85,0.14);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .navbar.nav-open .navbar-links > li { width: 100%; }
  .navbar.nav-open .navbar-links a {
    display: block;
    padding: 16px 4px;
    font-size: 0.98rem;
    border-bottom: 1px solid rgba(27,43,85,0.07);
  }
  .navbar.nav-open .navbar-links .menu-item-has-children > a::after { float: right; margin-top: 6px; }
  .navbar.nav-open .navbar-links .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 6px 14px;
    margin: 0;
  }
  .navbar.nav-open .navbar-links .sub-menu::before { display: none; }
  .navbar.nav-open .navbar-links .sub-menu a {
    padding: 12px 4px;
    font-size: 0.88rem;
    color: rgba(27,43,85,0.62);
    border-bottom: 1px solid rgba(27,43,85,0.05);
  }
  .navbar.nav-open .navbar-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar.nav-open .navbar-burger span:nth-child(2) { opacity: 0; }
  .navbar.nav-open .navbar-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  background:
    radial-gradient(ellipse at 88% -10%, rgba(229,57,53,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 110%, rgba(245,158,11,0.10) 0%, transparent 55%),
    linear-gradient(165deg, #1B2B55 0%, #142143 55%, #0E1A35 100%);
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.35%200'/%3E%3C/filter%3E%3Crect%20width='100%2525'%20height='100%2525'%20filter='url(%2523n)'%20opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.hero-glow {
  position: absolute;
  top: -200px; right: -180px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(229,57,53,0.22) 0%, rgba(229,57,53,0.08) 35%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hero-texas-bg {
  position: absolute;
  left: 38%; top: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 720px; height: auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  filter: brightness(0) invert(1) blur(3px);
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 80%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 80%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFB4B0;
  margin-bottom: 24px;
  padding: 7px 14px 7px 10px;
  background: rgba(229,57,53,0.14);
  border: 1px solid rgba(229,57,53,0.38);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hero-eyebrow-dot {
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(229,57,53,0.18);
  animation: heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.hero-statute {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  background: rgba(229,57,53,0.12);
  border: 1px solid rgba(229,57,53,0.30);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 22px;
  line-height: 1.4;
}
.hero-statute svg { color: #FF6E68; flex-shrink: 0; }
.hero-statute strong { color: white; }
.hero-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: white;
  margin-bottom: 24px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.hero-title em {
  font-style: italic;
  color: #FF6E68;
  position: relative;
}
.hero-title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 0.18em;
  background: rgba(229,57,53,0.32);
  z-index: -1;
}
.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 520px;
}
.hero-sub strong { color: white; font-weight: 600; }

.hero-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 36px;
}
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 28px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 6px 0 -2px #B3221E,
    0 12px 24px rgba(229,57,53,0.28),
    0 24px 48px rgba(27,43,85,0.12);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease;
}
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 8px 0 -2px #B3221E,
    0 16px 32px rgba(229,57,53,0.34),
    0 28px 56px rgba(27,43,85,0.14);
}
.hero-cta-primary:active { transform: translateY(1px); }

.hero-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: white;
  text-decoration: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.hero-cta-phone:hover { transform: translateX(2px); }
.hero-cta-phone-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-cta-phone-text { display: flex; flex-direction: column; line-height: 1.1; }
.hero-cta-phone-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 3px;
}
.hero-cta-phone-num {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: white;
}

.hero-trust-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.68);
}
.hero-trust-item { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust-item svg { color: #6EE7B7; flex-shrink: 0; }
.hero-trust-item strong { color: white; font-weight: 600; letter-spacing: -0.01em; }

.hero-photo-wrap { position: relative; isolation: isolate; }
.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 7;
  overflow: hidden;
  border-radius: 6px 6px 80px 6px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 4px 8px rgba(0,0,0,0.25),
    0 20px 40px rgba(0,0,0,0.35),
    0 60px 120px rgba(0,0,0,0.40);
  background: #0E1A35;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(14,26,53,0.55) 100%),
    linear-gradient(225deg, rgba(229,57,53,0.10), transparent 45%);
  pointer-events: none;
}
.hero-photo-badge {
  position: absolute;
  left: -28px; bottom: 80px;
  background: white;
  padding: 18px 22px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(27,43,85,0.10), 0 18px 40px rgba(27,43,85,0.14);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 280px;
  z-index: 2;
}
.hero-photo-badge-stars { display: flex; gap: 2px; color: #F59E0B; margin-bottom: 4px; }
.hero-photo-badge-amount {
  font-family: 'DM Serif Display', serif;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--red);
  margin-bottom: 4px;
}
.hero-photo-badge-text { font-size: 0.78rem; color: #444; line-height: 1.45; }
.hero-photo-badge-text strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--navy);
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-photo-badge { left: -8px; max-width: 240px; }
}
@media (max-width: 600px) {
  .hero { padding: 48px 0 56px; }
  .hero-title { font-size: clamp(34px, 9vw, 46px); }
  .hero-sub { font-size: 1rem; margin-bottom: 28px; }
  .hero-cta-row { gap: 14px; }
  .hero-cta-primary { width: 100%; justify-content: center; }
  .hero-photo { aspect-ratio: 4 / 5; border-radius: 6px 6px 56px 6px; }
  .hero-photo-badge { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ── Hero trust row + phone line (left column under copy) ── */
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.hero-phone-line { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.hero-phone-line svg { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.hero-phone-line a { color: #fff; font-weight: 700; text-decoration: none; }
.hero-phone-line a:hover { color: #FF6E68; }

/* ── Hero quick form card (right column) ── */
.hero-quick-form {
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px 24px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 24px 60px rgba(8,15,35,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
}
.hero-quick-form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(229,57,53,0.5), rgba(255,255,255,0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hqf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.hqf-title { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: var(--navy); letter-spacing: -0.01em; }
.hqf-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); background: #e8f5ed; padding: 4px 9px; border-radius: 999px; }
.hqf-sub { font-size: 0.84rem; color: var(--gray); margin-bottom: 18px; }
.hqf-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy); margin-bottom: 9px; }
.hqf-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 16px; }
.hqf-tile { position: relative; }
.hqf-tile input { position: absolute; opacity: 0; pointer-events: none; }
.hqf-tile label {
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  padding: 11px 4px; border: 1.5px solid var(--border); border-radius: 9px; background: #fafafa;
  font-size: 0.62rem; font-weight: 600; color: var(--body); text-align: center; letter-spacing: 0.01em;
  transition: border-color .15s ease, background .15s ease;
}
.hqf-tile label svg { width: 19px; height: 19px; color: var(--navy); opacity: .7; transition: color .15s, opacity .15s; }
.hqf-tile label:hover { border-color: #c9cfdb; background: #f3f5f9; }
.hqf-tile input:checked + label { border-color: var(--red); background: #fff5f5; color: var(--red); }
.hqf-tile input:checked + label svg { color: var(--red); opacity: 1; }
.hqf-tile input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; }
.hqf-field { margin-bottom: 13px; }
.hqf-row { display: flex; gap: 10px; }
.hqf-row .hqf-field { flex: 1 1 0; min-width: 0; }
.hqf-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.92rem; font-family: inherit; color: var(--black); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hqf-input::placeholder { color: #aab0bd; }
.hqf-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,43,85,0.12); }
.hqf-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.hqf-field .hqf-label { margin-top: 2px; }
.hqf-tcpa { display: flex; gap: 10px; align-items: flex-start; background: #fafafa; border: 1px solid #ececec; border-radius: 8px; padding: 11px 12px; margin-bottom: 16px; cursor: pointer; }
.hqf-tcpa input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--red); }
.hqf-tcpa span { font-size: 0.66rem; color: #777; line-height: 1.45; }
.hqf-tcpa a { color: var(--navy); text-decoration: underline; }
.hqf-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 0.92rem; padding: 15px 24px; border: none;
  border-radius: var(--radius-btn); cursor: pointer; letter-spacing: 0.02em;
  box-shadow: 0 6px 20px rgba(229,57,53,0.32); transition: transform .2s ease, box-shadow .2s ease, background .15s ease;
}
.hqf-submit:hover { background: #c62828; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(229,57,53,0.42); }
.hqf-submit svg { transition: transform .25s ease; }
.hqf-submit:hover svg { transform: translateX(4px); }
.hqf-foot { text-align: center; font-size: 0.68rem; color: var(--gray); margin-top: 11px; }
.hqf-foot strong { color: var(--navy); }
@media (max-width: 960px) {
  .hero-right { order: -1; }
}
@media (max-width: 420px) {
  .hqf-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Explainer section (relocated doodle video + how-it-works copy) ── */
.explainer-section { background: var(--light); padding: 80px 0; border-top: 3px solid var(--red); }
.explainer-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; }
.explainer-copy .section-heading { margin-bottom: 16px; }
.explainer-sub { font-size: 1.02rem; color: var(--body); line-height: 1.65; margin-bottom: 28px; max-width: 460px; }
@media (max-width: 900px) {
  .explainer-grid { grid-template-columns: 1fr; gap: 36px; }
  .explainer-media { order: -1; }
}

/* ═══════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════ */
.hero-form-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(27,43,85,0.06),
    0 8px 24px rgba(27,43,85,0.10),
    0 32px 64px rgba(27,43,85,0.08);
}
.form-header { background: var(--navy); padding: 20px 24px; color: white; }
.form-header h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; letter-spacing: -0.01em; }
.form-header p  { font-size: 0.68rem; opacity: 0.58; letter-spacing: 0.02em; }

.form-steps { display: flex; background: var(--light); border-bottom: 1px solid var(--border); }
.form-step {
  flex: 1;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 13px 8px 14px;
  position: relative;
  transition: color 0.2s ease;
}
.form-step.active { color: var(--navy); }
.form-step.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--red);
}

.form-body { padding: 24px; }
.step-counter {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 14px;
}
.step-counter span { color: var(--navy); }
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--body);
  outline: none;
  transition: border-color 0.15s ease;
}
.form-input:focus { border-color: var(--navy); background: white; }
.form-input::placeholder { color: #bbb; }

.radio-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radio-tile {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--body);
}
.radio-tile input[type="radio"] { display: none; }
.radio-tile:hover { border-color: var(--navy); }
.radio-tile.selected { border-color: var(--navy); background: #f0f3f9; color: var(--navy); }

.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.form-submit:hover { background: #c62828; }
.form-back-btn {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-bottom: 14px;
  transition: color 0.15s ease;
}
.form-back-btn:hover { color: var(--navy); }
.form-step-panel { display: none; }
.form-step-panel.active { display: block; }
.tcpa-note { font-size: 0.58rem; color: var(--gray); line-height: 1.5; margin-top: 10px; }
.tcpa-note a { color: var(--navy); }
.form-success { display: none; padding: 24px; text-align: center; }
.form-success.active { display: block; }
.form-success-icon {
  width: 56px; height: 56px;
  background: #e8f5ed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.form-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.form-success-sub { font-size: 0.82rem; color: var(--gray); line-height: 1.6; }

/* ═══════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════ */
.trust-bar {
  background: #fff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 120% at 50% -20%, rgba(229,57,53,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 90% at 0% 50%, rgba(27,43,85,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 90% at 100% 50%, rgba(27,43,85,0.04) 0%, transparent 55%);
  pointer-events: none;
}
.trust-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.trust-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 18px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(27,43,85,0.04),
    0 12px 28px rgba(27,43,85,0.08);
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.trust-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(27,43,85,0.06),
    0 20px 44px rgba(27,43,85,0.13);
  border-color: rgba(27,43,85,0.18);
}
.trust-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(229,57,53,0.10);
  border: 1px solid rgba(229,57,53,0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.trust-icon svg { width: 20px; height: 20px; color: var(--red); }
.trust-text strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.trust-text span {
  font-size: 0.6rem;
  color: var(--gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  display: block;
  font-weight: 600;
}
@media (max-width: 900px) {
  .trust-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════
   SOCIAL PROOF
═══════════════════════════════════════════════ */
.social-proof { background: white; padding: 80px 0; }
.section-intro { text-align: center; margin-bottom: 52px; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.testimonial-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  background: white;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.testimonial-card:hover {
  box-shadow: 0 4px 12px rgba(27,43,85,0.08), 0 16px 40px rgba(27,43,85,0.06);
  transform: translateY(-2px);
}
.testimonial-quote {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--body);
  font-style: italic;
  margin: 14px 0 20px;
  border-left: 2px solid var(--red);
  padding-left: 14px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--light);
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name { font-size: 0.82rem; font-weight: 700; color: var(--black); }
.testimonial-city { font-size: 0.68rem; color: var(--gray); letter-spacing: 0.03em; }

.as-seen-on { border-top: 1px solid var(--border); padding-top: 40px; text-align: center; }
.as-seen-on-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 20px;
}
.media-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.media-logo {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--gray);
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.15s ease;
}
.media-logo:hover { opacity: 0.65; }
@media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ═══════════════════════════════════════════════
   SETTLEMENTS
═══════════════════════════════════════════════ */
.settlements {
  background: var(--cream);
  padding: 80px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.settlement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.settlement-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: white;
  padding: 28px;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.settlement-card:hover {
  box-shadow: 0 4px 12px rgba(27,43,85,0.08), 0 16px 40px rgba(27,43,85,0.06);
  transform: translateY(-2px);
}
.settlement-tag {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--green);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.settlement-amount {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.settlement-type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 16px;
}
.settlement-desc {
  font-size: 0.8rem;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.settlement-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.settlement-meta-item small {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 2px;
}
.settlement-meta-item span { font-size: 0.75rem; font-weight: 600; color: var(--body); }
.settlement-quote {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--gray);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  line-height: 1.5;
}
.settlements-footer { text-align: center; }
.settlements-total { font-size: 0.75rem; color: var(--gray); letter-spacing: 0.05em; margin-top: 12px; }
@media (max-width: 900px) { .settlement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .settlement-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════ */
.how-it-works {
  background: var(--navy);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 100%, rgba(45,74,138,0.6) 0%, transparent 60%),
              radial-gradient(ellipse at 100% 0%, rgba(229,57,53,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.how-merged-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
.how-intro { text-align: left; margin-bottom: 36px; }
.how-intro-sub {
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 420px;
  margin: 0;
}
.steps-grid {
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  margin-top: 0;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 6px, transparent 6px, transparent 12px);
}
.step-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  text-align: left;
  position: relative;
}
.step-number {
  width: 56px; height: 56px;
  background: var(--red);
  color: white;
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(229,57,53,0.35);
}
.step-text { padding-top: 6px; }
.step-title { font-size: 1.02rem; font-weight: 700; color: white; margin-bottom: 7px; letter-spacing: -0.01em; }
.step-desc { font-size: 0.85rem; color: rgba(255,255,255,0.58); line-height: 1.6; }
.how-it-works-cta { text-align: left; margin-top: 38px; }
@media (max-width: 900px) {
  .how-merged-grid { grid-template-columns: 1fr; gap: 44px; }
  .how-intro { text-align: center; }
  .how-intro-sub { margin: 0 auto; }
  .how-it-works-cta { text-align: center; }
}

/* ═══════════════════════════════════════════════
   WHY TCN
═══════════════════════════════════════════════ */
.why-tcn { background: white; padding: 80px 0; }
.why-tcn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: stretch;
}
.why-image-wrap {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  min-height: 480px;
}
.why-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.why-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,43,85,0.55), transparent 55%);
}
.why-image-caption {
  position: absolute;
  bottom: 24px; left: 24px;
  z-index: 1;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.why-content h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 32px;
}
.benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}
.benefit-item { display: flex; align-items: flex-start; gap: 14px; }
.benefit-check {
  width: 24px; height: 24px;
  background: #e8f5ed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.benefit-check svg { width: 12px; height: 12px; color: var(--green); }
.benefit-text strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.benefit-text span { font-size: 0.8rem; color: var(--gray); line-height: 1.55; }
@media (max-width: 768px) { .why-tcn-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ═══════════════════════════════════════════════
   SERVICE AREAS
═══════════════════════════════════════════════ */
.service-areas {
  background: var(--navy);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.service-areas::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(59,83,131,0.40) 0%, transparent 70%),
    radial-gradient(ellipse 35% 55% at 10% 80%, rgba(229,57,53,0.08) 0%, transparent 55%);
  pointer-events: none;
}
.service-areas .container { position: relative; z-index: 1; }
.service-areas .section-heading { color: #fff; }
.service-areas .overline { color: rgba(255,255,255,0.50); }
.service-areas > .container > p,
.service-areas .section-intro p { color: rgba(255,255,255,0.55) !important; }
.cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px 0 32px;
}
.city-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.20),
    0 8px 20px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.city-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.25),
    0 16px 36px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.city-card-icon { color: var(--red); margin-bottom: 10px; }
.city-card-icon svg { width: 20px; height: 20px; }
.city-card-name { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 3px; }
.city-card-sub { font-size: 0.68rem; color: rgba(255,255,255,0.45); letter-spacing: 0.02em; }
.service-footer { text-align: center; }
.service-footer p { font-size: 0.8rem; color: rgba(255,255,255,0.45); font-style: italic; margin-bottom: 16px; }
.service-footer .btn-ghost {
  color: rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,0.25);
}
.service-footer .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.08);
}
@media (max-width: 768px) { .cities-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════ */
.faq-section { background: white; padding: 80px 0; }
.faq-list { margin-top: 40px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.faq-q-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.faq-chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--gray);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--navy); }
.faq-item.open .faq-q-text { color: var(--navy); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-inner {
  font-size: 0.88rem;
  color: var(--body);
  line-height: 1.72;
  padding-bottom: 22px;
  padding-right: 40px;
}

/* ═══════════════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════════════ */
.final-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
  padding: 96px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 150%, rgba(229,57,53,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta-content { position: relative; }
.final-cta-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: white;
  margin-bottom: 16px;
}
.final-cta-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 20px;
}
.final-cta-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer { background: #111111 !important; padding: 64px 0 32px; color: rgba(255,255,255,0.6); }
.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand img { height: 32px; margin-bottom: 16px; }
.footer-tagline {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.footer-col-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.15s ease;
}
.footer-links a:hover { color: white; }
.footer-phone {
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.footer-hours { font-size: 0.72rem; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy { font-size: 0.7rem; color: rgba(255,255,255,0.3); line-height: 1.6; }
.footer-copy a { color: rgba(255,255,255,0.45); }
.footer-disclaimer {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.22);
  max-width: 400px;
  text-align: right;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-disclaimer { text-align: left; }
}

/* ═══════════════════════════════════════════════
   STICKY MOBILE CTA BAR
═══════════════════════════════════════════════ */
.sticky-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: white;
  box-shadow: 0 -2px 4px rgba(27,43,85,0.06), 0 -8px 24px rgba(27,43,85,0.10);
  display: none;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticky-cta-bar.visible { transform: translateY(0); }
.sticky-cta-inner { display: flex; height: 60px; }
.sticky-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: filter 0.15s ease;
  text-decoration: none;
}
.sticky-call { background: var(--navy); color: white; }
.sticky-form { background: var(--red); color: white; }
@media (max-width: 768px) {
  .sticky-cta-bar { display: block; }
  body { padding-bottom: 60px; }
}

/* ═══════════════════════════════════════════════
   UTILS
═══════════════════════════════════════════════ */
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-8  { margin-bottom: 8px; }
.mb-24 { margin-bottom: 24px; }

/* ═══════════════════════════════════════════════
   SERVICE AREAS PAGE (page-service-areas.php)
═══════════════════════════════════════════════ */
.sa-confirm {
  background:
    radial-gradient(ellipse at 85% -20%, rgba(229,57,53,0.22) 0%, transparent 55%),
    linear-gradient(165deg, #1B2B55 0%, #142143 60%, #0E1A35 100%);
  color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden;
}
.sa-confirm-inner { position: relative; z-index: 1; max-width: 720px; }
.sa-check { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(38,164,89,0.16); border: 1px solid rgba(38,164,89,0.4); margin-bottom: 20px; }
.sa-check svg { width: 26px; height: 26px; color: #6EE7B7; }
.sa-confirm h1 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 14px; color: #fff; }
.sa-confirm h1 em { font-style: italic; color: #FF6E68; }
.sa-confirm p { font-size: 1.05rem; color: rgba(255,255,255,0.78); line-height: 1.6; max-width: 560px; }
.sa-confirm p strong { color: #fff; }
.sa-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.sa-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 8px 16px; }
.sa-chip svg { width: 15px; height: 15px; color: #FF6E68; }

.sa-map-section { background: var(--navy); padding: 80px 0; position: relative; overflow: hidden; }
.sa-map-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 70% 40%, rgba(59,83,131,0.40) 0%, transparent 70%), radial-gradient(ellipse 35% 55% at 10% 90%, rgba(229,57,53,0.08) 0%, transparent 55%); pointer-events: none; }
.sa-map-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.sa-map-copy .overline { color: rgba(255,255,255,0.55); }
.sa-map-copy .section-heading { color: #fff; }
.sa-map-copy p { color: rgba(255,255,255,0.72); font-size: 1.02rem; line-height: 1.65; margin-bottom: 24px; max-width: 440px; }
.sa-stats { display: flex; gap: 30px; margin-top: 8px; }
.sa-stat-num { font-family: 'DM Serif Display', serif; font-size: 2rem; color: #FF6E68; line-height: 1; }
.sa-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; }

.sa-map-wrap { display: flex; justify-content: center; align-items: center; }
.sa-service-map { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.sa-map-outline { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.25); stroke-width: 1; stroke-linejoin: round; }
.sa-map-halo { fill: rgba(229,57,53,0.25); }
.sa-map-dot { fill: var(--red); stroke: rgba(255,255,255,0.65); stroke-width: 1; }
.sa-map-label { fill: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 600; paint-order: stroke; stroke: var(--navy); stroke-width: 3px; stroke-linejoin: round; }

.sa-cities { background: var(--light); padding: 80px 0; }
.sa-cities-head { text-align: center; margin-bottom: 48px; }
.sa-cities .cities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }
.sa-cities .city-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; box-shadow: 0 1px 2px rgba(27,43,85,0.05), 0 10px 24px rgba(27,43,85,0.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; cursor: default; }
.sa-cities .city-card:hover { transform: translateY(-3px); border-color: rgba(229,57,53,0.4); box-shadow: 0 4px 8px rgba(27,43,85,0.08), 0 18px 38px rgba(27,43,85,0.12); }
.sa-cities .city-card-icon { color: var(--red); margin-bottom: 10px; }
.sa-cities .city-card-icon svg { width: 20px; height: 20px; }
.sa-cities .city-card-name { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.sa-cities .city-card-sub { font-size: 0.72rem; color: var(--gray); letter-spacing: 0.02em; }
.sa-counties { text-align: center; margin-top: 40px; font-size: 0.9rem; color: var(--body); }
.sa-counties strong { color: var(--navy); }

.sa-cta { background: #0d1a35; padding: 72px 0; text-align: center; color: #fff; position: relative; overflow: hidden; }
.sa-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 120% at 50% -10%, rgba(229,57,53,0.16) 0%, transparent 60%); }
.sa-cta-inner { position: relative; z-index: 1; }
.sa-cta h2 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; color: #fff; }
.sa-cta p { color: rgba(255,255,255,0.7); margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
.sa-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-weight: 700; font-size: 0.95rem; padding: 16px 32px; border-radius: var(--radius-btn); text-decoration: none; box-shadow: 0 6px 20px rgba(229,57,53,0.32); transition: transform .2s ease, box-shadow .2s ease, background .15s ease; }
.sa-btn:hover { background: #c62828; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(229,57,53,0.42); color: #fff; }
.sa-btn svg { transition: transform .25s ease; }
.sa-btn:hover svg { transform: translateX(4px); }
.sa-phone { display: block; margin-top: 18px; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.sa-phone a { color: #fff; font-weight: 700; text-decoration: none; }
.sa-phone a:hover { color: #FF6E68; }

@media (max-width: 900px) {
  .sa-map-grid { grid-template-columns: 1fr; gap: 40px; }
  .sa-map-wrap { order: -1; }
  .sa-cities .cities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sa-cities .cities-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   FIND A LAWYER — QUIZ (shared via template-parts/quiz-form.php)
═══════════════════════════════════════════════ */
.fal-page {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%),
    linear-gradient(175deg, #1B2B55 0%, #162244 60%, #111b38 100%);
  position: relative;
  overflow: hidden;
  padding: 56px 0 80px;
}
.fal-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.fal-page::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(229,57,53,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.fal-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.fal-intro { text-align: center; margin-bottom: 36px; }
.fal-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 16px;
}
.fal-title em { font-style: italic; color: #FF6E68; }
.fal-sub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  margin: 0 auto;
}
.fal-sub strong { color: #fff; }
.fal-trust-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}
.fal-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fal-trust-row svg { color: #4ade80; }

/* Quiz card */
.fal-quiz {
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.10);
  overflow: hidden;
  margin-top: 12px;
}
.fal-quiz-header {
  background: #fafafa;
  border-bottom: 1px solid #ececec;
  padding: 18px 24px 0;
}
.fal-quiz-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.fal-quiz-sub { font-size: 0.78rem; color: #777; }
.fal-stepper {
  display: flex;
  gap: 4px;
  margin: 14px 0 0;
  padding: 0;
}
.fal-stepper-cell {
  flex: 1;
  height: 4px;
  background: #e5e5e5;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.fal-stepper-cell.is-active { background: var(--red); }
.fal-stepper-cell.is-done { background: var(--navy); }
.fal-quiz-body { padding: 24px 24px 26px; }
.fal-step-counter {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.fal-step-question {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: #111;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
/* Tile choices */
.fal-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
@media (max-width: 480px) {
  .fal-tiles { grid-template-columns: 1fr; }
}
.fal-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f7f8;
  border: 2px solid #e6e6e8;
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
  user-select: none;
}
.fal-tile:hover { border-color: var(--navy); background: #f0f3f9; }
.fal-tile input { display: none; }
.fal-tile.is-selected {
  border-color: var(--navy);
  background: #eef2f9;
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.fal-tile-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd1da;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fal-tile.is-selected .fal-tile-dot { border-color: var(--navy); }
.fal-tile.is-selected .fal-tile-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
}
/* Contact step fields */
.fal-field { margin-bottom: 14px; }
.fal-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
.fal-input, .fal-select {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #222;
  background: #fafafa;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.fal-input:focus, .fal-select:focus {
  outline: none;
  border-color: var(--navy);
  background: #fff;
}
.fal-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .fal-field-row { grid-template-columns: 1fr; } }
/* TCPA */
.fal-tcpa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 6px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
}
.fal-tcpa:has(input:checked) { border-color: var(--navy); background: #f5f7fb; }
.fal-tcpa input {
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}
.fal-tcpa-text { font-size: 0.66rem; line-height: 1.55; color: #555; }
.fal-tcpa-text strong { color: #222; font-weight: 700; }
.fal-tcpa-text a { color: var(--navy); text-decoration: underline; }
/* Action row */
.fal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.fal-back-btn {
  background: none;
  border: none;
  color: #777;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 8px 4px;
}
.fal-back-btn:hover { color: var(--navy); }
.fal-back-btn[hidden] { visibility: hidden; }
.fal-next-btn, .fal-submit-btn {
  background: var(--red);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
  margin-left: auto;
}
.fal-next-btn:hover, .fal-submit-btn:hover { background: #c62828; }
.fal-next-btn:disabled, .fal-submit-btn:disabled {
  background: #b9b9b9;
  cursor: not-allowed;
  opacity: 0.7;
}
/* Panels */
.fal-panel { display: none; }
.fal-panel.is-active { display: block; }
/* Success */
.fal-success {
  display: none;
  text-align: center;
  padding: 36px 24px;
}
.fal-success.is-active { display: block; }
.fal-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(38,164,89,0.12);
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fal-success-icon svg { color: #26a459; }
.fal-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.fal-success-sub { color: #555; max-width: 420px; margin: 0 auto 18px; }
.fal-success-promise {
  background: #f5f7fb;
  border: 1px solid #d8dce6;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.fal-success-promise strong { font-weight: 700; }

/* ═══════════════════════════════════════════════
   BLOG — category filter bar (shared: home.php + archive.php)
═══════════════════════════════════════════════ */
.tcn-blog-filters {
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	padding: 0;
	position: sticky;
	top: 72px; /* clears the fixed navbar */
	z-index: 100;
}
.admin-bar .tcn-blog-filters { top: 104px; } /* 72px + 32px WP admin bar */
@media screen and (max-width: 782px) { .admin-bar .tcn-blog-filters { top: 118px; } } /* 72px + 46px */
.tcn-blog-filters-inner {
	display: flex;
	align-items: center;
	gap: 40px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0;
}
.tcn-blog-filters-inner::-webkit-scrollbar { display: none; }
.tcn-blog-filter-btn {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 20px 0;
	font-size: .84rem;
	font-weight: 600;
	color: var(--gray);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .18s, border-color .18s;
}
.tcn-blog-filter-btn:hover { color: var(--navy); border-bottom-color: var(--border); }
.tcn-blog-filter-btn.active { color: var(--navy); border-bottom-color: var(--red); }
/* Leading ordinal — turns a flat chip row into a numbered reading path. */
.tcn-blog-filter-n {
	font-size: .68rem;
	font-weight: 700;
	color: var(--red);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
	.tcn-blog-filters-inner { gap: 24px; }
	.tcn-blog-filter-btn { padding: 16px 0; font-size: .8rem; }
}

/* ═══════════════════════════════════════════════
   GRAVITY FORMS — Hero quick-match card (form 3)
   Skins GF form 3 ("Hero Short Contact") to match the original .hqf hero card.
   Written against the real GF 2.10.3 Orbital markup. Scoped to .tcn-gf-quickform
   so it never touches form 1 (the quiz) or any other Gravity Form on the site.
═══════════════════════════════════════════════ */

/* Rebrand the Orbital theme tokens (override GF's inline --gf-* block).
   !important beats GF's scoped inline <style> regardless of its ID specificity. */
.tcn-gf-quickform .gform-theme {
  --gf-color-primary: var(--red) !important;
  --gf-color-primary-rgb: 229, 57, 53 !important;
  --gf-color-primary-contrast: #fff !important;
  --gf-color-in-ctrl-primary: var(--red) !important;
  --gf-ctrl-border-color: var(--border) !important;
  --gf-ctrl-label-color-primary: var(--navy) !important;
  --gf-ctrl-label-color-secondary: var(--navy) !important;
  --gf-radius: 8px !important;
}

/* ── Card shell (ported from .hero-quick-form) ── */
.tcn-gf-quickform {
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px 24px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 24px 60px rgba(8,15,35,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
}
.tcn-gf-quickform::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(229,57,53,0.5), rgba(255,255,255,0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ── GF wrapper resets so the card owns spacing/layout ── */
.tcn-gf-quickform .gform_wrapper { margin: 0; }
.tcn-gf-quickform .gform_heading { display: none; } /* also suppressed via shortcode */
.tcn-gf-quickform .gform_wrapper form { margin: 0; }
.tcn-gf-quickform .gform_wrapper .gform_fields { display: block; } /* simple vertical stack */
.tcn-gf-quickform .gform_wrapper .gfield { margin: 0 0 13px; }

/* ── Field labels — small, uppercase, navy (matches .hqf-label) ── */
.tcn-gf-quickform .gform_wrapper .gfield_label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 9px;
}
/* Hide the redundant "Name" and "Consent" group legends */
.tcn-gf-quickform .gform_wrapper .gfield--type-name > .gfield_label,
.tcn-gf-quickform .gform_wrapper .gfield--type-consent > .gfield_label { display: none; }

/* ── Text / email / tel inputs (matches .hqf-input) ── */
.tcn-gf-quickform .gform_wrapper input[type="text"],
.tcn-gf-quickform .gform_wrapper input[type="email"],
.tcn-gf-quickform .gform_wrapper input[type="tel"] {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 0.92rem !important;
  font-family: inherit !important;
  color: var(--black) !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tcn-gf-quickform .gform_wrapper input::placeholder { color: #aab0bd; }
.tcn-gf-quickform .gform_wrapper input[type="text"]:focus,
.tcn-gf-quickform .gform_wrapper input[type="email"]:focus,
.tcn-gf-quickform .gform_wrapper input[type="tel"]:focus {
  outline: none !important;
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(27,43,85,0.12) !important;
}

/* ── Name field: First / Last side by side (matches .hqf-row) ── */
.tcn-gf-quickform .gform_wrapper .ginput_container_name.gform-grid-row {
  display: flex;
  gap: 10px;
  margin: 0;
}
.tcn-gf-quickform .gform_wrapper .ginput_container_name > span {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
/* Sub-labels (First / Last) — quiet, beneath the inputs */
.tcn-gf-quickform .gform_wrapper .gform-field-label--type-sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 5px;
}

/* ── Consent → match .hqf-tcpa box ── */
.tcn-gf-quickform .gform_wrapper .ginput_container_consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 11px 12px;
}
.tcn-gf-quickform .gform_wrapper .ginput_container_consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  accent-color: var(--red);
}
.tcn-gf-quickform .gform_wrapper .gfield_consent_label {
  font-size: 0.66rem !important;
  color: #777 !important;
  line-height: 1.45;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0;
  margin: 0;
}
.tcn-gf-quickform .gform_wrapper .gfield_consent_description {
  font-size: 0.62rem;
  color: #999;
  line-height: 1.45;
  margin-top: 8px;
  padding: 0;
}
.tcn-gf-quickform .gform_wrapper .gfield_consent_description:focus { outline: none; }

/* ── Submit → match .hqf-submit ── */
.tcn-gf-quickform .gform_wrapper .gform_footer { margin: 16px 0 0; padding: 0; }
.tcn-gf-quickform .gform_wrapper .gform_footer .gform_button {
  width: 100% !important;
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 15px 24px !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 6px 20px rgba(229,57,53,0.32);
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease;
}
.tcn-gf-quickform .gform_wrapper .gform_footer .gform_button:hover {
  background: #c62828 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(229,57,53,0.42);
}

/* ── Validation — on brand ── */
.tcn-gf-quickform .gform_wrapper .gform_validation_errors { display: none; }
.tcn-gf-quickform .gform_wrapper .gfield_validation_message,
.tcn-gf-quickform .gform_wrapper .validation_message {
  font-size: 0.7rem !important;
  color: var(--red) !important;
  margin-top: 5px;
  padding: 0;
  background: none;
  border: none;
}
.tcn-gf-quickform .gform_wrapper .gfield_error input { border-color: var(--red) !important; }

/* ── AJAX spinner ── */
.tcn-gf-quickform .gform_ajax_spinner { margin-left: 10px; }

/* ═══════════════════════════════════════════════
   GRAVITY FORMS — Form 3 target-design additions
   Pairs with the GF-editor edits (accident-type Radio field,
   field placeholders, full TCPA consent, "Get My Free Match"
   button). Reconstructed line icons — swap in originals from the
   old quick-form.php if exact match is needed.
═══════════════════════════════════════════════ */

/* (2) Placeholder-only look — hide name/email/phone/text labels
   (clipped, not display:none, so they stay screen-reader accessible).
   Radio legend + consent text are intentionally left visible. */
.tcn-gf-quickform .gform_wrapper .gfield--type-email > .gfield_label,
.tcn-gf-quickform .gform_wrapper .gfield--type-phone > .gfield_label,
.tcn-gf-quickform .gform_wrapper .gfield--type-text > .gfield_label,
.tcn-gf-quickform .gform_wrapper .ginput_container_name .gform-field-label--type-sub {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* (1) Accident-type Radio → 4-across icon tiles (matches .hqf-tiles).
   Choice order MUST be Car / Truck / Motorcycle / Other for the
   icons below to line up with their labels. */
.tcn-gf-quickform .gform_wrapper .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 7px;
  margin: 0;
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice { display: block !important; margin: 0; position: relative; width: 100% !important; max-width: none !important; }
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  padding: 11px 4px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: #fafafa;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--body);
  text-align: center;
  letter-spacing: 0.01em;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
/* Icon glyph — color comes from background-color via mask (navy → red) */
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice label::before {
  content: '';
  width: 19px; height: 19px;
  flex: 0 0 auto;
  background-color: var(--navy);
  opacity: .7;
  -webkit-mask: var(--tile-icon) center / contain no-repeat;
          mask: var(--tile-icon) center / contain no-repeat;
  transition: background-color .15s ease, opacity .15s ease;
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:nth-child(1) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M5%2017H3v-5l2-5h14l2%205v5h-2'/%3E%3Ccircle%20cx='7'%20cy='17'%20r='2'/%3E%3Ccircle%20cx='17'%20cy='17'%20r='2'/%3E%3C/svg%3E");
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:nth-child(2) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Crect%20x='1'%20y='3'%20width='15'%20height='13'/%3E%3Cpath%20d='M16%208h4l3%205v4h-7V8z'/%3E%3Ccircle%20cx='5.5'%20cy='18.5'%20r='2.5'/%3E%3Ccircle%20cx='18.5'%20cy='18.5'%20r='2.5'/%3E%3C/svg%3E");
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:nth-child(3) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Ccircle%20cx='5'%20cy='17'%20r='3'/%3E%3Ccircle%20cx='19'%20cy='17'%20r='3'/%3E%3Cpath%20d='M14%2017H9l-4-7h5l2%204%203-4h4'/%3E%3C/svg%3E");
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:nth-child(4) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M10.29%203.86L1.82%2018a2%202%200%20001.71%203h16.94a2%202%200%20001.71-3L13.71%203.86a2%202%200%2000-3.42%200z'/%3E%3Cline%20x1='12'%20y1='9'%20x2='12'%20y2='13'/%3E%3Cline%20x1='12'%20y1='17'%20x2='12.01'%20y2='17'/%3E%3C/svg%3E");
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice label:hover {
  border-color: #c9cfdb;
  background: #f3f5f9;
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:has(input:checked) label {
  border-color: var(--red);
  background: #fff5f5;
  color: var(--red);
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:has(input:checked) label::before {
  background-color: var(--red);
  opacity: 1;
}
.tcn-gf-quickform .gform_wrapper .gfield_radio .gchoice:has(input:focus-visible) label {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
@media (max-width: 420px) {
  .tcn-gf-quickform .gform_wrapper .gfield_radio {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* (3) Submit button arrow — background SVG (pseudo-elements don't render
   on <input type="submit">, which is what GF outputs). */
.tcn-gf-quickform .gform_wrapper .gform_footer .gform_button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 15px 15px;
  padding-right: 46px !important;
}
/* ============================================================
   TCN — Gravity Forms #1 "Case Matching Quiz" skin  (v2)
   REPLACES the previous .tcn-gf-quiz block at the end of main.css.
   Goal: render GF1 to MATCH the old .fal-* quiz.
   Uses the theme's REAL tokens — var(--navy) #1B2B55, var(--red)
   #E53935, Inter body / 'DM Serif Display' headings. (The earlier
   version used brand-guide hexes + Montserrat that aren't the live
   theme's values — that's why it looked off.)
   Scope: .tcn-gf-quiz (wrapper in quiz-form.php). GF 2.10.3 Orbital.
   ============================================================ */

/* Token remap — correct colors. Native radios are hidden below, so this is light. */
.tcn-gf-quiz #gform_wrapper_1[data-form-index="0"].gform-theme {
  --gf-color-primary: #E53935;
  --gf-color-primary-rgb: 229, 57, 53;
  --gf-color-in-ctrl-primary: #1B2B55;
  --gf-ctrl-border-color: #e0e0e0;
  --gf-radius: 6px;
}

/* ---- Card shell (ported from .fal-quiz) ---- */
.tcn-gf-quiz { max-width: 700px; margin: 0 auto; }
.tcn-gf-quiz .gform_wrapper.gform-theme {
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
}
.tcn-gf-quiz .gform_heading { display: none; }

/* ---- Header band (ported from .fal-quiz-header) ---- */
.tcn-gf-quiz .gf_progressbar_wrapper {
  background: #fafafa;
  border-bottom: 1px solid #ececec;
  padding: 18px 24px;
  margin: 0;
}
.tcn-gf-quiz .gf_progressbar_wrapper::before {
  content: "Case Matching Quiz";   /* CSS-injected title — matches .fal-quiz-title */
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.tcn-gf-quiz .gf_progressbar_title,
.tcn-gf-quiz .gf_progressbar_title .gf_step_current_page,
.tcn-gf-quiz .gf_progressbar_title .gf_step_page_count {
  font-size: 0.78rem;
  font-weight: 400;
  color: #777;
  margin: 0;
}
/* Stepper bar (ported from .fal-stepper). NOTE: GF emits ONE continuous bar,
   not 6 discrete cells — this styles the bar to read like the old stepper. */
.tcn-gf-quiz .gf_progressbar {
  height: 4px;
  background: #e5e5e5;
  border-radius: 4px;
  margin: 14px 0 0;
  overflow: hidden;
  box-shadow: none;
}
.tcn-gf-quiz .gf_progressbar_percentage,
.tcn-gf-quiz .gf_progressbar_percentage.percentbar_blue,
#gform_wrapper_1 .gf_progressbar_percentage,
#gform_wrapper_1 .gf_progressbar_percentage.percentbar_blue {
  height: 4px !important;
  background: var(--red) !important;
  border-radius: 4px !important;
}
.tcn-gf-quiz .gf_progressbar_percentage span { display: none; }

/* ---- Body (ported from .fal-quiz-body) ---- */
.tcn-gf-quiz .gform-body { padding: 24px 24px 26px; }
/* GF Orbital sets .gform_fields to display:grid with a 40px row-gap via its
   framework CSS, which loads after ours and outranks a plain class selector —
   that's the dead space between the contact fields. Re-assert flex + a tight
   gap at form-ID specificity with !important so it actually wins. */
.tcn-gf-quiz .gform_fields,
#gform_wrapper_1 .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
}
.tcn-gf-quiz .gfield { margin: 0 !important; }

/* ---- Step question (ported from .fal-step-question) ---- */
.tcn-gf-quiz .gfield--type-multi_choice > .gfield_label,
.tcn-gf-quiz .gfield--type-image_choice > .gfield_label,
.tcn-gf-quiz .gfield--type-radio > .gfield_label,
.tcn-gf-quiz .gfield--type-textarea > .gfield_label {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: #111;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

/* ---- Radio tiles (ported from .fal-tile + .fal-tile-dot) ---- */
.tcn-gf-quiz .gfield--type-multi_choice .gfield_radio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.tcn-gf-quiz .gfield--type-multi_choice .gchoice {
  margin: 0;
  background: #f7f7f8;
  border: 2px solid #e6e6e8;
  border-radius: 8px;
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tcn-gf-quiz .gfield--type-multi_choice .gchoice input { position: absolute; opacity: 0; pointer-events: none; }
.tcn-gf-quiz .gfield--type-multi_choice .gchoice label {
  display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer;
  font-size: 0.92rem; font-weight: 500; color: #222;
}
.tcn-gf-quiz .gfield--type-multi_choice .gchoice label::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; box-sizing: border-box;
  border: 2px solid #cbd1da; border-radius: 50%;
  transition: border-color .15s, background .15s;
}
.tcn-gf-quiz .gfield--type-multi_choice .gchoice:hover { border-color: var(--navy); background: #f0f3f9; }
.tcn-gf-quiz .gfield--type-multi_choice .gchoice:has(input:checked) {
  border-color: var(--navy); background: #eef2f9; box-shadow: inset 0 0 0 1px var(--navy);
}
.tcn-gf-quiz .gfield--type-multi_choice .gchoice:has(input:checked) label { color: var(--navy); }
.tcn-gf-quiz .gfield--type-multi_choice .gchoice:has(input:checked) label::before {
  border-color: var(--navy);
  background: radial-gradient(circle, var(--navy) 0 4px, transparent 5px);
}

/* ════════════════════════════════════════════════════════════════
   STEP 2 — Accident-type tiles (Radio Buttons field, 2x2 icon grid)
   ════════════════════════════════════════════════════════════════
   Targets the quiz's Radio Buttons field by TYPE (gfield--type-radio).
   Other steps (date / medical / attorney) are Multiple Choice fields
   (gfield--type-multi_choice) and keep the plain dot-tiles — only this
   radio step gets icons, no GF custom class needed.

   Choice order MUST be Car / Truck / Motorcycle / Other so the masked
   SVG icons (nth-child) line up with their labels.

   Everything is scoped to #gform_wrapper_1 so it outranks GF's Orbital
   framework CSS (.gchoice / .gform-field-label--type-inline) without an
   arms race of duplicate blocks. FIXED tile size = all four identical
   regardless of label length. minmax + the 480px query keep it responsive. */

/* Wrapper must fill the form body, else GF shrink-wraps the grid to the
   left and leaves dead space on the right. */
#gform_wrapper_1 .gfield--type-radio .ginput_container,
#gform_wrapper_1 .gfield--type-radio .ginput_container_radio {
  width: 100% !important;
  display: block !important;
}

/* The 2x2 grid — fixed row height locks all four tiles to one size. */
#gform_wrapper_1 .gfield--type-radio .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 180px)) !important;
  grid-auto-rows: 108px !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Each choice is just a positioning shell — all chrome lives on the label.
   display:block is critical: GF's Orbital framework sets .gchoice to display:grid
   with an auto-sized track, which makes the label's width:100% resolve to the
   text width (max-content) instead of the cell — that's what made "Motorcycle"
   wider than the rest. Forcing block lets the label fill the full 180px. */
#gform_wrapper_1 .gfield--type-radio .gchoice {
  display: block !important;
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-sizing: border-box;
}
#gform_wrapper_1 .gfield--type-radio .gchoice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The visible tile. Fills the whole cell so all four are identical. */
#gform_wrapper_1 .gfield--type-radio .gchoice label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 16px 12px !important;
  border: 2px solid #e6e6e8 !important;
  border-radius: 10px !important;
  background: #f7f7f8 !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #222 !important;
  text-align: center !important;
  white-space: nowrap !important;     /* stops "Motorcycle" wrapping to 2 lines */
  box-sizing: border-box !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* Icon glyph — masked SVG, color comes from background-color. */
#gform_wrapper_1 .gfield--type-radio .gchoice label::before {
  content: '';
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background-color: var(--navy);
  opacity: .8;
  -webkit-mask: var(--tile-icon) center / contain no-repeat;
          mask: var(--tile-icon) center / contain no-repeat;
  transition: background-color .15s ease, opacity .15s ease;
}
#gform_wrapper_1 .gfield--type-radio .gchoice:nth-child(1) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M5%2017H3v-5l2-5h14l2%205v5h-2'/%3E%3Ccircle%20cx='7'%20cy='17'%20r='2'/%3E%3Ccircle%20cx='17'%20cy='17'%20r='2'/%3E%3C/svg%3E");
}
#gform_wrapper_1 .gfield--type-radio .gchoice:nth-child(2) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Crect%20x='1'%20y='3'%20width='15'%20height='13'/%3E%3Cpath%20d='M16%208h4l3%205v4h-7V8z'/%3E%3Ccircle%20cx='5.5'%20cy='18.5'%20r='2.5'/%3E%3Ccircle%20cx='18.5'%20cy='18.5'%20r='2.5'/%3E%3C/svg%3E");
}
#gform_wrapper_1 .gfield--type-radio .gchoice:nth-child(3) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Ccircle%20cx='5'%20cy='17'%20r='3'/%3E%3Ccircle%20cx='19'%20cy='17'%20r='3'/%3E%3Cpath%20d='M14%2017H9l-4-7h5l2%204%203-4h4'/%3E%3C/svg%3E");
}
#gform_wrapper_1 .gfield--type-radio .gchoice:nth-child(4) label::before {
  --tile-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M10.29%203.86L1.82%2018a2%202%200%20001.71%203h16.94a2%202%200%20001.71-3L13.71%203.86a2%202%200%2000-3.42%200z'/%3E%3Cline%20x1='12'%20y1='9'%20x2='12'%20y2='13'/%3E%3Cline%20x1='12'%20y1='17'%20x2='12.01'%20y2='17'/%3E%3C/svg%3E");
}

/* States */
#gform_wrapper_1 .gfield--type-radio .gchoice label:hover {
  border-color: var(--navy) !important;
  background: #f0f3f9 !important;
}
#gform_wrapper_1 .gfield--type-radio .gchoice:has(input:checked) label {
  border-color: var(--navy) !important;
  background: #eef2f9 !important;
  color: var(--navy) !important;
  box-shadow: inset 0 0 0 1px var(--navy) !important;
}
#gform_wrapper_1 .gfield--type-radio .gchoice:has(input:checked) label::before {
  background-color: var(--navy);
  opacity: 1;
}
#gform_wrapper_1 .gfield--type-radio .gchoice:has(input:focus-visible) label {
  outline: 2px solid var(--navy) !important;
  outline-offset: 2px !important;
}

/* ---- Contact fields (ported from .fal-field / .fal-input) ---- */
/* Hide only the redundant Name + Consent legends (a11y-safe clip).
   Email/Phone labels and the First/Last sub-labels stay VISIBLE as field titles,
   sitting above the placeholder ("preview") text inside each input. */
.tcn-gf-quiz .gfield--type-name > .gfield_label,
.tcn-gf-quiz .gfield--type-consent > .gfield_label {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Field titles — small, visible (matches .fal-field label) */
.tcn-gf-quiz .gfield--type-email > .gfield_label,
.tcn-gf-quiz .gfield--type-phone > .gfield_label,
.tcn-gf-quiz .gform-field-label--type-sub {
  display: block; font-size: 0.78rem; font-weight: 600; color: #333;
  margin: 0 0 6px; text-transform: none; letter-spacing: 0;
}
/* Placeholder ("preview") text styling */
.tcn-gf-quiz .ginput_container input::placeholder,
.tcn-gf-quiz .ginput_container_textarea textarea::placeholder { color: #aab0bd; }
/* Name First/Last side by side (matches .fal-field-row) */
.tcn-gf-quiz .ginput_container_name { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tcn-gf-quiz .ginput_container_name > span { padding: 0; }
/* Inputs + textarea */
.tcn-gf-quiz .ginput_container input[type="text"],
.tcn-gf-quiz .ginput_container_email input,
.tcn-gf-quiz .ginput_container_phone input,
.tcn-gf-quiz .ginput_container_name input,
.tcn-gf-quiz .ginput_container_textarea textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  color: #222 !important;
  background: #fafafa !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 6px !important;
  transition: border-color .15s, background .15s;
}
.tcn-gf-quiz .ginput_container_textarea textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
.tcn-gf-quiz .ginput_container input:focus,
.tcn-gf-quiz .ginput_container_textarea textarea:focus {
  outline: none !important; border-color: var(--navy) !important; background: #fff !important;
}

/* ---- TCPA / consent box (ported from .fal-tcpa) ---- */
.tcn-gf-quiz .gfield--type-consent .ginput_container_consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 12px 14px; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer;
}
.tcn-gf-quiz .gfield--type-consent:has(input:checked) .ginput_container_consent { border-color: var(--navy); background: #f5f7fb; }
.tcn-gf-quiz .ginput_container_consent input[type="checkbox"] {
  margin-top: 3px; width: 16px !important; height: 16px !important; flex-shrink: 0; accent-color: var(--navy); cursor: pointer;
}
.tcn-gf-quiz .gfield_consent_label {
  font-size: 0.66rem !important; line-height: 1.55; color: #555 !important;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: 0; margin: 0;
}
.tcn-gf-quiz .gfield_consent_description { font-size: 0.66rem; line-height: 1.55; color: #555; margin-top: 8px; padding: 0; }
.tcn-gf-quiz .gfield_consent_description:focus { outline: none; }

/* ---- Footer buttons (ported from .fal-actions / .fal-back-btn / .fal-next-btn) ---- */
.tcn-gf-quiz .gform_page_footer,
.tcn-gf-quiz .gform-page-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding: 0; border: 0;
}
.tcn-gf-quiz .gform_next_button,
.tcn-gf-quiz .gform_button {
  margin-left: auto;
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.tcn-gf-quiz .gform_next_button:hover,
.tcn-gf-quiz .gform_button:hover { background: #c62828 !important; }
.tcn-gf-quiz .gform_previous_button {
  background: none !important;
  color: #777 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 8px 4px !important;
  cursor: pointer;
  transition: color .15s;
}
.tcn-gf-quiz .gform_previous_button:hover { color: var(--navy) !important; }

/* ---- Validation — on brand ---- */
.tcn-gf-quiz .gform_validation_errors { display: none; }
.tcn-gf-quiz .gfield_validation_message,
.tcn-gf-quiz .validation_message {
  font-size: 0.7rem !important; color: var(--red) !important; background: none; border: none; margin-top: 5px; padding: 0;
}
.tcn-gf-quiz .gfield_error input { border-color: var(--red) !important; }

@media (max-width: 480px) {
  .tcn-gf-quiz .gfield--type-multi_choice .gfield_radio { grid-template-columns: 1fr; }
  .tcn-gf-quiz .ginput_container_name { grid-template-columns: 1fr; }
  /* accident-type tiles: stay 2x2 (1fr columns so they fill), shorter rows + smaller icon/padding */
  #gform_wrapper_1 .gfield--type-radio .gfield_radio { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 92px !important; }
  #gform_wrapper_1 .gfield--type-radio .gchoice label { padding: 12px 8px !important; gap: 6px !important; font-size: 0.84rem !important; }
  #gform_wrapper_1 .gfield--type-radio .gchoice label::before { width: 26px; height: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR LEAD FORM — Gravity Forms bridge
   ═══════════════════════════════════════════════════════════════════════════
   Shared by the blog single right rail (.tcn-sidebar-form-body) and the
   practice area sidebar card (.pa-form-body). Both wrap the form in
   .tcn-sidebar-gf so one treatment covers both, and each keeps its own shell.

   These rails are narrow (~240px of usable width), so the scale here is tighter
   than .tcn-gf-quickform, which is sized for the full-width hero.
   ═══════════════════════════════════════════════════════════════════════════ */

.tcn-sidebar-gf .gform_wrapper { margin: 0; }
.tcn-sidebar-gf .gform_wrapper form { margin: 0; }
.tcn-sidebar-gf .gform_heading { display: none; }

/* GF's foundation theme lays .gform_fields out on a 12-column grid and every
   .gfield spans 1/-1. Dropping to a block stack sidesteps that entirely — the
   same approach .tcn-gf-quickform takes for the hero. */
.tcn-sidebar-gf .gform_wrapper .gform_fields { display: block !important; }
.tcn-sidebar-gf .gform_wrapper .gfield { margin: 0 0 12px; }
.tcn-sidebar-gf .gform_wrapper .gfield:last-of-type { margin-bottom: 0; }
/* GF's honeypot field is a real grid child; keep it from adding empty space. */
.tcn-sidebar-gf .gform_wrapper .gfield--type-honeypot { margin: 0; }

/* ---- Labels ---- */
.tcn-sidebar-gf .gform_wrapper .gfield_label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 5px;
  line-height: 1.3;
}
/* GF prints "(Required)" after every label. All four visible fields here are
   required, so repeating it four times in a 240px rail is pure noise — an
   asterisk carries the same signal, and aria-required on the input is what
   assistive tech actually reads. */
.tcn-sidebar-gf .gform_wrapper .gfield_required_text { display: none; }
.tcn-sidebar-gf .gform_wrapper .gfield_label > .gfield_required::after {
  content: '*';
  margin-left: 3px;
  color: var(--red);
  font-weight: 700;
}

/* The name field's own label is redundant next to First/Last sub-labels. */
.tcn-sidebar-gf .gform_wrapper .gfield--type-name > .gfield_label,
.tcn-sidebar-gf .gform_wrapper .gfield--type-consent > .gfield_label { display: none; }

/* ---- Inputs ---- */
.tcn-sidebar-gf .gform_wrapper input[type="text"],
.tcn-sidebar-gf .gform_wrapper input[type="email"],
.tcn-sidebar-gf .gform_wrapper input[type="tel"],
.tcn-sidebar-gf .gform_wrapper textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--black);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tcn-sidebar-gf .gform_wrapper input[type="text"]:focus,
.tcn-sidebar-gf .gform_wrapper input[type="email"]:focus,
.tcn-sidebar-gf .gform_wrapper input[type="tel"]:focus,
.tcn-sidebar-gf .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 43, 85, 0.10);
}
.tcn-sidebar-gf .gform_wrapper input::placeholder,
.tcn-sidebar-gf .gform_wrapper textarea::placeholder { color: var(--gray); opacity: 0.7; }

/* ---- Name field: First / Last as two separate inputs ----
   auto-fit rather than a fixed 2-column grid: the blog rail (280px) stacks
   them, the wider practice area card sets them side by side. No per-context
   media query needed. */
.tcn-sidebar-gf .gform_wrapper .ginput_complex,
.tcn-sidebar-gf .gform_wrapper .ginput_container_name {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}
.tcn-sidebar-gf .gform_wrapper .ginput_container_name > span {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
}
/* First / Last sub-labels sit above their input and match the field labels
   (PHONE, EMAIL) exactly. The name field's own label is hidden, so these two are
   what carries the hierarchy for that row — they can't read as secondary.
   The forms set subLabelPlacement=above, so this only needs to match the type;
   order:0 is a guard in case a form is ever imported with the old setting. */
.tcn-sidebar-gf .gform_wrapper .gform-field-label--type-sub {
  order: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 5px;
  line-height: 1.3;
}
/* Name is required like the other three; without this the two name inputs would
   be the only ones missing the marker. */
.tcn-sidebar-gf .gform_wrapper .gfield_contains_required .gform-field-label--type-sub::after {
  content: '*';
  margin-left: 3px;
  color: var(--red);
  font-weight: 700;
}

/* ---- Consent checkbox (TCPA) ---- */
.tcn-sidebar-gf .gform_wrapper .ginput_container_consent {
  display: flex !important;
  align-items: flex-start;
  gap: 8px !important;
}
.tcn-sidebar-gf .gform_wrapper .ginput_container_consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px !important;
  height: 15px !important;
  margin: 2px 0 0 !important;
  accent-color: var(--navy);
  cursor: pointer;
}
.tcn-sidebar-gf .gform_wrapper .gfield_consent_label {
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  line-height: 1.45;
  color: #6b7280 !important;
  text-transform: none !important;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}
/* GF renders the consent description as a bordered, scrollable box. In a narrow
   rail that reads as an empty input, so strip it back to plain fine print and
   keep it below the label it qualifies. */
.tcn-sidebar-gf .gform_wrapper .gfield_consent_description {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 0.62rem;
  line-height: 1.5;
  color: #9ca3af;
}
.tcn-sidebar-gf .gform_wrapper .gfield_consent_description:focus { outline: none; }

/* ---- Submit ---- */
.tcn-sidebar-gf .gform_wrapper .gform_footer { margin: 16px 0 0 !important; padding: 0 !important; }
.tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button {
  width: 100% !important;
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button:hover,
.tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button:focus-visible {
  background: #c62828 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(229, 57, 53, 0.38);
  outline: none;
}
.tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button:active { transform: translateY(0); }
.tcn-sidebar-gf .gform_ajax_spinner { margin-left: 8px; width: 16px; height: 16px; }

/* ---- Validation ----
   Kept visible on purpose: this form previously accepted empty submits, so the
   error state is part of the fix, not decoration. */
.tcn-sidebar-gf .gform_wrapper .gform_validation_errors {
  background: rgba(229, 57, 53, 0.06) !important;
  border: 1px solid rgba(229, 57, 53, 0.28) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin: 0 0 14px !important;
  box-shadow: none !important;
}
.tcn-sidebar-gf .gform_wrapper .gform_validation_errors > h2 {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--red);
  margin: 0;
  padding: 0;
}
.tcn-sidebar-gf .gform_wrapper .gfield_validation_message,
.tcn-sidebar-gf .gform_wrapper .validation_message {
  background: none;
  border: none;
  padding: 5px 0 0;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--red);
}
.tcn-sidebar-gf .gform_wrapper .gfield_error input[type="text"],
.tcn-sidebar-gf .gform_wrapper .gfield_error input[type="email"],
.tcn-sidebar-gf .gform_wrapper .gfield_error input[type="tel"] {
  border-color: var(--red);
  background: rgba(229, 57, 53, 0.03);
}
.tcn-sidebar-gf .gform_wrapper .gfield_error .gfield_label { color: var(--red); }

/* ---- Inline confirmation ----
   ajax="true" swaps the form for this block inside the same container, so the
   reader never leaves the article. See the Confirmation markup documented in
   inc/sidebar-forms.php. */
.tcn-sidebar-gf .gform_confirmation_wrapper,
.tcn-sidebar-gf .gform_confirmation_message {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--body, var(--gray));
}
.tcn-sidebar-success { text-align: center; padding: 6px 0 2px; }
.tcn-sidebar-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: #16a34a;
  background: rgba(74, 222, 128, 0.16);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.10);
}
.tcn-sidebar-success-icon svg { width: 20px; height: 20px; }
.tcn-sidebar-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 6px;
}
.tcn-sidebar-success-text {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}
.tcn-sidebar-success-text a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 43, 85, 0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tcn-sidebar-success-text a:hover,
.tcn-sidebar-success-text a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button { transition: none; }
  .tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button:hover,
  .tcn-sidebar-gf .gform_wrapper .gform_footer .gform_button:focus-visible { transform: none; }
}

/* ═══════════════════════════════════════════════
   BLOG — editorial split hero (shared: home.php + single.php)
   Image on the wide left column, copy on the narrow right one. The blog index
   uses the featured post; a single post uses its own. The --post modifier only
   trims the scale so an article header sits a step below a landing hero.
═══════════════════════════════════════════════ */
.tcn-ed-hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: stretch;
	background: #fff;
	border-bottom: 1px solid var(--border);
}
.tcn-ed-hero-media {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
}
.tcn-ed-hero--post .tcn-ed-hero-media { min-height: 480px; }
.tcn-ed-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tinted multiply layer so the photo reads as part of the navy palette. */
.tcn-ed-hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(27,43,85,0.14) 0%, rgba(27,43,85,0) 45%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.tcn-ed-hero-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'DM Serif Display', serif;
	font-size: 3.5rem;
	color: rgba(255,255,255,0.25);
}
.tcn-ed-hero-body {
	padding: 96px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 640px;
}
.tcn-ed-hero--post .tcn-ed-hero-body { padding: 64px; }
.tcn-ed-crumb { font-size: 0.82rem; color: var(--gray); margin: 0 0 24px; }
.tcn-ed-crumb a { color: var(--navy-lt); font-weight: 500; text-decoration: none; }
.tcn-ed-crumb a:hover, .tcn-ed-crumb a:focus-visible { text-decoration: underline; }
.tcn-ed-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 24px;
}
.tcn-ed-eyebrow::before { content: ''; flex: 0 0 28px; height: 2px; background: var(--red); }
.tcn-ed-hero-title {
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	color: var(--navy);
	font-size: clamp(2.1rem, 3.4vw, 3.25rem);
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin: 0 0 24px;
}
.tcn-ed-hero--post .tcn-ed-hero-title { font-size: clamp(2rem, 3.2vw, 3rem); }
.tcn-ed-hero-title a { color: inherit; text-decoration: none; }
.tcn-ed-hero-title a:hover { color: var(--navy-lt); }
.tcn-ed-hero-standfirst { font-size: 1.06rem; color: #555; line-height: 1.7; margin: 0 0 40px; }
.tcn-ed-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--gray);
	margin: 0 0 40px;
}
/* On a single post the byline ends the header, so it drops its bottom gap; on
   the blog index the button follows and the 40px stays. */
.tcn-ed-hero-body .tcn-ed-meta:last-child { margin-bottom: 0; }
.tcn-ed-meta strong { color: var(--body); font-weight: 600; }
.tcn-ed-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.tcn-ed-hero-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--navy);
	color: #fff;
	padding: 14px 26px;
	border-radius: var(--radius-btn);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.22s cubic-bezier(0.2,0.8,0.25,1), background 0.22s cubic-bezier(0.2,0.8,0.25,1);
}
.tcn-ed-hero-btn:hover { background: var(--navy-lt); color: #fff; transform: translateY(-2px); }
.tcn-ed-hero-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.tcn-ed-hero-btn svg { transition: transform 0.22s cubic-bezier(0.2,0.8,0.25,1); }
.tcn-ed-hero-btn:hover svg { transform: translateX(3px); }

@media (max-width: 860px) {
	.tcn-ed-hero { grid-template-columns: 1fr; }
	.tcn-ed-hero-media,
	.tcn-ed-hero--post .tcn-ed-hero-media { min-height: 0; aspect-ratio: 16 / 10; }
	/* 32px horizontal, not the mockup's 16px: the reference aligns the hero copy
	   with its wrap edge, and this site's .container padding is 32px. */
	.tcn-ed-hero-body { padding: 40px 32px 64px; max-width: none; }
	.tcn-ed-hero--post .tcn-ed-hero-body { padding: 40px 32px; max-width: none; }
	.tcn-ed-hero-title,
	.tcn-ed-hero--post .tcn-ed-hero-title { font-size: 1.85rem; }
	.tcn-ed-hero-standfirst { font-size: 1rem; margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════════
   BLOG — section head (grid intro on home.php + archive.php)
═══════════════════════════════════════════════ */
.tcn-blog-section-head { margin-bottom: 40px; max-width: 60ch; }
.tcn-blog-section-head h2 {
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	color: var(--navy);
	font-size: 2rem;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}
.tcn-blog-section-head p { margin: 8px 0 0; font-size: 0.95rem; color: var(--gray); line-height: 1.65; }
@media (max-width: 860px) {
	.tcn-blog-section-head { margin-bottom: 24px; }
	.tcn-blog-section-head h2 { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════
   BLOG — post card (shared: template-parts/post-card.php)
   Rendered by home.php, archive.php and "Keep reading" on single.php. Below
   860px the grid stops being a grid: every card becomes a list row with a
   square thumbnail, so mobile is not a squeezed desktop.
═══════════════════════════════════════════════ */
.tcn-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
}
.tcn-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(27,43,85,0.06), 0 8px 24px -12px rgba(27,43,85,0.18);
	transition: transform 0.28s cubic-bezier(0.2,0.8,0.25,1), box-shadow 0.28s cubic-bezier(0.2,0.8,0.25,1);
}
.tcn-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(27,43,85,0.08), 0 20px 40px -18px rgba(27,43,85,0.28);
	color: inherit;
}
.tcn-post-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.tcn-post-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
}
.tcn-post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2,0.8,0.25,1);
}
.tcn-post-card:hover .tcn-post-card-media img { transform: scale(1.03); }
.tcn-post-card-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'DM Serif Display', serif;
	font-size: 2.25rem;
	letter-spacing: -0.04em;
	color: rgba(255,255,255,0.85);
}
.tcn-post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 24px;
}
.tcn-post-card-tag {
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--navy-lt);
	background: rgba(45,74,138,0.08);
	padding: 5px 10px;
	border-radius: 100px;
}
.tcn-post-card-title {
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	color: var(--navy);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}
.tcn-post-card-excerpt {
	margin: 0;
	font-size: 0.88rem;
	color: #666;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tcn-post-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	font-size: 0.8rem;
	color: var(--gray);
}
.tcn-post-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
/* Cards on a white section need the cream fill to stay distinguishable. */
.tcn-single-related .tcn-post-card { background: var(--cream); }

@media (max-width: 860px) {
	.tcn-blog-grid { grid-template-columns: 1fr; gap: 16px; }
	.tcn-post-card { flex-direction: row; align-items: stretch; box-shadow: none; }
	.tcn-post-card:hover { transform: none; box-shadow: none; }
	.tcn-post-card-media { flex: 0 0 104px; width: 104px; aspect-ratio: 1; }
	.tcn-post-card:hover .tcn-post-card-media img { transform: none; }
	.tcn-post-card-body { padding: 14px 16px; gap: 6px; }
	.tcn-post-card-tag,
	.tcn-post-card-excerpt { display: none; }
	.tcn-post-card-title { font-size: 1rem; line-height: 1.3; }
	.tcn-post-card-meta { border-top: 0; padding-top: 2px; font-size: 0.75rem; }
}

/* Mobile repairs: keep the existing design while allowing narrow content to
   shrink and wrap. The body prefix outranks the page templates' later styles. */
@media (max-width: 900px) {
  body .pa-aside { position: static; top: auto; }
}
@media (max-width: 840px) {
  body .legal-toc { position: static; top: auto; }
}
@media (max-width: 1240px) {
  body .navbar-burger {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn);
  }
  body .navbar-burger span {
    position: static;
    margin: 0;
  }
  body .navbar-burger:hover { background: var(--light); }
  body .navbar-burger:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  body .navbar-burger:active { background: var(--border); }
  body .navbar.nav-open .navbar-links {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  body.admin-bar .navbar.nav-open .navbar-links {
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
  }
}
@media (max-width: 782px) {
  body.admin-bar .navbar.nav-open .navbar-links {
    max-height: calc(100vh - 118px);
    max-height: calc(100dvh - 118px);
  }
}
@media (max-width: 768px) {
  body .contact-grid,
  body .pa-layout,
  body .pa-hero-grid { grid-template-columns: minmax(0, 1fr); }

  body .contact-grid > *,
  body .contact-info-item > div,
  body .pa-layout > *,
  body .pa-hero-grid > *,
  body .tcn-post-card-body,
  body .footer-grid > * { min-width: 0; }

  body .contact-info-value,
  body .tcn-post-card-title { overflow-wrap: anywhere; }

  /* Article tables may have more columns than a phone can show at once. */
  body .pa-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  body .pa-content table th,
  body .pa-content table td { padding: 8px; }

  body .pa-hero-cta-primary,
  body .pa-cta-btn,
  body .pah-cta-btn,
  body .contact-cta-btn,
  body .legal-cta .btn-primary,
  body .hero-cta-primary,
  body .sa-btn,
  body .dq-cta .btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    overflow-wrap: anywhere;
  }
  body .pa-hero-cta-primary svg,
  body .pa-cta-btn svg,
  body .pah-cta-btn svg,
  body .contact-cta-btn svg,
  body .hero-cta-primary svg,
  body .sa-btn svg { flex-shrink: 0; }

  body .tcn-post-card-meta,
  body .hqf-head,
  body .pa-form-trust,
  body .sa-stats { flex-wrap: wrap; }
  body .hqf-head { gap: 8px; }
  body .hqf-badge { flex-shrink: 0; }

  /* Keep text inputs at a readable size when the phone keyboard opens. */
  body :is(.tcn-gf-quickform, .tcn-gf-quiz, .tcn-sidebar-gf, .contact-form-col) .gform_wrapper input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="search"]),
  body :is(.tcn-gf-quickform, .tcn-gf-quiz, .tcn-sidebar-gf, .contact-form-col) .gform_wrapper textarea,
  body :is(.tcn-gf-quickform, .tcn-gf-quiz, .tcn-sidebar-gf, .contact-form-col) .gform_wrapper select,
  body .hqf-input { font-size: 16px !important; }

  body .tcn-gf-quiz .gform_page_footer,
  body .tcn-gf-quiz .gform-page-footer { flex-wrap: wrap; }
  body .tcn-gf-quiz :is(.gform_next_button, .gform_previous_button, .gform_button) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  body .sticky-cta-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body .sticky-cta-btn { min-width: 0; padding: 8px; text-align: center; }
  body .sticky-cta-btn svg { flex-shrink: 0; }
}
@media (max-width: 420px) {
  body .about-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .about-stat-item { min-width: 0; padding: 20px 16px; }
  body .about-stat-label { overflow-wrap: anywhere; }
  body .contact-info-card { padding: 32px 16px; }
  body .tcn-gf-quickform .gform_wrapper .ginput_container_name.gform-grid-row { flex-direction: column; }
}

/* Mobile layout rhythm: shared gutters, compact reassurance rows, and stable
   image proportions. Content, links, and the desktop page structure stay intact. */
@media (max-width: 600px) {
  body .container,
  body .container-sm { padding-left: 24px; padding-right: 24px; }

  body .trust-bar { padding: 32px 0; }
  body .trust-items { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; }
  body .trust-item { flex-direction: row; align-items: center; gap: 16px; padding: 20px 16px; text-align: left; border-radius: var(--radius-card); }
  body .trust-icon { width: 40px; height: 40px; margin: 0; }
  body .trust-text { min-width: 0; }
  body .trust-text strong { font-size: 0.875rem; margin-bottom: 4px; }
  body .trust-text span { font-size: 0.75rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--body); }

  body .about-stats-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body .about-stat-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 0; text-align: left; }
  body .about-stat-number { font-size: 1.5rem; line-height: 1.15; margin: 0; }
  body .about-stat-label { line-height: 1.5; }
  body .about-stat-item::before,
  body .about-stat-item::after { display: none; }
  body .about-stat-item + .about-stat-item { border-top: 1px solid rgba(255,255,255,0.12); }
  body .about-steps-grid { gap: 16px; }
  body .about-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 24px; align-items: center; }
  body .about-step-num { width: 36px; height: 36px; margin: 0; font-size: 1rem; }
  body .about-step-title { margin: 0; }
  body .about-step-desc { grid-column: 1 / -1; }

  body .sa-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  body .sa-stat-num { font-size: 1.75rem; }
  body .sa-stat-label { font-size: 0.75rem; text-transform: none; letter-spacing: 0; }
  body .service-areas .cities-grid,
  body .sa-cities .cities-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body .service-areas .city-card,
  body .sa-cities .city-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 16px; padding: 20px; text-align: left; }
  body .city-card-icon { grid-row: 1 / 3; margin: 0; align-self: center; }
  body .city-card-name,
  body .city-card-sub { grid-column: 2; margin: 0; }

  body .contact-info-item { gap: 12px; }
  body .contact-info-value { font-size: 0.875rem; }
  body .contact-info-items { gap: 24px; }
  body .contact-info-card { padding: 24px 20px; }
  body .pah-list-item { grid-template-columns: minmax(0, 1fr) 40px; gap: 16px; padding: 24px 0; }
  body .pah-list-num { display: none; }
  body .pah-list-content { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; }
  body .pah-list-meta,
  body .pah-list-title { margin: 0; }
  body .pah-list-title { line-height: 1.4; }
  body .pah-list-desc { grid-column: 1 / -1; }
  body .pah-list-item:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
  body .pah-list-item:active .pah-list-title { color: var(--red); }
  body .fal-trust-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
  body .fal-trust-row svg { flex-shrink: 0; }

  body .tcn-post-card { padding: 16px; gap: 12px; align-items: flex-start; }
  body .tcn-post-card-media { flex: 0 0 80px; width: 80px; height: 80px; aspect-ratio: 1; border-radius: var(--radius-btn); }
  body .tcn-post-card-media img { object-fit: cover; }
  body .tcn-post-card-body { padding: 0; gap: 8px; }
  body .tcn-post-card-title { line-height: 1.4; overflow-wrap: normal; }
  body .tcn-post-card-meta { display: grid; gap: 4px; line-height: 1.5; color: var(--body); }
  body .tcn-post-card-meta-dot { display: none; }

  body .final-cta-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; align-items: stretch; }
  body .final-cta-badges .badge { min-width: 0; white-space: normal; justify-content: flex-start; padding: 12px; font-size: 0.75rem; line-height: 1.4; text-transform: none; letter-spacing: 0; text-align: left; }
  body .final-cta-badges svg,
  body .final-cta-phone svg { flex-shrink: 0; }

  body .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-bottom: 32px; }
  body .footer-brand,
  body .footer-grid > div:last-child { grid-column: 1 / -1; }
  body .footer-tagline { margin-bottom: 0; }
  body .footer-col-title { margin-bottom: 8px; }
  body .footer-links { gap: 0; }
  body .footer-links a { display: flex; align-items: center; min-height: 44px; line-height: 1.5; }
  body .footer-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  body .footer-links a:active { color: white; }
}