/* ==========================================================================
   Green Life Lights — Crate Label
   Mid-century Florida citrus crate labels: flat saturated inks, heavy
   keylines, arched display lettering, stamped seals of provenance.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Ink palette. Citrus orange is deliberately absent — it pulls the world
     toward the grove and away from the season. */
  --stock: oklch(0.963 0.030 82);          /* label paper, warmed */
  --stock-deep: oklch(0.925 0.040 80);     /* paper in shadow */
  --stock-edge: oklch(0.872 0.048 78);     /* paper fold / rule */

  --green: oklch(0.338 0.108 152);         /* the field ink */
  --green-deep: oklch(0.244 0.078 153);    /* overprint / text */
  --green-bright: oklch(0.470 0.128 148);  /* leaf highlight */

  --red: oklch(0.528 0.206 28);            /* label red */
  --red-deep: oklch(0.418 0.170 29);
  --red-bright: oklch(0.598 0.212 30);

  --amber: oklch(0.808 0.158 74);          /* bulb filament */
  --amber-deep: oklch(0.712 0.152 64);
  --amber-light: oklch(0.888 0.126 82);    /* amber that clears 4.5:1 on red */
  --gold: oklch(0.672 0.112 80);           /* keyline gold */

  --ink: oklch(0.218 0.034 150);           /* body text on stock */
  --ink-soft: oklch(0.398 0.036 150);      /* secondary text on stock */
  --on-green: oklch(0.963 0.030 82);       /* text on green field */
  --on-green-soft: oklch(0.845 0.052 92);  /* secondary on green field */
  --on-red: oklch(0.972 0.024 80);
  --on-red-soft: oklch(0.912 0.046 74);

  /* Type */
  --display: "Bevan", "Rockwell", Georgia, serif;
  --text: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Yellowtail", "Segoe Script", cursive;

  /* Spacing — one rhythm throughout */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --measure: 68ch;
  --shell: 78rem;
  --keyline: 2px;

  --radius: 0;          /* crate labels do not have rounded corners */
  --radius-sm: 3px;     /* except small controls, barely */

  --lift: 0 6px 0 -2px oklch(0.238 0.062 157 / 0.16),
          0 14px 28px -18px oklch(0.238 0.062 157 / 0.5);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--green); text-underline-offset: 0.18em; }
a:hover { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 200;
  background: var(--green-deep);
  color: var(--on-green);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--on-green); }

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

/* --- Typography ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.35rem, 1.6rem + 3.2vw, 4.25rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.04rem + 0.35vw, 1.3rem); letter-spacing: -0.01em; }

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

/* The label's small-caps rule line — one named kicker, used only for
   provenance strips, never as a generic eyebrow. */
.provenance {
  font-family: var(--text);
  font-size: clamp(0.68rem, 0.64rem + 0.16vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* --- Shell ---------------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.band { padding-block: clamp(var(--s-8), 5vw, var(--s-10)); position: relative; }
.band--green { background: var(--green); color: var(--on-green); }
.band--green h2, .band--green h3, .band--green h4 { color: var(--on-green); }
.band--green p { color: var(--on-green-soft); }
.band--stock-deep { background: var(--stock-deep); }

/* Red carries a whole region, not a scattering of accents. The deeper red is
   what lets small caps and body copy clear 4.5:1 on top of it. */
.band--red { background: var(--red-deep); color: var(--on-red); }
.band--red h2, .band--red h3 { color: var(--on-red); }
.band--red p { color: var(--on-red-soft); }
.band--red .provenance { color: var(--amber-light); }

/* The one warm, hand-set moment. Used sparingly — it loses its job if it
   turns up on every section. */
.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.1;
  color: var(--amber);
  margin-bottom: var(--s-3);
  letter-spacing: 0;
}

[id] { scroll-margin-top: 6.5rem; }

/* --- Keylines and label ornament ------------------------------------------ */

/* The double rule that frames a crate label. Outer heavy, inner hairline. */
.keyline {
  border: var(--keyline) solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.rule-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--gold);
}
.rule-row::before,
.rule-row::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid currentColor;
  border-bottom: 3px double currentColor;
  padding-bottom: 3px;
}

