/*
  OnTime Beyond Clean, "Signed Off" theme on the prototype's navy/lime palette.

  One rule worth knowing before editing: --accent-text flips per surface. On a
  light background it resolves to the darkened lime (readable); inside a navy
  section it resolves to the bright lime. Use var(--accent-text) for any text or
  icon that should be "the accent colour", and never raw --color-lime on light.
*/

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  --accent-text: var(--color-lime-ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */

.wrap {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--alt { background: var(--color-paper-alt); }

.section--ink {
  background: var(--color-navy);
  color: var(--color-paper);
  --accent-text: var(--color-lime);
}
.section--ink a { color: var(--color-paper); }

.section--pine {
  background: var(--color-navy-soft);
  color: var(--color-paper);
  --accent-text: var(--color-lime);
}

.section-head { max-width: 46ch; margin-bottom: 2.75rem; }
.section-head--wide { max-width: 60ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.9rem;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 58ch;
}

.rule {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-navy-soft) 25%, transparent);
  margin: 0;
}

/* Two-column "text beside a photo" block. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split--photo-first > .split__media { order: -1; }

@media (max-width: 900px) {
  .split,
  .split--wide-text { grid-template-columns: 1fr; }
}

/* ---------- Photos ---------- */

.figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-paper-alt);
  box-shadow: 0 24px 60px -34px rgba(21, 34, 58, 0.45);
}

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* Every image gets the same curve, including ones not wrapped in a figure. */
.card__media img,
.track__media img,
.brand__logo,
.footer-logo { border-radius: 0; }

/* The card itself is rounded and clips its contents, so the media inside must
   not round again or the image corners pull away from the card corners. */
.card,
.track { border-radius: var(--radius); }

/* Parallax: the image is oversized and shifted by JS, so the frame never
   shows an empty edge as it moves. */
.js-animate [data-parallax] img {
  will-change: transform;
  transform: scale(1.12);
}

.figure--band img { aspect-ratio: 21 / 8; }
.figure--tall img { aspect-ratio: 4 / 5; }

/* A photo used as a section background, with a scrim so text stays readable.
   The colour flip matters as much as the scrim: without it the section would
   inherit navy body text and sit invisibly on its own dark background. */
.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-paper);
  --accent-text: var(--color-lime);
}
.section--photo a { color: var(--color-paper); }
.section--photo .btn--primary { color: var(--color-navy); }
.section--photo > .section-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.section--photo > .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The lightest stop is 72% and not lower on purpose: over a bright photo, a
   55% scrim drops paper-on-navy text to about 3:1, which fails. At 72% it
   holds around 5:1 even against white. */
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-navy) 95%, transparent) 0%,
    color-mix(in srgb, var(--color-navy) 86%, transparent) 55%,
    color-mix(in srgb, var(--color-navy) 72%, transparent) 100%
  );
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s var(--ease-signature), background-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-lime);
  color: var(--color-navy);
}
.btn--primary:hover { background: color-mix(in srgb, var(--color-lime) 84%, #fff); }

.btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn--secondary:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.btn--ink { background: var(--color-navy); color: var(--color-paper); }
.btn--ink:hover { background: var(--color-navy-soft); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-navy) 12%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
}

/* The logo is a wide lockup, so it is sized by height and lets width follow. */
.brand__logo {
  height: 3.1rem;
  width: auto;
  max-width: min(58vw, 22rem);
  object-fit: contain;
}

.footer-logo {
  height: 2.6rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
  .brand__logo { height: 2.5rem; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-lime-ink); }

.site-nav__phone {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid color-mix(in srgb, var(--color-navy) 25%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-paper);
    border-bottom: 1px solid color-mix(in srgb, var(--color-navy) 12%, transparent);
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a {
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-navy) 10%, transparent);
  }
}

/* ---------- Home page slider ---------- */

.slider {
  position: relative;
  isolation: isolate;
  background: var(--color-navy);
  color: var(--color-paper);
  --accent-text: var(--color-lime);
  overflow: hidden;
}

.slider__media { position: absolute; inset: 0; z-index: -2; }

.slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slide) var(--ease-signature);
}
.slider__img.is-active { opacity: 1; }

.slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-navy) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-navy) 88%, transparent) 50%,
    color-mix(in srgb, var(--color-navy) 62%, transparent) 100%
  );
}

/* All slides occupy the same grid cell, so the block is as tall as the tallest
   and nothing jumps when they change. */
.slider__slides {
  display: grid;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(5rem, 10vw, 8rem);
}

.slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-slide) var(--ease-signature),
    visibility 0s linear var(--duration-slide);
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.slide__copy { max-width: 40rem; }

/* No frame and no border: the photo is just a rounded rectangle sitting on
   the background image. */
.slide__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.slide__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.slide__title { margin-bottom: 0.5em; color: var(--color-paper); }
.slide__text {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  max-width: 46ch;
  margin-bottom: 1.75rem;
  color: color-mix(in srgb, var(--color-paper) 88%, transparent);
}

@media (max-width: 900px) {
  .slide { grid-template-columns: 1fr; }
  .slide__media { display: none; }
}

