/* ==========================================================================
   TRUE NORTH PROPERTY MAINTENANCE — styles.css
   --------------------------------------------------------------------------
   CONTENTS
    1.  Design tokens (colours, fonts, sizes)
    2.  Reset & base
    3.  Accessibility helpers
    4.  Layout helpers
    5.  Typography (eyebrows, titles)
    6.  Buttons
    7.  Header & navigation
    8.  Mobile menu
    9.  Hero
   10.  Why True North
   11.  Services
   12.  Plans
   13.  Service area
   14.  About
   15.  POV / Social route section
   16.  Quote form & contact card
   17.  FAQ
   18.  Final CTA
   19.  Footer
   20.  Sticky mobile CTA
   21.  Scroll reveal animation
   22.  Sub-pages (success, privacy, terms, 404)
   23.  Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS — change brand colours here
   ========================================================================== */
:root {
  /* Brand colours */
  --black: #0A0A0A;
  --charcoal: #141414;
  --charcoal-2: #1E1E1E;
  --charcoal-3: #2A2B2E;
  --light: #F5F5F6;
  --gray-200: #E5E7EB;
  --gray-400: #9CA0A6;
  --gray-600: #55585E;
  --white: #FFFFFF;

  --red: #E10600;            /* True North Red — buttons, large headlines */
  --red-hover: #BF0500;
  --red-on-dark: #FF3B30;    /* small red text on dark backgrounds (accessible contrast) */
  --red-on-light: #C00500;   /* small red text on light backgrounds (accessible contrast) */

  --text-on-dark: #FFFFFF;
  --muted-on-dark: #B7BAC0;
  --text-on-light: #0A0A0A;
  --muted-on-light: #4B4E54;

  /* Fonts */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-script: 'Kaushan Script', 'Brush Script MT', cursive;

  /* Sizing */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 84px;
  --section-pad: clamp(72px, 10vw, 128px);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --mobile-cta-h: 84px;

  --focus: #FFFFFF;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1120px) {
  :root { --header-h: 104px; }
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video,
iframe { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-red { color: var(--red-on-dark); }


/* ==========================================================================
   3. ACCESSIBILITY HELPERS
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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

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


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

.section--dark     { background: var(--black); color: var(--text-on-dark); }
.section--charcoal { background: var(--charcoal); color: var(--text-on-dark); }
.section--light    { background: var(--light); color: var(--text-on-light); --focus: var(--black); }
.section--white    { background: var(--white); color: var(--text-on-light); --focus: var(--black); }


/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

/* Eyebrow label — the three red lines echo the speed lines in the logo */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-on-dark);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 10px;
  flex: none;
  background:
    linear-gradient(var(--red), var(--red)) right 0    / 100% 2px no-repeat,
    linear-gradient(var(--red), var(--red)) right 50%  / 72%  2px no-repeat,
    linear-gradient(var(--red), var(--red)) right 100% / 48%  2px no-repeat;
}
.section--light .eyebrow,
.section--white .eyebrow { color: var(--red-on-light); }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 6.2vw, 4.25rem);
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.section-intro {
  margin-top: 18px;
  max-width: 58ch;
  font-size: 1.125rem;
  color: var(--muted-on-dark);
}
.section--light .section-intro,
.section--white .section-intro { color: var(--muted-on-light); }

.section-head { margin-bottom: clamp(40px, 6vw, 64px); }

@media (min-width: 900px) {
  .section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
    gap: 48px;
  }
  .section-head--split .section-intro { margin-top: 0; }
}

.card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.inline-link {
  color: var(--red-on-light);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .icon { width: 1.1em; height: 1.1em; }

.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(225, 6, 0, .7);
}

.btn-outline {
  background: rgba(10, 10, 10, .25);
  border-color: rgba(255, 255, 255, .72);
  color: var(--white);
}
.btn-outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.btn-outline:hover .icon-red { color: var(--red); }

.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.1875rem; }
.btn-xl { min-height: 62px; padding: 0 34px; font-size: 1.3125rem; }
.btn-block { width: 100%; }

.btn:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }

.btn-ghost {
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }

@media (min-width: 480px) {
  .btn { white-space: nowrap; }
}
@media (max-width: 479px) {
  .btn { padding-block: 10px; }
  .btn-xl { font-size: 1.1875rem; padding-inline: 20px; }
}


