/* ==========================================================================
   TINY TRUCK - styles.css
   Plain CSS, no frameworks. Organised top-to-bottom in the same order as
   the page: variables → base → nav → hero → sections → carousel → steps →
   about → gallery → reviews → quote form → footer → responsive tweaks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BRAND VARIABLES
   Change a colour here and it updates everywhere it's used.
   -------------------------------------------------------------------------- */
:root {
  --light-blue: #4FC0E8;   /* "Tiny" in the logo */
  --deep-blue:  #2C3E87;   /* "Truck" in the logo */
  --navy:       #22306A;   /* darker navy - footer, overlays */
  --orange:     #F7A128;   /* logo dot, slogan, call-to-action buttons */
  --page-bg:    #FCFBF8;   /* warm off-white page background */
  --ink:        #232F52;   /* main text colour */
  --tint:       #EDF7FC;   /* soft blue tint for alternating sections */

  --radius: 20px;                                  /* rounded corner size */
  --shadow: 0 10px 30px rgba(34, 48, 106, 0.10);   /* soft card shadow */
  --border: 1px solid rgba(34, 48, 106, 0.10);     /* thin subtle border */

  --font-head: "Baloo 2", sans-serif;
  --font-body: "Figtree", sans-serif;
}

/* --------------------------------------------------------------------------
   1. BASE / RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;             /* animated jumps to #anchors */
  scroll-padding-top: 84px;            /* stop anchors hiding under the fixed nav */
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
}

h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.2rem; }

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

a { color: var(--deep-blue); }

/* Visible keyboard-focus outline everywhere (accessibility) */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect users who turn off animations in their OS settings */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   2. LOGO LOCKUP (recreated in CSS - see the HTML comment in index.html
      for how to swap in a real image later)
   -------------------------------------------------------------------------- */
.logo {
  font-family: var(--font-head);
  font-weight: 800;
  text-decoration: none;
  line-height: 0.95;
}

.logo__tiny  { color: var(--light-blue); }
.logo__truck { color: var(--deep-blue); }
.logo__truck--white { color: #fff; }
.logo__dot   { color: var(--orange); }

.logo__slogan {
  display: block;
  color: var(--orange);
  font-size: 0.32em;                    /* scales with whatever size the lockup is */
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.5em;
}

/* Small horizontal version used in the nav */
.logo--nav {
  font-size: 1.45rem;
  display: flex;
  gap: 0.18em;
  align-items: baseline;
}

/* Real logo image in the nav - height is fixed, width follows the
   image's own proportions so it never distorts */
.logo--nav-img { display: flex; align-items: center; }
.logo--nav-img img { height: 52px; width: auto; }

/* The big hero logo image. A layered white glow + drop shadow keeps
   the navy "Truck." readable against the darkened photo behind it. */
.hero__logo {
  line-height: 0;                      /* no stray space around the image */
}

.hero__logo img {
  width: clamp(280px, 40vw, 460px);
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 46px rgba(255, 255, 255, 0.4))
    drop-shadow(0 4px 18px rgba(0, 0, 0, 0.25));
}

/* Footer version (medium, stacked) */
.logo--footer {
  font-size: 2rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   .btn is the shared pill shape; the modifiers change colour and size.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.7em 1.6em;
  border-radius: 999px;                /* fully round "pill" ends */
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Gentle lift on hover, press-down on click */
.btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34, 48, 106, 0.2); }
.btn:active { transform: translateY(0);   box-shadow: none; }

.btn--orange {
  background: var(--orange);
  color: #fff;
}
.btn--orange:hover { background: #e8920f; }

/* Solid light-blue button ("Tiny" in the logo) - hero Moving */
.btn--lightblue {
  background: var(--light-blue);
  color: #fff;
}
.btn--lightblue:hover { background: #35b0dd; }

/* Solid deep-blue button ("Truck" in the logo) - hero Demolition */
.btn--deepblue {
  background: var(--deep-blue);
  color: #fff;
}
.btn--deepblue:hover { background: #24336f; }

/* Frosted dark glass button (hero "DEMOLITION") */
.btn--glass {
  background: rgba(20, 28, 60, 0.35);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(20, 28, 60, 0.55); }

.btn--big {
  font-size: 1.1rem;
  padding: 0.9em 2.2em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn--nav { font-size: 0.95rem; padding: 0.55em 1.3em; }

/* --------------------------------------------------------------------------
   4. FIXED NAV
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(252, 251, 248, 0.82);   /* off-white, slightly see-through */
  backdrop-filter: blur(12px);              /* frosted-glass effect */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border);
}

.nav__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
}

.nav__links a {
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--light-blue); }

/* Social icons + quote button, grouped on the right of the nav */
.nav__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__social {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.nav__social a {
  display: flex;
  color: var(--deep-blue);
  transition: color 0.15s ease, transform 0.15s ease;
}

.nav__social a:hover {
  color: var(--light-blue);
  transform: translateY(-1px);
}

.nav__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   5. HERO
   min-height (not height) + svh units = no layout shift and no cut-off
   content on phones where the browser bar shows/hides.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.25rem 4rem;
  text-align: center;

  /* Photo + gradient stack: darker at the top and bottom for readable text,
     lighter in the middle so the photo still shines through.
     The navy colour at the end is the fallback while the photo loads.
     The photo is portrait, so "center 38%" keeps the truck in frame
     on wide screens instead of cropping to the sky. */
  background:
    linear-gradient(
      to bottom,
      rgba(15, 22, 50, 0.55) 0%,
      rgba(15, 22, 50, 0.28) 40%,
      rgba(15, 22, 50, 0.28) 60%,
      rgba(15, 22, 50, 0.62) 100%
    ),
    url("images/truck_driveway.jpg") center 38% / cover no-repeat,
    var(--navy);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.hero__sub {
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 500;
  max-width: 34em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.hero__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* The "scroll ⌄" cue pinned near the bottom of the hero */
.hero__scroll {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.hero__scroll-arrow {
  font-size: 1.5rem;
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* --------------------------------------------------------------------------
   6. GENERIC SECTION LAYOUT
   -------------------------------------------------------------------------- */
.section { padding: 4.5rem 0; }
.section--white { background: #fff; }
.section--tint  { background: var(--tint); }

.section__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Small orange all-caps label above each heading */
.kicker {
  color: var(--orange);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.kicker--light { color: var(--light-blue); }

/* --------------------------------------------------------------------------
   7. CAROUSEL (shared by Services + Reviews)
   The track is a normal horizontal scroller with scroll-snap, so swiping
   works natively on touch screens. JS only powers the dots underneath.
   -------------------------------------------------------------------------- */
.carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;       /* cards click into place */
  padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;

  /* Hide the scrollbar but keep it scrollable */
  scrollbar-width: none;               /* Firefox */
}
.carousel__track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.carousel__track > * {
  scroll-snap-align: start;
  flex: 0 0 min(320px, 82vw);          /* card width: 320px, or 82% of a small screen */
}

/* Dot indicators - flex-wrap lets long carousels (like the 22-photo
   jobs strip) flow onto a second row of dots on small screens */
.carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.carousel__dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(34, 48, 106, 0.25);
  cursor: pointer;
  padding: 0;
  transition: width 0.25s ease, background-color 0.25s ease;
}

/* The active dot stretches into an orange pill */
.carousel__dots button[aria-selected="true"] {
  width: 28px;
  background: var(--orange);
}

.carousel__hint {
  text-align: center;
  color: rgba(35, 47, 82, 0.45);
  font-size: 0.85rem;
  margin-top: 0.75rem;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   8. SERVICE CARDS
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;                    /* clips the photo's corners */
  display: flex;
  flex-direction: column;
}

.card__photo {
  height: 210px;
  overflow: hidden;
}

.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Subtle zoom when hovering the card */
.card:hover .card__photo img { transform: scale(1.05); }

/* Grey "photo coming soon" panel for cards without a photo yet */
.card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint);
  color: rgba(35, 47, 82, 0.5);
  font-weight: 600;
  font-size: 0.9rem;
}

.card__body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.card__body p { font-size: 0.95rem; }

/* Small orange chip label */
.chip {
  align-self: flex-start;
  background: rgba(247, 161, 40, 0.14);
  color: #c77b0a;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25em 0.9em;
  border-radius: 999px;
}

/* Blue price note at the bottom of each card */
.card__note {
  margin-top: auto;                    /* pushes it to the card's bottom edge */
  color: var(--deep-blue);
  font-weight: 700;
  font-size: 0.9rem !important;
}

/* --------------------------------------------------------------------------
   9. HOW IT WORKS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.step {
  background: var(--page-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}

.step h3 { margin: 0.9rem 0 0.4rem; }
.step p  { font-size: 0.95rem; }

/* Numbered squares, each with its own soft tint */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
}

.step__num--blue   { background: #E3F4FB; color: var(--deep-blue); }
.step__num--orange { background: #FDEFD8; color: #c77b0a; }
.step__num--green  { background: #E4F5E9; color: #2E7D46; }

/* --------------------------------------------------------------------------
   10. ABOUT
   -------------------------------------------------------------------------- */
/* Wellington waterfront photo behind a soft off-white overlay - visible
   enough to feel like Wellington, faded enough that the text stays easy
   to read and the polaroids pop */
.section--waterfront {
  background:
    linear-gradient(rgba(252, 251, 248, 0.82), rgba(252, 251, 248, 0.82)),
    url("images/wgtn_sunset.jpg") center / cover no-repeat,
    var(--page-bg);
}

.about {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

.about__text p { margin-bottom: 1rem; }
.about__text .btn { margin-top: 0.5rem; }

/* A single clean photo - same rounded corners and soft shadow as the
   rest of the site, no tilt, no caption */
.about__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   11. PREVIOUS JOBS - swipeable photo strip
   The tiles sit inside the same scroll-snap carousel as the services
   and reviews sections (see .carousel above).
   -------------------------------------------------------------------------- */
.gallery__tile {
  position: relative;
  aspect-ratio: 4 / 5;                 /* consistent portrait tiles */
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
}

.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery__tile:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   12. REVIEWS
   -------------------------------------------------------------------------- */
/* Small line under the heading crediting where the reviews come from */
.reviews__source {
  margin: -1rem 0 1.5rem;
  color: rgba(35, 47, 82, 0.65);
  font-size: 0.95rem;
}

.review {
  background: #fff;
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review__stars {
  color: var(--orange);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
}

.review blockquote {
  font-size: 0.98rem;
  flex: 1;                             /* keeps names aligned across cards */
}

.review__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.88rem;
  line-height: 1.35;
}

/* Coloured circle with the customer's initial */
.review__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--light-blue);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   13. QUOTE FORM SECTION
   -------------------------------------------------------------------------- */
.quote {
  padding: 4.5rem 0;
  /* Wellington bays photo behind a heavy navy gradient overlay.
     The navy colour at the end is the fallback while the photo loads. */
  background:
    linear-gradient(
      to bottom,
      rgba(34, 48, 106, 0.88),
      rgba(28, 39, 88, 0.82)
    ),
    url("images/wgtn_bays.jpg") center / cover no-repeat,
    var(--navy);
}

.quote__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.quote__intro {
  text-align: center;
  color: #fff;
  margin-bottom: 2rem;
}
.quote__intro h2 { color: #fff; }
.quote__intro p  { max-width: 32em; margin: 0 auto; }

/* The white card that holds the form */
.quote__form {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(10, 16, 40, 0.35);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Two fields side by side (stacks on mobile) */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* The `hidden` attribute must win over the flex display above, so the
   delivery-address field (revealed only for moving jobs) truly hides. */
[hidden] { display: none !important; }

.form__field label {
  font-weight: 600;
  font-size: 0.9rem;
}

.form__optional {
  font-weight: 400;
  color: rgba(35, 47, 82, 0.55);
}

.form__field input,
.form__field select,
.form__field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--page-bg);
  border: 1.5px solid rgba(34, 48, 106, 0.2);
  border-radius: 12px;
  padding: 0.65em 0.9em;
  width: 100%;
  transition: border-color 0.15s ease;
}

.form__field textarea { resize: vertical; }

/* The photo-attach input: keep the browser's native picker but match
   the look of the other fields */
.form__field input[type="file"] {
  padding: 0.55em 0.9em;
  cursor: pointer;
}

.form__field input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  color: var(--deep-blue);
  background: var(--tint);
  border: none;
  border-radius: 999px;
  padding: 0.35em 1.1em;
  margin-right: 0.9em;
  cursor: pointer;
}

/* Small grey helper line under a field */
.form__hint {
  font-size: 0.82rem;
  color: rgba(35, 47, 82, 0.6);
}

/* Address type-ahead: the suggestions drop down below the input, so the
   field needs to be the positioning anchor. */
.addr-field { position: relative; }

.addr-suggestions {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.3rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1.5px solid rgba(34, 48, 106, 0.2);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
}

.addr-suggestion {
  padding: 0.55em 0.8em;
  border-radius: 8px;
  font-size: 0.92rem;
  cursor: pointer;
  line-height: 1.35;
}

/* Highlight on hover and on keyboard arrow-selection */
.addr-suggestion:hover,
.addr-suggestion.is-active {
  background: var(--tint);
  color: var(--deep-blue);
}

/* The running list of chosen photos under the file picker */
.photo-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.photo-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--tint);
  border-radius: 10px;
  padding: 0.4em 0.5em 0.4em 0.9em;
  font-size: 0.88rem;
}

.photo-list__remove {
  border: none;
  background: transparent;
  color: #b3402f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2em 0.6em;
  border-radius: 8px;
}
.photo-list__remove:hover { background: rgba(179, 64, 47, 0.1); }

/* The honeypot spam trap - parked far off-screen where humans never
   see it but bots still "find" it. (Not display:none, because some
   bots skip hidden fields.) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--light-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 192, 232, 0.25);
}

.form__submit {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.form__aside {
  font-size: 0.85rem;
  color: rgba(35, 47, 82, 0.7);
  max-width: 18em;
}

/* Submit button while the request is in flight */
#quote-submit:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/* Success (green) / error (red) message under the form */
.form__status {
  font-weight: 600;
  padding: 0.9em 1.2em;
  border-radius: 12px;
}
.form__status--ok  { background: #E4F5E9; color: #226B3B; }
.form__status--err { background: #FBE9E7; color: #B3402F; }

/* --------------------------------------------------------------------------
   14. FOOTER - four columns: brand, links, hours, find us
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 3.5rem 1.25rem 2rem;
}

.footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1fr 1.1fr;
  gap: 2rem;
}

.footer__col p { margin-top: 0.35rem; }

.footer__heading {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer a {
  color: #fff;
  font-weight: 600;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.footer a:hover { text-decoration-color: #fff; }

.footer__legal {
  max-width: 1120px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE - tablet (≤900px) and phone (≤640px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }

  .about {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .about__photo { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .nav__links { display: none; }       /* logo, socials + quote button on phones */

  /* Tighten the right-hand group so everything fits on small screens */
  .nav__right  { gap: 0.9rem; }
  .nav__social { gap: 0.7rem; }
  .nav__social svg { width: 18px; height: 18px; }

  /* On phones the truck sits right behind the headline, so the middle of
     the overlay needs to be a touch darker for the text to stay crisp */
  .hero {
    background:
      linear-gradient(
        to bottom,
        rgba(15, 22, 50, 0.60) 0%,
        rgba(15, 22, 50, 0.42) 40%,
        rgba(15, 22, 50, 0.42) 60%,
        rgba(15, 22, 50, 0.68) 100%
      ),
      url("images/truck_driveway.jpg") center 38% / cover no-repeat,
      var(--navy);
  }

  .hero__buttons {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .hero__buttons .btn { width: 100%; }

  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }

  .section { padding: 3.25rem 0; }
}

/* --------------------------------------------------------------------------
   16. SUBPAGES (faq.html, terms.html)
   Simple text pages that share the nav and footer with the main site.
   -------------------------------------------------------------------------- */
.subpage {
  max-width: 760px;
  margin: 0 auto;
  padding: 8rem 1.25rem 4rem;   /* top padding clears the fixed nav */
}

.subpage h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 1.5rem; }
.subpage h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.subpage p  { margin-bottom: 0.9rem; }

.subpage ul {
  margin: 0 0 0.9rem 1.4rem;
}
.subpage li { margin-bottom: 0.35rem; }

.subpage__back {
  display: inline-block;
  margin-top: 2.5rem;
}