/* ==========================================================================
   3CE Growth Co. — shared stylesheet
   Websites, marketing, and the system behind them · Waterville, Kansas
   --------------------------------------------------------------------------
   Built to design/direction.md and design/brand-identity.md (Zara).

   The system in one line: paper, navy, hairline rules, stamped uppercase type.
   Sections divide by RULES — never cards, shadows, pills or rounded boxes.
   Body copy is --muted. Headlines are --text. Gold never appears here.

   Retired and not to reappear: the old green of the previous identity and its
   dark hover, the work-order line (label left, index flush right), the old
   square tile, the old two-clause descriptor, ink-as-background bands, and the
   two shop photographs — which stay on disk (a real shoot may come later) and
   are wired to nothing. SITE-MANIFEST.md §1 names those files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The seven locked tokens, exactly as Zara set them. Nothing here is
   substituted, lightened, or softened. Navies are not lightened to make a
   button "softer" — contrast is the point.
   -------------------------------------------------------------------------- */
:root {
  /* --- the locked seven --- */
  --bg:           #F4F1EA;   /* paper — page background */
  --surface-1:    #FFFCF7;   /* white — contained tables, print sheet. Not a card grid */
  --surface-2:    #FFFCF7;   /* no mid-paper fill panel in this system */
  --border:       #C9C3B6;   /* rule — lines, table rules, hairlines */
  --text:         #121417;   /* ink — headlines */
  --accent:       #1E3A5F;   /* navy — wordmark, top rule, buttons, band */
  --accent-hover: #152A46;   /* navy dark — button hover */
  --muted:        #5C5A55;   /* body / notes / descriptor */

  /* --- derived from the seven above only; no new brand colour --- */
  --rule-on-navy: rgba(244, 241, 234, .30);  /* hairlines on the navy band */
  --type-on-navy: rgba(244, 241, 234, .80);  /* secondary type on navy */

  /* --- type --- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;

  /* 7-step fluid scale */
  --step--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem);   /* stamps, tiny labels */
  --step--1: clamp(0.80rem, 0.78rem + 0.14vw, 0.88rem);   /* fine print, nav */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);   /* body */
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.34rem);   /* lede */
  --step-2:  clamp(1.34rem, 1.20rem + 0.62vw, 1.70rem);   /* program names */
  --step-3:  clamp(1.60rem, 1.34rem + 1.10vw, 2.30rem);   /* section headline */
  --step-4:  clamp(1.45rem, 0.95rem + 3.00vw, 3.40rem);   /* hero */

  /* spacing — 8px base, no arbitrary values */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --wrap: 1200px;
  --gutter: var(--sp-5);
  --wrapbox: calc(var(--wrap) + var(--gutter) * 2);
  --measure: 720px;
  --radius: 2px;                 /* near-square by design — this is stationery */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 200ms;
}
@media (min-width: 900px) {
  :root { --gutter: var(--sp-6); }
}
@media (max-width: 359px) {
  :root { --gutter: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;   /* numbers always tabular */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0 0 var(--sp-5); color: var(--muted); }
p:last-child { margin-bottom: 0; }

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.15em; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--text); }

::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}
.band :focus-visible, .footer-cta :focus-visible { outline-color: var(--bg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 50;
  background: var(--accent); color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
}
.skip:focus { top: var(--sp-3); color: var(--bg); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--wrapbox);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec { border-top: 1px solid var(--border); padding: var(--sp-5) 0 var(--sp-8); }
@media (min-width: 900px) {
  .sec { padding: var(--sp-5) 0 var(--sp-9); }
}
.sec--tight { padding-bottom: var(--sp-8); }

.measure { max-width: var(--measure); }

.m-0  { margin: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.flush { list-style: none; }

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3 { color: var(--text); }

.h-sec {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-5);
  max-width: 26ch;
  text-wrap: balance;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 54ch;
  color: var(--muted);
  margin: 0 0 var(--sp-5);
}

.fine {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}

/* the aside — a rule, not a box */
.aside {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
  max-width: 48ch;
  font-size: var(--step-1);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. WORDMARK — live type, one baseline, never an image, never broken
   Archivo 700 uppercase, .04em. Descriptor directly under it, Public Sans
   400, tracked, --muted. Kind: the locked sentence, exactly.
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.30rem, 1.10rem + 0.80vw, 1.62rem);   /* 20px screen floor */
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;                 /* the mark never breaks across two lines */
  color: var(--accent);
  text-decoration: none;
  border-bottom: 0;
}
.wordmark__descriptor {
  display: block;
  white-space: normal;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(9px, .46em);          /* descriptor never below 9px */
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .45em;
}
/* Colour on type is never the hover signal in this system — the underline is. */
a.wordmark:hover { color: var(--accent); }
a.wordmark:hover .wordmark__descriptor { color: var(--accent); }