/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Solid header after scrolling, when the menu is open, or when JavaScript is off */
.site-header.is-scrolled,
.menu-open .site-header,
.no-js .site-header {
  background: rgba(10, 10, 10, .94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgba(10, 10, 10, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.brand { display: block; flex: none; border-radius: 4px; }
.brand img {
  /* Deliberately close to the full header height so the mark reads strongly */
  height: calc(var(--header-h) - 14px);
  width: auto;
  transition: height .3s var(--ease);
}

.primary-nav { display: none; margin-left: auto; }

.nav-list { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 32px); }
.nav-list > li { white-space: nowrap; }

.nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  transition: color .2s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover,
.nav-link.is-active { color: var(--white); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.btn-phone { display: none; min-height: 46px; padding: 0 16px; }
.btn-header-cta { display: none; min-height: 46px; padding: 0 18px; font-size: 1.0625rem; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm);
  color: var(--white);
}
.menu-toggle-bars { position: relative; width: 22px; height: 16px; }
.menu-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 7px; }
.menu-toggle-bars span:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (min-width: 520px) {
  .btn-header-cta { display: inline-flex; }
}

@media (min-width: 1120px) {
  .primary-nav { display: block; }
  .header-actions { margin-left: 28px; }
  .menu-toggle { display: none; }
  .btn-header-cta { padding: 0 20px; }
  .site-header.is-scrolled .brand img { height: calc(var(--header-h) - 30px); }
}

@media (min-width: 1520px) {
  .btn-phone { display: inline-flex; }
}


/* ==========================================================================
   8. MOBILE MENU
   ========================================================================== */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  background: var(--black);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}

.mobile-menu-inner { padding-block: 12px 40px; }

.mobile-nav-list { border-top: 1px solid rgba(255, 255, 255, .1); }
.mobile-nav-list li { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mobile-nav-link::after {
  content: "";
  width: 10px; height: 10px;
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  transform: rotate(45deg);
}
.mobile-nav-link.is-active { color: var(--red-on-dark); }

.mobile-menu-actions { display: grid; gap: 12px; margin-top: 28px; }

.menu-open { overflow: hidden; }
.menu-open .mobile-cta { display: none; }

@media (min-width: 1120px) {
  .mobile-menu { display: none; }
}


/* ==========================================================================
   9. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

/* HERO FRAMING
   --hero-pos controls which part of the photo stays visible as the screen
   narrows. On phones the frame is pushed right so the truck/plow (which sits
   on the right of the photo) stays in shot behind the headline.
   Adjust these three values if your replacement photo is composed differently. */
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 62% 50%);   /* phones: favours the truck */
}

@media (min-width: 520px) {
  .hero-media img { --hero-pos: 68% 50%; }     /* large phones */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.45) 28%, rgba(10,10,10,.6) 58%, rgba(10,10,10,.96) 100%);
}

.hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 48px;
}

.hero-content { max-width: 680px; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
}
.hero-eyebrow { display: flex; margin-bottom: 18px; font-size: 1.0625rem; }
@media (max-width: 359px) {
  .hero-eyebrow { font-size: .875rem; letter-spacing: .16em; }
}
.hero-line {
  display: block;
  font-size: clamp(2.35rem, 10.5vw, 5.2rem);
  line-height: .92;
  letter-spacing: .003em;
  text-wrap: balance;
}
.hero-line--red { color: var(--red); }

/* Secondary emphasis under the headline */
.hero-sub {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.6vw, 1.6rem);
  letter-spacing: .09em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--white);
}
.hero-sub::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--red);
}

.hero-lead {
  margin-top: 18px;
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 22px;
}
.hero-phones a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .01em;
}
.hero-phones a:hover span { text-decoration: underline; text-underline-offset: 4px; }

.hero-script {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  line-height: 1.05;
  color: rgba(255, 255, 255, .92);
  transform: rotate(-9deg);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.hero-script::after {
  content: "";
  display: block;
  width: 72%;
  height: 3px;
  margin: 6px 0 0 18%;
  background: var(--red);
  border-radius: 3px;
  transform: rotate(-3deg);
}

.hero-trust {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 10, 10, .72);
}
.trust-list {
  display: grid;
  gap: 0;
  padding-block: 8px;
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 14px;
}
.trust-item + .trust-item { border-top: 1px solid rgba(255, 255, 255, .08); }
.trust-icon { width: 30px; height: 30px; color: var(--red-on-dark); stroke-width: 1.75; }
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trust-item span { display: block; font-size: .9375rem; color: var(--muted-on-dark); }

