/* Pine Bros — concept landing page
   Visual system per landing-page-design SKILL.md Part B.
   Tokens only. No invented values. */

/* ---------- B2 spacing, B1 type scale, B3 radius ---------- */
:root {
  --sp-0: 0;
  --sp-25: 2px;
  --sp-50: 4px;
  --sp-75: 8px;
  --sp-100: 12px;
  --sp-200: 16px;
  --sp-300: 24px;
  --sp-400: 32px;
  --sp-500: 40px;
  --sp-600: 48px;
  --sp-700: 64px;
  --sp-800: 80px;
  --sp-900: 96px;

  --text-xs: 0.75rem;   --lh-xs: 16px;
  --text-sm: 0.875rem;  --lh-sm: 20px;
  --text-base: 1rem;    --lh-base: 24px;
  --text-lg: 1.125rem;  --lh-lg: 28px;
  --text-xl: 1.25rem;   --lh-xl: 28px;
  --text-2xl: 1.5rem;   --lh-2xl: 32px;
  --text-3xl: 1.875rem; --lh-3xl: 36px;
  --text-4xl: 2.25rem;  --lh-4xl: 40px;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F8F5EF;
  --surface-3: #EFE8DC;
  --line: #E8DED1;
  --warm: #F6F0E6;
  --crimson: #9F0924;
  --crimson-deep: #6F061A;

  --fg: #191713;
  --fg-muted: #6B655B;

  --shadow-sm: 0 8px 20px rgba(25, 23, 19, .05);
  --shadow-md: 0 12px 32px rgba(25, 23, 19, .08);
  --shadow-lg: 0 24px 64px rgba(25, 23, 19, .12);

  /* Pine Bros brand values sampled from pinebrothers.com */
  --pine-red: #CA0F2C;
  --pine-red-hi: #E4213F;
  --honey: #A9761A;   /* darkened from the pack gold so it passes on white */

  /* B7 motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;
  --dur-slow: 800ms;

  --measure: 680px;
  --wrap: 1200px;
  --serif: Fraunces, ui-serif, Georgia, serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-900);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #FAF7F1 100%);
  color: var(--fg);
  font-family: Geist, Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* B1 — no italics anywhere */
i, em, cite, address { font-style: normal; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
  letter-spacing: 0;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* B9 — visible focus ring, always */
:focus-visible {
  outline: 2px solid var(--pine-red-hi);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}

/* Visually hidden, and stays hidden. `.skip` is only for the skip link, which is
   meant to become visible on focus; using it for legends leaked them on screen. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--sp-200);
  top: calc(var(--sp-200) * -6);
  z-index: 200;
  padding: var(--sp-100) var(--sp-200);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--sp-200); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-300);
}

.section { padding-block: var(--sp-900); }
.section--tight { padding-block: var(--sp-700); }

.eyebrow {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-200);
}
.eyebrow--red { color: var(--pine-red-hi); }

.h2 {
  font-family: var(--serif);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 650;
  max-width: var(--measure);
}
.lede {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--fg-muted);
  max-width: var(--measure);
  margin-top: var(--sp-200);
}
.lede--stack { margin-top: var(--sp-300); }

/* ---------- buttons (B1 button type, B2 padding, B9 states) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-75);
  padding: var(--sp-75) var(--sp-100);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform 200ms var(--ease);
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary { background: var(--crimson); color: #fff; padding-inline: var(--sp-300); }
.btn--primary:hover { background: var(--crimson-deep); }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); padding-inline: var(--sp-300); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--fg-muted); }

.btn--sm { font-size: var(--text-sm); line-height: var(--lh-sm); min-height: 44px; padding-inline: var(--sp-200); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ---------- B7 fluid island nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  margin-top: var(--sp-300);
  width: max-content;
  max-width: calc(100vw - var(--sp-400));
  display: flex;
  align-items: center;
  gap: var(--sp-300);
  padding: var(--sp-75) var(--sp-75) var(--sp-75) var(--sp-300);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--sp-75);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand svg { color: var(--pine-red-hi); flex: none; }

.nav__links { display: flex; align-items: center; gap: var(--sp-300); }
.nav__link {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link[aria-current="true"] { color: var(--fg); }

/* hamburger — morphs into an X, never disappears */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: transparent;
  cursor: pointer;
}
.burger__bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: var(--r-full);
  background: var(--fg);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.burger__bar:nth-child(1) { transform: translateY(-5px); }
.burger__bar:nth-child(2) { transform: translateY(3px); }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(-1px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }

/* modal expansion — heavy glass overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-700) var(--sp-300);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.menu[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
.menu__list { display: flex; flex-direction: column; gap: var(--sp-300); }
.menu__item {
  overflow: hidden;
}
.menu__link {
  display: block;
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  transform: translateY(48px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.menu[data-open="true"] .menu__link { transform: translateY(0); opacity: 1; }
.menu__item:nth-child(1) .menu__link { transition-delay: 100ms; }
.menu__item:nth-child(2) .menu__link { transition-delay: 150ms; }
.menu__item:nth-child(3) .menu__link { transition-delay: 200ms; }
.menu__item:nth-child(4) .menu__link { transition-delay: 250ms; }
.menu__item:nth-child(5) .menu__link { transition-delay: 300ms; }
.menu__foot {
  margin-top: var(--sp-700);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease) 350ms;
}
.menu[data-open="true"] .menu__foot { opacity: 1; }

/* ---------- hero ---------- */
/* The hero lives in shop.css: split layout, full bleed image column.
   The old overlay hero rules used to sit here and were adding 176px of stray
   padding that shop.css never reset. */

/* zip form — the single primary action */
.zipform { margin-top: var(--sp-500); max-width: 480px; }
.zipform__row {
  display: flex;
  gap: var(--sp-75);
  padding: var(--sp-75);
  /* outer 16px, gap 8px → inner 8px */
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.zipform__row:focus-within { border-color: var(--fg-muted); }
.zipform input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-100) var(--sp-200);
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
}
.zipform input::placeholder { color: var(--fg-muted); }
.zipform input:focus { outline: none; }
.zipform__hint {
  margin-top: var(--sp-100);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
}
.zipform__error {
  margin-top: var(--sp-100);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--pine-red-hi);
  font-weight: 500;
}
[hidden] { display: none !important; }

