/* Top Gear Car Wash — Innisfail
   Plain CSS, no build step. Tokens first, then base, then sections.

   Palette comes from the building: Innisfail is cobalt blue, warm yellow and
   grey concrete, and the wordmark is orange/amber. The "modern" is carried by
   space, scale and photography rather than by a dark theme. */

:root {
  /* ---- colour ---- */
  --blue-950: #06182b;
  --blue-900: #0b2742;
  --blue-800: #123a63;
  --blue-700: #17508c;
  --blue-500: #2b7fd4;
  --blue-300: #8fc2f0;

  --amber-300: #ffcc78;
  --amber-400: #ffb648;
  --amber-500: #f7941e;
  --amber-600: #d97406;

  --paper:     #fbfaf7;
  --paper-2:   #f2eee7;
  --paper-3:   #e7e1d7;
  --ink:       #141b24;
  --ink-2:     #47535f;
  --ink-3:     #6f7b87;
  --line:      #ded7cb;

  /* ---- type ---- */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  --t-hero:  clamp(2.6rem, 1.3rem + 5.2vw, 5.6rem);
  --t-h2:    clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3:    clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-lead:  clamp(1.075rem, 0.98rem + 0.45vw, 1.35rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* ---- space ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- layout ---- */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: 1rem;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow: 0 1px 2px rgb(6 24 43 / 0.06), 0 8px 24px -8px rgb(6 24 43 / 0.14);
  --shadow-lg: 0 2px 4px rgb(6 24 43 / 0.06), 0 24px 56px -16px rgb(6 24 43 / 0.28);
}

@media (min-width: 40em) {
  :root { --gutter: 2rem; }
}

/* Ultrawide. Without these the whole page sits in a 1180px ribbon down the
   middle of a 3200px monitor and reads as stranded. The container grows in two
   steps and the body text grows once; the type clamps deliberately stop, so
   headings don't become billboards. */
@media (min-width: 100em) {
  :root {
    --wrap: 1320px;
    --gutter: 3rem;
    --t-body: 1.125rem;
  }
}

@media (min-width: 140em) {
  :root { --wrap: 1460px; }
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.012em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

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

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

ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* ---------- helpers ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--dark {
  background: var(--blue-950);
  color: var(--paper);
}

.section--tint {
  background: var(--paper-2);
}

.eyebrow {
  display: block;
  margin: 0 0 var(--s-4);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.section--dark .eyebrow { color: var(--amber-400); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

.section--dark .lead { color: var(--blue-300); }

.section__head {
  max-width: 62ch;
  margin-bottom: var(--s-7);
}

.section__head h2 + .lead,
.split__copy h2 + .lead { margin-top: var(--s-5); }

/* A value that must be impossible to miss — rates, clearances. */
.figure {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.section--dark .figure { color: #fff; }

.figure__unit {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-3);
}

.section--dark .figure__unit { color: var(--blue-300); }

/* Anything not yet confirmed by the owner ships visible, never invented. */
.todo {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 2px dashed var(--amber-600);
  border-radius: 6px;
  background: #fff5e6;
  color: #8a4b00;
  font-size: max(0.42em, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.95em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--blue-950);
}

.btn--primary:hover {
  background: var(--amber-400);
  border-color: var(--amber-400);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--paper);
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 0.1);
}

.btn--dark {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: #fff;
}

.btn--dark:hover {
  background: var(--blue-800);
  border-color: var(--blue-800);
}

/* ---------- brandmark ---------- */

/* The wordmark is the client's artwork and stays a flat image; the town is
   real text stacked under it. That keeps it selectable and crawlable, lets it
   match "Top Gear Car Wash Innisfail" on the Google listing, and means it
   stays sharp at any size without a second raster. Used on both dark
   surfaces — the sticky header and the footer. */

.brandmark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  text-decoration: none;
}

/* The rule is the span's own border, so it is exactly as wide as the logo
   sitting above it at every breakpoint — no magic width to keep in sync. */
.brandmark__place {
  border-top: 1px solid rgb(255 255 255 / 0.18);
  padding-top: var(--s-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
  /* Tracking is added after every letter including the last, which hangs an
     empty 0.34em off the right and makes centred text look shifted left.
     Half of it back as indent puts the word optically centre again. */
  text-indent: 0.17em;
  line-height: 1;
  color: var(--blue-300);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue-950);
  color: var(--paper);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: 0;
  padding-block: var(--s-3);
}

.site-header__logo {
  order: 1;
  flex: 0 0 auto;
}

.site-header__logo img {
  width: 150px;
  height: 44px;
  object-fit: contain;
}

@media (min-width: 40em) {
  .site-header__logo img { width: 178px; height: 52px; }
}

/* The toggle is two anchors, not a checkbox and not a script. The panel opens
   on :target, which means tapping any link inside it moves the target and
   closes the menu on its way to the section — the thing a checkbox hack
   cannot do without JavaScript. The open/close anchors sit after the panel in
   the DOM so the sibling combinator can reach them; `order` puts them back
   where they belong on screen. */

.nav-burger {
  order: 2;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-1);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}

.nav-burger:hover { color: var(--amber-400); }

.nav-burger__box {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}

.nav-burger__box::before,
.nav-burger__box::after,
.nav-burger__box span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-burger__box::before { top: 0; }
.nav-burger__box span { top: 6px; }
.nav-burger__box::after { bottom: 0; }

.nav-burger--close .nav-burger__box::before { top: 6px; rotate: 45deg; }
.nav-burger--close .nav-burger__box::after { bottom: 6px; rotate: -45deg; }
.nav-burger--close .nav-burger__box span { opacity: 0; }

.nav-burger--close { display: none; }

#menu:target ~ .nav-burger--open { display: none; }
#menu:target ~ .nav-burger--close { display: inline-flex; }

.site-nav-panel {
  order: 3;
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}

#menu:target { grid-template-rows: 1fr; }

.site-nav-panel__inner {
  overflow: hidden;
  min-height: 0;
}

.site-nav {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-3) 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  padding-block: var(--s-3);
  border-bottom: 1px solid rgb(255 255 255 / 0.13);
}