/* --------------------------------------------------------------------------
   6. THE STAMP — 01  GET FOUND
   Small, tracked, navy, flush left, number and name travelling together.
   This replaces the retired work-order line outright.
   -------------------------------------------------------------------------- */
.stamp {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
}
.stamp__no { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. BANDS AND RULES
   -------------------------------------------------------------------------- */
.quiet { background: var(--bg); }        /* no mid-paper fill panel by design */

.hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

.band {
  background: var(--accent);
  color: var(--bg);
  padding: var(--sp-8) 0;
}
@media (min-width: 900px) {
  .band { padding: var(--sp-9) 0; }
}
.band__msg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--bg);
  max-width: 44ch;
  margin: 0;
}
.band p { color: var(--bg); }

/* --------------------------------------------------------------------------
   8. TABLES — hairline rules, dollar flush right, no fills
   -------------------------------------------------------------------------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-5);
  font-size: var(--step-0);
}
.spec caption {
  caption-side: top;
  text-align: left;
  font-size: var(--step--1);
  color: var(--muted);
  padding-bottom: var(--sp-4);
}
.spec th, .spec td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.spec thead th {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  padding-block: var(--sp-3);
}
.spec tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
}
.spec .c-no {
  width: 3.25rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/*
  Amount column. The figure and its unit are separate flex children with an
  explicit gap, so a visible space is guaranteed at EVERY width and never
  depends on whitespace in the markup. (The bug from the earlier build:
  "$600<span>Two or three days" rendered as "$600Two or three days" once the
  unit went inline.)
*/
.spec .c-amt {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 700;
}
.spec .amt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-left: auto;
}
.spec .amt .unit {
  font-weight: 400;
  font-size: var(--step--2);
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--muted);
  text-align: right;
}

/* a closing note sitting on a rule, so it reads deliberate rather than orphaned */
.closing-note {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--muted);
}

/* stacked rows on a phone (screen only — print keeps the table) */
@media screen and (max-width: 719px) {
  .spec thead { display: none; }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr {
    border-bottom: 1px solid var(--border);
    padding-block: var(--sp-4);
  }
  .spec tr:last-child { border-bottom: 0; }
  .spec th, .spec td { border-bottom: 0; padding: 0 0 var(--sp-2); }
  .spec tbody th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--step-0); }
  .spec .c-no { width: auto; color: var(--muted); font-size: var(--step--2); letter-spacing: .16em; }
  .spec .c-amt {
    width: auto;
    text-align: left;
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--border);
  }
  .spec .amt {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: .6ch;                        /* the guaranteed gap, at every width */
    margin-left: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
  }
  .spec .amt .unit {
    font-family: var(--font-body);
    font-size: var(--step--1);
    text-align: left;
  }
}

