/* ============================================================
   AKIN MOW & GO · site A · "DUSK"
   Night-commercial palette. Chartreuse is the only loud voice.
   Contrast (computed, WCAG):
     ink   #eff6fd on bg #040a16  = 18.17:1
     body  #c9d2dd on bg          = 13.1:1
     muted #9ca6b3 on bg          =  7.99:1  (on bg-2: 7.23:1)
     chartreuse #c3ea43 on bg     = 14.31:1
     sodium #f9a63e on bg         =  9.96:1
     bg text on chartreuse CTA    = 14.31:1
   ============================================================ */

:root {
  --bg:         #040a16;
  --bg-2:       #0b1828;
  --ink:        #eff6fd;
  --body:       #c9d2dd;
  --muted:      #9ca6b3;
  --cobalt:     #449ac0;
  --chartreuse: #c3ea43;
  --sodium:     #f9a63e;
  --hairline:   rgba(239, 246, 253, 0.14);
  --hairline-soft: rgba(239, 246, 253, 0.08);

  --z-canvas: 0;
  --z-scrim: 1;
  --z-copy: 2;
  --z-head: 5;

  --pad-x: clamp(1.25rem, 4.5vw, 4.5rem);
  --measure: 66ch;
}

@supports (color: oklch(0.5 0.1 200)) {
  :root {
    --bg:         oklch(0.145 0.030 258);
    --bg-2:       oklch(0.205 0.038 256);
    --ink:        oklch(0.970 0.012 250);
    --body:       oklch(0.855 0.016 252);
    --muted:      oklch(0.720 0.022 255);
    --cobalt:     oklch(0.650 0.100 230);
    --chartreuse: oklch(0.880 0.190 122);
    --sodium:     oklch(0.790 0.150 68);
  }
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--body);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
figure { margin: 0; }
ul { margin: 0; padding: 0; }
a { color: inherit; }

::selection { background: var(--chartreuse); color: var(--bg); }

/* film grain over every panel so the page is made of the same stuff as the
   hero. Static, fixed, non-interactive; 4% keeps all contrast ratios intact. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* stripe motif as a structural rule: a run of mown bands under the big
   section heads. One system, used at the section level only. */
.mow-rule {
  width: clamp(140px, 20vw, 280px);
  height: 5px;
  margin-top: 1.1rem;
  background: repeating-linear-gradient(90deg,
    rgba(195, 234, 67, 0.60) 0 34px,
    rgba(195, 234, 67, 0.12) 34px 68px);
}

.mow-rule--pad { margin-inline: var(--pad-x); }

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- type voices ---------- */

h1, h2, h3 { text-wrap: balance; margin: 0; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }

.display {
  font-stretch: 122%;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* condensed label voice */
.label {
  font-stretch: 86%;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-head);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 2rem) var(--pad-x);
}

.wordmark {
  margin: 0;
  color: var(--ink);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.09em;
  line-height: 1;
}

.wordmark span { color: var(--chartreuse); }

.head-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--ink);
  font-stretch: 88%;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.head-phone:hover { color: var(--sodium); border-bottom-color: var(--sodium); }

/* ============================================================
   1 · HERO
   ============================================================ */

.hero {
  position: relative;
  height: 175vh; /* scroll runway for the camera lift */
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  background: var(--bg);
}

/* poster paints immediately; canvas fades in over it */
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  background-image:
    linear-gradient(rgba(4, 10, 22, 0.62), rgba(4, 10, 22, 0.78)),
    url("assets/photos/stripes-checker-1200.webp");
  background-size: cover;
  background-position: center 40%;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-canvas.is-live { opacity: 1; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 36% 62%,
      rgba(4, 10, 22, 0) 52%,
      rgba(4, 10, 22, 0.38) 100%),
    linear-gradient(to top,
      rgba(4, 10, 22, 0.92) 0%,
      rgba(4, 10, 22, 0.62) 22%,
      rgba(4, 10, 22, 0.18) 46%,
      rgba(4, 10, 22, 0) 62%),
    linear-gradient(105deg,
      rgba(4, 10, 22, 0.62) 0%,
      rgba(4, 10, 22, 0) 52%);
}

.hero-copy {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(2.5rem, 9vh, 6rem);
  z-index: var(--z-copy);
  max-width: 46rem;
}