/* Hero entrance — one orchestrated moment on page load */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-title > span,
  .js .hero-lead,
  .js .hero-actions,
  .js .hero-phones {
    animation: hero-rise .8s var(--ease) both;
  }
  .js .hero-title > span:nth-child(2) { animation-delay: .08s; }
  .js .hero-title > span:nth-child(3) { animation-delay: .16s; }
  .js .hero-lead    { animation-delay: .26s; }
  .js .hero-actions { animation-delay: .34s; }
  .js .hero-phones  { animation-delay: .42s; }
  .js .hero-script  { animation: hero-fade 1.2s .7s var(--ease) both; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 768px) {
  .trust-list { grid-template-columns: repeat(3, 1fr); padding-block: 0; }
  .trust-item { padding: 26px 24px 26px 0; }
  .trust-item + .trust-item { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .08); padding-left: 24px; }
}

@media (min-width: 900px) {
  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 34%, rgba(10,10,10,.25) 64%, rgba(10,10,10,.1) 100%),
      linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 70%, rgba(10,10,10,.85) 100%);
  }
  .hero-script { display: block; }
  .hero-media img { --hero-pos: 78% 50%; }     /* tablet and up: keeps the slogan in frame */
}

@media (min-width: 1120px) {
  .hero-line { font-size: clamp(3.6rem, 4.6vw, 5.4rem); }
}


/* ==========================================================================
   10. WHY TRUE NORTH
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.feature-card {
  position: relative;
  padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: #D4D6DA;
  box-shadow: 0 22px 40px -28px rgba(10, 10, 10, .35);
}
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  color: var(--red);
  stroke-width: 1.6;
}
.feature-card .card-title { margin-bottom: 10px; }
.feature-card p { color: var(--muted-on-light); }

@media (min-width: 560px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}


/* ==========================================================================
   11. SERVICES
   ========================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.service-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  height: 100%;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 6, 0, .65);
  box-shadow: 0 26px 50px -30px rgba(225, 6, 0, .55);
}

.service-media {
  position: relative;
  overflow: hidden;
  background: var(--charcoal-2);
}
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.service-card:hover .service-media img { transform: scale(1.05); }

.service-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
}
.service-body .card-title { font-size: 1.35rem; }
.service-body p { font-size: .9375rem; line-height: 1.55; color: var(--muted-on-dark); }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-on-dark);
}
.service-arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.service-arrow .icon { width: 16px; height: 16px; }
.service-card:hover .service-arrow { background: var(--red); border-color: var(--red); color: var(--white); }

/* Narrow phones: stack the image above the text so the card has room to breathe
   and the "Add to my quote" row always fits on one line. */
@media (max-width: 400px) {
  .service-card { grid-template-columns: minmax(0, 1fr); }
  .service-media { height: 150px; }
  .service-link { gap: 8px; font-size: .9375rem; }
  .service-arrow { width: 28px; height: 28px; }
  .service-arrow .icon { width: 15px; height: 15px; }
}

@media (min-width: 600px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .service-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .service-media { aspect-ratio: 4 / 3; }
  .service-body { padding: 24px 24px 22px; gap: 10px; }
  .service-body .card-title { font-size: 1.55rem; }
  .service-body p { font-size: 1rem; }
}
@media (min-width: 1100px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   12. PLANS
   ========================================================================== */
#plans {
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(225, 6, 0, .09), transparent 70%),
    var(--charcoal);
}

.plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 26px 26px;
  background: var(--charcoal-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.plan-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .22); }

.plan-card--featured {
  border: 2px solid var(--red);
  background: linear-gradient(180deg, rgba(225, 6, 0, .18) 0%, rgba(30, 30, 30, 1) 58%);
  box-shadow: 0 30px 70px -36px rgba(225, 6, 0, .6);
}
.plan-card--featured:hover { border-color: var(--red); }

.plan-badge {
  position: absolute;
  top: -1px;
  right: 20px;
  padding: 7px 12px;
  background: var(--red);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.plan-num {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plan-card--featured .plan-num { border-color: var(--red-on-dark); color: var(--white); }
.plan-card--featured .plan-top { margin-top: 18px; }
.plan-icon { width: 34px; height: 34px; color: var(--red-on-dark); stroke-width: 1.6; }

.plan-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.4rem);
  line-height: .95;
  text-transform: uppercase;
}
.plan-desc {
  margin-top: 14px;
  color: var(--muted-on-dark);
}

