/* On The Go — hub/landing page theme */
body.theme-hub {
  --bg: #121212;
  --text: #F3F1EC;
  --font-heading: 'Jost', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;

  --header-bg: #121212;
  --header-border: rgba(255,255,255,0.1);
  --header-text: #F3F1EC;

  --accent: #FF9E00;
  --accent-contrast: #14110B;

  --surface: #1A1A1A;
  --surface-border: rgba(255,255,255,0.08);

  --placeholder-bg: #1A1A1A;
  --placeholder-border: rgba(255,255,255,0.15);
  --placeholder-text: #9C9891;

  --input-bg: #1A1A1A;
  --input-border: rgba(255,158,0,0.65);

  --footer-bg: #0B0B0B;
  --footer-text: #C9C6BF;
  --footer-heading: #F3F1EC;
  --footer-border: rgba(255,255,255,0.08);
}

.hub-hero {
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
}

/* Photo behind the homepage hero.
   ------------------------------------------------------------------------
   Only the homepage, hence the extra class — careers.html uses .hub-hero too
   and should stay plain.

   The scrim is deliberately heavy. The photo is a bright one: midday sky, a
   white truck, pale tarmac, and the hero type is near-white, so anything
   subtle leaves the headline sitting on cloud and unreadable. It runs about
   80% at the top and closes to the solid page colour at the bottom, which
   also lets the section fall into the one below it without a hard edge. The
   truck reads as texture rather than as a picture you study, which is the
   right job for something sitting behind words.

   background-color is the page colour on purpose: if the file is missing or
   still uploading, the hero is exactly what it was before rather than a
   broken white box. */
.hub-hero-photo {
  position: relative;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  background-color: var(--bg);
  background-image:
    linear-gradient(
      to bottom,
      rgba(18, 18, 18, 0.70) 0%,
      rgba(18, 18, 18, 0.78) 45%,
      rgba(18, 18, 18, 0.92) 80%,
      var(--bg) 100%
    ),
    url("../img/hero/truck-crew.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* On a phone this needs more than a nudge sideways, and it cannot be solved by
   scaling to the section either.
   `cover` matches the height exactly, leaving no vertical crop room, so the
   top of the section always shows the top of the frame — sky and a tree.
   Over-scaling crops that out but blows the photo up: this section is over
   1300px tall on a phone because the two door cards sit inside it, so any
   height-based scale asks for more pixels than the 2000x1325 original has,
   and it goes soft. That is what "blurry" was.
   So it is sized by WIDTH instead. 240% of a 375px screen is 900px from a
   2000px original — scaled down, sharp — and the negative y-offset lifts the
   sky out of frame. The photo then ends partway down the section, which is
   fine: the scrim has already faded to the page colour by then. The scrim also goes up, because the type wraps to three lines here
   and covers more of the picture than it does on a wide screen. */
@media (max-width: 700px) {
  .hub-hero-photo {
    background-size: 240% auto;
    background-position: 22% -150px;
    background-image:
      linear-gradient(
        to bottom,
        rgba(18, 18, 18, 0.86) 0%,
        rgba(18, 18, 18, 0.90) 50%,
        var(--bg) 100%
      ),
      url("../img/hero/truck-crew.jpg");
  }
}
.hub-hero .eyebrow { display: block; }
.hub-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: var(--space-2);
}
.hub-hero p.lead {
  max-width: 620px;
  margin: 0 auto var(--space-4);
  font-size: 1.1rem;
  opacity: 0.8;
}
/* The proof line belongs to the lead above it, so the two sit together
   rather than a full section-gap apart. Not a link on purpose: the two door
   cards below are the thing to click, and a third target up here would only
   compete with them. */
.hub-hero p.lead:has(+ .hero-proof) { margin-bottom: var(--space-1); }
.hero-proof { margin: 0 0 var(--space-4); font-size: 1rem; opacity: 0.9; }
.hero-proof strong { color: var(--accent); font-family: var(--font-heading); font-weight: 700; }

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }

.door {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.2s ease;
}
.door:hover { transform: translateY(-4px); }
.door-tire {
  background: linear-gradient(160deg, #2F2E2E 0%, #201F1F 70%);
}
.door-detailing {
  background: linear-gradient(160deg, #141412 0%, #191C17 75%);
}
.door .door-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.door-tire .door-tag { color: #FF9E00; }
.door-detailing .door-tag { color: #4FB8DD; }
.door h2 { font-size: 2rem; margin-bottom: var(--space-1); }
.door p { opacity: 0.82; margin-bottom: var(--space-3); max-width: 40ch; }
.door-tire .btn-primary { background: #FF9E00; color: #14110B; }
.door-detailing .btn-primary { background: #1E88A8; color: #FFFFFF; }

.trust-strip {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-4) 0;
}
.trust-strip .grid { text-align: center; }
.trust-strip strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--accent); }
.trust-strip span { font-size: 0.85rem; opacity: 0.75; }

/* ---- On The Go Plus (membership) ---- */
.plus-promo {
  border: 1px solid rgba(255,158,0,0.35);
  background: linear-gradient(135deg, rgba(255,158,0,0.1), rgba(79,184,221,0.08));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.plus-promo-text h2 { margin-bottom: 0.4rem; font-size: 1.6rem; }
.plus-promo-text p { margin: 0; opacity: 0.8; max-width: 46ch; }

/* Plus and Fleet sit in one section now, so this is the gap between them —
   a related pair, not two unrelated bands 192px apart. */
.promo-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- Fleet Services ----
   Deliberately not another card. Fleet and Plus were the same shape, the same
   size of heading and the same big orange button, so the pair read as one
   thing said twice. They are not the same thing: Plus is for almost everyone
   who lands here, Fleet is for the few who run vehicles for a living. So it
   is quieter and lower — a strip with a rule down the side rather than a card
   competing with the offer above it. */
.fleet-promo {
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.fleet-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.35rem;
}
.fleet-promo-text h2 { margin-bottom: 0.3rem; font-size: 1.25rem; }
.fleet-promo-text p { margin: 0; opacity: 0.7; max-width: 52ch; font-size: 0.95rem; }
.fleet-promo .btn { flex-shrink: 0; }

.plus-benefit-card { position: relative; padding-top: var(--space-4); }
.plus-benefit-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.plus-tag-tire { background: rgba(255,158,0,0.15); color: #FF9E00; }
.plus-tag-detailing { background: rgba(79,184,221,0.15); color: #4FB8DD; }
.plus-benefit-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.plus-benefit-card p { margin: 0; opacity: 0.75; font-size: 0.92rem; }

.plus-plans { max-width: 720px; margin: 0 auto; }
.plus-plan-card { text-align: center; position: relative; padding: var(--space-4); }
.plus-plan-featured { border-color: var(--accent); }
.plus-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.plus-plan-name { display: block; font-size: 0.85rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-1); }
.plus-plan-price { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--accent); margin-bottom: var(--space-1); }
.plus-plan-price span { font-size: 1rem; font-weight: 400; color: var(--text); opacity: 0.6; }
.plus-plan-desc { opacity: 0.75; font-size: 0.9rem; margin-bottom: var(--space-3); min-height: 2.6em; }

/* ---- Area / city landing pages ---- */
.area-page-hero { padding: var(--space-5) 0 var(--space-4); }
.area-page-hero .breadcrumb { font-size: 0.82rem; opacity: 0.6; margin-bottom: var(--space-2); }
.area-page-hero .breadcrumb a { text-decoration: underline; }
.area-page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: var(--space-2); }
.area-page-hero p.lead { max-width: 62ch; opacity: 0.82; font-size: 1.08rem; margin-bottom: var(--space-3); }

.fact-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border); }
.fact-strip .fact { min-width: 140px; }
.fact-strip .fact strong { display: block; font-family: var(--font-heading); font-size: 1.3rem; color: var(--accent); }
.fact-strip .fact span { font-size: 0.8rem; opacity: 0.65; }

.area-body { max-width: 72ch; }
.area-body p { opacity: 0.85; margin-bottom: var(--space-2); }
.area-body h3 { font-size: 1.15rem; margin: var(--space-3) 0 var(--space-1); }

.area-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2); }
.area-index-card {
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); font-weight: 600; text-align: center; transition: transform 0.15s ease, border-color 0.15s ease;
}
.area-index-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.area-index-card .region-tag { display: block; font-size: 0.72rem; font-weight: 500; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }

.plus-steps { text-align: center; }
.plus-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.plus-step p { opacity: 0.8; font-size: 0.92rem; }

/* ---- OTG Auto page ------------------------------------------------------
   The building shot sits behind the whole page rather than in a band at the
   top, so it needs to sit behind the text without ever competing with it. */

/* A fixed pseudo-element rather than a background on <body>.
   background-attachment: fixed is the obvious way to do this and is the wrong
   one — iOS Safari has never handled it properly, and a plain body background
   would stretch the image over the full scroll height instead of the window.
   This stays put, stays the size of the viewport, and sits behind everything
   because nothing else on the page claims a negative z-index. */
.page-otg { background: var(--bg); }
.page-otg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(
      to bottom,
      rgba(18, 18, 18, 0.88) 0%,
      rgba(18, 18, 18, 0.93) 55%,
      rgba(18, 18, 18, 0.96) 100%
    ),
    url("../img/hero/otg-auto-bg.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Heavier again on a phone: the image crops to a narrow strip and the text
   runs over far more of it. */
@media (max-width: 700px) {
  .page-otg::before {
    background-image:
      linear-gradient(rgba(18, 18, 18, 0.93), rgba(18, 18, 18, 0.96)),
      url("../img/hero/otg-auto-bg.jpg");
  }
}

/* The hero and the section under it each carried 96px of padding, so 136px of
   nothing sat between the buttons and "Who we are". The two belong to each
   other, so the join is closed up rather than left as a gap that reads as a
   missing section. */
.page-otg .page-hero { padding-bottom: var(--space-3); }
.page-otg .page-hero + section { padding-top: var(--space-4); }

/* Cards and bands go translucent so the building shows through them instead
   of the image only appearing in the gaps between blocks. Solid enough that
   the text on them is never working against the picture. */
.page-otg .otg-band {
  background: rgba(26, 26, 26, 0.72);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.page-otg .service-card,
.page-otg .faq-item {
  background: rgba(26, 26, 26, 0.78);
  backdrop-filter: blur(2px);
}

/* The detailing card takes the detailing blue.
   The two cards are the two halves of the business, and on every other page
   those halves are colour-coded — the doors on the homepage, the section
   switch in the header. Here they were both orange, which made the pair read
   as one brand with two products rather than two crews. Blue is the same
   #4FB8DD the detailing side uses everywhere else. */
.page-otg .service-card.is-detailing { --accent: #4FB8DD; --accent-contrast: #06222D; }
.page-otg .service-card.is-detailing::before { background: rgba(79, 184, 221, 0.55); }

/* The intro on a card.
   It was floating text straight on the building photo, which is the hardest
   place on the page to read and gave the opening nothing to sit on. The card
   gives it an edge and a darker ground, so the headline reads cleanly and the
   photo still shows around it. */
.page-otg .otg-intro-card {
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  backdrop-filter: blur(3px);
  max-width: 720px;
}
.page-otg .otg-intro-card .hero-actions { margin-top: var(--space-3); }
@media (max-width: 600px) {
  .page-otg .otg-intro-card { padding: var(--space-3); }
}