.hero-h1 {
  font-stretch: 122%;
  font-weight: 900;
  font-size: clamp(2.6rem, 6.2vw + 0.9rem, 6rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-shadow: 0 2px 24px rgba(4, 10, 22, 0.55);
}

.hero-h1 .line { display: block; overflow: clip; }
.hero-h1 .line-in { display: inline-block; }
.hero-h1 em { font-style: normal; color: var(--chartreuse); }

.hero-sub {
  /* overlay measure: deliberately tighter than the 60-72ch body measure,
     so the sub-line stays inside the scrimmed corner of the scene */
  margin-top: clamp(1.1rem, 2.5vh, 1.75rem);
  max-width: 38ch;
  color: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  text-shadow: 0 1px 14px rgba(4, 10, 22, 0.6);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
}

.cta-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--chartreuse);
  font-stretch: 116%;
  font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 20px rgba(4, 10, 22, 0.55);
  transition: color 0.25s ease;
}

.cta-phone:hover { color: var(--sodium); }

.cta-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  color: var(--ink);
  font-stretch: 96%;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  text-decoration: none;
  border: 1px solid rgba(239, 246, 253, 0.38);
  border-radius: 999px;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.cta-text:hover {
  color: var(--bg);
  background: var(--chartreuse);
  border-color: var(--chartreuse);
}

.hero-owner {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--muted);
  font-stretch: 86%;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-hint {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(2.5rem, 9vh, 6rem);
  z-index: var(--z-copy);
  margin: 0;
  color: var(--body);
  font-stretch: 86%;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 899px), (hover: none) {
  .hero-hint { display: none; }
}

/* short landscape viewports: keep the copy clear of the header */
@media (max-height: 520px) {
  .hero-h1 { font-size: clamp(1.9rem, 5.5vh + 1rem, 2.6rem); }
  .hero-sub { margin-top: 0.6rem; }
  .hero-cta { margin-top: 0.9rem; }
  .cta-phone { font-size: 1.7rem; }
  .hero-owner { display: none; }
  .hero-copy { bottom: 1.5rem; }
}

/* ============================================================
   2 · THE STRIPE
   ============================================================ */

.stripe-fold { position: relative; }

.stripe-frame {
  position: relative;
  height: min(130vh, 1100px);
  overflow: clip;
}

.stripe-frame picture,
.stripe-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stripe-img {
  object-fit: cover;
  object-position: center 42%;
  will-change: clip-path, transform;
}

.stripe-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(4, 10, 22, 0.82) 0%,
    rgba(4, 10, 22, 0.35) 24%,
    rgba(4, 10, 22, 0) 46%);
}

.stripe-line {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(2.5rem, 8vh, 5.5rem);
  z-index: 1;
  color: var(--ink);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 24ch;
}

/* ============================================================
   3 · WHAT WE DO
   ============================================================ */

/* Light system: backgrounds descend from cobalt-leaning dusk at the top of
   the page toward the sodium-leaning close. All pairs verified >= 7.2:1 for
   muted text, higher for everything else. */
.services {
  padding: clamp(6rem, 14vh, 11rem) var(--pad-x) clamp(4rem, 9vh, 7rem);
  background: linear-gradient(180deg, #040a16 0%, #08101f 100%);
}

.services-h2 {
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0;
}

.services .mow-rule { margin-bottom: clamp(3rem, 8vh, 6rem); }

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
  border-top: 1px solid var(--hairline-soft);
}

/* silhouette marks: black PNGs recolored via mask so they live in the palette.
   Colour system: the cut is the product, so the mower silhouette carries the
   chartreuse accent; the finishing passes (trim, blow-off) sit in ink. */