.plan-points {
  display: grid;
  gap: 10px;
  margin: 22px 0 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.plan-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.45;
}
.plan-points .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--red-on-dark); stroke-width: 2.5; }

.plan-card .btn { margin-top: auto; }

.plans-note {
  margin-top: 28px;
  text-align: center;
  font-size: 1rem;
  color: var(--muted-on-dark);
}

@media (min-width: 900px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .plan-card { padding: 36px 32px 32px; }
  .plan-card--featured { transform: translateY(-14px); }
  .plan-card--featured:hover { transform: translateY(-18px); }
}


/* ==========================================================================
   13. SERVICE AREA
   ========================================================================== */
.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

/* "Focused North London Routes" line under the main heading */
.area-focus {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-on-light);
}

.area-note {
  margin: 22px 0 28px;
  padding-left: 16px;
  border-left: 3px solid var(--red);
  font-weight: 600;
  color: var(--text-on-light);
}

.area-map-frame {
  position: relative;
  /* Fixed height on phones: an interactive map needs room to be usable, and a
     min-height combined with aspect-ratio would widen the box past the screen. */
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 40px 80px -50px rgba(10, 10, 10, .6);
}
.area-map-frame img,
.area-map-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* ---- Live OpenStreetMap map (Leaflet) ---- */
.route-map {
  width: 100%;
  height: 100%;
  /* Light neutral while tiles load, so it never flashes a black box */
  background: #e8e6e1;
}
/* Keep Leaflet's panes below the sticky site header */
.route-map .leaflet-pane,
.route-map .leaflet-top,
.route-map .leaflet-bottom { z-index: 1; }

/* Brand the default blue/white controls */
.route-map .leaflet-control-zoom a {
  color: var(--text-on-light);
  border-radius: 0;
  font-weight: 700;
}
.route-map .leaflet-control-zoom a:hover { color: var(--red-on-light); }
.route-map .leaflet-bar { border: 1px solid rgba(10, 10, 10, .2); box-shadow: 0 2px 10px rgba(0,0,0,.18); }

/* Attribution must stay legible — it is required by the OpenStreetMap licence */
.route-map .leaflet-control-attribution {
  padding: 2px 8px;
  font-size: .6875rem;
  background: rgba(255, 255, 255, .9);
  color: #333;
}
.route-map .leaflet-control-attribution a { color: #0f5ca8; text-decoration: underline; }

.route-map .leaflet-popup-content {
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.55;
}

/* Shown only if Leaflet cannot load */
.route-map--fallback {
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  background: var(--charcoal);
}
.map-fallback-text {
  display: grid;
  gap: 8px;
  max-width: 34em;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--muted-on-dark);
}
.map-fallback-text strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--white);
}

/* Legend under the map: explains the red circle honestly */
.area-legend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted-on-light);
}
.area-legend-key {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: rgba(225, 6, 0, .16);
}

.area-tagline {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
}
.area-tagline span { color: var(--red-on-light); }

@media (min-width: 960px) {
  .area-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
}


/* ==========================================================================
   14. ABOUT
   ========================================================================== */
.about {
  position: relative;
  isolation: isolate;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

.about-media {
  position: relative;
  height: clamp(240px, 58vw, 420px);
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.35) 55%, var(--black) 100%);
}

.about-inner { padding-bottom: var(--section-pad); }

.about-content { max-width: 600px; margin-top: -40px; position: relative; }
.about-content > p:not(.eyebrow) {
  margin-top: 18px;
  font-size: 1.125rem;
  color: var(--muted-on-dark);
}
.about-content .section-title { margin-bottom: 6px; }

.about-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 28px 0 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.about-points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .about { min-height: 640px; display: flex; align-items: center; }
  .about-media { position: absolute; inset: 0; height: auto; z-index: -1; }
  .about-media::after {
    background:
      linear-gradient(90deg, rgba(10,10,10,.97) 0%, rgba(10,10,10,.88) 38%, rgba(10,10,10,.3) 72%, rgba(10,10,10,.15) 100%),
      linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 70%, rgba(10,10,10,.5) 100%);
  }
  .about-inner { padding-block: var(--section-pad); }
  .about-content { margin-top: 0; }
}


