/* ============================================================
Las Vegas Concrete — 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, #C07F2B);
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, #C07F2B);
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, #C07F2B);
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, #C07F2B);
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, #C07F2B);
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, #C07F2B);
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, #C07F2B);
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, #C07F2B);
}
.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,");
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 Las Vegas Concrete 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, #C07F2B);
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,");
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, #21303C 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 · Las Vegas 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 .
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, #21303C 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;
}
/* ============== CONCRETE HERO IMAGE — offset orange 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);
}