/* ============================================================
   Smith Towing & Recovery — Static Site Stylesheet
   ============================================================
   Brand: Oswald headings, DM Sans body, maroon #8B0000, dark #111
   Matching the current homepage/about design: centered, spacious,
   white bordered cards, red-to-black gradient CTA band.
   ============================================================ */

:root {
  --maroon: #8B0000;
  --maroon-hover: #DC143C;
  --dark: #0e0e0e;
  --body: #666666;
  --border: #dddddd;
  --bg: #ebebeb;
  --white: #ffffff;
  --silver: #C0C0C0;
  --heading: Oswald, sans-serif;
  --body-font: 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body-font);
  color: var(--body);
  font-size: 17px;
  line-height: 2;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); text-decoration: none; font-weight: 600; }
a:hover { color: var(--maroon-hover); text-decoration: underline; }
strong { color: var(--dark); font-weight: 600; }

/* ============================================================
   NAV — fixed header
   ============================================================ */

.st-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Higher than the drawer so the hamburger stays visible + clickable
     when the drawer is open (otherwise the drawer's stacking context
     covers the button and there's no way to toggle it closed). */
  z-index: 1100;
  background: transparent;
}
.st-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.st-nav__brand {
  text-decoration: none;
  line-height: 1.15;
  position: relative;
  padding: 6px 16px;
  border-radius: 6px;
  transition: background 0.35s ease;
}
/* Soft radial fade glow behind the logo on hover/focus. */
.st-nav__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: radial-gradient(ellipse at center, rgba(139,0,0,0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
.st-nav__brand:hover::before,
.st-nav__brand:focus-visible::before { opacity: 1; }
.st-nav__brand:hover,
.st-nav__brand:focus-visible { text-decoration: none; }
.st-nav__name {
  font-family: var(--heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 2px;
  display: block;
  /* Same dark glow as hamburger bars so the logo stays readable on
     ANY page bg — dark hero or light form section. */
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.4);
}
.st-nav__sub {
  font-family: var(--heading);
  font-size: 10px;
  font-weight: 400;
  color: var(--maroon);
  letter-spacing: 4px;
  display: block;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.4);
}
/* Desktop links + phone are gone — hamburger-only nav on all sizes. */
.st-nav__links,
.st-nav__phone { display: none; }

/* Hamburger — 3 bars that morph into an X when aria-expanded is true. */
.st-nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 1003;    /* above the drawer so the X is clickable */
}
.st-nav__hamburger span {
  width: 36px;
  height: 3px;
  background: var(--white);
  display: block;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s ease, opacity 0.25s ease, background 0.2s ease;
  /* Dark glow shadow so the white bars stay visible on ANY background. */
  box-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.4);
}
.st-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.st-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.st-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Full-viewport drawer — slides in from the right with backdrop blur.
   Matches the live WP site's mh-overlay exactly. */
.st-nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(15, 15, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  padding: 80px 20px 40px;
  overflow-y: auto;
}
.st-nav__drawer[aria-hidden="false"] {
  transform: translateX(0);
  pointer-events: auto;
}

/* Nav links — staggered slide-in from right when drawer opens. */
.st-nav__drawer > a,
.st-nav__drawer .st-nav__drawer-svc-toggle {
  color: #fff;
  font-family: var(--heading);
  font-size: 24px;
  text-decoration: none;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 15px 0;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
}
.st-nav__drawer[aria-hidden="false"] > a:nth-child(1),
.st-nav__drawer[aria-hidden="false"] > .st-nav__drawer-svc-toggle:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
.st-nav__drawer[aria-hidden="false"] > *:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
.st-nav__drawer[aria-hidden="false"] > *:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.st-nav__drawer[aria-hidden="false"] > *:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.25s; }
.st-nav__drawer[aria-hidden="false"] > *:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.st-nav__drawer[aria-hidden="false"] > *:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: 0.35s; }
.st-nav__drawer[aria-hidden="false"] > *:nth-child(8) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }

.st-nav__drawer a:hover,
.st-nav__drawer .st-nav__drawer-svc-toggle:hover { color: #fff; }
.st-nav__drawer a.is-active { color: var(--maroon); }

/* SERVICES submenu — expandable */
.st-nav__drawer-arrow {
  font-size: 12px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.st-nav__drawer-svc-toggle.is-open .st-nav__drawer-arrow {
  transform: rotate(180deg);
}

.st-nav__drawer-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.st-nav__drawer-submenu.is-open { max-height: 500px; }

.st-nav__drawer-submenu a {
  font-family: var(--heading);
  font-size: 14px !important;
  letter-spacing: 2px !important;
  padding: 8px 0 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  text-decoration: none;
  text-transform: uppercase;
}
.st-nav__drawer-submenu a:hover { color: #fff !important; }

.st-nav__drawer-all {
  color: var(--maroon) !important;
  font-size: 12px !important;
  margin-top: 6px;
}

/* Gradient divider + call-out phone line at bottom */
.st-nav__drawer-div {
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--maroon), transparent);
  margin: 8px auto;
  opacity: 0;
  transition: opacity 0.3s ease 0.45s;
}
.st-nav__drawer[aria-hidden="false"] .st-nav__drawer-div { opacity: 1; }

.st-nav__drawer-call {
  color: var(--maroon) !important;
  font-weight: 700;
  font-size: 20px !important;
  margin-top: 20px;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.st-nav__drawer-call:hover { color: var(--maroon-hover) !important; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--maroon);
  background: var(--maroon);
  color: var(--white);
  transition: all 0.3s;
  cursor: pointer;
}
.btn:hover { background: var(--maroon-hover); border-color: var(--maroon-hover); color: var(--white); text-decoration: none; }

.btn--outline-white {
  background: var(--white);
  color: var(--maroon);
  border-color: var(--white);
  border-radius: 4px;
}
.btn--outline-white:hover { background: var(--bg); color: var(--dark); }

.btn--outline {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn--outline:hover { background: var(--dark); color: var(--white); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 80px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--dark) url(/img/hero-truck.jpg) center center / cover no-repeat;
  z-index: 0;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.hero__title {
  font-family: var(--heading);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 3px;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero__sub {
  font-size: 15px;
  color: #bbb;
  letter-spacing: 1px;
  margin-bottom: 32px;
}
.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   SECTIONS — centered, spacious
   ============================================================ */

.section {
  padding: 80px 24px;
  text-align: center;
  background: var(--bg);
}
.section--alt { background: var(--white); }

.inner { max-width: 1000px; margin: 0 auto; }
.inner--narrow { max-width: 720px; }
.inner--wide   { max-width: 1200px; }

.eyebrow {
  font-size: 11px;
  color: var(--maroon);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
  display: block;
}

h2 {
  font-family: var(--heading);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 24px;
}

h3 {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

p { margin-bottom: 18px; }

/* ============================================================
   ICON GRID (What Sets Us Apart)
   ============================================================ */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 36px;
}
@media (max-width: 700px) { .icon-grid { grid-template-columns: 1fr; gap: 28px; } }
.icon-item__title {
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.icon-item p { font-size: 14px; color: var(--body); margin: 0; }

/* ============================================================
   CARD GRID (services, FAQ, etc.)
   ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.card:hover { border-color: var(--maroon); box-shadow: 0 4px 16px rgba(0,0,0,0.08); text-decoration: none; }
.card__title {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.card__desc {
  font-size: 13px;
  color: var(--body);
  margin: 0;
}

/* ============================================================
   FAQ CARDS
   ============================================================ */

.faq-grid {
  max-width: 800px;
  margin: 32px auto 0;
  text-align: left;
}
.faq-card {
  background: var(--white);
  border: none;
  padding: 24px 28px;
  margin-bottom: 14px;
  border-radius: 8px;
}
.faq-card h4 {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.faq-card p { font-size: 15px; margin: 0; }

/* ============================================================
   CTA BAND — red-to-black gradient
   ============================================================ */

.cta-band {
  background: linear-gradient(180deg, var(--bg) 0%, var(--maroon) 120px, var(--maroon) 100%);
  color: var(--white);
  padding: 90px 24px;
  text-align: center;
}
.cta-band__inner { max-width: 700px; margin: 0 auto; }
.cta-band__title {
  font-family: var(--heading);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 3px;
  line-height: 1.2;
  margin-bottom: 28px;
}
.cta-band__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */

.st-footer {
  /* Top ~60px fades from maroon into the dark — blends seamlessly out of
     the CTA band's red so there's no hard edge at the handoff. */
  background: linear-gradient(180deg,
    var(--maroon) 0%,
    var(--dark) 80px,
    var(--dark) 100%);
  color: rgba(255,255,255,0.6);
  padding: 90px 24px 32px;
  font-size: 14px;
}
.st-footer a { color: rgba(255,255,255,0.6); font-weight: 400; text-decoration: none; }
.st-footer a:hover { color: var(--white); text-decoration: none; }

.st-footer__brand { text-align: center; margin-bottom: 48px; }
.st-footer__name {
  font-family: var(--heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 3px;
}
.st-footer__sub {
  font-family: var(--heading);
  font-size: 10px;
  color: var(--maroon);
  letter-spacing: 4px;
  margin-bottom: 12px;
}
.st-footer__phone a {
  font-family: var(--heading);
  font-size: 22px;
  color: var(--white);
  letter-spacing: 1px;
  font-weight: 600;
}

.st-footer__cols {
  max-width: 900px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 700px) { .st-footer__cols { grid-template-columns: 1fr; text-align: center; } }
.st-footer__col { display: flex; flex-direction: column; gap: 6px; }
.st-footer__heading {
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.st-footer__social { display: flex; gap: 14px; margin-top: 10px; align-items: center; }
@media (max-width: 700px) { .st-footer__social { justify-content: center; } }

.st-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.st-footer__social-link:hover {
  background: var(--maroon);
  color: var(--white);
  transform: translateY(-2px);
}
.st-footer__social-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.st-footer__bottom {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 2;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
  .section { padding: 60px 20px; }
  .hero { padding: 120px 20px 60px; min-height: 80vh; }
  .cta-band { padding: 70px 20px; }
}

/* ============================================================
   HERO (updated — full-bleed picture + overlay + trust line)
   ============================================================ */

.hero { min-height: 100vh; padding: 140px 24px 120px; }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Top-to-bottom: light dark overlay over the photo, deeper at center,
     then fades to the page bg color in the last ~12% so the hero blends
     seamlessly into the WSA section below (matches the CTA→footer
     handoff pattern used elsewhere). */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.55) 70%,
    rgba(235,235,235,0.0) 88%,
    rgb(235,235,235) 100%);
  z-index: 1;
}
.hero__content { z-index: 2; }

.hero__tagline {
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--silver);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.55;
  margin-bottom: 36px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.hero__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 28px;
}
.hero__or {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.4);
  display: block;
}
.hero__trust {
  font-family: var(--body-font);
  font-size: 12px;
  color: var(--silver);
  letter-spacing: 2px;
  margin: 0;
}
.hero__scroll-hint {
  /* Pinned to the bottom of the hero (not the viewport), so it scrolls
     out of view as the hero does. JS fades opacity over a short scroll
     window so the dissolve finishes before the element reaches the top
     of the viewport. */
  position: absolute;
  bottom: 15vh;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  font-family: var(--body-font);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  animation: scroll-bounce 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scroll-bounce {
  /* No opacity changes — JS drives opacity via scroll position.
     Setting opacity here would fight the inline style the handler sets. */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (max-width: 700px) {
  .hero__scroll-hint { display: none; }
}

.btn--hero {
  background: var(--white);
  color: var(--maroon);
  border-color: var(--white);
  border-radius: 4px;
  font-size: 17px;
  padding: 18px 44px;
  letter-spacing: 1.5px;
  min-width: 280px;
  text-align: center;
}
.btn--hero:hover {
  background: var(--maroon-hover);
  color: var(--white);
  border-color: var(--maroon-hover);
}
@media (max-width: 500px) {
  .btn--hero { min-width: 0; width: 100%; max-width: 320px; padding: 16px 24px; font-size: 15px; }
}

/* ============================================================
   WSA — What Sets Us Apart
   ============================================================ */

.section--wsa { background: var(--bg); padding-top: 100px; padding-bottom: 80px; }

.section__subtitle {
  font-size: 15px;
  color: var(--body);
  max-width: 620px;
  margin: 0 auto 40px;
}

.wsa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  text-align: center;
}
@media (max-width: 800px) { .wsa-grid { grid-template-columns: 1fr; gap: 36px; } }

.wsa-card { padding: 16px 12px; }
.wsa-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  color: var(--dark);
  transition: color 0.3s ease, transform 0.3s ease;
}
.wsa-card:hover .wsa-card__icon { color: var(--maroon); }
.wsa-card__icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wsa-card:hover .wsa-card__icon {
  transform: translateY(-3px);
}
.wsa-card h3 {
  margin-bottom: 10px;
  font-size: 17px;
  letter-spacing: 1.5px;
}
.wsa-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SERVICES — image card grid
   ============================================================ */

.section--svc { background: var(--bg); padding: 60px 24px 80px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0 32px;
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  display: block;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.35s ease,
              filter 0.35s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Cherry-button inspired hover: subtle scale + tilt + red glow ring
   so cards feel in the same visual language as the primary CTAs. */
.svc-card:hover,
.svc-card:focus-visible {
  transform: scale(1.04) rotate(-1.2deg);
  box-shadow: 0 14px 32px -6px rgba(224, 19, 41, 0.45),
              0 0 0 2px rgba(255, 90, 110, 0.3);
  filter: brightness(1.04);
  text-decoration: none;
  outline: none;
}
/* Alternate tilt direction for every other card so the grid doesn't
   feel like it's all pitching the same way. */
.svc-card:nth-child(even):hover,
.svc-card:nth-child(even):focus-visible {
  transform: scale(1.04) rotate(1.2deg);
}
.svc-card__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.svc-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.svc-card:hover .svc-card__img img { transform: scale(1.06); }
.svc-card__body { padding: 16px 20px 22px; text-align: center; }
.svc-card__body h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: var(--dark);
  line-height: 1.2;
}
.svc-card__body p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

.svc-cta { text-align: center; margin-top: 16px; }

.btn--3d {
  display: inline-block;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--white);
  text-decoration: none;
  background: var(--maroon-hover);
  border: none;
  border-radius: 10px;
  padding: 18px 44px;
  box-shadow: 0 10px 0 0 #a01030;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn--3d:hover { box-shadow: 0 6px 0 0 #a01030; transform: translateY(2px); color: var(--white); text-decoration: none; }
.btn--3d:active { box-shadow: 0 0 0 0 #a01030; transform: translateY(10px); }
.btn--3d-sm { padding: 14px 32px; font-size: 13px; box-shadow: 0 7px 0 0 #a01030; }
.btn--3d-sm:hover { box-shadow: 0 4px 0 0 #a01030; }

/* ============================================================
   PROOF — Stat counters
   ============================================================ */

.section--proof { background: var(--bg); padding: 80px 24px 24px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }

.stat { text-align: center; }
.stat__num {
  font-family: var(--heading);
  font-size: clamp(44px, 7vw, 60px);
  font-weight: 700;
  color: var(--maroon);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.stat__label {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: var(--silver);
  text-transform: uppercase;
}

/* ============================================================
   CHERRY-POP BUTTON — attention-grabbing CTA
   ------------------------------------------------------------
   Adapted from uiverse.io/ArnavK-09 "Premium" button (yellow
   gradient → dark interior). Recolored to cherry-red so it
   screams "click me" in the hero / primary conversion slots.
   ============================================================ */

.btn--cherry {
  display: inline-flex;
  position: relative;
  padding: 4px;                      /* gradient-ring thickness */
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #6e0b17 0%, #e01329 50%, #6e0b17 100%);
  text-decoration: none;
  cursor: pointer;
  filter: brightness(1.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, background 0.3s ease;
}
.btn--cherry:hover,
.btn--cherry:focus-visible {
  transform: scale(1.05) rotate(-1.5deg);
  box-shadow: 0 14px 32px -6px rgba(224, 19, 41, 0.6),
              0 0 0 2px rgba(255, 90, 110, 0.25);
  background: linear-gradient(135deg, #8b0f20 0%, #ff1a3c 55%, #8b0f20 100%);
  filter: brightness(1.15);
  text-decoration: none;
  outline: none;
}
/* Mirror variant — tilts right instead of left, so a pair of buttons
   flare apart on hover (used on the hero's REQUEST SERVICE ONLINE). */
.btn--cherry--right:hover,
.btn--cherry--right:focus-visible {
  transform: scale(1.05) rotate(1.5deg);
}

.btn--cherry__inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  /* Warm dark-burgundy tint instead of pitch black — lets the cherry-red
     feel through while keeping good contrast for the text. */
  background: linear-gradient(135deg, rgba(45,12,18,0.9), rgba(30,8,14,0.9));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  color: #ffffff;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.btn--cherry:hover .btn--cherry__inner,
.btn--cherry:focus-visible .btn--cherry__inner {
  background: linear-gradient(135deg, rgba(65,18,26,0.9), rgba(45,12,18,0.9));
  color: #ffffff;
}
.btn--cherry:hover .btn--cherry__inner,
.btn--cherry:focus-visible .btn--cherry__inner {
  color: #ff6b7c;
}

.btn--cherry__icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
  transition: stroke 0.3s ease, transform 0.3s ease;
}
/* Arrow variant — slides 4px to the right on hover/focus. */
.btn--cherry:hover .btn--cherry__icon--after,
.btn--cherry:focus-visible .btn--cherry__icon--after {
  transform: translateX(4px);
}

/* ============================================================
   SECTION DIVIDER — thin horizontal line with faded ends
   ============================================================ */

.section-divider {
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, var(--maroon) 20%, var(--maroon) 80%, transparent 100%);
  max-width: 900px;
  margin: 0 auto;
}
/* Darker variant for light-background sections, subtle for alt background */
.section-divider--inset { max-width: 600px; }

/* ============================================================
   REVIEWS + BLOG — Swiper carousels
   ============================================================ */

.section--reviews { background: var(--bg); padding: 12px 24px 80px; }
.section--blog    { background: var(--bg); padding: 80px 24px 100px; }

.section--reviews h2,
.section--blog h2 { margin-bottom: 36px; }

/* Outer frame holds the arrows OUTSIDE the Swiper so they can't
   overlap slide content (Swiper ignores CSS padding on the .swiper
   element, so putting arrows inside .swiper doesn't work). */
.review-swiper-frame,
.blog-swiper-frame {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 72px;
}
.review-swiper-frame .review-swiper,
.blog-swiper-frame   .blog-swiper {
  padding-bottom: 48px;        /* space for pagination dots */
  /* Allow ~120px of visible bleed on the sides (adjacent slide peek)
     then apply a gradient mask so the bleed fades to transparent
     instead of hard-cutting. Creates a soft "more content that way"
     cue without revealing the entire adjacent slide.
     Chrome 90+/FF 102+/Safari 15.4+. */
  overflow: clip !important;
  overflow-clip-margin: 120px;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.2) 3%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,0.2) 97%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.2) 3%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,0.2) 97%,
    transparent 100%);
}
@media (max-width: 700px) {
  /* On phones the carousel shows a single slide — peeking adjacent
     slides is less useful and the mask eats important pixels. Off. */
  .review-swiper-frame .review-swiper,
  .blog-swiper-frame   .blog-swiper {
    overflow-clip-margin: 20px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (max-width: 700px) {
  .review-swiper-frame,
  .blog-swiper-frame { padding: 0; }
}

/* Frame-anchored nav buttons (circle, maroon on white, outside the slides). */
.swiper-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: var(--white);
  color: var(--maroon);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease, color 0.2s ease;
}
.swiper-nav:hover { background: var(--maroon); color: var(--white); }
.swiper-nav--prev { left: 10px; }
.swiper-nav--next { right: 10px; }
@media (max-width: 700px) {
  .swiper-nav { display: none; }
}

.review-swiper .swiper-slide,
.blog-swiper   .swiper-slide {
  height: auto;
  display: flex;            /* makes cards stretch to equal height */
}

/* (Old in-Swiper arrows removed — now using frame-anchored .swiper-nav.) */

/* Swiper pagination dots. */
.review-swiper .swiper-pagination,
.blog-swiper   .swiper-pagination {
  bottom: 10px !important;
}
.review-swiper .swiper-pagination-bullet,
.blog-swiper   .swiper-pagination-bullet {
  background: #cccccc;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
}
.review-swiper .swiper-pagination-bullet-active,
.blog-swiper   .swiper-pagination-bullet-active {
  background: var(--maroon);
  opacity: 1;
}

/* Google-style review card — avatar + first name + date up top,
   star row, then review body. Mirrors the Google Maps review UI. */
.review-card {
  background: var(--white);
  border-radius: 12px;
  padding: 22px 24px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  background: #f0f0f0;
}
.review-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;           /* allows ellipsis if ever needed */
  flex: 1;
}
.review-card__name {
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
  line-height: 1.2;
}
.review-card__date {
  font-family: var(--body-font);
  font-size: 12px;
  color: #888;
  margin: 0;
  line-height: 1.2;
}
.review-card__source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
}