/* ==========================================================================
   15. POV / SOCIAL ROUTE SECTION
   ========================================================================== */
.route { overflow: hidden; }

.route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.social-pill .icon { color: var(--red-on-dark); width: 18px; height: 18px; }
.social-pill:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }

/* Horizontal swipe on phones; three columns on larger screens */
.video-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 64%);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--charcoal-3) transparent;
}
.video-card { scroll-snap-align: start; }

.video-placeholder,
.video-card iframe,
.video-card video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  background:
    radial-gradient(120% 60% at 70% 20%, rgba(255, 160, 80, .22), transparent 60%),
    linear-gradient(180deg, #1c2330 0%, #0f1218 55%, #07080a 100%);
  border: 1px solid rgba(255, 255, 255, .08);
}
.video-placeholder--alt {
  background:
    radial-gradient(120% 60% at 30% 30%, rgba(225, 6, 0, .22), transparent 60%),
    linear-gradient(180deg, #232427 0%, #121315 55%, #07080a 100%);
}
.video-play {
  align-self: center;
  margin-top: 40%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .55);
  border: 2px solid rgba(255, 255, 255, .85);
  color: var(--white);
}
.video-play .icon { width: 24px; height: 24px; margin-left: 3px; }
.video-meta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
}
.video-meta span {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: .875rem;
  color: var(--muted-on-dark);
}

@media (min-width: 768px) {
  .video-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}
@media (min-width: 1100px) {
  .route-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
}


/* ==========================================================================
   16. QUOTE FORM & CONTACT CARD
   ========================================================================== */
.quote {
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(225, 6, 0, .10), transparent 65%),
    var(--black);
}

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.quote .section-head { margin-bottom: 32px; }

.quote-form {
  padding: clamp(20px, 4vw, 40px);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-lg);
}

.form-required-note { margin-bottom: 20px; font-size: .9375rem; color: var(--muted-on-dark); }
.req { color: var(--red-on-dark); }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.field label,
.check-group legend {
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
}
.check-group legend { margin-bottom: 10px; padding: 0; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: #0C0C0C;
  border: 1.5px solid #3A3C41;
  border-radius: 8px;
  color: var(--white);
  font-size: 1rem;       /* 16px prevents zoom-on-focus on iPhone */
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #8C9096; }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  cursor: pointer;
}
.field select option { background: var(--charcoal); color: var(--white); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #5A5D63; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
  background-color: #101010;
}

.field-hint { font-size: .875rem; color: var(--gray-400); }

.field-error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: #FF8A80;
}
.field-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #FF5A4F;
  color: var(--black);
  font-size: .75rem;
  font-weight: 800;
}
.field.has-error .field-error { display: flex; }
.field.has-error input,
.field.has-error select { border-color: #FF5A4F; }
.field.has-error input:focus,
.field.has-error select:focus { box-shadow: 0 0 0 3px rgba(255, 90, 79, .3); }

.check-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.check-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  background: #0C0C0C;
  border: 1.5px solid #3A3C41;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .3s var(--ease);
}
.check-tile:hover { border-color: #5A5D63; }
.check-tile input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--red);
  cursor: pointer;
}
.check-tile:has(input:checked) {
  border-color: var(--red);
  background: rgba(225, 6, 0, .1);
}
.check-tile:has(input:focus-visible) {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}
.check-tile.is-highlight { box-shadow: 0 0 0 4px rgba(225, 6, 0, .45); }
.field select.is-highlight { box-shadow: 0 0 0 4px rgba(225, 6, 0, .45); border-color: var(--red); }

.honeypot {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 90, 79, .12);
  border: 1px solid rgba(255, 90, 79, .5);
  color: #FFB4AD;
  font-weight: 600;
  font-size: 1rem;
}

.form-submit { margin-top: 24px; }
.form-submit.is-loading .icon { display: none; }

.form-privacy {
  margin-top: 14px;
  font-size: .875rem;
  color: var(--gray-400);
  text-align: center;
}
.form-privacy a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* Contact card */
.contact-card {
  padding: clamp(24px, 4vw, 34px);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, .09);
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
}
.contact-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  text-transform: uppercase;
}
.contact-lead { margin-top: 10px; color: var(--muted-on-dark); font-size: 1rem; }