/* ---------- proof strip ---------- */
.proof {
  border-block: 1px solid var(--line);
  background: #FFFFFF;
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-300);
  padding-block: var(--sp-500);
}
.proof__item { display: flex; flex-direction: column; gap: var(--sp-50); }
.proof__n {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.proof__l { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); }

/* ---------- generic cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-300);
  margin-top: var(--sp-600);
}
.card {
  padding: var(--sp-400);
  border-radius: var(--r-xl);
  border: 1px solid rgba(232, 222, 209, .72);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(202, 15, 44, .28); }
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--pine-red-hi);
  margin-bottom: var(--sp-300);
}
.card__t { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 600; }
.card__d { margin-top: var(--sp-75); font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg-muted); }

/* ---------- split / compare ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-300); margin-top: var(--sp-600); }
.panel { padding: var(--sp-400); border-radius: var(--r-2xl); border: 1px solid var(--line); }
.panel--them { background: var(--surface); }
.panel--us { background: var(--warm); border-color: rgba(202, 15, 44, 0.5); }
.panel__h { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.panel--us .panel__h { color: var(--pine-red-hi); }
.panel__list { margin-top: var(--sp-300); display: flex; flex-direction: column; gap: var(--sp-200); }
.panel__row { display: flex; gap: var(--sp-100); font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg-muted); }
.panel--us .panel__row { color: var(--fg); }
.panel__row svg { flex: none; margin-top: 4px; }

/* ---------- B11 tagline reveal ---------- */
.tagline { border-block: 1px solid var(--line); }
.band--crimson {
  border: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: #FFFFFF;
}
.tagline__text {
  font-family: var(--serif);
  font-size: var(--text-5xl);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: 0;
  max-width: 960px;
  text-wrap: balance;
}
.tagline__w {
  color: rgba(255, 255, 255, 0.42);
  transition: color var(--dur-slow) var(--ease);
}
.tagline__w[data-on="true"] { color: #FFFFFF; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-300); margin-top: var(--sp-600); counter-reset: s; }
.step { padding: var(--sp-400); border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--surface); }
.step__n {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--pine-red);
  color: var(--fg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  margin-bottom: var(--sp-300);
}
.step__t { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; }
.step__d { margin-top: var(--sp-75); font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg-muted); }

