/* ============================================================
   Nevada Food Park — coming soon
   Dusk scene: sky, treeline, cafe lights, trucks on the lot.
   ============================================================ */

:root {
  --night-1:  #070920;
  --night-2:  #141743;
  --violet:   #3a2760;
  --dusk:     #7b3f60;
  --ember:    #d0603a;
  --amber:    #f2a03d;
  --gold:     #ffc861;
  --bulb:     #ffd894;
  --cream:    #fdf3e0;
  --cream-dim:#cbbfae;

  --tree-far:  #1b1b46;
  --tree-near: #0e0f2c;
  --dirt:      #0a0a20;

  /* horizon sits here; trees stand on it, trucks park just below */
  --ground: 72%;

  --shell: min(1180px, 92vw);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cream);
  background: var(--night-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters here — the truck <img>s carry width/height attributes for
   layout stability, and without it they render at their intrinsic pixel height. */
img { max-width: 100%; height: auto; display: block; }


/* ============================================================
   SCENE
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* --- sky ------------------------------------------------- */

.sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      var(--night-1)  0%,
      var(--night-2) 28%,
      var(--violet)  50%,
      var(--dusk)    64%,
      var(--ember)   71%,
      var(--amber)   74%
    );
}

/* the last burn of sunset sitting on the horizon */
.horizon-glow {
  position: absolute;
  left: 50%;
  top: var(--ground);
  width: 150vw;
  height: 46vh;
  translate: -50% -60%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 176, 92, .55) 0%,
    rgba(226, 108, 62, .30) 34%,
    rgba(120, 52, 92, 0) 70%
  );
  animation: horizonPulse 11s ease-in-out infinite;
}

@keyframes horizonPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* --- stars ----------------------------------------------- */

.stars { position: absolute; inset: 0 0 40% 0; }

.star {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: var(--o);
  animation: twinkle var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes twinkle {
  0%, 100% { opacity: calc(var(--o) * .25); transform: scale(.8); }
  50%      { opacity: var(--o);             transform: scale(1); }
}

/* --- moon ------------------------------------------------ */

.moon {
  position: absolute;
  top: 11%;
  right: 13%;
  width: clamp(46px, 6vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffaf0, #ffe9c0 58%, #f6d79c);
  box-shadow:
    0 0 32px rgba(255, 232, 190, .55),
    0 0 90px rgba(255, 214, 150, .35),
    0 0 180px rgba(255, 190, 120, .22);
  animation: moonBreathe 9s ease-in-out infinite;
}

@keyframes moonBreathe {
  0%, 100% { box-shadow: 0 0 32px rgba(255,232,190,.55), 0 0 90px rgba(255,214,150,.35), 0 0 180px rgba(255,190,120,.20); }
  50%      { box-shadow: 0 0 40px rgba(255,232,190,.68), 0 0 110px rgba(255,214,150,.45), 0 0 210px rgba(255,190,120,.28); }
}

/* --- clouds ---------------------------------------------- */

.clouds { position: absolute; inset: 0 0 45% 0; }

.cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,190,150,.22), rgba(120,70,120,0) 68%);
  filter: blur(6px);
}

.cloud--1 { top: 24%; left: -18%; width: 46vw; height: 12vh; animation: drift 96s linear infinite; }
.cloud--2 { top: 38%; left: -30%; width: 62vw; height: 10vh; opacity: .8; animation: drift 140s linear infinite 12s; }
.cloud--3 { top: 15%; left: -24%; width: 34vw; height: 8vh;  opacity: .55; animation: drift 78s linear infinite 30s; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(150vw); }
}

/* --- treeline -------------------------------------------- */

/* The wide viewBox is stretched with preserveAspectRatio="none", so on a narrow
   screen the canopies would compress into spikes. Holding a minimum width and
   letting it overflow keeps the trees broad at every size.
   Centred with margin rather than translate, which the parallax owns. */
.treeline {
  position: absolute;
  left: 50%;
  width: max(112%, 900px);
  margin-left: min(-56%, -450px);
  height: 26vh;
  min-height: 150px;
}