/* Section heading, centered like a label's cartouche */
.cartouche {
  text-align: center;
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-8));
}
.cartouche h2 { margin-bottom: var(--s-3); }
.cartouche p {
  margin-inline: auto;
  max-width: 56ch;
  color: var(--ink-soft);
}
.band--green .cartouche p { color: var(--on-green-soft); }
.cartouche .provenance { color: var(--red); margin-bottom: var(--s-3); }
.band--green .cartouche .provenance { color: var(--amber); }
.band--red .cartouche .provenance { color: var(--amber-light); }
.band--red .rule-row { color: var(--amber-light); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 1.7em;
  border: var(--keyline) solid var(--ink);
  background: var(--amber);
  color: var(--green-deep);
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background-color 0.16s var(--ease);
}
.btn:hover {
  color: var(--green-deep);
  background: var(--amber-deep);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--ink); }

.btn--red { background: var(--red); color: var(--stock); }
.btn--red:hover { background: var(--red-deep); color: var(--stock); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.btn--ghost:hover { background: var(--stock-deep); color: var(--ink); }

/* Ghost buttons sitting on a green field invert, or they read dark-on-dark. */
.band--green .btn--ghost,
.label .btn--ghost {
  color: var(--on-green);
  border-color: var(--amber);
  box-shadow: 4px 4px 0 0 var(--amber);
}
.band--green .btn--ghost:hover,
.label .btn--ghost:hover { background: var(--green-deep); color: var(--amber); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 4px 0 0 var(--ink);
}

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

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--stock);
  border-bottom: var(--keyline) solid var(--ink);
  transition: box-shadow 0.24s var(--ease);
}
body.is-scrolled .masthead { box-shadow: 0 10px 24px -20px oklch(0.238 0.062 157 / 0.85); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.75rem;
}

.masthead__logo { display: flex; align-items: center; flex-shrink: 0; }
/* The row's min-height (4.75rem) sets the header, not the logo — so the logo
   can fill most of that box without the header growing at all. */
.masthead__logo img { height: 3.7rem; width: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 1.6vw, var(--s-6));
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The link and the disclosure button share one box model. An inline <a> ignores
   vertical padding for layout while an inline-flex <button> does not, which is
   what pushed "Services" up off the line. */
.nav__list a,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s-2) 0;
  white-space: nowrap;
  cursor: pointer;
}
.nav__list a:hover,
.nav__list a.is-current,
.nav__toggle:hover { color: var(--red); border-bottom-color: var(--red); }

.nav__group { position: relative; }
.nav__toggle svg { width: 0.7em; height: 0.7em; transition: transform 0.2s var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: 50%;
  translate: -50% 0;
  min-width: 15rem;
  background: var(--stock);
  border: var(--keyline) solid var(--ink);
  box-shadow: var(--lift);
  list-style: none;
  margin: 0;
  padding: var(--s-2);
  display: none;
}
.nav__menu[data-open="true"] { display: block; }
.nav__menu a {
  display: block;
  padding: var(--s-3);
  letter-spacing: 0.1em;
  border-bottom: 0;
}
.nav__menu a:hover { background: var(--stock-deep); border-bottom: 0; }

.masthead__call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green-deep);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__call:hover { color: var(--red); }
.masthead__call svg { width: 1.1em; height: 1.1em; }

.nav__burger {
  display: none;
  background: var(--green);
  border: var(--keyline) solid var(--ink);
  color: var(--on-green);
  width: 2.85rem;
  height: 2.85rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.nav__burger svg { width: 1.35rem; height: 1.35rem; }
.nav__burger .icon-close { display: none; }
body.is-nav-open .nav__burger .icon-close { display: block; }
body.is-nav-open .nav__burger .icon-open { display: none; }

/* --- Hero: the label ------------------------------------------------------ */

.hero {
  padding-top: calc(4.75rem + clamp(var(--s-4), 2.2vw, var(--s-6)));
  padding-bottom: clamp(var(--s-7), 4vw, var(--s-9));
  background: var(--stock);
  position: relative;
}

/* The label is the page's largest object and wants more of the viewport than
   the reading shell allows. */
.hero .shell { width: min(100% - 2rem, 96rem); }

/* Above the two-column breakpoint the label is sized to land inside one
   viewport. Every internal dimension is capped against vh as well as vw, so a
   short laptop screen scales the label down instead of pushing the form below
   the fold. Below this width the layout stacks and a full-height hero would be
   actively hostile, so the caps are not applied. */
@media (min-width: 62rem) {
  .hero {
    min-height: 100dvh;
    display: grid;
    align-content: center;
    padding-top: calc(4.75rem + min(2.2vw, 1.4vh));
    padding-bottom: min(var(--s-7), 2.6vh);
  }
  .label {
    padding-top: min(clamp(3.5rem, 3.4vw + 1.75rem, 5.5rem), 5.6vh);
    padding-bottom: min(clamp(var(--s-5), 3.4vw, var(--s-8)), 3.4vh);
  }
  .label__grid { gap: clamp(var(--s-5), 2.6vw, var(--s-7)); }

  .script { font-size: min(clamp(1.4rem, 1.2rem + 1vw, 2.1rem), 3.2vh); margin-bottom: min(var(--s-3), 1vh); }
  .hero__origin { margin-bottom: min(var(--s-4), 1.8vh); }
  .hero h1 { font-size: min(clamp(2.1rem, 1.2rem + 3.4vw, 4.25rem), 6.1vh); margin-bottom: min(var(--s-5), 2vh); }
  .hero__lede {
    font-size: min(clamp(1.05rem, 1rem + 0.35vw, 1.22rem), 2.1vh);
    margin-bottom: min(var(--s-6), 2.2vh);
  }
  .hero__actions { margin-bottom: 0; gap: var(--s-4); }

  .label__grid { align-items: center; }
  .order { padding: min(clamp(var(--s-5), 2.2vw, var(--s-6)), 3.4vh) clamp(var(--s-5), 2.2vw, var(--s-6)); }
  .order__head { padding-bottom: min(var(--s-4), 1.8vh); margin-bottom: min(var(--s-5), 2.2vh); }
  .order__head h2 { font-size: min(clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem), 3.6vh); }
  .field { margin-bottom: min(var(--s-4), 1.8vh); }
  .field label { margin-bottom: min(var(--s-2), 0.8vh); }
  .order input, .order select { padding-block: min(0.7em, 1.4vh); }
  .order__fineprint { margin-top: min(var(--s-4), 1.6vh); }
}

