/* ==========================================================================
   BotBox Vending — botboxvending.com

   The whole design system is reverse-engineered from the cooler illustration,
   so the page and the machine belong to one world instead of two:

     · every edge is a 3–5px #0b0c11 outline
     · every raised thing casts a HARD offset shadow with zero blur
     · fat radii, candy fills, cream ground
     · things press DOWN when you click them, like real buttons

   Copy stays operator-to-operator. The design is disarming; the words are not.

   CONTRAST NOTE: candy fills only carry ink text. Ink on yellow is 12.3:1,
   on orange 6.8:1, on green 10.1:1, on cyan 9.2:1, on purple 5.9:1, on pink
   6.0:1 — all fine. Ink on the blue and red FAILS (3.8 / 4.2), so those two
   are decorative fills only and never sit under text.
   ========================================================================== */

:root {
  /* structure */
  --outline: #0b0c11;
  --ink:     #17181D;   /* headings + body. 17.4:1 on cream */
  --ink-2:   #414149;   /* secondary. 9.9:1 on cream, and still 5.2:1 against the
                           darkest corner of the grape wash — the tightest spot
                           on the page for body copy. */
  --cream:   #FFFDF7;
  --shell:   #22242C;   /* the machine's body colour — footer + tray */

  /* candy — lifted straight out of the illustration */
  --orange: #FF7A3C;
  --yellow: #FFD23F;
  --pink:   #FF5C8A;
  --green:  #7ED957;
  --cyan:   #4CC9F0;
  --purple: #B07CF0;
  --blue:   #2F6FE0;   /* decorative fill only — ink on it is 3.8:1 */
  --red:    #E23B3B;   /* decorative fill only */
  --error:  #A8201A;   /* the one red that is safe as text */

  /* section washes, same radial recipe as the cooler's backdrop */
  --wash-mint:  radial-gradient(circle at 50% 25%, #F4FFF6 0%, #CDEEDE 58%, #A9DFC9 100%);
  --wash-peach: radial-gradient(circle at 50% 25%, #FFF6EF 0%, #FFDCC4 58%, #FFC7A3 100%);
  --wash-sky:   radial-gradient(circle at 50% 25%, #F2FBFF 0%, #CFEAFF 58%, #A9D6F7 100%);
  --wash-grape: radial-gradient(circle at 50% 25%, #F8F2FF 0%, #E0D0FB 58%, #C8AEF7 100%);

  /* the hard-shadow scale. no blur, ever. */
  --pop-1: 0 3px 0 var(--outline);
  --pop-2: 0 5px 0 var(--outline);
  --pop-3: 0 7px 0 var(--outline);
  --pop-4: 0 11px 0 var(--outline);

  --display: 'Baloo 2', system-ui, sans-serif;
  --body:    'Nunito', system-ui, -apple-system, sans-serif;

  --maxw: 1120px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.005em;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--ink);
  border: 4px solid var(--outline); border-radius: 0 0 16px 0;
  padding: 0.75rem 1.25rem;
  font-family: var(--display); font-weight: 800;
}
.skip-link:focus { left: 0; }

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

/* Unshipped placeholder — impossible to miss on purpose. */
.ph {
  display: inline-block;
  background: var(--yellow); color: var(--ink);
  border: 3px dashed var(--outline); border-radius: 8px;
  padding: 0.05em 0.5em;
  font-family: var(--display); font-weight: 700;
  font-size: 0.82em; line-height: 1.4;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }

/* Washed sections get thick rules top and bottom, like panels on the machine. */
.wash { border-block: 5px solid var(--outline); }
.wash-mint  { background: var(--wash-mint); }
.wash-peach { background: var(--wash-peach); }
.wash-sky   { background: var(--wash-sky); }
.wash-grape { background: var(--wash-grape); }

/* ---------- Pill (eyebrow) ---------- */
.pill {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--ink); background: var(--cream);
  border: 3px solid var(--outline); border-radius: 999px;
  box-shadow: var(--pop-1);
  padding: 0.3em 1.1em;
  margin-bottom: 1.35rem;
}
.pill-orange { background: var(--orange); }
.pill-yellow { background: var(--yellow); }
.pill-green  { background: var(--green); }
.pill-cyan   { background: var(--cyan); }
.pill-purple { background: var(--purple); }
.pill-pink   { background: var(--pink); }

/* ---------- Buttons: they press down ---------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 800;
  font-size: 1.08rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--yellow);
  border: 4px solid var(--outline); border-radius: 999px;
  padding: 0.7em 1.9em;
  box-shadow: var(--pop-2);
  transition: transform .12s ease, box-shadow .12s ease, background .18s ease;
}
.btn:hover { background: #FFDC69; transform: translateY(-2px); box-shadow: var(--pop-3); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--outline); }
.btn-orange { background: var(--orange); }
.btn-orange:hover { background: #FF9260; }
.btn-cream  { background: var(--cream); }
.btn-cream:hover { background: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 5px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--outline); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1.5rem; }

.brand {
  font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.brand .brand-chip {
  width: 1.05em; height: 1.05em; border-radius: 6px;
  background: var(--yellow); border: 3px solid var(--outline);
  transform: rotate(45deg);
}
.brand span { color: var(--ink); }

.nav-links { display: flex; gap: clamp(0.85rem, 2.2vw, 1.75rem); align-items: center; }
.nav-links a {
  font-family: var(--display); font-weight: 700;
  font-size: 0.95rem; text-decoration: none; color: var(--ink);
  transition: color .18s ease;
}
.nav-links a.plain:hover { color: var(--blue); }
.nav-links a.nav-cta { display: none; }

@media (min-width: 940px) {
  .nav-links a.nav-cta {
    display: inline-block;
    background: var(--yellow); border: 3px solid var(--outline);
    border-radius: 999px; padding: 0.4em 1.2em;
    box-shadow: var(--pop-1);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .nav-links a.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--pop-2); }
  .nav-links a.nav-cta:active { transform: translateY(3px); box-shadow: none; }
}

/* Hamburger */
.nav-toggle { display: none; }
@media (max-width: 939px) {
  .nav { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0;
    background: var(--cream); border: 4px solid var(--outline);
    border-radius: 14px; box-shadow: var(--pop-1);
    cursor: pointer; color: var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .nav-toggle:active { transform: translateY(3px); box-shadow: none; }
  .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after {
    content: ""; display: block; width: 20px; height: 3px;
    background: currentColor; border-radius: 3px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-toggle .bar { position: relative; }
  .nav-toggle .bar::before { position: absolute; top: -7px; }
  .nav-toggle .bar::after  { position: absolute; top: 7px; }
  .nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after  { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    position: absolute; top: 84px; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border: 4px solid var(--outline); border-radius: 20px;
    box-shadow: var(--pop-3);
    padding: 0.5rem 1.1rem 1rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.8rem 0; border-bottom: 3px solid #EDE9DE; font-size: 1.05rem; }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a.nav-cta {
    display: block; text-align: center; margin-top: 0.7rem;
    background: var(--yellow); border: 4px solid var(--outline);
    border-radius: 999px; padding: 0.6em 1.2em; box-shadow: var(--pop-2);
  }
}

/* ---------- Hero ---------- */
/* The cooler's own mint backdrop IS this section's background, so the machine
   sits in the page rather than inside a pasted-in panel. That framed box was
   the whole reason the old build read as two designs stapled together. */
.hero {
  background: var(--wash-mint);
  border-bottom: 5px solid var(--outline);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-copy { min-width: 0; }

.hero h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.4rem);
  max-width: 13ch;
  margin-bottom: 1.15rem;
}
.hero .subhead {
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 1.9rem;
}

.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.9rem; }
.hero-meta li {
  font-family: var(--display); font-weight: 700; font-size: 0.88rem;
  background: var(--cream); border: 3px solid var(--outline);
  border-radius: 999px; padding: 0.22em 0.95em;
  box-shadow: var(--pop-1);
}
.hero-meta li:nth-child(1) { background: var(--green); }
.hero-meta li:nth-child(2) { background: var(--cyan); }
.hero-meta li:nth-child(3) { background: var(--orange); }

/* ---------- Section heading block ---------- */
.section-head { max-width: 44ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 0.85rem; }
.section-head p { color: var(--ink-2); font-size: 1.1rem; }

/* ---------- The card, used everywhere ---------- */
.card {
  background: var(--cream);
  border: 4px solid var(--outline);
  border-radius: 24px;
  box-shadow: var(--pop-3);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--pop-4); }
.card h3 { font-size: 1.4rem; margin-bottom: 0.55rem; }
.card p { color: var(--ink-2); font-size: 0.99rem; line-height: 1.6; }

/* Numbered badge */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; flex: none;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--ink); background: var(--yellow);
  border: 4px solid var(--outline); border-radius: 50%;
  box-shadow: var(--pop-1);
  margin-bottom: 1rem;
}
.badge-orange { background: var(--orange); }
.badge-cyan   { background: var(--cyan); }
.badge-green  { background: var(--green); }
.badge-purple { background: var(--purple); }
.badge-pink   { background: var(--pink); }

