/* ============================================
   Wazir Towing — Main Stylesheet
   Palette: red & black
   ============================================ */

:root {
  --black: #0e0f12;
  --black-2: #17181d;
  --black-3: #232429;
  --red: #d92632;
  --red-dark: #b01824;
  --red-lite: #ff5059;
  --white: #ffffff;
  --off-white: #f5f5f7;
  --grey: #9aa0ab;      /* for text on dark backgrounds only */
  --grey-dark: #5f6570; /* AA-compliant grey for light backgrounds */
  --text: #2a2b31;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(14, 15, 18, 0.12);
  --container: 1180px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */
}
[id] { scroll-margin-top: 96px; } /* keep anchor targets clear of the sticky header */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: clip; /* safety net against sideways scroll; unlike hidden it keeps sticky working */
}

/* Nothing may push the page wider than the viewport */
img, svg, video, table, pre { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--black);
  letter-spacing: 0.3px;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

/* Skip link: hidden until focused via keyboard */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* Honeypot field: invisible to humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--black);
  color: var(--grey);
  font-size: 13.5px;
  padding: 8px 0;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: var(--white); font-weight: 500; transition: color .2s; }
.topbar a:hover { color: var(--red-lite); }
.topbar .tb-group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar .tb-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar svg { width: 14px; height: 14px; fill: var(--red-lite); flex: none; }
.topbar .badge-247 {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .4px;
}

/* ---------- Header / Nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 14px rgba(14, 15, 18, 0.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 20px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 46px; height: 46px;
  background: var(--red);
  border-radius: 10px;
  display: grid; place-items: center;
  flex: none;
}
.logo-mark svg { width: 28px; height: 28px; fill: var(--white); }
.logo-text { line-height: 1.05; }
.logo-text strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.logo-text span {
  font-size: 11.5px;
  color: var(--grey-dark);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 600;
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-weight: 600;
  font-size: 15px;
  color: var(--black);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--red); border-color: var(--red); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
  font-family: "Inter", sans-serif;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,38,50,.35); }
.btn-red svg { fill: var(--white); }
.btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--black); transform: translateY(-2px); }
.btn-outline svg { fill: currentColor; }
.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: var(--black-3); transform: translateY(-2px); }
.btn-black svg { fill: var(--red-lite); }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 26px; height: 3px;
  background: var(--black);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(13,14,18,.96) 35%, rgba(13,14,18,.78) 65%, rgba(13,14,18,.6)),
    var(--black-2);
  color: var(--white);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -140px; top: -140px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(217,38,50,.2), transparent 65%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(34px, 5vw, 50px);
  align-items: center;
  /* vertical only — a `padding` shorthand here would wipe out the
     horizontal padding .container provides, letting text touch the screen edge */
  padding-top: clamp(48px, 7vw, 90px);
  padding-bottom: clamp(54px, 8vw, 100px);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,80,89,.12);
  border: 1px solid rgba(255,80,89,.45);
  color: var(--red-lite);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-kicker svg { width: 14px; height: 14px; fill: var(--red-lite); }
.hero h1 {
  color: var(--white);
  font-size: clamp(31px, 7vw, 64px);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.hero h1 em { font-style: normal; color: var(--red-lite); }
.hero p.lead {
  color: #c6cad2;
  font-size: clamp(15.5px, 1.6vw, 18px);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(30px, 4.5vw, 44px); }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 18px clamp(20px, 3.5vw, 40px);
}
.hero-stat strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  color: var(--red-lite);
  line-height: 1.1;
}
.hero-stat span { color: var(--grey); font-size: clamp(12px, 1.3vw, 13.5px); }

