/* ==========================================================================
   ILESHIFT — Main stylesheet
   Mobile-first: base styles are for phones, media queries add tablet/desktop.

   Contents
   1.  Design tokens (colors, fonts, spacing)
   2.  Base / reset
   3.  Layout helpers
   4.  Buttons
   5.  Header + navigation
   6.  Hero
   7.  Trust bar
   8.  Sections + headings
   9.  Service cards
   10. Why Ileshift
   11. How it works
   12. Service area
   13. FAQ accordion
   14. Quote form
   15. Footer
   16. Mobile "Call or Text" bar
   17. Policy pages
   18. Scroll fade-in
   19. 404 page
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   Brand palette is black, white and red only (plus neutral grays).
   Change a color here and it updates across the whole site.
   ========================================================================== */
:root {
  /* Reds */
  --red: #D1272B;           /* Buttons, links, small red text (passes contrast on white) */
  --red-bright: #E5383B;    /* Brand red: logo, big headline accents, red on black */
  --red-dark: #A81E22;      /* Hover / pressed state */
  --red-tint: #FDEDED;      /* Soft red backgrounds behind icons */
  --red-line: #F6C9CA;      /* Soft red borders */

  /* Black, white and neutral grays */
  --black: #0A0A0A;
  --ink: #18181B;           /* Main body text */
  --gray-800: #27272A;
  --gray-700: #3F3F46;
  --gray-600: #52525B;      /* Secondary text */
  --gray-400: #A1A1AA;
  --gray-300: #D4D4D8;
  --gray-200: #E4E4E7;      /* Borders */
  --gray-100: #F4F4F5;      /* Light section background */
  --gray-50: #FAFAFA;
  --white: #FFFFFF;

  /* Type */
  --font-head: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shape + depth */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05), 0 2px 6px rgba(10, 10, 10, 0.05);
  --shadow: 0 6px 16px rgba(10, 10, 10, 0.06), 0 16px 40px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 10px 30px rgba(10, 10, 10, 0.08), 0 30px 70px rgba(10, 10, 10, 0.12);

  /* Layout */
  --header-h: 68px;
  --container: 1160px;
  --gutter: 16px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}


/* ==========================================================================
   2. Base / reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px); /* Anchors land below the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

::selection { background: var(--red); color: var(--white); }

/* Clear focus ring for keyboard users (red, never browser-default blue) */
:focus-visible {
  outline: 3px solid var(--red-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Hidden but still read by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link for keyboard users */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Default icon style (inline SVG line icons) */
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s,
              border-color 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 20px; height: 20px; }

/* Solid red (main call to action) */
.btn--red {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(209, 39, 43, 0.28);
}
.btn--red:hover {
  background: var(--red-dark);
  box-shadow: 0 10px 24px rgba(209, 39, 43, 0.32);
}

/* Black outline (secondary) */
.btn--outline {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--outline:hover {
  background: var(--black);
  color: var(--white);
}

/* White outline (for black backgrounds) */
.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--outline-light:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.btn--sm { min-height: 42px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.7; cursor: wait; transform: none; }


/* ==========================================================================
   5. Header + navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Added by script.js once you scroll a little */
.site-header.is-scrolled {
  border-bottom-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}

/* Logo: mark + wordmark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--black);
  text-decoration: none;
}
.logo-mark { width: 30px; height: 30px; }

/* Hamburger button (phones only) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
/* Turns into an X when open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel (drops down under the header) */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gutter) 24px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  display: block;
  padding: 0.95rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
}
.nav-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.nav-actions .btn { width: 100%; }

/* Desktop navigation */
@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-list { display: flex; gap: 1.75rem; }
  .nav-list a {
    position: relative;
    padding: 0.35rem 0;
    font-size: 0.975rem;
    border: 0;
  }
  /* Red underline slides in on hover */
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }
  .nav-list a:hover::after,
  .nav-list a:focus-visible::after { transform: scaleX(1); }
  .nav-actions { display: flex; align-items: center; gap: 10px; margin: 0; }
  .nav-actions .btn { width: auto; }
}

/* Between tablet and wide desktop the header phone button shows its icon only */
@media (min-width: 900px) and (max-width: 1099px) {
  .site-nav { gap: 1.5rem; }
  .nav-list { gap: 1.25rem; }
  .header-phone { padding-inline: 0.75rem; }
  .header-phone-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}