.treeline--far {
  top: calc(var(--ground) - 19vh);
  fill: var(--tree-far);
  opacity: .85;
  animation: swayFar 26s ease-in-out infinite;
}

.treeline--near {
  top: calc(var(--ground) - 22vh);
  fill: var(--tree-near);
  animation: swayNear 19s ease-in-out infinite;
}

@keyframes swayFar  { 0%,100% { transform: translateX(0)    skewX(0deg);   } 50% { transform: translateX(-10px) skewX(.28deg); } }
@keyframes swayNear { 0%,100% { transform: translateX(0)    skewX(0deg);   } 50% { transform: translateX(14px)  skewX(-.4deg); } }

/* --- ground ---------------------------------------------- */

.ground {
  position: absolute;
  left: 0; right: 0;
  top: var(--ground);
  bottom: 0;
  /* Top colour deliberately matches --tree-near: the treeline is a solid fill
     down to its own lower edge, and the lot is painted over it, so anything
     lighter here draws a hard horizontal seam across the scene. */
  background:
    linear-gradient(to bottom, var(--tree-near) 0%, #0b0a22 45%, var(--dirt) 100%);
}

.ground::before {   /* warm light spilling forward off the lot */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  /* fades in from fully transparent rather than starting at full strength,
     so the lot's glow has no visible top edge either */
  background: linear-gradient(
    to bottom,
    rgba(255, 150, 78, 0) 0%,
    rgba(255, 150, 78, .15) 38%,
    rgba(255, 140, 70, 0) 100%
  );
}


/* ============================================================
   TRUCKS
   ============================================================ */

/* --- parked, flanking the copy --------------------------- */

/* Sized and pushed to the edges so they read as depth behind the copy rather
   than crowding it; translate lands each one on the horizon line. */
.parked {
  position: absolute;
  top: var(--ground);
  width: clamp(180px, 19vw, 320px);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55));
}

.parked--left  { left: -3%;  translate: 0 -90%; }
.parked--right { right: -4%; translate: 0 -93%; }

.parked .idle {
  position: relative;
  animation: idleBob 5.2s ease-in-out infinite;
}
.parked--right .idle { animation-duration: 6.1s; animation-delay: -1.4s; }

@keyframes idleBob {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-4px)  rotate(-.22deg); }
}

/* pooled light on the dirt under each parked truck */
.parked .pool {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 86%;
  height: 26px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,178,92,.42), rgba(255,150,70,0) 70%);
  filter: blur(5px);
}

/* --- steam / smoke --------------------------------------- */

.steam {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,220,.55), rgba(255,235,210,0) 70%);
  filter: blur(3px);
  opacity: 0;
}

.parked--left  .steam { left: 44%; top: 2%; }
.parked--right .steam { left: 47%; top: 1%; }

.steam--a { animation: steamRise 4.6s ease-out infinite; }
.steam--b { animation: steamRise 4.6s ease-out infinite 2.3s; }

@keyframes steamRise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5); }
  18%  { opacity: .75; }
  100% { opacity: 0;   transform: translate(-26px, -110px) scale(2.6); }
}

/* --- driving through ------------------------------------- */

.lane {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 34%;
  overflow: hidden;
}

.drive {
  position: absolute;
  bottom: 4%;
  left: 0;
  will-change: transform;
}

/* sweets faces left, so it runs right-to-left, up front and larger */
.drive--sweets {
  width: clamp(170px, 20vw, 310px);
  bottom: 2%;
  animation: driveRTL 27s linear infinite;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.6));
  z-index: 2;
}

/* taco faces right, so it runs left-to-right, smaller and further back */
.drive--taco {
  width: clamp(125px, 15vw, 235px);
  bottom: 13%;
  animation: driveLTR 41s linear infinite 6s;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)) brightness(.86);
  z-index: 1;
}

@keyframes driveRTL {
  from { transform: translateX(108vw); }
  to   { transform: translateX(-60vw); }
}

@keyframes driveLTR {
  from { transform: translateX(-60vw); }
  to   { transform: translateX(112vw); }
}