/* ---------- Technology ---------- */
.tech-grid { list-style: none; display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .tech-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- What it costs you: the selection grid ---------- */
.machine { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 940px) { .machine { grid-template-columns: 1.8fr 1fr; } }

/* The glass case */
.machine-face {
  background: linear-gradient(160deg, #EAF7FF 0%, #CFE8F8 55%, #BCDCF1 100%);
  border: 5px solid var(--outline);
  border-radius: 26px;
  box-shadow: var(--pop-3), inset 0 0 0 4px rgba(255,255,255,.55);
  padding: clamp(0.9rem, 2.4vw, 1.4rem);
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(0.6rem, 1.8vw, 0.95rem);
  position: relative; overflow: hidden;
}
/* glass glare, same trick the cooler uses */
.machine-face::after {
  content: ""; position: absolute; top: -20%; left: 8%;
  width: 46px; height: 150%; pointer-events: none;
  background: rgba(255,255,255,.4); transform: rotate(16deg);
}

.grid-rail {
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  color: var(--ink);
}
.grid-rail span {
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem;
  background: var(--cream); border: 3px solid var(--outline);
  border-radius: 10px; box-shadow: var(--pop-1);
}

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------------------------------------------------------------------------
   The slots are PRODUCTS, not tiles.

   Each slot is a button containing a .product — a bag, can, bottle or box drawn
   in CSS from data-kind — with the copy printed on a .product-label sitting on
   the front of it, the way a wrapper label does. Before this the slots were nine
   rounded rectangles and nobody read them as merchandise.

   TWO CONSTRAINTS THAT DICTATED THE APPROACH, both learned the hard way:

   1. NO clip-path. This design language is built on heavy 4px outlines, and
      clip-path cuts the border off along with the background, so a clipped
      shape loses its outline and reads as a floating smear. Every silhouette
      below is therefore a real bordered box, differentiated by width,
      border-radius and internal bands only.

   2. The label lives INSIDE .product, not inside .slot. The narrow kinds (can,
      bottle) inset themselves with margin-inline, so a label positioned against
      the slot overhangs the product edges. Percentages have to resolve against
      the product.

   The bottle's neck is a SIBLING of .product rather than a child, because
   .product sets overflow:hidden to trap the gloss, which would clip a neck.

   Ink on the cream label is 17.4:1, so the copy stays the most readable thing in
   the case no matter which candy fill sits behind it.
   --------------------------------------------------------------------------- */
.slot {
  position: relative;
  display: block;
  min-height: clamp(128px, 18.5vw, 168px);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.slot[data-fill="orange"] { --fill: var(--orange); }
.slot[data-fill="cyan"]   { --fill: var(--cyan); }
.slot[data-fill="pink"]   { --fill: var(--pink); }
.slot[data-fill="green"]  { --fill: var(--green); }
.slot[data-fill="yellow"] { --fill: var(--yellow); }
.slot[data-fill="purple"] { --fill: var(--purple); }

/* The shelf edge the product stands on. */
.slot::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--outline);
  border-radius: 3px;
}
.slot:hover { transform: translateY(-3px); }
.slot:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* ---- the product body ---- */
.product {
  position: absolute; left: 6%; right: 6%; top: 8px; bottom: 9px;
  background: var(--fill);
  border: 4px solid var(--outline);
  box-shadow: var(--pop-2);
  overflow: hidden;
}
.gloss {
  position: absolute; top: -30%; left: 12%;
  width: 20%; height: 160%;
  background: rgba(255,255,255,.34);
  transform: rotate(14deg);
  pointer-events: none;
}

/* ---- BAG: barrel sides, crimped seams top and bottom ---- */
.slot[data-kind="bag"] .product { border-radius: 9px / 20px; }
.slot[data-kind="bag"] .product::before,
.slot[data-kind="bag"] .product::after {
  content: "";
  position: absolute; left: -2px; right: -2px; height: 13%;
  background: repeating-linear-gradient(90deg,
    rgba(11,12,17,.55) 0 2px, rgba(255,255,255,.55) 2px 6px);
}
.slot[data-kind="bag"] .product::before { top: 0;    border-bottom: 3px solid var(--outline); }
.slot[data-kind="bag"] .product::after  { bottom: 0; border-top:    3px solid var(--outline); }

/* ---- CAN: narrow pill with rolled aluminium rims ---- */
.slot[data-kind="can"] .product {
  left: 18%; right: 18%;
  border-radius: 15px;
}
.slot[data-kind="can"] .product::before,
.slot[data-kind="can"] .product::after {
  content: "";
  position: absolute; left: -2px; right: -2px; height: 11%;
  background: linear-gradient(180deg, #F2F4F1, #C9CEC9);
}
.slot[data-kind="can"] .product::before { top: 0;    border-bottom: 3px solid var(--outline); }
.slot[data-kind="can"] .product::after  { bottom: 0; border-top:    3px solid var(--outline); }

/* ---- BOTTLE: shoulders, plus a neck and cap standing above the body ---- */
.slot[data-kind="bottle"] .product {
  left: 15%; right: 15%; top: 30px;
  border-radius: 22px 22px 10px 10px;
}
.neck {
  position: absolute; top: 8px; left: 50%;
  width: 17%; height: 26px;
  transform: translateX(-50%);
  background: var(--fill);
  border: 4px solid var(--outline);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  z-index: 1;
}
/* the cap */
.neck::before {
  content: "";
  position: absolute; left: -4px; right: -4px; top: -4px; height: 11px;
  background: var(--cream);
  border: 4px solid var(--outline);
  border-radius: 4px 4px 2px 2px;
}

/* ---- BOX: square corners, a top flap seam and a dashed tear strip ---- */
.slot[data-kind="box"] .product {
  left: 9%; right: 9%;
  border-radius: 4px;
}
.slot[data-kind="box"] .product::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 15%;
  border-top: 3px solid rgba(11,12,17,.5);
}
.slot[data-kind="box"] .product::after {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 7%;
  border-top: 3px dashed rgba(11,12,17,.45);
}

/* ---- the label the copy is printed on ---- */
.product-label {
  position: absolute; z-index: 2;
  left: 7%; right: 7%; bottom: 20%;
  display: flex; flex-direction: column; gap: 0.05rem;
  text-align: left;
  background: var(--cream);
  border: 3px solid var(--outline);
  border-radius: 6px;
  padding: 0.3rem 0.38rem 0.36rem;
  box-shadow: 0 2px 0 rgba(11,12,17,.3);
  transition: background .16s ease;
}
.slot[data-kind="bottle"] .product-label { left: 3%; right: 3%; bottom: 15%; }
.slot[data-kind="can"]    .product-label { left: 3%; right: 3%; bottom: 18%; }

.slot-code {
  font-family: var(--display); font-weight: 800;
  font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--ink-2);
}
.slot-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(0.63rem, 1.2vw, 0.8rem);
  line-height: 1.08;
  color: var(--ink);
  /* A long word like "Assortment" must break inside the label rather than
     escape it — the label is only as wide as the product it is printed on. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* On a phone, three products across leaves a can 43px wide, and no amount of
   font tuning fits "Nothing gets stuck" into a 33px label — measured, not
   guessed: it wrapped to ten lines and grew taller than the product it was
   printed on. Two columns gives each product roughly 120px and the labels fit.

   The A/B/C rail is dropped at the same breakpoint because it maps to three
   rows of three and stops describing the layout. Nothing is lost: every code is
   printed on its own label, which is where a real machine puts it too. */