.hero-card {
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius);
  padding: clamp(22px, 3.2vw, 34px) clamp(18px, 3vw, 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.hero-card h2, .hero-card h3 { font-size: 26px; text-transform: uppercase; margin-bottom: 6px; }
.hero-card > p { color: #6b7078; font-size: 14.5px; margin-bottom: 20px; }
.hero-phone {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--off-white);
  border: 1px solid #e4e5e9;
  border-radius: 12px;
  padding: 14px clamp(12px, 2vw, 18px);
  margin-bottom: 12px;
  transition: border-color .2s, transform .15s;
  min-height: 68px; /* comfortable touch target */
}
.hero-phone:hover { border-color: var(--red); transform: translateY(-2px); }
.hero-phone .ico {
  width: 42px; height: 42px;
  background: var(--black);
  border-radius: 10px;
  display: grid; place-items: center;
  flex: none;
}
.hero-phone .ico svg { width: 20px; height: 20px; fill: var(--red-lite); }
.hero-phone small { display: block; color: var(--grey-dark); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.hero-phone strong { font-size: clamp(16px, 2.1vw, 19px); color: var(--black); white-space: nowrap; }
.hero-card .note {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #6b7078; margin-top: 16px;
}
.hero-card .note svg { width: 15px; height: 15px; fill: #16a34a; flex: none; }
.hero-card .sms-line {
  margin-top: 14px;
  font-size: 14px;
  color: #6b7078;
  text-align: center;
}
.hero-card .sms-line a { color: var(--red-dark); font-weight: 700; }
.hero-card .sms-line a:hover { text-decoration: underline; }

.hero-serving {
  display: block;
  color: #c6cad2;
  font-size: clamp(13px, 1.5vw, 14.5px);
  font-weight: 500;
  margin: -18px 0 30px;
  max-width: 560px;
}
.hero-serving strong { color: var(--red-lite); font-weight: 700; }

/* ---------- Sections ---------- */
section { padding: clamp(52px, 7.5vw, 90px) 0; }
.section-head { max-width: 640px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.section-head .kicker {
  color: var(--red-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(30px, 4vw, 42px); text-transform: uppercase; margin-bottom: 14px; }
.section-head p { color: #6b7078; }
.section-head.left { text-align: left; margin-left: 0; }

/* ---------- Services grid ---------- */
.bg-soft { background: var(--off-white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow);
  border-top: 4px solid transparent;
  transition: transform .2s, border-color .2s;
}
.service-card:hover { transform: translateY(-6px); border-top-color: var(--red); }
.service-card .ico {
  width: 58px; height: 58px;
  background: var(--black);
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.service-card .ico svg { width: 30px; height: 30px; fill: var(--red-lite); }
.service-card h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 10px; }
.service-card p { color: #6b7078; font-size: 15px; }

/* ---------- Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.why-visual {
  position: relative;
  background: linear-gradient(145deg, var(--black), var(--black-3));
  border-radius: 20px;
  min-height: 440px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.why-visual::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(217,38,50,.08) 0 22px, transparent 22px 44px);
}
.why-visual svg.truck-art { width: 68%; height: auto; position: relative; z-index: 1; }
.why-visual .years {
  position: absolute;
  bottom: 26px; right: 26px;
  background: var(--red);
  color: var(--white);
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.why-visual .years strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px; font-weight: 800; line-height: 1;
}
.why-visual .years span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.why-item { display: flex; gap: 18px; margin-bottom: 26px; }
.why-item .ico {
  width: 50px; height: 50px;
  background: rgba(217,38,50,.08);
  border: 1px solid rgba(217,38,50,.3);
  border-radius: 12px;
  display: grid; place-items: center;
  flex: none;
}
.why-item .ico svg { width: 24px; height: 24px; fill: var(--red-dark); }
.why-item h3 { font-size: 20px; text-transform: uppercase; margin-bottom: 4px; }
.why-item p { color: #6b7078; font-size: 15px; }

/* ---------- Steps ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: step;
}
.step-card {
  position: relative;
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 36px 28px 30px;
  color: var(--white);
}
.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -22px; left: 24px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--red-lite);
  background: var(--black);
  padding: 0 12px;
  border-radius: 10px;
  line-height: 1.1;
}
.step-card h3 { color: var(--white); font-size: 21px; text-transform: uppercase; margin-bottom: 10px; }
.step-card p { color: var(--grey); font-size: 15px; }
.dark-section { background: var(--black); }
.dark-section .section-head h2 { color: var(--white); }
.dark-section .section-head p { color: var(--grey); }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stars { color: var(--red); font-size: 18px; letter-spacing: 3px; }
.testi-card blockquote { color: #4b4f57; font-size: 15px; font-style: italic; flex: 1; }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-who .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: var(--red-lite);
  display: grid; place-items: center;
  font-weight: 800;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  flex: none;
}
.testi-who strong { display: block; color: var(--black); font-size: 15px; }
.testi-who span { color: var(--grey-dark); font-size: 13px; }

/* ---------- CTA strip ---------- */
.cta-strip {
  background: linear-gradient(100deg, var(--red-dark), var(--red));
  padding: 64px 0;
}
.cta-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-strip h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  text-transform: uppercase;
  color: var(--white);
}
.cta-strip p { color: rgba(255,255,255,.85); font-weight: 500; margin-top: 6px; }
.cta-strip .cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background:
    linear-gradient(100deg, rgba(13,14,18,.96), rgba(13,14,18,.84)),
    var(--black-2);
  color: var(--white);
  padding: 70px 0;
  text-align: center;
}
.page-hero h1 {
  color: var(--white);
  font-size: clamp(34px, 4.5vw, 52px);
  text-transform: uppercase;
}
.page-hero .crumbs { margin-top: 10px; color: var(--grey); font-size: 14px; font-weight: 500; }
.page-hero .crumbs a { color: var(--red-lite); }

/* ---------- Service detail rows ---------- */
.svc-detail {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 32px);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.svc-detail .ico {
  width: 74px; height: 74px;
  background: var(--black);
  border-radius: 16px;
  display: grid; place-items: center;
}
.svc-detail .ico svg { width: 38px; height: 38px; fill: var(--red-lite); }
.svc-detail h3 { font-size: 24px; text-transform: uppercase; margin-bottom: 8px; }
.svc-detail p { color: #6b7078; margin-bottom: 12px; }
.svc-detail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.svc-detail li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: #4b4f57;
}
.svc-detail li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 9px; height: 9px;
  background: var(--red);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-copy p { color: #4b4f57; margin-bottom: 16px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid #e4e5e9;
  padding: 30px 26px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.value-card .ico {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  background: var(--red);
  border-radius: 50%;
  display: grid; place-items: center;
}
.value-card .ico svg { width: 28px; height: 28px; fill: var(--white); }
.value-card h3 { font-size: 20px; text-transform: uppercase; margin-bottom: 8px; }
.value-card p { color: #6b7078; font-size: 14.5px; }

.coverage {
  background: var(--black-2);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 3.5vw, 40px);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.coverage h2, .coverage h3 { color: var(--white); font-size: 28px; text-transform: uppercase; margin-bottom: 10px; }
.coverage p { color: var(--grey); }
.coverage-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.coverage-tags span {
  background: rgba(255,80,89,.1);
  border: 1px solid rgba(255,80,89,.4);
  color: var(--red-lite);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
.contact-info-card {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 38px) clamp(18px, 3vw, 34px);
}
.contact-info-card h2, .contact-info-card h3 { color: var(--white); font-size: 26px; text-transform: uppercase; margin-bottom: 8px; }
.contact-info-card > p { color: var(--grey); font-size: 15px; margin-bottom: 28px; }
.ci-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.ci-item .ico {
  width: 46px; height: 46px;
  background: rgba(255,80,89,.12);
  border-radius: 12px;
  display: grid; place-items: center;
  flex: none;
}
.ci-item .ico svg { width: 22px; height: 22px; fill: var(--red-lite); }
.ci-item small { display: block; color: var(--grey); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin-bottom: 2px; }
.ci-item a, .ci-item strong {
  color: var(--white); font-weight: 600; display: block;
  font-size: clamp(14.5px, 1.7vw, 16px);
  overflow-wrap: anywhere; /* long emails must never widen the card */
}
.ci-item a:hover { color: var(--red-lite); }

.contact-form-card {
  background: var(--white);
  border: 1px solid #e4e5e9;
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 38px) clamp(18px, 3vw, 34px);
  box-shadow: var(--shadow);
}
.contact-form-card h2, .contact-form-card h3 { font-size: 26px; text-transform: uppercase; margin-bottom: 6px; }
.contact-form-card > p { color: #6b7078; font-size: 15px; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #dcdee3;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--off-white);
  transition: border-color .2s, background .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
  background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--grey-dark); margin-top: 14px; }
.form-status { margin-top: 16px; font-weight: 600; font-size: 14.5px; display: none; padding: 12px 16px; border-radius: 10px; }
.form-status.ok { display: block; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.form-status.err { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.map-note {
  margin-top: 40px;
  background: var(--off-white);
  border: 1px dashed #c9ccd2;
  border-radius: var(--radius);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #6b7078;
  font-size: 15px;
}
.map-note svg { width: 34px; height: 34px; fill: var(--red-dark); flex: none; }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: var(--grey); padding: clamp(44px, 6vw, 70px) 0 0; }
.footer .logo-text span { color: var(--grey); } /* dark bg: lighter grey passes there */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 3.5vw, 40px);
  padding-bottom: clamp(32px, 4.5vw, 50px);
}
.footer h4 {
  color: var(--white);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.footer p { font-size: 14.5px; }
.footer .f-about p { margin: 16px 0 20px; max-width: 300px; }
.footer li { margin-bottom: 11px; }
.footer li a { font-size: 14.5px; transition: color .2s, padding-left .2s; }
.footer li a:hover { color: var(--red-lite); padding-left: 5px; }
.footer .f-contact li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}
.footer .f-contact svg { width: 16px; height: 16px; fill: var(--red-lite); flex: none; margin-top: 4px; }
.footer .f-contact a:hover { color: var(--red-lite); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bottom a { color: var(--red-lite); }

/* ---------- Floating call button ---------- */
.float-call {
  position: fixed;
  right: clamp(14px, 3vw, 22px);
  bottom: calc(clamp(14px, 3vw, 22px) + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--red);
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(217,38,50,.5);
  animation: pulse 2.4s infinite;
}
.float-call svg { width: 26px; height: 26px; fill: var(--white); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(217,38,50,.55); }
  70% { box-shadow: 0 0 0 18px rgba(217,38,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,38,50,0); }
}

/* ---------- Reveal on scroll ----------
   Hidden state only applies when <html class="js"> (set by an inline head
   script), so all content stays visible if JavaScript fails to load. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-call { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .btn, .service-card, .value-card, .hero-phone { transition: none; }
  .hero-slide { transition: none; }
  .gallery-item img { transition: none; }
  .to-top { transition: none; }
}

/* ============================================
   PHOTOS: hero slider, galleries, lightbox
   ============================================ */

/* Slides sit behind the hero text; the ::after overlay keeps the
   headline readable no matter how bright the photo is. */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform: scale(1.02);
}
.hero-slide.active { opacity: 1; }

/* Real photos replace the illustrated night-city scene rather than
   stacking on top of it. */
.hero.has-slider .hero-scene { display: none; }
.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13,14,18,.94) 28%, rgba(13,14,18,.82) 58%, rgba(13,14,18,.66));
}

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 9px;
}
.hero-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: background .25s, width .25s;
}
.hero-dot:hover { background: rgba(255,255,255,.75); }
.hero-dot.active { background: var(--red); width: 26px; border-radius: 6px; }

