/* Full Service Web Design — site stylesheet.
   Mobile-first. Design at 390px, scale up. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.125rem);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* room for the sticky mobile bar */
  overflow-wrap: break-word;
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* Grid and flex children default to min-width:auto, so one long word inside a
   card or trust-bar item can push a track wider than its column and give the
   whole page a horizontal scrollbar. This is the fix, not overflow-x:hidden. */
.hero__grid > *, .grid > *, .trustbar > *, .stats > *, .steps > *, .split > *,
.footer__grid > *, .cta-band__inner > *, .cta-opts > *, .site-header__bar > * {
  min-width: 0;
}
.trustbar__item > div, .cta-opt > span { min-width: 0; }

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 4.4vw + 1rem, 3.5rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.625rem, 2.2vw + 1rem, 2.375rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, .8vw + 1rem, 1.5rem);     font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s2); }

a { color: var(--teal-text); text-underline-offset: 3px; }
a:hover { color: var(--green-text); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt  { background: var(--surface-2); }
.section--dark { background: var(--dark); color: var(--on-dark-2); }
.section--dark h2, .section--dark h3, .section--dark h1 { color: #fff; }
.section--tight { padding-block: clamp(32px, 5vw, 48px); }

/* Tinted sections. The floor is warm terracotta and cool Just-In Time cyan;
   before these existed every band on the site was white or near-white paper,
   so a page of eight sections read as one undifferentiated column. */
.section--warm { background: linear-gradient(180deg, #FBF1E8 0%, #F7E9DC 100%); }
.section--cool { background: linear-gradient(180deg, #EFF9FC 0%, #E4F4F9 100%); }
.section--cool .eyebrow { color: var(--teal-text); }

/* Only collapse the seam when the two bands share a background — where the
   tone changes the padding is what separates the colours, so it stays. */
.section--warm  + .section--warm,
.section--cool  + .section--cool,
.section--alt   + .section--alt { padding-top: 0; }

.lede { font-size: clamp(1.0625rem, .6vw + 1rem, 1.25rem); color: var(--ink-2); max-width: 62ch; }
.eyebrow {
  font-family: var(--font-head); font-weight: 600; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-text);
  margin-bottom: var(--s2);
}
.section--dark .eyebrow { color: var(--green); }
.center { text-align: center; }
.measure { max-width: 68ch; }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }

/* ---------- ribbon: the one motif that carries brand recognition ---------- */
.ribbon { height: 6px; background: var(--ribbon); border: 0; }
.ribbon--thin { height: 4px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; gap: var(--s3); min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.0625rem; letter-spacing: -.02em; }
.brand img { width: 57px; height: 57px; border-radius: 13px; }
.brand span { display: none; }
@media (min-width: 480px) { .brand span { display: inline; } }

/* Nav items sit on one line each and stay vertically centred in the bar.
   Without the nowrap, "How It Works" and "Pickup & Delivery" broke onto two
   lines and every other item floated against a two-line neighbour, which is
   what made the menu look ragged. The bar is the one place in the layout where
   min-width:0 shrinking is wrong. */
/* 1180px, not 980: seven nowrap items plus the brand and both header buttons
   need the full wrap width. At 980 the row overflowed and pushed "Get in touch"
   off the right edge. Below this the hamburger takes over. */
.nav { display: none; margin-left: auto; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 26px); flex: none; }
@media (min-width: 1180px) { .nav { display: flex; } }
.nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .9375rem;
  white-space: nowrap; text-align: center;
  display: inline-flex; align-items: center;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--green-text); border-bottom-color: var(--green); }
.header-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (min-width: 1180px) { .header-cta { margin-left: 0; } }

/* On a phone the bar cannot hold the brand, both buttons and the toggle — the
   toggle was being pushed off the right edge and the page scrolled sideways.
   The number is not lost: the sticky bottom bar carries "Call now" on exactly
   these widths, and the mobile menu carries "Get in touch". */
@media (max-width: 620px) {
  .header-cta .btn--secondary { display: none; }
}
@media (max-width: 460px) {
  .header-cta .btn--primary { display: none; }
  .brand img { width: 46px; height: 46px; border-radius: 11px; }
}
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; font-size: .875rem; color: var(--ink); cursor: pointer; }
@media (min-width: 1180px) { .nav-toggle { display: none; } }
.mobile-nav { display: none; border-top: 1px solid var(--line); padding-block: var(--s2) var(--s3); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a { display: block; padding: 13px 0; color: var(--ink); text-decoration: none; font-weight: 500; text-align: center; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 26px; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  border-radius: var(--radius); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s;
}
.btn--primary   { background: var(--green); color: #fff; box-shadow: 0 2px 10px rgba(111,174,18,.28); }
.btn--primary:hover { background: var(--green-700); color: #fff; transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--ondark    { background: #fff; color: var(--ink); }
.btn--ondark:hover { background: var(--surface-2); color: var(--ink); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn--sm { min-height: 40px; padding: 9px 16px; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--surface-2); overflow: hidden; padding-block: clamp(48px, 8vw, 88px); }
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,13,16,.11) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: linear-gradient(160deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(160deg, transparent 30%, #000 100%);
}
.hero > * { position: relative; }
.hero__grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.hero h1 .accent { color: var(--green); }
.hero h1 .accent-2 { color: var(--red); }
.hero .lede { margin-top: var(--s3); }
.hero .btn-row { margin-top: var(--s4); }
.hero__note { margin-top: var(--s3); font-size: .9375rem; color: var(--ink-3); }

/* ---------- full-bleed hero ----------
   The photograph runs the full width of the page and the copy sits on it.
   Legibility is the whole problem here, so it is solved twice: a horizontal
   scrim that is near-opaque at the left edge where the text lives, plus a
   whole-image darkening wash. Neither depends on what the photograph happens
   to be doing behind the headline, which is what makes the variant safe to
   point at any showroom shot. */
.hero--full {
  padding-block: 0;
  background: var(--dark);
  isolation: isolate;
}
.hero--full::before { content: none; }          /* no dot grid over a photograph */

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero--full::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(20,15,11,.92) 0%, rgba(20,15,11,.78) 38%, rgba(20,15,11,.30) 72%, rgba(20,15,11,.18) 100%),
    linear-gradient(to top, rgba(20,15,11,.55) 0%, transparent 45%);
}
.hero--full > .wrap { position: relative; z-index: 2; }
.hero__full-inner {
  max-width: 40rem;
  padding-block: clamp(76px, 13vw, 152px);
}
.hero--full h1 { color: #fff; }
.hero--full .eyebrow { color: var(--amber); }
.hero--full .lede { color: rgba(255,255,255,.88); }
.hero--full .hero__note { color: rgba(255,255,255,.72); }
.hero--full .btn--secondary { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.hero--full .btn--secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }

@media (max-width: 700px) {
  /* On a narrow screen the copy covers the frame, so the horizontal scrim has
     nothing left to grade — flatten it to an even wash instead. */
  .hero--full::after {
    background: linear-gradient(to bottom, rgba(20,15,11,.72) 0%, rgba(20,15,11,.86) 100%);
  }
  .hero__full-inner { max-width: none; }
}

/* ---------- trust bar ---------- */
.trustbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 760px) { .trustbar { grid-template-columns: repeat(4, 1fr); } }
.trustbar__item { display: flex; gap: 12px; align-items: flex-start; }
.trustbar__item strong { display: block; font-family: var(--font-head); color: var(--ink); font-size: .9375rem; line-height: 1.3; margin-bottom: 2px; }
.trustbar__item span { display: block; font-size: .875rem; color: var(--ink-3); line-height: 1.45; }

/* ---------- icon chip ---------- */
.chip { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.chip svg { width: 22px; height: 22px; stroke-width: 2; fill: none; }
.chip--green { background: var(--green-050); } .chip--green svg { stroke: var(--green-text); }
.chip--teal  { background: var(--teal-050);  } .chip--teal  svg { stroke: var(--teal-text); }
.chip--amber { background: var(--amber-050); } .chip--amber svg { stroke: #8A6100; }
.chip--red   { background: var(--red-050);   } .chip--red   svg { stroke: var(--red-text); }

/* ---------- cards ---------- */
.grid { display: grid; gap: var(--s3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3); box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* A coloured top edge, keyed to the card's own chip tone. Cheap way to get the
   palette onto a page of white boxes without tinting the card body and
   dragging the body-text contrast down with it. */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: var(--green);
}
.card:has(.chip--teal)::before  { background: var(--teal); }
.card:has(.chip--amber)::before { background: var(--amber); }
.card:has(.chip--red)::before   { background: var(--red); }
.card h3 { margin-bottom: 10px; }
.card h3 a { color: inherit; text-decoration: none; }
.card p { font-size: .9688rem; }
.card__meta { margin-top: var(--s2); font-size: .875rem; color: var(--ink-3); font-weight: 500; }
.card .chip { margin-bottom: var(--s2); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat b { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3vw, 2.5rem); color: var(--green); line-height: 1.1; }
.section--dark .stat b { color: var(--green); }
.stat span { font-size: .9375rem; color: var(--ink-3); }
.section--dark .stat span { color: var(--on-dark-2); }

/* ---------- steps ---------- */
/* The number comes from this counter and nowhere else. Step titles are written
   without a "1. " prefix — when both existed the consign page showed the digit
   twice, once in the badge and again in the heading beside it. */
.steps { counter-reset: step; display: grid; gap: var(--s4) var(--s3); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
/* auto-fit rather than a fixed 4, so the five-step consign flow does not leave
   a lone orphan on a second row */
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.step { position: relative; padding-top: var(--s4); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff;
  box-shadow: 0 2px 8px rgba(194,112,61,.35);
  font-family: var(--font-head); font-weight: 700; font-size: .9375rem;
  display: grid; place-items: center;
}
.section--dark .step::before { background: var(--amber); color: var(--ink); box-shadow: none; }
.step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.step p { font-size: .9375rem; }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 9px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}
.section--dark .ticks li::before { border-color: var(--green); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s3) 40px var(--s3) 0; position: relative;
  font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding-bottom: var(--s3); max-width: 74ch; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-head); font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s2); }
