/* ============================================================
   Windsordumpster — COMPONENTS.CSS
   Anchor Towing (#1) primary + Ironline (#2) accents.
   Clean cards, navy hero, yellow trust card, red CTA, caution-tape strip.
   ============================================================ */

/* =========================================================
   LEGAL / TERMS PAGE — sticky TOC + long-form prose
   ========================================================= */
.tow-legal {
  background: var(--paper);
  padding: var(--space-9) 0 var(--space-10);
}
.tow-legal__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-legal__meta {
  font-size: 0.78rem;
  color: var(--steel);
  margin: 0 0 var(--space-7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cloud);
  border-radius: var(--radius-pill);
  border: 1px solid var(--mist);
}
.tow-legal__meta-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.66rem;
  color: var(--steel);
}
.tow-legal__meta-value { font-weight: 700; color: var(--navy); }
.tow-legal__meta-divider { color: var(--mist); }
.tow-legal__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 960px) {
  .tow-legal__layout { grid-template-columns: 240px 1fr; gap: var(--space-9); }
}
.tow-legal__toc {
  align-self: start;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--cloud);
  border-radius: var(--radius-md);
  border: 1px solid var(--mist);
}
@media (min-width: 960px) {
  .tow-legal__toc {
    position: sticky;
    top: calc(var(--alert-bar-h) + var(--nav-h) + 24px);
  }
}
.tow-legal__toc-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi-vis-deep, #6E9E29);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mist);
}
.tow-legal__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tow-legal__toc-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  color: var(--steel);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.tow-legal__toc-link:hover { color: var(--navy); text-decoration: none; }
.tow-legal__toc-num {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--hi-vis-deep, #6E9E29);
  letter-spacing: 0.06em;
}
.tow-legal__body { max-width: 760px; }
.tow-legal__section {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--mist);
}
.tow-legal__section:first-child { padding-top: 0; border-top: 0; }
.tow-legal__heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.tow-legal__heading-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--hi-vis-deep, #6E9E29);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tow-legal__p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.tow-legal__ul, .tow-legal__ol {
  margin: 0 0 var(--space-4) var(--space-5);
  padding: 0;
  color: var(--ink);
  line-height: 1.65;
}
.tow-legal__ul li, .tow-legal__ol li { margin-bottom: 8px; }
.tow-legal__callout {
  display: flex;
  gap: 12px;
  padding: var(--space-4);
  background: rgba(228, 161, 74, 0.08);
  border-left: 3px solid var(--hi-vis);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
}
.tow-legal__callout-icon {
  color: var(--hi-vis-deep, #6E9E29);
  flex-shrink: 0;
  margin-top: 2px;
}
.tow-legal__callout p { margin: 0; line-height: 1.6; color: var(--ink); }

/* =========================================================
   BLOG POST HERO — navy gradient bg, split layout (text left, image right).
   Matches other hero treatments (hero-emergency / hub-hero / service-hero).
   ========================================================= */
.tow-blog-post-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
  padding: var(--space-9) 0;
}
.tow-blog-post-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .tow-blog-post-hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-9); }
}
.tow-blog-post-hero__copy { max-width: 640px; }
.tow-blog-post-hero__category {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(228, 161, 74, 0.14);
  border: 1px solid rgba(228, 161, 74, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin: 0 0 var(--space-4);
}
.tow-blog-post-hero__category-dot {
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  animation: tow-pulse-trust 1.6s ease-out infinite;
}
.tow-blog-post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 var(--space-4);
}
.tow-blog-post-hero__excerpt {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-5);
}
.tow-blog-post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}
.tow-blog-post-hero__date { color: var(--paper); font-weight: 700; }
.tow-blog-post-hero__meta-divider {
  width: 4px; height: 4px;
  background: rgba(255, 255, 255, 0.30);
  border-radius: 50%;
}
.tow-blog-post-hero__read-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--paper);
  font-weight: 700;
}
.tow-blog-post-hero__read-time .tow-icon { width: 14px; height: 14px; color: var(--hi-vis); }
.tow-blog-post-hero__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(228, 161, 74, 0.22);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.55);
}
.tow-blog-post-hero__media img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: contain;        /* full image visible — no edge crop (operator-locked 2026-05-10) */
  background: var(--navy);    /* letterboxing colour matches hero bg */
}
@media (max-width: 959px) {
  .tow-blog-post-hero__media img { aspect-ratio: 16 / 10; }
}

/* =========================================================
   BLOG POST BODY — long-form prose with sticky TOC
   ========================================================= */
.tow-blog-body {
  background: var(--paper);
  padding: var(--space-8) 0;
}
.tow-blog-body__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .tow-blog-body__container { grid-template-columns: 240px 1fr; gap: var(--space-9); }
}
/* Sidebar — services menu (replaces TOC). Hidden on mobile,
   visible only on desktop ≥1024px. */
.tow-blog-body__sidebar {
  display: none;
}
@media (min-width: 1024px) {
  .tow-blog-body__sidebar {
    display: block;
    align-self: start;
    padding: var(--space-5);
    background: var(--cloud);
    border: 1px solid var(--mist);
    border-radius: var(--radius-md);
  }
}
.tow-blog-body__sidebar-overline {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi-vis-deep, #6E9E29);
  margin: 0 0 6px;
}
.tow-blog-body__sidebar-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--mist);
}
.tow-blog-body__sidebar-group { margin-bottom: var(--space-4); }
.tow-blog-body__sidebar-group:last-of-type { margin-bottom: var(--space-3); }
.tow-blog-body__sidebar-group-title {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 8px;
}
.tow-blog-body__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tow-blog-body__sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tow-blog-body__sidebar-link:hover {
  background: var(--paper);
  color: var(--signal);
  text-decoration: none;
}
.tow-blog-body__sidebar-marker {
  width: 5px; height: 5px;
  background: var(--hi-vis);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.tow-blog-body__sidebar-link:hover .tow-blog-body__sidebar-marker {
  opacity: 1;
  background: var(--signal);
}

/* Phone CTA at the bottom of the sidebar */
.tow-blog-body__sidebar-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 12px 12px;
  background: var(--signal);
  color: var(--paper);
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 4px 12px -2px rgba(217, 119, 46, 0.4);
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.tow-blog-body__sidebar-cta:hover {
  background: var(--signal-deep);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(217, 119, 46, 0.5);
}
.tow-blog-body__sidebar-cta .tow-icon { width: 18px; height: 18px; flex-shrink: 0; }
.tow-blog-body__sidebar-cta-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.tow-blog-body__sidebar-cta-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tow-blog-body__article { max-width: 720px; }
.tow-blog-body__section { margin-bottom: var(--space-6); scroll-margin-top: calc(var(--nav-h) + 16px); }
.tow-blog-body__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: var(--space-6) 0 var(--space-3);
  padding-left: 14px;
  border-left: 4px solid var(--hi-vis);
}
.tow-blog-body__h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin: var(--space-5) 0 var(--space-2);
}
.tow-blog-body__p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.tow-blog-body__ul, .tow-blog-body__ol {
  margin: 0 0 var(--space-4) var(--space-5);
  padding: 0;
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.02rem;
}
.tow-blog-body__ul li, .tow-blog-body__ol li { margin-bottom: 10px; }
.tow-blog-body__callout {
  display: flex;
  gap: 12px;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(228, 161, 74, 0.10) 0%, rgba(228, 161, 74, 0.04) 100%);
  border-left: 4px solid var(--hi-vis);
  border-radius: var(--radius-sm);
  margin: var(--space-5) 0;
}
.tow-blog-body__callout-icon {
  color: var(--hi-vis-deep, #6E9E29);
  flex-shrink: 0;
  margin-top: 4px;
}
.tow-blog-body__callout p {
  margin: 0;
  line-height: 1.65;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}
.tow-blog-body__quote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--signal);
  background: var(--cloud);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tow-blog-body__quote p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}
.tow-blog-body__quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 600;
  color: var(--steel);
}
.tow-blog-body__figure {
  margin: var(--space-5) 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--mist);
}
.tow-blog-body__figure img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.tow-blog-body__figure figcaption {
  padding: var(--space-3);
  background: var(--cloud);
  font-size: 0.86rem;
  color: var(--steel);
  text-align: center;
  font-style: italic;
}

/* =========================================================
   BLOG AUTHOR CARD — bio at end of article
   ========================================================= */
.tow-blog-author {
  background: var(--cloud);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--mist);
}
.tow-blog-author__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-blog-author__card {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--paper);
  border-radius: var(--radius-md);
  border: 1px solid var(--mist);
  box-shadow: var(--shadow-sm);
}
.tow-blog-author__avatar {
  width: 80px; height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--hi-vis);
}
.tow-blog-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tow-blog-author__initial {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--hi-vis);
}
.tow-blog-author__overline {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi-vis-deep, #6E9E29);
  margin: 0 0 4px;
}
.tow-blog-author__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
}
.tow-blog-author__role {
  font-size: 0.88rem;
  color: var(--steel);
  margin: 0 0 var(--space-3);
  font-weight: 600;
}
.tow-blog-author__bio {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 639px) {
  .tow-blog-author__card { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   BLOG INDEX HERO — magazine-style with featured post card
   ========================================================= */
.tow-blog-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
  padding: var(--space-9) 0 var(--space-9);
  position: relative;
  overflow: hidden;
}
.tow-blog-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  /* Locked canonical hero ratio — matches hero-emergency / hub-hero / service-hero */
  .tow-blog-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); }
}
.tow-blog-hero__copy { max-width: 580px; }
.tow-blog-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(228, 161, 74, 0.14);
  border: 1px solid rgba(228, 161, 74, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin: 0 0 var(--space-3);
}
.tow-blog-hero__overline-dot {
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  animation: tow-pulse-trust 1.6s ease-out infinite;
}
.tow-blog-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 var(--space-4);
}
.tow-blog-hero__lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-5);
}
.tow-blog-hero__trust {
  list-style: none;
  margin: 0; padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.tow-blog-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}
.tow-blog-hero__trust .tow-icon {
  width: 16px; height: 16px;
  background: var(--trust);
  color: white;
  border-radius: 50%;
  padding: 3px;
}