@media (max-width: 700px) {
  .machine-face { grid-template-columns: 1fr; }
  .grid-rail { display: none; }
  .slots { grid-template-columns: repeat(2, 1fr); }
}

/* Vended: the product presses into the shelf and its label lights amber. The
   fills are already coloured, so lighting the label is the only signal that
   reads clearly against all six backgrounds. */
.slot[aria-pressed="true"] { transform: translateY(5px); }
.slot[aria-pressed="true"] .product { box-shadow: 0 0 0 var(--outline); }
.slot[aria-pressed="true"] .product-label { background: var(--yellow); }

/* ---------- Keypad + tray ---------- */
.machine-side { display: grid; gap: 1.5rem; }

.keypad {
  background: var(--cream);
  border: 5px solid var(--outline); border-radius: 22px;
  box-shadow: var(--pop-3);
  padding: 1.1rem;
}
.readout {
  background: var(--shell);
  border: 4px solid var(--outline); border-radius: 14px;
  padding: 0.6rem 0.85rem; margin-bottom: 0.9rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
.readout-label {
  font-family: var(--display); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #C9CDD6;                      /* 9.6:1 on the shell */
}
.readout-value {
  font-family: var(--display); font-weight: 800;
  font-size: 1.45rem; letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--yellow);                /* 10.9:1 on the shell */
}

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  padding: 0.55rem 0.25rem;
  background: var(--cream); color: var(--ink);
  border: 4px solid var(--outline); border-radius: 12px;
  box-shadow: var(--pop-1);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.key:hover { background: var(--yellow); }