/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 44px 0 56px;
  background:
    radial-gradient(700px circle at 100% 0%, rgba(229, 56, 59, 0.08), transparent 60%),
    var(--white);
}

.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red-bright);
  border-radius: 2px;
}

.hero h1 {
  font-size: clamp(2.5rem, 9vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--red-bright); }

.lead {
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--gray-600);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-actions .btn { flex: 1 1 200px; }

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
}
.hero-note .icon { width: 18px; height: 18px; color: var(--red); }

/* Hero illustration (an <img> can replace the SVG at any time) */
.hero-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--gray-100) 0%, var(--white) 70%);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-media svg { width: 86%; height: auto; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hero { padding: 72px 0 96px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
  .hero-actions .btn { flex: 0 0 auto; }
}


/* ==========================================================================
   7. Trust bar
   ========================================================================== */
.trust {
  padding: 22px 0;
  background: var(--gray-50);
  border-block: 1px solid var(--gray-200);
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.trust-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--red);
  background: var(--red-tint);
  border-radius: 12px;
}
.trust-icon .icon { width: 21px; height: 21px; }

@media (min-width: 900px) {
  .trust-list { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}


/* ==========================================================================
   8. Sections + headings
   ========================================================================== */
.section { padding: 72px 0; }
.section--gray { background: var(--gray-100); }
.section--dark { background: var(--black); color: var(--gray-300); }
.section--dark h2,
.section--dark h3 { color: var(--white); }

.section-head {
  max-width: 660px;
  margin-bottom: 40px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.section--dark .section-kicker { color: var(--red-bright); }

.section-title { font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 900; }

.section-sub {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--gray-600);
}
.section--dark .section-sub { color: var(--gray-400); }

@media (min-width: 900px) {
  .section { padding: 104px 0; }
  .section-head { margin-bottom: 56px; }
}


/* ==========================================================================
   9. Service cards
   ========================================================================== */
.card-grid {
  display: grid;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--gray-300);
  box-shadow: var(--shadow);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  color: var(--red);
  background: var(--red-tint);
  border-radius: 14px;
  transition: background-color 0.25s, color 0.25s;
}
.card-icon .icon { width: 26px; height: 26px; }
.card:hover .card-icon { background: var(--red); color: var(--white); }

.card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.card p { flex: 1; color: var(--gray-600); }
.card p.card-price {
  flex: 0 0 auto;
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red);
}

.services-note {
  max-width: 640px;
  margin: 28px auto 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--gray-600);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: 6px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
}
.card-link .icon { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.card-link:hover { color: var(--red-dark); }
.card-link:hover .icon { transform: translateX(4px); }

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}


/* ==========================================================================
   10. Why Ileshift (black section)
   ========================================================================== */
.why-grid {
  display: grid;
  gap: 20px;
}

.why-item {
  position: relative;
  padding: 32px 28px;
  background: #141414;
  border: 1px solid var(--gray-800);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.why-item:hover { transform: translateY(-4px); border-color: var(--gray-700); }

.why-num {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: var(--red-bright);
}
.why-item h3 { font-size: 1.4rem; margin-bottom: 10px; }
.why-item p { margin: 0; color: var(--gray-400); }

@media (min-width: 900px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}


/* ==========================================================================
   11. How it works (numbered steps)
   ========================================================================== */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}

.step-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--white);
  background: var(--black);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s, transform 0.25s var(--ease);
}
.step:hover .step-num { background: var(--red); transform: rotate(-4deg); }

.step h3 { font-size: 1.25rem; margin: 6px 0 8px; }
.step p { margin: 0; color: var(--gray-600); }

/* Phones/tablets: vertical line between steps */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 64px;
  bottom: -22px;
  width: 2px;
  background: var(--gray-300);
}

@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .step { grid-template-columns: 1fr; gap: 20px; }
  .step h3 { margin-top: 0; }
  /* Desktop: dashed line connecting the numbers */
  .step:not(:last-child)::after {
    left: 72px;
    right: -20px;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--gray-300) 0 8px, transparent 8px 14px);
  }
}


/* ==========================================================================
   12. Service area
   ========================================================================== */
.area-grid {
  display: grid;
  gap: 20px;
}