/* Featured post card on the right of blog hero */
.tow-blog-hero__featured {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.tow-blog-hero__featured:hover {
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow: 0 32px 70px -12px rgba(0, 0, 0, 0.55);
}
.tow-blog-hero__featured-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 6px 12px;
  background: var(--signal);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px -2px rgba(217, 119, 46, 0.45);
}
.tow-blog-hero__featured-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.tow-blog-hero__featured-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow);
}
.tow-blog-hero__featured:hover .tow-blog-hero__featured-media img { transform: scale(1.04); }
.tow-blog-hero__featured-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5);
}
.tow-blog-hero__featured-category {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi-vis-deep, #6E9E29);
}
.tow-blog-hero__featured-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.2;
}
.tow-blog-hero__featured-excerpt {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--steel);
}
.tow-blog-hero__featured-meta {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--steel);
}
.tow-blog-hero__featured-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--signal);
}
.tow-blog-hero__featured-cta .tow-icon { width: 16px; height: 16px; }

/* =========================================================
   BLOG INDEX GRID — full-page article listing with filters
   ========================================================= */
.tow-blog-grid { background: var(--paper); padding: var(--space-9) 0; }
.tow-blog-grid__head {
  max-width: 760px;
  margin: 0 auto var(--space-6);
  text-align: center;
}
.tow-blog-grid__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: var(--space-2) 0;
}
.tow-blog-grid__subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--steel);
  margin: 0 auto;
  max-width: 640px;
}
.tow-blog-grid__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-7);
  padding: 0 var(--container-pad);
}
.tow-blog-grid__filter {
  padding: 10px 18px;
  background: var(--cloud);
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--steel);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.tow-blog-grid__filter:hover {
  background: var(--paper);
  border-color: var(--navy);
  color: var(--navy);
}
.tow-blog-grid__filter.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  box-shadow: 0 4px 12px -2px rgba(33, 48, 60, 0.3);
}

/* Blog card filter transition — smooth fade-out when filtered */
.tow-blog-card {
  transition: opacity 280ms var(--ease-out),
              transform 280ms var(--ease-out),
              border-color var(--dur-base),
              box-shadow var(--dur-base);
}
.tow-blog-card.is-filtered-out {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
/* After fade-out completes, collapse the card so the grid re-flows.
   Without this the hidden cards still occupy grid cells and leave gaps. */
.tow-blog-card.is-hidden { display: none !important; }

/* Empty-state message when no cards match the active filter */
.tow-blog-grid__empty {
  text-align: center;
  font-size: 1rem;
  color: var(--steel);
  padding: var(--space-8) var(--container-pad);
  background: var(--cloud);
  border: 1px dashed var(--mist);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
}

/* Pagination at bottom of blog grid */
.tow-blog-grid__pagination {
  margin-top: var(--space-7);
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  border-top: 1px solid var(--mist);
}
.tow-blog-grid__page-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.tow-blog-grid__page-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-1px);
}
.tow-blog-grid__page-btn--prev .tow-icon { transform: rotate(180deg); }
.tow-blog-grid__page-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}
.tow-blog-grid__page-info {
  font-size: 0.92rem;
  color: var(--steel);
}
.tow-blog-grid__page-info strong { color: var(--navy); font-weight: 800; }

@media (max-width: 639px) {
  .tow-blog-grid__pagination { gap: var(--space-3); flex-wrap: wrap; }
  .tow-blog-grid__page-btn { padding: 10px 16px; font-size: 0.88rem; }
  .tow-blog-grid__page-info { width: 100%; text-align: center; order: 3; }
}

/* Blog hero — replace featured-card right side with the SVG visual */
.tow-blog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.tow-blog-hero__visual {
  background: linear-gradient(140deg, var(--navy-2) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(228, 161, 74, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(228, 161, 74, 0.04);
  overflow: hidden;
  position: relative;
}
.tow-blog-hero__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 400px at 50% 50%, rgba(228, 161, 74, 0.08), transparent 70%);
  pointer-events: none;
}
.tow-blog-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 520;
  position: relative;
  z-index: 1;
}
.tow-blog-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .tow-blog-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tow-blog-grid__list { grid-template-columns: repeat(3, 1fr); } }

/* Individual article card on blog index — slightly bigger than article-grid card */
.tow-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
  box-shadow: var(--shadow-sm);
}
.tow-blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--ink);
}
.tow-blog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tow-blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow);
}
.tow-blog-card:hover .tow-blog-card__media img { transform: scale(1.05); }
.tow-blog-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 11px;
  background: var(--hi-vis);
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.tow-blog-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tow-blog-card__meta {
  font-size: 0.78rem;
  color: var(--steel);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tow-blog-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0;
}
.tow-blog-card__excerpt {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
  flex: 1;
}
.tow-blog-card__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--signal);
  margin-top: var(--space-2);
}
.tow-blog-card__read .tow-icon {
  transition: transform var(--dur-fast);
}
.tow-blog-card:hover .tow-blog-card__read .tow-icon { transform: translateX(3px); }

/* =========================================================
   CONTACT HERO — distinct from hero-emergency + hub-hero
   Cream/cloud bg, copy left, big phone card right
   ========================================================= */
.tow-contact-hero {
  padding: var(--space-8) 0 var(--space-9);
  position: relative;
  overflow: hidden;
}
/* All bg variants render as the same dark navy gradient — unified with home/towing/hubs */
.tow-contact-hero,
.tow-contact-hero.tow-contact-hero--bg-cream,
.tow-contact-hero.tow-contact-hero--bg-cloud,
.tow-contact-hero.tow-contact-hero--bg-paper {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
}

.tow-contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 90% 20%, rgba(228, 161, 74, 0.14), transparent 70%),
    radial-gradient(500px 300px at 5% 95%, rgba(217, 119, 46, 0.08), transparent 70%);
  pointer-events: none;
}

.tow-contact-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 960px) {
  .tow-contact-hero__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-7); }
}

.tow-contact-hero__copy { max-width: 640px; position: relative; z-index: 1; }
.tow-contact-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(228, 161, 74, 0.14);
  border: 1px solid rgba(228, 161, 74, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin-bottom: var(--space-3);
}
.tow-contact-hero__overline::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--trust);
  animation: tow-pulse-trust 1.6s ease-out infinite;
  flex-shrink: 0;
}
.tow-contact-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 var(--space-4);
}
.tow-contact-hero__headline em { color: var(--hi-vis); font-style: normal; }
.tow-contact-hero__lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-4);
  max-width: 540px;
}
.tow-contact-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tow-contact-hero__trust {
  list-style: none;
  margin: 0; padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}
.tow-contact-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--paper);
}
.tow-contact-hero__trust .tow-icon {
  width: 16px; height: 16px;
  background: var(--trust);
  color: white;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
}

/* RIGHT: bold phone card — translucent glass so it pops against navy section */
.tow-contact-hero__card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  color: var(--paper);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tow-contact-hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(228, 161, 74, 0.14), transparent 70%);
  pointer-events: none;
}
.tow-contact-hero__card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(228, 161, 74, 0.4);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--paper);
}
.tow-contact-hero__card-icon {
  display: inline-flex;
  width: 64px; height: 64px;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  background: var(--hi-vis);
  color: var(--navy);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tow-contact-hero__card-icon .tow-icon { width: 28px; height: 28px; }
.tow-contact-hero__card-body {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.tow-contact-hero__card-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi-vis);
}
.tow-contact-hero__card-num {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--paper);
  line-height: 1.05;
  white-space: nowrap;
}
.tow-contact-hero__card-intro {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
}
.tow-contact-hero__card-arrow {
  font-size: 1.6rem;
  color: var(--hi-vis);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tow-contact-hero__card:hover .tow-contact-hero__card-arrow { transform: translateX(4px); }

/* Mobile narrow: tighten card so the phone number fits on one line */
@media (max-width: 480px) {
  .tow-contact-hero__card {
    gap: 12px;
    padding: var(--space-4) var(--space-4);
  }
  .tow-contact-hero__card-icon {
    width: 52px; height: 52px;
    flex: 0 0 52px;
  }
  .tow-contact-hero__card-icon .tow-icon {
    width: 24px; height: 24px;
  }
  .tow-contact-hero__card-arrow {
    font-size: 1.3rem;
  }
}

.tow-contact-hero__sec {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0;
  font-size: 0.92rem;
  color: var(--steel);
}
.tow-contact-hero__sec a {
  color: var(--signal);
  font-weight: 700;
}
.tow-contact-hero__sec a:hover { color: var(--signal-deep); }

/* =========================================================
   CONTENT BLOCK — clean prose section for SEO paragraphs
   No cards, no image split, no grid. Readable column of text.
   ========================================================= */
.tow-content {
  padding: var(--space-9) 0;
  background: var(--cream);
}
.tow-content.tow-content--bg-cream { background: var(--cream); }
.tow-content.tow-content--bg-cloud { background: var(--cloud); }
.tow-content.tow-content--bg-paper { background: var(--paper); }

.tow-content__inner {
  max-width: 760px;     /* readable column width */
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-content--align-center .tow-content__inner { text-align: center; }
.tow-content--align-center .tow-content__bullets { text-align: left; margin-left: auto; margin-right: auto; max-width: 600px; }

.tow-content__head { margin-bottom: var(--space-5); }
.tow-content__overline {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-3);
  padding: 5px 12px;
  background: var(--signal-bg);
  border-radius: 99px;
}
.tow-content__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}
.tow-content__title em { color: var(--signal); font-style: normal; }
.tow-content__lead {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}

.tow-content__body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--steel);
}
.tow-content__body p {
  margin: 0 0 var(--space-3);
}
.tow-content__body p:last-child { margin-bottom: 0; }
.tow-content__body strong {
  color: var(--navy);
  font-weight: 700;
}
.tow-content__body a {
  color: var(--signal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tow-content__body a:hover { color: var(--signal-deep); }

.tow-content__bullets {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--mist);
  display: grid;
  gap: 12px;
}
.tow-content__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
}
.tow-content__bullets .tow-icon {
  width: 16px; height: 16px;
  background: var(--trust);
  color: white;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  margin-top: 3px;
}

.tow-content__cta {
  margin-top: var(--space-5);
}
.tow-content--align-center .tow-content__cta { display: inline-flex; }

/* =========================================================
   INCLUSION GRID — "what's included" 4-card content section
   Distinct from feature-split (img+text) and service-grid (services list)
   ========================================================= */