.review-card__stars {
  color: #f0a020;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0;
}

.review-card__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dark);
  margin: 0;
  /* Clamp overly-long reviews to ~6 lines so the carousel stays tidy. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* FEATURED post — the hero post above the carousel. 2-col layout on
   desktop (image left, copy right), stacks on mobile. Larger type,
   richer excerpt, same cherry-style hover as regular blog cards. */
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 780px;
  margin: 28px auto 40px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.35s ease,
              filter 0.35s ease;
}
.blog-featured:hover,
.blog-featured:focus-visible {
  transform: scale(1.02) rotate(-0.6deg);
  box-shadow: 0 16px 36px -6px rgba(224, 19, 41, 0.4),
              0 0 0 2px rgba(255, 90, 110, 0.3);
  filter: brightness(1.03);
  text-decoration: none;
  outline: none;
}
@media (max-width: 800px) {
  .blog-featured { grid-template-columns: 1fr; }
}
.blog-featured__img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.blog-featured__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.blog-featured:hover .blog-featured__img img { transform: scale(1.05); }
.blog-featured__body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 800px) { .blog-featured__body { padding: 22px 22px; } }
.blog-featured__tag {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--maroon);
  text-transform: uppercase;
}
.blog-featured__title {
  font-family: var(--heading);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--dark);
  margin: 0;
}
.blog-featured__excerpt {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}
.blog-featured__more {
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  letter-spacing: 0.5px;
  margin-top: 6px;
}

/* Subhead between featured + carousel */
.blog-subhead {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--maroon);
  text-align: center;
  margin: 8px 0 24px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.35s ease,
              filter 0.35s ease;
  height: 100%;
  width: 100%;
}
/* Same cherry-button-inspired hover as service cards. */
.blog-card:hover,
.blog-card:focus-visible {
  transform: scale(1.04) rotate(-1.2deg);
  box-shadow: 0 14px 32px -6px rgba(224, 19, 41, 0.45),
              0 0 0 2px rgba(255, 90, 110, 0.3);
  filter: brightness(1.04);
  text-decoration: none;
  outline: none;
}
/* Alternate tilt per slide, matching the service grid pattern. */
.blog-swiper .swiper-slide:nth-child(even) .blog-card:hover,
.blog-swiper .swiper-slide:nth-child(even) .blog-card:focus-visible {
  transform: scale(1.04) rotate(1.2deg);
}
.blog-card__img { aspect-ratio: 16 / 10; display: block; overflow: hidden; }
.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.blog-card__date {
  font-family: var(--body-font);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--maroon);
  text-transform: uppercase;
  font-weight: 600;
}
.blog-card__body h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.3;
  color: var(--dark);
}
.blog-card__body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  margin: 4px 0 10px;
}
.blog-card__more {
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  letter-spacing: 0.5px;
}

.reviews-footer {
  text-align: center;
  margin: 16px 0 0;
  font-size: 14px;
}
.reviews-footer a {
  color: var(--maroon);
  font-weight: 600;
  text-decoration: none;
}
.reviews-footer a:hover { text-decoration: underline; }

/* ============================================================
   ABOUT — 2-column image + text
   ============================================================ */

.section--about { background: var(--bg); padding: 100px 24px; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
}

/* Wider variant for about page facility/equipment sections. */
.about-grid--wide { max-width: 1200px; gap: 56px; }
@media (max-width: 900px) { .about-grid--wide { max-width: 560px; } }

/* Image on right instead of left. */
.about-grid--reverse .about-grid__img  { order: 2; }
.about-grid--reverse .about-grid__text { order: 1; }
@media (max-width: 900px) {
  .about-grid--reverse .about-grid__img  { order: 1; }
  .about-grid--reverse .about-grid__text { order: 2; }
}

/* Embedded Google Map in the grid. */
.about-grid__map iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Left-aligned text variant (equipment section has a list — left reads cleaner). */
.about-grid__text--left { text-align: left; align-items: flex-start; }
.about-grid__text--left .eyebrow,
.about-grid__text--left h2 { text-align: left; }
@media (max-width: 900px) {
  .about-grid__text--left { text-align: center; align-items: center; }
  .about-grid__text--left .eyebrow,
  .about-grid__text--left h2 { text-align: center; }
}

/* Check-list — CSS multi-column so items flow vertically down col 1
   then col 2 (each at its natural height) instead of a grid that
   stretches rows to match. Means the left side can have 5 short
   items while the right has 4 taller ones without weird gaps. */
.check-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  columns: 2;
  column-gap: 32px;
  width: 100%;
}
@media (max-width: 700px) { .check-list { columns: 1; } }
.check-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  break-inside: avoid;     /* keep each bullet on one column */
  margin-bottom: 10px;
}
.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--maroon);
  font-weight: 900;
  font-size: 14px;
}
.check-list--centered {
  max-width: 620px;
  margin: 20px auto 0;
  text-align: left;
}

.about-grid__img { width: 100%; }
.about-grid__img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.about-grid__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-grid__text .eyebrow { text-align: center; }
.about-grid__text h2 { text-align: center; margin-bottom: 20px; }
.about-grid__text p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--body);
  margin-bottom: 18px;
}
.about-grid__text .btn,
.about-grid__text .btn--cherry { margin-top: 16px; align-self: center; }