.label {
  position: relative;
  background: var(--green);
  color: var(--on-green);
  border: 3px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  padding: clamp(var(--s-5), 3.4vw, var(--s-8));
  /* Clear the strand hanging off the top rule. */
  padding-top: clamp(3.5rem, 3.4vw + 1.75rem, 5.5rem);
  isolation: isolate;
}

/* Corner ornaments — the printed register marks of a label plate */
.label__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--amber);
  z-index: 3;
}
.label__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.label__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.label__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.label__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.label__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(var(--s-6), 3.5vw, var(--s-8));
  align-items: start;
  position: relative;
  z-index: 2;
}

.label__lockup { display: block; width: min(100%, 30rem); margin-bottom: var(--s-4); }
.label__lockup text { fill: var(--amber); }
.label__lockup .lockup-arc {
  font-family: var(--display);
  font-size: 41px;
  letter-spacing: 0.02em;
}
.label__lockup .lockup-sub {
  font-family: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  fill: var(--on-green-soft);
}

.hero h1 { color: var(--stock); margin-bottom: var(--s-5); }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero__lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  color: var(--on-green-soft);
  margin-bottom: var(--s-6);
  max-width: 46ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-7); }

/* Guarantee strip, sitting on the fold line under the label. Moved out of the
   label so the hero lands inside one viewport. */
.guarantees {
  background: var(--green-deep);
  border-block: 2px solid var(--ink);
  padding-block: clamp(var(--s-4), 2.2vw, var(--s-5));
  color: var(--on-green);
}
.guarantees .seals { max-width: none; margin-inline: auto; }
.guarantees .seal { flex-direction: row; gap: var(--s-3); text-align: left; justify-content: center; }
.guarantees .seal__mark { width: 2.6rem; height: 2.6rem; flex: none; }
.guarantees .seal__mark svg { width: 1.2rem; height: 1.2rem; }

.hero__origin { color: var(--amber); margin-bottom: var(--s-4); }

/* Guarantee seals — stamped, not badged */
.seals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
}
.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}
.seal__mark {
  width: 3.4rem;
  height: 3.4rem;
  border: 2px solid var(--amber);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--amber);
  position: relative;
}
.seal__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid oklch(0.795 0.145 76 / 0.45);
  border-radius: 50%;
}
.seal__mark svg { width: 1.5rem; height: 1.5rem; }
.seal span {
  font-family: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-green);
  line-height: 1.3;
}

/* The photograph is the label's ground. A separate framed vignette pushed the
   hero past one viewport; as the ground it stays visible as proof and costs no
   vertical space. Wrapped so the clip does not eat the light strand's sockets. */
.label__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.label__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.label__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    101deg,
    oklch(0.244 0.078 153 / 0.93) 0%,
    oklch(0.244 0.078 153 / 0.90) 32%,
    oklch(0.258 0.086 152 / 0.66) 50%,
    oklch(0.275 0.094 152 / 0.34) 100%
  );
}