/* the loss table's "how it adds up" cell: prose left, the example flush right */
.c-sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
}
.c-sum__ex {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
@media screen and (max-width: 719px) {
  .c-sum__ex { margin-left: 0; text-align: left; white-space: normal; }
}

/* the price sheet: hold the columns so the header tracks the body.
   Screen ≥720px only — as a percentage width these rules would otherwise win
   over the stacked layout's `width: auto` on a phone (id + class beats class +
   element) and squeeze the amount cell to 42%, forcing every figure/unit pair
   onto two lines. Column widths are a property of the TABLE layout. */
@media screen and (min-width: 720px) {
  #costs .spec th:first-child { width: 58%; }
  #costs .spec .c-amt { width: 42%; }
}
@media screen and (min-width: 900px) {
  #costs .spec th:first-child { width: 66%; }
  #costs .spec .c-amt { width: 34%; }
}

/* --------------------------------------------------------------------------
   9. BUTTONS — rounded rectangles at most, never pills
   Navy fill, paper type. Hover is navy dark. The navy is never lightened.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;                 /* touch target */
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}
.btn--accent { background: var(--accent); color: var(--bg); }
.btn--accent:hover { background: var(--accent-hover); color: var(--bg); transform: translateY(-1px); }
.btn--ghost { border-color: var(--text); color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--bg); transform: translateY(-1px); }
.btn--sm {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--step--2);
  letter-spacing: .12em;
}
.band .btn--accent { background: var(--bg); color: var(--accent); }
.band .btn--accent:hover { background: #fff; color: var(--accent); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-4);
}
@media (max-width: 519px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
}

.tlink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-micro) var(--ease);
}
.tlink:hover { color: var(--accent-hover); }

/* --------------------------------------------------------------------------
   10. MASTHEAD — the letterhead. A 3px navy rule across the top of the page
   with the live-type wordmark sitting on it.
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--bg);
  border-top: 3px solid var(--accent);   /* the letterhead rule */
  border-bottom: 1px solid var(--border);
}
.masthead__inner {
  max-width: var(--wrapbox);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}
/*
  The wordmark never breaks and never overflows. "3CE GROWTH CO." measures
  15.8× its font-size in Archivo 700 at .04em, so the size is computed from the
  space actually available and capped at the 20px screen floor from
  design/brand-identity.md §2. Above ~380px the cap always wins; on a 320px
  phone the mark shrinks to fit rather than wrapping or scrolling sideways.
*/
.masthead__brand { flex: 1 1 auto; min-width: 0; }
.masthead .wordmark {
  font-size: min(1.25rem, calc((100vw - var(--gutter) * 2) / 15.8));
}

.masthead__call {
  order: 2;
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav {
  order: 3;
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;                 /* a real tap target, not a 10px text line */
  padding: var(--sp-2) 0;
  color: var(--text);
  text-decoration: none;
}
.nav a:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }

/*
  A real 14-character number ("(785) 221-1541") must not break the masthead at
  320–419px. Below 520px the call button takes the full row, so the number
  always has the width of the content column and can never collide with the
  wordmark. Measured in the earlier build rather than assumed: 320 / 360 / 375 /
  390 / 419 all render with no overflow.
*/
@media (max-width: 519px) {
  .masthead__call { flex: 1 0 100%; order: 2; }
  .masthead__call .btn { width: 100%; }
  .nav { order: 3; }
}

/* 520–1179: brand and the call button share the first row, nav takes a full
   row of its own. Measured: the single-row arrangement needs 1097px of
   content to hold the wordmark, four nav links and the 14-character number,
   so it does not exist below 1180. */
@media (min-width: 520px) {
  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
  }
  .nav a { min-height: 0; padding: 0; }
  .nav a:nth-child(-n + 2) { border-bottom: 0; }
}

@media (min-width: 1180px) {
  .masthead { position: sticky; top: 0; z-index: 20; }
  .masthead__inner { flex-wrap: nowrap; gap: var(--sp-5); }
  .masthead__brand { flex: 0 0 auto; }
  .nav {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: var(--sp-4);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: var(--step--2);
    letter-spacing: .1em;
  }
  .masthead__call { order: 3; }
}

/* --------------------------------------------------------------------------
   11. HERO — type-led on paper. No photograph. Flush left, never centred.
   -------------------------------------------------------------------------- */
.hero { padding: var(--sp-7) 0 var(--sp-8); }
@media (min-width: 900px) {
  .hero { padding: var(--sp-9) 0 var(--sp-10); }
}
.hero__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0 0 var(--sp-5);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-5);
  max-width: 12em;          /* holds the longest beat — GET THE QUOTE OUT. — on one line */
}
.hero h1 span { display: block; }
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 var(--sp-5);
}
@media (max-width: 380px) {
  .hero h1 { font-size: 1.55rem; }
}