.contact-block {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.contact-label {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.contact-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Keep a phone number on one line - never break it mid-number */
.contact-number { white-space: nowrap; }
/* The email can break, but only at the @ and dots, never mid-word */
.contact-email { word-break: break-word; }
.contact-phone + .contact-phone { margin-top: 6px; }

.contact-number,
.contact-email,
.contact-area {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  overflow-wrap: anywhere;
}
.contact-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .02em;
}
.contact-email { font-weight: 600; font-size: 1.0625rem; }
.contact-area { font-weight: 600; font-size: 1.0625rem; }
.contact-area-sub {
  margin-top: 2px;
  padding-left: 32px;
  font-size: .9375rem;
  color: var(--muted-on-dark);
}
.contact-number:hover span,
.contact-email:hover span { text-decoration: underline; text-underline-offset: 4px; }

.contact-sms {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.contact-sms .icon { width: 16px; height: 16px; }
.contact-sms:hover { background: rgba(255, 255, 255, .08); border-color: var(--white); }

@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .field--full { grid-column: 1 / -1; }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .contact-card { position: sticky; top: calc(var(--header-h) + 24px); margin-top: 180px; }
}


/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }

.faq-list { border-top: 1px solid #D6D8DC; }
.faq-item { border-bottom: 1px solid #D6D8DC; }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 72px;
  padding: 18px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  line-height: 1.4;
  color: var(--text-on-light);
}
.faq-trigger:hover { color: var(--red-on-light); }

.faq-icon {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #C4C7CC;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-trigger[aria-expanded="true"] .faq-icon { background: var(--red); border-color: var(--red); color: var(--white); }
.faq-trigger[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-panel-inner p {
  padding: 0 54px 24px 0;
  color: var(--muted-on-light);
  max-width: 64ch;
}

/* Collapsing only happens when JavaScript is running, so content is never lost */
.js .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s var(--ease), visibility 0s linear .3s;
}
.js .faq-panel-inner { overflow: hidden; }
.js .faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s var(--ease), visibility 0s;
}
.no-js .faq-icon { display: none; }

@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--header-h) + 32px); }
}


/* ==========================================================================
   18. FINAL CTA
   ========================================================================== */
.final-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 70vh, 720px);
  padding-block: var(--section-pad);
  background: var(--black);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.final-cta-media { position: absolute; inset: 0; z-index: -2; }
.final-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(10,10,10,.55) 0%, rgba(10,10,10,.85) 100%),
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.2) 40%, rgba(10,10,10,.9) 100%);
}

.final-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  line-height: .9;
  text-transform: uppercase;
}
.final-title span { color: var(--red); }

.final-lead {
  max-width: 36em;
  margin: 22px auto 0;
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  color: rgba(255, 255, 255, .9);
}

.final-note {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-on-dark);
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