/* A strand of bulbs hung along the label's top rule. */
.lightstring {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(2rem, 5vw, 5rem);
  border-top: 2px solid var(--gold);
  z-index: 4;
  pointer-events: none;
}
.lightstring span {
  position: relative;
  width: 13px;
  height: 19px;
  border-radius: 44% 44% 52% 52% / 30% 30% 70% 70%;
  background: var(--amber);
  box-shadow: 0 0 13px 2px oklch(0.808 0.158 74 / 0.55);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lightstring span::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  translate: -50% 0;
  width: 6px;
  height: 5px;
  background: var(--green-deep);
  border: 1px solid var(--gold);
}
.lightstring span:nth-child(4n + 2) {
  background: var(--red-bright);
  box-shadow: 0 0 13px 2px oklch(0.598 0.212 30 / 0.55);
}
.lightstring span:nth-child(4n + 3) {
  background: var(--stock);
  box-shadow: 0 0 13px 2px oklch(0.963 0.030 82 / 0.5);
}
.lightstring span:nth-child(4n + 4) {
  background: var(--green-bright);
  box-shadow: 0 0 13px 2px oklch(0.470 0.128 148 / 0.55);
}
.js .lightstring span.bulb--off {
  background: oklch(0.34 0.022 150);
  box-shadow: none;
}

.bulb { transition: fill 0.4s var(--ease), opacity 0.4s var(--ease); }
/* Unlit only when JS is there to light them. Without it the roofline just
   renders lit, which is the honest resting state of the illustration. */
.js .bulb--off { fill: oklch(0.40 0.03 150); opacity: 0.55; }

/* --- Order block: the estimate form --------------------------------------- */

.order {
  background: var(--stock);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 0 oklch(0.238 0.062 157 / 0.35);
  padding: clamp(var(--s-5), 2.2vw, var(--s-6));
}
.order__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 3px double var(--stock-edge);
}
.order__head h2,
.order__head h3 { color: var(--ink); font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem); }
.order__stamp {
  font-family: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1.5px solid var(--red);
  padding: 0.35em 0.7em;
  transform: rotate(-3deg);
  white-space: nowrap;
}

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--stock-deep);
  border: 1.5px solid var(--stock-edge);
  border-bottom-width: 2.5px;
  border-bottom-color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.85em;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
textarea { resize: vertical; min-height: 7rem; }
input::placeholder, textarea::placeholder { color: oklch(0.52 0.025 152); }
input:hover, select:hover, textarea:hover { background: var(--stock); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  background: var(--stock);
  border-color: var(--red);
  box-shadow: 0 0 0 3px oklch(0.512 0.183 28 / 0.16);
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-bottom-color: var(--red); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 1.05em top 55%, right 0.75em top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4em;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.form-status { margin-bottom: var(--s-4); }
.form-status p {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font-size: 0.92rem;
  font-weight: 600;
  border: 1.5px solid;
  max-width: none;
}
.form-status .is-loading { color: var(--ink-soft); border-color: var(--stock-edge); background: var(--stock-deep); }
.form-status .is-error { color: var(--red-deep); border-color: var(--red); background: oklch(0.512 0.183 28 / 0.09); }
.form-status .is-sent { color: var(--green-deep); border-color: var(--green); background: oklch(0.325 0.086 156 / 0.1); }
.form-status [hidden] { display: none; }

.order__fineprint {
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-top: var(--s-3);
  line-height: 1.45;
}
.order__fineprint a { color: var(--ink-soft); text-decoration: underline; }
.order__fineprint a:hover { color: var(--red); }

/* The badge is hidden, so Google's required attribution moves here. Hiding it
   with visibility (not display) keeps the widget functional, which is the
   condition their terms attach to suppressing it. */
.grecaptcha-badge { visibility: hidden; }

.recaptcha-note {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: var(--s-3);
  max-width: none;
}
.recaptcha-note a { color: var(--ink-soft); text-decoration: underline; }
.recaptcha-note a:hover { color: var(--red); }

/* --- About ---------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: center;
}
.about__copy h2 { margin-bottom: var(--s-5); }
.about__copy .provenance { color: var(--red); margin-bottom: var(--s-3); }

.plate {
  background: var(--green-deep);
  overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Both plates are the same object: framed photo, caption beneath, tops level.
   The previous staggered arrangement offset one column and reversed the order
   inside it, so neither the photos nor the captions lined up with each other. */
.about__plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.plate-card {
  position: relative;
  margin: 0;
  background: var(--stock-deep);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 oklch(0.244 0.078 153 / 0.22);
  display: flex;
  flex-direction: column;
}
.plate-card__tab {
  position: absolute;
  top: 0;
  left: var(--s-4);
  translate: 0 -50%;
  z-index: 2;
  background: var(--red);
  color: var(--stock);
  font-family: var(--text);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
}
.plate-card .plate {
  aspect-ratio: 4 / 3;
  border-bottom: 2px solid var(--ink);
}
.plate-card figcaption { padding: var(--s-5); flex: 1; }
.plate-card h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
.plate-card p { font-size: 0.94rem; color: var(--ink-soft); }

/* Truck run — a single authored motion moment. Full-bleed: the truck enters
   off one edge of the viewport and leaves off the other. */
.truckline {
  position: relative;
  width: 100%;
  margin-top: clamp(var(--s-7), 5vw, var(--s-9));
  overflow: hidden;
}
/* The road it drives on — the same dashed gold rule as the process route. */
.truckline::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  border-top: 3px dashed oklch(0.672 0.112 80 / 0.55);
}
.truckline img {
  position: relative;
  width: clamp(11rem, 22vw, 17rem);
  /* Sit the wheels on the road rather than floating above it. */
  margin-bottom: -4px;
  will-change: transform;
  filter: drop-shadow(0 4px 4px oklch(0.244 0.078 153 / 0.34));
}

