/* NWBS — consolidated stylesheet, BEM-formatted. Generated from inline blocks. */
/* Conflicts resolved to dominant variant; design-system tokens unified at top. */

/* Self-hosted webfonts — Fraunces / Inter / JetBrains Mono (latin + latin-ext
   subsets). Inlined rather than a standalone /fonts/fonts.css: the worker's
   ?v= cache-buster only rewrites url() in files it processes, and
   run_worker_first excludes /fonts/*, so the separate file shipped
   unversioned font urls and made every preloaded font download twice. */
/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2?v=fc87cc30bd31) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Skip-to-content link: fully clipped until focused (a bare top offset left a
   ~5px sliver because the link box is taller than the offset). */
.skip-to-content {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-to-content:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--green-deep, #042814);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
  z-index: 9999;
}

/* Site-wide :focus-visible — keyboard nav was effectively invisible before this. */
:focus-visible {
  outline: 2px solid var(--orange, #b45a1c);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--orange, #b45a1c);
  outline-offset: 2px;
}

/* Honor user motion preferences — site has 40+ transitions and an infinite pulse. */
@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;
    scroll-behavior: auto !important;
  }
}

:root {
  --green: #0c501f;
  --green-deep: #042814;
  --green-deeper: #02180c;
  --orange: #b45a1c;
  --wood: #8b6f47;
  --paper: #faf8f5;
  --paper-2: #f4f1ea;
  --line: #e5e0d5;
  --line-2: #c9c0aa;
  --ink: #1d2622;
  --ink-2: #4b5563;
  --ink-3: #5d6663;
  --cream: #f5e7d8;
  --placeholder-dark: #1a1a1a;

  /* Layout tokens: change once, every section updates. */
  --section-pad-y: 120px;
  --section-pad-x: 32px;
  --section-max: 1240px;
}

@media (max-width: 960px) {
  :root {
    --section-pad-y: 72px;
    --section-pad-x: 24px;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

iframe {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
}

.topbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}

.topbar__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.topbar a {
  color: var(--ink-2);
}

.topbar a:hover {
  color: var(--green);
}

.topbar__hours {
  display: flex;
  gap: 24px;
  align-items: center;
}

.topbar__phone {
  font-weight: 600;
  color: var(--ink);
}

.topbar__label {
  font-size: 10px;
}

header.site {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__logo {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.foot__brand .brand__logo {
  height: 42px;
  filter: brightness(0) invert(1);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  border-left: 1px solid var(--line);
  padding-left: 16px;
  gap: 4px;
}

.brand__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}

.brand__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}

.foot__brand .brand__text {
  border-left-color: rgba(255, 255, 255, 0.18);
}

.foot__brand .brand__name {
  color: #fff;
  font-size: 19px;
}

.foot__brand .brand__tag {
  color: rgba(255, 255, 255, 0.55);
}

.nav__links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav__links a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 4px;
}

.nav__links a:hover {
  color: var(--green);
}

.nav__links a.is-active {
  color: var(--green);
  font-weight: 600;
}

.nav__links a.is-active:not(.nav__cta) {
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--green);
}

.nav__links a.nav__cta {
  margin-left: 8px;
  background: var(--green);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
}

.nav__links a.nav__cta:hover {
  background: var(--green-deep);
  color: #fff;
}

/* Mobile nav: hidden on desktop, surfaced via the hamburger toggle below 960px. */
.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.nav__toggle:hover {
  border-color: var(--green);
  color: var(--green);
}

.nav__toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

.nav__toggle .nav__toggle-close {
  display: none;
}

.nav__panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 36px -24px rgba(4, 24, 12, 0.25);
  padding: 18px 24px 28px;
  flex-direction: column;
  gap: 2px;
}

.nav__panel a {
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.nav__panel a:last-child {
  border-bottom: 0;
}

.nav__panel a.is-active {
  color: var(--green);
  font-weight: 600;
}

.nav__panel a.is-active:not(.nav__cta) {
  box-shadow: inset 3px 0 0 var(--green);
  padding-left: 14px;
}

.nav__panel a.nav__cta {
  margin-top: 14px;
  background: var(--green);
  color: #fff;
  padding: 14px 18px;
  border-radius: 4px;
  text-align: center;
  border-bottom: 0;
}

.nav__panel a.nav__cta:hover {
  background: var(--green-deep);
}

.nav__panel a.nav__phone {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  border-bottom: 0;
}

@media (max-width: 960px) {
  .nav {
    position: relative;
    padding: 14px 20px;
    gap: 12px;
  }
  .brand {
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand__logo {
    height: 36px;
  }
  .brand__text {
    padding-left: 10px;
    min-width: 0;
    border-left: 1px solid var(--line);
    justify-content: center;
    gap: 3px;
  }
  .brand__name {
    font-size: 13px;
    line-height: 1.15;
  }
  .brand__tag {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
  .nav__links {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .nav__panel {
    display: flex;
  }
  .nav__panel:not(.is-open) {
    display: none;
  }
  body.is-nav-open {
    overflow: hidden;
  }
  body.is-nav-open .nav__toggle .nav__toggle-open {
    display: none;
  }
  body.is-nav-open .nav__toggle .nav__toggle-close {
    display: block;
  }
}

@media (max-width: 720px) {
  .hero__ctas,
  .cta__buttons,
  .subhero__ctas,
  .showroom__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero__ctas .btn,
  .cta__buttons .btn,
  .subhero__ctas .btn,
  .showroom__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  footer {
    padding: 56px 24px 28px;
  }
  .foot {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 28px;
  }
  .foot > div:first-child {
    grid-column: 1 / -1;
  }
  .foot > div:last-child {
    grid-column: 1 / -1;
  }
  .foot__brand {
    gap: 12px;
    margin-bottom: 8px;
  }
  .foot__brand .brand__logo {
    height: 36px;
  }
  .foot__brand .brand__name {
    font-size: 16px;
  }
  .foot__brand .brand__tag {
    font-size: 9px;
    letter-spacing: 0.18em;
  }
}

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  border-bottom: 4px solid var(--wood);
  overflow: hidden;
}

/* LCP image. <img> in HTML rather than CSS background so the markup is the
   single source of truth for srcset and the browser discovers it during
   HTML parse (no preload tag needed). Sits behind .hero::before overlay
   and .hero__inner (z-index:1). */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 30% 60%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(to right, rgba(4, 40, 20, 0.35) 0%, rgba(4, 40, 20, 0) 60%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 80px 32px;
  width: 100%;
}

.hero__eyebrow {
  color: #fff;
  opacity: 0.9;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.85);
  max-width: 18ch;
  margin-bottom: 28px;
}

.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}

.hero__sub {
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  line-height: 1.55;
  max-width: 48ch;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.6);
  margin-bottom: 36px;
}

.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.btn--primary {
  background: var(--orange);
  color: #fff;
}

.btn--primary:hover {
  background: #c66d2f;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

.btn--green {
  background: var(--green);
  color: #fff;
}

.btn--green:hover {
  background: var(--green-deep);
}

.btn__arrow {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 14px;
}

.stats {
  background: var(--green-deep);
  color: #fff;
  padding: 96px 32px;
}

.stats__lead {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.stats__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 14px;
}

.stats__lead h2 {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.stats__lead h2 em {
  font-style: italic;
  color: var(--cream);
  font-weight: 400;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.stat__num {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.03em;
}

.stat__num span {
  color: var(--orange);
  font-weight: 400;
}

.stat__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 22px 0 16px;
}

.stat__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.stats__lead-line {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.stats__lead-line .stat__sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
}

.stats__lead-line .stat__sub strong {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 32px;
  color: #fff;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 8px;
}

section {
  position: relative;
}

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.eyebrow .num {
  color: var(--ink-3);
}

.h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: pretty;
}

.h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 18px;
  text-wrap: pretty;
}

.editorial {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  max-width: var(--section-max);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
  align-items: start;
}

.editorial__heading {
  margin-bottom: 24px;
}

.editorial__copy {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: 28px;
  text-wrap: pretty;
}

.chip {
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.chip strong {
  color: var(--green);
  font-weight: 600;
  margin-right: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.editorial__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  height: 560px;
  background: var(--green-deep);
  position: sticky;
  top: 120px;
  overflow: hidden;
}

.editorial__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

.editorial__visual--solo {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  height: 560px;
}

.strip {
  background: #fff;
}

.strip__see {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--green);
}

.strip__grid {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 380px 380px;
  gap: 14px;
}

.strip__cell {
  position: relative;
  overflow: hidden;
  background: var(--placeholder-dark);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.strip__cell:hover {
  transform: translateY(-3px);
}

/* Hover-scale image cards — same pattern across strip cells, case-study cards,
   and product cards. The image fills its parent and scales 1.04 on parent hover. */
.strip__cell img,
.case__img img,
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.strip__cell:hover img,
.case:hover .case__img img,
.pcard:hover .pcard__img img {
  transform: scale(1.04);
}

.strip__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 24, 12, 0.85) 0%, rgba(4, 24, 12, 0.2) 45%, rgba(0, 0, 0, 0) 70%);
}

.strip__cell-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  color: #fff;
  z-index: 2;
}

.strip__cell-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.strip__cell-cat::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--orange);
}

.strip__cell-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.strip__cell--big .strip__cell-title {
  font-size: 30px;
}

.strip__cell-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}

.strip__cell--big {
  grid-row: span 2;
}

/* .why (home: "Why NWBS") and .howto (product pages: "How to spec")
   are the same visual pattern — paper-2 section, dark overlay-image
   panel + numbered-list panel. Rules are grouped so a fix to one
   applies to both. Sub-components (__row, __num, etc.) share the
   "numbered row" block farther down (see .why__row / .howto__row).
*/
.why,
.howto {
  background: var(--paper-2);
}

.why__inner,
.howto__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.why__visual,
.howto__visual {
  background: var(--placeholder-dark);
  position: sticky;
  top: 120px;
  overflow: hidden;
}
.why__visual {
  height: 680px;
}
.howto__visual {
  height: 560px;
}

.why__visual > img,
.howto__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why__visual::after,
.howto__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4, 24, 12, 0.55), rgba(4, 24, 12, 0));
}

/* Caption bar at the bottom of feature images — shared between the home why /
   product howto overlay images and the about featband framed images so the
   site has one caption pattern, not two. When two spans are present they render
   as a row with space-between; the second span is dimmer. */
.why__quote,
.howto__quote,
.editorial__quote,
.presale__visual-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 14px 18px;
  background: rgba(4, 24, 12, 0.92);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.why__quote span:last-child:not(:first-child),
.howto__quote span:last-child:not(:first-child),
.editorial__quote span:last-child:not(:first-child) {
  color: rgba(255, 255, 255, 0.5);
}

.why__list,
.howto__list {
  margin-top: 48px;
}

/* === Section frame (shared padding + border-top) ===
   Every editorial section pads the same and gets a top hairline. Backgrounds
   stay on the per-section rule because they vary by visual rhythm
   (#fff / paper / paper-2 / green-deep). One rule below, every section follows.
*/
.strip,
.why,
.leadtime,
.brands,
.howwork,
.testimonials,
.process,
.cases,
.precon,
.compare,
.faq,
.catalog,
.packages,
.howto,
.presale,
.accounts,
.chain,
.expect,
.send,
.showroom,
.next,
.benefits,
.logistics,
.mapsplit,
.topten,
.regions,
.full,
.ways,
.psec {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--line);
}
/* === /Section frame === */

/* === Section wrap (shared inner container) ===
   Centered max-width wrapper used by every section's __inner element.
*/
.stats__inner,
.brands__inner,
.testimonials__inner,
.benefits__inner,
.process__inner,
.precon__inner,
.compare__inner,
.faq__inner,
.packages__inner,
.topten__inner,
.regions__inner,
.full__inner,
.ways__inner,
.logistics__inner,
.crosslink__inner,
.lineage__inner,
.channels__inner,
.next__inner,
.psec__inner {
  max-width: var(--section-max);
  margin: 0 auto;
}
/* === /Section wrap === */

/* === Section head component (shared across sections) ===
   The "eyebrow + h2 on left, optional link/meta on right, stacked on mobile"
   pattern. One rule, every section follows it. Add a new section? Just add its
   __head class to the selector list below.
*/
.strip__head,
.cases__head,
.catalog__head,
.channels__head,
.showroom__head,
.brands__head,
.accounts__head,
.leadtime__head,
.precon__head,
.compare__head,
.faq__head,
.process__head,
.benefits__head,
.packages__head,
.testimonials__head,
.topten__head,
.regions__head,
.full__head,
.scope__head,
.ways__head,
.psec__head,
.prodrail__head,
.next__head,
.lineage__head,
.chain__head,
.logistics__head,
.send__head {
  max-width: var(--section-max);
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}