/* --------------------------------------------------------------------------
   12. PROGRAMS — stacked ruled entries, uneven, never a card grid
   -------------------------------------------------------------------------- */
.progs { border-top: 1px solid var(--border); }
.prog {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-6) 0;
}
@media (min-width: 900px) {
  .prog { padding: var(--sp-7) 0; }
}
.prog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin: 0 0 var(--sp-3);
}
.prog__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.prog__price {
  margin: 0 0 0 auto;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 519px) {
  .prog__price { white-space: normal; }
}
.prog__sub {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
}
.prog__body { max-width: 62ch; margin: 0; }

/* --------------------------------------------------------------------------
   13. NUMBERED STEPS — ruled, flush left, no circles
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
@media (min-width: 760px) {
  .steps > li {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: baseline;
  }
}
.steps > li:first-child { border-top: 1px solid var(--border); }
.steps__n {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.steps p { margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   14. THE DON'T LIST — short stacked lines, not a grid
   -------------------------------------------------------------------------- */
.donts { list-style: none; margin: 0; padding: 0; }
.donts li {
  padding: var(--sp-4) 0 var(--sp-4) 1.6em;
  border-bottom: 1px solid var(--border);
  position: relative;
  margin: 0;
  max-width: 74ch;
}
.donts li:first-child { border-top: 1px solid var(--border); }
.donts li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--sp-4) + .62em);
  width: .7em; height: 2px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   15. LETTER
   -------------------------------------------------------------------------- */
.letter {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.6;
}
.letter p { margin-bottom: var(--sp-5); }
.letter__sig {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--step-0);
  color: var(--text);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  max-width: var(--measure);
}
.letter__sig span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   16. FOOTER — one CTA, nothing else, on paper
   -------------------------------------------------------------------------- */
.footer {
  border-top: 3px solid var(--accent);
  padding: var(--sp-7) 0 var(--sp-6);
}
.footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.footer__id {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  justify-content: space-between;
  align-items: flex-start;
  padding-top: var(--sp-6);
}
.footer__legal {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}
.footer .wordmark { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); }
.footer .wordmark__descriptor { font-size: max(9px, .5em); }

/* --------------------------------------------------------------------------
   17. CONTACT PAGE
   -------------------------------------------------------------------------- */
.reach { list-style: none; margin: 0; padding: 0; }
.reach li {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.reach li:first-child { border-top: 1px solid var(--border); }
.reach .k {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  margin: 0 0 var(--sp-2);
}
.reach .v {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-2);
}
.reach .v a { color: var(--accent); text-decoration: none; }
.reach .v a:hover { text-decoration: underline; }
.reach p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* ---- form controls: styled and ready for the PARKED contact form ---------
   The form markup in contact.html is commented out on purpose and must not be
   uncommented until it has a real endpoint that texts Casey's phone. These
   rules exist so it comes back styled when it is wired, not as naked browser
   defaults. They are inert while the markup stays commented.               */
.field { margin-bottom: var(--sp-5); max-width: var(--measure); }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.field input, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   18. PRINT SHEET — print.html
   -------------------------------------------------------------------------- */
.sheet-actions {
  max-width: 8.5in;
  margin: var(--sp-5) auto var(--sp-4);
  padding-inline: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  flex-wrap: wrap;
}
.sheet-actions .small { margin: 0; font-size: var(--step--1); color: var(--muted); }