.service-mark {
  width: min(100%, 345px);
  justify-self: start;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mark-mower {
  color: var(--chartreuse);
  aspect-ratio: 640 / 519;
  -webkit-mask-image: url("assets/gen/mark-mower.png");
  mask-image: url("assets/gen/mark-mower.png");
}

.mark-trimmer {
  color: var(--ink);
  opacity: 0.92;
  aspect-ratio: 583 / 640;
  width: min(72%, 255px);
  -webkit-mask-image: url("assets/gen/mark-trimmer.png");
  mask-image: url("assets/gen/mark-trimmer.png");
}

.mark-blower {
  color: var(--ink);
  opacity: 0.92;
  aspect-ratio: 640 / 361;
  width: min(82%, 300px);
  -webkit-mask-image: url("assets/gen/mark-blower.png");
  mask-image: url("assets/gen/mark-blower.png");
}

/* alternate sides */
.row-trim { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.row-trim .service-mark { order: 2; justify-self: end; }

.service-body h3 {
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.service-lede {
  margin-top: 0.75rem;
  max-width: 62ch;
  color: var(--body);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}

.service-list {
  list-style: none;
  margin-top: clamp(1.1rem, 2.5vh, 1.6rem);
  max-width: 44rem;
}

.service-list li {
  padding-block: 0.75rem;
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.service-list li:last-child { border-bottom: 1px solid var(--hairline-soft); }

/* row 2: the trim sets its detail as a typographic block, no rules */
.service-detail {
  margin-top: clamp(1.1rem, 2.5vh, 1.6rem);
  max-width: 34ch;
  color: var(--ink);
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.4;
  text-wrap: balance;
}

/* row 3: the blow-off closes on one line */
.service-kicker {
  margin-top: clamp(1.1rem, 2.5vh, 1.6rem);
  color: var(--chartreuse);
  font-stretch: 116%;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* the mow pass: rules are laid like deck passes, a chartreuse sweep that
   settles onto the hairline. GSAP drives --pass 0 -> 1; without motion the
   sweep simply never appears and the hairline carries the row. */
.service-list li,
.rig-spec li {
  position: relative;
  --pass: 0;
}

.service-list li::after,
.rig-spec li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--chartreuse), rgba(195, 234, 67, 0.15));
  transform: scaleX(var(--pass));
  transform-origin: left;
  opacity: calc(1.1 - var(--pass) * 0.7);
}

@media (max-width: 819px) {
  .service-row,
  .row-trim { grid-template-columns: minmax(0, 1fr); }
  .service-mark { width: min(52%, 260px); }
  .mark-trimmer { width: min(42%, 200px); }
  .mark-blower { width: min(48%, 230px); }
  .row-trim .service-mark { order: 0; justify-self: end; }
}

/* ============================================================
   3b · THE ROAD · full-bleed letterbox beat
   ============================================================ */

.roadside-frame {
  position: relative;
  height: clamp(320px, 52vh, 560px);
  overflow: clip;
}

.roadside-frame picture { position: absolute; inset: 0; }

.roadside-img {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center 55%;
  will-change: transform;
}

/* pull the daylight photo down into the dusk palette */
.roadside-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(4, 10, 22, 0.30), rgba(4, 10, 22, 0.52));
}

/* ============================================================
   4 · THE RIG
   ============================================================ */

.rig {
  background: var(--bg-2);
  border-block: 1px solid var(--hairline-soft);
  padding: clamp(5rem, 12vh, 9rem) var(--pad-x);
}

.rig-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "text photoa"
    "text photob";
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(1.75rem, 4vh, 3rem);
  align-items: start;
}

.rig-text { grid-area: text; position: sticky; top: clamp(4rem, 12vh, 7rem); }
.rig-photo-a { grid-area: photoa; }
.rig-photo-b {
  grid-area: photob;
  width: min(420px, 78%);
  margin-left: auto;
}

.rig h2 {
  font-stretch: 122%;
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}

.rig-text p {
  max-width: var(--measure);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}

.rig-text p + p { margin-top: 1.1rem; }

/* the machine list, scannable */
.rig-spec {
  list-style: none;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
}

.rig-spec li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--hairline-soft);
}

.rig-spec li:last-child { border-bottom: 1px solid var(--hairline-soft); }

.rig-item {
  color: var(--ink);
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.rig-note {
  color: var(--muted);
  font-stretch: 88%;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.rig-pull {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  color: var(--chartreuse);
  font-stretch: 118%;
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.rig-photo img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  outline: 1px solid rgba(239, 246, 253, 0.08);
  outline-offset: -1px;
}

.rig-photo figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-stretch: 86%;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 899px) {
  .rig-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "photoa" "photob";
  }
  .rig-text { position: static; }
  .rig-photo-b { width: min(420px, 72%); }
}