.site-nav a:hover { color: var(--amber-400); }

.site-header__hours {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-4) var(--s-2);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--blue-300);
  white-space: nowrap;
}

.site-header__hours::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d98a;
}

@media (min-width: 52em) {
  .site-header__inner { row-gap: var(--s-2); }

  .nav-burger,
  #menu:target ~ .nav-burger--close { display: none; }

  /* The wrappers vanish and the nav becomes a flex item of the header again. */
  .site-nav-panel,
  .site-nav-panel__inner { display: contents; }

  .site-nav {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-5);
    margin-inline-start: auto;
    padding-block: 0;
    font-size: var(--t-small);
    font-weight: 600;
  }

  .site-nav a {
    color: var(--blue-300);
    padding-block: var(--s-1);
    border-bottom: 2px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
  }

  .site-nav a:hover {
    color: #fff;
    border-bottom-color: var(--amber-500);
  }

  /* The nav comes back inline well before desktop; the hours pill needs the
     room a tablet doesn't have, so it waits. */
  .site-header__hours { display: none; }
}

@media (min-width: 64em) {
  .site-header__hours {
    order: 3;
    display: inline-flex;
    padding-block: 0;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--blue-950);
  color: var(--paper);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgb(6 24 43 / 0.94) 0%,
      rgb(6 24 43 / 0.86) 38%,
      rgb(6 24 43 / 0.52) 72%,
      rgb(6 24 43 / 0.44) 100%),
    linear-gradient(to bottom,
      rgb(6 24 43 / 0.55) 0%,
      rgb(6 24 43 / 0.15) 40%,
      rgb(6 24 43 / 0.75) 100%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 9vw, 8.5rem);
}

.hero__copy {
  max-width: 40ch;
}

.hero h1 {
  color: #fff;
}

.hero h1 em {
  font-style: normal;
  color: var(--amber-400);
}

