@charset "utf-8";
/* ==========================================================================
   Lift Tech Forklift Solutions — forklifthirecastleford.co.uk
   Mobile-first stylesheet. Brand palette taken from the company's own site:
   red #f42223, dark red #d80b0c, navy #051136.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --red: #f42223;
  --red-dark: #d80b0c;
  --red-deep: #770606;
  --navy: #051136;
  --navy-soft: #101c44;

  --ink: #111827;
  --body: #414b5c;
  --muted: #6b7688;

  --line: #e2e6ee;
  --line-soft: #eef1f6;
  --soft: #f5f7fa;
  --soft-2: #eff2f7;
  --white: #ffffff;

  --head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 25, 46, .06), 0 2px 8px rgba(16, 25, 46, .05);
  --shadow: 0 4px 12px rgba(16, 25, 46, .07), 0 12px 30px rgba(16, 25, 46, .07);
  --shadow-lg: 0 10px 24px rgba(16, 25, 46, .09), 0 24px 60px rgba(16, 25, 46, .11);

  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(1.85rem, 6.2vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.3rem); font-weight: 800; }
h3 { font-size: clamp(1.12rem, 3vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red); }

strong, b { font-weight: 700; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 18px;
  font: 700 15px/1 var(--head); border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap--narrow { max-width: 840px; }

.section { padding: 54px 0; }
.section--tight { padding: 40px 0; }
.section--soft { background: var(--soft); }
.section--line { border-top: 1px solid var(--line); }

.section--dark {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(244, 34, 35, .22), transparent 62%),
    var(--navy);
  color: #c9d2e6;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
/* Buttons are excluded: this selector outranks the .btn--* colour rules, and
   without the :not() it repainted .btn--white's navy label white-on-white. */