.area-card {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.area-card .card-icon { margin-bottom: 18px; }
.area-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.area-card p { margin: 0; color: var(--gray-600); }

/* Travel-fee card is black for contrast */
.area-card--dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--gray-300);
}
.area-card--dark h3 { color: var(--white); }
.area-card--dark p { color: var(--gray-400); }
.area-card--dark .card-icon { background: rgba(229, 56, 59, 0.16); color: var(--red-bright); }

/* Two-column rows: hours, travel fees */
.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
}
.info-list li:last-child { border-bottom: 0; }
.info-list li > span:first-child { font-weight: 600; color: var(--ink); }
.info-list li > span:last-child { text-align: right; }
.area-card--dark .info-list li { border-color: var(--gray-800); }
.area-card--dark .info-list li > span:first-child { color: var(--white); }

.info-note {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
}
.area-card .info-note { margin-top: 14px; }

/* Pill lists: towns served, payment methods */
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-list li {
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
}

@media (min-width: 640px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .area-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}


/* ==========================================================================
   13. FAQ accordion (uses native <details>, works without JavaScript)
   ========================================================================== */
.faq-list {
  max-width: 820px;
  margin-inline: auto;
}

.faq-item {
  margin-bottom: 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:hover { border-color: var(--gray-300); }
.faq-item[open] { border-color: var(--gray-300); box-shadow: var(--shadow); }

.faq-item summary {
  position: relative;
  padding: 20px 60px 20px 22px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Plus sign that turns into an X */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::before { transform: rotate(45deg); background: var(--red); }
.faq-item[open] summary::after { transform: rotate(135deg); background: var(--red); }

.faq-answer {
  padding: 0 22px 22px;
  color: var(--gray-600);
}
.faq-answer p { margin: 0; }
.faq-answer a { color: var(--red); font-weight: 600; }


/* ==========================================================================
   14. Quote form
   ========================================================================== */
.quote-grid {
  display: grid;
  gap: 36px;
  align-items: start;
}

.quote-intro .section-title { margin-bottom: 16px; }

.quote-contact {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.quote-contact a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-weight: 600;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.quote-contact a:hover { border-color: var(--black); transform: translateX(3px); }
.quote-contact small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
}

/* Hours box under the phone and email links */
.quote-hours {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
}
.quote-hours > div { flex: 1; min-width: 0; }
.quote-hours h3 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gray-600);
}
.quote-hours .info-list li { padding: 6px 0; font-size: 0.9375rem; }
.quote-hours .info-note { margin-top: 8px; font-size: 0.875rem; }

.form-card {
  padding: 26px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.form-grid {
  display: grid;
  gap: 18px;
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field label,
.field legend {
  margin-bottom: 7px;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.field .optional { font-weight: 500; color: var(--gray-600); }

fieldset.field { margin: 0; padding: 0; border: 0; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem; /* 16px stops iPhones zooming in on focus */
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; }

/* Custom dropdown arrow */
.field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181B' stroke-width='2.5' 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 14px center;
  background-size: 18px;
  cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder { color: #71717A; } /* 4.8:1 on white */

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gray-400); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(229, 56, 59, 0.15);
}

/* Stop Chrome's light-blue autofill background */
.field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  -webkit-text-fill-color: var(--ink);
}

/* Flash when a service is picked from a "Get a quote" link */
.field select.is-highlighted {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 56, 59, 0.2);
}

/* Pill-style radio buttons */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.field .choice {
  position: relative;
  margin: 0;
  font-weight: inherit;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.choice span:hover { border-color: var(--black); }
.choice input:checked + span {
  color: var(--white);
  background: var(--black);
  border-color: var(--black);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--red-bright);
  outline-offset: 2px;
}

/* Error states (set by script.js) */
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red); }
.field.has-error .choice span { border-color: var(--red-line); }

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 7px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--red);
}
.field-error:empty { display: none; }

/* Hidden spam trap (bots fill it, people never see it) */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit { margin-top: 26px; }

.form-consent {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gray-600);
  text-align: center;
}
.form-consent a { color: var(--ink); font-weight: 600; }

/* Error banner after a failed send */
.form-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 12px;
}
.form-status:empty { display: none; }
.form-status.is-error {
  color: var(--red-dark);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
}