/* ---------- store finder ---------- */
.finder { background: var(--warm); border-block: 1px solid var(--line); }
.finder__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-300); }
.finder__panel {
  margin-top: var(--sp-600);
  padding: var(--sp-300);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.finder__controls { display: flex; flex-wrap: wrap; gap: var(--sp-100); align-items: center; }
.finder__search {
  /* min-width:0 is required: without it the automatic minimum size keeps this
     flex item at its content width and it overflows the panel on narrow screens */
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  gap: var(--sp-75);
  /* outer 24px, gap 24px → not nested, use own scale */
  padding: var(--sp-75);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.finder__search:focus-within { border-color: var(--fg-muted); }
.finder__search input {
  flex: 1 1 0; min-width: 0; width: 0;
  padding: var(--sp-100) var(--sp-200);
  border: 0; border-radius: var(--r-lg);
  background: transparent; color: var(--fg);
  font: inherit;
}
.finder__search input:focus { outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-75); margin-top: var(--sp-300); }
.chip {
  padding: var(--sp-50) var(--sp-100);
  min-height: 32px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--fg-muted); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.finder__status {
  margin-top: var(--sp-300);
  padding-top: var(--sp-300);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
}

.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-100); margin-top: var(--sp-300); }
.result {
  padding: var(--sp-300);
  /* outer panel 24px, gap 24px → own value */
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: var(--sp-75);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.result:hover { background: var(--surface-2); border-color: var(--fg-muted); }
.result__top { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-100); }
.result__banner { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine-red-hi); }
.result__zip { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.result__name { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 600; }
.result__addr { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); }
.result__links { display: flex; flex-wrap: wrap; gap: var(--sp-200); margin-top: var(--sp-50); }
.result__link {
  font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-50);
  min-height: 44px;
  transition: color var(--dur) var(--ease);
}
.result__link:hover { color: var(--pine-red-hi); }

/* B9 skeleton loaders shaped like the real layout */
.skel { border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--surface); padding: var(--sp-300); display: flex; flex-direction: column; gap: var(--sp-100); }
.skel__bar { height: 12px; border-radius: var(--r-full); background: var(--surface-3); animation: pulse 1.6s var(--ease) infinite; }
.skel__bar--sm { width: 40%; }
.skel__bar--md { width: 70%; }
.skel__bar--lg { width: 90%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* B9 composed empty state */
.empty { margin-top: var(--sp-300); padding: var(--sp-600) var(--sp-400); border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--surface); text-align: center; }
.empty__icon { color: var(--fg-muted); margin: 0 auto var(--sp-200); }
.empty__t { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; }
.empty__d { margin-top: var(--sp-75); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); }
.empty__actions { margin-top: var(--sp-300); display: flex; flex-wrap: wrap; gap: var(--sp-75); justify-content: center; }
.empty__actions--more { margin-top: var(--sp-300); }

.note {
  margin-top: var(--sp-300);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-muted);
  max-width: var(--measure);
}

/* ---------- testimonial ---------- */
.quote { max-width: 880px; }
.quote__t { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 500; letter-spacing: -0.02em; }
.quote__who { margin-top: var(--sp-300); display: flex; align-items: center; gap: var(--sp-200); }
.quote__av {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-full);
  background: var(--surface-3);
  display: grid; place-items: center;
  font-size: var(--text-base); line-height: var(--lh-base); font-weight: 700;
  color: var(--honey);
}
.quote__n { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 600; }
.quote__r { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--sp-600); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-200);
  padding: var(--sp-300) 0;
  min-height: 44px;
  background: transparent; border: 0;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--pine-red-hi); }