/* --- Services ------------------------------------------------------------- */

.crates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
  list-style: none;
  margin: 0 0 clamp(var(--s-7), 5vw, var(--s-9));
  padding: 0;
}

.crate {
  position: relative;
  background: var(--stock);
  border: 2px solid var(--ink);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 6px 6px 0 0 oklch(0.238 0.062 157 / 0.22);
}
.crate:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--green-deep); }
.crate:focus-within { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--green-deep); }

.crate__stencil {
  position: absolute;
  top: 0; left: var(--s-5);
  translate: 0 -50%;
  background: var(--red);
  color: var(--stock);
  font-family: var(--text);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
}
.crate__mark { color: var(--green); margin-bottom: var(--s-1); }
.crate__mark svg { width: 2.4rem; height: 2.4rem; }
.crate h3 { font-size: 1.3rem; }
.crate h3 a { color: var(--ink); text-decoration: none; }
.crate h3 a::after { content: ""; position: absolute; inset: 0; }
.crate:hover h3 a { color: var(--red); }
.crate p { font-size: 0.94rem; color: var(--ink-soft); }

/* Process — five stamped seals along a route */
.route { position: relative; }
.route__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  position: relative;
}
.route__list::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  left: 10%;
  right: 10%;
  border-top: 3px dashed oklch(0.795 0.145 76 / 0.5);
  z-index: 0;
}
.route__step { text-align: center; position: relative; z-index: 1; }
.route__seal {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--amber);
  color: var(--amber);
  display: grid;
  place-items: center;
  position: relative;
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
/* The stamp entrance is an enhancement. Seals are visible by default so the
   section never depends on a script to have content. */
.js .route__seal { opacity: 0; transform: scale(1.35) rotate(-8deg); }
.js .route__step.is-stamped .route__seal { opacity: 1; transform: scale(1) rotate(0deg); }
.route__seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed oklch(0.795 0.145 76 / 0.55);
  border-radius: 50%;
}
.route__seal svg { width: 2rem; height: 2rem; }
.route__num {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 1.7rem; height: 1.7rem;
  background: var(--red);
  color: var(--stock);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
}
.route__step h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.route__step p { font-size: 0.88rem; color: var(--ink-soft); margin-inline: auto; max-width: 22ch; }
.band--green .route__step p { color: var(--on-green-soft); }
.band--green .route__seal { background: var(--green-deep); }

/* The step nobody else offers gets the heaviest stamp. Weight comes from ink,
   not diameter — a larger seal would break the alignment of the whole row. */
.route__step--keystone .route__seal {
  border-width: 3px;
  background: var(--amber);
  color: var(--green-deep);
}
.route__step--keystone .route__seal::after { border-color: oklch(0.238 0.062 157 / 0.45); }
.route__step--keystone .route__num { background: var(--green-deep); }

/* Both gnomes peek over the top edge of the outer service boxes. The art is
   cropped at the hip, so anchoring the cut edge behind a card turns the crop
   into the joke instead of hiding it. */
.crates-wrap { position: relative; }
.crates-wrap .crates { position: relative; z-index: 1; }

.gnome { position: absolute; pointer-events: none; }
.gnome--peek {
  width: clamp(5.5rem, 9vw, 9rem);
  bottom: 100%;
  margin-bottom: -1.1rem;
  z-index: 0;
}
.gnome--peek-left { left: -1rem; }
.gnome--peek-right { right: -1rem; }

/* --- Call to action ------------------------------------------------------- */

.booking { text-align: center; }
.booking h2 { margin-bottom: var(--s-4); }
.booking p { margin-inline: auto; margin-bottom: var(--s-6); }

.tally {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  border: 2px solid var(--amber-light);
  color: var(--amber-light);
  padding: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
  font-family: var(--text);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.tally strong {
  font-family: var(--display);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--stock);
}

/* --- Testimonials --------------------------------------------------------- */

/* Columns rather than a horizontal rail: the rail forced 19rem cards, which is
   what made them skinny and tall, and it hid three of the five quotes behind a
   sideways scroll. Column flow also lets uneven quote lengths pack tightly. */
/* One row that scrolls. Cards keep the three-across width at every position,
   so nothing reflows as you page through. */
.rail { position: relative; }

.quotes {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  padding: 0 0 var(--s-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--stock-deep);
}
.quotes > li {
  flex: 0 0 calc((100% - 2 * var(--s-5)) / 3);
  display: flex;
  scroll-snap-align: start;
}
.quote { flex: 1; }

.rail__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.rail__btn {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  background: var(--stock);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background-color 0.16s var(--ease);
}
.rail__btn:hover { background: var(--amber); transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--ink); }
.rail__btn:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: 3px 3px 0 0 var(--ink); background: var(--stock); }
.rail__btn svg { width: 1.3rem; height: 1.3rem; }

/* Name on the left, stars on the right, sharing one baseline. */
.quote figcaption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.stars { display: inline-flex; gap: 2px; color: var(--gold); flex: none; }
.stars svg { width: 0.95rem; height: 0.95rem; }

.quote {
  /* <figure> ships with margin: 1em 40px — that was eating 80px of every
     column and squeezing the cards narrow. */
  margin: 0;
  background: var(--stock);
  border: 2px solid var(--ink);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}
.quote::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--stock-edge);
  pointer-events: none;
}
.quote blockquote {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink);
  position: relative;
  padding-top: var(--s-5);
}
/* A stamped opening mark, in the display face. */
.quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.28em;
  left: -0.04em;
  font-family: var(--display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--amber);
  pointer-events: none;
}
.quote blockquote p { max-width: none; }
.quote figcaption {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 3px double var(--stock-edge);
}
.quote cite { font-style: normal; font-family: var(--display); font-size: 1.05rem; display: block; }
/* Scoped to the name block so it cannot capture the star row, which is also a
   span inside this figcaption. */
.quote__who span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

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

.faq { max-width: 54rem; margin-inline: auto; }
.faq details {
  border-bottom: 2px solid var(--stock-edge);
  padding: var(--s-5) 0;
}
.faq details:first-of-type { border-top: 2px solid var(--stock-edge); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.25;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  background: var(--green);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform 0.24s var(--ease), background-color 0.24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); background: var(--red); }
.faq details p { margin-top: var(--s-4); color: var(--ink-soft); }

/* --- Contact -------------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: start;
}

.docket { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.docket li {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--stock-edge);
}
.docket li:first-child { border-top: 1px solid var(--stock-edge); }
.docket svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--red); margin-top: 0.2rem; }
.docket h3 {
  font-family: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
}
.docket p { font-size: 1.02rem; margin: 0; }
.docket a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.docket a:hover { color: var(--red); text-decoration: underline; }

.map { border: 2px solid var(--ink); line-height: 0; }
.map iframe { width: 100%; height: 17rem; border: 0; display: block; filter: saturate(0.75); }

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

.footer {
  background: var(--green-deep);
  color: var(--on-green-soft);
  border-top: 3px solid var(--ink);
  padding-block: clamp(var(--s-7), 5vw, var(--s-8)) var(--s-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-6), 4vw, var(--s-8));
}
.footer h2, .footer h3 { color: var(--stock); }
.footer h2 { font-size: 1.5rem; margin-bottom: var(--s-4); }
.footer h3 {
  font-family: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s-4);
}
.footer p { font-size: 0.94rem; }
.footer a { color: var(--on-green-soft); text-decoration: none; }
.footer a:hover { color: var(--amber); text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: 0.94rem; }

.social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.social a {
  width: 2.6rem; height: 2.6rem;
  border: 1.5px solid var(--on-green-soft);
  display: grid; place-items: center;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.social a:hover { background: var(--amber); border-color: var(--amber); color: var(--green-deep); }
.social svg { width: 1.15rem; height: 1.15rem; }

.colophon {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
  padding-top: var(--s-5);
  border-top: 1px solid oklch(0.955 0.021 88 / 0.2);
  text-align: center;
}
.colophon p { font-size: 0.8rem; margin-inline: auto; margin-bottom: var(--s-2); color: oklch(0.78 0.035 96); }

/* --- Service pages -------------------------------------------------------- */

/* A compact relative of the homepage label: same green field, keylines and
   strand, without the full-viewport hero apparatus. */
.pagehead {
  position: relative;
  background: var(--green);
  color: var(--on-green);
  border-bottom: 3px solid var(--ink);
  padding-top: calc(4.75rem + clamp(var(--s-6), 5vw, var(--s-8)));
  padding-bottom: clamp(var(--s-6), 5vw, var(--s-8));
  overflow: hidden;
}
/* The header is fixed, so this section starts at document top — the strand has
   to be pushed clear of it or it hangs behind the masthead. */
.pagehead .lightstring {
  /* +2px clears the masthead's own bottom border, which would otherwise sit
     exactly on top of the strand's wire and hide it. */
  top: calc(4.75rem + 2px);
  padding-inline: clamp(2rem, 6vw, 7rem);
}
.pagehead .provenance { color: var(--amber); margin-bottom: var(--s-3); }
.pagehead h1 {
  color: var(--stock);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  margin-bottom: var(--s-4);
  max-width: 20ch;
}
.pagehead__lede {
  color: var(--on-green-soft);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  max-width: 58ch;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.crumbs li { display: flex; align-items: center; gap: var(--s-3); color: var(--on-green-soft); }
.crumbs li + li::before { content: "/"; color: var(--gold); }
.crumbs a { color: var(--on-green-soft); text-decoration: none; }
.crumbs a:hover { color: var(--amber); text-decoration: underline; }
.crumbs [aria-current] { color: var(--amber); }

/* Intro: copy beside a framed plate */
.lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: center;
}
.lede-grid h2 { margin-bottom: var(--s-5); }

/* "What's Included" reuses the crate card, minus the link behaviour. */
.crate--static { cursor: default; }
.crate--static:hover {
  transform: none;
  box-shadow: 6px 6px 0 0 oklch(0.244 0.078 153 / 0.22);
}
.crate--static h3 { color: var(--ink); }

/* Cross-links to the other three services */
.crosslinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.crosslinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-4) var(--s-5);
  background: var(--stock);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background-color 0.16s var(--ease);
}
.crosslinks a:hover {
  background: var(--amber);
  color: var(--green-deep);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.crosslinks svg { width: 1.1rem; height: 1.1rem; flex: none; }

@media (max-width: 62rem) {
  .lede-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Scroll top ----------------------------------------------------------- */

.to-top {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 90;
  width: 2.9rem; height: 2.9rem;
  background: var(--red);
  color: var(--stock);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--red-deep); }
.to-top svg { width: 1.3rem; height: 1.3rem; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 62rem) {
  /* Single column puts text across the full width, including the lighter end
     of the gradient. Flat veil instead. */
  .label__veil { background: oklch(0.244 0.078 153 / 0.93); }

  .label__grid,
  .about__grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .route__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .route__list::before { display: none; }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 32rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .quotes > li { flex-basis: calc((100% - var(--s-5)) / 2); }
}

@media (max-width: 52rem) {
  .nav__burger { display: inline-flex; }
  .masthead__call span { display: none; }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    background: var(--stock);
    border-bottom: var(--keyline) solid var(--ink);
    padding: var(--s-5) 1.25rem var(--s-6);
    display: none;
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }
  body.is-nav-open .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--stock-edge); }
  .nav__list a, .nav__toggle { display: flex; width: 100%; padding: var(--s-4) 0; font-size: 0.92rem; }
  .nav__toggle { justify-content: space-between; }
  .nav__group { position: static; }
  .nav__menu {
    position: static;
    translate: none;
    border: 0;
    box-shadow: none;
    background: var(--stock-deep);
    padding: 0 0 var(--s-3);
    min-width: 0;
  }
  .nav__menu a { padding: var(--s-3) var(--s-4); font-size: 0.82rem; }

  .about__plates { grid-template-columns: 1fr; }
  .quotes > li { flex-basis: calc(100% - 3rem); }

  /* One column puts both gnomes over the same card, and they rise into the
     section copy. Shrink them and open the gap above the cards. */
  #services .cartouche { margin-bottom: 5.5rem; }
  .gnome--peek { width: 4.5rem; margin-bottom: -0.8rem; }
}