/* ---- Galleries ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--black-2);
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform .45s ease;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.07); }
.gallery-item:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.86));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.93);
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
}
.lightbox-cap {
  color: #fff;
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  max-width: 700px;
}
.lightbox-close {
  position: absolute;
  top: 12px; right: 18px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
}
.lightbox-close:hover { color: var(--red-lite); }

/* Note: the scroll-progress bar, back-to-top button, button spinner and
   the staggered .reveal delay all live in css/animations.css. */

/* The horizontal slide-in offsets (.rv-left / .rv-right in animations.css)
   move a block 38px sideways until it scrolls into view. On wide screens the
   centred container has margin to spare, but once the container is nearly as
   wide as the window that 38px pushes full-width blocks past the right edge
   and the whole page scrolls sideways. Below 1280px, slide up instead.
   `html` prefix raises specificity above animations.css, which loads later. */
@media (max-width: 1279px) {
  html.js .reveal.rv-left,
  html.js .reveal.rv-right { transform: translateY(26px); }
  html.js .reveal.rv-left.visible,
  html.js .reveal.rv-right.visible { transform: none; }
}

/* Same problem for the hero card, which animates in from translateX(40px):
   on a narrow screen its right edge is clipped for the first second. Slide
   it up instead; the shorthand's duration/delay/fill are preserved. */