.sheet {
  max-width: 8.5in;
  margin: 0 auto var(--sp-8);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  padding: 0.55in 0.6in;
  font-size: .92rem;
  line-height: 1.45;
}
.sheet h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: var(--sp-5) 0 var(--sp-3);
}
.sheet h2 { margin: 0; }
.sheet .stamp { margin-bottom: var(--sp-3); font-size: .64rem; }
.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--text);
  flex-wrap: wrap;
}
.sheet__head .wordmark { font-size: 1.1rem; }
.sheet__head .contact {
  font-size: .74rem;
  text-align: right;
  line-height: 1.5;
  color: var(--muted);
}
.sheet__head .contact a { color: var(--accent); text-decoration: none; }
.sheet__lead { font-size: .9rem; margin-bottom: var(--sp-4); max-width: 60ch; }
.sheet section { margin-bottom: var(--sp-4); }

.sheet .spec { font-size: .76rem; margin-bottom: var(--sp-3); }
.sheet .spec th, .sheet .spec td { padding: .28rem .5rem .28rem 0; }
.sheet .spec thead th { font-size: .62rem; padding-block: .2rem; }
/* .45ch, not a fixed 1px: on a phone the sheet's spec rows stack and the figure
   and unit sit side by side, and a 1px gap reads as touching. */
.sheet .spec .amt { gap: .45ch; }
.sheet .spec .amt .unit { font-size: .62rem; }
.sheet .spec .c-no { width: 1.6rem; }
.sheet .spec .c-amt { width: 34%; }

.sheet__notes {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 78ch;
}
.sheet__notes p { margin: 0 0 .3rem; }
.sheet__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--text);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text);
  flex-wrap: wrap;
}
.sheet__foot a { color: var(--accent); text-decoration: none; }

@media print {
  @page { size: letter portrait; margin: 12mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.4pt !important;
    overflow: visible !important;
  }
  .masthead, .skip, .sheet-actions, .cta-row, .btn, .footer, .band { display: none !important; }
  .sheet {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 2pt solid #000;
    box-shadow: none;
    font-size: 10.4pt;
    line-height: 1.36;
  }
  .sheet__head { padding-bottom: 2.4mm; border-bottom: 1.5pt solid #000; }
  .sheet h1 { font-size: 16pt; margin: 3mm 0 1.8mm; }
  .sheet__lead { font-size: 9.6pt; margin-bottom: 3mm; }
  .sheet__head .contact { font-size: 8.4pt; color: #000; }
  .sheet .stamp { padding-top: 1.4mm; margin-bottom: 1.8mm; }
  .sheet section { margin-bottom: 2.8mm; }

  .sheet .spec { font-size: 8.7pt; margin-bottom: 2.4mm; }
  .sheet .spec th, .sheet .spec td { padding: .62mm 2mm .62mm 0; border-bottom: .5pt solid #999; }
  .sheet .spec caption { font-size: 8.1pt; padding-bottom: 1.3mm; }
  .sheet .spec thead th { font-size: 7.7pt; padding-block: .5mm; }
  .sheet .spec .amt { font-size: 9pt; gap: .3mm; }
  .sheet .spec .amt .unit { font-size: 7.3pt; }

  .sheet__notes { font-size: 8.1pt; line-height: 1.38; border-top: .5pt solid #999; margin-top: 2.4mm; padding-top: 1.6mm; }
  .sheet__foot { font-size: 8.4pt; border-top: 1.5pt solid #000; padding-top: 1.6mm; margin-top: 2.4mm; }

  /* no colour fills that eat toner: every rule and marker goes black */
  .stamp, .stamp__no, .steps__n { color: #000 !important; }
  .prog__price, .price, .tlink { color: #000 !important; }
  .spec, .spec th, .spec td, .sheet__notes { color: #000 !important; }
  .spec .amt .unit { color: #000 !important; }
  .donts li::before { background: #000; }
  .wordmark, .wordmark__descriptor { color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  img { display: none !important; }
}

/* generic print tidy for the main pages (no photographs are wired anywhere) */
@media print {
  body:not(.printpage) .band { background: none; color: #000; }
  body:not(.printpage) .band__msg { color: #000; }
  body:not(.printpage) .btn { display: none; }
  body:not(.printpage) .masthead { border-top: 2pt solid #000; }
  body:not(.printpage) .footer { border-top: 1.5pt solid #000; }
}

/* --------------------------------------------------------------------------
   19. MOTION PREFERENCE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover { transform: none; }
}