.key:active { transform: translateY(3px); box-shadow: none; }
.key-wide { grid-column: 1 / -1; font-size: 0.92rem; }

.pad-hint { margin-top: 0.85rem; font-size: 0.82rem; color: var(--ink-2); line-height: 1.4; }

/* The tray: the machine's dark delivery bin */
.tray {
  background: var(--shell);
  border: 5px solid var(--outline); border-radius: 22px;
  box-shadow: var(--pop-3);
  min-height: 200px; overflow: hidden;
  display: flex; flex-direction: column;
}
.tray-lip {
  height: 14px; flex: none;
  background: repeating-linear-gradient(90deg, #3B3E4B 0 9px, transparent 9px 18px);
  border-bottom: 4px solid var(--outline);
}
.tray-inner { padding: 1.1rem 1.2rem 1.3rem; }
.tray-empty { color: #C9CDD6; font-size: 0.9rem; }
.tray-code {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.1em;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--outline); border-radius: 999px;
  padding: 0.1em 0.7em; margin-bottom: 0.7rem;
}
.tray h3 { font-size: 1.3rem; color: var(--cream); margin-bottom: 0.4rem; }
.tray p { font-size: 0.94rem; line-height: 1.55; color: #D3D7DE; }  /* 11.6:1 on shell */
.tray-item { animation: vend .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes vend { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Phone links sit inside body copy, so they need to read as links without
   shouting. Underline offset keeps the digits legible. */
.tel-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.tel-link:hover { color: var(--blue); }
.faq-item a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.faq-item a:hover { color: var(--blue); }

/* ---------- About page prose ---------- */
.about-prose { max-width: 66ch; }
.about-prose p {
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.72;
  margin-bottom: 1.15rem;
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { color: var(--ink); font-weight: 700; }

/* The About hero has no illustration beside it, so it needs its own breathing
   room rather than inheriting the two-column hero's tighter top padding. */
.hero .wrap > .pill { margin-top: 0; }

/* ---------- Where we place ---------- */
.place-grid { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .place-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .place-grid { grid-template-columns: repeat(4, 1fr); } }
.place h3 { font-size: 1.18rem; }
.place p { font-size: 0.93rem; }

/* "Unique spaces" is the catch-all invitation, so it gets the wide slot and the
   loud fill. Also squares the grid: six single cards + one double = two clean
   rows at four columns. */
.place-wide { background: var(--yellow); }
@media (min-width: 620px) { .place-wide { grid-column: span 2; } }
.place-wide h3 { font-size: 1.35rem; }
.place-wide p { color: var(--ink); }
/* Cards sit at slightly different angles, like items on a shelf. */
.place:nth-child(4n+1) { transform: rotate(-0.7deg); }
.place:nth-child(4n+2) { transform: rotate(0.5deg); }
.place:nth-child(4n+3) { transform: rotate(-0.4deg); }
.place:nth-child(4n+4) { transform: rotate(0.8deg); }
.place:hover { transform: translateY(-5px) rotate(0deg); }

/* ---------- Service area ---------- */
.area { margin-top: 1.5rem; background: var(--cream); }
.area:hover { transform: none; box-shadow: var(--pop-3); }
.area h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.area > p { color: var(--ink-2); font-size: 0.98rem; max-width: 62ch; }
.area-list {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.1rem 0 0.9rem;
}
.area-list li {
  font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  background: var(--cyan);
  border: 3px solid var(--outline); border-radius: 999px;
  padding: 0.15em 0.8em;
  box-shadow: var(--pop-1);
}
.area-list li:nth-child(3n+2) { background: var(--green); }
.area-list li:nth-child(3n+3) { background: var(--yellow); }

/* The pills are links to the city pages now, so they have to behave like
   buttons: press down on click, and show a visible focus ring. */
.area-list li:has(a) { padding: 0; }
.area-list li a {
  display: block;
  padding: 0.15em 0.8em;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s ease;
}
.area-list li:has(a):hover { box-shadow: var(--pop-2); transform: translateY(-2px); }
.area-list li:has(a):active { box-shadow: 0 0 0 var(--outline); transform: translateY(3px); }
.area-list li a:focus-visible { outline-offset: 5px; }
.area-note { color: var(--ink-2); font-size: 0.9rem; }

/* ---------- What goes in it ---------- */
.assort-copy { max-width: 62ch; }
.assort-copy p { color: var(--ink-2); font-size: 1.06rem; line-height: 1.7; }
.assort-copy p + p { margin-top: 1.1rem; }

/* ---------- City landing pages ---------- */
/* These pages have no cooler illustration, so the hero needs its own breathing
   room rather than inheriting a two-column grid that has nothing in column two. */
.city-hero { background: var(--wash-mint); border-bottom: 5px solid var(--outline); }
.city-hero .hero-copy { max-width: 48rem; }
/* The homepage hero sits in a two-column grid beside the cooler, so its h1 is
   capped at 13ch and its subhead at 44ch — a narrow measure that is correct
   there and far too narrow here, where the copy is the full width of the page. */
.city-hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  max-width: 20ch;
  margin-bottom: 1.15rem;
}
.city-hero .subhead { max-width: 60ch; margin-bottom: 1.1rem; }
.city-hero .subhead + .subhead { margin-bottom: 1.9rem; }

/* The at-a-glance table. Every population figure carries its vintage in a
   smaller line underneath, because a bare number with no date is the kind of
   thing that quietly goes stale and makes the whole page look careless. */
.city-facts { display: grid; gap: 0.9rem; margin-top: 0.4rem; }
@media (min-width: 700px) { .city-facts { grid-template-columns: 1fr 1fr; } }
.city-facts > div {
  border-left: 4px solid var(--outline);
  padding-left: 0.85rem;
}
.city-facts dt {
  font-family: var(--display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-2);
}
.city-facts dd {
  font-size: 1.02rem; line-height: 1.45; color: var(--ink); margin-top: 0.1rem;
}
.city-facts dd span {
  display: block; margin-top: 0.15rem;
  font-size: 0.82rem; color: var(--ink-2);
}

.city-prose {
  max-width: 68ch;
  margin-top: 1.6rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
}

.route-sec { padding-block: clamp(3rem, 6vw, 5rem); }

.terms-list { list-style: none; display: grid; gap: 0.9rem; max-width: 68ch; }
.terms-list li {
  color: var(--ink-2); line-height: 1.6;
  border-left: 4px solid var(--outline); padding-left: 0.9rem;
}
.terms-list strong { color: var(--ink); }

.nearby-sec { padding-block: clamp(2.5rem, 5vw, 4rem); }
.nearby-list { margin-bottom: 0.6rem; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
.faq-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.faq-item p { color: var(--ink-2); font-size: 0.96rem; line-height: 1.6; }

/* ---------- How it works ---------- */
.steps { list-style: none; display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- The machines ---------- */
.machines-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) { .machines-grid { grid-template-columns: 0.9fr 1.25fr; } }
.machines-grid .section-head { margin-bottom: 0; }

.spec-list {
  display: grid; gap: 0;
  background: var(--cream);
  border: 4px solid var(--outline); border-radius: 24px;
  box-shadow: var(--pop-3);
  overflow: hidden;
}
.spec { display: grid; gap: 0.1rem 1.25rem; padding: 0.95rem 1.4rem; border-bottom: 3px solid #EDE9DE; }
.spec:last-child { border-bottom: 0; }
@media (min-width: 560px) { .spec { grid-template-columns: 9.5rem 1fr; } }
.spec dt { font-family: var(--display); font-weight: 800; font-size: 0.95rem; }
.spec dd { color: var(--ink-2); font-size: 0.97rem; line-height: 1.55; }

/* ---------- Request a machine ---------- */
.lead-form {
  display: grid; gap: 1.1rem 1.25rem; grid-template-columns: 1fr;
  background: var(--cream);
  border: 5px solid var(--outline); border-radius: 28px;
  box-shadow: var(--pop-3);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}
@media (min-width: 700px) { .lead-form { grid-template-columns: 1fr 1fr; } }
.field-wide { grid-column: 1 / -1; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-family: var(--display); font-weight: 700; font-size: 0.92rem; }
.field .req { color: var(--error); }

.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #FFFCF2;
  border: 3px solid var(--outline); border-radius: 14px;
  padding: 0.7rem 0.9rem; width: 100%;
  transition: box-shadow .15s ease, background .15s ease;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  box-shadow: 0 0 0 4px var(--cyan);
}
.field input::placeholder, .field textarea::placeholder { color: #6A6A74; } /* 5.4:1 */

.field.invalid input, .field.invalid select, .field.invalid textarea { background: #FFF0EF; }
.field.invalid input, .field.invalid select, .field.invalid textarea { box-shadow: 0 0 0 4px var(--red); }
.field-error { font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--error); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.4rem; }
.form-note { font-size: 0.85rem; color: var(--ink-2); }

.form-status:empty { display: none; }
.form-status {
  border: 4px solid var(--outline); border-radius: 18px;
  box-shadow: var(--pop-1);
  padding: 1rem 1.15rem; font-size: 0.97rem; line-height: 1.55;
}
.form-status.is-ok    { background: var(--green); }
.form-status.is-error { background: #FFD9D6; }
.form-status a { color: var(--ink); font-weight: 700; text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--shell);
  border-top: 5px solid var(--outline);
  color: #D3D7DE;
  padding-block: 2.75rem;
  font-size: 0.92rem;
}
.site-footer .brand { color: var(--cream); }
.footer-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: space-between; align-items: flex-start; }
.footer-contact, .footer-meta { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.footer-row a { color: #D3D7DE; text-decoration: none; }
.footer-row a:hover { color: var(--yellow); }
.footer-legal { margin-top: 2rem; font-size: 0.85rem; color: #A9AEB8; }  /* 6.6:1 on shell */

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.4,.64,1); }
.reveal.in { opacity: 1; transform: none; }
/* the rotated place cards must not lose their tilt when revealed */
.place.reveal.in:nth-child(4n+1) { transform: rotate(-0.7deg); }
.place.reveal.in:nth-child(4n+2) { transform: rotate(0.5deg); }
.place.reveal.in:nth-child(4n+3) { transform: rotate(-0.4deg); }
.place.reveal.in:nth-child(4n+4) { transform: rotate(0.8deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tray-item { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}