@media (max-width: 519px) {
  .final-actions .btn { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.site-footer {
  background: #050505;
  color: var(--muted-on-dark);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: 64px 44px;
}

.footer-logo { display: inline-block; border-radius: 4px; }
.footer-logo img { width: 170px; height: auto; }
.footer-name {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}
.footer-brand p + p { margin-top: 4px; }
.footer-place { margin-top: 10px !important; color: var(--muted-on-dark); }

.footer-heading {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-links { display: grid; gap: 2px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  overflow-wrap: anywhere;
  transition: color .2s var(--ease);
}
.footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

.footer-social { display: grid; gap: 2px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  transition: color .2s var(--ease);
}
.footer-social .icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: var(--white);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.footer-social a:hover { color: var(--white); }
.footer-social a:hover .icon { background: var(--red); border-color: var(--red); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .9375rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-legal a { display: inline-flex; min-height: 40px; align-items: center; }
.footer-legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 48px; }
}


/* ==========================================================================
   20. STICKY MOBILE CTA (phones only)
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  /* Three actions: Call, Text, Get a Quote. The quote button gets the wider
     track because its label is longer and it is the primary action. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, .96);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .4);
}
/* Three actions now share the bar: Call, Text, Get a Quote. */
.mobile-cta-btn { min-height: 52px; padding: 0 8px; font-size: 1rem; white-space: nowrap; }
.mobile-cta-btn .icon { flex: none; }
@media (max-width: 400px) {
  .mobile-cta { gap: 7px; padding-inline: 10px; }
  .mobile-cta-btn { font-size: .9375rem; letter-spacing: .02em; padding-inline: 6px; }
  .mobile-cta-btn .icon { display: none; }
}

/* Reserve space so the bar never covers the footer content */
.has-mobile-cta { padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
  .mobile-cta { display: none; }
  .has-mobile-cta { padding-bottom: 0; }
}


/* ==========================================================================
   21. SCROLL REVEAL ANIMATION (subtle, runs once)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  /* after the reveal finishes (class added by script.js), hovers respond instantly */
  .js .reveal.reveal-done { transition-delay: 0s; transition-duration: .3s; }

  /* keep card hover lifts working on revealed cards */
  .js .feature-card.reveal.is-visible:hover,
  .js .plan-card.reveal.is-visible:hover { transform: translateY(-4px); }

  @media (min-width: 900px) {
    .js .plan-card--featured.reveal.is-visible { transform: translateY(-14px); }
    .js .plan-card--featured.reveal.is-visible:hover { transform: translateY(-18px); }
  }
}


/* ==========================================================================
   22. SUB-PAGES (success.html, privacy.html, terms.html, 404.html)
   ========================================================================== */
.page-sub { background: var(--black); }

.sub-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sub-header .header-inner { justify-content: space-between; }
.sub-header-actions { display: flex; align-items: center; gap: 10px; }
.sub-header .btn { min-height: 46px; padding: 0 16px; font-size: 1.0625rem; }
.sub-header .btn-sub-phone { display: none; }
@media (min-width: 640px) {
  .sub-header .btn-sub-phone { display: inline-flex; }
}

/* Success / 404 */
.status-page {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: 64px;
  text-align: center;
  overflow: hidden;
}
.status-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(225, 6, 0, .16), transparent 70%),
    linear-gradient(180deg, rgba(10,10,10,.6), rgba(10,10,10,.95)),
    url("assets/images/hero.webp") center / cover no-repeat;
}
.status-card { max-width: 640px; margin-inline: auto; }
.status-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 10px rgba(225, 6, 0, .18);
}
.status-icon .icon { width: 40px; height: 40px; stroke-width: 3; color: var(--white); }
.status-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 12vw, 6rem);
  line-height: .9;
  text-transform: uppercase;
}
.status-lead {
  margin-top: 20px;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  font-weight: 600;
  color: var(--white);
}
.status-text { margin-top: 10px; color: var(--muted-on-dark); font-size: 1.125rem; }
.status-contact {
  margin: 32px auto 0;
  padding: 22px;
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(20, 20, 20, .8);
}
.status-contact .contact-label { margin-bottom: 4px; }
.status-contact .contact-number { justify-content: center; font-size: 2.1rem; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* Legal pages */
.legal-hero {
  padding-block: clamp(56px, 8vw, 96px) clamp(36px, 5vw, 56px);
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(225, 6, 0, .12), transparent 70%),
    var(--black);
}
.legal-hero .section-title { font-size: clamp(2.6rem, 8vw, 4.5rem); }
.legal-meta { margin-top: 14px; color: var(--muted-on-dark); }