/* ============================================================
   SERVICE AREA — map embed
   ============================================================ */

.section--area { background: var(--bg); padding: 100px 24px 40px; }
.area-cities {
  font-size: 14px;
  line-height: 2.2;
  color: var(--silver);
  margin-bottom: 0;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.area-map {
  max-width: 900px;
  margin: 40px auto 60px;
  padding: 0 24px;
}
.area-map iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ============================================================
   FAQ — accordion using <details>
   ============================================================ */

.section--faq { background: var(--bg); padding: 80px 24px 100px; }

/* Modern accordion using grid-template-rows interpolation (Chrome 117+,
   Firefox 127+, Safari 17.4+). Animates smoothly between closed (0fr) and
   open (1fr) without JS-managed heights. Based on the widely-documented
   pattern by Kevin Powell / CSS-Tricks. */
.faq {
  max-width: 700px;
  margin: 36px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.faq-item {
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-item.is-open { border-color: var(--maroon); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 50px 18px 24px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
  background: var(--white);
  border: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: background 0.2s ease;
}
.faq-q:hover { background: #f8f8f8; }
.faq-q:focus-visible { outline: 2px solid var(--maroon); outline-offset: -2px; }

.faq-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--maroon);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.faq-icon::before { width: 14px; height: 2px; top: 9px; left: 3px; }
.faq-icon::after  { width: 2px; height: 14px; top: 3px; left: 9px; }
.faq-item.is-open .faq-icon::after { transform: rotate(90deg); }

/* Accordion panel. Starts at max-height: 0; JS sets an explicit
   scrollHeight pixel value when opening so the transition duration
   matches the actual content distance (no "phantom travel" from the
   old 600px fixed cap). After the open transition finishes, JS sets
   max-height to "none" so content reflows freely. */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.faq-a-inner {
  padding: 15px 24px 20px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.8;
  color: var(--body);
}

/* ============================================================
   PAYMENT LINE
   ============================================================ */

.section--pay { background: var(--bg); padding: 20px 24px 30px; text-align: center; }
.pay-line {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--silver);
  margin: 0;
}
@media (max-width: 500px) { .pay-line { font-size: 10px; letter-spacing: 1px; } }

/* ============================================================
   CTA BAND (refined)
   ============================================================ */

/* CTA band — fades in from page bg at the top (120px gradient) so there's
   no hard edge against the blog section above. Bottom stays maroon and the
   footer picks up the red→dark handoff. Content-top padding is intentionally
   much larger than content-bottom so the inner block sits visually centered
   between the 120px top fade and the ~80px footer blend below. */
.cta-band {
  background: linear-gradient(180deg,
    var(--bg) 0%,
    var(--maroon) 120px,
    var(--maroon) 100%);
  padding: 170px 24px 90px;
}
.cta-band__title {
  font-size: clamp(34px, 6vw, 52px);
  letter-spacing: 2px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.cta-band__sub {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 2px;
  text-transform: none;
  margin-bottom: 36px;
}
.cta-band__btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.cta-band__or {
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.3);
}

.btn--pill {
  border-radius: 50px;
  padding: 18px 50px;
  font-size: 16px;
  letter-spacing: 1.5px;
  font-weight: 700;
  min-width: 280px;
}
.btn--pill-filled {
  background: var(--white);
  color: var(--maroon);
  border-color: var(--white);
  font-size: 18px;
}
.btn--pill-filled:hover { background: var(--maroon-hover); color: var(--white); border-color: var(--maroon-hover); }
.btn--pill-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn--pill-outline:hover { background: var(--white); color: var(--maroon); border-color: var(--white); }

@media (max-width: 500px) {
  .btn--pill { min-width: 0; width: 100%; max-width: 320px; padding: 16px 30px; font-size: 15px; }
  .btn--pill-filled { font-size: 16px; }
}

/* ============================================================
   REQUEST SERVICE FORM — floating-label pattern adapted from
   ShotsandStyles (Madi's inquiry form) with Smith Towing's
   maroon + Oswald + DM Sans brand.
   ============================================================ */

.section--form { padding: 60px 24px 90px; }
/* Top-of-page variant — pushes content below the transparent fixed nav */
.section--form-top { padding-top: 140px; }

/* ============================================================
   REQUEST SERVICE — 2-col guidance + form layout
   Inspired by 4acestowing.com — tips + call fallback on the left,
   the form on the right. Stacks on mobile.
   ============================================================ */

.req-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .req-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ----- LEFT: guidance panel ----- */
.req-guide {
  text-align: left;
  position: sticky;
  top: 90px;          /* clears fixed transparent nav on desktop */
}
@media (max-width: 900px) { .req-guide { position: static; } }

.req-guide__title {
  font-family: var(--heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0 0 28px;
}

.req-guide__tips {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}
.req-guide__tip {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
}
.req-guide__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  background: rgba(139, 0, 0, 0.08);
  border-radius: 12px;
  flex-shrink: 0;
}
.req-guide__icon-svg { width: 40px; height: 40px; display: block; }

.req-guide__tip-title {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dark);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.req-guide__tip-body {
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}

/* Urgent call-to-phone box */
.req-guide__urgent {
  background: var(--white);
  border: 2px solid var(--maroon);
  border-radius: 12px;
  padding: 22px 22px 24px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.08);
}
.req-guide__urgent-title {
  font-family: var(--heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.req-guide__urgent-body {
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 14px;
}
.req-guide__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--body-font);
  font-size: 13px;
  color: var(--body);
  letter-spacing: 0.5px;
}
.req-guide__stars-glyphs {
  color: #f0a020;
  font-size: 16px;
  letter-spacing: 2px;
}

/* ----- RIGHT: form card ----- */
.req-form-wrap {
  min-width: 0;
}
.req-form-wrap__title {
  font-family: var(--heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 1px;
  line-height: 1;
  margin: 0 0 8px;
  text-align: center;
}
.req-form-wrap__sub {
  font-family: var(--body-font);
  font-size: 14.5px;
  color: var(--body);
  margin: 0 0 24px;
  text-align: center;
}
.req-form-wrap .inquiry-form { margin: 0; max-width: none; }

.inquiry-form {
  --form-gap: 22px;
  max-width: 720px;
  margin: 36px auto 0;
  padding: 44px 40px;
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(17, 17, 17, 0.05);
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
  width: 100%;
  text-align: left;
  position: relative;
}
@media (max-width: 700px) {
  .inquiry-form { padding: 30px 20px; --form-gap: 18px; border-radius: 12px; }
}

.inquiry-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--form-gap);
  width: 100%;
}
@media (min-width: 700px) {
  .inquiry-form__row { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.inquiry-form__field {
  position: relative;
  width: 100%;
  min-width: 0;
}
.inquiry-form__field--full { width: 100%; }

.req {
  color: var(--maroon);
  font-weight: 700;
  margin-left: 2px;
}

/* Floating label — positioned inside input, floats up on focus/valid */
.inquiry-form__label {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--body);
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  pointer-events: none;
  background: transparent;
  padding: 0;
  transition: all 0.25s ease;
  max-width: calc(100% - 36px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* Text inputs + textareas — minimal, brand-colored focus */
.inquiry-form__input {
  width: 100%;
  padding: 18px;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--dark);
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}
.inquiry-form__input::placeholder { color: transparent; }
.inquiry-form__input:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.12);
}

