/* ================================================================
   ATLANTIC TRUCK & EQUIPMENT REPAIR LTD — style.css
   Full redesign: June 2026
   ================================================================ */

/* ---- Google Fonts -------------------------------------------- */
/* ---- Design tokens ------------------------------------------- */
:root {
  --emergency-h: 40px;
  /* Brand */
  --brand:#B9111B; --brand-dark:#8E0E15; --brand-light:#fdf0f0;
  --brand-muted:rgba(185,17,27,.08);
  /* Neutrals — warm not cold */
  --ink:#0F1117; --ink2:#1a2030;
  --text:#1f2937; --muted:#6B7280; --muted-light:#9ca3af;
  --light:#F9FAFB; --lighter:#ffffff; --border:#E5E7EB; --border-light:#F3F4F6;
  /* Layout */
  --container:1280px;
  /* Type */
  --ff-display:'Barlow Condensed',sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,sans-serif;
  /* Radius — rounder = friendlier */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px;
  /* Shadows */
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 12px 36px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);
  --shadow-brand:0 6px 20px rgba(185,17,27,.28);
}

/* ---- Reset ---------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:var(--text);font:16px/1.6 var(--ff-body);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:.875rem}
.muted{color:var(--muted)}
.link{color:var(--brand)}

/* ---- Layout -------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.row{display:flex;gap:12px} .wrap{flex-wrap:wrap} .center{align-items:center} .spread{justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.grid-main-sidebar{display:grid;grid-template-columns:2fr 1fr;gap:32px}
@media(max-width:1024px){.grid-2,.grid-3,.grid-4,.grid-main-sidebar{grid-template-columns:1fr}.sm-hide{display:none}}
.section{padding:clamp(48px,7vw,80px) 0}
.section.alt{background:var(--light)}
.section.compact{padding:clamp(24px,4vw,40px) 0}
.section.flush{padding:0}
.section-cta{padding:clamp(28px,4vw,40px) 0;background:var(--brand)}
.section.dark{background:var(--ink);color:#e5e7eb}

/* ---- Emergency bar ------------------------------------------ */
.emergency-bar{position:sticky;top:0;z-index:1000;background:var(--brand);color:#fff;padding:9px 0}
.emergency-bar strong{font-family:var(--ff-display);font-size:1.05rem;letter-spacing:.03em}
.emergency-bar .link-invert{color:#fff;font-weight:600}
.emergency-bar .btn-light{background:#fff;color:var(--brand);border-radius:22px;padding:5px 14px;font-weight:700;font-size:.875rem}

/* ---- Header -------------------------------------------------- */
/* ── Header & Nav ──────────────────────────────────────────────── */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--emergency-h);
  z-index: 900;
  box-shadow: 0 1px 0 var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,32px);
}

/* Brand / logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
  margin-right: 8px;
}
.logo-picture { display: block; line-height: 0; flex-shrink: 0; }
.logo-picture source { display: none; }
.logo-picture .logo { height: 40px; width: auto; display: block; max-width: 150px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-title { font-family: var(--ff-display); font-weight: 800; font-size: .95rem; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.brand-tag { font-size: 10px; color: var(--muted); font-weight: 500; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   NAV SYSTEM — clean rewrite
   Desktop: ≥ 1281px  →  horizontal inline nav
   Mobile:  ≤ 1280px  →  hamburger + full-screen drawer
   No !important, no visibility tricks, no ambiguity.
   ══════════════════════════════════════════════════════════════ */

/* Shared: main-nav is always a flex container */
.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/* Shared: hamburger button base */
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 12px;
  width: 48px;
  height: 48px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}

/* Shared: drawer-only elements hidden everywhere by default */
.nav-drawer-header { display: none; }
.nav-drawer-cta    { display: none; }

/* ── DESKTOP NAV (≥ 1281px) ─────────────────────────────────── */
@media (min-width: 1281px) {
  .nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 64px;
    flex-wrap: nowrap;
  }
  .nav-list > li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
  }
  .nav-list > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 11px;
    color: var(--text);
    font-weight: 600;
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .01em;
    position: relative;
    transition: color .15s;
  }
  /* Active underline */
  .nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 8px; right: 8px;
    height: 3px;
    background: var(--brand);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity .15s;
  }
  .nav-list > li > a:hover { color: var(--brand); }
  .nav-list > li > a:hover::after { opacity: .4; }
  .nav-list > li > a.active { color: var(--brand); font-weight: 700; }
  .nav-list > li > a.active::after { opacity: 1; }
  /* Services hover dropdown */
  .nav-list .has-sub { position: relative; }
  .nav-list .has-sub::before {
    content: '';
    position: absolute;
    top: calc(100% - 4px);
    left: 0; right: 0;
    height: 12px;
    z-index: 201;
  }
  .nav-list .sub {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 6px;
    list-style: none;
    min-width: 200px;
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    z-index: 200;
  }
  .nav-list .sub a {
    display: block;
    padding: 8px 12px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text);
    border-radius: 6px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .1s, color .1s;
  }
  .nav-list .sub a:hover { background: var(--light); color: var(--brand); }
  .nav-list .sub li { margin: 0; }
  .nav-list .has-sub:hover > .sub { display: block; }
  .nav-list .has-sub:hover > a { color: var(--brand); }
  .nav-chevron { font-size: .55rem; opacity: .5; margin-left: 2px; vertical-align: middle; }
  .has-sub:hover .nav-chevron { opacity: 1; }
  /* Desktop drawer items: zero size, invisible, non-interactive */
  .nav-list > li.nav-drawer-header,
  .nav-list > li.nav-drawer-cta {
    display: none;
    width: 0; height: 0;
    overflow: hidden;
    padding: 0; margin: 0; border: none;
  }
}