.section--dark a:not(.btn) { color: #fff; }
/* The base `strong` colour is near-black, which vanishes on the navy. */
.section--dark strong, .section--dark b,
.hero strong, .hero b { color: #fff; }

.head { max-width: 760px; margin-bottom: 30px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head p { color: var(--muted); font-size: 1.04rem; margin-bottom: 0; }
.section--dark .head p { color: #b3bed6; }

.eyebrow {
  display: inline-block;
  font: 800 .72rem/1 var(--head);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin: 0 0 14px;
}
.section--dark .eyebrow { color: #ff9a9a; }

.lead { font-size: 1.1rem; color: var(--body); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 22px; }
.mt-5 { margin-top: 30px; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px;
  font: 700 .98rem/1.15 var(--head);
  letter-spacing: .01em;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .16s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { flex: none; }

.btn--red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(244, 34, 35, .28); }
.btn--red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: #fff; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--white); }

.btn--white { background: #fff; border-color: #fff; color: var(--navy); }
.btn--white:hover { background: #f0f3f8; border-color: #f0f3f8; color: var(--navy); }

.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.btn--lg { padding: 16px 30px; font-size: 1.04rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy);
  color: #b9c4dc;
  font-size: .84rem;
  display: none;
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: #ffb3b3; text-decoration: underline; }
.topbar__list { display: flex; align-items: center; gap: 22px; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 10px; row-gap: 0; min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: 118px; height: auto; }

.header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Calling is handled by the sticky bar on mobile, so this only appears
   from 900px up — the header row has no width to spare below that. */
.header-call {
  display: none; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font: 700 .9rem/1 var(--head);
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.header-call:hover { border-color: var(--ink); color: var(--ink); }

.header-cta { padding: 10px 12px; font-size: .78rem; white-space: nowrap; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: var(--navy); border: 0; border-radius: 10px; cursor: pointer; padding: 0;
}
.nav-toggle span {
  position: relative; display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px; transition: background .18s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: #fff; border-radius: 2px; transition: transform .22s ease, top .22s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer: takes a full row of its own below the logo bar, so it
   never competes with the brand and CTA for horizontal space.
   Height animation keeps it usable with JS off (see .no-js). */
.site-nav {
  display: block;
  flex: 0 0 100%; order: 3;
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  border-top: 0 solid var(--line);
}
.site-nav.is-open { max-height: 520px; border-top-width: 1px; }
.site-nav ul { list-style: none; margin: 0; padding: 8px 0 16px; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: 13px 20px;
  font: 600 1rem/1.3 var(--head);
  color: var(--ink); text-decoration: none;
  border-radius: 8px;
}
.site-nav a:hover { background: var(--soft); color: var(--red-dark); }
.site-nav a[aria-current="page"] { color: var(--red-dark); }
.site-nav .nav-cta { display: none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--navy); color: #cbd4e8; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 17, 54, .82) 0%, rgba(5, 17, 54, .9) 55%, rgba(5, 17, 54, .97) 100%),
    radial-gradient(760px 380px at 82% 10%, rgba(244, 34, 35, .3), transparent 62%);
}
.hero__in { position: relative; z-index: 1; padding: 46px 0 44px; }
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero h1 em { font-style: normal; color: #ff5a5b; }
.hero__lead { font-size: 1.06rem; line-height: 1.6; color: #c3cde4; max-width: 620px; margin-bottom: 26px; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.hero__badges li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font: 600 .8rem/1 var(--head);
  color: #e7ecf7;
}
.hero__badges svg { color: #ff5a5b; flex: none; }

.hero__note {
  margin: 20px 0 0; font-size: .9rem; color: #9fabc7;
  display: flex; align-items: center; gap: 8px;
}
.hero__note svg { flex: none; color: #ff5a5b; }

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */
.trust { background: var(--soft); border-bottom: 1px solid var(--line); }
.trust ul {
  list-style: none; margin: 0; padding: 20px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px;
}
.trust li { position: relative; padding-left: 30px; font: 600 .88rem/1.35 var(--head); color: var(--ink); }
.trust li svg { position: absolute; left: 0; top: 1px; color: var(--red); }

/* --------------------------------------------------------------------------
   8. Cards / grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; gap: 14px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3dae6; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--body); font-size: .97rem; }
.card p:last-child { margin-bottom: 0; }

.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(244, 34, 35, .1);
  color: var(--red-dark);
  margin-bottom: 16px;
}
.card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font: 700 .92rem/1 var(--head);
  color: var(--red-dark); text-decoration: none;
}
.card__link:hover { gap: 10px; color: var(--red); }

/* Fleet card: photo + spec table. */
.fleet { display: grid; gap: 20px; grid-template-columns: 1fr; }
.fleet__item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.fleet__img { position: relative; background: var(--soft-2); }
.fleet__img img { width: 100%; height: 210px; object-fit: cover; }
.fleet__tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--red); color: #fff;
  font: 800 .68rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 999px;
}
.fleet__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.fleet__body h3 { margin-bottom: .4em; }
.fleet__body > p { font-size: .96rem; }

.spec { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.spec div {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.spec dt { font-size: .85rem; color: var(--muted); }
.spec dd { margin: 0; font: 700 .88rem/1.4 var(--head); color: var(--ink); text-align: right; }

/* --------------------------------------------------------------------------
   9. Lists
   -------------------------------------------------------------------------- */
/* Absolute-positioned markers, so an inline <strong> label inside an <li>
   still flows on the same line as the text that follows it. */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 0 0 11px 32px; font-size: .98rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(244, 34, 35, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d80b0c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.ticks li:last-child { padding-bottom: 0; }
.section--dark .ticks li { color: #c9d2e6; }
.section--dark .ticks li::before {
  background-color: rgba(255, 255, 255, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.ticks--2 { columns: 1; }

/* Numbered process steps. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 16px; }
.steps li {
  position: relative; counter-increment: step;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 22px 68px;
  box-shadow: var(--shadow-sm);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 20px; top: 20px;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--red); color: #fff;
  font: 800 .84rem/34px var(--head); text-align: center;
}
.steps h3 { font-size: 1.06rem; margin-bottom: .3em; }
.steps p { font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Split media blocks
   -------------------------------------------------------------------------- */
.split { display: grid; gap: 26px; align-items: center; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.split__media--tall img { max-height: 460px; object-fit: cover; }

/* --------------------------------------------------------------------------
   11. FAQs
   -------------------------------------------------------------------------- */
.faqs { display: grid; gap: 12px; }
.faq {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq[open] { border-color: #d3dae6; box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 54px 18px 20px;
  position: relative;
  font: 700 1rem/1.45 var(--head);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  transition: transform .2s ease;
}
.faq[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--red-dark); }
.faq__a { padding: 0 20px 20px; }
.faq__a p { font-size: .97rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Coverage
   -------------------------------------------------------------------------- */
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.areas li {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: 600 .88rem/1.3 var(--head); color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.areas li svg { flex: none; color: var(--red); }
.section--soft .areas li { background: #fff; }

.area-group { margin-bottom: 26px; }
.area-group:last-child { margin-bottom: 0; }
.area-group h3 { margin-bottom: .5em; }
.area-group p { font-size: .97rem; }

/* --------------------------------------------------------------------------
   13. Map
   -------------------------------------------------------------------------- */
.map {
  position: relative; min-height: 320px;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--soft-2);
}
.map iframe { position: relative; z-index: 1; display: block; width: 100%; height: 320px; border: 0; }
/* Sits behind the iframe, so a blocked embed still shows something useful. */
.map__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px; text-align: center;
}
.map__fallback strong { font-family: var(--head); font-size: 1.02rem; }
.map__fallback p { font-size: .92rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: 16px; }
.quote {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.quote p { font-size: .98rem; color: var(--body); }
.quote cite { display: block; margin-top: 12px; font-style: normal; font: 700 .9rem/1.4 var(--head); color: var(--ink); }
.quote cite span { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-methods { display: grid; gap: 12px; }
.contact-method {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease;
}
.contact-method:hover { transform: translateY(-2px); border-color: #d3dae6; }
.contact-method__icon {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 34, 35, .1); color: var(--red-dark);
}
.contact-method__text { min-width: 0; flex: 1; }
/* Scoped to the label span only. A bare `.contact-method span` also matched the
   icon wrapper and beat its own class rule on specificity, forcing the icon to
   display:block so the SVG lost its centring. */
.contact-method__text > span {
  display: block; font-size: .78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; font-family: var(--head); line-height: 1.4;
}
.contact-method__text > strong { display: block; font-family: var(--head); font-size: 1.02rem; color: var(--ink); word-break: break-word; line-height: 1.35; }
.contact-method__icon svg { display: block; }
.contact-method--accent { background: var(--red); border-color: var(--red); }
.contact-method--accent .contact-method__icon { background: rgba(255, 255, 255, .22); color: #fff; }
.contact-method--accent .contact-method__text > span { color: rgba(255, 255, 255, .85); }
.contact-method--accent .contact-method__text > strong { color: #fff; }

/* Form */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
}
.field { margin-bottom: 16px; }
.field label { display: block; font: 700 .88rem/1.3 var(--head); color: var(--ink); margin-bottom: 6px; }
.field .req { color: var(--red-dark); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  font: 400 16px/1.4 var(--text);   /* 16px stops iOS zooming on focus */
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
  padding-right: 40px;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(244, 34, 35, .14);
}
.field-hint { font-size: .84rem; color: var(--muted); margin: 6px 0 0; }
.form-note { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  background: #fff4f4; border: 1px solid #f6c9c9; border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px;
}
.form-alert h2 { font-size: 1.05rem; margin-bottom: .4em; }
.form-alert ul { margin: 0; padding-left: 18px; font-size: .95rem; }

/* --------------------------------------------------------------------------
   16. Breadcrumbs
   -------------------------------------------------------------------------- */
.crumbs { background: var(--soft); border-bottom: 1px solid var(--line); font-size: .84rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: 11px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red-dark); text-decoration: underline; }
.crumbs li[aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumbs li + li::before { content: "/"; margin-right: 7px; color: #b6bfcd; }

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b9c4dc; max-width: 620px; margin: 0 auto 24px; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #97a3bd; font-size: .92rem; padding: 46px 0 0; }
.site-footer h3 { color: #fff; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: #cdd6e8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 30px; }
.footer-brand img { width: 176px; margin-bottom: 16px; }
.footer-brand p { font-size: .92rem; color: #97a3bd; max-width: 340px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-contact li { position: relative; padding-left: 26px; }
.footer-contact svg { position: absolute; left: 0; top: 4px; color: #ff5a5b; }
.footer-bottom {
  margin-top: 34px; padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .84rem;
  display: flex; flex-direction: column; gap: 6px;
}
.footer-bottom p { margin: 0; }
.footer-areas { font-size: .82rem; color: #7d8aa6; line-height: 1.75; }

/* --------------------------------------------------------------------------
   19. Sticky mobile call bar
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(16, 25, 46, .1);
}
.callbar .btn { padding: 13px 6px; font-size: .84rem; white-space: nowrap; }
body { padding-bottom: 74px; }

/* --------------------------------------------------------------------------
   20. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 420px) {
  .brand img { width: 140px; }
  .header-cta { padding: 11px 16px; font-size: .85rem; }
}

@media (min-width: 560px) {
  .wrap { padding: 0 20px; }
  .brand img { width: 158px; }
  .grid--4 { gap: 18px; }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 700px) {
  .section { padding: 68px 0; }
  .hero__in { padding: 66px 0 62px; }
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .fleet { grid-template-columns: 1fr 1fr; }
  .trust ul { grid-template-columns: repeat(4, 1fr); padding: 24px 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-methods { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .ticks--2 { columns: 2; column-gap: 30px; }
  .ticks--2 li { break-inside: avoid; }
  .form-card { padding: 32px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .map iframe, .map { height: 400px; min-height: 400px; }
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
  .topbar { display: block; }
  .header-call { display: inline-flex; }
  .areas { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .fleet { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { max-width: 15ch; }

  /* Desktop: inline nav, no drawer. */
  .nav-toggle { display: none; }
  .site-nav {
    max-height: none; overflow: visible; border-top: 0;
    order: 2; flex: 1 1 auto;
  }
  .site-nav ul { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0; }
  .site-nav a { padding: 9px 13px; font-size: .95rem; }
  .site-nav a[aria-current="page"] { background: var(--soft); }

  .header-bar { gap: 20px; }
  .header-actions { order: 3; }

  .callbar { display: none; }
  body { padding-bottom: 0; }

  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
  .split--wide { grid-template-columns: 1.05fr .95fr; gap: 52px; }
}

@media (min-width: 1080px) {
  .fleet__img img { height: 230px; }
}

/* No-JS: the drawer can't be toggled, so show the nav inline. */
.no-js .site-nav { max-height: none; overflow: visible; border-top: 1px solid var(--line); }
.no-js .nav-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover { transform: none; }
}

@media print {
  .site-header, .callbar, .topbar, .cta-band, .map { display: none !important; }
  body { padding-bottom: 0; color: #000; }
}