/* Float label when input is focused OR has content */
.inquiry-form__input:focus + .inquiry-form__label,
.inquiry-form__input:not(:placeholder-shown) + .inquiry-form__label {
  top: 0;
  left: 14px;
  transform: translateY(-50%) scale(0.82);
  background: var(--white);
  padding: 2px 10px;
  color: var(--maroon);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
}

/* Textarea — pinned label at top instead of middle */
.inquiry-form__textarea {
  min-height: 140px;
  padding: 22px 18px 16px;
  resize: vertical;
  line-height: 1.6;
}
.inquiry-form__field--textarea .inquiry-form__label {
  top: 22px;
  transform: translateY(0);
}
.inquiry-form__field--textarea .inquiry-form__textarea:focus + .inquiry-form__label,
.inquiry-form__field--textarea .inquiry-form__textarea:not(:placeholder-shown) + .inquiry-form__label {
  top: 0;
  transform: translateY(-50%) scale(0.82);
}

/* Select dropdown — label sits above (floating labels don't work with select) */
.inquiry-form__field--select .inquiry-form__label {
  position: static;
  transform: none;
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 600;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  padding: 0;
  background: transparent;
}
.inquiry-form__select-wrap {
  position: relative;
  width: 100%;
}
.inquiry-form__select-wrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--maroon);
  border-bottom: 1.5px solid var(--maroon);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
.inquiry-form__select {
  width: 100%;
  padding: 18px 44px 18px 18px;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--dark);
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.inquiry-form__select:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.12);
}
.inquiry-form__select option {
  background: var(--white);
  color: var(--dark);
  padding: 8px;
}

.cf-turnstile { margin: 4px 0; }

.inquiry-form__submit {
  align-self: center;
  margin-top: 8px;
}
.inquiry-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.inquiry-form__status {
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 0;
  min-height: 20px;
  text-align: center;
}
.inquiry-form__status--success {
  color: #0b6b2e;
  background: #e9f7ee;
  border-left: 4px solid #1a9b4b;
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: 500;
}
.inquiry-form__status--error {
  color: #8a0e1a;
  background: #fbe9eb;
  border-left: 4px solid var(--maroon);
  padding: 12px 16px;
  border-radius: 6px;
}
.inquiry-form__status--info {
  color: var(--body);
  font-style: italic;
}

/* Shorter hero variant for inner pages (request-service, etc) */
.hero--short { min-height: 60vh; padding-bottom: 80px; }

/* ============================================================
   BLOG POST PAGE
   ============================================================ */