.hero__lead {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: #d6e4f2;
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

.hero__stat dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.hero__stat dd {
  margin: var(--s-1) 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

/* ---------- three ways ---------- */

.ways {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

/* Three cards, so auto-fit's 2-across leaves one stranded on its own row
   through the whole tablet range. Go 1 -> 3 and skip it. */
@media (min-width: 62em) {
  .ways { grid-template-columns: repeat(3, 1fr); }
}

.way {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.way:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.way__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
}

/* Full-width card on a tablet: a 4:3 image would be 500px tall. */
@media (min-width: 40em) and (max-width: 61.999em) {
  .way__media { aspect-ratio: 16 / 9; }
}

.way__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A photo the owner hasn't taken yet. Visible on purpose — it drives the shot
   list, and it can't be mistaken for finished work. */
.way__media--todo {
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background:
    repeating-linear-gradient(-45deg,
      #fff5e6 0 12px, #ffeacc 12px 24px);
  border-bottom: 2px dashed var(--amber-600);
}

.way__media--todo p {
  margin: 0;
  color: #8a4b00;
  font-size: var(--t-small);
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
}

.way__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-5);
}

.way__count {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.way p {
  color: var(--ink-2);
  font-size: var(--t-small);
}

.way__price {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.way__link {
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  color: var(--blue-700);
}

.way__link:hover { text-decoration: underline; }

/* ---------- split: media beside copy ---------- */

.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 55em) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
  .split--flip .split__media { order: 2; }
}

.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow);
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 55em) {
  .split__media img {
    aspect-ratio: 3 / 4;
    max-height: 640px;
  }
}

/* ---------- clearance: the numbers an RV owner needs ---------- */

.clearance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-5);
  margin: var(--s-7) 0;
  padding: var(--s-6);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-lg);
}

.clearance__item dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.clearance__item dd {
  margin: var(--s-2) 0 0;
}

/* ---------- spec list ---------- */

.specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

@media (min-width: 34em) {
  .specs { grid-template-columns: repeat(2, 1fr); }
}

/* Explicit counts rather than auto-fit: auto-fit picked 3 for the 4-item grid
   and 4 for the 6-item grid, leaving an orphan in both. */
@media (min-width: 62em) {
  .specs--4 { grid-template-columns: repeat(4, 1fr); }
  .specs--6 { grid-template-columns: repeat(3, 1fr); }
}

.spec {
  padding-top: var(--s-4);
  border-top: 2px solid var(--line);
}

.section--dark .spec { border-top-color: rgb(255 255 255 / 0.22); }

.spec dt,
.spec h3 {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: var(--s-2);
}

.section--dark .spec dt,
.section--dark .spec h3 { color: var(--amber-400); }

.spec dd,
.spec p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.section--dark .spec dd,
.section--dark .spec p { color: #cddced; }

.spec strong { color: var(--ink); }
.section--dark .spec strong { color: #fff; }

/* ---------- feature chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.chips li {
  padding: 0.45em 0.9em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: var(--t-small);
  font-weight: 600;
}

.section--dark .chips li {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.2);
  color: #fff;
}

/* ---------- numbered steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

.steps li {
  counter-increment: step;
  padding-top: var(--s-4);
  border-top: 2px solid var(--line);
}

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--s-2);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--amber-600);
}

.steps h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--s-2);
}

.steps p {
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* ---------- packages ---------- */

.packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-7);
}

@media (min-width: 48em) {
  .packages { grid-template-columns: repeat(3, 1fr); }
}