.tow-inclusion {
  padding: var(--space-9) 0;
  background: var(--cream);
}
.tow-inclusion.tow-inclusion--bg-cream { background: var(--cream); }
.tow-inclusion.tow-inclusion--bg-cloud { background: var(--cloud); }
.tow-inclusion.tow-inclusion--bg-paper { background: var(--paper); }

.tow-inclusion__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-inclusion__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
}
.tow-inclusion__overline {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-3);
  padding: 5px 12px;
  background: var(--signal-bg);
  border-radius: 99px;
}
.tow-inclusion__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}
.tow-inclusion__title em { color: var(--signal); font-style: normal; }
.tow-inclusion__lead {
  color: var(--steel);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

.tow-inclusion__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .tow-inclusion__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tow-inclusion__grid { grid-template-columns: repeat(4, 1fr); } }

.tow-inclusion__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.tow-inclusion__card::before {
  /* yellow accent stripe at the top */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hi-vis);
  opacity: 0.8;
}
.tow-inclusion__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
}
.tow-inclusion__card:hover::before { opacity: 1; }

.tow-inclusion__icon {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--hi-vis-soft);
  color: var(--hi-vis-deep);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.tow-inclusion__icon .tow-icon { width: 24px; height: 24px; }

.tow-inclusion__card-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}
.tow-inclusion__card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
}

/* =========================================================
   SERVICE HERO v5 — full navy section (matches hub-hero pattern)
   Whole section dark, white copy left, glass stat panel right
   ========================================================= */
.tow-service-hero {
  padding: var(--space-8) 0 var(--space-9);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
}
.tow-service-hero.tow-service-hero--bg-paper,
.tow-service-hero.tow-service-hero--bg-cloud,
.tow-service-hero.tow-service-hero--bg-cream {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
.tow-service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 90% 20%, rgba(228, 161, 74, 0.12), transparent 70%),
    radial-gradient(500px 300px at 5% 95%, rgba(217, 119, 46, 0.08), transparent 70%);
  pointer-events: none;
}
.tow-service-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 960px) {
  .tow-service-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); }
}

/* LEFT: copy + CTAs + inline trust (white text on navy) */
.tow-service-hero__copy {
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.tow-service-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(228, 161, 74, 0.14);
  border: 1px solid rgba(228, 161, 74, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin-bottom: var(--space-3);
}
.tow-service-hero__overline::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--trust);
  animation: tow-pulse-trust 1.6s ease-out infinite;
  flex-shrink: 0;
}
.tow-service-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 var(--space-4);
}
.tow-service-hero__headline em { color: var(--hi-vis); font-style: normal; }
.tow-service-hero__lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-5);
  max-width: 560px;
}
.tow-service-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tow-service-hero__trust {
  list-style: none;
  margin: 0; padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.tow-service-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}
.tow-service-hero__trust .tow-icon {
  width: 16px; height: 16px;
  background: var(--trust);
  color: white;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
}

/* RIGHT: glass stat panel — sits on the navy section like hub-hero */
.tow-service-hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  color: var(--paper);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  z-index: 1;
}
.tow-service-hero__panel-mark {
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center;
  justify-content: center;
  background: var(--hi-vis);
  color: var(--navy);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.tow-service-hero__panel-mark .tow-icon { width: 36px; height: 36px; }
.tow-service-hero__panel-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin-bottom: 4px;
  position: relative; z-index: 1;
}
.tow-service-hero__panel-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.tow-service-hero__panel-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--space-5);
  position: relative; z-index: 1;
}

/* Supporting extras: small grid of label/value pairs at the bottom of the panel */
.tow-service-hero__panel-extras {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
  width: 100%;
  position: relative; z-index: 1;
}
.tow-service-hero__panel-extras li { display: grid; gap: 2px; }
.tow-service-hero__panel-extras-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.tow-service-hero__panel-extras-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.3;
}

/* Mobile: tighter panel padding */
@media (max-width: 959px) {
  .tow-service-hero__panel { padding: var(--space-5); }
}

/* =========================================================
   CONTACT FORM — split: form on left, details + map on right
   ========================================================= */
.tow-contact-form {
  background: var(--paper);
  padding: var(--space-9) 0;
}
.tow-contact-form.tow-contact-form--bg-cloud { background: var(--cloud); }
.tow-contact-form.tow-contact-form--bg-cream { background: var(--cream); }
.tow-contact-form.tow-contact-form--bg-paper { background: var(--paper); }

.tow-contact-form__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-contact-form__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
}
.tow-contact-form__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: var(--space-2) 0 var(--space-3);
}
.tow-contact-form__title em { color: var(--signal); font-style: normal; }
.tow-contact-form__lead {
  color: var(--steel);
  font-size: 1.05rem;
  line-height: 1.6;
}

.tow-contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .tow-contact-form__grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-7); }
}

/* Chassis V2.7 (2026-05-03) — Widen form column to 2.5fr/1fr so iframe is
   ~830px and triggers LeadConnector 2-col field rendering (First+Last on same
   row, Phone+Email same row, Type+License same row). Side panel keeps ~330px
   which still fits Phone CTA / Office / Hours / Map nicely.
   Mobile (<960px) stacks vertically via the chassis default 1fr rule. */
@media (min-width: 960px) {
  .tow-contact-form__grid:has(.tow-contact-form__form--leadconnector) {
    grid-template-columns: 2.5fr 1fr !important;
    gap: var(--space-7);
  }
}
/* Chassis V2.5 — HOURS li stacks label above value (no more collision). */
.tow-contact-form__form--leadconnector {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
/* V2.8 (2026-05-03): cap iframe + fine-print at 680px and center within the
   column. LC 2-col rendering kicks in at ~640px so 680px is safe + tight. */
.tow-contact-form__form--leadconnector iframe {
  display: block;
  margin: 0 auto;
  padding: 0;
  max-width: 680px;
  width: 100%;
}
.tow-contact-form__form--leadconnector .tow-contact-form__fine-print {
  margin: 0.5rem auto 0;
  padding: 0;
  max-width: 680px;
  text-align: center;
}
.tow-contact-form__hours li {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem !important;
  padding: 0.35rem 0;
}
.tow-contact-form__hours li span:first-child {
  color: var(--steel);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.tow-contact-form__hours li span:last-child {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

/* === LEFT: form === */
.tow-contact-form__form {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--space-4);
}
.tow-contact-form--bg-paper .tow-contact-form__form {
  background: var(--cloud);
}
.tow-contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .tow-contact-form__row { grid-template-columns: 1fr 1fr; }
}
.tow-contact-form__field {
  display: grid;
  gap: 6px;
}
.tow-contact-form__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.tow-contact-form__hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--slate);
  margin-left: 4px;
}
.tow-contact-form__field input,
.tow-contact-form__field select,
.tow-contact-form__field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tow-contact-form__field input::placeholder,
.tow-contact-form__field textarea::placeholder { color: var(--slate); }
.tow-contact-form__field input:focus,
.tow-contact-form__field select:focus,
.tow-contact-form__field textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(217, 119, 46, 0.18);
}
.tow-contact-form__field textarea { resize: vertical; min-height: 84px; }
.tow-contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.tow-contact-form__submit {
  width: 100%;
  justify-content: center;
}
.tow-contact-form__fine-print {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}

/* === RIGHT: side details === */
.tow-contact-form__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tow-contact-form__side-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--steel);
  margin: 0 0 var(--space-2);
}
.tow-contact-form__phone {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tow-contact-form__phone:hover {
  text-decoration: none;
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tow-contact-form__phone-icon {
  display: inline-flex;
  width: 52px; height: 52px;
  align-items: center;
  justify-content: center;
  background: var(--hi-vis);
  color: var(--navy);
  border-radius: 50%;
  flex-shrink: 0;
}
.tow-contact-form__phone-icon .tow-icon { width: 24px; height: 24px; }
.tow-contact-form__phone-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi-vis);
}
.tow-contact-form__phone-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tow-contact-form__detail {
  display: flex;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.tow-contact-form--bg-paper .tow-contact-form__detail { background: var(--cloud); }
.tow-contact-form__detail-icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--hi-vis-soft);
  color: var(--hi-vis-deep);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tow-contact-form__detail-icon .tow-icon { width: 20px; height: 20px; }
.tow-contact-form__detail-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 4px;
}
.tow-contact-form__detail-value {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.tow-contact-form__directions {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--signal);
}
.tow-contact-form__directions:hover { color: var(--signal-deep); }

.tow-contact-form__hours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.tow-contact-form__hours li {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--ink);
}
.tow-contact-form__hours li span:first-child { color: var(--steel); }
.tow-contact-form__hours li span:last-child { font-weight: 700; }

.tow-contact-form__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--mist);
  height: 220px;
}
.tow-contact-form__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   SECTION BG VARIANT MODIFIERS — let any section pick its own canvas
   ========================================================= */

/* feature-split bg variants — double-class specificity to win over base rule */
.tow-feature.tow-feature--bg-cloud { background: var(--cloud); }
.tow-feature.tow-feature--bg-cream { background: var(--cream); }
.tow-feature.tow-feature--bg-paper { background: var(--paper); }
.tow-feature.tow-feature--bg-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
}
.tow-feature.tow-feature--bg-navy .tow-feature__overline { color: var(--hi-vis); }
.tow-feature.tow-feature--bg-navy .tow-feature__title    { color: var(--paper); }
.tow-feature.tow-feature--bg-navy .tow-feature__title em { color: var(--hi-vis); }
.tow-feature.tow-feature--bg-navy .tow-feature__body p   { color: rgba(255,255,255,0.82); }

/* process-steps bg variants — see specific overrides further down (after base rules) */
.tow-process.tow-process--bg-cloud { background: var(--cloud); }
.tow-process.tow-process--bg-cream { background: var(--cream); }
.tow-process.tow-process--bg-paper { background: var(--paper); }

/* review-grid bg variants — double-class specificity to win over base rule */
.tow-reviews.tow-reviews--bg-cream { background: var(--cream); }
.tow-reviews.tow-reviews--bg-cloud { background: var(--cloud); }
.tow-reviews.tow-reviews--bg-paper { background: var(--paper); }