@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .route__list { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .label { outline-offset: 3px; }
  .seals { grid-template-columns: 1fr 1fr; }
  /* Thin the strand so bulbs keep their spacing. Colour cycling is unaffected
     because :nth-child still counts the hidden ones. */
  .lightstring span:nth-child(2n) { display: none; }
}

/* --- Areas we serve ------------------------------------------------------- */

/* The town list is the geographic claim, so it gets the register-mark
   treatment rather than sitting inside the prose as a comma run-on. */
.areas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: start;
}
.areas__limit { color: var(--ink-soft); }
.areas__limit strong { color: var(--ink); }
.areas__label { color: var(--red); margin-bottom: var(--s-4); }

.towns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 13rem keeps "Bellair-Meadowbrook Terrace" on one line; a wrapped item
     would make its row taller and throw the hairlines out of alignment
     against the neighbouring columns. */
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 var(--s-5);
}
.towns li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-bottom: 1px solid var(--stock-edge);
  font-size: 0.9rem;
  font-weight: 600;
}
.towns li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.45rem;
  height: 0.45rem;
  background: var(--red);
}

@media (max-width: 62rem) {
  .areas__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Legal pages ---------------------------------------------------------- */

/* The printed reverse of a crate label: the fine-print block. Read mode — the
   visitor is looking for one clause, not being sold to. Numbered clauses earn
   their numerals here because a legal document is cited by number, and the
   index links against them. */

/* Document header strip: effective date stamped like a provenance line. */
.deed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4) var(--s-7);
  padding: var(--s-5) var(--s-6);
  margin-bottom: clamp(var(--s-7), 5vw, var(--s-8));
  background: var(--stock-deep);
  border: var(--keyline) solid var(--ink);
  box-shadow: 6px 6px 0 0 oklch(0.244 0.078 153 / 0.22);
}
.deed__meta h2 {
  font-family: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}
.deed__date {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  color: var(--red);
  margin: 0;
}
.deed__note {
  flex: 1 1 24rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin: 0;
}

.deed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-7));
}

/* Contents index — a real wayfinding aid at eleven clauses, not decoration. */
.deed__nav .provenance { color: var(--red); margin-bottom: var(--s-4); }
.deed__index {
  counter-reset: idx;
  list-style: none;
  margin: 0;
  padding: 0;
}
.deed__index li {
  counter-increment: idx;
  border-bottom: 1px solid var(--stock-edge);
}
.deed__index li:first-child { border-top: 1px solid var(--stock-edge); }
.deed__index a {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.deed__index a::before {
  content: counter(idx);
  flex: none;
  width: 1.3rem;
  font-family: var(--display);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.deed__index a:hover { color: var(--red); }
.deed__index a:hover::before { color: var(--red); }

.clauses {
  counter-reset: clause;
  list-style: none;
  margin: 0;
  padding: 0;
}
.clause {
  counter-increment: clause;
  position: relative;
  padding-left: clamp(2.9rem, 1.9rem + 2vw, 3.4rem);
  padding-top: var(--s-7);
  margin-top: var(--s-7);
  border-top: 1px solid var(--stock-edge);
  /* Fixed masthead: keep a jumped-to clause clear of it. */
  scroll-margin-top: 6.5rem;
}
.clause:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
/* The clause numeral as a register mark. It is a bordered square at rest so
   that :target can fill it without shifting anything. */
.clause::before {
  content: counter(clause);
  position: absolute;
  left: 0;
  /* Absolute positioning is relative to the padding box, so the numeral has to
     be pushed down past the clause's own top padding to sit on the heading
     rather than floating up against the separator rule. */
  top: calc(var(--s-7) - 0.1rem);
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--stock);
  border: var(--keyline) solid var(--ink);
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--red);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.clause:first-child::before { top: -0.1rem; }
.clause:target::before { background: var(--red); color: var(--stock); }
.clause h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}
.clause a { color: var(--green-deep); font-weight: 600; text-underline-offset: 0.2em; }
.clause a:hover { color: var(--red); }

.clause ul {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
}
.clause ul:last-child { margin-bottom: 0; }
.clause li { position: relative; padding-left: var(--s-5); }
.clause li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--red);
}

@media (min-width: 68rem) {
  .deed {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(var(--s-7), 5vw, var(--s-9));
    align-items: start;
  }
  .deed__nav { position: sticky; top: calc(4.75rem + var(--s-5)); }
}

/* --- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .route__seal { opacity: 1; transform: none; }
  .truckline img { transform: none !important; }
}