/* ============================================================================
   kwd.css — Kwiki Weed Delivery, Orange County theme (sample v1, 2026-10-10)
   "Quick is in the name": warm paper white, black ink, one Kwiki-gold accent,
   Barlow Condensed for numbers and headlines, Barlow for the rest. The
   memorable element is the arrival clock; its gold arc sweeping in once on
   load is the only motion that isn't an answer to a tap.
   Loaded after css/engine.css.
   ============================================================================ */
:root {
  --cw-bg: #F7F6F2; --cw-bg-2: #FFFFFF; --cw-bg-3: #EDEBE3; --cw-line: #D8D5CB;
  --cw-brand: #111111; --cw-brand-2: #000000; --cw-brand-soft: #EDEBE3; --cw-on-brand: #FFFFFF;
  --cw-accent: #F2B705; --cw-accent-soft: #FFF3C7; --cw-on-accent: #111111;
  --cw-ink: #111111; --cw-ink-2: #3B3A36; --cw-ink-3: #5F5E58;
  --cw-focus: #111111;
  --cw-font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; --cw-font-body: 'Barlow', system-ui, sans-serif;
  --cw-display-weight: 700; --cw-display-tracking: -.005em; --cw-display-lh: .98;
  --cw-r-pill: 999px; --cw-r-btn: 8px; --cw-r-input: 8px; --cw-r-card: 14px; --cw-r-tile: 10px;
  --cw-shadow: 0 16px 36px rgba(17, 17, 17, .16);
  --kwd-gold: #F2B705;
}
body { font-size: 17px; }
h1 { font-size: clamp(40px, 6.4vw, 76px); }
h2 { font-size: clamp(30px, 4.4vw, 48px); }
h3 { font-family: var(--cw-font-display); font-weight: 700; font-size: 24px; letter-spacing: 0; }
.lede { font-size: 19px; max-width: 54ch; }
.eyebrow { color: var(--cw-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--kwd-gold); }
a { color: var(--cw-ink); text-decoration-color: var(--kwd-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--cw-ink); text-decoration-color: var(--cw-ink); }
.btn, .nav-brand, .nav-links a, .chip, .brand-chip, .cw-card a, .footer-col a, .footer-phones a, .kwc-card, .cw-actionbar a, .nav-phone, .timetable a { text-decoration: none; }
.btn { font-family: var(--cw-font-display); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.btn:hover { background: var(--kwd-gold); color: #111; }
.btn--ghost { color: var(--cw-ink); box-shadow: inset 0 0 0 2px var(--cw-ink); }
.btn--ghost:hover { background: var(--cw-ink); color: #fff; }
.input { border-color: var(--cw-ink); border-width: 2px; }
.input:focus { border-color: var(--kwd-gold); }

/* nav: a gold rule, the stopwatch mark, a lowercase wordmark */
.site-nav { border-top: 4px solid var(--kwd-gold); border-bottom: 1px solid var(--cw-line); background: var(--cw-bg); }
.nav-brand { color: var(--cw-ink); display: inline-flex; align-items: center; gap: 10px; }
.nav-brand svg { height: 34px; width: 34px; }
.nav-word { display: flex; flex-direction: column; line-height: .95; }
.nav-word strong { font-family: var(--cw-font-display); font-weight: 800; font-size: 28px; letter-spacing: -.01em; color: var(--cw-ink); }
.nav-word span { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cw-ink-3); margin-top: 3px; white-space: nowrap; }
@media (max-width: 419px) { .nav-word span { display: none; } }
.nav-links a { font-weight: 600; }
.nav-phone { background: #111; color: #fff; border-radius: 8px; }
.nav-phone:hover { background: var(--kwd-gold); color: #111; }
.nav-phone .dot { background: var(--kwd-gold); }
.footer-mark { display: flex; align-items: center; gap: 10px; color: #fff; }
.footer-mark svg { height: 34px; width: 34px; }
.footer-mark .nav-word strong { color: #fff; }
.footer-mark .nav-word span { color: rgba(255, 255, 255, .7); }
.site-footer { background: #111; color: #fff; border-top: 4px solid var(--kwd-gold); }
.site-footer a { text-decoration: none; }

/* hero: headline left, the clock right */
.hero { padding: 36px 0 28px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 980px) { .hero { padding: 64px 0 52px; } .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; } }
.hero-copy h1 { margin: 16px 0 18px; }
.hero-copy h1 em { font-style: normal; display: inline; background: linear-gradient(transparent 62%, var(--kwd-gold) 62%, var(--kwd-gold) 92%, transparent 92%); }
.hero .zip-form { margin-top: 22px; }
.hero .zip-form .input { max-width: 200px; }
.hero-fine { font-size: 13px; color: var(--cw-ink-3); margin-top: 18px; }
.pill--outline { box-shadow: inset 0 0 0 2px var(--cw-ink); color: var(--cw-ink); }
.dot { background: var(--kwd-gold); box-shadow: 0 0 0 2px #111; }

/* the arrival clock */
.clock-card { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 26px 24px 24px; background: #111; color: #fff; border-radius: 22px; box-shadow: var(--cw-shadow); text-align: center; }
@media (min-width: 560px) { .clock-card { grid-template-columns: 170px 1fr; justify-items: start; text-align: left; align-items: center; } }
@media (min-width: 980px) { .clock-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 30px 28px 28px; } }
.dial { width: 170px; height: 170px; display: block; }
@media (min-width: 980px) { .dial { width: 230px; height: 230px; } }
.dial-face { fill: #1A1A1A; stroke: #2E2E2E; stroke-width: 2; }
.tick { stroke: rgba(255, 255, 255, .32); stroke-width: 2; stroke-linecap: round; }
.tick--h { stroke: rgba(255, 255, 255, .9); stroke-width: 3.5; }
.dial-arc { fill: none; stroke: var(--kwd-gold); stroke-width: 11; stroke-linecap: round; }
.dial-hand { stroke: #fff; stroke-width: 5; stroke-linecap: round; transform-origin: 100px 100px; }
.dial-pin { fill: var(--kwd-gold); }
.clock-label { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); font-weight: 500; }
.clock-time { margin: 6px 0 8px; font-family: var(--cw-font-display); font-weight: 800; font-size: clamp(40px, 5.2vw, 62px); line-height: 1; letter-spacing: -.005em; font-variant-numeric: tabular-nums; color: #fff; }
.clock-note { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .66); }
.clock-card--city .dial { width: 150px; height: 150px; }
.clock-card--city .clock-time { font-size: clamp(34px, 4.2vw, 48px); }
/* the one load moment: the gold arc sweeps in */
.motion .dial-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kwd-sweep 1000ms var(--cw-ease) 200ms forwards; }
@keyframes kwd-sweep { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .dial-arc { animation: none !important; stroke-dashoffset: 0 !important; } }

/* the OC board: two timetables with dotted leaders */
.board { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) { .board { grid-template-columns: 1.6fr 1fr; gap: 40px; } }
.board-h { margin: 0 0 8px; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 8px; border-bottom: 3px solid #111; }
.timetable { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 640px) { .board-col:first-child .timetable { columns: 2; column-gap: 32px; } }
.timetable li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--cw-line); break-inside: avoid; font-size: 16px; }
.tt-city { font-weight: 600; }
.tt-city a { font-weight: 700; box-shadow: inset 0 -3px 0 var(--kwd-gold); }
.tt-dots { flex: 1; border-bottom: 2px dotted #BDB9AD; transform: translateY(-4px); min-width: 12px; }
.tt-win { font-family: var(--cw-font-display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* how an order runs: a timeline of four times */
.runline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 3px solid #111; }
@media (min-width: 860px) { .runline { grid-template-columns: repeat(4, 1fr); } }
.runline li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--cw-line); }
@media (min-width: 860px) { .runline li { grid-template-columns: 1fr; padding: 18px 18px 18px 0; border-bottom: 0; border-right: 1px solid var(--cw-line); margin-right: 18px; } .runline li:last-child { border-right: 0; margin-right: 0; } }
.rl-t { font-family: var(--cw-font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.005em; }
.runline h3 { margin: 0 0 6px; }
.runline p { margin: 0; color: var(--cw-ink-2); font-size: 15px; }
.runline--compact { border-top: 0; }
.runline--compact li { grid-template-columns: 64px 1fr; padding: 10px 0; border-right: 0 !important; margin-right: 0 !important; }
@media (min-width: 860px) { .runline--compact { grid-template-columns: 1fr; } .runline--compact li { border-bottom: 1px solid var(--cw-line); } }
.runline--compact .rl-t { font-size: 20px; }

/* city pages */
.city-hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; }
@media (min-width: 980px) { .city-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; } }
.city-hero h1 { font-size: clamp(34px, 5vw, 58px); margin-top: 14px; }
@media (min-width: 900px) { .city-copy { grid-template-columns: 1.2fr 1fr; gap: 28px; } }
.city-fact b { font-family: var(--cw-font-display); font-weight: 800; }

/* cards, deals, menu */
.cw-card .cw-price { font-family: var(--cw-font-display); font-weight: 800; font-size: 21px; color: var(--cw-ink); }
.cw-card .cw-add { background: #111; border-radius: 8px; }
.cw-card .cw-add:hover { background: var(--kwd-gold); color: #111; }
.chip.active, .chip[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.chip:hover { border-color: #111; color: var(--cw-ink); }
.deal { border-radius: 14px; }
.deal--today { border: 2px solid #111; box-shadow: 6px 6px 0 var(--kwd-gold); }
.deal-val { color: var(--cw-ink); }
.pill--accent { background: var(--kwd-gold); color: #111; }
.step-num { background: #111; }
.faq summary::after { color: var(--cw-ink); }
.kc-minbar-fill { background: var(--kwd-gold) !important; }
.cw-actionbar [data-cart-open] { background: #111; }

/* the call band */
.section--ink { background: #111; color: #fff; }
.section--ink h2 { color: #fff; }
.section--ink .lede { color: rgba(255, 255, 255, .84); }
.section--ink .eyebrow { color: #fff; }
.section--ink .btn { background: var(--kwd-gold); color: #111; }
.section--ink .btn:hover { background: #fff; color: #111; }
.section--ink .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.section--ink .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.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; }

/* nav: labels on one line; the phone menu button and cart never shrink */
.nav-links { gap: 18px; }
.nav-links a { white-space: nowrap; }
.nav-burger, .kc-fab.kc-innav, .nav-phone { flex-shrink: 0; }
.nav-brand { min-width: 0; }