/* =========================================================
   HUB HERO — richer hero for hub pages (services, roadside, area)
   Navy bg, copy left, stats panel right
   ========================================================= */
.tow-hub-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
  padding: var(--space-8) 0 var(--space-9);
  position: relative;
  overflow: hidden;
}
.tow-hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 90% 30%, rgba(228, 161, 74, 0.10), transparent 70%),
    radial-gradient(500px 300px at 5% 90%, rgba(217, 119, 46, 0.08), transparent 70%);
  pointer-events: none;
}
.tow-hub-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .tow-hub-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); }
}
.tow-hub-hero__copy { max-width: 720px; }
.tow-hub-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(228, 161, 74, 0.14);
  border: 1px solid rgba(228, 161, 74, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin-bottom: var(--space-3);
}
.tow-hub-hero__overline::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--trust);
  animation: tow-pulse-trust 1.6s ease-out infinite;
  flex-shrink: 0;
}
.tow-hub-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  color: var(--paper);
}
.tow-hub-hero__headline em { color: var(--hi-vis); font-style: normal; }
.tow-hub-hero__lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-5);
  max-width: 580px;
}
.tow-hub-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tow-hub-hero__trust {
  list-style: none;
  margin: 0; padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
@media (min-width: 768px) {
  .tow-hub-hero__trust { flex-wrap: nowrap; }
}
.tow-hub-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.tow-hub-hero__trust .tow-icon {
  width: 16px; height: 16px;
  background: var(--trust);
  color: white;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
}

/* Stats panel on the right */
.tow-hub-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  backdrop-filter: blur(8px);
}
.tow-hub-hero__stat {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tow-hub-hero__stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--hi-vis);
}
.tow-hub-hero__stat-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 6px;
}

/* =========================================================
   CATEGORY SPLIT — two large category cards (services hub + others)
   ========================================================= */
.tow-cat-split { background: var(--paper); }
.tow-cat-split__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}
.tow-cat-split__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: var(--space-2) 0 var(--space-3);
}
.tow-cat-split__title em { color: var(--signal); font-style: normal; }
.tow-cat-split__lead {
  color: var(--steel);
  font-size: 1.02rem;
  line-height: 1.6;
}
.tow-cat-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 880px) {
  .tow-cat-split__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.tow-cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tow-cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}
.tow-cat-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tow-cat-card__icon {
  position: relative;
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--hi-vis);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tow-cat-card__icon::after {
  content: '';
  position: absolute;
  bottom: -3px; right: -3px;
  width: 12px; height: 12px;
  background: var(--hi-vis);
  border-radius: 50%;
  border: 2px solid var(--paper);
}
.tow-cat-card__icon .tow-icon { width: 28px; height: 28px; }
.tow-cat-card__heading {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.tow-cat-card__body {
  color: var(--steel);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.tow-cat-card__items {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--mist);
}
.tow-cat-card__items li a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--cloud);
  border: 1px solid var(--mist);
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.tow-cat-card__items li a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}
.tow-cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--signal);
  text-decoration: none;
  align-self: flex-start;
}
.tow-cat-card__cta:hover { color: var(--signal-deep); text-decoration: none; }
.tow-cat-card__cta .tow-icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.tow-cat-card:hover .tow-cat-card__cta .tow-icon { transform: translateX(3px); }

/* =========================================================
   BREADCRUMB — slim Home › Section › Page bar (inner pages)
   ========================================================= */
.tow-breadcrumb {
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  padding: 14px 0;
  font-size: 0.83rem;
  color: var(--slate);
  letter-spacing: 0.01em;
}
.tow-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.tow-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tow-breadcrumb__item a {
  color: var(--slate);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.tow-breadcrumb__item a:hover { color: var(--signal); }
.tow-breadcrumb__item [aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
}
.tow-breadcrumb__sep {
  color: var(--mist);
  opacity: 1;
  font-size: 1rem;
  margin: 0 10px;
  font-weight: 400;
}

/* =========================================================
   PAGE HEADER — compact inner-page header (not the homepage hero)
   ========================================================= */
.tow-page-header {
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  padding: var(--space-8) 0 var(--space-7);
}
.tow-page-header--compact {
  padding: var(--space-6) 0 var(--space-5);
}
.tow-page-header--dark {
  background: var(--navy);
  color: var(--paper);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.tow-page-header--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 320px at 90% 20%, rgba(228, 161, 74, 0.10), transparent 70%);
  pointer-events: none;
}
.tow-page-header__inner { position: relative; z-index: 1; max-width: 920px; }
.tow-page-header__overline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-3);
}
.tow-page-header--dark .tow-page-header__overline { color: var(--hi-vis); }
.tow-page-header__headline {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}
.tow-page-header--dark .tow-page-header__headline { color: var(--paper); }
.tow-page-header__headline em { color: var(--signal); font-style: normal; }
.tow-page-header--dark .tow-page-header__headline em { color: var(--hi-vis); }
.tow-page-header__sub {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--steel);
  max-width: 700px;
  margin: 0;
}
.tow-page-header--dark .tow-page-header__sub { color: rgba(255, 255, 255, 0.78); }
.tow-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--mist);
}
.tow-page-header--dark .tow-page-header__meta { border-top-color: rgba(255, 255, 255, 0.12); }
.tow-page-header__meta-item dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 2px;
}
.tow-page-header--dark .tow-page-header__meta-item dt { color: rgba(255, 255, 255, 0.55); }
.tow-page-header__meta-item dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
}
.tow-page-header--dark .tow-page-header__meta-item dd { color: var(--paper); }

/* =========================================================
   SERVICE NAV — icon-tile row of sibling services (hub + inner pages)
   ========================================================= */
.tow-service-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  padding: var(--space-5) 0;
}
.tow-service-nav__heading {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--space-3);
}
.tow-service-nav__list {
  list-style: none;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .tow-service-nav__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .tow-service-nav__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .tow-service-nav__list { grid-template-columns: repeat(6, 1fr); } }

.tow-service-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--mist);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  min-height: 76px;
}
.tow-service-nav__item:hover {
  border-color: var(--navy);
  background: var(--cloud);
  color: var(--navy);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.tow-service-nav__item.is-current {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  pointer-events: none;
}
.tow-service-nav__icon {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  background: var(--hi-vis-soft);
  color: var(--hi-vis-deep);
  border-radius: 6px;
}
.tow-service-nav__item.is-current .tow-service-nav__icon {
  background: var(--hi-vis);
  color: var(--navy);
}
.tow-service-nav__icon .tow-icon { width: 16px; height: 16px; }
.tow-service-nav__label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.tow-service-nav__tag {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 99px;
}
.tow-service-nav__tag--green { background: var(--trust-soft); color: var(--trust); }
.tow-service-nav__tag--red   { background: var(--signal-soft); color: var(--signal); }
.tow-service-nav__tag--navy  { background: var(--navy); color: var(--paper); }

/* =========================================================
   ALERT BAR — slim navy strip with status + phone
   ========================================================= */
.tow-alert-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--alert-bar-h);
  background: var(--navy);
  color: var(--paper);
  z-index: 1100;
  border-bottom: 1px solid var(--navy-3);
}
.tow-alert-bar__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.tow-alert-bar__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.tow-alert-bar__status-dot {
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  animation: tow-pulse-trust 1.8s ease-out infinite;
  flex-shrink: 0;
}
.tow-alert-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--signal);
  color: var(--paper);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 2px 8px rgba(217, 119, 46, 0.32);
  transition: all var(--dur-fast) var(--ease-out);
}
.tow-alert-bar__phone:hover {
  background: var(--signal-deep);
  color: var(--paper);
  transform: translateY(-1px);
  text-decoration: none;
}
.tow-alert-bar__phone-icon { width: 14px; height: 14px; }
@media (max-width: 639px) {
  .tow-alert-bar__status { display: none; }
  .tow-alert-bar__inner { justify-content: center; }
}

/* =========================================================
   SITE NAV — white nav with navy logo + red phone btn
   ========================================================= */
.tow-nav {
  position: fixed;
  top: var(--alert-bar-h); left: 0; right: 0;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  z-index: 1000;
}
.tow-nav__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.tow-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tow-nav__brand:hover { color: var(--navy); text-decoration: none; transform: translateX(1px); }

/* Custom Windsordumpster brand mark — inline SVG */
.tow-nav__brand-mark {
  position: relative;
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--paper);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(33, 48, 60, 0.25);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.tow-nav__brand:hover .tow-nav__brand-mark {
  box-shadow: 0 6px 18px -2px rgba(33, 48, 60, 0.35);
}
.tow-nav__brand-svg {
  width: 100%; height: 100%;
  display: block;
}
/* Hide the old ::after dot — now part of the SVG */
.tow-nav__brand-mark::after { display: none; }
.tow-nav__brand-mark--legacy {
  background: var(--navy);
  border-radius: var(--radius-sm);
}
.tow-nav__brand-mark::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 12px; height: 12px;
  background: var(--hi-vis);
  border-radius: 50%;
  border: 2px solid var(--paper);
}
.tow-nav__brand-mark .tow-icon { width: 22px; height: 22px; }

.tow-nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 3px;
}
.tow-nav__brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  display: inline-flex;
  gap: 6px;
}
.tow-nav__brand-name-accent {
  color: var(--signal);
  position: relative;
}
.tow-nav__brand-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi-vis-deep, #6E9E29);
  display: inline-block;
}
@media (max-width: 1023px) {
  .tow-nav__brand-tag { display: none; }
  .tow-nav__brand-name { font-size: 1.15rem; }
}

.tow-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}
/* ===========================================================
   NAV LINKS — "dispatch console" style.
   Each link reserves a small left slot for a yellow indicator
   square that fades + slides in on hover/active.
   Scoped via :not() so the phone link and CTA button keep
   their existing pre-built treatments.
   =========================================================== */