.slider__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
}
.slider__controls > * { pointer-events: auto; }

.slider__dots { display: flex; gap: 0.5rem; align-items: center; }

.slider__dot {
  width: 2.25rem;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-paper) 35%, transparent);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.slider__dot[aria-current="true"] { background: var(--color-lime); }

.slider__arrows { display: flex; gap: 0.5rem; margin-left: auto; }

.slider__arrow {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-paper) 40%, transparent);
  background: color-mix(in srgb, var(--color-navy) 55%, transparent);
  color: var(--color-paper);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.slider__arrow:hover {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-navy);
}

.slider__img { transform: scale(1.08); }

/* ---------- Plain hero (inner pages) ---------- */

.hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5rem); position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title { margin-bottom: 0.5em; }

.hero__promise {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.hero__markers {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.hero__markers li { display: flex; align-items: center; gap: 0.5rem; }
.hero__markers li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent-text);
  flex: none;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-navy) 10%, transparent);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s var(--ease-signature);
}
.card:hover { border-color: color-mix(in srgb, var(--color-lime-ink) 45%, transparent); }

.card__media { margin: 0; background: var(--color-paper-alt); }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.card__body-wrap {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.section--ink .card,
.section--pine .card {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}

.card__title { margin: 0; font-size: 1.2rem; }
.card__price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-text);
  letter-spacing: 0.02em;
}
.card__body { margin: 0; font-size: 0.98rem; }
.card__link {
  margin-top: auto;
  padding-top: 0.75rem;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--color-lime-ink);
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.section--ink .card__link { color: var(--color-lime); }
.card__link:hover { gap: 0.65rem; }

/* Two-track split */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
}

.track {
  border: 1px solid color-mix(in srgb, var(--color-navy) 12%, transparent);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.track__media { margin: 0; }
.track__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.track__inner { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }

.track__price {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--color-lime-ink);
  margin: 0.25rem 0 1rem;
}

.track__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.55rem; }
.track__list li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.98rem; }
.track__list li::before {
  content: "\2713";
  color: var(--color-lime-ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.track .btn-row { margin-top: auto; }

/* ---------- Pain points ---------- */

.pains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 2.5rem;
}

.pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }

.pain-list li {
  padding-left: 1.25rem;
  border-left: 2px solid color-mix(in srgb, var(--accent-text) 70%, transparent);
}

.pain-list h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

.pain-list p { font-size: 0.97rem; margin: 0; opacity: 0.88; }

/* ---------- Process ---------- */

/* Four steps that need to read as four distinct stages, not one repeated
   block: each is a card, each carries its own big numeral, and the set
   staircases downward so the eye follows the sequence. */
.process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.75rem 1.25rem;
  align-items: start;
}

.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-navy) 10%, transparent);
  border-radius: var(--radius);
  padding: 3.25rem 1.5rem 1.6rem;
  box-shadow: 0 18px 40px -34px rgba(21, 34, 58, 0.5);
}

/* The staircase. Each card sits a little lower than the one before it. */
.step:nth-child(2) { margin-top: 1.25rem; }
.step:nth-child(3) { margin-top: 2.5rem; }
.step:nth-child(4) { margin-top: 3.75rem; }

/* The numeral, as a lime chip overlapping the top edge of its card. */
.step__number {
  position: absolute;
  top: -1.15rem;
  left: 1.5rem;
  min-width: 2.9rem;
  height: 2.3rem;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-lime);
  color: var(--color-navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Later steps get progressively more solid, so "further along" is visible at
   a glance rather than only readable. */
.step:nth-child(2) .step__number { background: color-mix(in srgb, var(--color-lime) 78%, var(--color-navy-soft)); }
.step:nth-child(3) .step__number { background: var(--color-navy-soft); color: var(--color-lime); }
.step:nth-child(4) .step__number { background: var(--color-navy); color: var(--color-lime); }
.step:nth-child(4) { border-color: color-mix(in srgb, var(--color-navy) 30%, transparent); }

.step__title { font-size: 1.12rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.96rem; margin: 0; color: var(--color-muted); }

/* The connector between cards, drawn only where they sit side by side. */
.step__link {
  position: absolute;
  top: -0.05rem;
  right: -1.25rem;
  width: 1.25rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-navy) 22%, transparent);
}

@media (max-width: 900px) {
  .step:nth-child(n) { margin-top: 0; }
  .step__link { display: none; }
}

.section--ink .step,
.section--photo .step {
  background: color-mix(in srgb, #fff 7%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
.section--ink .step p,
.section--photo .step p { color: color-mix(in srgb, var(--color-paper) 78%, transparent); }

/* ---------- Guarantee (the only place the alert red appears) ---------- */

.guarantee {
  border-left: 4px solid var(--color-alert);
  background: color-mix(in srgb, var(--color-alert) 6%, var(--color-surface));
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
}

.guarantee__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-alert);
  margin: 0 0 0.75rem;
}

.guarantee h2 { margin-bottom: 0.5rem; }

/* ---------- Suburb list ---------- */

.suburbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.suburbs a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.suburbs a:hover { border-bottom-color: var(--accent-text); }

/* ---------- Checklist inclusions (location pages) ---------- */

.inclusions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}

.inclusion-group {
  border-top: 2px solid var(--accent-text);
  padding-top: 1rem;
}

.inclusion-group h3 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.inclusion-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.inclusion-list li { display: flex; gap: 0.55rem; font-size: 0.95rem; align-items: baseline; }
.inclusion-list li::before {
  content: "\2713";
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.inclusion-list--excluded li::before {
  content: "\00D7";
  color: color-mix(in srgb, currentColor 55%, transparent);
}

/* ---------- FAQ ---------- */

.faq { max-width: 52rem; display: grid; gap: 0.25rem; }

.faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--color-navy) 14%, transparent);
  padding: 0.35rem 0;
}

.faq summary {
  cursor: pointer;
  padding: 0.9rem 2rem 0.9rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--accent-text);
  font-size: 1.2rem;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 2rem 1rem 0; margin: 0; opacity: 0.9; }

/* ---------- Forms ---------- */

.form { display: grid; gap: 1.25rem; max-width: 38rem; }

.form label { font-weight: 600; font-size: 0.92rem; display: block; margin-bottom: 0.35rem; }

.field-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-navy) 25%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
}
.field-input:focus-visible { border-color: var(--color-lime-ink); }

.field-help { font-size: 0.85rem; color: var(--color-muted); margin: 0.35rem 0 0; }

.errorlist {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--color-alert);
  font-size: 0.9rem;
}

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.75rem; }
.slots ul { list-style: none; margin: 0; padding: 0; display: contents; }

.slots label {
  display: block;
  border: 1px solid color-mix(in srgb, var(--color-navy) 22%, transparent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0;
  background: var(--color-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.slots label:hover { border-color: var(--color-lime-ink); }
.slots input { accent-color: var(--color-lime-ink); margin-right: 0.5rem; }
.slots label:has(input:checked) {
  border-color: var(--color-lime-ink);
  background: color-mix(in srgb, var(--color-lime) 28%, var(--color-surface));
}

.form-steps { display: grid; gap: 2.5rem; }

.form-step__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-lime-ink);
  margin: 0 0 0.75rem;
}

/* Required marker. Uses the alert red rather than the accent, so it reads as
   "you must" rather than as decoration. */
.req {
  color: var(--color-alert);
  font-weight: 700;
  margin-left: 0.15rem;
}

.form-required-note {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0;
}

.form label .muted { font-weight: 400; font-size: 0.85rem; }

.form-notice {
  border-left: 4px solid var(--color-alert);
  background: color-mix(in srgb, var(--color-alert) 8%, var(--color-surface));
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  max-width: 38rem;
}

/* The spam trap. Off-screen rather than display:none, because some bots skip
   fields that are outright hidden. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Address lookup ---------- */

.address-field { position: relative; }

.address-suggestions {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--color-navy) 18%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 18px 40px -28px rgba(21, 34, 58, 0.5);
  max-height: 16rem;
  overflow-y: auto;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
}
.address-suggestions[hidden] { display: none; }

.address-suggestions li { margin: 0; }

.address-suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
}
.address-suggestions button:hover,
.address-suggestions button[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-lime) 25%, var(--color-surface));
}

.address-status {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0.35rem 0 0;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-navy);
  color: color-mix(in srgb, var(--color-paper) 88%, transparent);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: 0.95rem;
  --accent-text: var(--color-lime);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-lime);
  margin-bottom: 1rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-links a { text-decoration: none; opacity: 0.9; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }

.footer-contact { font-family: var(--font-mono); font-size: 0.9rem; display: grid; gap: 0.5rem; }

.footer-blurb {
  max-width: 26ch;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--color-paper) 72%, transparent);
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 18%, transparent);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---------- Scroll and text animation ---------- */

/* Start states are only applied once JS has confirmed it will animate, so a
   failed CDN or reduced-motion leaves a complete, readable page. */
.js-animate [data-reveal],
.js-animate [data-process] .step {
  opacity: 0;
  transform: translateY(30px);
}

/* With GSAP driving each slide's contents, the container must not also slide
   or the two movements read as one mushy one. */
.js-animate .slide { transform: none; }

/* Headings split into words by JS, then rise into place a word at a time. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
/* Start state lives here, not in a gsap.set(), so the tween simply animates
   from whatever the stylesheet already put on screen. */
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-animate [data-reveal],
  .js-animate [data-process] .step { opacity: 1; transform: none; }
  .js-animate [data-parallax] img { transform: none; }
  .split-word > span { transform: none; opacity: 1; }
  .btn:hover { transform: none; }
  .slide { transform: none; }
  .slider__img { transform: none; }
}

/* ---------- Utilities ---------- */

.mono { font-family: var(--font-mono); }
.muted { color: var(--color-muted); }
.section--ink .muted,
.slider .muted,
.site-footer .muted { color: color-mix(in srgb, var(--color-paper) 75%, transparent); }
.stack > * + * { margin-top: 1.5rem; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}