/* Success message (replaces the form after sending) */
.form-success {
  padding: 28px 8px;
  text-align: center;
}
.form-success:focus { outline: none; }
.success-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  color: var(--white);
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(209, 39, 43, 0.3);
  animation: pop 0.45s var(--ease);
}
.success-icon .icon { width: 32px; height: 32px; stroke-width: 3; }
.form-success h3 { font-size: 1.6rem; }
.form-success p { margin: 0 auto; max-width: 26rem; color: var(--gray-600); }

@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (min-width: 640px) {
  .form-card { padding: 36px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (min-width: 1000px) {
  .quote-grid { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
  .quote-intro { position: sticky; top: calc(var(--header-h) + 32px); }
}


/* ==========================================================================
   15. Footer
   ========================================================================== */
.site-footer {
  padding: 64px 0 28px;
  background: var(--black);
  color: var(--gray-400);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-800);
}

.site-footer .logo { color: var(--white); }
.footer-tagline { max-width: 22rem; margin: 14px 0 20px; }

.footer-heading {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer-links a {
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }
.footer-links li { display: flex; align-items: flex-start; gap: 10px; }
.footer-links .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--red-bright); }
.footer-hours { line-height: 1.55; }
.footer-hours em { display: block; margin-top: 4px; font-style: normal; color: var(--gray-300); }

.footer-bottom {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  font-size: 0.875rem;
}
.footer-disclaimer { margin: 0; color: var(--gray-400); }
.footer-disclaimer strong { color: var(--white); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.footer-legal p { margin: 0; }
.footer-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--white); text-decoration: underline; }

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 56px; }
}


/* ==========================================================================
   16. Mobile "Call or Text" bar (phones only)
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--black);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.3);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.mobile-cta-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}
.mobile-cta .btn { min-height: 46px; padding: 0.5rem 1.05rem; }

/* Hidden while the mobile menu is open */
body.menu-open .mobile-cta { transform: translateY(150%); opacity: 0; }

/* Leave room so the bar never covers the footer */
body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

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


/* ==========================================================================
   17. Policy pages (terms, refunds, privacy)
   ========================================================================== */
.page-hero {
  padding: 48px 0 36px;
  background:
    radial-gradient(600px circle at 100% 0%, rgba(229, 56, 59, 0.07), transparent 60%),
    var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.page-hero h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 900; margin-bottom: 12px; }
.page-hero p { margin: 0; color: var(--gray-600); }

.policy {
  max-width: 760px;
  margin-inline: auto;
  padding: 40px var(--gutter) 80px;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.policy h2 {
  margin-top: 2.2em;
  font-size: 1.5rem;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.policy ul { padding-left: 1.25rem; }
.policy li { margin-bottom: 0.5em; }
.policy li::marker { color: var(--red); }
.policy a { color: var(--red); font-weight: 600; }

.policy-intro { margin-top: 0; }

/* Highlighted summary box at the top of a policy */
.policy-summary {
  margin: 24px 0 0;
  padding: 18px 20px 6px;
  background: var(--red-tint);
  border: 1px solid var(--red-line);
  border-left: 5px solid var(--red);
  border-radius: 14px;
}
.policy-summary p { margin: 0 0 8px; font-weight: 700; color: var(--red-dark); }

/* "On this page" list */
.policy-toc {
  margin: 28px 0 0;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.policy-toc p {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.policy-toc ol { margin: 0; padding-left: 1.25rem; columns: 1; }
.policy-toc li { margin-bottom: 0.3em; }
.policy-toc a { color: var(--ink); font-weight: 500; text-decoration: none; }
.policy-toc a:hover { color: var(--red); text-decoration: underline; }

@media (min-width: 640px) {
  .policy-toc ol { columns: 2; column-gap: 32px; }
}


/* ==========================================================================
   19. 404 page
   ========================================================================== */
.not-found {
  padding: 80px 0 96px;
  text-align: center;
  background:
    radial-gradient(600px circle at 50% 0%, rgba(229, 56, 59, 0.08), transparent 60%),
    var(--white);
}
.not-found-code {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: clamp(5rem, 22vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--red-bright);
}
.not-found h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; }
.not-found p { max-width: 32rem; margin: 0 auto; color: var(--gray-600); }
.not-found .hero-actions { justify-content: center; }
.not-found .hero-actions .btn { flex: 0 1 auto; }


/* ==========================================================================
   18. Scroll fade-in
   The "js" class is added in <head>, so content stays visible if JS is off.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}