:root {
  --fr-color-primary: #e11d28;
  --fr-color-primary-dark: #a8121b;
  /* Brand red only hits 4.41:1 on black — under AA. This is the red for link text
     on dark surfaces (~6.9:1). Never use --fr-color-primary for body-size text. */
  --fr-color-primary-on-dark: #ff5c66;
  --fr-color-bg: #0d0e10;
  --fr-color-surface: #16181c;
  --fr-color-surface-2: #1f2228;
  --fr-color-text: #f3f4f5;
  --fr-color-text-muted: #a7abb2;
  --fr-color-border: rgba(255,255,255,.12);
  --fr-font-display: "Bebas Neue", sans-serif;
  --fr-font-body: "Barlow", sans-serif;
  /* Height of the sticky header. Drives scroll-margin so anchor targets never
     land behind it. Overridden per breakpoint; never hardcode the offset. */
  --fr-header-h: 95px;
  /* Semantic z-index ramp. Never write a bare 999/9999. */
  --fr-z-sticky: 50;
  --fr-z-dropdown: 200;
  --fr-z-skip: 1000;
  --fr-z-callbar: 1100;
}
* { box-sizing: border-box; }
/* Scoped to anchor jumps only: a blanket smooth on an 8,000px page hijacks
   every programmatic scroll and makes the whole document feel laggy. */
@media (prefers-reduced-motion: no-preference) {
  :has(:target) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--fr-font-body);
  background: var(--fr-color-bg);
  color: var(--fr-color-text);
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
.fr-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.fr-topbar {
  background: var(--fr-color-primary); color: #fff; padding: 0; text-align: center;
  font-weight: 700; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; min-height: 44px;
}

/* ---------- Header + dropdown navigation ---------- */
.fr-header {
  background: var(--fr-color-surface); border-bottom: 1px solid var(--fr-color-border);
  padding: 14px 0; position: sticky; top: 0; z-index: var(--fr-z-sticky);
}
.fr-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fr-logo-wrap { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.fr-logo-wrap img { height: 66px; width: auto; max-width: 200px; object-fit: contain; }
.fr-brand-text {
  font-family: var(--fr-font-display);
  font-size: 26px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1px; color: var(--fr-color-text);
}
.fr-brand-text span { color: var(--fr-color-primary); }

.fr-navmenu {
  display: flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
}
.fr-nav-link, .fr-dd > summary {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 14px; cursor: pointer; color: var(--fr-color-text); border-radius: 8px;
}
/* --fr-color-primary is 3.73:1 on the header surface — under AA. Hover/open states
   need the on-dark token, same rule as body text. */
.fr-nav-link:hover, .fr-dd > summary:hover, .fr-dd[open] > summary { color: var(--fr-color-primary-on-dark); }
/* aria-current was announced to screen readers but invisible to everyone else.
   Marked with the underline ONLY: colouring it like :hover above made the current
   page look permanently moused-over — a stuck button, not a location. Where you
   are is a fact about the page; hover is a response to you. Different signals,
   different treatments. */
.fr-nav-link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--fr-color-primary-on-dark);
}
.fr-dd { position: relative; }
.fr-dd > summary { list-style: none; }
.fr-dd > summary::-webkit-details-marker { display: none; }
.fr-dd > summary::after { content: '▾'; font-size: 11px; color: var(--fr-color-primary); }
.fr-dd-panel {
  position: absolute; top: 100%; left: 0; z-index: var(--fr-z-dropdown);
  min-width: 250px; padding: 8px;
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 2px;
}
.fr-dd-panel-grid { display: grid; grid-template-columns: 1fr 1fr; min-width: 380px; }
.fr-dd-panel a {
  padding: 10px 12px; border-radius: 8px; color: var(--fr-color-text);
  font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 14px;
  min-height: 44px; display: flex; align-items: center;
}
.fr-dd-panel a:hover { background: var(--fr-color-primary); color: #fff; }

/* Services mega-menu (category-grouped, mirrors the tree) */
.fr-mega {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px;
  min-width: 600px; padding: 22px; align-items: start;
}
.fr-mega-col { display: flex; flex-direction: column; }
.fr-mega-head {
  font-family: var(--fr-font-body); font-weight: 800; text-transform: none;
  letter-spacing: .3px; font-size: 15px; color: #ffffff;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--fr-color-border);
}
.fr-mega-head:hover { color: var(--fr-color-primary); }
.fr-mega-blurb {
  text-transform: none; font-size: 12.5px; color: rgba(255,255,255,.6);
  margin: 0 0 10px; line-height: 1.45;
}
.fr-mega-links { display: flex; flex-direction: column; gap: 1px; }
.fr-mega-link {
  padding: 7px 9px; border-radius: 7px; color: var(--fr-color-text);
  font-weight: 600; font-size: 14px;
  min-height: 44px; display: flex; align-items: center;
}
.fr-mega-link:hover { background: var(--fr-color-primary); color: #fff; }

/* Service Areas dropdown: featured Miami + nested tier sub-dropdowns */
.fr-areas-mega { display: flex; flex-direction: column; gap: 2px; min-width: 400px; padding: 12px; }
.fr-areas-featured {
  display: block; padding: 11px 10px; border-radius: 8px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: 14px;
  color: #fff; border-bottom: 1px solid var(--fr-color-border); margin-bottom: 4px;
}
.fr-areas-featured:hover { color: var(--fr-color-primary); }
.fr-dd-sub { border-bottom: 1px solid var(--fr-color-border); }
.fr-dd-sub:last-child { border-bottom: none; }
.fr-dd-sub > summary {
  list-style: none; cursor: pointer; padding: 12px 10px; min-height: 44px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: 13px; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
}
.fr-dd-sub > summary::-webkit-details-marker { display: none; }
.fr-dd-sub > summary::after { content: '\25BE'; color: var(--fr-color-primary); font-size: 11px; }
.fr-dd-sub[open] > summary::after { content: '\25B4'; }
.fr-dd-sub > summary:hover { color: var(--fr-color-primary); }
.fr-areas-links { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 1px 6px; padding: 2px 0 10px; }
.fr-areas-link {
  padding: 6px 9px; border-radius: 7px; color: var(--fr-color-text);
  font-weight: 600; font-size: 13px;
  min-height: 44px; display: flex; align-items: center;
}
.fr-areas-link:hover { background: var(--fr-color-primary); color: #fff; }
.fr-area-tier { margin-top: 30px; }
.fr-area-city { border-color: var(--fr-color-primary); color: var(--fr-color-primary); }

/* Note: no hover-to-open rule here. Modern engines hide closed <details> content
   via content-visibility on ::details-content, so a `display` rule on the child is
   a no-op. Click/keyboard opens the menus natively; that is the whole affordance. */

.fr-btn {
  display: inline-block; background: linear-gradient(135deg, var(--fr-color-primary), var(--fr-color-primary-dark));
  color: #fff !important; padding: 14px 24px; border-radius: 999px;
  font-weight: 900; text-transform: uppercase; box-shadow: 0 12px 30px rgba(225,29,40,.32);
}
.fr-btn-dark { background: #000; color: #fff !important; border: 1px solid var(--fr-color-border); box-shadow: none; }
/* On a saturated red field the inverse reads as primary; .fr-btn-dark reads secondary. */
.fr-btn-invert {
  background: #fff; color: var(--fr-color-primary-dark) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); border: none;
}
.fr-btn-lg { padding: 18px 34px; font-size: 19px; }

/* ---------- Homepage hero + sections ---------- */
.fr-hero {
  position: relative; padding: 130px 0;
  /* Scrim floor raised: pixel sampling showed 66% of the eyebrow's glyph area
     falling under 4.5:1 against bright patches in the photo. Ancestor-colour
     math reports this as passing; only real pixels reveal it. */
  background: linear-gradient(rgba(8,9,11,.88), rgba(8,9,11,.78)), url('/images/services/emergency-towing.jpg');
  background-size: cover; background-position: center; color: #fff;
}
.fr-hero-content { max-width: 760px; }
.fr-eyebrow {
  font-family: var(--fr-font-display);
  color: var(--fr-color-primary-on-dark); font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; margin-bottom: 14px;
}
.fr-hero h1 {
  font-family: var(--fr-font-display);
  font-size: clamp(42px, 7vw, 82px); line-height: .95; margin: 0 0 22px;
  text-transform: uppercase; font-weight: 900; color: #fff;
  text-wrap: balance;
}
.fr-section-head h2 span { color: var(--fr-color-primary); }
/* Sampled against the composited scrim + photo, brand red measures 2.93:1 here —
   the biggest, most important text on the page was the least legible thing on it. */
.fr-hero h1 span { color: var(--fr-color-primary-on-dark); }
.fr-hero p { font-size: 21px; color: #e8e8ea; margin: 0 0 30px; max-width: 650px; }
.fr-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fr-section { padding: 80px 0; background: var(--fr-color-bg); scroll-margin-top: calc(var(--fr-header-h) + 16px); }
.fr-section-alt { background: var(--fr-color-surface); }
.fr-section-head { text-align: center; max-width: 760px; margin: 0 auto 42px; }
.fr-section-head h2 {
  font-family: var(--fr-font-display);
  margin: 0 0 12px; font-size: clamp(32px, 5vw, 54px);
  line-height: 1; text-transform: uppercase; font-weight: 900;
  text-wrap: balance;
}
.fr-section-head p { color: var(--fr-color-text-muted); font-size: 18px; margin: 0; }
.fr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fr-card {
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 18px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.fr-card-photo {
  display: block; width: calc(100% + 56px); height: 190px; object-fit: cover;
  margin: -28px -28px 18px; border-radius: 18px 18px 0 0;
}
.fr-card-link { display: block; }
.fr-card-link:hover h3 { color: var(--fr-color-primary); }
.fr-svc-group { margin-top: 44px; }
.fr-svc-group:first-of-type { margin-top: 0; }
.fr-svc-cat {
  font-family: var(--fr-font-display); font-size: 26px; text-transform: uppercase;
  font-weight: 900; color: var(--fr-color-text); margin: 0 0 18px;
  padding-bottom: 8px; border-bottom: 2px solid var(--fr-color-primary); display: inline-block;
}
.fr-card h3 {
  font-family: var(--fr-font-display);
  margin: 0 0 10px; color: var(--fr-color-text); font-size: 23px; font-weight: 900;
}
.fr-card p { margin: 0; color: var(--fr-color-text-muted); }
.fr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fr-photo {
  display: block; width: 100%; height: 100%; min-height: 320px; max-height: 460px;
  object-fit: cover; border-radius: 22px; border: 1px solid var(--fr-color-border);
}
.fr-list { padding: 0; margin: 22px 0 0; list-style: none; }
/* The tick was an inline :before, so a wrapped line returned to the li's left edge
   and sat *under* the marker — a 22px backward jog on all five items at 375px,
   where every one of them wraps. Desktop never wraps, so it never showed. Flex
   lifts the marker out of the text flow, giving the text its own left edge to
   wrap against (a hanging indent). Baseline alignment keeps the tick sitting on
   the first line rather than floating against a two-line box. */
.fr-list li {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px; font-weight: 700; line-height: 1.5;
}
.fr-list li:before { content: '✓'; color: var(--fr-color-primary); font-weight: 900; flex: none; }
.fr-area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fr-area {
  font-family: var(--fr-font-display);
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  padding: 18px; border-radius: 14px; text-align: center; font-weight: 900;
  color: var(--fr-color-text);
}
.fr-area:hover { border-color: var(--fr-color-primary); color: var(--fr-color-primary); }
.fr-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--fr-color-border); }
.fr-map iframe { display: block; width: 100%; height: 420px; border: 0; }
.fr-map-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
@media (max-width: 640px) { .fr-map iframe { height: 320px; } }
.fr-cta { background: linear-gradient(135deg, var(--fr-color-primary), var(--fr-color-primary-dark)); padding: 60px 0; text-align: center; scroll-margin-top: calc(var(--fr-header-h) + 16px); }
.fr-cta h2 {
  font-family: var(--fr-font-display);
  margin: 0 0 16px; font-size: clamp(34px, 6vw, 60px);
  line-height: 1; text-transform: uppercase; font-weight: 900;
  color: #fff;
}
.fr-cta p { font-size: 20px; margin: 0 0 24px; color: #fff; }
.fr-footer {
  background: #000; padding: 50px 0 90px; text-align: center;
  border-top: 1px solid var(--fr-color-border);
}
/* width/height:auto are load-bearing. The 520x420 attributes (there to reserve space
   and stop layout shift) act as CSS width/height, and max-width/max-height then clamp
   each axis INDEPENDENTLY — squashing the logo into a 260x110 box and stretching it
   90% wide. Letting both axes stay auto makes the clamps scale it proportionally.
   object-fit:contain is the backstop, matching .fr-logo-wrap img. */
.fr-footer-logo {
  width: auto; height: auto;
  max-height: 110px; max-width: 260px;
  object-fit: contain;
  margin: 0 auto 18px; display: block;
}
.fr-footer p { color: var(--fr-color-text-muted); margin: 7px 0; }
/* Brand red is only 4.41:1 on black; this token clears AA, and the padding
   brings the phone/email links up to a real tap target. */
.fr-footer-link {
  color: var(--fr-color-primary-on-dark); font-weight: 800;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
}
.fr-footer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fr-footer-social { display: flex; justify-content: center; gap: 12px; margin: 18px 0 6px; }
.fr-footer-social a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--fr-color-border); color: var(--fr-color-text-muted);
}
.fr-footer-social a:hover { background: var(--fr-color-primary); border-color: var(--fr-color-primary); color: #fff; }
.fr-footer-social svg { width: 18px; height: 18px; }
.fr-footer-legal { display: flex; justify-content: center; gap: 18px; margin: 8px 0; }
.fr-footer-legal a {
  color: var(--fr-color-text-muted); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
}
.fr-footer-legal a:hover { color: var(--fr-color-primary); }
.fr-footer-copyright { font-size: 13px; color: var(--fr-color-text-muted); margin-top: 16px; }

/* Legal pages */
.fr-legal { padding: 70px 0; background: var(--fr-color-surface); }
.fr-legal-inner { max-width: 800px; }
.fr-legal-title {
  font-family: var(--fr-font-display); font-size: clamp(32px, 5vw, 48px);
  text-transform: uppercase; font-weight: 900; margin: 0 0 6px;
}
.fr-legal-updated { color: var(--fr-color-text-muted); margin: 0 0 30px; }
.fr-legal-section { margin-bottom: 22px; }
.fr-legal-section h2 {
  font-family: var(--fr-font-display); font-size: 22px; text-transform: uppercase;
  font-weight: 900; margin: 0 0 8px; color: var(--fr-color-text);
}
.fr-legal-section p { color: var(--fr-color-text-muted); margin: 0; line-height: 1.7; }
/* The bar rides its own opaque band. Without it the red pill crossed the red
   trust strip and the red closing CTA — same gradient, 1:1 contrast — so the
   primary action vanished at the two highest-intent moments on the page. */
.fr-callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--fr-z-callbar);
  background: var(--fr-color-bg); border-top: 1px solid var(--fr-color-border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: none;
}
.fr-mobile-call { display: block; text-align: center; }

/* ---------- Landing (city / service) pages ---------- */
.fr-landing-hero {
  background-color: #15171a; background-size: cover; background-position: center;
  padding: 110px 0; text-align: center;
}
.fr-landing-hero h1 {
  font-family: var(--fr-font-display);
  font-size: clamp(32px, 6vw, 58px); line-height: 1.1; margin: 0 0 30px;
  text-transform: uppercase; font-weight: 900; color: #ffffff;
}
.fr-landing-highlight {
  background: var(--fr-color-primary); color: #ffffff; padding: 4px 14px; display: inline-block;
}
.fr-landing-content { padding: 70px 0; background: var(--fr-color-surface); }
.fr-landing-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start;
}
.fr-landing-photo { margin: 6px 0 24px; min-height: 0; max-height: 360px; }
.fr-landing-main h2 {
  font-family: var(--fr-font-display);
  font-size: clamp(26px, 4vw, 38px); text-transform: uppercase; font-weight: 900;
  color: var(--fr-color-text); margin: 24px 0 20px;
}
.fr-landing-main p { color: var(--fr-color-text-muted); font-size: 17px; margin: 0 0 20px; }
.fr-landing-subhead {
  font-family: var(--fr-font-display);
  font-size: 22px; text-transform: uppercase; font-weight: 900;
  color: var(--fr-color-text); margin: 28px 0 14px;
}
.fr-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fr-link-grid a {
  display: block; padding: 12px 16px; border-radius: 10px;
  background: var(--fr-color-surface-2); border: 1px solid var(--fr-color-border);
  font-weight: 700; color: var(--fr-color-text);
}
.fr-link-grid a:hover { border-color: var(--fr-color-primary); color: var(--fr-color-primary); }
.fr-landing-sidebar {
  background: #000; color: #ffffff; padding: 40px 30px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: sticky; top: calc(var(--fr-header-h) + 8px);
  border: 1px solid var(--fr-color-border);
}
.fr-landing-sidebar-note { font-size: 14px; color: #c9ccd1; margin: 16px 0 0; }
.fr-landing-badge {
  width: 100px; height: 100px; border: 3px solid var(--fr-color-primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; margin-bottom: 20px;
}
.fr-landing-call-label { font-weight: 900; text-transform: uppercase; margin-bottom: 10px; }
.fr-landing-sidebar a { color: #ffffff; font-size: 22px; font-weight: 900; }
.fr-landing-links { padding: 56px 0; background: var(--fr-color-bg); }
.fr-links-block { margin-bottom: 30px; }
.fr-links-block:last-child { margin-bottom: 0; }

/* FAQ (native details/summary, no JS needed) */
.fr-faq { padding: 60px 0; background: var(--fr-color-surface); }
.fr-faq-inner { max-width: 820px; }
.fr-faq-title {
  font-family: var(--fr-font-display); font-size: clamp(28px, 4vw, 42px);
  text-transform: uppercase; font-weight: 900; text-align: center; margin: 0 0 28px;
}
.fr-faq-title span { color: var(--fr-color-primary); }
.fr-faq-item {
  border: 1px solid var(--fr-color-border); border-radius: 12px; margin-bottom: 12px;
  background: var(--fr-color-surface-2); overflow: hidden;
}
.fr-faq-item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 800; font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.fr-faq-item summary::-webkit-details-marker { display: none; }
.fr-faq-item summary::after {
  content: '+'; color: var(--fr-color-primary); font-size: 26px; font-weight: 900; line-height: 1;
}
.fr-faq-item[open] summary::after { content: '\2212'; }
.fr-faq-item[open] summary { border-bottom: 1px solid var(--fr-color-border); }
.fr-faq-item p { margin: 0; padding: 16px 22px 20px; color: var(--fr-color-text-muted); }

/* Accessibility & interaction polish */
.fr-btn, .fr-link-grid a, .fr-area, .fr-nav-link, .fr-dd-panel a, .fr-card { transition: all .18s ease; }
.fr-btn:hover { filter: brightness(1.08); }
.fr-card:hover { box-shadow: 0 26px 60px rgba(0,0,0,.6); transform: translateY(-2px); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--fr-color-primary); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- PPC landing page (Miami) ---------- */
.fr-landing-sub {
  color: #d7d9dd; font-size: clamp(16px, 2.4vw, 20px);
  max-width: 700px; margin: -10px auto 28px; line-height: 1.5;
}
.fr-trust { background: var(--fr-color-primary); padding: 30px 0; }
.fr-trust-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; text-align: center;
}
.fr-trust-item {
  font-family: var(--fr-font-display);
  font-size: clamp(18px, 2.2vw, 27px); font-weight: 900; text-transform: uppercase;
  letter-spacing: .5px; color: #fff; line-height: 1.05;
}
/* One lead review carries the proof; the rest stay compact. Three equal cards
   made the proof section outweigh the thing it proved. */
.fr-review-lead {
  margin: 0 0 12px; padding: 30px 34px;
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 18px;
}
.fr-review-lead-quote {
  margin: 12px 0 16px; color: var(--fr-color-text);
  font-size: clamp(19px, 2.4vw, 25px); line-height: 1.45; font-style: italic;
  text-wrap: pretty;
}
.fr-review-lead cite, .fr-review-compact cite {
  font-style: normal; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fr-review-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fr-review-compact {
  margin: 0; padding: 20px 22px;
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 14px;
}
.fr-review-compact p {
  margin: 10px 0 14px; color: var(--fr-color-text-muted);
  font-size: 15px; line-height: 1.5; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fr-review { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.fr-stars { color: #f5b50a; font-size: 20px; letter-spacing: 3px; }
.fr-review-quote { margin: 0; color: var(--fr-color-text); font-size: 16px; font-style: italic; }
.fr-review-author { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.fr-review-name {
  font-family: var(--fr-font-display); font-size: 21px; font-weight: 900;
  text-transform: uppercase; color: var(--fr-color-text);
}
.fr-review-badge {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--fr-color-primary-on-dark);
}
.fr-footer-map { max-width: 1180px; margin: 0 auto 34px; padding: 0 20px; }
.fr-footer-map .fr-map iframe { height: 340px; }
.fr-footer-hours { color: var(--fr-color-text) !important; font-weight: 800; margin: 0 0 16px !important; }

/* ---------- Homepage redesign: skip link, topbar call, hero note ---------- */
.fr-skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--fr-z-skip);
  background: #fff; color: #000; padding: 12px 18px; border-radius: 0 0 10px 10px;
  font-weight: 800; transition: top .15s ease;
}
.fr-skip:focus { top: 0; }
.fr-topbar-call {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; font-weight: 900;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0 8px; border-radius: 6px;
}
.fr-topbar-call:hover { background: rgba(0,0,0,.22); }
/* Specificity must beat `.fr-hero p` (0,1,1) or these declarations die silently. */
.fr-hero .fr-hero-note { font-size: 15px; color: #c9ccd1; margin: 18px 0 0; font-weight: 700; max-width: 620px; }
/* The one piece of content that treats the reader as a person in danger rather
   than a lead. It was at 69% scroll depth inside a closed accordion. */
.fr-hero .fr-hero-safety {
  font-size: 16px; color: #fff; font-weight: 700; margin: 24px 0 0; max-width: 620px;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px; padding: 12px 16px; line-height: 1.5;
}
.fr-hero .fr-hero-safety strong { color: var(--fr-color-primary-on-dark); }

/* Address block: authoritative, readable without the map iframe. */
.fr-address {
  font-style: normal; text-align: center; margin: 0 auto 26px; max-width: 560px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--fr-color-bg); border: 1px solid var(--fr-color-border);
  border-radius: 12px; padding: 20px; color: var(--fr-color-text-muted);
}
.fr-address strong {
  font-family: var(--fr-font-display); font-size: 22px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--fr-color-text);
}
.fr-address a {
  color: var(--fr-color-primary-on-dark); font-weight: 900; font-size: 20px;
  padding: 8px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}

/* WhyUs: on the shared scale, no inline styles. */
.fr-why-title {
  font-family: var(--fr-font-display); font-size: clamp(32px, 5vw, 54px);
  line-height: 1; margin: 0 0 16px; text-transform: uppercase; font-weight: 900;
  text-wrap: balance;
}
.fr-why-lead { color: var(--fr-color-text-muted); font-size: 18px; margin: 0; }

/* ---------- Homepage services: lead + core tiles + collapsed catalog ---------- */
.fr-svc-lead {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch;
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 18px; overflow: hidden; margin-bottom: 14px;
}
.fr-svc-lead:hover { border-color: var(--fr-color-primary); }
.fr-svc-lead-photo { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.fr-svc-lead-body { padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.fr-svc-lead-body h3 {
  font-family: var(--fr-font-display); font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1; text-transform: uppercase; font-weight: 900;
  margin: 0 0 12px; color: var(--fr-color-text);
}
.fr-svc-lead-body p { margin: 0; color: var(--fr-color-text-muted); font-size: 17px; }
.fr-svc-lead-cue {
  margin-top: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px;
  font-size: 14px; color: var(--fr-color-primary-on-dark);
}
.fr-svc-lead-cue::after { content: ' →'; }

.fr-svc-core { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fr-svc-tile {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 84px; padding: 16px;
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 12px;
}
.fr-svc-tile:hover { border-color: var(--fr-color-primary); }
.fr-svc-tile h3 {
  font-family: var(--fr-font-display); font-size: 21px; line-height: 1.05;
  text-transform: uppercase; font-weight: 900; margin: 0; color: var(--fr-color-text);
}
.fr-svc-tile:hover h3 { color: var(--fr-color-primary-on-dark); }

.fr-svc-more {
  margin-top: 14px; background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border); border-radius: 12px; overflow: hidden;
}
.fr-svc-more > summary {
  list-style: none; cursor: pointer; padding: 16px 18px; min-height: 44px;
  font-family: var(--fr-font-display); text-transform: uppercase; letter-spacing: 1px;
  font-size: 17px; color: var(--fr-color-text);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fr-svc-more > summary::-webkit-details-marker { display: none; }
.fr-svc-more > summary::after {
  content: '+'; color: var(--fr-color-primary); font-size: 24px; font-weight: 900; line-height: 1;
}
.fr-svc-more[open] > summary::after { content: '\2212'; }
.fr-svc-more[open] > summary { border-bottom: 1px solid var(--fr-color-border); }
.fr-svc-more > summary:hover { color: var(--fr-color-primary-on-dark); }
.fr-svc-count {
  margin-left: auto; padding-right: 6px; font-family: var(--fr-font-body);
  font-weight: 700; font-size: 13px; letter-spacing: .4px; text-transform: none;
  color: var(--fr-color-text-muted);
}
.fr-svc-more-body { padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fr-svc-more-cat {
  font-family: var(--fr-font-display); font-size: 18px; text-transform: uppercase;
  font-weight: 900; margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--fr-color-border);
}
.fr-svc-more-cat a { color: var(--fr-color-text); display: flex; align-items: center; min-height: 44px; }
.fr-svc-more-cat a:hover { color: var(--fr-color-primary-on-dark); }
.fr-svc-more-links { display: flex; flex-direction: column; }
.fr-svc-more-links a {
  padding: 10px 6px; min-height: 44px; display: flex; align-items: center;
  color: var(--fr-color-text-muted); font-weight: 700; font-size: 14.5px;
  border-radius: 6px;
}
.fr-svc-more-links a:hover { color: var(--fr-color-text); background: var(--fr-color-surface-2); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* P0: the sticky header ate 46% of the phone. It scrolls away below 900px;
     .fr-mobile-call carries the CTA from the thumb zone instead. */
  /* --fr-header-h is a scroll offset, not a measurement: the header is static
     below 900px, so anchors only need to clear a little breathing room. */
  :root { --fr-header-h: 8px; }
  .fr-header { position: static; padding: 6px 0; }
  .fr-topbar { padding: 0; font-size: 14px; }
  .fr-logo-wrap img { height: 40px; }
  .fr-brand-text { font-size: 20px; }
  /* The number already lives in the topbar AND the fixed thumb-zone bar; a third
     copy in the header only cost a row of the fold. */
  .fr-nav-call { display: none; }
  /* One line, not two: the number is the message; the preamble is desktop garnish. */
  .fr-topbar-text { display: none; }
  .fr-navmenu { margin-top: 4px; padding-top: 2px; font-size: 12px; gap: 0; }
  .fr-nav-link, .fr-dd > summary { padding: 12px 7px; min-height: 44px; }
  .fr-svc-lead { grid-template-columns: 1fr; }
  .fr-svc-lead-photo { min-height: 200px; }
  .fr-svc-lead-body { padding: 24px; }
  .fr-svc-core { grid-template-columns: repeat(2, 1fr); }
  .fr-svc-more-body { grid-template-columns: 1fr 1fr; }
  .fr-trust-inner { grid-template-columns: repeat(2, 1fr); }
  .fr-grid, .fr-split, .fr-area-grid { grid-template-columns: 1fr 1fr; }
  .fr-landing-grid { grid-template-columns: 1fr; }
  .fr-landing-sidebar { position: static; }
  .fr-nav { flex-wrap: wrap; }
  .fr-navmenu {
    order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap;
    border-top: 1px solid var(--fr-color-border); margin-top: 10px; padding-top: 8px;
  }
  /* The open panel must not sit inside the nav's flex row. As a static block it
     inflated the Services item to 857px, and align-items:center then scattered
     Home / Areas / Contact around it — a 1099px header on an 812px screen, with
     the panel running 272px past the fold. Anchoring it to .fr-navmenu (hence
     .fr-dd going static) keeps it out of flow: it spans the nav's width, overlays
     the page the way a dropdown is supposed to, and scrolls inside itself.
     max-height is capped well clear of the fixed call bar's lane. */
  .fr-navmenu { position: relative; }
  .fr-dd { position: static; }
  .fr-dd-panel {
    left: 0; right: 0; width: auto; min-width: 0; margin: 6px 0 0;
    max-height: min(56vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--fr-color-surface-2);
  }
  .fr-dd-panel-grid { grid-template-columns: 1fr 1fr; min-width: 0; }
  .fr-mega { grid-template-columns: 1fr; min-width: 0; gap: 4px; padding: 10px; }
  .fr-areas-mega { min-width: 0; padding: 12px; }
  .fr-areas-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Tightened so the hero's last line clears the fixed call bar at 375x667:
     hoisting the safety copy into the fold put it under the bar's lane. */
  .fr-hero { padding: 18px 0 40px; text-align: center; }
  .fr-hero h1 { margin-bottom: 12px; }
  .fr-hero p { font-size: 18px; margin-bottom: 16px; }
  .fr-hero .fr-hero-safety { margin-top: 14px; padding: 10px 14px; font-size: 15px; }
  .fr-hero .fr-hero-note { margin-top: 14px; font-size: 14px; }
  .fr-actions { justify-content: center; }
  /* The fixed thumb-zone bar IS the mobile CTA. A second identical red pill 60px
     above it collided with the bar and split one decision across two buttons. */
  .fr-hero .fr-actions { display: none; }
  .fr-hero .fr-hero-note { margin-top: 22px; }
  .fr-grid, .fr-split, .fr-area-grid { grid-template-columns: 1fr; }
  .fr-mobile-call { display: block; }
  .fr-dd-panel-grid { grid-template-columns: 1fr; }
  .fr-svc-more-body { grid-template-columns: 1fr; }
  .fr-review-rest { grid-template-columns: 1fr; }
  .fr-review-lead { padding: 22px 20px; }
  .fr-callbar { display: block; }
  /* the fixed call bar sits over the page bottom; keep the footer clear of it */
  .fr-footer { padding-bottom: 120px; }
}

/* ---------- Generated-page additions (append-only; used by city/service pages) ---------- */
.fr-corridors { padding: 64px 0; background: var(--fr-color-bg); border-top: 1px solid var(--fr-color-border); }
.fr-corridors-head { max-width: 780px; margin-bottom: 24px; }
.fr-corridors-kicker {
  font-family: var(--fr-font-display); color: var(--fr-color-primary);
  text-transform: uppercase; letter-spacing: 2px; font-size: 15px;
}
.fr-corridors-head h2 {
  font-family: var(--fr-font-display); font-size: clamp(26px, 4vw, 40px);
  text-transform: uppercase; font-weight: 900; margin: 6px 0 14px; color: var(--fr-color-text);
}
.fr-corridors-context {
  margin: 0; padding: 14px 18px; font-size: 17px; color: #d7d9dd;
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border); border-radius: 10px;
}
.fr-corridors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fr-corridor {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--fr-color-surface); border: 1px solid var(--fr-color-border);
  border-radius: 10px; font-weight: 700; font-size: 14.5px; color: var(--fr-color-text);
}
/* Highway vs street is carried by the badge, not by a side stripe. */
.fr-corridor-hwy { background: color-mix(in oklch, var(--fr-color-primary) 8%, var(--fr-color-surface)); }
.fr-corridor-badge {
  flex: 0 0 auto; font-family: var(--fr-font-display); font-size: 12px; letter-spacing: 1px;
  color: #fff; background: var(--fr-color-primary); border-radius: 6px; padding: 3px 7px;
}
.fr-corridor-badge-st { background: var(--fr-color-surface-2); color: var(--fr-color-text-muted); border: 1px solid var(--fr-color-border); }
.fr-city-cta {
  padding: 56px 0; background: var(--fr-color-surface);
  border-top: 4px solid var(--fr-color-primary);
}
.fr-city-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.fr-city-cta-kicker {
  font-family: var(--fr-font-display); color: var(--fr-color-primary);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px;
}
.fr-city-cta h2 {
  font-family: var(--fr-font-display); font-size: clamp(24px, 3.5vw, 38px);
  line-height: 1.05; text-transform: uppercase; font-weight: 900; margin: 0; max-width: 760px;
  color: var(--fr-color-text);
}
.fr-areas-state {
  font-family: var(--fr-font-display); font-size: 14px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--fr-color-text-muted); padding: 10px 10px 4px;
}
/* Coverage lookup: typing beats expanding a 34-link group and scanning it. */
.fr-area-find { max-width: 560px; margin: 0 auto 34px; }
.fr-area-find-label {
  display: block; font-family: var(--fr-font-display); text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 15px; color: var(--fr-color-text-muted); margin-bottom: 8px;
}
.fr-area-find-input {
  width: 100%; min-height: 52px; padding: 12px 16px; font-size: 16px;
  font-family: var(--fr-font-body); font-weight: 600;
  color: var(--fr-color-text); background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border); border-radius: 12px;
}
.fr-area-find-input::placeholder { color: var(--fr-color-text-muted); }
.fr-area-find-input:focus-visible {
  outline: 3px solid var(--fr-color-primary); outline-offset: 2px; border-color: transparent;
}
.fr-area-find-results:not(:empty) { margin-top: 12px; }
/* A pasted address has no spaces; without this the echoed query pushes the page
   into horizontal scroll at ~60 unbroken characters. */
.fr-area-find-empty {
  color: var(--fr-color-text-muted); margin: 0; font-size: 15px;
  overflow-wrap: anywhere;
}
.fr-area-find-more { color: var(--fr-color-text-muted); margin: 10px 0 0; font-size: 14px; }
.fr-area-group {
  border: 1px solid var(--fr-color-border); border-radius: 12px;
  background: var(--fr-color-surface); margin-top: 12px; overflow: hidden;
}
.fr-area-group > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-family: var(--fr-font-display); text-transform: uppercase; letter-spacing: 1px;
  font-size: 17px; color: var(--fr-color-text);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.fr-area-group > summary::-webkit-details-marker { display: none; }
.fr-area-group > summary::after {
  content: '+'; color: var(--fr-color-primary); font-size: 24px; font-weight: 900; line-height: 1;
}
.fr-area-group[open] > summary::after { content: '\2212'; }
.fr-area-group > summary:hover { color: var(--fr-color-primary); }
.fr-area-group[open] > summary { border-bottom: 1px solid var(--fr-color-border); }
.fr-area-count {
  margin-left: auto; padding-right: 6px;
  font-family: var(--fr-font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .4px; text-transform: none; color: var(--fr-color-text-muted);
}
.fr-area-group .fr-area-grid { padding: 14px; }
@media (max-width: 900px) { .fr-corridors-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .fr-corridors-grid { grid-template-columns: 1fr; }
  .fr-city-cta-inner { flex-direction: column; align-items: flex-start; }
}