.package {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.package--top {
  background: var(--blue-950);
  border-color: var(--blue-950);
  color: #fff;
}

.package__name {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.package--top .package__name { color: var(--amber-400); }

.package__price {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.package p {
  font-size: var(--t-small);
  color: var(--ink-2);
}

.package--top p { color: #cddced; }

/* A note that qualifies a claim — never decorative. */
.note {
  max-width: 78ch;
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--amber-500);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.section--dark .note {
  background: rgb(255 255 255 / 0.06);
  color: #cddced;
}

/* ---------- location ---------- */

.location {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 55em) {
  .location {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-8);
  }
}

.location__map {
  border: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--paper-3);
}

.address {
  font-style: normal;
  font-size: var(--t-lead);
  line-height: 1.45;
  font-weight: 600;
}

.hours {
  margin-top: var(--s-6);
}

.hours dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.hours dd {
  margin: var(--s-2) 0 0;
  font-size: var(--t-lead);
  font-weight: 700;
}

.hours dd span {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
}

/* ---------- form ---------- */

.form {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  /* A 1460px-wide textarea is nobody's idea of a form. */
  max-width: 820px;
}

@media (min-width: 42em) {
  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
}

.field {
  display: block;
}

.field > span {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-small);
  font-weight: 700;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8em 0.9em;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.16s ease;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--blue-500);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

/* Honeypot. Hidden from people, visible to the bots that fill everything in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  justify-self: start;
}

.form__fine {
  font-size: var(--t-micro);
  color: var(--ink-3);
  max-width: 60ch;
}

/* The form only ever renders on the dark section, where --ink-3 lands at about
   3.5:1 — under AA for text this small. Lift it, and make the privacy link
   visibly a link rather than a slightly different grey. */
.section--dark .form__fine { color: #a8bccf; }

.section--dark .form__fine a {
  color: var(--blue-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.section--dark .form__fine a:hover { color: var(--amber-400); }

/* ---------- faq ---------- */

.faq {
  max-width: var(--wrap-narrow);
  margin-top: var(--s-6);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  padding: var(--s-5) var(--s-6) var(--s-5) 0;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--amber-600);
}

.faq details[open] summary::after { content: "\2013"; }

.faq details > *:not(summary) {
  margin-bottom: var(--s-5);
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--blue-950);
  color: var(--blue-300);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-small);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--s-7);
  }
}

.site-footer img {
  width: 178px;
  height: 52px;
  object-fit: contain;
}

.site-footer h2 {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: var(--s-3);
}

.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer address { font-style: normal; color: #fff; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: var(--t-micro);
}

/* ---------- small utilities ---------- */

.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-4 { margin-top: var(--s-4); }
.mt-3 { margin-top: var(--s-3); }
.muted { color: var(--ink-2); }

/* ---------- thank-you page ---------- */

/* Short page, so give it enough height not to look like an error. */
.thanks {
  display: flex;
  align-items: center;
  min-height: 68vh;
}

.thanks__inner { max-width: 62ch; }

.thanks h1 {
  font-size: var(--t-h2);
  margin-bottom: var(--s-5);
}

.thanks .lead { color: #cddced; }
.thanks strong { color: #fff; }

.field span em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
}

.section--dark .field span em { color: var(--blue-300); }

/* ---------- legal pages (privacy) ---------- */

/* Long-form prose, which nothing else on the site is. One narrow column, a
   measure that stays readable, and headings small enough that a policy doesn't
   shout like the hero does. */
.legal {
  max-width: 72ch;
}

/* h1 defaults to --t-hero, which is right for "Eleven bays for everything you
   drive" and absurd for "What we do with your information". Same treatment
   .thanks h1 gets. */
.legal-page h1 {
  font-size: var(--t-h2);
  max-width: 18ch;
}

.legal h2 {
  font-size: var(--t-h3);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.legal h2:first-of-type { margin-top: var(--s-7); }

.legal h3 {
  font-size: 1.0625rem;
  margin-top: var(--s-6);
  letter-spacing: 0;
}

.legal p,
.legal li {
  max-width: 68ch;
  color: var(--ink-2);
}

.legal p { margin-top: var(--s-4); }

.legal ul {
  margin-top: var(--s-4);
  padding-left: 1.15em;
}

.legal li { margin-top: var(--s-3); }

.legal a { color: var(--blue-700); }
.legal a:hover { text-decoration: none; }

.legal strong { color: var(--ink); }

/* Who gets what, and where they are. A list rather than a table so it doesn't
   need horizontal scrolling on a phone. */
.legal__who {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.legal__who dt {
  font-weight: 700;
  color: var(--ink);
}

.legal__who dt + dd {
  margin: var(--s-2) 0 var(--s-5);
  color: var(--ink-2);
}

.legal__who dd:last-child { margin-bottom: 0; }

.legal__updated {
  margin-top: var(--s-6);
  font-size: var(--t-small);
  color: var(--ink-3);
}