/* ============================================================
   5 · PROOF
   ============================================================ */

.proof {
  padding: clamp(6rem, 14vh, 11rem) 0 clamp(5rem, 11vh, 8rem);
  background: linear-gradient(180deg, #0a1220 0%, #0e0d17 100%);
}

.proof-h2 {
  padding-inline: var(--pad-x);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.proof-quote {
  padding-inline: var(--pad-x);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 62rem;
}

.proof-quote blockquote { margin: 0; }

.proof-quote blockquote p {
  color: var(--ink);
  font-stretch: 104%;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 3.3rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: balance;
}

.proof-quote figcaption {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--muted);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

.proof-quote cite { font-style: normal; color: var(--body); }

/* filmstrip */
.proof-strip-wrap {
  margin-top: clamp(3.5rem, 8vh, 6rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 246, 253, 0.25) transparent;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad-x);
}

.proof-strip-wrap:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: -2px;
}

.proof-strip-wrap::-webkit-scrollbar { height: 8px; }
.proof-strip-wrap::-webkit-scrollbar-thumb {
  background: rgba(239, 246, 253, 0.22);
  border-radius: 4px;
}

.proof-strip {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0 var(--pad-x) 1.25rem;
  width: max-content;
}

.proof-strip li {
  flex: 0 0 auto;
  width: clamp(270px, 44vw, 520px);
  scroll-snap-align: start;
}

.proof-strip img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  outline: 1px solid rgba(239, 246, 253, 0.08);
  outline-offset: -1px;
}

.proof-strip figcaption {
  margin-top: 0.65rem;
  color: var(--muted);
  font-stretch: 86%;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   6 · WHERE HE MOWS
   ============================================================ */

.area {
  padding: clamp(5rem, 12vh, 9rem) var(--pad-x);
  border-top: 1px solid var(--hairline-soft);
  background: linear-gradient(180deg, #0e0d17 0%, #131017 100%);
}

.area h2 {
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
}

.area-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1.1rem, 3vw, 2.6rem);
  row-gap: 0.4em;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  max-width: 70rem;
  color: var(--ink);
  font-stretch: 122%;
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 4.2rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.area-list li { position: relative; }

.area-list li:not(:last-child)::after {
  content: "\00B7";
  color: var(--chartreuse);
  margin-left: clamp(1.1rem, 3vw, 2.6rem);
}

.area-note {
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 60ch;
  color: var(--body);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
}

.area-note a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--chartreuse);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.25s ease;
}

.area-note a:hover { color: var(--sodium); }

/* ============================================================
   7 · CLOSING FOLD
   ============================================================ */

.closing {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  padding: clamp(5rem, 12vh, 8rem) var(--pad-x);
  text-align: center;
  overflow: clip;
  background: #131017;
}

/* the streetlight, low on the frame */
.closing::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  pointer-events: none;
  background:
    radial-gradient(70% 58% at 50% 108%, rgba(249, 166, 62, 0.30), rgba(249, 166, 62, 0) 70%),
    radial-gradient(38% 30% at 50% 104%, rgba(249, 166, 62, 0.22), rgba(249, 166, 62, 0) 75%);
}

.closing > * { position: relative; z-index: 1; }

.closing-kicker {
  color: var(--body);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  max-width: 34ch;
}

.closing-phone {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: var(--chartreuse);
  font-stretch: 112%;
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.closing-phone:hover { color: var(--sodium); }

.closing-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 0.5rem;
}

.closing-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.25s ease;
}

.closing-links a:hover { color: var(--sodium); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-foot {
  background: #131017;
  border-top: 1px solid var(--hairline-soft);
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad-x) clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 1rem;
}

.foot-name {
  color: var(--ink);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.foot-tag { color: var(--muted); font-size: 0.95rem; }

.foot-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.75rem;
  row-gap: 0.5rem;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
  font-size: 0.95rem;
  text-underline-offset: 4px;
  transition: color 0.25s ease;
}

.foot-links a:hover { color: var(--sodium); }

.foot-year {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; height: 100svh; } /* no runway needed */
  .hero-canvas { display: none; }          /* poster carries the fold */
  .hero-hint { display: none; }
  .stripe-img { will-change: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}