.faq__ic { flex: none; transition: transform var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] .faq__ic { transform: rotate(45deg); }
.faq__a { overflow: hidden; height: 0; transition: height var(--dur) var(--ease); }
.faq__a p { padding-bottom: var(--sp-300); color: var(--fg-muted); max-width: var(--measure); }

/* ---------- final CTA ---------- */
.final { text-align: center; }
.final .h2, .final .lede { margin-inline: auto; }
.final__actions { margin-top: var(--sp-500); display: flex; flex-wrap: wrap; gap: var(--sp-100); justify-content: center; }
.final__actions--legal { justify-content: flex-start; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: var(--sp-700) var(--sp-500); }
.foot__grid { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: var(--sp-500); }
.foot__t { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; margin-bottom: var(--sp-200); }
.foot__t--sub { margin-bottom: var(--sp-100); }
.foot__list { display: flex; flex-direction: column; gap: var(--sp-100); }
.foot__list--legal { flex-direction: row; gap: var(--sp-300); }
.foot__link { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.foot__link:hover { color: var(--fg); }
.foot__bar { margin-top: var(--sp-600); padding-top: var(--sp-300); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-200); justify-content: space-between; }
.foot__bar--legal { margin-top: 0; }
.foot__fine { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-muted); max-width: 640px; }
.foot__fine--brand { margin-top: var(--sp-200); }
.legal-main { padding-top: var(--sp-900); }

/* newsletter */
.sub { margin-top: var(--sp-300); max-width: 420px; }
.sub__row { display: flex; gap: var(--sp-75); padding: var(--sp-75); border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--surface); }
.sub__row:focus-within { border-color: var(--fg-muted); }
.sub input { flex: 1; min-width: 0; padding: var(--sp-100) var(--sp-200); border: 0; border-radius: var(--r-lg); background: transparent; color: var(--fg); font: inherit; font-size: var(--text-sm); line-height: var(--lh-sm); }
.sub input:focus { outline: none; }
.sub__msg { margin-top: var(--sp-100); font-size: var(--text-xs); line-height: var(--lh-xs); }
.sub__msg--ok { color: var(--honey); }
.sub__msg--err { color: var(--pine-red-hi); }

/* ---------- B7 scroll interpolation ---------- */
.reveal {
  transform: translateY(64px);
  filter: blur(12px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease),
              filter var(--dur-slow) var(--ease),
              opacity var(--dur-slow) var(--ease);
}
.reveal[data-shown="true"] { transform: translateY(0); filter: blur(0); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-500); }
  .hero__title { font-size: var(--text-5xl); }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-400); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__pill { padding-right: var(--sp-75); gap: var(--sp-200); }
  .cards, .split, .steps, .results { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: var(--sp-700); }
  .h2 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
  .hero__title { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
  .tagline__text { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
  .quote__t { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .menu__link { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
}

@media (max-width: 520px) {
  .proof__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-300); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-400); }
  .zipform__row { flex-direction: column; }
  .zipform .btn { width: 100%; }
  .hero__media { aspect-ratio: 3 / 2; }
}

/* B7 — reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { transform: none; filter: none; opacity: 1; }
  .menu__link { transform: none; opacity: 1; }
  .tagline__w { color: currentColor; }
}

/* ---------- store finder map (OpenStreetMap via Leaflet) ---------- */
.finder__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-300);
  margin-top: var(--sp-300);
  align-items: stretch;
}
.finder__list { min-width: 0; }
.finder__list .results {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  max-height: 620px;
  overflow: auto;
  padding-right: var(--sp-75);
}

.finder__mapwrap { position: sticky; top: var(--sp-900); min-width: 0; }
.finder__map {
  height: 620px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  z-index: 0;
  box-shadow: var(--shadow-sm);
}
.finder__maphint {
  margin-top: var(--sp-100);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-muted);
}

/* Tiles come from openstreetmap.org in their standard style. The filter is applied
   to the tile pane only, so markers and popups keep their real colors. */
/* Light theme, so OpenStreetMap's own style is used unmodified. */
.leaflet-tile-pane { filter: saturate(0.92) contrast(0.96); }
.leaflet-container { background: var(--surface); font: inherit; }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--fg-muted) !important;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  border-radius: var(--r-lg) 0 0 0;
}
.leaflet-control-attribution a { color: var(--fg-muted) !important; }
.leaflet-bar a {
  background: var(--surface-2);
  color: var(--fg);
  border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--surface-3); color: var(--fg); }
.leaflet-touch .leaflet-bar { border-color: var(--line); }

/* marker: a numbered pin matching the list order */
.pin {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--pine-red);
  color: var(--fg);
  border: 2px solid #FFFFFF;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(25, 23, 19, 0.4);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pin--home { background: var(--honey); color: var(--bg); }
/* unranked pins carry no number, so they shrink to a plain dot */
.pin--dot { width: 16px; height: 16px; }
.pin--active { transform: scale(1.35); background: var(--pine-red-hi); }

.leaflet-popup-content-wrapper {
  background: var(--surface-2);
  color: var(--fg);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
}
.leaflet-popup-tip { background: var(--surface-2); border: 1px solid var(--line); }
.leaflet-popup-content { margin: var(--sp-100); font-size: var(--text-sm); line-height: var(--lh-sm); }
.leaflet-popup-content b { display: block; font-size: var(--text-base); line-height: var(--lh-base); }
.leaflet-popup-content span { color: var(--fg-muted); }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg-muted); }

.result { cursor: pointer; }
.result[data-active="true"] { border-color: var(--pine-red); background: var(--surface-2); }
.result__dist {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  color: var(--honey);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .finder__split { grid-template-columns: minmax(0, 1fr); }
  .finder__mapwrap { position: static; order: -1; }
  .finder__map { height: 360px; }
  .finder__list .results { max-height: none; overflow: visible; padding-right: 0; }
}

/* ---------- Phosphor icons ---------- */
.i { fill: currentColor; flex: none; vertical-align: middle; }

/* ---------- the press test ---------- */
.presstest {
  margin-top: var(--sp-300);
  padding: var(--sp-600) var(--sp-500);
  border-radius: var(--r-3xl);
  border: 1px solid var(--line);
  background: var(--warm);
}
.presstest__head { max-width: var(--measure); }
.presstest__h { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; }
.presstest__d {
  margin-top: var(--sp-75);
  color: var(--fg-muted);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  transition: opacity var(--dur-slow) var(--ease);
}
.presstest__d[data-done="true"] { opacity: 0.45; }

.presstest__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-300);
  margin-top: var(--sp-500);
}

.press {
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.press:hover { border-color: var(--fg-muted); box-shadow: var(--shadow-md); }
.press[data-pressed="true"] { border-color: var(--pine-red); }

.press__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}
.press__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
}
.press__frame--on { opacity: 0; }

.press__cue {
  position: absolute;
  left: var(--sp-200);
  bottom: var(--sp-200);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  /* outer 16px, gap 16px -> own step */
  padding: var(--sp-50) var(--sp-100);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--fg);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  transition: opacity var(--dur) var(--ease);
}
.press[data-pressed="true"] .press__cue { opacity: 0; }

.press__meta { padding: var(--sp-300); }
.press__title { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 600; }
.press__gauge {
  margin-top: var(--sp-100);
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.press__bar {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--pine-red-hi);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.press__num {
  margin-top: var(--sp-75);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.press__num span { color: var(--fg); font-weight: 600; }
.press__hint {
  margin-top: var(--sp-25);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-muted);
}

@media (max-width: 860px) {
  .presstest { padding: var(--sp-400) var(--sp-300); }
  .presstest__pair { grid-template-columns: minmax(0, 1fr); }
}

/* The finder controls stack once the search box and Clear cannot share a line. */
@media (max-width: 520px) {
  .finder__controls { flex-direction: column; align-items: stretch; }
  .finder__search { flex: 1 1 auto; }
  .finder__controls > .btn--ghost { width: 100%; }
}