/* suspension chatter on the gravel — kept separate from the
   travel transform so the two never fight */
.rig { animation: chatter 1.05s ease-in-out infinite; }
.drive--taco .rig { animation-duration: 1.35s; }

@keyframes chatter {
  0%, 100% { transform: translateY(0)      rotate(0deg); }
  25%      { transform: translateY(-2.5px) rotate(.3deg); }
  60%      { transform: translateY(1.5px)  rotate(-.22deg); }
}


/* ============================================================
   STRING LIGHTS
   ============================================================ */

.lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(140px, 22vh, 260px);
  transform-origin: 50% 0;
  animation: rigSway 7.5s ease-in-out infinite;
}

@keyframes rigSway {
  0%, 100% { transform: rotate(-.45deg); }
  50%      { transform: rotate(.45deg); }
}

.lights__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.wire {
  fill: none;
  stroke: rgba(20, 16, 40, .75);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

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

/* left/top are set as percentages by app.js. The wire SVG uses
   preserveAspectRatio="none", so a percentage of the shared box maps exactly
   onto the wire at every viewport size — no repositioning on resize. */
.bulb {
  position: absolute;
  width: 11px;
  height: 15px;
  margin: -3px 0 0 -5.5px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 42% 34%, #fff6dd, var(--bulb) 52%, #f2a341 100%);
  box-shadow:
    0 0 10px 2px rgba(255, 198, 118, .75),
    0 0 26px 6px rgba(255, 170, 80, .38);
  animation: bulbGlow var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

.bulb::before {   /* little brass cap where it meets the wire */
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 5px; height: 5px;
  translate: -50% 0;
  border-radius: 2px;
  background: #3a2c1e;
}

@keyframes bulbGlow {
  0%, 100% { opacity: .82; box-shadow: 0 0 8px 2px rgba(255,198,118,.6),  0 0 20px 5px rgba(255,170,80,.28); }
  50%      { opacity: 1;   box-shadow: 0 0 14px 3px rgba(255,208,138,.9), 0 0 34px 9px rgba(255,175,85,.48); }
}


/* ============================================================
   FIREFLIES / GRAIN / VIGNETTE
   ============================================================ */

.fireflies { position: absolute; inset: 45% 0 0 0; }

.fly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffe09a;
  box-shadow: 0 0 8px 2px rgba(255, 208, 132, .8);
  opacity: 0;
  animation: flyDrift var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes flyDrift {
  0%       { opacity: 0;   transform: translate(0, 0); }
  15%      { opacity: .9; }
  50%      { opacity: .55; transform: translate(var(--dx), var(--dy)); }
  85%      { opacity: .85; }
  100%     { opacity: 0;   transform: translate(calc(var(--dx) * 1.9), 0); }
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 46%, transparent 42%, rgba(5, 5, 22, .62) 100%);
}


/* ============================================================
   COPY
   ============================================================ */

.content {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin-inline: auto;
  padding: 4vh 0 2vh;
  text-align: center;
  /* soft scrim so the type holds up over the busiest part of the scene */
  filter: drop-shadow(0 2px 30px rgba(6, 6, 24, .85));
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 0 0 1.1rem;
  font-size: clamp(.68rem, 1.5vw, .82rem);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}

.wordmark {
  margin: 0;
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.7rem, 9.2vw, 7.4rem);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
}

.wordmark__a,
.wordmark__b { display: block; }

.wordmark__a {
  color: var(--cream);
  text-shadow: 0 0 48px rgba(255, 196, 120, .30);
}

.wordmark__b {
  background: linear-gradient(178deg, #ffe6ae 4%, var(--gold) 46%, var(--ember) 108%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(255, 168, 82, .38));
}

.tagline {
  margin: 1.5rem auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 2.1vw, 1.24rem);
  line-height: 1.62;
  color: var(--cream-dim);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.9rem 0 0;
  padding: .5rem 1.15rem;
  border: 1px solid rgba(255, 200, 120, .32);
  border-radius: 100px;
  background: rgba(28, 18, 48, .55);
  backdrop-filter: blur(6px);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5ce08a;
  box-shadow: 0 0 9px 2px rgba(92, 224, 138, .8);
  animation: pulse 2.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .5; transform: scale(.82); }
}