/* Heading + link/CTA variant: link on the right is auto-sized, gap is tighter */
.strip__head,
.cases__head,
.catalog__head {
  grid-template-columns: 1fr auto;
  gap: 32px;
  margin-bottom: 48px;
}

@media (max-width: 880px) {
  .strip__head,
  .cases__head,
  .catalog__head,
  .channels__head,
  .showroom__head,
  .brands__head,
  .accounts__head,
  .leadtime__head,
  .precon__head,
  .compare__head,
  .faq__head,
  .process__head,
  .benefits__head,
  .packages__head,
  .testimonials__head,
  .topten__head,
  .regions__head,
  .full__head,
  .scope__head,
  .ways__head,
  .psec__head,
  .prodrail__head,
  .next__head,
  .lineage__head,
  .chain__head,
  .logistics__head,
  .send__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
}
/* === /Section head component === */

/* === Numbered row component (shared across sections) ===
   Single source of truth for "big-number + title + paragraph + optional meta-label"
   rows used by: §Why NWBS, §How we work, §How to spec, §Pre-construction services.
   Change the rule below and every numbered list updates everywhere.
*/
.why__row,
.howwork .step,
.howto__row,
.precon__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line-2);
  align-items: start;
}

.why__row:last-child,
.howwork .step:last-child,
.howto__row:last-child,
.precon__row:last-child {
  border-bottom: 1px solid var(--line-2);
}

.why__num,
.howwork .step__num,
.howto__num,
.precon__num {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.02em;
}

.why__row h3,
.howwork .step__body h3,
.howto__row h3,
.precon__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.why__row p,
.howwork .step__body p,
.howto__row p,
.precon__body {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
  text-wrap: pretty;
}

.howwork .step__meta,
.precon__lede,
.howto__tag {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.howwork .step__meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
/* === /Numbered row component === */

.leadtime {
  background: #fff;
}

.leadtime__head {
  margin-bottom: 48px;
}

.leadtime__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
  text-wrap: pretty;
}

.leadtime__table {
  max-width: var(--section-max);
  margin: 0 auto;
  border-top: 1px solid var(--line-2);
}

.lt-row {
  display: grid;
  grid-template-columns: 240px 1fr 220px 160px;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.lt-row.is-head {
  border-bottom: 1px solid var(--line-2);
  padding: 14px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lt-cat {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.lt-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.lt-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(to right, var(--green), var(--green) 60%, var(--orange));
  border-radius: 3px;
}

.lt-bar.b1::after {
  left: 0;
  right: 80%;
}

.lt-bar.b2::after {
  left: 5%;
  right: 65%;
}

.lt-bar.b3::after {
  left: 10%;
  right: 55%;
}

.lt-bar.b4::after {
  left: 15%;
  right: 35%;
}

.lt-bar.b5::after {
  left: 20%;
  right: 25%;
}

.lt-bar.b6::after {
  left: 30%;
  right: 5%;
}

.lt-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

.lt-stock {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
}

.lt-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.lt-stock.is-order {
  color: var(--wood);
}

.lt-stock.is-order::before {
  background: var(--wood);
}

.brands {
  background: var(--paper);
}

.brands__head {
  margin-bottom: 64px;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
}

.brands__head .h2 {
  margin: 0;
  max-width: 18ch;
}

.brands__grid,
.brand-row__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.brand-cell,
.brand-row__logos a {
  outline: 1px solid var(--line-2);
  outline-offset: -1px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  transition:
    background 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
  color: var(--ink-2);
  opacity: 0.78;
  filter: grayscale(1) contrast(0.95);
}

.brand-cell:hover,
.brand-row__logos a:hover {
  background: #fff;
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

.brand-cell svg {
  max-width: 100%;
  max-height: 42px;
  width: auto;
  height: auto;
}

.brand-cell img,
.brand-row__logos img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 1100px) {
  .brands__grid,
  .brand-row__logos {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 720px) {
  .brand-cell,
  .brand-row__logos a {
    padding: 14px 16px;
  }
  .brand-cell img,
  .brand-row__logos img {
    max-height: 36px;
  }
}

.brands__foot {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ===== Home page §03 — How we work (numbered process rows) ===== */
.howwork {
  background: #fff;
}

.howwork__head {
  max-width: var(--section-max);
  margin: 0 auto 56px;
}

.howwork__list {
  max-width: var(--section-max);
  margin: 0 auto;
}

/* 3-col layout per design_handoff_nwbs_site/NWBS Home v3.html:
   number | body | meta (right-aligned). Overrides the shared 2-col
   Numbered row component. */
.howwork .step {
  grid-template-columns: 80px 1fr 220px;
  gap: 48px;
  align-items: baseline;
}

.howwork .step__meta {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-top: 0;
}

.howwork__foot {
  max-width: 1240px;
  margin: 48px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.howwork__foot-text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  max-width: 48ch;
}

.howwork__foot-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--green);
  padding-bottom: 5px;
  font-weight: 500;
}

.howwork__foot-cta:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ===== Product list (replaces chip salad in Home Products editorial) ===== */
.prodlist {
  margin: 28px 0 32px;
}

.prodlist__main {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}

.prodlist__main li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.prodlist__n {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

.prodlist__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.prodlist__addon {
  margin-top: 24px;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper-2);
  border-left: 2px solid var(--orange);
}

.prodlist__addon strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-right: 6px;
}

/* ===== Strip "more projects" CTA cell ===== */
.strip__cell--cta {
  background: var(--green-deep);
}

.strip__cell--cta::after {
  display: none;
}

.strip__cta-content {
  position: relative;
  z-index: 1;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  height: 100%;
  color: #fff;
}

.strip__cta-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.strip__cta-text {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}

.strip__cta-text em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}

.strip__cta-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 5px;
  align-self: flex-start;
  font-weight: 500;
}

.strip__cell--cta:hover .strip__cta-link {
  color: var(--orange);
}

/* ===== Home page §06 — Featured project (image-bg dark band) ===== */
.featured {
  position: relative;
  background: var(--placeholder-dark);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.featured__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.featured__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 24, 12, 0.92) 0%, rgba(2, 24, 12, 0.7) 45%, rgba(2, 24, 12, 0.15) 100%);
}

.featured__inner {
  position: relative;
  z-index: 1;
  max-width: var(--section-max);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: end;
  color: #fff;
}

.featured__eyebrow {
  color: var(--orange);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.featured__eyebrow .num {
  color: rgba(255, 255, 255, 0.45);
}

.featured__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.featured__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  max-width: 20ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.featured__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}

.featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 5px;
  font-weight: 500;
}

.featured__cta:hover {
  color: var(--orange);
}

.featured__specs {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

.featured__specs dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.featured__specs dd {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
}

.featured__specs dd span {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  letter-spacing: 0;
}

.featured__supplied {
  margin-bottom: 36px;
  max-width: 560px;
}

.featured__supplied-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.featured__supplied-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--orange);
}

.featured__supplied ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.featured__supplied li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.featured__supplied .sup-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.featured__supplied .sup-desc {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.35;
}

/* ===== Home page §09 — Deals callout strip (live-now band) ===== */
.dealstrip {
  background: var(--green-deep);
  color: #fff;
  padding: 56px 32px;
  position: relative;
  overflow: hidden;
  border-top: 0;
}

.dealstrip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--orange);
}

.dealstrip__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}

.dealstrip__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.dealstrip__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: dealspulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(216, 122, 58, 0.6);
}

@keyframes dealspulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

.dealstrip__text {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}

.dealstrip__text em {
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.dealstrip__cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 5px;
  font-weight: 500;
  white-space: nowrap;
}

.dealstrip__cta:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ===== Testimonials rating bar (replaces simple star row) ===== */
.rating-bar {
  position: relative;
  display: inline-block;
  font-size: 24px;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--line-2);
}

.rating-bar::before {
  content: "\2605\2605\2605\2605\2605";
}

.rating-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}

.rating-bar__fill::before {
  content: "\2605\2605\2605\2605\2605";
}

.rating-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  justify-content: flex-end;
}

.testimonials {
  background: var(--paper-2);
}

.testimonials__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.testimonials__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

.quotes-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
}

.quote-lead {
  background: #fff;
  padding: 56px 56px 44px;
  border-top: 4px solid var(--green);
  position: relative;
}

.quote-lead__mark {
  position: absolute;
  top: 18px;
  left: 36px;
  font-family: "Fraunces", serif;
  font-size: 140px;
  line-height: 1;
  color: var(--orange);
  opacity: 0.18;
  font-weight: 600;
}

.quote-lead__text {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 32px;
  position: relative;
  z-index: 1;
}

.quote-lead__attr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.quote-lead__author {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.quote-lead__role {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.quote-lead__stars {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: 2px;
}

.quote-lead__stars span {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.quote-supports {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quote-mini {
  background: transparent;
  border-left: 2px solid var(--line-2);
  padding: 4px 0 4px 24px;
}

.quote-mini__stars {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.quote-mini__text {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 14px;
}

.quote-mini__foot {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.quote-mini__foot strong {
  color: var(--ink);
  font-weight: 700;
}

.quote-more {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--green);
  align-self: flex-start;
  margin-top: 8px;
}

.cta {
  position: relative;
  padding: 140px 32px;
  /* Solid fallback shown before the lazy .cta__bg image paints (and if it never does). */
  background: var(--green-deep);
  color: #fff;
  overflow: hidden;
}

/* Background photo moved out of CSS into a lazy <img> so it defers until the
   band scrolls into view; gradient sits above it, content above the gradient. */
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(4, 24, 12, 0.95) 0%, rgba(4, 40, 20, 0.85) 45%, rgba(4, 40, 20, 0.5) 100%);
}

.cta__inner {
  position: relative;
  z-index: 2;
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
}

.cta__eyebrow {
  color: var(--orange);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.cta__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  max-width: 18ch;
  text-wrap: pretty;
}

.cta__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}

.cta__copy {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 48ch;
  line-height: 1.6;
  margin-bottom: 36px;
  text-wrap: pretty;
}

.cta__buttons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.cta__side {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 48px;
}

.cta__side-row {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cta__side-row:first-child {
  padding-top: 0;
}

.cta__side-row:last-child {
  border-bottom: 0;
}

.cta__side-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.cta__side-val {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.cta__side-val a {
  color: #fff;
}

.cta__side-val.phone {
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

footer {
  background: var(--green-deeper);
  color: rgba(255, 255, 255, 0.65);
  padding: 80px 32px 32px;
  font-size: 13px;
}

.foot {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.foot h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
  font-weight: 500;
}

.foot ul {
  list-style: none;
}

.foot li {
  margin-bottom: 8px;
}

.foot a:hover {
  color: #fff;
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.foot__brand-copy {
  line-height: 1.65;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.55);
}

.foot__contact-block {
  margin-top: 10px;
}

.foot__bottom {
  max-width: 1240px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
}

.foot__cities {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.foot__legal {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.32);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.foot__legal a {
  color: inherit;
  text-decoration: none;
}

.foot__legal a:hover {
  color: #fff;
}

.foot__sep {
  color: rgba(255, 255, 255, 0.22);
}

/* Editorial subhero — taller padding, larger Fraunces title, orange eyebrow,
   green italic emphasis. Used for every subpage; home keeps its own .hero. */
.subhero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 88px 32px 96px;
}

.subhero__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 96px;
  align-items: end;
}

.subhero__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.subhero__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.subhero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 18ch;
  margin-bottom: 24px;
}

.subhero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--green);
}

.subhero__sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 54ch;
  margin-bottom: 36px;
}

.subhero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.subhero__ctas .btn--primary {
  background: var(--orange);
  color: #fff;
}

.subhero__ctas .btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-2);
  background: transparent;
}

.subhero__ctas .btn--ghost:hover {
  border-color: var(--green);
  color: var(--green);
  background: transparent;
}

.subhero__callout {
  border-left: 1px solid var(--line-2);
  padding-left: 40px;
  padding-bottom: 8px;
}

.subhero__callout-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.subhero__callout-num {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Inner span is orange — designers use <span> to mark which words are emphasized.
   For pages where the whole number should be orange (single number callouts like
   projects), the markup wraps the number in <span> too. */
.subhero__callout-num span {
  color: var(--orange);
  font-weight: 400;
}

.subhero__callout-cap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 30ch;
}

.benefits {
  background: var(--green-deep);
  color: #fff;
}

.benefits__head {
  grid-template-columns: 1fr 1.1fr;
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Was: hardcoded content:"02" — replaced by global counter system. */

.benefits__head h2 {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.benefits__head h2 em {
  font-style: italic;
  color: var(--cream);
  font-weight: 400;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.benefit {
  padding: 36px 32px 36px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 0;
}

.benefit:nth-child(3n) {
  border-right: 0;
  padding-right: 0;
}

.benefit:nth-child(3n + 1) {
  padding-left: 0;
}

.benefit:nth-child(n + 1):nth-child(-n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 36px;
}

.benefit:nth-child(n + 4) {
  padding-top: 36px;
}

.benefit:nth-child(3n + 2),
.benefit:nth-child(3n) {
  padding-left: 32px;
}

.benefit:nth-last-child(-n + 3) {
  border-bottom: 0;
  padding-bottom: 0;
}

.benefit__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.benefit__num strong {
  color: #fff;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.benefit h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 10px;
}

.benefit p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 38ch;
}

.benefits__cta {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.benefits__cta-text {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.85);
  max-width: 42ch;
  line-height: 1.35;
}

.benefits__cta-text em {
  font-style: italic;
  color: var(--cream);
}

.process {
  background: var(--paper);
}

.process__head {
  margin-bottom: 72px;
}

.process__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
}

.process__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.process__rail::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line-2) 0 6px, transparent 6px 12px);
}

.step {
  padding: 0 18px;
  position: relative;
}

.step:first-child {
  padding-left: 0;
}

.step:last-child {
  padding-right: 0;
}

.step__dot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 32px;
  color: var(--green);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.step__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--line);
  pointer-events: none;
}

.step:nth-child(odd) .step__dot {
  background: var(--green-deep);
  color: #fff;
  border-color: var(--green-deep);
}

.step__phase {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}

.step h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--ink);
}

.step p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 30ch;
}

.step__time {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.cases {
  background: #fff;
}

.cases__grid {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.case {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case__img {
  aspect-ratio: 4/5;
  background: var(--placeholder-dark);
  overflow: hidden;
  position: relative;
}

.cases__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1100px;
  gap: 48px;
}

.case__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--green-deep);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 7px 12px;
}

.case__phase {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.case h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.case__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.case__meta div {
  font-size: 13px;
  color: var(--ink);
}

.case__meta-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.case__supplied {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.case__supplied strong {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 6px;
}

.start-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.start-row:last-child {
  border-bottom: 0;
}

.start-row__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.65);
  padding-top: 4px;
}

.start-row__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 6px;
}

.start-row__val {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

a.start-row__val:hover {
  color: var(--orange);
}

.start-row__val--plain {
  font-size: 17px;
  line-height: 1.35;
}

.start-row__arrow {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 14px;
  color: var(--orange);
}

.start-row__sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 8px;
  line-height: 1.5;
}

.reps__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.reps__head-num {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 32px;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}

.reps__head-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* ===== Builders page §04 — Pre-construction & estimating ===== */
.precon {
  background: #fff;
}

.precon__head {
  grid-template-columns: 1fr 1.05fr;
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-2);
}

.precon__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 52ch;
}

.precon__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* .precon__num / .precon__title / .precon__body / .precon__lede inherit from the
   Numbered row component near the top of this file. .precon__row overrides that
   2-col grid with the 3-col handoff layout (number | title+lede | body),
   per design_handoff_nwbs_site/NWBS Builders v3-1.html. */

.precon__row {
  grid-template-columns: 80px 0.95fr 1.4fr;
  gap: 48px;
}

/* Match the handoff's wider body measure (shared Numbered-row rule caps at
   15px/48ch; handoff precon is 15.5px/54ch). */
.precon__body {
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 54ch;
}

.precon__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.precon__body strong {
  color: var(--ink);
  font-weight: 600;
}

.precon__foot {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.precon__foot-text {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 48ch;
  line-height: 1.35;
}

.precon__foot-text em {
  font-style: italic;
  color: var(--ink-2);
}

/* ===== Builders page §05 — Comparison table ===== */
.compare {
  background: var(--paper-2);
}

.compare__head {
  grid-template-columns: 1fr 1.05fr;
}

.compare__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
}

.compare__table {
  background: #fff;
  border: 1px solid var(--line-2);
}

.compare__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
  border-bottom: 1px solid var(--line);
}

.compare__row:last-child {
  border-bottom: 0;
}

.compare__row.is-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
}

.compare__cell {
  padding: 22px 24px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  border-right: 1px solid var(--line);
}

.compare__cell:last-child {
  border-right: 0;
}

.compare__cell.is-dim {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
}

.compare__cell.is-head {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.compare__cell.is-nwbs {
  background: #fcfaf6;
  color: var(--ink);
  font-weight: 500;
  border-left: 2px solid var(--orange);
}

.compare__cell.is-nwbs.is-head {
  background: var(--green-deep);
  color: #fff;
  border-left: 2px solid var(--orange);
  font-weight: 600;
}

.compare__foot {
  margin-top: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ===== Builders page §08 — FAQ ===== */
.faq {
  background: var(--paper-2);
}

.faq__head {
  grid-template-columns: 1fr 1.05fr;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-2);
}

.faq__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
}

.faq__row {
  padding: 28px 0;
  border-bottom: 1px solid var(--line-2);
}

.faq__row:last-of-type,
.faq__row:nth-last-of-type(2) {
  border-bottom: 0;
}

.faq__q {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.faq__a {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
}

.faq__a strong {
  color: var(--ink);
  font-weight: 600;
}

.faq__foot {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.faq__foot-text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  max-width: 46ch;
  line-height: 1.4;
}

.faq__foot-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--green);
  padding-bottom: 3px;
  font-weight: 500;
}

.faq__foot-cta:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.catalog {
  background: #fff;
}

.catalog__head p {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 50ch;
  line-height: 1.6;
  text-wrap: pretty;
  margin-top: 18px;
}

.catalog__see {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--green);
}

.catalog__grid {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}

/* Each card spans 5 parent rows and uses subgrid so img / title / copy /
   meta / foot line up across every card in the row regardless of copy length. */
.pcard {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 18px;
  border-top: 1px solid var(--line-2);
  padding-top: 24px;
  transition: border-color 0.2s ease;
}

.pcard:hover {
  border-color: var(--green);
}

.pcard__img {
  aspect-ratio: 5/4;
  background: var(--placeholder-dark);
  overflow: hidden;
  position: relative;
}

.pcard__num {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--green-deep);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
}

.pcard__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pcard__copy {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 42ch;
  text-wrap: pretty;
}

.pcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.pcard__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.pcard__row:last-child {
  border-bottom: 0;
}

.pcard__row dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.pcard__row dd {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

.pcard__row dd strong {
  font-weight: 600;
}

.pcard__row.is-time dd {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.pcard__foot {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.pcard__link {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pcard__link:hover {
  color: var(--orange);
}

.pcard__share {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.45;
}

.packages {
  background: var(--paper);
}

.packages__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
  text-wrap: pretty;
}

.packages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Subgrid: tier / title / for / list / lead align across all three cards. */
.pkg {
  background: #fff;
  border-top: 3px solid var(--green);
  padding: 36px 32px 32px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 18px;
  transition: transform 0.2s ease;
}

.pkg:hover {
  transform: translateY(-2px);
}

.pkg--mid {
  border-top-color: var(--orange);
}

.pkg--high {
  border-top-color: var(--wood);
}

.pkg__tier {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pkg__tier strong {
  color: var(--green);
  font-weight: 600;
}

.pkg--mid .pkg__tier strong {
  color: var(--orange);
}

.pkg--high .pkg__tier strong {
  color: var(--wood);
}

.pkg__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pkg__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.pkg__for {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}

.pkg__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}

.pkg__list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.pkg__list li:last-child {
  border-bottom: 0;
}

.pkg__list dt,
.pkg__list .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.pkg__list .val {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}

.pkg__lead {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pkg__lead-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pkg__lead-val {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.leadtime__foot {
  max-width: 1240px;
  margin: 32px auto 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brands__head p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
  text-wrap: pretty;
  margin: 0;
}

.brand-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--line-2);
}

.brand-row + .brands__foot {
  margin-top: 0;
}

.brand-row__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-row__label strong {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  line-height: 1;
}

.brand-row__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

.brands__foot a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}

.brands__foot a:hover {
  color: var(--green-deep);
  border-bottom-color: var(--green-deep);
}

.crumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.crumb a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.crumb a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.crumb__sep {
  color: var(--line-2);
}

.crumb__here {
  color: var(--green);
}

.bgrid {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.bgrid__card {
  background: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background 0.2s ease;
}

.bgrid__card:hover {
  background: var(--paper);
}

/* Hardware and millwork each carry four bgrid cards — a 2×2 grid sits balanced
   where the default three-column track would leave a lone trailing card. */
@media (min-width: 961px) {
  .page-products-hardware .bgrid,
  .page-products-millwork .bgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bgrid__logo {
  height: 44px;
  display: flex;
  align-items: center;
}

.bgrid__logo img {
  max-height: 36px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bgrid__logo[data-tone="inverted"] {
  background: var(--ink);
  padding: 8px 14px;
  border-radius: 2px;
  align-self: flex-start;
  height: auto;
}

.bgrid__logo[data-tone="inverted"] img {
  max-height: 24px;
}

.bgrid__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}

.bgrid__best {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

.bgrid__divider {
  height: 1px;
  background: var(--line);
}

.bgrid__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.5;
}

.bgrid__row dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding-top: 2px;
}

.bgrid__row dd {
  margin: 0;
  color: var(--ink);
}

.bgrid__tier {
  margin-top: auto;
  padding-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.bgrid__link {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  align-self: flex-start;
}

.bgrid__link:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.bytype {
  max-width: var(--section-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.bytype__group-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}

.bytype__group-name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.bytype__group-name em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.bytype__group-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bytype__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 64px;
}

.bytype__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.bytype__item-name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}

.bytype__item-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

.bytype__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bytype__item-meta strong {
  color: var(--green);
  font-weight: 500;
}

.pj-section {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--line);
}

.pj-section__head {
  max-width: var(--section-max);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: end;
}

.pj-section__head .h2 {
  max-width: 18ch;
}

.pj-section__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}

.pj-section__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.pj-section__count strong {
  color: var(--green);
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.pj-feature {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line-2);
}

.pj-feature__visual {
  position: relative;
  min-height: 560px;
  background: var(--green-deep);
  overflow: hidden;
}
/* Project-card image rules — shared between the hero feature card and the
   grid cards. The picture wrapper is absolutely positioned to fill its
   parent, then the img fills the picture. Both layers must declare
   width/height:100% — a <picture> doesn't auto-size its <img> child. */

.pj-feature__tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(4, 24, 12, 0.85);
  color: #fff;
  padding: 10px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pj-feature__body {
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
}

.pj-feature__builder {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pj-feature__builder::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--orange);
}

.pj-feature__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}

.pj-feature__loc {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.pj-feature__summary {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 32px;
  text-wrap: pretty;
}

.spec {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 32px;
  align-items: baseline;
}

.spec dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  padding-top: 4px;
}

.spec dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.spec > dd:last-of-type,
.spec > dt:nth-last-of-type(1) {
  border-bottom: 0;
  padding-bottom: 0;
}

.pj-feature__link {
  margin-top: auto;
  padding-top: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  border-bottom: 1px solid var(--green);
  padding-bottom: 6px;
}

.pj-feature__link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.pj-grid {
  max-width: 1240px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.pj-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.pj-card {
  background: #fff;
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.pj-card:hover {
  transform: translateY(-2px);
  border-color: var(--green);
}

.pj-card__visual {
  height: 280px;
  background: var(--green-deep);
  position: relative;
  overflow: hidden;
}

.pj-feature__visual > picture,
.pj-feature__visual > img,
.pj-card__visual > picture,
.pj-card__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pj-feature__visual picture,
.pj-card__visual picture {
  display: block;
}

.pj-feature__visual img,
.pj-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.pj-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(4, 24, 12, 0.85);
  color: #fff;
  padding: 7px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pj-card__body {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pj-card__builder {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

.pj-card__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.pj-card__loc {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.pj-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.pj-card__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pj-card__meta-num {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}

.pj-card__meta-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

.pj-card__products {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 24px;
}

.pj-card__products strong {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 500;
}

.pj-card__link {
  margin-top: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border-bottom: 1px solid var(--green);
  padding-bottom: 5px;
}

.pj-card__link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.mapsplit {
  background: var(--paper);
}

.mapsplit__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.mapsplit__head .h2 {
  margin-bottom: 18px;
}

.mapsplit__copy {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 42ch;
  margin-bottom: 32px;
}

.zip {
  border-top: 1px solid var(--line-2);
  padding-top: 28px;
  margin-top: 28px;
}

.zip__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.zip__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 380px;
}

.zip__input {
  flex: 1;
  padding: 14px 16px;
  font-size: 15px;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}

.zip__input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

.zip__btn {
  padding: 14px 22px;
  font-size: 14px;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.zip__btn:hover {
  background: var(--green-deep);
}

.zip__btn .arr {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 13px;
}

.zip__result {
  margin-top: 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  min-height: 1.4em;
}

.zip__result--success {
  color: var(--green-deep);
}

.zip__result--warn {
  color: #a86a25;
}

.zip__result--error {
  color: #9b3a2f;
}

.delivery-map {
  position: relative;
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: #dde7e3;
  aspect-ratio: 1.05/1;
  isolation: isolate;
  z-index: 0;
}

.delivery-map__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.delivery-map__canvas.leaflet-container {
  font-family: "Inter", sans-serif;
  background: #dde7e3;
}
/* Beat leaflet.css's .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{touch-action:none} (3 classes); match specificity, win on source order. Lets the page scroll past the map on touch devices. */
.delivery-map .delivery-map__canvas.leaflet-container {
  touch-action: pan-y;
}

.delivery-map__canvas .leaflet-popup-content-wrapper {
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-family: "Inter", sans-serif;
}

.delivery-map__canvas .leaflet-popup-content {
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 14px;
  color: var(--ink);
}

.delivery-map__canvas .leaflet-popup-content strong {
  font-family: "Fraunces", serif;
  font-weight: 600;
  color: var(--green-deep);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.delivery-map__canvas .leaflet-popup-tip {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.delivery-map__canvas .zip-pop {
  display: inline-block;
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.delivery-map__canvas .zip-pop--yes {
  color: var(--green-deep);
}
.delivery-map__canvas .zip-pop--no {
  color: #a86a25;
}

.delivery-map__marker {
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #fff;
}
.delivery-map__marker--hq {
  width: 22px;
  height: 22px;
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--orange);
}
.delivery-map__marker--zip {
  width: 18px;
  height: 18px;
  background: #2c3e50;
  box-shadow: 0 0 0 2px #2c3e50;
}
.delivery-map__marker--zip-yes {
  background: var(--green);
  box-shadow: 0 0 0 2px var(--green);
}
.delivery-map__marker--zip-no {
  background: #a86a25;
  box-shadow: 0 0 0 2px #a86a25;
}

.topten {
  background: #fff;
}

.topten__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
}

.topten__list {
  border-top: 1px solid var(--line-2);
}

.toprow {
  display: grid;
  grid-template-columns: 80px 220px 1fr 130px 130px;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.toprow.is-head {
  border-bottom: 1px solid var(--line-2);
  padding: 14px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.toprow__rank {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.02em;
}

.toprow__city {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.toprow__bar {
  height: 8px;
  background: var(--paper-2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.toprow__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%);
  border-radius: 4px;
}

.toprow__num {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: right;
}

.toprow.is-head > :nth-child(n + 4) {
  text-align: right;
}

.toprow__num span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: 6px;
  font-weight: 500;
}

/* Top-ten bar-fill widths — share of the top-10 cohort (9,663 deliveries),
   so the ten bars sum to 100% and Seattle's dominance reads honestly. */
.toprow__bar-fill--01 {
  width: 100%;
}
.toprow__bar-fill--02 {
  width: 28%;
}
.toprow__bar-fill--03 {
  width: 22%;
}
.toprow__bar-fill--04 {
  width: 14.1%;
}
.toprow__bar-fill--05 {
  width: 11.9%;
}
.toprow__bar-fill--06 {
  width: 11.3%;
}
.toprow__bar-fill--07 {
  width: 10%;
}
.toprow__bar-fill--08 {
  width: 8.9%;
}
.toprow__bar-fill--09 {
  width: 8.1%;
}
.toprow__bar-fill--10 {
  width: 6.4%;
}

/* Mobile top-ten: collapse the 5-column desktop grid into rank + city/nums
   so the per-city volume stays visible at narrow widths. */
@media (max-width: 960px) {
  .toprow {
    grid-template-columns: 56px auto auto;
    grid-template-rows: auto auto;
    gap: 4px 18px;
    align-items: start;
    padding: 18px 0;
  }
  .toprow__rank {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 38px;
    align-self: center;
  }
  .toprow__city {
    grid-column: 2 / -1;
    grid-row: 1;
    font-size: 20px;
  }
  .toprow__bar {
    display: none;
  }
  .toprow > .toprow__num {
    grid-row: 2;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: 0.02em;
    text-align: left;
  }
  .toprow > .toprow__num:nth-child(4) {
    grid-column: 2;
  }
  .toprow > .toprow__num:nth-child(5) {
    grid-column: 3;
  }
  .toprow > .toprow__num span {
    font-size: 9.5px;
    margin-left: 5px;
  }
  .toprow.is-head {
    display: none;
  }
}

.regions {
  background: var(--paper-2);
}

.regions__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
}

.regions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}

.region {
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 36px 36px 40px;
  background: transparent;
  transition: background 0.2s ease;
  min-width: 0;
}

.region--wide {
  grid-column: 1 / -1;
}

.region--wide .region__cities {
  max-width: none;
}

.region:hover {
  background: #fff;
}

.region__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 18px;
}

.region__rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.region__rank::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--orange);
  vertical-align: middle;
  margin-right: 10px;
}

.region__rank-num {
  color: var(--green);
}

.region__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}

.region__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.region__meta {
  display: flex;
  gap: 48px;
  margin: 0 0 22px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.region__meta dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.region__meta dd {
  font-family: "Fraunces", serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: -0.01em;
  line-height: 1;
}

.region__cities {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.region__cities .div {
  color: var(--line-2);
  font-weight: 300;
}

.region__cities .more {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.full {
  background: #fff;
}

.full__head {
  margin-bottom: 48px;
}

.full__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
}

.citytable-wrap {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line-2);
}

.citytable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.citytable thead th {
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
}

.citytable thead .th-num {
  text-align: right;
  width: 20%;
}

.citytable thead .th-city {
  width: 40%;
  padding-left: 4px;
}

.cityrow {
  border-bottom: 1px solid var(--line);
}

.cityrow:hover {
  background: var(--paper-2);
}

.cityrow td {
  padding: 11px 16px 11px 0;
  vertical-align: baseline;
}

.cityrow td.cityrow__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
  padding-left: 4px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cityrow__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ways {
  background: var(--paper);
}

.ways__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
}

.ways__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.way {
  background: #fff;
  border: 1px solid var(--line);
  padding: 48px 44px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 24px;
  position: relative;
}

.way--alt {
  background: #fff;
}

.way__rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.way__rank::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
}

.way__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.way__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.way__lede {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.65;
}

.way__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.way__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}

.way__list li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 7px;
}

.way--alt .way__list li::before {
  background: var(--orange);
}

.way__foot {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.way__foot strong {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.4;
}

.way__foot strong em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.taxnote {
  margin-top: 40px;
  padding: 32px 36px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}

.taxnote__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.taxnote__body {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}

.taxnote__body strong {
  font-weight: 600;
}

.taxnote__cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 3px;
  white-space: nowrap;
}

.taxnote__cta:hover {
  color: var(--orange);
}

.scope {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 96px 32px;
}

.scope__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.scope__head {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
}

.scope__lede {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 30ch;
  text-wrap: pretty;
  margin-bottom: 24px;
}

.scope__body p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 60ch;
  margin-bottom: 18px;
  text-wrap: pretty;
}

.scope__body p:last-child {
  margin-bottom: 0;
}

.scope__body strong {
  color: var(--ink);
  font-weight: 600;
}

.scope__example {
  padding: 28px 32px;
  background: var(--paper);
  border-left: 3px solid var(--orange);
  text-wrap: pretty;
}

.scope__example-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

.scope__example-title {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 16px;
}

.scope__example-title em {
  font-style: italic;
  color: var(--green);
}

.scope__example-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scope__example-list li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}

.scope__example-day {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-top: 2px;
}

.scope__example-foot {
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.scope__flow {
  list-style: none;
  padding: 36px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  counter-reset: none;
}

.flowstep {
  position: relative;
  padding-right: 8px;
}

.flowstep__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 14px;
}

.flowstep__name {
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 8px;
}

.flowstep__sub {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}

.flowstep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -18px;
  width: 24px;
  height: 1px;
  background: var(--line);
}

.scard {
  background: #fff;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.2s ease;
  min-height: 280px;
}

.scard:hover {
  background: #fffdf8;
}

.scard__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.scard__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
}

.scard__where {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.scard__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
}

.scard__copy {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 38ch;
}

.scard__tag {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.presale {
  background: #fff;
}

.presale__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: start;
}

.presale__visual {
  position: sticky;
  top: 120px;
  height: 620px;
  background: var(--paper-2);
  overflow: hidden;
}

.presale__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.presale__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4, 24, 12, 0.55), rgba(4, 24, 12, 0.05) 60%);
}

.presale__copy {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 48ch;
  margin-top: 24px;
  margin-bottom: 36px;
  text-wrap: pretty;
}

.presale__list {
  list-style: none;
  border-top: 1px solid var(--line-2);
}

.presale__list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.presale__list dt,
.presale__list .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding-top: 4px;
}

.presale__list .val {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
}

.presale__list .val strong {
  font-weight: 600;
}

.logistics {
  background: var(--green-deep);
  color: #fff;
}

.logistics__head {
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.logistics__head .eyebrow {
  color: var(--orange);
}

.logistics__head h2 {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 18ch;
  text-wrap: pretty;
}

.logistics__head h2 em {
  font-style: italic;
  color: var(--cream);
  font-weight: 400;
}

.logistics__head p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 48ch;
  text-wrap: pretty;
}

.logistics__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.lcard {
  background: var(--green-deep);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
}

.lcard__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.lcard__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
}

.lcard__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
}

.lcard__copy {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  text-wrap: pretty;
}

.lcard__copy strong {
  color: #fff;
  font-weight: 600;
}

.lcard__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: auto 0 0;
}

.lcard__foot {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.lcard__foot a {
  color: var(--orange);
  border-bottom: 1px solid rgba(216, 122, 58, 0.4);
  padding-bottom: 1px;
}

.lcard__foot a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.lcard.is-tax {
  background: var(--green-deeper);
}

.lcard.is-tax .lcard__title em {
  color: var(--orange);
}

.logistics__note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  max-width: 90ch;
  line-height: 1.7;
}

.accounts {
  background: var(--paper);
}

.accounts__head {
  gap: 64px;
}

.accounts__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
  text-wrap: pretty;
}

.accounts__grid {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.acard {
  background: #fff;
  border-top: 3px solid var(--green);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}

.acard:nth-child(2) {
  border-top-color: var(--orange);
}

.acard:nth-child(3) {
  border-top-color: var(--wood);
}

.acard:nth-child(4) {
  border-top-color: var(--green-deep);
}

.acard__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.acard__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.acard__copy {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}

.acard__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.acard__foot a {
  color: var(--green);
  border-bottom: 1px solid var(--green);
  padding-bottom: 1px;
}

.acard__foot a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.crosslink {
  background: #fff;
  padding: 80px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.crosslink__lead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 36px;
}

.crosslink__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.crosslink__title {
  font-family: "Fraunces", serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 64ch;
}

.crosslink__title em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 400;
}

.crosslink__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.crosslink__grid a {
  background: #fff;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 148px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  color: var(--ink);
}

.crosslink__grid a:hover {
  background: var(--green-deep);
  color: #fff;
}

.crosslink__grid a:hover .crosslink__num {
  color: var(--orange);
}

.crosslink__grid a:hover .crosslink__sub {
  color: rgba(255, 255, 255, 0.7);
}

.crosslink__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}

.crosslink__name {
  font-family: "Fraunces", serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: auto;
}

.crosslink__sub {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}

.subhero__callout-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subhero__callout-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.subhero__callout-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.subhero__callout-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.subhero__callout-val {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.45;
}

.btn--ghost-dark {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.btn--ghost-dark:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.story {
  background: var(--paper);
  padding: var(--section-pad-y) var(--section-pad-x) 96px;
  border-top: 1px solid var(--line);
}

.story__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 96px;
  align-items: start;
}

.story__sticky {
  position: sticky;
  top: 120px;
}

.story__sub {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-top: 22px;
  text-wrap: pretty;
}

.story__owner {
  margin-top: 32px;
  padding: 24px;
  background: var(--paper-2);
  border-left: 3px solid var(--orange);
}

.story__owner-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.story__owner-name {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.story__owner-role {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 6px;
}

.story__prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 60ch;
}

.story__prose p {
  margin-bottom: 22px;
  text-wrap: pretty;
}

.story__prose p:last-child {
  margin-bottom: 0;
}

.story__prose strong {
  font-weight: 600;
  color: var(--ink);
}

.story__prose em {
  font-style: italic;
  color: var(--ink-2);
}

.story__prose .pull {
  font-family: "Fraunces", serif;
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 24px 0;
  margin: 32px 0;
  letter-spacing: -0.01em;
}

.lineage {
  background: var(--paper-2);
  padding: 64px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lineage__head {
  grid-template-columns: 1fr 1.6fr;
  align-items: start;
  margin-bottom: 40px;
}

.lineage__head h3 {
  font-family: "Fraunces", serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.lineage__head h3 em {
  font-style: italic;
  color: var(--ink-2);
  font-weight: 400;
}

.lineage__head p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 54ch;
  text-wrap: pretty;
}

.lineage__line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.lineage__node {
  position: relative;
  padding: 34px 24px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dot on the timeline at each node's left edge. Filled-orange marker on the
   shared border-top creates a continuous line + dots read. */
.lineage__node::before {
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--orange);
  box-sizing: border-box;
}

.lineage__year {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.lineage__what {
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lineage__sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}

.chain {
  background: var(--paper);
}

.chain__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 52ch;
  text-wrap: pretty;
}

.chain__grid {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
}

.chain__node {
  padding: 36px 28px 36px 0;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.chain__node + .chain__node {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.chain__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.chain__num::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--orange);
}

.chain__role {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.chain__role em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.chain__copy {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  text-wrap: pretty;
}

.chain__copy strong {
  color: var(--ink);
  font-weight: 600;
}

/* Featband: section-wrapper image-and-text pattern used on about.html.
   Distinct from .editorial (the inline grid pattern on home, builders, etc.). */
.featband {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--line);
}

.featband--paper {
  background: var(--paper);
}

.featband--paper2 {
  background: var(--paper-2);
}

.featband__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}

.featband--flip .featband__inner {
  grid-template-columns: 1fr 1.05fr;
}

.featband--flip .featband__text {
  order: 2;
}

.featband--flip .featband__image {
  order: 1;
}

.featband__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.featband__text h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: pretty;
}

.featband__text h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.featband__text p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 52ch;
  text-wrap: pretty;
}

.featband__list {
  list-style: none;
  border-top: 1px solid var(--line-2);
  margin-top: 8px;
}

.featband__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: baseline;
}

.featband__list li::before {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: var(--orange);
  margin-top: 10px;
}

.featband__cta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.featband__image {
  position: relative;
}

.featband__frame {
  background: var(--placeholder-dark);
  border: 1px solid var(--line-2);
  overflow: hidden;
  aspect-ratio: 4/5;
}

.featband__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featband__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px;
  background: rgba(4, 24, 12, 0.92);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.featband__caption span:last-child {
  color: rgba(255, 255, 255, 0.5);
}

.expect {
  background: #fff;
}

.expect__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 96px;
  align-items: start;
}

.expect__sticky {
  position: sticky;
  top: 120px;
}

.expect__list {
  list-style: none;
  border-top: 1px solid var(--line-2);
}

.expect__row {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 32px;
  align-items: start;
}

.expect__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  padding-top: 6px;
}

.expect__what {
  font-family: "Fraunces", serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.expect__what em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.expect__why {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 54ch;
  text-wrap: pretty;
}

.soft-cta {
  background: var(--paper-2);
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.soft-cta__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}

.soft-cta h2 {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: pretty;
}

.soft-cta h2 em {
  font-style: italic;
  color: var(--green);
  font-weight: 400;
}

.soft-cta__sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-top: 20px;
  max-width: 48ch;
  text-wrap: pretty;
}

.soft-cta__panel {
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.soft-cta__panel-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.soft-cta__panel-h {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.soft-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  align-items: flex-start;
}

.soft-cta__buttons .btn {
  justify-content: space-between;
  width: 100%;
}

.soft-cta__note {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 8px;
}

.subhero__callout-val a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}

.subhero__callout-val a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.channels {
  background: var(--paper);
  padding: 104px 32px 96px;
  border-top: 1px solid var(--line);
}

.channels__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 52ch;
  text-wrap: pretty;
}

.channels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
}

.channel {
  padding: 36px 36px 36px 0;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.channel + .channel {
  padding-left: 36px;
  border-left: 1px solid var(--line-2);
}

.channel__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 14px;
}

.channel__num::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--orange);
}

.channel__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.channel__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.channel__best {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.channel__best span {
  color: var(--ink-3);
  margin-right: 8px;
}

.channel__value {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}

.channel__value a {
  color: var(--ink);
}

.channel__value a:hover {
  color: var(--green);
}

.channel__value.email {
  font-size: 22px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  word-break: break-all;
}

.channel__sub {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 36ch;
}

.channel__cta {
  margin-top: auto;
  padding-top: 14px;
}

.form-band {
  background: var(--paper-2);
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--line);
}

.form-band__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: start;
}

.form-band__intro {
  position: sticky;
  top: 120px;
}

.form-band__intro .lede {
  margin-top: 22px;
}

.form-band__notes {
  margin-top: 36px;
  border-top: 1px solid var(--line-2);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-band__note {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: start;
}

.form-band__note dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}

.form-band__note dd {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}

.form-band__note dd strong {
  font-weight: 600;
  color: var(--ink);
}

.form {
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 44px 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.form__head {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}

.form__head-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 10px;
}

.form__head-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.form__step {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group--full {
  grid-column: 1/-1;
}

.form-group label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.form-group label .req {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ink);
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  width: 100%;
  line-height: 1.4;
}

.form-group textarea {
  min-height: 130px;
  resize: vertical;
  font-family: "Inter", sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(12, 80, 31, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #a8a496;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231d2622' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.form__foot {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.form__submit {
  align-self: stretch;
}

/* Cloudflare Turnstile — labeled shell that sits in the form alongside other
   fields. Widget renders at data-size="flexible" so the iframe spans the
   shell's width and falls back to its 300px minimum on phones. */
.form-verify {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 14px 16px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
}

.form-verify__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.form-verify__widget {
  min-height: 65px;
}

.form-verify__widget iframe {
  display: block;
  max-width: 100%;
}

.form-verify__status {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 1.2em;
  transition: color 0.15s ease;
}

.form-verify.is-ready {
  border-left-color: var(--green);
}

.form-verify.is-ready .form-verify__status {
  color: var(--green);
  font-weight: 500;
}

/* All "needs attention" states share the same orange treatment — expired,
   timed-out, and error all mean the visitor must re-verify before they can
   submit, so visually they're one state. */
.form-verify.is-error,
.form-verify.is-timeout,
.form-verify.is-expired {
  border-left-color: var(--orange);
}

.form-verify.is-error .form-verify__status,
.form-verify.is-timeout .form-verify__status,
.form-verify.is-expired .form-verify__status {
  color: var(--orange);
}

@media (max-width: 540px) {
  .form-verify {
    padding: 12px 12px 10px;
  }
}

/* Contact form — inline success swap (AJAX submit, see js/contact.js) */
.contact-form-wrap {
  position: relative;
}

.form.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.contact-sent {
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  background: #fff;
  border: 1px solid var(--green);
  padding: 44px 44px 40px;
}

.contact-sent.is-shown {
  display: block;
}

.contact-sent.is-in {
  opacity: 1;
  transform: none;
}

.contact-sent__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--green);
  margin: 0 0 14px;
}

.contact-sent__copy {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.contact-sent__copy a {
  color: var(--green);
  font-weight: 600;
}

.contact-sent .btn {
  margin-top: 10px;
}

/* Contact form — plans/photos upload zone (see js/contact.js) */
.filedrop {
  position: relative;
  border: 1px dashed var(--line-2);
  background: var(--paper-2);
  padding: 26px 20px;
  text-align: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.filedrop.is-drag,
.filedrop:focus-within {
  border-color: var(--green);
  background: #fff;
}

.filedrop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.filedrop__prompt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
}

.filedrop__cta {
  font-size: 15px;
  color: var(--ink-2);
}

.filedrop__cta strong {
  color: var(--ink);
  font-weight: 600;
}

.filedrop__link {
  color: var(--green);
  text-decoration: underline;
}

.filedrop__hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.filedrop__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filedrop__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 10px 12px;
  font-size: 14px;
}

.filedrop__chip-name {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filedrop__chip-size {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.filedrop__chip-remove {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1;
  padding: 4px;
}

.filedrop__chip-remove:hover {
  color: var(--orange);
}

.filedrop__error {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--orange);
  line-height: 1.5;
}

.send {
  background: #fff;
}

.send__head {
  margin-bottom: 48px;
}

.send__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

.send__table {
  max-width: var(--section-max);
  margin: 0 auto;
  border-top: 1px solid var(--line-2);
}

.s-row {
  display: grid;
  grid-template-columns: 240px 1fr 200px;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.s-row.is-head {
  border-bottom: 1px solid var(--line-2);
  padding: 14px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.s-cat {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.s-detail {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 52ch;
}

.s-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
}

.s-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.s-tag.is-tier-2 {
  color: var(--wood);
}

.s-tag.is-tier-2::before {
  background: var(--wood);
}

.s-tag.is-tier-3 {
  color: var(--orange);
}

.s-tag.is-tier-3::before {
  background: var(--orange);
}

.showroom {
  background: var(--paper-2);
}

.showroom__head {
  margin-bottom: 48px;
}

.showroom__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

.showroom__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  align-items: stretch;
}

.showroom__map {
  position: relative;
  background: var(--placeholder-dark);
  min-height: 520px;
  border: 1px solid var(--line-2);
}

.showroom__map iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
  filter: saturate(0.85) contrast(0.95);
}

.showroom__panel {
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
}

.showroom__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}

.showroom__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.showroom__sub {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 28px;
}

.meta {
  border-top: 1px solid var(--line);
  margin: 0;
}

.meta > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.meta dd {
  overflow-wrap: anywhere;
}

.meta dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}

.meta dd {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}

.meta dd strong {
  font-weight: 600;
}

.meta dd .mono-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.showroom__cta {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn--lg {
  padding: 20px 36px;
  font-size: 16px;
}

.subhero__meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.subhero__meta strong {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 4px;
}

.subhero__meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-block;
  margin-right: 10px;
  vertical-align: 1px;
}

.needlist {
  border: 1px solid var(--line-2);
  background: #fff;
  padding: 32px;
}

.needlist__head {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.needlist__head::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.needlist__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.needlist__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.needlist ul {
  list-style: none;
}

.needlist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.needlist li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.needlist__check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}

.needlist__row strong {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 3px;
}

.needlist__row span {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.form-shell {
  background: var(--paper-2);
  padding: 96px 32px 120px;
  border-top: 1px solid var(--line);
}

.form-shell__inner {
  max-width: 980px;
  margin: 0 auto;
}

.form-shell__head {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}

.form-shell__head h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}

.form-shell__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.form-shell__progress {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.6;
}

.form-shell__progress strong {
  display: block;
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.form-shell__success {
  background: #fff;
  border: 1px solid var(--line);
  padding: 48px 40px;
  margin-top: 24px;
  max-width: 760px;
}
.form-shell__success h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}
.form-shell__success p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.form-shell__success p:last-child {
  margin-bottom: 0;
}

.fsec {
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}

.fsec__head {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.fsec__letter {
  width: 48px;
  height: 48px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 24px;
  color: var(--green);
  letter-spacing: -0.01em;
}

.fsec__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.fsec__hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.fsec__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fsec__body {
  padding: 32px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.span-2 {
  grid-column: span 2;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.req {
  color: var(--orange);
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.opt {
  color: var(--ink-3);
  font-weight: 400;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.selectall {
  color: var(--green);
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background 0.15s ease;
}

.selectall:hover {
  background: rgba(58, 109, 68, 0.08);
}

.selectall::before {
  content: "+ ";
}

.selectall.is-all::before {
  content: "\2212 ";
}

.field__hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

.input,
.select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 0 16px;
  height: 52px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  border-radius: 0;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.input:hover,
.select:hover {
  border-color: var(--ink-3);
  background: #fff;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216, 122, 58, 0.18);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 22px,
    calc(100% - 16px) 22px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.inline-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.check-grid label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-weight: 500;
  font-size: 14.5px;
  text-align: left;
  transition: background 0.15s ease;
  line-height: 1.4;
}

.check-grid label > span {
  flex: 1 1 auto;
  text-align: left;
}

.check-grid label:hover {
  background: var(--paper);
}

.check-grid input[type="checkbox"],
.check-grid input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  position: relative;
  border-radius: 0;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.check-grid input[type="radio"] {
  border-radius: 50%;
}

.check-grid input[type="checkbox"]:checked,
.check-grid input[type="radio"]:checked {
  background: var(--green);
  border-color: var(--green);
}

.check-grid input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check-grid input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 50%;
}

.check-grid label .ck-sub {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.5;
}

.ref-row {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 24px;
  margin-bottom: 14px;
  position: relative;
}

.ref-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.ref-row__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.ref-row__num strong {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin-right: 10px;
  letter-spacing: -0.01em;
}

.ref-row__hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ref-row__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ref-row__remove {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 8px;
}

.ref-row__remove:hover {
  color: var(--orange);
}

.ref-add {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: 4px;
}

.ref-add__btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  padding: 6px 0;
}

.ref-add__btn:hover {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ref-add__hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 24px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.toggle-row:hover {
  background: var(--paper-2);
}

.toggle-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--line-2);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.toggle-row input::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-row input:checked {
  background: var(--green);
}

.toggle-row input:checked::after {
  transform: translateX(16px);
}

.toggle-row label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  flex: 1;
  line-height: 1.4;
}

.toggle-row label .tg-sub {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.tg-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(58, 109, 68, 0.06);
  border-left: 2px solid var(--green);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--ink);
}

.tg-note::before {
  content: "\2197";
  color: var(--green);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 1px;
}

.auth-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.auth-row:hover {
  border-color: var(--ink-3);
  background: var(--paper-2);
}

.auth-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  position: relative;
}

.auth-row input:checked {
  background: var(--green);
  border-color: var(--green);
}

.auth-row input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth-row__body strong {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.35;
}

.auth-row__body p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}

.submit-row {
  margin-top: 32px;
  padding: 32px;
  background: var(--green-deep);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.submit-row__copy {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  max-width: 42ch;
}

.submit-row__copy em {
  font-style: italic;
  color: var(--cream);
}

.submit-row__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
}

.sig-block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
}

.sig-block__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}

.sig-block__label strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.sig-block__label .sig-or {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sig-pad {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-2);
  height: 180px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sig-pad:hover {
  border-color: var(--ink-3);
}

.sig-pad.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(216, 122, 58, 0.18);
}

.sig-pad canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sig-pad__baseline {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 38px;
  height: 1px;
  background: var(--line-2);
  pointer-events: none;
}

.sig-pad__x {
  position: absolute;
  left: 18px;
  bottom: 30px;
  font-family: "Fraunces", serif;
  font-size: 22px;
  color: var(--ink-3);
  pointer-events: none;
}

.sig-pad__hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
  text-align: center;
  line-height: 1.6;
}

.sig-pad.is-drawn .sig-pad__hint {
  display: none;
}

.sig-pad__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sig-pad__meta button {
  background: transparent;
  border: none;
  color: var(--green);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -8px;
}

.sig-pad__meta button:hover {
  background: rgba(58, 109, 68, 0.08);
}

.sig-pad__meta button[disabled] {
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 0.5;
}

.sig-pad__meta button[disabled]:hover {
  background: transparent;
}

.sig-pad__stamp {
  color: var(--ink-2);
}

.sig-pad__stamp strong {
  color: var(--green);
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

.input.is-invalid,
.select.is-invalid,
.field input.is-invalid,
.field textarea.is-invalid,
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216, 122, 58, 0.18);
}

.auth-row.is-invalid {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.check-grid.is-invalid {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* Trade-account terms modal */
.tmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tmodal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 31, 26, 0.6);
}

.tmodal__dialog {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.tmodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.tmodal__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}

.tmodal__close {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  padding: 4px 8px;
}

.tmodal__close:hover {
  color: var(--ink);
}

.tmodal__body {
  padding: 24px 28px 28px;
  overflow-y: auto;
}

.tmodal__body h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin: 22px 0 7px;
}

.tmodal__body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.tmodal__intro {
  margin-bottom: 4px;
}

.tmodal__accept {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink) !important;
}

body.tmodal-open {
  overflow: hidden;
}

/* Already-submitted notice at the top of the trade-account form */
.form-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.form-notice strong {
  color: var(--ink);
  font-weight: 600;
}

.sig-pad.is-invalid {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(216, 122, 58, 0.18);
}

.save-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 18px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.save-link a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
}

.save-link a:hover {
  text-decoration-color: var(--green);
}

.next {
  background: var(--paper);
}

.next__head {
  margin-bottom: 72px;
}

.next__head .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.next__head .eyebrow .num {
  color: var(--ink-3);
}

.next__head h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}

.next__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.next__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
}

.next__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.next__rail::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line-2) 0 6px, transparent 6px 12px);
}

.nstep {
  padding: 0 22px;
  position: relative;
}

.nstep:first-child {
  padding-left: 0;
}

.nstep:last-child {
  padding-right: 0;
}

.nstep__dot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 32px;
  color: var(--green);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.nstep__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--line);
  pointer-events: none;
}

.nstep:nth-child(odd) .nstep__dot {
  background: var(--green-deep);
  color: #fff;
  border-color: var(--green-deep);
}

.nstep__phase {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}

.nstep h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--ink);
}

.nstep p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 30ch;
}

.nstep__from {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.other {
  background: var(--paper-2);
  padding: 96px 32px;
  border-top: 1px solid var(--line);
}

.other__inner {
  max-width: var(--section-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.other__card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.other__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 14px;
}

.other__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.other__card h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.other__card h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.other__card p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  flex: 1;
}

.other__card .btn {
  align-self: flex-start;
  margin-top: 6px;
}

.ship-section.is-same .ship-section__fields {
  display: none;
}

.topstrip {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.topstrip__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topstrip__logo {
  height: 36px;
  width: auto;
  display: block;
}

.topstrip__lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  border-left: 1px solid var(--line);
  padding-left: 12px;
  gap: 3px;
}

.topstrip__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}

.topstrip__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}

.topstrip__escape {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.topstrip__escape::after {
  content: "→";
  font-size: 13px;
  color: var(--ink-3);
}

.topstrip__escape:hover {
  color: var(--green);
}

.topstrip__escape:hover::after {
  color: var(--green);
}

.opener {
  padding: 88px 32px 56px;
  border-bottom: 1px solid var(--line);
}

.opener__inner {
  max-width: 640px;
  margin: 0 auto;
}

.opener__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.opener__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--orange);
}

.opener__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}

.opener__title em {
  font-style: italic;
  color: var(--green);
  font-weight: 400;
}

.opener__lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}

.opener__lede + .opener__lede {
  margin-top: 16px;
}

.opener__sign {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opener__sign-name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}

.gate {
  padding: 48px 32px 24px;
  text-align: center;
}

.gate__inner {
  max-width: 560px;
  margin: 0 auto;
}

.gate__lead {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.gate__q {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 28px;
  line-height: 1.2;
}

.thumbs {
  display: inline-flex;
  gap: 18px;
}

.thumb {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  width: 240px;
}

.thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.thumb--up:hover {
  border-color: var(--green);
}

.thumb--down:hover {
  border-color: var(--orange);
}

.thumb svg {
  width: 48px;
  height: 48px;
  display: block;
  fill: var(--ink-3);
  transition: fill 0.15s ease;
}

.thumb--up:hover svg {
  fill: var(--green);
}

.thumb--down:hover svg {
  fill: var(--orange);
}

.thumb__label {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.thumb__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gate__hint {
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}

.branch {
  display: none;
}

.branch.is-active {
  display: block;
}

.happy {
  padding: 24px 32px 88px;
}

.happy__inner {
  max-width: 780px;
  margin: 0 auto;
}

.happy__lead {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
  text-align: center;
}

.happy__intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 auto 36px;
  text-align: center;
  text-wrap: pretty;
}

.platform-google {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 32px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 32px 32px 30px;
  margin-bottom: 18px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.platform-google:hover {
  border-color: var(--green);
  box-shadow: 0 6px 24px rgba(12, 80, 31, 0.06);
}

.platform-google__main {
  display: flex;
  flex-direction: column;
}

.platform-google__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 18px;
}

.platform-google__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.platform-google__glyph {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.platform-google__glyph svg {
  width: 26px;
  height: 26px;
  display: block;
}

.platform-google__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}

.platform-google__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.platform-google__pref {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 3px;
  padding: 5px 8px 4px;
  flex-shrink: 0;
}

.platform-google__copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
  margin-bottom: 22px;
}

.platform-google__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  padding: 14px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  align-self: flex-start;
}

.platform-google__cta:hover {
  background: var(--green-deep);
  transform: translateY(-1px);
}

.platform-google__cta-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

.platform-google__qr {
  border-left: 1px solid var(--line);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.platform-google__qr img {
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 4px;
}

.platform-google__qr-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
}

.platform-yelp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 26px;
  gap: 24px;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.platform-yelp:hover {
  border-color: var(--ink-2);
  transform: translateY(-1px);
}

.platform-yelp__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.platform-yelp__glyph {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-2);
  flex-shrink: 0;
}

.platform-yelp__glyph svg {
  width: 20px;
  height: 20px;
  display: block;
}

.platform-yelp__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}

.platform-yelp__sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
}

.platform-yelp__cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.platform-yelp__cta::after {
  content: "→";
  font-family: "JetBrains Mono", monospace;
}

.sad {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding: 48px 32px 64px;
}

.sad__inner {
  max-width: 780px;
  margin: 0 auto;
}

.sad__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.sad__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.15;
}

.sad__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.sad__copy {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 24px;
  text-wrap: pretty;
}

.sad__form {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 28px 28px 24px;
}

.sad__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.field--full {
  grid-column: 1 / -1;
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 13px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
}

.sad__form-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sad__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  padding: 13px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.sad__submit:hover {
  background: #000;
  transform: translateY(-1px);
}

.sad__submit-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

.sad__sent {
  display: none;
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 28px 28px 24px;
}

.is-sent .sad__form {
  display: none;
}

.is-sent .sad__sent {
  display: block;
}

.sad__sent-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--green);
  margin-bottom: 10px;
}

.sad__sent-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.sad__direct {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
}

.sad__direct a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--line-2);
}

.sad__direct a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.footer {
  padding: 32px 32px 40px;
  text-align: center;
}

.footer__line {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.8;
}

.footer__line a {
  color: rgba(255, 255, 255, 0.78);
}

.footer__line a:hover {
  color: #fff;
}

.footer__legal {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.32);
}

/* === Responsive @media queries === */

@media (max-width: 960px) {
  .quotes-featured {
    grid-template-columns: 1fr;
  }
  .quote-lead {
    padding: 36px 28px;
  }
  .quote-lead__text {
    font-size: 22px;
  }
}

@media (max-width: 960px) {
  .stats__grid,
  .stats__lead-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .stats__lead {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .editorial {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .why__inner,
  .howto__inner,
  .testimonials__head,
  .cta__inner,
  .leadtime__head {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .howwork__head {
    margin-bottom: 36px;
  }
  .howwork__foot {
    margin-top: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .editorial__visual,
  .editorial__visual--solo {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 16/10;
    order: -1;
  }
  .strip__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 300px);
  }
  .strip__cell--big {
    grid-row: auto;
  }
  .why__visual,
  .howto__visual {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 16/10;
  }
  .why__visual {
    aspect-ratio: auto;
  }
  .why__visual > img {
    position: relative;
    inset: auto;
    height: auto;
  }
  .lt-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .lt-row > *:nth-child(2) {
    display: none;
  }
  .topbar__hours {
    display: none;
  }
  .cta__side {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 32px;
    max-width: 560px;
  }
  .foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 960px) {
  .subhero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .subhero__callout {
    border-left: 0;
    border-top: 1px solid var(--line-2);
    padding-left: 0;
    padding-top: 32px;
  }
}

@media (max-width: 960px) {
  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .benefits__grid .benefit:nth-child(n) {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .benefits__head,
  .process__head,
  .cases__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .process__rail {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process__rail::before {
    display: none;
  }
  .process__rail .step {
    padding: 0;
  }
  .process__rail .step h3 {
    font-size: 20px;
  }
  .process__rail .step p {
    max-width: none;
  }
  .cases__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .precon__head,
  .compare__head,
  .faq__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .precon__row {
    grid-template-columns: 60px 1fr;
    gap: 24px;
  }
  .precon__row > .precon__body {
    grid-column: 2;
  }
  .compare__table {
    border: 0;
    background: transparent;
  }
  .compare__row:nth-child(n) {
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0 0 20px;
    border: 1px solid var(--line-2);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .compare__row.is-head {
    display: none;
  }
  .compare__cell {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 14px;
    align-items: baseline;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
  }
  .compare__cell:last-child {
    border-bottom: 0;
  }
  .compare__cell.is-dim {
    display: block;
    padding: 14px 18px;
    background: var(--ink);
    border-bottom: 0;
    color: #fff;
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.005em;
    text-transform: none;
  }
  .compare__cell:not(.is-dim)::before {
    content: attr(data-label);
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
  }
  .compare__cell.is-nwbs {
    background: #fcfaf6;
    border-left: 2px solid var(--orange);
    padding-left: 14px;
  }
  .compare__cell.is-nwbs::before {
    color: var(--green-deep);
  }
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .faq__row:nth-last-of-type(2) {
    border-bottom: 1px solid var(--line-2);
  }
  .howwork .step {
    grid-template-columns: 48px 1fr;
    gap: 18px;
  }
  .howwork .step__meta {
    grid-column: 2;
    justify-content: flex-start;
    text-align: left;
    margin-top: 8px;
  }
  .howwork .step__body p {
    max-width: none;
  }
  .featured__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: var(--section-pad-y) var(--section-pad-x);
    align-items: start;
  }
  .featured__specs {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .featured__supplied li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .featured__supplied .sup-cat {
    font-size: 10px;
  }
  .featured__supplied .sup-desc {
    font-size: 15px;
  }
  .dealstrip__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dealstrip__cta {
    justify-self: start;
  }
}

@media (max-width: 1080px) {
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .packages__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .packages__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 960px) {
  .catalog__head {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .catalog__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .brands__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .brand-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  .brands__foot {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}

@media (max-width: 960px) {
  .bgrid {
    grid-template-columns: 1fr;
  }
  .bytype__group-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .bytype__items {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 880px) {
  .subhero {
    padding: 56px 24px 64px;
  }
  .subhero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .subhero__inner > * {
    min-width: 0;
  }
  .subhero__callout {
    border-left: none;
    border-top: 1px solid var(--line-2);
    padding: 32px 0 0;
  }
  .subhero__callout-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .subhero__callout-val {
    overflow-wrap: anywhere;
  }
  .subhero__callout-num {
    font-size: 72px;
  }
}

@media (max-width: 960px) {
  .pj-section__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pj-feature {
    grid-template-columns: 1fr;
  }
  .pj-feature__visual {
    min-height: 340px;
  }
  .pj-feature__body {
    padding: 36px 28px 32px;
  }
  .pj-grid,
  .pj-grid--two {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pj-card__visual {
    height: 220px;
  }
}

@media (max-width: 960px) {
  .mapsplit__inner,
  .topten__head,
  .regions__head,
  .full__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .regions__grid {
    grid-template-columns: 1fr;
  }
  .citytable thead th:last-child {
    display: none;
  }
  .cityrow td:last-child {
    display: none;
  }
  .citytable thead .th-num {
    width: 90px;
  }
  .citytable thead .th-city {
    width: auto;
  }
  .cityrow td {
    padding: 10px 12px 10px 0;
  }
  .cityrow__name {
    font-size: 14.5px;
  }
}

@media (max-width: 880px) {
  .ways {
    padding: 80px 24px;
  }
  .ways__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
  .ways__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .way {
    padding: 36px 28px;
  }
  .way__title {
    font-size: 28px;
  }
  .taxnote {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 24px;
  }
}

@media (max-width: 960px) {
  .scope__inner {
    gap: 48px;
  }
  .scope__head {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .scope__flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding-top: 28px;
  }
  .flowstep:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .scope__flow {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 1080px) {
  .logistics__grid {
    grid-template-columns: 1fr;
  }
  .logistics__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 1080px) {
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .accounts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crosslink__grid {
    grid-template-columns: 1fr;
  }
  .crosslink__lead {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .presale__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .presale__visual {
    position: relative;
    top: auto;
    height: 300px;
  }
  .catalog__head,
  .accounts__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cta__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cta__side {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 32px;
    max-width: 560px;
  }
  .foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 760px) {
  .catalog__grid {
    grid-template-columns: 1fr;
  }
  .accounts__grid {
    grid-template-columns: 1fr;
  }
  .topbar__hours {
    display: none;
  }
}

@media (max-width: 960px) {
  .story {
    padding: var(--section-pad-y) var(--section-pad-x) 56px;
  }
  .story__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .story__sticky {
    position: static;
  }
  .story__prose {
    font-size: 16px;
  }
}

@media (max-width: 880px) {
  .lineage__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lineage__line {
    grid-template-columns: 1fr;
    gap: 28px;
    position: relative;
    padding-left: 26px;
  }
  .lineage__line::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--line-2);
  }
  .lineage__node {
    border-top: 0;
    padding: 0;
  }
  .lineage__node::before {
    left: -26px;
    top: 0;
  }
}

@media (max-width: 1080px) {
  .chain__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chain__node {
    padding: 32px 20px;
    border-left: 0;
    border-right: 1px solid var(--line);
  }
  .chain__node:nth-child(2n) {
    border-right: 0;
  }
  .chain__node + .chain__node {
    padding-left: 20px;
    border-left: 0;
  }
}

@media (max-width: 880px) {
  .chain__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .chain__grid {
    grid-template-columns: 1fr;
  }
  .chain__node {
    border-right: 0;
    padding: 24px 0;
  }
  .chain__node + .chain__node {
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 960px) {
  .stats__lead {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 1080px) {
  .featband {
    padding: var(--section-pad-y) var(--section-pad-x);
  }
  .featband__inner,
  .featband--flip .featband__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .featband__image,
  .featband--flip .featband__image {
    order: -1;
  }
  .featband__text,
  .featband--flip .featband__text {
    order: 0;
  }
}

@media (max-width: 960px) {
  .expect__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .expect__sticky {
    position: static;
  }
}

@media (max-width: 880px) {
  .soft-cta__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 960px) {
  .channels__grid {
    grid-template-columns: 1fr;
  }
  .channel + .channel {
    border-left: 0;
    padding-left: 0;
  }
  .channel {
    padding: 32px 0;
  }
  .channels__head,
  .send__head,
  .showroom__head,
  .stats__lead {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .form-band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .form-band__intro {
    position: static;
    min-width: 0;
  }
  .form-band__note {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form {
    padding: 28px 24px;
  }
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .s-row {
    grid-template-columns: 1fr 140px;
    gap: 12px;
  }
  .s-row > .s-detail {
    display: none;
  }
  .s-row.is-head > *:not(:first-child):not(:last-child) {
    display: none;
  }
  .showroom__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .showroom__panel {
    padding: 28px 24px;
  }
  .showroom__map {
    min-height: 340px;
    min-width: 0;
  }
  .showroom__map iframe {
    min-height: 340px;
    width: 100%;
    max-width: 100%;
  }
  .topbar__hours {
    display: none;
  }
  .foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 760px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .grid-2 > .span-2,
  .grid-2 > .field--full {
    grid-column: auto;
  }
  .check-grid {
    grid-template-columns: 1fr;
  }
  .form-shell__head {
    grid-template-columns: 1fr;
  }
  .form-shell__progress {
    text-align: left;
  }
  .submit-row {
    grid-template-columns: 1fr;
  }
  .fsec__head {
    grid-template-columns: 48px 1fr auto;
    gap: 12px 16px;
    padding: 20px 20px 18px;
  }
  .fsec__body {
    padding: 22px 20px;
  }
  .ref-row {
    padding: 18px 16px;
  }
  .form-shell {
    padding: 64px 18px 80px;
  }
}

@media (max-width: 960px) {
  .next__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .next__rail {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .next__rail::before {
    display: none;
  }
  .nstep {
    padding: 0;
  }
  .nstep p {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .other__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topstrip {
    padding: 14px 20px;
  }
  .topstrip__name {
    font-size: 14px;
  }
  .topstrip__tag {
    display: none;
  }
}

@media (max-width: 640px) {
  .opener {
    padding: 56px 24px 40px;
  }
}

@media (max-width: 640px) {
  .gate {
    padding: 32px 24px 16px;
  }
  .gate__q {
    font-size: 22px;
  }
  .thumbs {
    gap: 12px;
  }
  .thumb {
    padding: 20px 16px 16px;
    width: auto;
    flex: 1;
  }
  .thumb svg {
    width: 40px;
    height: 40px;
  }
  .thumb__label {
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  .platform-google {
    grid-template-columns: 1fr;
    padding: 26px 22px 22px;
    gap: 24px;
  }
  .platform-google__qr {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 24px;
  }
  .platform-google__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .platform-google__name {
    font-size: 22px;
  }
  .platform-yelp {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
  }
  .happy {
    padding: 16px 24px 64px;
  }
}

@media (max-width: 640px) {
  .sad {
    padding: 40px 24px 56px;
  }
  .sad__form {
    padding: 22px 22px 20px;
  }
  .sad__form-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
}

/* === Auto section numbering ===
   Every top-level <section> increments a counter; eyebrows display it as a
   zero-padded decimal ("01", "02", ...). Reorder a section in HTML and the
   numbers follow.
*/
/* Counter increments on eyebrow elements directly. Sections without an eyebrow
   don't count toward the visible numbering, so the displayed sequence stays
   contiguous (02, 03, 04...) even when the page has un-labeled sections in
   between. Hero/subhero increment silently (no display) so the first content
   section starts at 02. The closing CTA is excluded — its eyebrow is unnumbered. */
body {
  counter-reset: nwbs-section;
}
.subhero__eyebrow,
.hero__eyebrow,
.stats__eyebrow,
.eyebrow,
.crosslink__eyebrow,
.featured__eyebrow,
.dealstrip__tag {
  counter-increment: nwbs-section;
}

/* Hero/subhero: counter still increments (so the first content section after
   the hero starts at "02"), but the hero's own number is intentionally hidden. */

/* Stats band: number prefix on the eyebrow, em-dash separator for consistency */
.stats__eyebrow::before {
  content: counter(nwbs-section, decimal-leading-zero) " — ";
  opacity: 0.7;
  margin-right: 4px;
}

/* Standard .eyebrow .num — empty span gets filled by counter + " — " separator */
.eyebrow .num:empty::before,
.featured__eyebrow .num:empty::before {
  content: counter(nwbs-section, decimal-leading-zero) " — ";
}

/* Crosslink eyebrows show the counter; closing CTA does NOT (matches hero treatment). */
.crosslink__eyebrow::before {
  content: counter(nwbs-section, decimal-leading-zero) " — ";
  opacity: 0.7;
  font-weight: 600;
}

/* === Page-scoped overrides — section background alternation =================
   Rule: no two adjacent sections share a background.
   Tokens: paper (warm cream), paper-2 (warm gray), white (#fff),
   green-deep (dark stat band), green-deeper (deepest dark for double-dark
   transitions), image (cta hero).
*/

/* Services: scope/catalog/presale white-run was the user's specific complaint.
   Break .catalog with paper-2 so scope(white) → catalog(paper-2) → presale(white). */
.page-services .catalog {
  background: var(--paper-2);
}
.page-services .crosslink {
  background: var(--paper-2);
}

/* Home: brands head centers (single column) instead of the 2-col products layout. */
.page-index .brands__head {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.page-index .brands__head .eyebrow {
  justify-content: center;
}
.page-index .brands__head .h2 {
  max-width: 22ch;
}

/* Home: .why has no bg so it falls back to body (--paper), same as .brands
   right after it — two cream sections in a row. Flip .why to paper-2 so the
   run reads featured(dark) → why(paper-2) → brands(paper) → howwork(#fff). */
.page-index .why {
  background: var(--paper-2);
}

/* Builders: .benefits used to inherit the dark green stats-band style; that
   created two dark sections in a row. Flip to paper-2 so it breaks cleanly
   from .stats above and matches the site's alternation. Text colors flip
   too: white → ink. */
.page-builders .benefits {
  background: var(--paper-2);
  color: var(--ink);
}
.page-builders .benefits__head h2 {
  color: var(--ink);
}
.page-builders .benefits__head h2 em {
  color: var(--green);
}
.page-builders .benefit {
  border-color: var(--line-2);
}
@media (min-width: 961px) {
  .page-builders .benefit:nth-child(n + 1):nth-child(-n + 3) {
    border-top: 0;
    padding-top: 0;
  }
  .page-builders .benefit:nth-child(n + 4) {
    border-bottom: 0;
  }
}
.page-builders .benefit h3 {
  color: var(--ink);
}
.page-builders .benefit p {
  color: var(--ink-2);
}
.page-builders .benefit__num strong {
  color: var(--ink);
}
.page-builders .benefits__cta-text {
  color: var(--ink);
}
.page-builders .benefits__cta-text em {
  color: var(--green);
}
/* The eyebrow inside benefits uses .stats__eyebrow class (designed for dark bg
   with orange text). Override so it reads on light bg too. */
.page-builders .benefits .stats__eyebrow {
  color: var(--orange);
}
/* Horizontal dividers — between section head and cards, and between cards and CTA. */
.page-builders .benefits__head {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 64px;
}
.page-builders .benefits__cta {
  padding-top: 48px;
  margin-top: 48px;
  border-top: 1px solid var(--line-2);
}

/* About: long paper run (subhero → story → lineage → chain) needs alternation.
   The two .editorial sections already carry --paper-2 / --paper modifiers in HTML,
   so we leave those alone. */
.page-about .story {
  background: var(--paper-2);
}
.page-about .lineage {
  background: var(--paper);
}
.page-about .chain {
  background: var(--paper-2);
}
.page-about .expect {
  background: #fff;
}
.page-about .soft-cta {
  background: var(--paper);
}

/* Contact: subhero (paper) → channels was also paper. */
.page-contact .channels {
  background: #fff;
}

/* Delivery: subhero (paper) → ways was also paper. paper-2 keeps the break
   from the subhero while letting the white .way / .taxnote cards read. */
.page-delivery .ways {
  background: var(--paper-2);
}

/* Projects: section sequence is subhero / stats / Featured / Multifamily /
   partners (paper-2) / Custom homes / cta. Alternation around partners. */
.page-projects .pj-section {
  background: var(--paper);
}
.page-projects section.pj-section:nth-of-type(4) {
  background: #fff;
}

/* Delivery: anchor targets within the page need offset for the sticky header
   (~80px) plus breathing room so the section eyebrow stays visible above
   the scrolled-to element. */
.page-delivery #zip,
.page-delivery #delivery,
.page-delivery #pickup,
.page-delivery #cities {
  scroll-margin-top: 100px;
}

/* === Legal/policy prose pages (privacy, terms) === */
.legal {
  background: var(--paper);
  padding: 80px 32px 120px;
  border-top: 1px solid var(--line);
}
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 48px 0 16px;
}
.legal h2:first-child {
  margin-top: 0;
}
.legal p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 64ch;
}
.legal p strong {
  color: var(--ink);
  font-weight: 600;
}
.legal ul {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0 0 24px 0;
  padding-left: 22px;
  max-width: 64ch;
}
.legal ul li {
  margin-bottom: 6px;
}
.legal a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal a:hover {
  color: var(--green-deep);
}

/* === Projects: Repeat partners section (restored from v2) === */
.partners {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 32px;
}
.partners__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: center;
}
.partners__lead {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.partners__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 14px;
}
.partners__eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.partners__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.partners__title em {
  font-style: italic;
  color: var(--green-deep);
}
.partners__note {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}
.partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 32px;
  row-gap: 18px;
  border-left: 1px solid var(--line-2);
  padding-left: 80px;
}
.partners__name {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.partners__name:not(:last-child)::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: var(--line-2);
  border-radius: 50%;
}
@media (max-width: 960px) {
  .partners__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .partners__list {
    padding-left: 0;
    border-left: 0;
  }
}

/* Reset wrapping dl/dt/dd inside grid components so the grid flows through */
.bgrid dl {
  display: contents;
}

/* "Don't see your brand?" / custom-spec card variant inside the brand grid */
.bgrid__card--callout {
  background: var(--paper);
  justify-content: center;
}
.bgrid__card--callout .callout__label {
  margin-bottom: 14px;
}
.bgrid__card--callout .callout__title {
  margin-bottom: 12px;
}
.bgrid__name--mt {
  margin-top: 4px;
}

.callout__cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  padding-bottom: 3px;
  align-self: flex-start;
  margin-top: auto;
}
.callout__cta:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ===== Product subpage shared sections (padding/border via Section frame) ===== */
.psec--paper-2 {
  background: var(--paper-2);
}
.psec--rail {
  background: var(--paper);
  padding: 80px 32px;
  border-bottom: 1px solid var(--line);
}

.psec__head {
  gap: 60px;
}
@media (max-width: 960px) {
  .psec--rail {
    padding: 56px 24px;
  }
  .bgrid__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .bgrid__row dt {
    margin-bottom: 2px;
  }
}
.psec__head p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}

/* Two-up paper callout cards (used on product subpages) */
.callouts {
  max-width: 1240px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.callout {
  background: var(--paper);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.callout__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.callout__title {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.callout__copy {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Inter-product rail (Other categories) */
.prodrail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.prodrail__head {
  grid-template-columns: auto 1fr;
  gap: 60px;
  margin-bottom: 36px;
}
.prodrail__head-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prodrail__head-title {
  font-family: "Fraunces", serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 64ch;
  margin: 0;
  justify-self: start;
}
.prodrail__head-title em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 400;
}

.prodrail__cell {
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 148px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.prodrail__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.prodrail__name {
  font-family: "Fraunces", serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: auto;
}
.prodrail__sub {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}

a.prodrail__cell:hover {
  background: var(--green-deep);
  color: #fff;
}
a.prodrail__cell:hover .prodrail__num {
  color: var(--orange);
}
a.prodrail__cell:hover .prodrail__sub {
  color: rgba(255, 255, 255, 0.7);
}

.prodrail__cell--here {
  background: var(--ink);
  color: #fff;
  cursor: default;
}
.prodrail__cell--here .prodrail__num {
  color: var(--orange);
}
.prodrail__cell--here .prodrail__sub {
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 960px) {
  .prodrail {
    grid-template-columns: 1fr;
  }
  .prodrail__head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
    align-items: start;
  }
  .prodrail__head-title {
    font-size: 22px;
    max-width: none;
  }
  .prodrail__cell {
    min-height: 0;
    padding: 18px 20px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .prodrail__num {
    flex: 0 0 auto;
  }
  .prodrail__name {
    font-size: 17px;
    margin-top: 0;
    flex: 0 0 auto;
  }
  .prodrail__sub {
    flex: 1 1 100%;
    margin-top: 0;
    font-size: 12px;
  }
}

/* Eyebrow color variant */
.eyebrow--orange {
  color: var(--orange);
}

/* Inline-style helpers used in a few one-offs */
.link--green {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
}
.cta-mono__arrow {
  font-size: 13px;
}

/* Trade-account form helpers */
.form__heading {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.form__subblock {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.form__subblock > label {
  margin-bottom: 6px;
  display: block;
}
.check-grid--single {
  grid-template-columns: 1fr;
  margin-top: 4px;
}
.check-grid--gap-sm {
  margin-top: 8px;
}
.toggle-row--spaced {
  margin-top: 32px;
  margin-bottom: 0;
}
.field--flush {
  margin: 0;
}
.field--mb-lg {
  margin-bottom: 28px;
}
.field--with-toggle {
  margin-top: 24px;
}
.grid-2--mt {
  margin-top: 32px;
}
.grid-2--mb {
  margin-bottom: 28px;
}
.input--signature {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.input--bank-acct {
  max-width: 160px;
}
.req--spaced {
  margin-left: 8px;
}
.sig-pad__hint-meta {
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.18em;
}
.is-hidden {
  display: none;
}
.fsec__lede {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 60ch;
}

/* ===== Deals page (Builder's Bargain Center) ===== */

/* Filter strip */
.filterstrip {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 81px;
  z-index: 40;
}
.filterstrip__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.filterstrip__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.page-deals .filter-chips .chip {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: "Inter", sans-serif;
}
.page-deals .filter-chips .chip:hover {
  border-color: var(--line-2);
  color: var(--ink);
}
.page-deals .filter-chips .chip.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.page-deals .filter-chips .chip__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.page-deals .filter-chips .chip.is-active .chip__count {
  color: rgba(255, 255, 255, 0.7);
}

/* Deals grid + head + legend */
.deals {
  padding: 80px 32px 96px;
  background: var(--paper);
}
.deals__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.deals__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
}
.deals__head h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}
.deals__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.deals__legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.deals__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.deals__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
}
.deals__legend-dot--closeout {
  background: #b54b3d;
}
.deals__legend-dot--overstock {
  background: var(--orange);
}
.deals__legend-dot--lastcall {
  background: #7a1f17;
}
.deals__legend-dot--orphan {
  background: var(--wood);
}
.deals__legend-dot--oneoff {
  background: var(--green);
}
.deals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.deals__grid--top {
  margin-top: 32px;
}

/* Deal card */
.dcard {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
  position: relative;
}
.dcard:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
}
.dcard.is-sold {
  opacity: 0.55;
}
.dcard.is-reserved .dcard__claim {
  display: none;
}
.dcard.is-hidden {
  display: none;
}
.dcard__head {
  padding: 18px 22px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.dcard__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 2px;
  color: #fff;
}
.dcard__tag--closeout {
  background: #b54b3d;
}
.dcard__tag--overstock {
  background: var(--orange);
}
.dcard__tag--lastcall {
  background: #7a1f17;
}
.dcard__tag--orphan {
  background: var(--wood);
}
.dcard__tag--oneoff {
  background: var(--green);
}
.dcard__cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcard__body {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.dcard__brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcard__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.dcard__spec {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  padding-bottom: 6px;
}
.dcard__spec-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}
.dcard__spec-row:first-of-type {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 6px;
}
.dcard__spec-row dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcard__spec-row dd {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.dcard__why {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  font-style: italic;
  padding-top: 6px;
}
.dcard__priceline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.dcard__save {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.dcard__save-pct {
  color: var(--orange);
  font-weight: 400;
  font-style: italic;
}
.dcard__save-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcard__foot {
  padding: 14px 22px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcard__foot strong {
  color: var(--ink);
  font-weight: 500;
}
.dcard__claim {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  font-family: "Inter", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dcard__claim:hover {
  color: var(--orange);
}
.dcard__claim--inactive {
  color: var(--ink-3);
  cursor: default;
}
.dcard__claim-arrow {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 13px;
}
.dcard__status {
  position: absolute;
  top: 18px;
  right: 0;
  padding: 6px 14px 6px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  z-index: 2;
}
.dcard__status--reserved {
  background: var(--wood);
}
.dcard__status--sold {
  background: #7a1f17;
}

/* Media area for image-equipped deals. Omitted entirely when images=[]. */
.dcard__media {
  position: relative;
  background: var(--paper-2);
}
.dcard__hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--paper-2);
}
.dcard__thumbs {
  display: flex;
  gap: 4px;
  padding: 6px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.dcard__thumb {
  flex: 0 0 56px;
  height: 42px;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}
.dcard__thumb:hover {
  border-color: var(--line-2);
}
.dcard__thumb.is-active {
  border-color: var(--green);
}
.dcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Highlight pulse for ?deal=<id> deep-link from admin Preview. */
.dcard.is-highlighted {
  animation: dcardHighlight 2s ease-out;
  box-shadow: 0 0 0 3px var(--orange);
}
@keyframes dcardHighlight {
  0% {
    box-shadow: 0 0 0 3px var(--orange);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Empty state */
.deals__empty {
  background: #fff;
  border: 1px solid var(--line);
  padding: 80px 48px;
  text-align: center;
  max-width: 680px;
  margin: 32px auto 0;
}
.deals__empty-num {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 84px;
  line-height: 0.95;
  color: var(--orange);
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.deals__empty h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
}
.deals__empty p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto 28px;
}
/* "How it works" three-column band — scoped under .page-deals to avoid
   colliding with the more-prevalent .howwork / .howto blocks elsewhere. */
.page-deals .how {
  padding: 120px 32px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.page-deals .how__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.page-deals .how__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
}
.page-deals .how__head h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}
.page-deals .how__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.page-deals .how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.page-deals .how__col {
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-deals .how__col-num {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  color: var(--orange);
  line-height: 0.9;
  margin-bottom: 8px;
}
.page-deals .how__col h3 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-deals .how__col p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.page-deals .how__col ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-deals .how__col li {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}
.page-deals .how__col li:first-child {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}

/* Deals responsive */
@media (max-width: 1080px) {
  .deals__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 960px) {
  .filterstrip {
    position: static;
  }
  .page-deals .how__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-deals .how__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .deals__grid {
    grid-template-columns: 1fr;
  }
}
/* ===== /Deals page ===== */

/* Projects page helpers */
.pj-section--no-border {
  border-top: 0;
}
.pj-section__count--full {
  grid-column: 1/-1;
  margin-top: 0;
}

/* Contact page */
.req-mark {
  color: var(--orange);
}

/* Touch targets: enforce ≥44px on mobile for the link/chip clusters
   that previously rendered too small for thumb-tap accuracy. */
@media (max-width: 720px) {
  .nav__panel a,
  .topbar a,
  .filter-chips .chip,
  .foot li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot li {
    margin-bottom: 4px;
  }
  .foot li a {
    padding: 6px 0;
    width: 100%;
  }
}

/* iOS auto-zoom mitigation: form fields under 16px trigger Safari to
   zoom in on focus and never zoom back. Bump to 16px on small screens. */
@media (max-width: 720px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Honeypot wrapper — bots fill it, humans never see */
.hidden {
  display: none !important;
}

/* Lightbox overlay — fixed, full-viewport, dimmed backdrop. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(255, 255, 255, 0.24);
}
.lightbox__close {
  top: 16px;
  right: 16px;
}
.lightbox__prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 0.1em;
}
@media (max-width: 720px) {
  .lightbox {
    padding: 8px;
  }
  .lightbox__close {
    top: 8px;
    right: 8px;
  }
  .lightbox__prev {
    left: 8px;
  }
  .lightbox__next {
    right: 8px;
  }
}

/* Back-to-admin pill — only visible when /deals is opened from /admin Preview. */
.back-to-admin-pill {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9000;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--green-deep);
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.back-to-admin-pill:hover {
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
@media (max-width: 720px) {
  .back-to-admin-pill {
    bottom: max(16px, env(safe-area-inset-bottom));
    font-size: 13px;
  }
}