/* ── MOBILE NAV (≤ 1280px) ──────────────────────────────────── */
@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (max-width: 1280px) {
  /* Show hamburger, shrink header */
  .nav-toggle { display: flex; }
  .brand-tag  { display: none; }
  .header-cta { display: none; }
  .sm-hide, .md-hide { display: none; }
  .header-inner { height: 60px; padding: 0 14px; }
  .logo-picture .logo { height: 36px; }

  /* Hamburger → X */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav list: hidden by default, NEVER takes space */
  .nav-list {
    display: none;
    list-style: none;
    margin: 0; padding: 0;
    /* Drawer styles applied when shown */
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 1050;
    overflow-y: auto;
    gap: 0;
  }

  /* Open state: display + slide-in animation */
  .nav-list.open {
    display: flex;
    animation: drawerSlideIn .28s cubic-bezier(.4,0,.2,1) forwards;
  }

  /* Drawer header strip (red bar with close ✕) */
  .nav-list > li.nav-drawer-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 56px;
    background: var(--brand);
    color: #fff;
    padding: 0 20px;
    border-bottom: none;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .nav-drawer-close {
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
  }
  .nav-drawer-close:hover { background: rgba(255,255,255,.35); }

  /* Nav items */
  .nav-list > li {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border);
  }
  .nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 20px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-list > li > a::after { display: none; }
  .nav-list > li > a:hover  { background: var(--light); color: var(--brand); }
  .nav-list > li > a.active {
    color: var(--brand);
    background: #fdf2f2;
    border-left: 3px solid var(--brand);
    padding-left: 17px;
  }

  /* Services chevron pill */
  .nav-list .has-sub > a .nav-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    background: var(--light);
    border-radius: 50%;
    font-size: .7rem;
    opacity: 1;
    transition: transform .22s, background .15s;
    flex-shrink: 0;
  }
  .nav-list .has-sub.sub-open > a .nav-chevron {
    transform: rotate(180deg);
    background: #fde8e8;
    color: var(--brand);
  }

  /* Sub-menu: hidden, tap-to-reveal */
  .nav-list .sub {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    padding: 4px 0 8px;
    border-radius: 0;
    min-width: auto;
    background: #fafafa;
    list-style: none;
    margin: 0;
  }
  .nav-list .has-sub:hover > .sub   { display: none; }   /* disable hover on touch */
  .nav-list .has-sub.sub-open > .sub { display: block; }

  /* Sub-menu items */
  .nav-list .sub li  { border-bottom: none; }
  .nav-list .sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 32px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    min-height: 44px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-list .sub a::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--brand);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .nav-list .sub a:hover { background: var(--light); color: var(--brand); }

  /* Bottom CTA strip */
  .nav-list > li.nav-drawer-cta {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--border);
    border-bottom: none;
    background: #fafafa;
    gap: 10px;
  }
  .nav-list > li.nav-drawer-cta a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    min-height: auto;
    border: none;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-list > li.nav-drawer-cta .cta-call {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 3px 12px rgba(185,17,27,.25);
    border-left: none;
    padding-left: 18px;
  }
  .nav-list > li.nav-drawer-cta .cta-parts {
    background: var(--light);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: none;
    padding-left: 18px;
  }
  .nav-list > li.nav-drawer-cta a::after { display: none; }
  .nav-list > li.nav-drawer-cta a:hover { transform: none; }
}

/* CTA header button (desktop only) */
.header-cta { margin-left: auto; padding-left: 16px; flex-shrink: 0; }
.header-cta .btn { padding: 9px 18px; font-size: .8125rem; border-radius: 22px; white-space: nowrap; }