.tow-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 22px;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Yellow square indicator — only on standard nav links (not phone) */
.tow-nav__link:not(.tow-nav__link--phone)::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--hi-vis);
  border-radius: 1px;
  transform: translateY(-50%) translateX(-6px) rotate(45deg);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.tow-nav__link:not(.tow-nav__link--phone):hover {
  color: var(--navy);
  text-decoration: none;
  background: transparent;
}
.tow-nav__link:not(.tow-nav__link--phone):hover::before,
.tow-nav__link--active::before,
.tow-nav__link--mega-active:not(.tow-nav__link--phone)::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0) rotate(45deg);
}
.tow-nav__link--active {
  color: var(--navy);
}
/* Mega-menu chevron — uses currentColor; rotates on hover/active */
.tow-nav__link--has-mega::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 4px;
  transition: transform var(--dur-base) var(--ease-out);
}
.tow-nav__link--has-mega:hover::after,
.tow-nav__link--mega-active::after { transform: rotate(225deg) translateY(2px); }
/* Phone link has its own padding-left override (no indicator slot) */
.tow-nav__link--phone {
  padding-left: 14px;
}

/* Phone in nav — orange icon + dark number + small "FREE ESTIMATES" label */
.tow-nav__link--phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.tow-nav__link--phone::before {
  content: '';
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--signal);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.tow-nav__link-phone-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.tow-nav__link-phone-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.tow-nav__link-phone-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.tow-nav__cta { margin-left: var(--space-2); }

.tow-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tow-nav__toggle:hover { background: var(--cloud); }
.tow-nav__toggle .tow-icon { width: 24px; height: 24px; }

/* Desktop: alert-bar HIDDEN entirely; nav drops into normal flow */
@media (min-width: 1024px) {
  .tow-alert-bar { display: none; }
  .tow-nav       { position: relative; top: auto; }
}

/* ===========================================================
   MOBILE DRAWER — "dispatch console" style.
   Dark navy gradient panel slides in from right with yellow
   diamond markers, prominent red phone button, and a dispatch
   footer card. Matches the desktop mega menu visual language.
   =========================================================== */
@media (max-width: 1023px) {
  .tow-nav__toggle { display: inline-flex; }
  .tow-nav__toggle.is-open {
    background: var(--navy);
    color: var(--hi-vis);
  }
  .tow-nav__links {
    position: fixed;
    top: calc(var(--alert-bar-h) + var(--nav-h));
    right: 0; bottom: 0;
    width: min(360px, 92vw);
    background-color: #1B2832;
    background-image: linear-gradient(160deg, #12281B 0%, #141D25 100%);
    border-left: 1px solid rgba(228, 161, 74, 0.22);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-5) var(--space-4) var(--space-7);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    z-index: 1020;
  }
  /* Yellow stripe at the top edge — matches desktop mega menu */
  .tow-nav__links::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    height: 3px;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) var(--space-4);
    background: linear-gradient(90deg, var(--hi-vis) 0%, var(--hi-vis) 60%, var(--signal) 100%);
  }
  .tow-nav__links.is-open { display: flex; transform: translateX(0); }
  .tow-nav__links li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .tow-nav__links li:last-child { border-bottom: 0; }
  .tow-nav__link {
    width: 100%;
    padding: 16px 14px 16px 30px;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.005em;
    justify-content: flex-start;
    background: transparent;
    transition: background var(--dur-fast), color var(--dur-fast);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* Reposition the diamond marker for mobile (left edge of full-width link) */
  .tow-nav__link:not(.tow-nav__link--phone)::before {
    left: 12px;
    width: 7px;
    height: 7px;
    background: var(--hi-vis);
    opacity: 1;
    transform: translateY(-50%) translateX(0) rotate(45deg);
  }
  .tow-nav__link:hover,
  .tow-nav__link:active {
    background: rgba(228, 161, 74, 0.10);
    color: var(--paper);
  }
  /* Mega-trigger chevron — yellow on dark drawer */
  .tow-nav__link--has-mega {
    color: #FFFFFF;
  }
  .tow-nav__link--has-mega::after {
    margin-left: auto;
    border-color: var(--hi-vis);
  }

  /* Phone link — red pill highlight in the drawer */
  .tow-nav__link--phone {
    background: rgba(217, 119, 46, 0.12);
    border: 1px solid rgba(217, 119, 46, 0.35);
    border-radius: var(--radius-sm);
    padding: 14px 14px;
    margin-top: var(--space-4);
    border-bottom: 1px solid rgba(217, 119, 46, 0.35) !important;
    color: var(--paper);
  }
  .tow-nav__link--phone .tow-nav__link-phone-label {
    color: rgba(228, 161, 74, 0.85);
  }
  .tow-nav__link--phone .tow-nav__link-phone-number {
    color: var(--paper);
  }

  /* CTA button — full-width red button at bottom */
  .tow-nav__cta {
    margin: var(--space-3) 0 var(--space-4);
    padding: 16px 22px !important;
    width: 100%;
    justify-content: center;
    box-shadow: 0 6px 18px -4px rgba(217, 119, 46, 0.45);
  }
  .tow-nav__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -4px rgba(217, 119, 46, 0.55);
  }

  /* Dispatch footer card inside the drawer, after the CTA */
  .tow-nav__links::after {
    content: 'Free Estimates · Windsor plus surrounding areas';
    display: block;
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(228, 161, 74, 0.18);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(228, 161, 74, 0.85);
    text-align: center;
  }

  body.is-nav-open::after {
    content: '';
    position: fixed;
    inset: calc(var(--alert-bar-h) + var(--nav-h)) 0 0 0;
    background: rgba(33, 48, 60, 0.6);
    z-index: 1010;
    pointer-events: auto;
  }
  body.is-nav-open { overflow: hidden; }
  /* CRITICAL: bump .tow-nav above the overlay so the drawer's child elements
     are clickable. Without this, .tow-nav sits at z-index 1000 (its
     stacking context) and the overlay at 1010 swallows all clicks. */
  body.is-nav-open .tow-nav { z-index: 1100; }

  /* Mobile mega accordion — JS moves .tow-mega divs into the parent <li>.
     Override the desktop fixed-position styles and render inline as a sub-list. */
  .tow-nav__links li .tow-mega {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-left: 2px solid rgba(228, 161, 74, 0.45);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 8px 14px;
    z-index: auto;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
  }
  .tow-nav__links li .tow-mega::before { display: none; }
  .tow-nav__links li.is-mobile-mega-open .tow-mega {
    max-height: 1500px;
    opacity: 1;
    pointer-events: auto;
  }
  .tow-nav__links li.is-mobile-mega-open .tow-nav__link--has-mega::after {
    transform: rotate(225deg) translateY(2px);
  }
  /* Stack mega columns vertically on mobile, hide promo card */
  .tow-nav__links li .tow-mega__grid {
    display: block;
    padding: 12px 0 12px 12px;
  }
  .tow-nav__links li .tow-mega__col {
    border-right: 0;
    padding: 0 0 14px 0;
  }
  .tow-nav__links li .tow-mega__col:last-of-type { padding-bottom: 4px; }
  .tow-nav__links li .tow-mega__col-title {
    font-size: 0.62rem;
    margin: 0 0 6px;
    padding-bottom: 6px;
  }
  .tow-nav__links li .tow-mega__list { padding: 0; }
  .tow-nav__links li .tow-mega__list li {
    border-bottom: 0;
  }
  .tow-nav__links li .tow-mega__link {
    padding: 8px 0;
    font-size: 0.92rem;
    gap: 10px;
  }
  .tow-nav__links li .tow-mega__link-marker {
    width: 5px;
    height: 5px;
  }
  .tow-nav__links li .tow-mega__link-arrow { display: none; }
  .tow-nav__links li .tow-mega__promo { display: none; }
}

/* Mega menu */
/* ===========================================================
   MEGA MENU — "dispatch console" style.
   Dark navy gradient panel with yellow accents, icon-grid links,
   and a featured Free Estimates CTA card on the right.
   =========================================================== */
.tow-mega {
  position: fixed;
  top: calc(var(--alert-bar-h) + var(--nav-h) + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  max-width: 1320px;
  width: calc(100% - 32px);
  background-color: #1B2832;
  background-image: linear-gradient(160deg, #12281B 0%, #141D25 100%);
  border: 1px solid rgba(228, 161, 74, 0.22);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.65);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out);
  z-index: 1010;
  overflow: hidden;
}
/* Yellow stripe at top — dispatch theme accent */
.tow-mega::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hi-vis) 0%, var(--hi-vis) 60%, var(--signal) 100%);
}
.tow-mega.is-open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tow-mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.92fr;
  gap: 0;
  padding: var(--space-6);
}
.tow-mega__col {
  padding: 0 var(--space-4);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.tow-mega__col:first-child { padding-left: 0; }
.tow-mega__col-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin: 0 0 var(--space-4);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(228, 161, 74, 0.25);
}
.tow-mega__list { list-style: none; margin: 0; padding: 0; }
.tow-mega__list li { margin: 0; }
.tow-mega__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tow-mega__link-marker {
  width: 6px; height: 6px;
  background: rgba(228, 161, 74, 0.35);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.tow-mega__link-text { flex: 1; }
.tow-mega__link-arrow {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(228, 161, 74, 0);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tow-mega__link:hover {
  background: rgba(228, 161, 74, 0.10);
  color: var(--paper);
  text-decoration: none;
}
.tow-mega__link:hover .tow-mega__link-marker { background: var(--hi-vis); }
.tow-mega__link:hover .tow-mega__link-arrow {
  color: var(--hi-vis);
  transform: translateX(3px);
}

/* Featured promo card — rightmost column */
.tow-mega__promo {
  position: relative;
  margin-left: var(--space-5);
  padding: var(--space-5);
  background: linear-gradient(155deg, rgba(228, 161, 74, 0.10) 0%, rgba(217, 119, 46, 0.06) 100%);
  border: 1px solid rgba(228, 161, 74, 0.25);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.tow-mega__promo::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 161, 74, 0.18), transparent 70%);
  pointer-events: none;
}
.tow-mega__promo-overline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi-vis);
}
.tow-mega__promo-dot {
  width: 6px; height: 6px;
  background: var(--trust);
  border-radius: 50%;
  animation: tow-pulse-trust 1.6s ease-out infinite;
  flex-shrink: 0;
}
.tow-mega__promo-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0;
  line-height: 1.1;
}
.tow-mega__promo-title em {
  color: var(--hi-vis);
  font-style: normal;
}
.tow-mega__promo-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.tow-mega__promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 16px;
  background: var(--signal);
  color: var(--paper);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 4px 14px -2px rgba(217, 119, 46, 0.4);
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.tow-mega__promo-cta:hover {
  background: var(--signal-deep);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -4px rgba(217, 119, 46, 0.55);
}
.tow-mega__promo-cta .tow-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Tablet: drop the promo card into a second row, keep 3 link columns */
@media (max-width: 1023px) {
  .tow-mega__grid { grid-template-columns: 1fr 1fr 1fr; }
  .tow-mega__promo { grid-column: 1 / -1; margin-left: 0; flex-direction: row; align-items: center; }
  .tow-mega__promo-cta { margin-top: 0; margin-left: auto; }
}

