/* ============================================================================
   wdi.css — Weed Delivery Irvine theme (sample v1, 2026-10-07)
   "The planned city's delivery": cool stone white, deep pine, one jacaranda
   accent, Instrument Sans throughout. The one memorable element is the village
   plan drawing in the hero; it draws itself once on load and that is the only
   motion that isn't an answer to a tap. Loaded after css/engine.css.
   ============================================================================ */
:root {
  --cw-bg: #F4F6F3; --cw-bg-2: #FFFFFF; --cw-bg-3: #E6ECE6; --cw-line: #CFD9D1;
  --cw-brand: #1F3B35; --cw-brand-2: #142A26; --cw-brand-soft: #DCE7E0; --cw-on-brand: #F4F6F3;
  --cw-accent: #6B5BD2; --cw-accent-soft: #E7E3F8; --cw-on-accent: #FFFFFF;
  --cw-ink: #16211F; --cw-ink-2: #3E4C47; --cw-ink-3: #5C6B65;
  --cw-euca: #7E9A86; --cw-euca-soft: #D4E0D6;
  --cw-focus: #6B5BD2;
  --cw-font-display: 'Instrument Sans', system-ui, sans-serif; --cw-font-body: 'Instrument Sans', system-ui, sans-serif;
  --cw-display-weight: 600; --cw-display-tracking: -.025em; --cw-display-lh: 1.02;
  --cw-r-pill: 999px; --cw-r-btn: 12px; --cw-r-input: 12px; --cw-r-card: 18px; --cw-r-tile: 12px;
  --cw-shadow: 0 14px 34px rgba(22, 33, 31, .10);
}
body { font-size: 17px; }
h1 { font-size: clamp(40px, 6.4vw, 72px); color: var(--cw-brand); }
h2 { font-size: clamp(28px, 3.6vw, 40px); color: var(--cw-brand); }
.lede { font-size: 19px; max-width: 54ch; }
.eyebrow { color: var(--cw-euca); font-weight: 600; }