.legal-body {
  background: var(--white);
  color: var(--text-on-light);
  padding-block: clamp(48px, 7vw, 88px);
  --focus: var(--black);
}
.legal-content { max-width: 760px; }
.legal-content h2 {
  margin-top: 44px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p,
.legal-content ul { margin-top: 14px; color: #33363B; }
.legal-content ul { padding-left: 22px; list-style: disc; }
.legal-content li + li { margin-top: 6px; }
.legal-content li::marker { color: var(--red); }
.legal-content a { color: var(--red-on-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-content strong { color: var(--text-on-light); }
.legal-contact {
  margin-top: 18px;
  padding: 22px 24px;
  border-left: 4px solid var(--red);
  background: var(--light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-contact p { margin-top: 4px; }
.legal-contact p:first-child { margin-top: 0; }


/* ==========================================================================
   23. REDUCED MOTION — respect the visitor's system setting
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .feature-card:hover,
  .service-card:hover,
  .plan-card:hover,
  .btn-primary:hover { transform: none; }
  .service-card:hover .service-media img { transform: none; }
}


/* ==========================================================================
   ========================================================================== */

/* Why Choose has five cards. Two/three up on tablet, five across on wide screens. */
@media (min-width: 600px) {
  .feature-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .feature-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .feature-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .feature-grid--five .feature-card { padding: 24px 20px; }
  .feature-grid--five .card-title { font-size: 1.1875rem; }
}



/* The final-CTA photo carries its own slogan bottom-right, so the text sits left. */
@media (min-width: 900px) {
  .final-cta-inner { text-align: left; margin-inline: 0; }
  .final-title, .final-lead, .final-note { margin-inline: 0; }
  .final-actions { justify-content: flex-start; }
  .final-cta-inner { max-width: 62%; }
}



/* ==========================================================================
   25. HERO FIT — keep the photograph readable
   --------------------------------------------------------------------------
   The hero photo is 16:9. If the hero box grows much taller than the viewport,
   "cover" scales the image up and crops the truck out of frame, so the content
   column is capped and the section is held near one screen.
   ========================================================================== */
.hero-content { max-width: 640px; }
.hero-inner { padding-top: calc(var(--header-h) + 24px); padding-bottom: 36px; }

@media (min-width: 900px) {
  .hero { max-height: 1080px; }
  .hero-content { max-width: 600px; }
}

/* Header: the logo is larger now, so the nav needs tighter gaps to stay on one line */
@media (min-width: 1120px) and (max-width: 1339px) {
  .nav-list { gap: 14px; }
  .nav-link { font-size: 1.0625rem; }
}


/* Give the header a wider track than the body content on large screens, so the
   bigger logo, the FAQ link and the phone button all fit on one line. */
@media (min-width: 1400px) {
  .site-header .container { max-width: calc(1440px + var(--gutter) * 2); }
}


/* PHONE HERO
   The headline sits over the brightest part of the photo (the white truck), so
   the top of the frame is darkened for contrast while the lower third is left
   comparatively clear — the truck has to stay visible on a phone, not just on
   desktop. The duplicate phone link is dropped here because "Call Now" and the
   sticky bottom bar already cover it, which keeps the text block short enough
   for the photo to breathe. */
@media (max-width: 767px) {
  .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(10,10,10,.94) 0%,
        rgba(10,10,10,.88) 30%,
        rgba(10,10,10,.62) 56%,
        rgba(10,10,10,.28) 74%,
        rgba(10,10,10,.72) 100%);
  }
  .hero-line { font-size: clamp(2.2rem, 9.4vw, 3rem); }
  .hero-sub { font-size: clamp(1rem, 3.6vw, 1.25rem); }
  .hero-lead { font-size: 1rem; max-width: 30em; }
  .hero-phones { display: none; }
  .hero-actions { margin-top: 22px; }
  .hero-inner { padding-bottom: 20px; }
  /* Frame the truck into the clear lower band */
  .hero-media img { --hero-pos: 64% 62%; }
}


/* "Prefer email?" line under the quote-form intro */
.quote-email-line {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted-on-dark);
}
.quote-email-line a {
  font-weight: 600;
  color: var(--red-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quote-email-line a:hover { color: var(--white); }

/* The contact card now carries a second email row; keep the long addresses
   from breaking mid-word on narrow screens. */
.contact-email { word-break: break-word; }


/* Success page: spacing between the phone block and the email line */
.status-contact-label { margin-top: 18px; }


/* Long addresses like quotes@truenorthpmldn.com must not split mid-word in the
   narrow contact card. Allow a break only at the "@" and the dots. */
.contact-email {
  font-size: .9375rem;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  max-width: 100%;
}
/* The flex row must be allowed to shrink, or a long address pushes the card
   wider than a 320px screen. */
.contact-email span {
  hyphens: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 359px) {
  .contact-email { font-size: .875rem; gap: 8px; }
}


/* ==========================================================================
   26. TOUCH TARGETS
   Footer and legal links are short words ("FAQ", "Home") and rendered at a
   height below the 44px comfortable-tap guideline. Padding is added on touch
   screens only, so the desktop footer keeps its tighter rhythm.
   ========================================================================== */
@media (max-width: 767px) {
  /* Block-level so the tap row spans the column width, not just the word.
     "FAQ" is three characters wide and was a 32px-wide target. */
  .footer-links a,
  .footer-nav a,
  .footer-social a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .legal-links a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The checkbox itself is small, but the whole tile is the label and therefore
   the tap target. Nudge the box up slightly for easier aiming. */
.check-tile input { width: 22px; height: 22px; }