.tow-mega-overlay {
  position: fixed; inset: 0;
  background: rgba(33, 48, 60, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 900;
}
.tow-mega-overlay.is-active { opacity: 1; pointer-events: auto; }

/* =========================================================
   HERO — navy bg, centered availability badge, headline + trust card
   ========================================================= */
.tow-hero {
  position: relative;
  background: var(--navy);
  color: var(--paper);
  padding: var(--space-9) 0 var(--space-10);
  overflow: hidden;
}
.tow-hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .tow-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); }
}
.tow-hero__text {}

/* Yellow availability badge — Anchor signature */
.tow-hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin-bottom: var(--space-5);
  background: var(--hi-vis-soft);
  border: 1px solid rgba(228, 161, 74, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi-vis);
}
.tow-hero__overline-dot {
  width: 8px; height: 8px;
  background: var(--trust);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--trust);
  animation: tow-pulse-trust 1.6s ease-out infinite;
}

.tow-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
  margin-bottom: var(--space-4);
}
.tow-hero__headline em { color: var(--hi-vis); font-style: normal; }
.tow-hero__headline strong { color: var(--hi-vis); font-weight: 800; }

.tow-hero__sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--space-5);
  max-width: 560px;
}
.tow-hero__sub em { color: var(--hi-vis); font-style: normal; font-weight: 600; }

.tow-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Hero meta — 4 white check-bullet items */
.tow-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) {
  .tow-hero__meta { flex-wrap: nowrap; }
}
.tow-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
}
.tow-hero__meta-item .tow-hero__meta-value {
  white-space: nowrap;
}
.tow-hero__meta-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  background: var(--trust);
  color: var(--paper);
  border-radius: 50%;
  flex-shrink: 0;
}
.tow-hero__meta-icon .tow-icon { width: 14px; height: 14px; }
.tow-hero__meta-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
  display: none; /* keep simple — just show value */
}
.tow-hero__meta-value {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper);
}
.tow-hero__meta-value strong {
  font-weight: 800;
  color: var(--hi-vis);
}

/* Trust card on right — yellow border, rating + Google + BBB + Years + Insured */
.tow-hero__visual {
  position: relative;
  background: var(--paper);
  border: 4px solid var(--hi-vis);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

/* When real image is provided */
.tow-hero__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 35%;  /* keep windshield + dashboard visible, not just dashboard */
  border-radius: var(--radius-sm);
  display: block;
}
@media (max-width: 1023px) {
  .tow-hero__visual img { aspect-ratio: 16 / 10; }
}
.tow-hero__visual-overlay {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--cloud);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--signal);
}
.tow-hero__visual-overlay-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.tow-hero__visual-overlay-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  margin-top: 2px;
}

/* RADAR VISUAL — animated SVG variant for hero-emergency
   Replaces the photo with a dispatch network radar animation.
   Dark navy bg with subtle inner glow, hi-vis yellow accents. */
.tow-hero__visual--radar {
  background: linear-gradient(140deg, var(--navy-2) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(228, 161, 74, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(228, 161, 74, 0.04);
  overflow: hidden;
  position: relative;
}
.tow-hero__visual--radar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 400px at 50% 50%, rgba(228, 161, 74, 0.08), transparent 70%);
  pointer-events: none;
}
.tow-hero__visual--radar .tow-radar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 520;
  position: relative;
  z-index: 1;
}

/* HUB-HERO and SERVICE-HERO animated visuals — share the same dark frame as the radar */
.tow-hub-hero__visual,
.tow-service-hero__visual {
  background: linear-gradient(140deg, var(--navy-2) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(228, 161, 74, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(228, 161, 74, 0.04);
  overflow: hidden;
  position: relative;
}
.tow-hub-hero__visual::before,
.tow-service-hero__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 400px at 50% 50%, rgba(228, 161, 74, 0.08), transparent 70%);
  pointer-events: none;
}
.tow-hub-svg,
.tow-service-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 520;
  position: relative;
  z-index: 1;
}

/* SVG card size modifiers — match emergency-service exactly.
   Both hub-hero and service-hero default to 1.4fr 1fr column ratio + 480/520
   aspect-ratio, so we just keep defaults but ensure trust line wraps cleanly. */
.tow-hub-hero__trust { flex-wrap: wrap !important; row-gap: 8px; }
.tow-hub-hero__trust li { white-space: normal; }

/* HERO — SPLIT (lighter variant for service / city pages) */
.tow-hero--split {
  background: var(--cloud);
  color: var(--ink);
}
.tow-hero--split::before { display: none; }
.tow-hero--split .tow-hero__headline { color: var(--navy); }
.tow-hero--split .tow-hero__sub { color: var(--steel); }
.tow-hero--split .tow-hero__overline { color: var(--signal); background: var(--signal-bg); border-color: var(--signal); }
.tow-hero--split .tow-hero__meta { border-top-color: var(--mist); }
.tow-hero--split .tow-hero__meta-value { color: var(--ink); }

/* =========================================================
   TRUST BAR — slow scrolling badge marquee (navy strip)
   Modifier .tow-trust--tape switches to caution-tape divider mode.
   ========================================================= */
/* TRUST MARQUEE — patterned on Sample_Design's proven .marquee-bar/.marquee-content
   Stripped CSS: no max-content, no will-change, no translate3d, no shorthand mixing.
   Duration set on the same simple animation declaration at 30s, matches sample. */
.tow-trust {
  background: var(--navy);
  color: var(--paper);
  padding: var(--space-4) 0;
  overflow: hidden;
  white-space: nowrap;
}
.tow-trust__track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  animation: tow-marquee-v5 30s linear infinite;
}
@keyframes tow-marquee-v5 {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tow-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}
.tow-trust__item .tow-icon { color: var(--hi-vis); width: 18px; height: 18px; }

/* Modifier: caution-tape divider variant — static yellow/navy diagonal stripe.
   No animation, no items. Acts as a decorative section divider. */
.tow-trust--tape {
  background: none;
  background-image: repeating-linear-gradient(
    135deg,
    var(--hi-vis) 0,
    var(--hi-vis) 22px,
    var(--navy) 22px,
    var(--navy) 44px
  );
  height: 26px;
  padding: 0;
  display: block;
  width: 100%;
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
}
.tow-trust--tape .tow-trust__track { display: none; }

/* Modifier: caution-tape NAVY variant — navy takes the place of yellow.
   Diagonal navy + paper(white) stripes. Used to flank the dark CTA banner
   (top + bottom) so the dispatch theme reads against the navy background. */
.tow-trust--tape-navy {
  background: none;
  background-image: repeating-linear-gradient(
    135deg,
    var(--navy) 0,
    var(--navy) 22px,
    var(--paper) 22px,
    var(--paper) 44px
  );
  height: 26px;
  padding: 0;
  display: block;
  width: 100%;
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
}
.tow-trust--tape-navy .tow-trust__track { display: none; }

/* Reduced-motion preference removed intentionally — keep single duration source */

/* =========================================================
   SERVICE GRID — clean white cards, navy icon block, yellow corner dot
   ========================================================= */
.tow-service-grid {
  background: var(--paper);
  padding: var(--space-9) 0;
}
/* Header: title-block on left, view-all link on right (desktop). Stacks on mobile. */
.tow-service-grid__header {
  max-width: var(--container-max);
  margin: 0 auto var(--space-7);
  padding: 0 var(--container-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.tow-service-grid__header > div { flex: 1 1 auto; min-width: 0; }
.tow-service-grid__overline,
.tow-service-grid .tow-text-overline {
  display: inline-block;
  color: var(--steel);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.tow-service-grid__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
  max-width: 720px;
}
.tow-service-grid__title em { color: var(--signal); font-style: normal; }
.tow-service-grid__subtitle {
  color: var(--steel);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 680px;
  margin: var(--space-3) 0 0;
}
.tow-service-grid__subtitle {
  margin-top: var(--space-2);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--steel);
  max-width: 600px;
}
.tow-service-grid__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--signal);
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 6px;
}
.tow-service-grid__view-all:hover { color: var(--signal-deep); }
@media (max-width: 639px) {
  .tow-service-grid__header { align-items: flex-start; }
  .tow-service-grid__view-all { align-self: flex-start; padding-bottom: 0; }
}

.tow-service-grid__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .tow-service-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .tow-service-grid__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .tow-service-grid__list { grid-template-columns: repeat(4, 1fr); } }

.tow-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tow-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
  text-decoration: none;
  color: var(--ink);
}

/* Navy icon block with yellow corner dot — Anchor signature */
.tow-service-card__icon {
  position: relative;
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--hi-vis);
  border-radius: var(--radius-sm);
}
.tow-service-card__icon::after {
  content: '';
  position: absolute;
  bottom: -3px; right: -3px;
  width: 10px; height: 10px;
  background: var(--hi-vis);
  border-radius: 50%;
  border: 2px solid var(--paper);
}
.tow-service-card__icon .tow-icon { width: 24px; height: 24px; }

.tow-service-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.tow-service-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--steel);
  flex-grow: 1;
}
.tow-service-card__price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 6px 10px;
  background: var(--trust-soft);
  border-radius: var(--radius-sm);
  color: var(--trust);
  font-weight: 700;
  font-size: 0.82rem;
}
.tow-service-card__arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--signal);
}
.tow-service-card__arrow .tow-icon { width: 14px; height: 14px; }

/* =========================================================
   STAT STRIP — cream background with bold navy numbers (Ironline)
   ========================================================= */
.tow-stats {
  background: var(--cream);
  color: var(--navy);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--cream-2);
  border-bottom: 1px solid var(--cream-2);
}
.tow-stats__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-stats__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: var(--space-6);
}
.tow-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (min-width: 640px) { .tow-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.tow-stat {
  text-align: center;
  padding: 0 var(--space-3);
  border-right: 1px solid var(--cream-2);
}
.tow-stat:last-child { border-right: 0; }
@media (max-width: 639px) {
  .tow-stat { border-right: 0; border-bottom: 1px solid var(--cream-2); padding-bottom: var(--space-4); }
  .tow-stat:last-child { border-bottom: 0; }
}
.tow-stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--navy);
  margin-bottom: var(--space-2);
}
.tow-stat__value em { color: var(--signal); font-style: normal; }
.tow-stat__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
.tow-stat__sub {
  font-size: 0.82rem;
  color: var(--steel);
  line-height: 1.5;
}

/* Navy variant — matches process-steps navy treatment.
   Dark gradient background, white headings, yellow stat values. */
.tow-stats.tow-stats--bg-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.tow-stats.tow-stats--bg-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 90% 20%, rgba(228, 161, 74, 0.10), transparent 70%),
    radial-gradient(500px 300px at 5% 95%, rgba(217, 119, 46, 0.06), transparent 70%);
  pointer-events: none;
}
.tow-stats.tow-stats--bg-navy .tow-stats__inner { position: relative; z-index: 1; }
.tow-stats.tow-stats--bg-navy .tow-stats__title { color: var(--paper); }
.tow-stats.tow-stats--bg-navy .tow-stat {
  border-right-color: rgba(255, 255, 255, 0.10);
}
.tow-stats.tow-stats--bg-navy .tow-stat:last-child { border-right: 0; }
@media (max-width: 639px) {
  .tow-stats.tow-stats--bg-navy .tow-stat {
    border-right: 0;
    border-bottom-color: rgba(255, 255, 255, 0.10);
  }
  .tow-stats.tow-stats--bg-navy .tow-stat:last-child { border-bottom: 0; }
}
.tow-stats.tow-stats--bg-navy .tow-stat__value { color: var(--hi-vis); }
.tow-stats.tow-stats--bg-navy .tow-stat__value em { color: var(--signal); }
.tow-stats.tow-stats--bg-navy .tow-stat__label { color: var(--paper); }
.tow-stats.tow-stats--bg-navy .tow-stat__sub { color: rgba(255, 255, 255, 0.7); }

/* Cloud variant — light gray (rarely used; cream is default) */
.tow-stats.tow-stats--bg-cloud { background: var(--cloud); }

/* =========================================================
   FEATURE SPLIT
   ========================================================= */
.tow-feature {
  padding: var(--space-9) 0;
  background: var(--paper);
}
.tow-feature--cloud { background: var(--cloud); }
.tow-feature--navy {
  background: var(--navy);
  color: var(--paper);
}
.tow-feature__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .tow-feature__inner { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}
/* Reversed feature-split: image LEFT, text RIGHT (desktop) / image on top (mobile) */
.tow-feature--reverse .tow-feature__visual { order: -1; }
@media (min-width: 960px) {
  .tow-feature--reverse .tow-feature__inner > *:first-child  { grid-column: 2; grid-row: 1; }
  .tow-feature--reverse .tow-feature__visual                 { grid-column: 1; grid-row: 1; order: 0; }
}
.tow-feature__overline {
  display: inline-block;
  padding: 6px 12px;
  background: var(--signal-bg);
  color: var(--signal);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.tow-feature--navy .tow-feature__overline {
  background: rgba(228, 161, 74, 0.16);
  color: var(--hi-vis);
}
.tow-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  color: var(--navy);
}
.tow-feature--navy .tow-feature__title { color: var(--paper); }
.tow-feature__title em { color: var(--signal); font-style: normal; }
.tow-feature--navy .tow-feature__title em { color: var(--hi-vis); }
.tow-feature__body { font-size: 1rem; line-height: 1.7; color: var(--steel); }
.tow-feature--navy .tow-feature__body { color: rgba(255, 255, 255, 0.78); }
.tow-feature__body p { margin-bottom: var(--space-3); }
.tow-feature__body em {
  color: var(--signal);
  font-style: normal;
  font-weight: 700;
}
.tow-feature--navy .tow-feature__body em { color: var(--hi-vis); }
.tow-feature__cta { margin-top: var(--space-5); }

.tow-feature__visual {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--cloud);
  box-shadow: var(--shadow-md);
}
.tow-feature__visual img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   PROCESS STEPS — numbered cards, soft shadows
   ========================================================= */
.tow-process {
  padding: var(--space-9) 0;
  background: var(--cloud);
}
.tow-process__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-process__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-align: center;
  margin-bottom: var(--space-7);
  color: var(--navy);
}
.tow-process__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px)  { .tow-process__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tow-process__list { grid-template-columns: repeat(4, 1fr); } }
.tow-process__step {
  position: relative;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  counter-increment: step;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tow-process__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tow-process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -16px;
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 12px;
  background: var(--navy);
  color: var(--hi-vis);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.tow-process__step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-2);
  color: var(--navy);
}
.tow-process__step-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--steel);
}

/* ----- Navy variant: dark section, glass cards, yellow numbers ----- */
.tow-process.tow-process--bg-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.tow-process.tow-process--bg-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 85% 25%, rgba(228, 161, 74, 0.10), transparent 70%),
    radial-gradient(500px 300px at 10% 90%, rgba(217, 119, 46, 0.06), transparent 70%);
  pointer-events: none;
}
.tow-process.tow-process--bg-navy > .tow-process__inner { position: relative; z-index: 1; }
.tow-process.tow-process--bg-navy .tow-process__title       { color: var(--paper); }
.tow-process.tow-process--bg-navy .tow-process__title em    { color: var(--hi-vis); font-style: normal; }
.tow-process.tow-process--bg-navy .tow-text-overline        { color: var(--hi-vis); }
.tow-process.tow-process--bg-navy .tow-process__step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.tow-process.tow-process--bg-navy .tow-process__step:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(228, 161, 74, 0.4);
  transform: translateY(-3px);
}
.tow-process.tow-process--bg-navy .tow-process__step::before {
  background: var(--hi-vis);
  color: var(--navy);
}
.tow-process.tow-process--bg-navy .tow-process__step-title  { color: var(--paper); }
.tow-process.tow-process--bg-navy .tow-process__step-desc   { color: rgba(255, 255, 255, 0.78); }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.tow-faq {
  padding: var(--space-9) 0;
  background: var(--paper);
}
.tow-faq__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-faq__overline {
  display: block;
  padding: 6px 12px;
  background: var(--signal-bg);
  color: var(--signal);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  width: fit-content;
  margin: 0 auto var(--space-3);
}
.tow-faq__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-align: center;
  margin-bottom: var(--space-3);
  color: var(--navy);
}
.tow-faq__subtitle {
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--steel);
  max-width: 640px;
  margin: 0 auto var(--space-7);
}
.tow-faq__list { display: flex; flex-direction: column; gap: var(--space-3); }
.tow-faq__item {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tow-faq__item.is-open {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.tow-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  color: var(--navy);
  cursor: pointer;
}
.tow-faq__chevron {
  width: 20px; height: 20px;
  color: var(--signal);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.tow-faq__item.is-open .tow-faq__chevron { transform: rotate(180deg); }
.tow-faq__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-both);
}
.tow-faq__item.is-open .tow-faq__body { max-height: 800px; }
.tow-faq__body-inner {
  padding: 0 var(--space-5) var(--space-5);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--steel);
}

/* =========================================================
   REVIEW GRID
   ========================================================= */
.tow-reviews {
  padding: var(--space-9) 0;
  background: var(--cloud);
}
.tow-reviews__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tow-reviews__head { text-align: center; margin-bottom: var(--space-6); }
.tow-reviews__overline {
  display: inline-block;
  padding: 6px 12px;
  background: var(--signal-bg);
  color: var(--signal);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.tow-reviews__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.tow-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 10px 18px;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: 0.92rem;
  color: var(--ink);
}
.tow-reviews__rating-stars { color: var(--hi-vis); letter-spacing: 0.1em; }
.tow-reviews__rating-score { font-family: var(--font-display); font-weight: 800; color: var(--navy); }
.tow-reviews__rating-link {
  margin-top: var(--space-3);
  display: inline-block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--signal);
}
.tow-reviews__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .tow-reviews__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tow-reviews__list { grid-template-columns: repeat(4, 1fr); } }
.tow-review-card {
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tow-review-card__stars { color: var(--hi-vis); letter-spacing: 0.08em; font-size: 0.95rem; }
.tow-review-card__body {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
  flex-grow: 1;
}
.tow-review-card__author {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--navy);
}
.tow-review-card__role {
  font-size: 0.78rem;
  color: var(--steel);
  letter-spacing: 0.04em;
}

/* =========================================================
   ARTICLE GRID
   ========================================================= */
.tow-article-grid {
  padding: var(--space-9) 0;
  background: var(--paper);
}
/* article-grid bg variants — double-class specificity to win over base rule */
.tow-article-grid.tow-article-grid--bg-cloud { background: var(--cloud); }
.tow-article-grid.tow-article-grid--bg-cream { background: var(--cream); }
.tow-article-grid.tow-article-grid--bg-paper { background: var(--paper); }
.tow-article-grid__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-pad);
}
.tow-article-grid__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.tow-article-grid__subtitle {
  margin-top: var(--space-2);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--steel);
  max-width: 600px;
}
.tow-article-grid__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--signal);
}
.tow-article-grid__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .tow-article-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tow-article-grid__list { grid-template-columns: repeat(3, 1fr); } }
.tow-article-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tow-article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
  text-decoration: none;
  color: var(--ink);
}
.tow-article-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--cloud);
}
.tow-article-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tow-article-card:hover .tow-article-card__media img { transform: scale(1.04); }
.tow-article-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 5px 10px;
  background: var(--hi-vis);
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tow-article-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-grow: 1;
}
.tow-article-card__meta {
  display: flex;
  gap: var(--space-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.tow-article-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--navy);
}
.tow-article-card__excerpt {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--steel);
  flex-grow: 1;
}
.tow-article-card__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--signal);
}

/* =========================================================
   CTA BANNER — hi-vis yellow background, navy headline, red phone CTA
   ========================================================= */