/* nav: two-line wordmark */
.site-nav { background: rgba(244, 246, 243, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav-brand svg { height: 30px; }
.nav-brand .nav-word { display: flex; flex-direction: column; line-height: 1; letter-spacing: -.01em; }
.nav-brand .nav-word span { font-size: 11px; font-weight: 600; color: var(--cw-ink-3); }
.nav-brand .nav-word strong { font-size: 20px; font-weight: 600; color: var(--cw-brand); }
.nav-phone { background: transparent; color: var(--cw-brand); box-shadow: inset 0 0 0 2px var(--cw-line); }
.nav-phone:hover { background: var(--cw-bg-2); color: var(--cw-brand); }
.footer-mark { display: flex; align-items: center; gap: 10px; color: #fff; }
.footer-mark svg { height: 30px; width: auto; }
.footer-mark .nav-word { display: flex; flex-direction: column; line-height: 1; }
.footer-mark .nav-word span { font-size: 11px; opacity: .7; }
.footer-mark .nav-word strong { font-size: 20px; font-weight: 600; }
.site-footer { background: var(--cw-brand); color: var(--cw-on-brand); }

/* hero: copy left, plan right */
.hero { padding: 36px 0 24px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 960px) { .hero { padding: 56px 0 40px; } .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; } }
.hero-copy h1 { margin: 18px 0 18px; }
.hero-badge { margin-bottom: 4px; }
.hero .zip-form { margin-top: 22px; }
.hero .zip-form .input { max-width: 200px; }
.hero-fine { margin-top: 22px; font-size: 13px; color: var(--cw-ink-3); }
.hero-map { position: relative; }
.vmap { width: 100%; height: auto; display: block; }
.vmap-city { fill: #FBFCFA; stroke: var(--cw-brand); stroke-width: 2.5; stroke-linejoin: round; }
.vmap-park { fill: var(--cw-euca-soft); stroke: var(--cw-euca); stroke-width: 1.5; }
.vmap-lake { fill: #CBDDE8; stroke: #9FBBCB; stroke-width: 1; }
.vmap-fwy { fill: none; stroke: #BFC9C1; stroke-width: 3.5; stroke-linecap: round; }
.vmap-fwy--thin { stroke-width: 2; }
.vmap-fwy-label { font: 600 11px/1 var(--cw-font-body); fill: var(--cw-ink-3); }
.vmap-note { font: 500 11px/1 var(--cw-font-body); fill: var(--cw-ink-3); letter-spacing: .02em; }
.vmap-dot { fill: var(--cw-brand); stroke: var(--cw-bg-2); stroke-width: 2; transition: fill var(--cw-fast), r var(--cw-fast); }
.vmap-label { font: 500 12.5px/1 var(--cw-font-body); fill: var(--cw-ink); paint-order: stroke; stroke: var(--cw-bg-2); stroke-width: 3px; stroke-linejoin: round; }
.vmap-v { cursor: pointer; outline: none; }
.vmap-v:hover .vmap-dot, .vmap-v:focus-visible .vmap-dot, .vmap-v.is-active .vmap-dot { fill: var(--cw-accent); r: 7; }
.vmap-v:hover .vmap-label, .vmap-v:focus-visible .vmap-label, .vmap-v.is-active .vmap-label { fill: var(--cw-accent); font-weight: 600; }
.vmap-v:focus-visible .vmap-dot { stroke: var(--cw-accent); stroke-width: 3; }
/* the one load moment: the city outline and the freeways draw themselves, then the villages appear */
.motion .vmap-city { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: wdi-draw 1100ms var(--cw-ease) forwards; }
.motion .vmap-fwy { stroke-dasharray: 900; stroke-dashoffset: 900; animation: wdi-draw 900ms var(--cw-ease) 250ms forwards; }
.motion .vmap-v, .motion .vmap-park, .motion .vmap-lake, .motion .vmap-fwy-label, .motion .vmap-note { opacity: 0; animation: wdi-in 400ms var(--cw-ease) 700ms forwards; }
@keyframes wdi-draw { to { stroke-dashoffset: 0; } }
@keyframes wdi-in { to { opacity: 1; } }
@media (max-width: 639px) { .vmap-v--minor .vmap-label { display: none; } .vmap-label { font-size: 15px; } .vmap-dot { r: 6; } .vmap-note, .vmap-fwy-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .vmap-city, .vmap-fwy { stroke-dashoffset: 0 !important; animation: none !important; } .vmap-v, .vmap-park, .vmap-lake, .vmap-fwy-label, .vmap-note { opacity: 1 !important; animation: none !important; } }

/* facts row: four quiet cards with a top rule, not boxes */
.facts--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .facts--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts--4 { grid-template-columns: repeat(4, 1fr); } }
.facts--4 .fact { background: transparent; border: 0; border-top: 2px solid var(--cw-brand); border-radius: 0; padding: 16px 0 0; }
.facts--4 .fact h3 { font-size: 19px; color: var(--cw-brand); }

/* ZIP tiles (the village picker on the home page) */
.zip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .zip-grid { grid-template-columns: repeat(3, 1fr); } }
.zip-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: var(--cw-r-tile); color: var(--cw-ink); min-height: 76px; transition: border-color var(--cw-fast), transform var(--cw-fast); }
.zip-tile:hover, .zip-tile:focus-visible { border-color: var(--cw-accent); color: var(--cw-ink); }
.zip-tile.is-active { border-color: var(--cw-accent); box-shadow: inset 0 0 0 1px var(--cw-accent); }
.zip-tile b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--cw-brand); font-variant-numeric: tabular-nums; }
.zip-tile span { font-size: 13px; color: var(--cw-ink-3); line-height: 1.35; }
.zip-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--cw-brand); text-decoration: underline; text-decoration-color: var(--cw-line); text-underline-offset: 3px; cursor: pointer; }
.zip-link:hover { text-decoration-color: var(--cw-accent); }
.village-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.village-chips .chip-zip { font-weight: 500; color: var(--cw-ink-3); }
.village-chips .chip.active .chip-zip { color: inherit; }
.villages-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 960px) { .villages-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.hero-map--page { background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: var(--cw-r-card); padding: 12px; }

/* sections */
.section--alt { background: var(--cw-bg-3); }
.section--pine { background: var(--cw-brand); color: var(--cw-on-brand); }
.section--pine h2, .section--pine .lede, .section--pine .eyebrow { color: var(--cw-on-brand); }
.section--pine .lede { opacity: .85; }
.section--pine .btn { background: var(--cw-bg-2); color: var(--cw-brand); }
.section--pine .btn:hover { background: var(--cw-accent-soft); color: var(--cw-brand-2); }
.section--pine .btn--ghost { background: transparent; color: var(--cw-on-brand); box-shadow: inset 0 0 0 2px rgba(244, 246, 243, .6); }
.section--pine .btn--ghost:hover { background: rgba(244, 246, 243, .12); color: var(--cw-on-brand); }
.call-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 900px) { .call-wrap { grid-template-columns: 1.4fr 1fr; } .call-btns { justify-self: end; } }
.call-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* cards and menu: square-ish, calm */
.cw-card { border-radius: var(--cw-r-tile); }
.cw-card .cw-img { background: var(--cw-bg-3); }
.cw-card .cw-add { border-radius: 10px; }
.deal { border-radius: var(--cw-r-card); }
.deal-val { color: var(--cw-accent); }
.city-fact b { color: var(--cw-brand); }
.step { border-radius: var(--cw-r-card); }
.step-num { background: var(--cw-accent); }
.pill--outline { box-shadow: inset 0 0 0 2px var(--cw-line); color: var(--cw-ink-2); }
.dot { background: var(--cw-accent); }
.kc-minbar-fill { background: var(--cw-accent) !important; }

/* v8 (2026-10-08.1): the village-map loop behind the hero. Desktop: the plan sits right on the grid paper, the headline
   left (contrast unchanged: pine on paper white). Phones: the phone cut sits in the stage under the copy, its plan at the
   bottom; a soft fade joins it to the page. The interactive plan that used to sit here now lives in #villages. */
.hero--loop { --hero-loop-pos: 50% 50%; --hero-loop-pos-phone: 50% 100%; --hero-stage-h: clamp(280px, 86vw, 520px); }
.hero--loop .hero-loop { background: #F1F3F0; }
@media (min-width: 960px) { .hero--loop .hero-grid { min-height: 500px; } }
@media (max-width: 959px) {
  .hero--loop { padding-bottom: 0; }
  .hero--loop .hero-loop { top: auto; bottom: 0; height: var(--hero-stage-h); }
  .hero--loop .hero-loop::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48px; background: linear-gradient(var(--cw-bg), rgba(244, 246, 243, 0)); }
}
/* round 2 (S-7, the same check as CallWeed's): the license / 21+ line keeps a solid backing over the loop, so no frame of
   the plan can pull it under 4.5:1 (ink-3 on paper reads 5.16:1, as on the static hero) */
.hero--loop .hero-fine { display: inline-block; padding: 3px 10px 3px 8px; margin-left: -8px; background: var(--cw-bg); border-radius: 4px; box-shadow: 0 0 0 2px var(--cw-bg); }
.villages-grid--home { margin-top: 4px; }