.field label { display: block; font-weight: 600; font-size: .9375rem; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  min-height: 48px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-050); }
.field textarea { min-height: 110px; resize: vertical; }
.field--half { display: grid; gap: var(--s2); }
@media (min-width: 560px) { .field--half { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .8125rem; color: var(--ink-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); box-shadow: var(--shadow-md); }
/* Validation summary. Red is carried by the border and the heading weight as
   well as the colour, so it still reads as an error without colour vision. */
.form-alert { margin-top: var(--s3); padding: var(--s2) var(--s3); background: var(--red-050);
  border: 1.5px solid var(--red); border-left-width: 5px; border-radius: var(--radius-sm); color: var(--red-text); }
.form-alert strong { display: block; font-family: var(--font-head); font-size: 1rem; }
.form-alert ul { margin: var(--s1) 0 0; padding-left: 1.1em; font-size: .9375rem; color: var(--ink-2); }
.form-alert li + li { margin-top: 4px; }
.form-alert:focus { outline: 3px solid var(--red); outline-offset: 3px; }
.form-card h2 { font-size: 1.5rem; }

/* ---------- booking placeholder ---------- */
.booking { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: var(--s4); text-align: center; background: var(--surface-2); }

/* ---------- booking modal ----------
   Google's scheduler needs ~600px of width before it lays the month grid and
   the time slots out side by side. The dialog gives it the viewport, which is
   the whole point: it was previously mounted in a ~400px sidebar column. */
.booking-dialog {
  width: min(1120px, 96vw);
  height: min(880px, 90vh);
  max-width: none; max-height: none;   /* UA default is 90% — we set our own */
  /* Explicit inset + margin:auto. The UA centres a dialog with margin:auto,
     but only while its size is auto; giving it a fixed width and height
     leaves it pinned to the top-left without these two lines. */
  inset: 0; margin: auto;
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 64px rgba(11, 13, 16, .28);
  overflow: hidden;
}
.booking-dialog::backdrop { background: rgba(11, 13, 16, .62); }
.booking-dialog[open] { display: grid; grid-template-rows: auto 1fr auto; }

.booking-dialog__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.booking-dialog__bar h2 { font-size: 1.25rem; }
.booking-dialog__bar p { font-size: .9375rem; color: var(--ink-3); margin-top: 2px; }

.booking-dialog__close { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--ink); }
.booking-dialog__close:hover { background: var(--surface-3); }
.booking-dialog__close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.booking-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.booking-dialog__body { position: relative; min-height: 0; background: var(--surface-2); }
.booking-dialog__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: .9375rem; }
/* Opaque so the loading message cannot show through before load fires. */
.booking-dialog__frame { position: relative; display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.booking-dialog__foot { padding: 12px var(--s4); border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-3); text-align: center; }