/* --- the CTA --------------------------------------------- */

.cta-wrap { margin-top: 2.6rem; }

.cta {
  display: inline-block;
  padding: 1.05rem 2.3rem;
  border-radius: 100px;
  background: linear-gradient(165deg, #ffd484, var(--amber) 52%, #e07a34);
  color: #2a1408;
  font-size: clamp(.92rem, 1.9vw, 1.06rem);
  font-weight: 700;
  letter-spacing: .015em;
  text-decoration: none;
  box-shadow:
    0 10px 26px rgba(212, 116, 48, .38),
    0 0 0 1px rgba(255, 226, 170, .5) inset,
    0 0 44px rgba(255, 166, 74, .28);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 34px rgba(212, 116, 48, .48),
    0 0 0 1px rgba(255, 236, 196, .65) inset,
    0 0 70px rgba(255, 176, 88, .44);
}

.cta:active { transform: translateY(-1px); }

.cta-note {
  margin: 1rem 0 0;
  font-size: .86rem;
  color: rgba(203, 191, 174, .72);
}

.footer {
  position: relative;
  z-index: 2;
  padding: 1.6rem 0 1.9rem;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(203, 191, 174, .62);
  /* trucks pass behind this line, so give it something to sit on */
  text-shadow: 0 1px 12px rgba(6, 6, 24, .95), 0 0 26px rgba(6, 6, 24, .8);
}

.footer p { margin: 0; }


/* ============================================================
   INQUIRY DIALOG
   ============================================================ */

.inquiry {
  width: min(620px, 94vw);
  max-height: 92svh;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: transparent;
  overflow: visible;
  color: var(--cream);
}

.inquiry::backdrop {
  background: rgba(6, 6, 22, .74);
  backdrop-filter: blur(7px);
}

.inquiry__panel {
  position: relative;
  max-height: 92svh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 200, 120, .34) transparent;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid rgba(255, 198, 118, .2);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(120, 60, 90, .5), transparent 70%),
    linear-gradient(170deg, #1c1740 0%, #120f2e 60%, #0c0a22 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.inquiry__panel::-webkit-scrollbar { width: 9px; }
.inquiry__panel::-webkit-scrollbar-track { background: transparent; }
.inquiry__panel::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(255, 200, 120, .3);
}
.inquiry__panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 200, 120, .48); }

.inquiry[open] { animation: dialogIn .34s var(--ease); }

@keyframes dialogIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.inquiry__close {
  position: absolute;
  top: .85rem; right: 1rem;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.inquiry__close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }

.inquiry__head { margin-bottom: 1.7rem; padding-right: 2.5rem; }

.inquiry__kicker {
  margin: 0 0 .55rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.inquiry__head h2 {
  margin: 0 0 .55rem;
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.14;
}

.inquiry__sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--cream-dim);
}

/* --- fields ---------------------------------------------- */

.field { margin-bottom: 1.05rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem;
}

.field label {
  display: block;
  margin-bottom: .42rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(253, 243, 224, .82);
}

.req { color: var(--amber); }

.field input,
.field textarea {
  width: 100%;
  padding: .82rem .95rem;
  border: 1px solid rgba(255, 220, 170, .17);
  border-radius: 11px;
  background: rgba(8, 6, 26, .6);
  color: var(--cream);
  font: inherit;
  font-size: .96rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.field textarea { resize: vertical; min-height: 96px; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(203, 191, 174, .42); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(255, 190, 110, .62);
  background: rgba(12, 9, 34, .8);
  box-shadow: 0 0 0 3px rgba(242, 160, 61, .17);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #e4695c;
  box-shadow: 0 0 0 3px rgba(228, 105, 92, .16);
}

.field .err {
  display: block;
  margin-top: .34rem;
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: #ff9b90;
}

/* honeypot — off-screen, never shown to a real visitor */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.submit {
  width: 100%;
  margin-top: .5rem;
  padding: 1.02rem 1.5rem;
  border: none;
  border-radius: 100px;
  background: linear-gradient(165deg, #ffd484, var(--amber) 52%, #e07a34);
  color: #2a1408;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(212, 116, 48, .34);
  transition: transform .24s var(--ease), filter .24s var(--ease), box-shadow .24s var(--ease);
}

.submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 15px 32px rgba(212, 116, 48, .46);
}

.submit:disabled { opacity: .6; cursor: progress; }

.form__status {
  margin: 0 0 .9rem;
  font-size: .9rem;
  line-height: 1.55;
}

.form__status:empty { display: none; }
.form__status.is-error { color: #ff9b90; }
.form__status.is-ok    { color: #7ce6a4; }

.form__fine {
  margin: .95rem 0 0;
  font-size: .76rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(203, 191, 174, .55);
}

/* the whole panel swaps to this once the inquiry lands */
.sent {
  padding: 1.4rem 0 .6rem;
  text-align: center;
}

.sent__mark {
  width: 62px; height: 62px;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(124, 230, 164, .13);
  border: 1px solid rgba(124, 230, 164, .42);
  color: #7ce6a4;
  font-size: 1.7rem;
}

.sent h2 {
  margin: 0 0 .6rem;
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
}

.sent p {
  margin: 0 auto;
  max-width: 40ch;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--cream-dim);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  /* horizon sits lower so the lot doesn't become a big empty band */
  :root { --ground: 80%; }

  /* On a tall phone, centring the copy in the full viewport drops its lower
     half — CTA, note, footer — straight into the treeline, while the lot below
     sits empty. Reserving the bottom band as padding centres the copy in the
     sky above the horizon instead. The safe-area inset keeps the footer clear
     of the home indicator (viewport-fit=cover lets the scene run edge to edge). */
  body { padding-bottom: calc(22vh + env(safe-area-inset-bottom, 0px)); }

  /* tighten the vertical rhythm so the block needs less room up there */
  .tagline  { margin-top: 1.2rem; }
  .badge    { margin-top: 1.4rem; }
  .cta-wrap { margin-top: 1.9rem; }
  .cta-note { margin-top: .8rem; }
  .footer   { padding: 1.2rem 0 .9rem; }

  /* Shorter canopies on a narrow screen. At desktop offsets the treeline would
     reach up far enough to meet the footer on a tall phone; this keeps its
     crown below the copy and shows more of the sunset behind it. */
  .treeline { height: 22vh; min-height: 120px; }
  .treeline--far  { top: calc(var(--ground) - 11vh); }
  .treeline--near { top: calc(var(--ground) - 14vh); }

  /* the flanking trucks crowd the copy well before this point */
  .parked { display: none; }

  .drive--taco { display: none; }
  .drive--sweets {
    width: clamp(190px, 46vw, 300px);
    bottom: 5%;
    animation-duration: 20s;
  }

  /* the rig scales, so the bulbs have to come down with it */
  .lights { height: 116px; }
  .bulb {
    width: 8px;
    height: 11px;
    margin: -2px 0 0 -4px;
  }

  /* keep them off the copy */
  .fireflies { inset: 58% 0 0 0; }
}

@media (max-width: 560px) {
  .content { padding-top: 2vh; }
  .tagline br { display: none; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .cta { padding: .95rem 1.6rem; }
  .eyebrow { letter-spacing: .3em; }
}

/* short/landscape phones: give the copy the room */
@media (max-height: 620px) {
  .parked { display: none; }
  .tagline { display: none; }
  .content { padding: 1vh 0; }
}


/* ============================================================
   REDUCED MOTION
   Keep the scene, drop the movement.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* park the driving trucks somewhere sensible instead of off-screen */
  .drive--sweets { transform: translateX(58vw); }
  .drive--taco   { transform: translateX(8vw); }
  .steam, .fly   { opacity: 0; }
  .bulb          { opacity: .95; }
}