@media (max-width: 1279px) {
  html.js .hero-card { animation-name: wt-fade-up; }
}

/* The night-city SVG deliberately overflows its box (slice), so clip it. */
.hero-scene { overflow: hidden; }

/* ============================================
   RESPONSIVE
   Breakpoints, largest first:
   1400+  large desktop     1200  desktop
   1024   tablet landscape  900   tablet portrait
   768    large phone / nav switches to hamburger
   600    phone             400   small phone
   ============================================ */

/* ---- Large desktop: let the layout breathe ---- */
@media (min-width: 1400px) {
  :root { --container: 1280px; }
  .hero-inner { gap: 64px; }
}

/* ---- Desktop / small laptop ---- */
@media (max-width: 1200px) {
  .why-grid, .about-grid { gap: 40px; }
  .nav-links { gap: 22px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
}

/* ---- Tablet landscape ---- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .coverage { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- Tablet portrait: single-column hero, 2-up card grids ---- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 520px; }
  .hero p.lead, .hero-serving { max-width: none; }
  .services-grid, .steps-grid, .testi-grid, .values-grid { grid-template-columns: 1fr 1fr; }
  .why-grid, .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-visual { min-height: 300px; }
  .why-visual svg.truck-art { width: 58%; }
}

/* ---- Large phone: hamburger nav, stacked header ---- */
@media (max-width: 768px) {
  .nav { height: 68px; }
  [id] { scroll-margin-top: 84px; }

  .nav-links {
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 4vw, 24px) 18px;
    box-shadow: 0 14px 24px rgba(14,15,18,.12);
    display: none;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 15px 4px; border-bottom: 1px solid #eeeff2; }
  .hamburger { display: block; }
  .nav-cta .btn span.btn-label { display: none; }
  .nav-cta .btn { padding: 12px 15px; }

  .logo-mark { width: 40px; height: 40px; }
  .logo-mark svg { width: 24px; height: 24px; }
  .logo-text strong { font-size: 21px; }
  .logo-text span { font-size: 10px; letter-spacing: 1.8px; }

  /* Top bar: keep the primary number, drop the rest */
  .topbar { font-size: 13px; }
  .topbar .container { justify-content: center; gap: 10px; }
  .topbar .tb-group.tb-right { display: none; }
  .topbar .tb-group { gap: 14px; }
  .topbar .tb-item a { padding: 4px 0; display: inline-block; }

  .hero-card { max-width: none; }
  .why-visual svg.truck-art { width: 66%; }
  .map-note { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---- Phone: everything single column ---- */
@media (max-width: 600px) {
  .services-grid, .steps-grid, .testi-grid, .values-grid, .form-row {
    grid-template-columns: 1fr;
  }
  .steps-grid { gap: 38px; }
  .svc-detail { grid-template-columns: 1fr; gap: 18px; }
  .svc-detail ul { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer .f-about p { max-width: none; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-actions .btn { width: 100%; }

  .cta-strip .container { flex-direction: column; align-items: stretch; }
  .cta-strip .cta-btns { flex-direction: column; }
  .cta-strip .cta-btns .btn { width: 100%; }

  .why-visual { min-height: 240px; }
  .why-visual .years { bottom: 16px; right: 16px; padding: 12px 16px; }
  .why-visual .years strong { font-size: 28px; }

  .coverage-tags span { font-size: 12.5px; padding: 6px 13px; }
  .contact-form-card button[type="submit"] { padding: 15px; }
  .hero-kicker { font-size: 12px; letter-spacing: 1.2px; padding: 6px 14px; }

  /* Second phone number in the top bar is redundant on a small screen.
     Sibling combinator, not nth-of-type — the badge is also a <span>,
     so nth-of-type(2) would hide the PRIMARY number instead. */
  .topbar .tb-group .tb-item ~ .tb-item { display: none; }
}

/* ---- Small phone (iPhone SE and similar) ---- */
@media (max-width: 400px) {
  .topbar .badge-247 { font-size: 11.5px; padding: 2px 8px; }
  .nav { height: 62px; gap: 10px; }
  .nav-links { top: 62px; max-height: calc(100vh - 62px); }
  [id] { scroll-margin-top: 78px; }
  .logo-text strong { font-size: 19px; }
  .logo-text span { display: none; }
  .nav-cta .btn { padding: 11px 13px; }

  .hero-stats { gap: 14px; }
  .hero-phone { gap: 11px; }
  .hero-phone .ico { width: 38px; height: 38px; }
  .hero-phone strong { font-size: 15.5px; }

  .float-call { width: 54px; height: 54px; }
  .float-call svg { width: 23px; height: 23px; }

  .step-card::before { font-size: 38px; top: -20px; left: 18px; }
  .value-card .ico { width: 54px; height: 54px; }
  .btn { font-size: 14.5px; padding: 12px 20px; }
  .hero-kicker { font-size: 10.8px; letter-spacing: .7px; padding: 6px 12px; gap: 7px; }
}

/* ---- Phone in landscape: reclaim vertical space ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-inner { padding-top: 36px; padding-bottom: 40px; }
  section { padding: 44px 0; }
  .page-hero { padding: 40px 0; }
  .why-visual { min-height: 220px; }
  .nav-links { max-height: calc(100vh - 68px); overflow-y: auto; }
}

/* ---- Coarse pointers: enforce comfortable tap targets ---- */
@media (pointer: coarse) {
  .nav-links a, .footer li a, .topbar a { min-height: 44px; display: flex; align-items: center; }
  .footer li a { display: inline-flex; }
  .btn { min-height: 46px; }
}

/* ---- Print ---- */
@media print {
  .topbar, .header, .float-call, .cta-strip, .skip-link, .hero-actions { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .hero, .page-hero, .footer, .dark-section { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1, .footer h4, .dark-section h2 { color: #000 !important; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
  section { padding: 12pt 0; }
}