/* Phones: take the whole screen. The scheduler stacks month over slots there
   and needs every pixel of height it can get. dvh keeps it correct while
   mobile browser chrome shows and hides. */
@media (max-width: 700px) {
  .booking-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .booking-dialog__bar { padding: var(--s2) var(--s3); }
  .booking-dialog__bar p { display: none; }
  .booking-dialog__foot { padding: 10px var(--s3); }
}

/* ---------- price anchor ---------- */
.price-anchor { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s5) var(--s4); text-align: center; }
.price-anchor__figure { font-family: var(--font-head); font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--ink); }
.price-anchor__figure strong { color: var(--green-text); }
.price-anchor__body { max-width: 60ch; margin: var(--s3) auto 0; color: var(--ink-2); }
.price-anchor .btn-row { justify-content: center; }

/* ---------- dark CTA band ---------- */
.cta-band { background: var(--dark); color: var(--on-dark-2); }
.cta-band__inner { padding-block: var(--section-y); display: grid; gap: var(--s4); }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.cta-band h2 { color: #fff; }
.cta-band .btn-row { margin-top: var(--s3); }
.cta-opts { display: grid; gap: 12px; }
.cta-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--dark-2); border-radius: var(--radius); text-decoration: none; color: var(--on-dark-2); border: 1px solid rgba(255,255,255,.07); }
.cta-opt:hover { border-color: rgba(255,255,255,.22); color: #fff; }
.cta-opt strong { display: block; color: #fff; font-family: var(--font-head); font-size: .9688rem; }
.cta-opt span { font-size: .875rem; }

/* ---------- breadcrumb ---------- */
.crumbs { font-size: .875rem; color: var(--ink-3); padding-block: var(--s2); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- link columns (locations, sitemap) ---------- */
.linkcols { columns: 2; column-gap: var(--s4); }
@media (min-width: 700px) { .linkcols { columns: 3; } }
@media (min-width: 1000px) { .linkcols { columns: 4; } }
.linkcols a { display: block; padding: 5px 0; font-size: .9375rem; color: var(--ink-2); text-decoration: none; break-inside: avoid; }
.linkcols a:hover { color: var(--green-text); text-decoration: underline; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-block; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; color: var(--ink-2); text-decoration: none; background: #fff; }
.pill:hover { border-color: var(--green); color: var(--green-text); }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-2); padding-block: var(--s6) var(--s4); font-size: .9375rem; }
.site-footer h4 { color: #fff; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s2); }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__links { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer__legal { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; font-size: .875rem; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(11,13,16,.10);
}
@media (min-width: 768px) { .sticky-cta { display: none; } }
.sticky-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; background: #fff; color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: .9688rem; text-decoration: none; }
.sticky-cta a.is-primary { background: var(--green); color: #fff; }
.sticky-cta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ---------- prose ---------- */
.prose h2 { margin-top: var(--s5); margin-bottom: var(--s2); }
.prose h3 { margin-top: var(--s4); margin-bottom: 10px; }
.prose > *:first-child { margin-top: 0; }
/* margin-bottom as well as top: a list followed by a paragraph (the 50/50
   split block is exactly this shape) had the paragraph sitting flush against
   the last bullet with no separation at all. */
.prose ul, .prose ol { margin-block: var(--s2); padding-left: 22px; display: grid; gap: 8px; }
.prose > *:last-child { margin-bottom: 0; }
.prose p + p { margin-top: var(--s2); }
.prose blockquote { margin: var(--s3) 0; padding: var(--s2) var(--s3); border-left: 4px solid var(--teal);
  background: var(--teal-050); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p { font-size: 1.0625rem; color: var(--ink-2); }
.prose ol { list-style: decimal; }

/* ---------- config placeholder warning: must never ship silently ---------- */
.todo { background: var(--amber-050); border: 1px dashed var(--amber); border-radius: var(--radius-sm); padding: 3px 8px; font-size: .8125rem; font-weight: 600; color: #6B4A00; }

/* ---------- articles ---------- */
.measure-wide { max-width: 78ch; }
.article__head { padding: var(--s5) 0 var(--s3); }
.article__meta { margin-top: var(--s3); font-size: .875rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px; }
.article__figure { margin: var(--s3) 0 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.article__figure img { display: block; width: 100%; height: auto; }
.article__grid { display: grid; gap: var(--s5); padding: var(--s5) 0 var(--section-y); align-items: start; }
.article__body { max-width: 68ch; }
.article__body .prose + .prose { margin-top: var(--s5); }
@media (min-width: 1000px) {
  .article__grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .article__side { position: sticky; top: var(--s3); }
}

/* Table of contents. Ordered so the reading sequence is obvious without JS. */
.toc { border-left: 3px solid var(--line); padding-left: var(--s3); }
.toc h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.toc ol { margin-top: var(--s2); padding-left: 1.1em; display: grid; gap: 10px; font-size: .9375rem; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--green-text); text-decoration: underline; }

.takeaway { background: var(--surface-2); border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s5); }
.takeaway h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.takeaway ul { margin-top: var(--s2); padding-left: 20px; display: grid; gap: 8px; font-size: .9688rem; }

.inline-cta { margin: var(--s5) 0; padding: var(--s3); border: 1.5px solid var(--line); border-left: 5px solid var(--green);
  border-radius: var(--radius); display: grid; gap: var(--s2); align-items: center; background: var(--green-050); }
.inline-cta h3 { font-size: 1.125rem; }
.inline-cta p { font-size: .9375rem; color: var(--ink-2); margin-top: 4px; }
@media (min-width: 700px) { .inline-cta { grid-template-columns: 1fr auto; gap: var(--s3); } }

.authorbox { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.authorbox p { font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 700px) { .authorbox { grid-template-columns: auto 1fr; gap: var(--s3); } }

.card__img { display: block; width: calc(100% + var(--s3) * 2); max-width: none; margin: calc(var(--s3) * -1) 0 var(--s3) calc(var(--s3) * -1);
  height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: 10px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

/* Address strip at the top of every page, desktop and mobile (Kalen-Agent-00, 2026-09-19). */
.addrbar { background: var(--dark); color: var(--on-dark); font-size: .8125rem; line-height: 1.35; }
.addrbar__inner { display: flex; justify-content: center; align-items: center; min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
.addrbar__link { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark); text-decoration: none; text-align: center; }
.addrbar__link:hover, .addrbar__link:focus-visible { color: #fff; text-decoration: underline; }
.addrbar__link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }