/* Generated by the Local Site Kit (sitekit/onepage.py). Edit the declaration, not this file. Source: brand/components.css */
/* ============================================================
   C.B. PAINTING — brand/components.css
   SHAPES only. Values live in brand/tokens.css.

   Rules for working in this file:
     1. Never write a hex. Every color resolves to a --ui-* or --cta-* token.
     2. Never write a context-scoped color rule (`.on-dark .thing { color: … }`).
        If a component needs different color on dark, that is a TOKEN job.
        The one exception is a component that IS a surface (.band).
     3. New pattern? Add it here and document it in PATTERNS.md. A one-off
        style in a page is how five buttons become seventeen.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ---------- base ---------- */
body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }

/* ---------- headings ----------
   Margins are in `em`, so they scale WITH the heading instead of being a fixed
   gap that looks tight under an h1 and cavernous under an h3. Space above a
   heading is always larger than the space below it, so a heading belongs to the
   text it introduces rather than floating between two blocks. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ui-heading);
  text-wrap: balance;
}
h1 {
  font-weight: var(--display-weight-h1);
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 .38em; max-width: 17ch;
}
h2 {
  font-weight: var(--display-weight-h2);
  font-size: var(--text-2xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 .5em; max-width: 22ch;
}
h3 {
  font-weight: var(--display-weight-h3);
  font-size: var(--text-xl); line-height: var(--leading-snug);
  letter-spacing: -.008em;
  margin: 1.6em 0 .45em; max-width: 30ch;
}
h4 {
  font-weight: var(--display-weight-h3);
  font-size: var(--text-lg); line-height: var(--leading-snug);
  margin: 1.5em 0 .4em;
}
/* A heading that opens a block has nothing above it to separate from. */
h3:first-child, h4:first-child, .card h3, .step h3, .fact b { margin-top: 0; }

p  { margin: 0 0 1.1em; max-width: var(--measure); line-height: var(--leading-body); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ui-heading); font-weight: 700; }

a { color: var(--ui-link); text-underline-offset: .18em; }
a:hover { color: var(--ui-link-hover); }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- layout ---------- */
/* ---------- wrappers ----------
   Every band shares ONE left edge. `.wrap-sm` used to be a narrower, CENTRED column,
   which meant a reading section sat indented from the cards above it and the page had
   two competing left margins. It is now the same wrapper with a measure constraint on
   its children, so text stays readable and the left edge never moves.
   Use `.center` on a child when a block genuinely should be centered. */
.wrap    { width: min(1140px, 100% - var(--space-7)); margin-inline: auto; }
.wrap-sm { width: min(1140px, 100% - var(--space-7)); margin-inline: auto; }
.wrap-sm > *      { max-width: 68ch; }
.wrap-sm > .center,
.wrap   > .center { max-width: 66ch; margin-inline: auto; }
.wrap-text { max-width: 68ch; }
.wrap-text.center { margin-inline: auto; }
.band    { padding-block: var(--section-y); background: var(--ui-bg); color: var(--ui-text); }
.band-lg { padding-block: var(--section-y-lg); }
.stack > * + * { margin-top: var(--space-4); }
.center  { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.lede {
  font-size: var(--text-lg); line-height: 1.5;
  color: var(--ui-text); max-width: var(--measure-lede);
  margin-bottom: 1.2em;
}
.muted { color: var(--ui-text-muted); }
.small { font-size: var(--text-sm); }

.cols   { display: grid; gap: var(--space-7); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.duo    { display: grid; gap: clamp(var(--space-7), 6vw, var(--space-9)); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--flip > :first-child { order: 2; }
}

/* ---------- eyebrow ----------
   Small caps label above a heading. Uses --ui-accent, which is the TEXT-SAFE
   copper on cream and sage on dark. Never --ui-accent-deco: that one is 3.65
   on cream and fails AA at this size. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ui-accent);
  margin: 0 0 var(--space-4);
}

/* ---------- buttons ----------
   One base, three levels. Level is a statement about the PAGE (see tokens.css).
   .btn-1 primary · .btn-2 secondary · .btn-3 tertiary (link-shaped) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-7);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  letter-spacing: .01em;
  line-height: 1.2; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease),
              transform .15s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

.btn-1 { background: var(--cta1-bg); color: var(--cta1-text); border-color: var(--cta1-border); }
.btn-1:hover { background: var(--cta1-bg-hover); color: var(--cta1-text); }

.btn-2 { background: var(--cta2-bg); color: var(--cta2-text); border-color: var(--cta2-border); }
.btn-2:hover { background: var(--cta2-bg-hover); color: var(--cta2-text); }

/* Tertiary still has to be tappable. It LOOKS like a link, but it keeps the
   44px target: a text link in a card is hit with a thumb like anything else. */
.btn-3 {
  background: none; border: none; border-radius: 0;
  padding: var(--space-2) 0; min-height: var(--touch-min);
  justify-content: flex-start;
  color: var(--cta3-text); text-decoration: underline; text-decoration-thickness: 2px;
}
.btn-3:hover { color: var(--cta3-text-hover); transform: none; }

.btn-sm { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); min-height: var(--touch-min); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- card ---------- */
/* Cards are flex columns so the closing link can be pinned to the bottom with
   margin-top:auto. Without it the link sits directly under the copy, so three
   cards whose text runs to different lengths end up with three links at three
   different heights, and the row reads ragged even though the cards align. */
.card {
  display: flex; flex-direction: column;
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card > :last-child { margin-bottom: 0; }
.card .ph { margin-bottom: var(--space-5); }
.card h3 { margin-top: 0; margin-bottom: .4em; }
.card p { margin-bottom: var(--space-5); }
.card > .btn-3 { margin-top: auto; align-self: flex-start; padding-top: var(--space-2); }
.card-lift { box-shadow: var(--shadow-card); border-color: transparent; }

/* ---------- fact strip ----------
   Numbers, not adjectives. Used for the 1968 proof band. */
.facts { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.fact b {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight-h3);
  font-size: var(--text-2xl); color: var(--ui-heading); line-height: 1; max-width: none;
  letter-spacing: var(--tracking-display);
}
.fact span { display: block; margin-top: var(--space-3); color: var(--ui-text-muted); font-size: var(--text-sm); max-width: 28ch; line-height: 1.5; }
.facts { gap: var(--space-7); }

/* ---------- answer pairs ----------
   Worry on the left, what we do about it on the right. Beats a bullet list of
   fears, because a fear with no answer beside it is just a fear. */
.pairs { display: grid; gap: 0; }
.pair {
  display: grid; gap: var(--space-3) var(--space-7);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--ui-rule);
}
.pair:last-child { border-bottom: 1px solid var(--ui-rule); }
.pair dt { font-family: var(--font-display); font-weight: var(--display-weight-h3);
            font-size: var(--text-xl); line-height: var(--leading-snug);
            color: var(--ui-heading); }
.pair dd { margin: 0; color: var(--ui-text); }
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1.4fr; } }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-7); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: grid; place-items: center;
  width: var(--marker-size); height: var(--marker-size);
  margin-bottom: var(--space-5);
  border-radius: var(--marker-radius);
  background: var(--marker-bg);
  border: var(--marker-border-w) solid var(--marker-border);
  color: var(--marker-text);
  font-family: var(--marker-font);
  font-weight: var(--marker-weight);
  font-size: var(--marker-font-size);
  line-height: 1;
}

/* ---------- checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.checks li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-4); line-height: var(--leading-body); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .65rem; height: .34rem;
  border-left: 2px solid var(--ui-accent); border-bottom: 2px solid var(--ui-accent);
  transform: rotate(-45deg);
}

/* ---------- media placeholder ----------
   Deliberately ugly. A placeholder that looks finished ships by accident. */
.ph {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 4 / 3; padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--ui-rule-strong);
  background: var(--ui-surface-alt);
  color: var(--ui-text-muted);
  font-size: var(--text-sm); font-weight: 700;
}

/* ---------- form ---------- */
.field { margin-bottom: var(--space-5); }
.field > label { display: block; font-weight: 700; font-size: var(--text-sm);
                 margin-bottom: var(--space-2); color: var(--ui-heading); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--text-base); color: var(--walnut-800);
  background: var(--white);
  border: 1px solid var(--ui-rule-strong); border-radius: var(--radius-sm);
}
.field input::placeholder, .field textarea::placeholder { color: var(--walnut-600); }
.field textarea { min-height: 7rem; resize: vertical; }
.field-hint { font-size: var(--text-sm); color: var(--ui-text-muted); margin: var(--space-2) 0 0; }
.field-optional { font-weight: 400; color: var(--ui-text-muted); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--ui-rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
  padding: var(--space-5) 0; min-height: var(--touch-min);
  font-family: var(--font-display); font-weight: var(--display-weight-h3); font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ui-heading); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .7rem; height: .7rem;
  border-right: 2.5px solid var(--ui-accent); border-bottom: 2.5px solid var(--ui-accent);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > p { padding-bottom: var(--space-5); margin-bottom: 0; }

/* ---------- breadcrumbs ---------- */
.crumbs { padding-block: var(--space-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--text-base); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--ui-text-muted); }
.crumbs [aria-current] { color: var(--ui-text-muted); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ui-heading); }
.logo svg { width: 60px; height: 60px; flex: none; }
.logo span { white-space: nowrap; }
.logo b { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: var(--display-weight-h3);
          font-size: var(--text-lg); line-height: 1.1; letter-spacing: .01em; }
.logo span { display: block; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-text-muted); }

/* ---------- skip link ---------- */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 200;
  background: var(--white); color: var(--green-700);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}

/* ---------- utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}