.tow-cta {
  position: relative;
  background: var(--hi-vis);
  color: var(--navy);
  padding: var(--space-9) 0;
  border-top: 4px solid var(--navy);
  border-bottom: 4px solid var(--navy);
  overflow: hidden;
}
.tow-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 80px,
    rgba(33, 48, 60, 0.04) 80px,
    rgba(33, 48, 60, 0.04) 82px
  );
  pointer-events: none;
}
.tow-cta__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
}
.tow-cta__overline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--navy);
  color: var(--hi-vis);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.tow-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-4);
  color: var(--navy);
}
.tow-cta__title em { color: var(--signal); font-style: normal; }
.tow-cta__body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: var(--space-6);
}
.tow-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tow-cta__note {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.7;
  max-width: 600px;
  margin: 0 auto;
}
.tow-cta .tow-btn--primary { background: var(--signal); color: var(--paper); }
.tow-cta .tow-btn--primary:hover { background: var(--signal-deep); }
.tow-cta .tow-btn--ghost {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}
.tow-cta .tow-btn--ghost:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
}

/* =========================================================
   INFO CALLOUT
   ========================================================= */
.tow-callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--cloud);
  border: 1px solid var(--mist);
  border-left: 4px solid var(--signal);
  border-radius: var(--radius-md);
}
.tow-callout--alert  { border-left-color: var(--signal); background: var(--signal-bg); }
.tow-callout--trust  { border-left-color: var(--trust);  background: var(--trust-soft); }
.tow-callout--info   { border-left-color: var(--navy);   background: var(--cloud); }
.tow-callout--signal { border-left-color: var(--hi-vis); background: var(--hi-vis-bg); }
.tow-callout__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--signal);
  color: var(--paper);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tow-callout--trust .tow-callout__icon { background: var(--trust); }
.tow-callout--info .tow-callout__icon { background: var(--navy); color: var(--hi-vis); }
.tow-callout--signal .tow-callout__icon { background: var(--hi-vis); color: var(--navy); }
.tow-callout__icon .tow-icon { width: 20px; height: 20px; }
.tow-callout__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--navy);
}
.tow-callout__body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--steel);
}

/* =========================================================
   CONTACT CARD
   ========================================================= */
.tow-contact {
  padding: var(--space-9) 0;
  background: var(--cloud);
}
.tow-contact__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .tow-contact__inner { grid-template-columns: 1fr 1.4fr; gap: var(--space-7); }
}
.tow-contact__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  color: var(--navy);
}
.tow-contact__detail {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}
.tow-contact__detail-icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--hi-vis);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.tow-contact__detail-icon .tow-icon { width: 20px; height: 20px; }
.tow-contact__detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.tow-contact__detail-value {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.tow-contact__detail-value a { color: var(--ink); }
.tow-contact__detail-value a:hover { color: var(--signal); }
.tow-contact__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--mist);
  background: var(--cloud);
  box-shadow: var(--shadow-md);
}
.tow-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   SITE FOOTER — navy bg with cream/yellow accents
   ========================================================= */
.tow-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
}
.tow-footer__areas {
  background: var(--navy-2);
  padding: var(--space-7) 0;
  text-align: center;
  border-bottom: 1px solid var(--navy-3);
}
.tow-footer__areas-overline {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin-bottom: var(--space-3);
}
.tow-footer__areas-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: var(--space-5);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.tow-footer__areas-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.tow-footer__area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--navy);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--paper);
  transition: all var(--dur-fast) var(--ease-out);
}
.tow-footer__area-chip:hover {
  background: var(--hi-vis);
  border-color: var(--hi-vis);
  color: var(--navy);
  transform: translateY(-1px);
  text-decoration: none;
}
.tow-footer__area-icon { color: var(--hi-vis); display: inline-flex; }
.tow-footer__area-chip:hover .tow-footer__area-icon { color: var(--navy); }

.tow-footer__main { padding: var(--space-9) 0 var(--space-7); }
.tow-footer__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 640px)  { .tow-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .tow-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; } }

.tow-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: var(--space-3);
}
.tow-footer__brand-name strong { color: var(--hi-vis); font-weight: 800; }
.tow-footer__tagline {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  max-width: 320px;
}
.tow-footer__col-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi-vis);
  margin-bottom: var(--space-4);
}
.tow-footer__col ul { list-style: none; padding: 0; margin: 0; }
.tow-footer__col li { margin-bottom: var(--space-2); }
.tow-footer__col a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
}
.tow-footer__col a:hover { color: var(--paper); text-decoration: none; }

.tow-footer__find-us {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tow-footer__find-us .tow-footer__col-title { margin-bottom: 0; }
.tow-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--hi-vis);
  margin: 0;
}
.tow-footer__phone:hover { color: var(--hi-vis-deep); text-decoration: none; }
.tow-footer__address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.tow-footer__directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--hi-vis);
}
.tow-footer__directions:hover { color: var(--hi-vis-deep); text-decoration: none; }
.tow-footer__map {
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
}
.tow-footer__map iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.2) contrast(1.05);
}

.tow-footer__bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--container-pad) var(--space-7);
  border-top: 1px solid var(--navy-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
.tow-footer__copyright { margin: 0; }
.tow-footer__legal {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* ============== HERO IMAGE — offset accent block + review card ============== */
.tow-hero__visual {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
.tow-hero__visual::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 100%;
  height: 100%;
  background: var(--signal);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.tow-hero__visual-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 26px 50px -12px rgba(15, 23, 31, 0.55);
}
.tow-hero__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@media (max-width: 1023px) {
  .tow-hero__visual img { aspect-ratio: 16 / 11; }
}
.tow-hero__visual-review {
  position: absolute;
  left: -20px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 29, 37, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 13px 18px 13px 13px;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.55);
}
.tow-hero__visual-review-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--signal);
  color: #ffffff;
  flex-shrink: 0;
}
.tow-hero__visual-review-icon .tow-icon { width: 18px; height: 18px; }
.tow-hero__visual-review-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.tow-hero__visual-review-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
}
.tow-hero__visual-review-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 1023px) {
  .tow-hero__visual-review { left: 8px; bottom: 14px; }
  .tow-hero__visual::after { right: -10px; bottom: -10px; }
}

/* ============== FEATURE-SPLIT — polaroid stack + edge-stat designs ============== */
.tow-feature__visual--polaroid {
  position: relative;
  min-height: 460px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
.tow-feature__polaroid {
  position: absolute;
  margin: 0;
  background: #ffffff;
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 20px 44px -14px rgba(15, 23, 31, 0.5);
}
.tow-feature__polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.tow-feature__polaroid--1 {
  width: 64%;
  left: 0;
  bottom: 0;
  transform: rotate(-4deg);
  z-index: 2;
}
.tow-feature__polaroid--2 {
  width: 58%;
  right: 0;
  top: 0;
  transform: rotate(5deg);
  z-index: 1;
}
.tow-feature__polaroid-tag {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 3;
  background: var(--signal);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px -6px rgba(217, 119, 46, 0.5);
}
@media (max-width: 768px) {
  .tow-feature__visual--polaroid { min-height: 380px; }
}
.tow-feature__visual--edge {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
.tow-feature__edge-frame {
  position: relative;
  border-radius: 6px;
  border-top-left-radius: 60px;
  overflow: hidden;
  box-shadow: 0 26px 50px -14px rgba(15, 23, 31, 0.5);
}
.tow-feature__edge-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tow-feature__stat-strip {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  background: rgba(20, 29, 37, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 14px 6px;
}
.tow-feature__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.tow-feature__stat:last-child {
  border-right: 0;
}
.tow-feature__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--signal);
  line-height: 1;
}
.tow-feature__stat-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   Hub-hero specialist card
   Ported verbatim from demolition-v1/css/components.css so the hub-hero
   card branch has styling. Colours come from this niche's own system.css
   vars (--signal, --paper, --font-display), so it picks up the green palette.
   ============================================================ */

/* ============================================================
   Hub-hero specialist card (PW-style)
   ============================================================ */
.tow-hub-hero__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  align-self: start;
}

.tow-hub-hero__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--signal);
  color: var(--paper);
  margin-bottom: 8px;
}

.tow-hub-hero__card-icon .tow-icon {
  width: 32px;
  height: 32px;
}

.tow-hub-hero__card-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}

.tow-hub-hero__card-title {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--paper);
  margin: 0;
}

.tow-hub-hero__card-title em {
  color: var(--signal);
  font-style: normal;
}

.tow-hub-hero__card-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.tow-hub-hero__card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 8px;
}

.tow-hub-hero__card-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tow-hub-hero__card-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.tow-hub-hero__card-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--paper);
}


/* ============================================================
   Native contact-form radios
   Ported verbatim from demolition-v1/css/components.css so this niche's
   native form has styling. Replaces the LeadConnector iframe.
   ============================================================ */

/* --- Service radio group (enquiry form) ---
   Copied from the shipped dental-implants-v1 and window-v1 chassis, which
   ship a static form and therefore carry these rules. hvac-v1 does not,
   because it renders a LeadConnector iframe and the vendor supplies its own
   stylesheet. When the iframe was replaced with a static form here, the
   markup arrived without the CSS that draws it, so 17 radios stacked one per
   line as bare browser controls. The grid is what makes the form short. */
.tow-contact-form__radios {display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.tow-radio {display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--mist);border-radius:var(--radius-sm);background:var(--paper);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}

.tow-radio:hover {border-color:var(--signal);}

.tow-radio input {position:absolute;opacity:0;width:0;height:0;}

.tow-radio__mark {flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--slate);position:relative;transition:border-color var(--dur-fast) var(--ease-out);}

.tow-radio input:checked + .tow-radio__mark {border-color:var(--signal);}

.tow-radio input:checked + .tow-radio__mark::after {content:"";position:absolute;inset:3px;border-radius:50%;background:var(--signal);}

.tow-radio:has(input:checked) {border-color:var(--signal);background:var(--signal-bg);}

.tow-radio__text {font-size:.92rem;line-height:1.25;color:var(--ink);}

.tow-contact-form__req {color:#d64533;font-weight:700;}

.tow-contact-form__field--half {max-width:calc(50% - 8px);}

/* dental hardcodes the towing orange here and never updated it. This one is
   electrical's own --signal, #E8590C. */
.tow-radio input:focus-visible + .tow-radio__mark {box-shadow:0 0 0 3px rgba(232,89,12,.35);}