/* ---- Buttons ------------------------------------------------- */
.btn{display:inline-block;background:var(--brand);color:#fff;border-radius:28px;padding:13px 22px;font-weight:700;font-family:var(--ff-body);letter-spacing:.01em;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px rgba(185,17,27,.3)}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 22px rgba(185,17,27,.35)}
.btn-light{display:inline-block;background:#fff;color:var(--brand);border-radius:28px;padding:13px 22px;font-weight:700;border:1.5px solid var(--brand)}
.btn-light:hover{background:var(--brand-light);text-decoration:none}
.btn-outline-white{display:inline-block;background:transparent;color:#fff;border-radius:28px;padding:12px 22px;font-weight:700;border:2px solid rgba(255,255,255,.7)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);text-decoration:none}

/* ---- HERO — dark full-bleed ---------------------------------- */
.hero{
  position:relative;min-height:580px;display:flex;align-items:center;
  background:#0B0F1A url('/assets/img/hero-rotator.jpg') center/cover no-repeat;
  padding:80px 0;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,15,26,.88) 45%,rgba(11,15,26,.45) 100%);
}
.hero .container{position:relative;z-index:1}
.hero .kicker{color:#ef8080;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.82rem;margin-bottom:.5rem}
.hero h1{
  font-family:var(--ff-display);
  font-size:clamp(46px,6.5vw,84px);
  font-weight:900;line-height:1.0;
  color:#fff;margin:0 0 .35em;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero h1 span{color:var(--brand)}
.hero .lead{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:480px;margin-bottom:1.5rem}
.hero .kv-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
@media(max-width:1024px){.hero{min-height:420px;padding:60px 0}}
@media(max-width:700px){.hero{min-height:340px;padding:44px 0}}

/* ---- Stat bar ----------------------------------------------- */
.stat-bar{background:var(--brand);color:#fff;padding:0}
.stat-bar .container{display:grid;grid-template-columns:repeat(5,1fr)}
@media(max-width:1050px){.stat-bar .container{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.stat-bar .container{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stat-bar .container{grid-template-columns:1fr 1fr}}
.stat-item{padding:20px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.2)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--ff-display);font-size:clamp(28px,4vw,44px);font-weight:900;line-height:1;display:block}
.stat-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin-top:4px;display:block}

/* ---- Section titles ------------------------------------------ */
.section-title{font-family:var(--ff-display);font-size:clamp(28px,3.5vw,42px);font-weight:900;line-height:1.1;margin:0 0 .4em}
.section-title .accent{color:var(--brand)}
.section-lead{color:var(--muted);font-size:1.05rem;max-width:600px;margin-bottom:2rem}
.underline{display:inline-block;border-bottom:4px solid var(--brand);padding-bottom:4px}

/* ---- Cards --------------------------------------------------- */
.card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.kv{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.12)}

/* ---- Tiles / service cards ----------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{display:block;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#fff;transition:box-shadow .18s,transform .18s}
.tile:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px);text-decoration:none}
.tile img{width:100%;height:180px;object-fit:cover}
.tile .body{padding:14px 16px}
.tile .body strong{font-size:1.05rem;font-family:var(--ff-display);font-weight:800;display:block;margin-bottom:4px}

/* ---- Process steps ------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:24px 20px;text-align:center;position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-family:var(--ff-display);font-size:1.1rem;font-weight:900;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.step-icon{font-size:2rem;margin:8px 0 10px}
.step strong{font-family:var(--ff-display);font-size:1.1rem;font-weight:800;display:block;margin-bottom:4px}
.step p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---- Testimonial -------------------------------------------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.testimonials{grid-template-columns:1fr}}
.testimonial{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;position:relative}
.testimonial::before{content:'\201C';font-family:Georgia,serif;font-size:5rem;line-height:.8;color:var(--brand);opacity:.18;position:absolute;top:12px;left:16px}
.testimonial .stars{color:#F59E0B;font-size:1.1rem;margin-bottom:10px;letter-spacing:2px}
.testimonial blockquote{margin:0 0 14px;font-size:1.0rem;line-height:1.6;font-style:italic;color:var(--text)}
.testimonial .reviewer{font-weight:700;font-size:.875rem;color:var(--muted)}

/* ---- Fleet showcase ----------------------------------------- */
.fleet-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px}
.fleet-grid .main{grid-row:1/3;border-radius:var(--radius-lg);overflow:hidden}
.fleet-grid .main img{width:100%;height:100%;object-fit:cover;min-height:300px}
.fleet-grid .thumb{border-radius:var(--radius-md);overflow:hidden}
.fleet-grid .thumb img{width:100%;height:180px;object-fit:cover}
@media(max-width:768px){.fleet-grid{grid-template-columns:1fr;grid-template-rows:auto}.fleet-grid .main{grid-row:auto}}

/* ---- Cert / trust badges ------------------------------------ */
.cert-strip{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.cert-badge{display:flex;align-items:center;gap:10px;background:var(--light);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;font-size:.875rem;font-weight:600}
.cert-badge .icon{font-size:1.4rem}

/* ---- OEM logos ---------------------------------------------- */
.oem-logos{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.oem-logos img{height:32px;width:auto;opacity:.7;filter:grayscale(40%);transition:opacity .2s,filter .2s}
.oem-logos img:hover{opacity:1;filter:none}

/* ---- Kicker / badge ----------------------------------------- */
.kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.82rem}
.badge{display:inline-block;background:var(--ink);color:#fff;border-radius:14px;padding:4px 12px;font-size:.8rem;font-weight:600}
.badge-red{background:var(--brand);color:#fff}

/* ---- Checklist ---------------------------------------------- */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding:7px 0;border-bottom:1px solid var(--border);font-size:.9375rem}
.checklist li::before{content:'✓ ';color:var(--brand);font-weight:800}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:3px 0}
.list{padding-left:1.2em}
.list li{padding:3px 0}

/* ---- Forms --------------------------------------------------- */
label{display:block;margin:.5rem 0 .25rem;font-weight:600;font-size:.9rem}
input,textarea,select{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;transition:border-color .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand)}
textarea{min-height:120px}
form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.notice{background:#FEF3C7;border:1px solid #F59E0B;color:#92400E;border-radius:var(--radius-sm);padding:10px 14px}

/* ---- Footer -------------------------------------------------- */
.site-footer{background:var(--ink);color:#c9d1e0;margin-top:0;padding-top:56px}
.site-footer a{color:#c9d1e0}
.site-footer a:hover{color:#fff}
.footer-title{font-family:var(--ff-display);font-weight:800;font-size:1.05rem;margin-bottom:10px;color:#fff;letter-spacing:.02em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;margin-top:32px}

/* ---- Gallery ------------------------------------------------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1200px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.gallery-grid{grid-template-columns:1fr}}
.gallery-grid img{width:100%;height:250px;object-fit:cover;border-radius:var(--radius-md);box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s}
.gallery-grid img:hover{transform:scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.14)}

/* ---- News cards ---------------------------------------------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1200px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.news-grid{grid-template-columns:1fr}}
.news-card{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.news-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.09);transform:translateY(-2px)}
.news-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--light)}
.news-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.news-title{font-size:1rem;line-height:1.3;margin:0}
.news-title a{text-decoration:none;color:var(--text)}
.news-title a:hover{text-decoration:underline}
.news-summary{font-size:.8375rem;color:var(--muted);line-height:1.5;margin:0;flex:1}
.news-actions{display:flex;justify-content:flex-end;margin-top:4px;padding-top:8px;border-top:1px solid var(--border)}
.news-status{color:var(--muted);text-align:center;font-size:.875rem;margin-top:10px}
.news-load-more{display:block;margin:1.5rem auto 0}

/* ---- Chips / pills ------------------------------------------ */
.chip{display:inline-block;background:var(--light);color:#444;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.6}
.chip-amber{background:#fff2cc;color:#7a4a00;border:1px solid #ffe58f}
.chip-red{background:#fdecea;color:var(--brand)}

/* ---- Service area ETA --------------------------------------- */
.eta-card{padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,.05);background:#fff}
.eta-table{width:100%;border-collapse:collapse}
.eta-table th,.eta-table td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left}
.eta-table th{font-weight:700}
.eta-indicator{padding:10px 14px;border-radius:var(--radius-sm);font-weight:700;display:flex;align-items:center;gap:10px;border:1px solid transparent}
.eta-indicator .dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.eta-indicator.on{background:#e6f7ee;color:#0f5132;border-color:#b7ebc6}
.eta-indicator.on .dot{background:#2e7d32}
.eta-indicator.off{background:#fff2e2;color:#7a4a00;border-color:#ffd59a}
.eta-indicator.off .dot{background:#f57c00}

/* ---- Page note ---------------------------------------------- */
.page-note{margin:10px 0 20px}
.page-note a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--light);border:1px solid var(--border);font-size:.875rem;text-decoration:none;color:var(--text)}
.page-note a:hover{background:#edf0f4;text-decoration:underline}

/* ---- FB sidebar --------------------------------------------- */
.fb-posts{display:grid;gap:12px}
.fb-item{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start}
.fb-item img{width:96px;height:96px;object-fit:cover;border-radius:10px;background:var(--light)}
.fb-item .meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.fb-item p{margin:0}
@media(max-width:820px){.fb-item{grid-template-columns:72px 1fr}.fb-item img{width:72px;height:72px}}

/* ---- Skeleton loader ---------------------------------------- */
.skeleton{background:#f3f4f6;height:220px;border-radius:var(--radius-md)}

/* ---- Mobile action bar -------------------------------------- */
.action-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:10px 0;z-index:999}
.action-bar a{font-weight:700;color:var(--text);font-size:.9rem}

/* md-hide handled by the 1280px mobile block above */

/* Page hero banner — interior pages */
.page-hero-banner h1 span { color: #B9111B; }
.page-hero-banner .kicker { color: #ef8080; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .82rem; }

/* Section headings - apply Barlow globally to all h1/h2/h3 */
h1, h2, h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  line-height: 1.15;
}
h1 { font-size: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(22px, 3vw, 36px); }
h3 { font-size: clamp(18px, 2.5vw, 26px); }

/* Accent span in headings */
h1 span, h2 span { color: var(--brand); }

/* Footer links in dark context */
.site-footer .plain a, .site-footer a { color: #9ca3af; }
.site-footer .plain a:hover, .site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer address { color: #9ca3af; font-style: normal; font-size: .9rem; }

/* Consistent section padding for interior pages */

/* Section h2 underline accent consistent */
h2.underline { display: inline-block; border-bottom: 4px solid var(--brand); padding-bottom: 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }

/* Gallery page */
.gallery-grid a { display: block; overflow: hidden; border-radius: var(--radius-md); }
.gallery-grid a img { transition: transform .25s; }
.gallery-grid a:hover img { transform: scale(1.04); }

/* Notice block */
.notice { background: #FEF3C7; border: 1px solid #F59E0B; color: #92400E; border-radius: var(--radius-sm); padding: 12px 16px; font-size: .9rem; }

/* Requests page form sections */
.form-section { background: var(--light); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; }
.form-section h2 { margin-top: 0; }

/* Body text rhythm */
body { line-height: 1.75; }
p { max-width: 72ch; margin: 0 0 1rem; }
.container p { color: var(--text); }
section p { line-height: 1.75; }

/* Better section spacing */


/* Improve checklist readability */
.checklist li { padding: 8px 0; font-size: .9375rem; line-height: 1.6; }

/* Card body text */
.card p { color: var(--muted); line-height: 1.7; }

/* Form label sizing */
label { font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; }

/* ================================================================
   MODERN FRIENDLY REFRESH — June 2026
   ================================================================ */


/* ── Emergency bar modernised ───────────────────────────────────── */
.emergency-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ink);
  color: #e5e7eb;
  padding: 8px 0;
  font-size: .82rem;
}
.emergency-bar strong { font-family: var(--ff-display); font-size: 1rem; letter-spacing:.02em; color:#fff; }
.emergency-bar .link-invert { color: #fca5a5; font-weight: 600; }
.emergency-bar .link-invert:hover { color: #fff; text-decoration:none; }
.emergency-bar .btn-light {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 4px 14px;
  font-weight: 700;
  font-size: .78rem;
}

/* ── Card system — rounder, softer ─────────────────────────────── */
.card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ── Tile / service cards — friendlier ─────────────────────────── */
.tile {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tile img { height: 200px; }
.tile .body { padding: 18px 20px; }
.tile .body strong { font-size: 1.1rem; font-family: var(--ff-display); font-weight: 800; letter-spacing: .01em; }
.tile .body div { margin-top: 4px; color: var(--muted); font-size: .875rem; }

/* ── Step cards — numbered process ─────────────────────────────── */
.step {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.step::before {
  background: var(--brand);
  width: 36px; height: 36px;
  font-size: 1rem;
  box-shadow: var(--shadow-brand);
}
.step-icon { font-size: 2.2rem; margin: 8px 0 12px; }
.step strong { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 800; }
.step p { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-top: 6px; }

/* ── Testimonial cards ──────────────────────────────────────────── */
.testimonial {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  transition: box-shadow .2s, transform .2s;
}
.testimonial:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.testimonial blockquote { font-size: 1rem; line-height: 1.7; color: var(--text); }
.testimonial .reviewer { color: var(--muted); font-size: .875rem; }

/* ── Cert badges — pill style ───────────────────────────────────── */
.cert-badge {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, border-color .15s;
}
.cert-badge:hover { background: var(--brand-muted); border-color: var(--brand); color: var(--brand); }
.cert-badge .icon { font-size: 1.1rem; }

/* ── Stat bar — more breathing room ────────────────────────────── */
.stat-bar { background: var(--brand); }
.stat-item { padding: 22px 20px; }
.stat-num { font-size: clamp(30px, 4.5vw, 48px); letter-spacing: -.01em; }
.stat-label { font-size: .75rem; letter-spacing: .1em; opacity: .85; }

/* ── Section headers ────────────────────────────────────────────── */
.section-title { letter-spacing: -.01em; }
.section-lead { font-size: 1.05rem; color: var(--muted); line-height: 1.75; margin-bottom: 2.5rem; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .65rem;
}
.kicker::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--brand); border-radius: 2px; }

/* ── Buttons — rounder, more contrast ──────────────────────────── */
.btn {
  border-radius: 999px;
  padding: 12px 26px;
  font-size: .9375rem;
  box-shadow: var(--shadow-brand);
  letter-spacing: .01em;
}
.btn:hover { box-shadow: 0 10px 28px rgba(185,17,27,.4); transform: translateY(-2px); }
.btn-light {
  border-radius: 999px;
  padding: 11px 24px;
  font-size: .9375rem;
  border-width: 1.5px;
}
.btn-light:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-outline-white { border-radius: 999px; padding: 11px 24px; }

/* ── Form fields — modern ───────────────────────────────────────── */
input, textarea, select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  padding: .75rem 1rem;
  font-size: .9375rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(185,17,27,.1);
}

/* ── News cards ─────────────────────────────────────────────────── */
.news-card { border-radius: var(--radius-lg); border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* ── Footer modernised ──────────────────────────────────────────── */
.site-footer { background: var(--ink); padding-top: 64px; }
.footer-title { font-size: 1rem; letter-spacing: .02em; margin-bottom: 14px; }
.site-footer .plain { display: flex; flex-direction: column; gap: 6px; }
.site-footer .plain li a {
  color: #9ca3af;
  font-size: .875rem;
  transition: color .15s, padding-left .15s;
  display: inline-block;
}
.site-footer .plain li a:hover { color: #fff; padding-left: 4px; text-decoration: none; }
.footer-bottom { font-size: .8rem; color: #4b5563; }

/* ── Action bar modernised ──────────────────────────────────────── */
.action-bar {
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  gap: 3px;
  padding: 4px;
  text-decoration: none;
  transition: color .15s;
}
.action-bar a:first-child { color: var(--brand); }
.action-bar a:hover { color: var(--brand); }

/* ── Section alternating backgrounds ───────────────────────────── */
.section.alt { background: var(--light); }
.section.dark { background: var(--ink); color: #e5e7eb; }

/* ── KV image (content photo) ───────────────────────────────────── */
.kv { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }

/* ── Fleet grid ─────────────────────────────────────────────────── */
.fleet-grid .main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.fleet-grid .thumb { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }

/* ── Team section ───────────────────────────────────────────────── */
.team-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.team-photo img { width: 100%; display: block; }
.team-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(11,15,26,.9) 0%, transparent 100%);
  padding: 32px 24px 20px;
  color: #fff;
}
.team-caption strong { font-family: var(--ff-display); font-size: 1.3rem; font-weight: 800; display: block; margin-bottom: 4px; }
.team-caption span { font-size: .875rem; color: rgba(255,255,255,.75); }

/* ── Gallery ────────────────────────────────────────────────────── */
.gallery-grid { gap: 16px; }
.gallery-grid a { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.gallery-grid a:hover { box-shadow: var(--shadow-lg); }
.gallery-grid a img { border-radius: var(--radius-md); height: 240px; }

/* ── Scroll animations ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .tile, .step, .testimonial, .cert-badge, .news-card {
    animation: none;
  }
}

/* ── Focus styles for accessibility ────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .emergency-bar, .site-header, .action-bar, .hero { display: none; }

}




/* ── Staff grid ─────────────────────────────────────────────────────── */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}
.staff-card {
  background: var(--lighter);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px 16px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.staff-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.staff-name {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.2;
}
.staff-role {
  font-size: .775rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .staff-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
  .staff-card { padding: 18px 10px 16px; }
}

/* ── Lightbox ───────────────────────────────────────────────────── */
#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#lb-overlay.open { display: flex; }
#lb-inner { max-width: 90vw; max-height: 80vh; position: relative; }
#lb-img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; display: block; }
#lb-caption {
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  text-align: center;
  padding: 10px 0 0;
  max-width: 90vw;
}
#lb-close {
  position: fixed;
  top: 16px; right: 20px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
#lb-close:hover { background: rgba(255,255,255,.3); }
#lb-prev, #lb-next {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 48px; height: 64px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  line-height: 1;
}
#lb-prev { left: 12px; }
#lb-next { right: 12px; }
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.3); }
.lightbox-trigger { cursor: zoom-in; }

/* ── Gallery filters ────────────────────────────────────────────── */
.gallery-filter {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-weight: 600;
  font-size: .8375rem;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: all .15s;
  font-family: var(--ff-body);
}
.gallery-filter:hover { border-color: var(--brand); color: var(--brand); }
.gallery-filter.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Scroll animations ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .tile, .step, .testimonial, .staff-card, .cert-badge {
    will-change: opacity, transform;
  }
}

/* ── Fleet accounts page ────────────────────────────────────────── */
.fleet-feature { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--border); }
.fleet-feature:last-child { border-bottom: none; }
.fleet-feature-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-muted); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.fleet-feature-title { font-family: var(--ff-display); font-weight: 800; font-size: 1rem; margin-bottom: 3px; }
.fleet-feature-desc { font-size: .875rem; color: var(--muted); line-height: 1.5; }

/* ── @media print ───────────────────────────────────────────────── */
@media print {
  .emergency-bar, .site-header, .action-bar, .hero,
  .page-hero-banner, #lb-overlay, .nav-toggle,
  section[style*="background:#B9111B"] { display: none !important; }
  .section, .section.alt, .section.compact { padding: 12px 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .75rem; color: #666; }
  .btn, .btn-light { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .site-footer { background: none !important; color: #000 !important; border-top: 1px solid #ccc; padding: 12px 0 !important; }
  .footer-title { color: #000 !important; }
  .site-footer a { color: #000 !important; }
}

/* ── Request form tabs ──────────────────────────────────────────── */
.request-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.request-tab {
  padding: 10px 24px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1.5px solid transparent;
  border-bottom: none;
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  font-family: var(--ff-body);
  background: transparent;
  color: var(--muted);
  transition: all .15s;
  position: relative;
  bottom: -2px;
}
.request-tab:hover { color: var(--brand); }
.request-tab[style*="background:var(--brand)"],
.request-tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Form layout improvements ───────────────────────────────────── */
.form-section { padding: 4px 0; }
.form-section h2 {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 .25rem;
}
.card form { margin-top: 0; }
form label {
  display: block;
  margin-bottom: 1rem;
}
form .grid-2, form .grid-3 { margin-bottom: 0; }
form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 1rem;
}
form fieldset legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
form button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  font-size: 1rem;
  padding: 14px;
}
form input[type="file"] {
  padding: .5rem;
  font-size: .875rem;
  background: var(--light);
}
form input[type="checkbox"],
form input[type="radio"] {
  width: auto;
  margin-right: 6px;
  accent-color: var(--brand);
}
form label.small {
  font-size: .875rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: .5rem;
}

/* Logo sizing & fallback */
.logo { height: 44px; width: auto; display: block; max-width: 140px; object-fit: contain; }
.brand:has(.logo[style*="display:none"]) .brand-title { font-size: 1.1rem; }

/* WebP picture wrapper — must not double-render */
picture { display: block; line-height: 0; }
picture source { display: none; }
picture img { display: block; width: 100%; height: 100%; object-fit: inherit; }

/* Logo picture element */
.logo-picture { display:block; line-height:0; flex-shrink:0; }
.logo-picture source { display:none; }
.logo-picture .logo { height:44px; width:auto; display:block; max-width:160px; object-fit:contain; }

/* Emergency bar phone links — tap affordance */
.emergency-bar .link-invert {
  border-bottom: 1px dotted rgba(255,255,255,.4);
  padding-bottom: 1px;
  transition: border-color .15s;
}
.emergency-bar .link-invert:hover { border-bottom-color: rgba(255,255,255,.8); }
.emergency-bar .link-invert strong { font-weight: 700; letter-spacing: .01em; }

/* Interior page hero h1 — replaces inline styles */
.page-hero-h1 {
  font-family: var(--ff-display);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 900;
  line-height: 1.0;
  color: #fff;
  margin: 0 0 .4em;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
  letter-spacing: -.01em;
}
.page-hero-h1 span { color: var(--brand); }

/* ETA indicator dot pulse when shop is open */
@keyframes eta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.3); }
}
.eta-indicator.on .dot { animation: eta-pulse 2s ease-in-out infinite; }

/* ── Stage 2 typography refinements ────────────────────────────── */

/* Section leads — slightly larger, more breathing room */
.section-lead {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2.25rem;
  max-width: 60ch;
}

/* Stronger stat numbers */
.stat-num {
  font-size: clamp(32px, 5vw, 52px);
  font-family: var(--ff-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-label {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  font-weight: 600;
}

/* Step titles — heavier weight */
.step strong {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 800;
  display: block;
  margin-bottom: .35rem;
  color: var(--text);
}
.step p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Tile titles — heavier */
.tile .body strong {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  display: block;
  margin-bottom: 4px;
}

/* Footer link hover — slide effect */
.site-footer .plain a {
  display: inline-block;
  transition: color .15s, padding-left .15s;
}
.site-footer .plain a:hover {
  color: #fff;
  padding-left: 4px;
  text-decoration: none;
}

/* Quick action tiles on contact page */
.tile.small .body strong {
  font-size: .9rem;
  font-weight: 700;
}
.tile.small .body div {
  font-size: .775rem;
  color: var(--muted);
}

/* ETA table */
.eta-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.eta-table th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 2px solid var(--border);
}
.eta-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
.eta-table tr:last-child td { border-bottom: none; }
.eta-table tr:hover td { background: var(--light); }

/* News page headings */
.news-title { font-family: var(--ff-display); font-size: 1.0rem; font-weight: 800; line-height: 1.3; margin: .5rem 0; }
.news-title a { color: var(--text); text-decoration: none; }
.news-title a:hover { color: var(--brand); }

/* ── Stage 3: SVG icon styling ──────────────────────────────────── */
/* Step card SVG icons */
.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-muted);
  color: var(--brand);
  margin: 0 auto 14px;
  flex-shrink: 0;
}
.step-icon svg {
  stroke: var(--brand);
  display: block;
}

/* Cert badge SVG icons */
.cert-badge .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cert-badge .icon svg {
  stroke: currentColor;
  display: block;
}

/* Fleet feature SVG icons */
.fleet-feature-icon svg {
  stroke: var(--brand);
  display: block;
}

/* Step card hover — icon lifts */
.step:hover .step-icon {
  background: var(--brand);
  color: #fff;
}
.step:hover .step-icon svg {
  stroke: #fff;
}

/* Mobile action bar label sizing */
.action-bar a {
  font-size: .72rem;
  font-weight: 700;
  gap: 3px;
}

/* OEM logo strip — improve vertical centering */
.oem-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.oem-strip-inner img {
  height: 26px;
  width: auto;
  opacity: .75;
  filter: grayscale(20%);
  transition: opacity .2s, filter .2s;
}
.oem-strip-inner img:hover {
  opacity: 1;
  filter: none;
}

/* ================================================================
   UX AUDIT IMPROVEMENTS — June 2026
   ================================================================ */

/* ---- Skip to main content (accessibility) -------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: .875rem;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* ---- Visible focus rings (keyboard navigation) --------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Smooth scrolling ---------------------------------------- */
html { scroll-behavior: smooth; }

/* ---- Improved button active states --------------------------- */
.btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(185,17,27,.2); }
.btn-light:active { transform: translateY(0); }

/* ---- Tile hover — stronger lift on desktop ------------------- */
@media (hover: hover) {
  .tile:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
  }
}

/* ---- Improved form field UX ---------------------------------- */
input, textarea, select {
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(185,17,27,.12);
}
label { font-size: .875rem; font-weight: 600; color: var(--text); }
button[type="submit"].btn, input[type="submit"].btn {
  width: 100%;
  margin-top: 8px;
  font-size: 1rem;
  padding: 14px 24px;
  cursor: pointer;
  border: none;
}

/* ---- Page hero — tighter line-height on mobile --------------- */
.page-hero-h1 { line-height: 1.08; }
@media (max-width: 600px) {
  .page-hero-h1 { font-size: clamp(2rem, 8vw, 3rem); }
}

/* ---- Hero section — ensure text is always legible ------------ */
.hero h1 span { color: var(--brand); }

/* ---- Stat bar — numbers must be WHITE (stat-bar background is brand red) */
.stat-num { color: #fff; }
.stat-label { color: rgba(255,255,255,.8); }

/* ---- News card — consistent image height --------------------- */
.news-thumb { height: 200px; object-fit: cover; }

/* ---- Gallery grid — better aspect ratio on mobile ------------ */
@media (max-width: 700px) {
  .gallery-grid img { height: 200px; }
}

/* ---- Footer — Facebook link style ---------------------------- */
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* ---- Testimonial — tighter on mobile ------------------------- */
@media (max-width: 700px) {
  .testimonial blockquote { font-size: .9rem; }
}

/* ---- Contact tiles (quick-action tiles) — no image slot ------ */
.tile.small img { display: none; }
.tile.small .body { padding: 14px 16px; }
.tile.small .body strong { font-size: .9rem; }
.tile.small .body div { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* ---- Team photo caption -------------------------------------- */
.team-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.team-photo img { width: 100%; height: 380px; object-fit: cover; display: block; }
.team-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  display: flex; flex-direction: column; gap: 2px;
}
.team-caption strong { color: #fff; font-family: var(--ff-display); font-size: 1rem; font-weight: 800; }
.team-caption span { color: rgba(255,255,255,.75); font-size: .8rem; }

/* ---- Kicker — inline flex for icon+text ---------------------- */
.kicker { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Section title spacing ----------------------------------- */
.section-title { margin: .4rem 0 1rem; }
.section-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.5rem; }

/* ---- Checklist — spacing fix --------------------------------- */
.checklist li { padding: 8px 0; font-size: .9375rem; }

/* ---- CTA strip — prevent text wrapping on small phones ------- */
@media (max-width: 400px) {
  .section-cta .row { flex-direction: column; }
}

/* ---- Print — hide interactive elements ----------------------- */
@media print {
  .emergency-bar, .action-bar, .nav-toggle, .site-header nav { display: none; }
}

/* ================================================================
   FINAL BUG-FIX PASS — June 2026
   ================================================================ */

/* Fix: Footer hidden behind mobile action bar */
@media (max-width: 1280px) {
  body { padding-bottom: 72px; }
}

/* Fix: Emergency bar wrap on very small phones */
@media (max-width: 480px) {
  .emergency-bar .container {
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .emergency-bar .row { justify-content: center; }
  .emergency-bar strong { font-size: .82rem; }
  /* Update the CSS variable to match actual taller bar */
  :root { --emergency-h: 72px; }
}

/* Fix: Header sticky top recalculated for mobile bar height */
@media (max-width: 480px) {
  .site-header { top: 72px; }
}

/* Fix: Nav drawer z-index must be above action bar (999) */
@media (max-width: 1080px) {
  #navList { z-index: 1050; }
}

/* Fix: Action bar safe area for notched phones */
.action-bar {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* Fix: Prevent horizontal scroll on mobile */
html, body { overflow-x: hidden; max-width: 100%; }

/* Fix: Images in tiles must not overflow on mobile */
.tile img { max-width: 100%; }

/* Fix: Emergency bar Get Help Now button hidden on sm — ensure it's sm-hide */
.emergency-bar .btn-light.sm-hide { display: none; }
@media (min-width: 640px) {
  .emergency-bar .btn-light.sm-hide { display: inline-block; }
}

/* Fix: form grid-2 stacks on mobile */
@media (max-width: 560px) {
  form .grid-2 { grid-template-columns: 1fr; }
}

/* Fix: contact quick tiles wrapping correctly on mobile */
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}

/* Fix: page-hero-banner text contrast on very small screens */
@media (max-width: 400px) {
  .page-hero-h1 { font-size: 1.9rem; }
}

/* Fix: News grid single column on narrow mobile */
@media (max-width: 480px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* Fix: Stat bar wraps cleanly on small phones */
@media (max-width: 380px) {
  .stat-bar .container { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 26px; }
  .stat-label { font-size: .65rem; }
}

/* Fix: Hero h1 line-breaks cleanly on all sizes */
@media (max-width: 380px) {
  .hero h1 { font-size: 38px; }
  .hero .lead { font-size: .95rem; }
}

/* Fix: Fleet grid stacks on mobile */
@media (max-width: 560px) {
  .fleet-grid { grid-template-columns: 1fr; }
}

/* Fix: Steps grid 1-column on very small */
@media (max-width: 400px) {
  .steps { grid-template-columns: 1fr; }
}

/* Fix: Gallery filters wrap nicely */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5rem; }

/* Fix: Testimonials stack on mobile */
@media (max-width: 600px) {
  .testimonials { grid-template-columns: 1fr; gap: 16px; }
}

/* Fix: Footer 4-col → 2-col → 1-col responsively */
@media (max-width: 768px) {
  .site-footer .grid-4 { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .site-footer .grid-4 { grid-template-columns: 1fr; gap: 20px; }
}

/* Fix: section-cta buttons stack on mobile */
@media (max-width: 560px) {
  .section-cta .container { flex-direction: column; align-items: stretch; }
  .section-cta .row { flex-direction: column; }
}

/* Fix: cert-strip wraps on mobile */
@media (max-width: 480px) {
  .cert-strip { flex-direction: column; align-items: flex-start; }
}

/* Fix: IDs for main-content skip link */
#main-content { scroll-margin-top: 120px; }