.blog-post__meta {
  text-align: center;
  font-family: var(--body-font);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--body);
  margin: 0 0 14px;
}
.blog-post__category {
  color: var(--maroon);
  font-weight: 600;
}
.blog-post__title {
  font-family: var(--heading);
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dark);
  letter-spacing: 1px;
  text-align: center;
  margin: 0;
}
.blog-post__image-wrap {
  max-width: 1000px;
  margin: 30px auto 40px;
  padding: 0 24px;
}
.blog-post__image {
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.blog-post__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.blog-post__body {
  text-align: left;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--dark);
}
.blog-post__body h1,
.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4 {
  font-family: var(--heading);
  color: var(--dark);
  letter-spacing: 0.5px;
  margin: 36px 0 14px;
  line-height: 1.25;
}
.blog-post__body h2 {
  font-size: clamp(22px, 3vw, 28px);
  border-bottom: 2px solid rgba(139, 0, 0, 0.15);
  padding-bottom: 8px;
}
.blog-post__body h3 {
  font-size: 20px;
  color: var(--maroon);
}
.blog-post__body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
  margin: 0 0 18px;
  text-align: left;
}
.blog-post__body a {
  color: var(--maroon);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 0, 0, 0.3);
  transition: border-color 0.2s ease;
}
.blog-post__body a:hover { border-bottom-color: var(--maroon); }
.blog-post__body ul,
.blog-post__body ol {
  margin: 0 0 20px 22px;
  padding: 0;
  color: var(--body);
}
.blog-post__body li {
  margin-bottom: 10px;
  line-height: 1.75;
}
.blog-post__body strong { color: var(--dark); font-weight: 700; }
.blog-post__body code {
  background: rgba(139, 0, 0, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.92em;
}
.blog-post__body blockquote {
  border-left: 4px solid var(--maroon);
  padding: 6px 0 6px 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--body);
}
.blog-post__body hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 36px 0;
}

/* ============================================================
   CAREERS PAGE — role cards
   ============================================================ */

.careers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 900px;
  margin: 36px auto 0;
  text-align: left;
}
@media (max-width: 700px) {
  .careers-grid { grid-template-columns: 1fr; max-width: 520px; }
}

.careers-card {
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-left: 4px solid var(--maroon);
  border-radius: 8px;
  padding: 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-width 0.2s ease;
}
.careers-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-left-width: 6px;
}
.careers-card h3 {
  font-family: var(--heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dark);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.careers-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.section--contact-methods { padding: 80px 24px 60px; }

.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .contact-methods { grid-template-columns: 1fr; max-width: 500px; }
}

.contact-card {
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.35s ease,
              filter 0.35s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.contact-card:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 32px -6px rgba(224, 19, 41, 0.35),
              0 0 0 2px rgba(255, 90, 110, 0.25);
  filter: brightness(1.03);
}
.contact-card__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  color: var(--maroon);
  background: rgba(139, 0, 0, 0.08);
  border-radius: 50%;
}
.contact-card__icon-svg { width: 40px; height: 40px; }
.contact-card h3 {
  font-family: var(--heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
  color: var(--dark);
}
.contact-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 6px;
  max-width: 240px;
}
.contact-card .btn--cherry { margin-top: auto; }

/* Contact info list — compact 2-col (label left, value right) on all sizes. */
.contact-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin-top: 14px;
  align-items: baseline;
  width: 100%;
  max-width: 520px;
}
.contact-info__row {
  display: contents;   /* row children participate in the parent grid */
}
.contact-info__label {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--maroon);
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}
.contact-info__value {
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--dark);
  margin: 0;
}
.contact-info__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 0, 0, 0.3);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-info__value a:hover {
  color: var(--maroon);
  border-bottom-color: var(--maroon);
  text-decoration: none;
}
/* Mobile: stack label above value since the grid cells go narrow */
@media (max-width: 600px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: 4px 0;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-info__label { margin-top: 14px; }
  .contact-info__label:first-child { margin-top: 0; }
}

/* ============================================================
   CUSTOM DROPDOWN — button + animated panel below, same max-height
   animation as the FAQ accordion. Replaces native <select> so the
   open state stays in the page flow (pushes content down) and is
   fully brand-styleable.
   ============================================================ */

.dropdown { position: relative; }

.dropdown > .inquiry-form__label {
  position: static;
  transform: none;
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 600;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  padding: 0;
  background: transparent;
  pointer-events: auto;
}

.dropdown__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--dark);
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dropdown__toggle:hover  { border-color: #a0a0a0; }
.dropdown__toggle:focus-visible,
.dropdown.is-open .dropdown__toggle {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.12);
}

.dropdown__value--placeholder { color: #888; }
.dropdown__value { flex: 1; }

.dropdown__arrow {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--maroon);
  border-bottom: 1.5px solid var(--maroon);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  flex-shrink: 0;
}
.dropdown.is-open .dropdown__arrow {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Animated panel — absolutely positioned so it OVERLAYS fields below
   instead of pushing them down. Same max-height cubic-bezier as the FAQ. */
.dropdown__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  margin-top: 6px;
}
.dropdown__panel-inner {
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}

.dropdown__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--dark);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown__option:hover,
.dropdown__option:focus-visible { background: var(--bg); color: var(--dark); outline: none; }
.dropdown__option.is-selected  { background: var(--maroon); color: var(--white); }

/* ============================================================
   STICKY MOBILE TAP-TO-CALL BAR
   ============================================================ */

.sticky-call {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--maroon);
  padding: 12px 16px;
  display: none;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.3);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky-call.is-visible { transform: translateY(0); }

.sticky-call__inner {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 600px;
  margin: 0 auto;
}
.sticky-call__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 6px;
  min-height: 48px;
}
.sticky-call__btn--call {
  background: var(--white);
  color: var(--maroon);
}
.sticky-call__btn--call:hover { background: var(--white); color: var(--maroon); text-decoration: none; }
.sticky-call__btn--req {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.sticky-call__btn--req:hover { background: var(--white); color: var(--maroon); border-color: var(--white); text-decoration: none; }

@media (max-width: 900px) {
  .sticky-call { display: block; }
  body { padding-bottom: 68px; }
}