/* hvacwintersprings.com — evidence-led.
   Restyled to the "Climate Engineering Systems" design system (Stitch
   design-import): deep pine teal, sage/celadon accents, warm bone canvas.
   Barlow Condensed for display/metric type, Inter for body copy, tabular
   figures everywhere data appears. Charts and tables are content, so they
   carry the same weight as body copy. No JS is required for anything on
   this site except sending the contact page's request form (/lead.js).

   Tokens below are pulled from design-import/climate_engineering_systems/
   DESIGN.md (colors, typography scale, radius, elevation, component specs)
   — nothing numeric or factual from that mockup, only the design system. */

:root {
  /* --- Palette Architecture (DESIGN.md → Colors) ----------------------- */
  --teal: #12433F;      /* Primary — Deep Pine/Teal */
  --teal-d: #0A2C29;    /* Primary, deepened — full-bleed dark sections */
  --teal-l: #1A5A55;    /* Primary hover, per DESIGN.md Buttons spec */
  --sage: #78A895;      /* Secondary — active nav, focus rings, badges */
  --mint: #9CC5B4;      /* Tertiary — subtle highlights, chart fills */
  --mint-d: #6FA391;    /* Tertiary, deepened — small text on bone/paper */
  --tint: #E8F5EE;      /* Nominal fill — soft accent wash */
  --bone: #F7F5F0;      /* Canvas base */
  --paper: #FFFFFF;     /* Card surface */
  --wash: #EFF2EE;      /* Subtle surface accent — table striping, wells */
  --rule: #E2E7E3;      /* Hairline border */
  --rule-s: #ECEFEC;    /* Lighter hairline, nested dividers */
  --ink: #243330;       /* Neutral primary / on-surface text */
  --muted: #61756F;     /* on-surface-variant — captions, table headers */

  /* Cautionary / "needs attention" semantic pair (DESIGN.md → Badges) */
  --flag: #B8621B;
  --flag-p: #FBF3EB;
  --flag-tx: #8A450A;
  --flag-bd: #E8CBA3;

  /* --- Typography (DESIGN.md → Typography) ----------------------------- */
  --disp: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Radius (DESIGN.md → Shapes) -------------------------------------
     Core elements 4px, cards/modules 8px, outer shells 12px. Structural
     separators, table grid lines and timeline markers stay strictly
     square — no radius token applied to those. */
  --r-sm: 0.25rem;
  --r-md: 0.5rem;
  --r-lg: 0.75rem;

  --wrap: 1140px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 36px; --s5: 56px; --s6: 88px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;            /* body-lg: 16px */
  line-height: 1.5;           /* body-lg: 24px */
  letter-spacing: -0.011em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .bn, .sv, .dh, .kick, .ah, .nc-h, .big, th {
  font-family: var(--disp);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

h1, h2, h3 { color: var(--teal); margin: 0 0 var(--s2); font-weight: 700; }
h1 { font-size: clamp(2.25rem, 5.2vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2rem); line-height: 1.125; letter-spacing: 0; font-weight: 600; }
h3 { font-size: 1.125rem; line-height: 1.22; letter-spacing: 0.01em; font-weight: 600; }
p { margin: 0 0 var(--s2); }
a { color: var(--teal-l); }
a:hover { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
strong, b { font-weight: 600; }
em { font-style: italic; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); }
.narrow { max-width: 780px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--teal);
  color: var(--bone); padding: 10px 16px; z-index: 99; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

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

/* --- kickers, sources, flags ------------------------------------------- */
/* label-sm: 11px/14px, weight 600, 0.04em, uppercase (DESIGN.md micro-labels) */

.kick {
  font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; color: var(--sage); margin: 0 0 10px;
}
.src, .dsrc, .nc-s, figcaption {
  font-size: 0.875rem; line-height: 1.45; color: var(--muted);
  margin: var(--s2) 0 0; max-width: 82ch;
}
.src strong { color: var(--ink); }
.lede { font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); line-height: 1.55;
        color: #33443F; max-width: 66ch; }
.lede-sm { color: var(--muted); max-width: 72ch; }

.need {
  color: var(--flag-tx); background: var(--flag-p); font-weight: 600;
  padding: 2px 8px; border: 1px solid var(--flag-bd); border-radius: var(--r-sm);
  font-size: 0.92em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.need span { font-weight: 400; }
p.need { display: block; padding: 10px 14px; margin: var(--s2) 0;
         border: 1px solid var(--flag-bd); border-left: 3px solid var(--flag);
         border-radius: var(--r-sm); background: var(--flag-p); }
p.need .need { border: 0; padding: 0; background: transparent; }

.lic {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--disp);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--teal); background: var(--tint); border: 1px solid var(--mint);
  border-radius: var(--r-sm); padding: 3px 9px;
}

.caveat {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--flag-p); border: 1px solid var(--flag-bd); border-left: 3px solid var(--flag);
  border-radius: var(--r-sm); padding: 16px 20px; margin: var(--s3) 0 0; max-width: 92ch;
  font-size: 0.96rem;
}
.caveat .ic { flex: 0 0 20px; color: var(--flag); margin-top: 3px; }

.pullq {
  border-left: 3px solid var(--sage); padding-left: 20px;
  font-size: 1.0625rem; color: #33443F;
}

.ic { display: inline-block; width: 22px; height: 22px; line-height: 0; }
.ic svg { width: 100%; height: 100%; display: block; }
.ic.lg { width: 30px; height: 30px; }

/* --- header ------------------------------------------------------------ */

.hdr { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hdr-in {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 68px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { flex: 0 0 auto; height: 40px; width: auto; display: block; }
.mk svg { width: 100%; height: 100%; display: block; }
.bn { font-size: 1.1875rem; font-weight: 600; color: var(--teal);
      letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; }
.bn b { font-weight: 700; color: var(--mint-d); }
.nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.nav a {
  font-family: var(--disp); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.01em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--mint); color: var(--teal); }
.nav a[aria-current="page"] { color: var(--teal); border-bottom-color: var(--sage); }
.hdr-cta .tel {
  display: inline-block; font-family: var(--disp); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.01em; color: var(--paper); text-decoration: none; white-space: nowrap;
  background: var(--teal); border: 1px solid var(--teal); border-radius: var(--r-sm);
  padding: 9px 18px;
}
.hdr-cta .tel:hover { background: var(--teal-l); border-color: var(--teal-l); color: var(--paper); }
.hdr-cta span.tel { background: transparent; border-color: transparent; color: var(--teal); padding: 9px 0; }

/* --- hero -------------------------------------------------------------- */

.hero { background: var(--teal); color: #E9F0ED; }
.hero-in {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s5);
  padding-top: var(--s6); padding-bottom: var(--s6); align-items: start;
}
.hero h1 { color: var(--bone); margin-bottom: var(--s3); }
.hero .kick { color: var(--mint); }
.hero .lede { color: #CFE0D9; }
.hero a { color: var(--mint); }
.hero .btn { color: var(--teal-d); }
.hero .btn.ghost { color: var(--mint); }

.hero-data {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(120, 168, 149, 0.35);
  border-radius: var(--r-md); padding: var(--s3);
}
.dh {
  font-family: var(--disp); font-size: 0.6875rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--mint); margin: 0 0 var(--s2);
  padding-bottom: 10px; border-bottom: 1px solid rgba(120, 168, 149, 0.32); font-weight: 600;
}
.rail { margin: 0; }
.rail > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2); padding: 11px 0; border-bottom: 1px dotted rgba(120, 168, 149, 0.32);
}
.rail > div:last-child { border-bottom: 0; }
.rail dt { font-size: 0.9rem; color: #BCD3CA; }
.rail dd {
  margin: 0; font-family: var(--disp); font-weight: 700;
  font-size: 1.75rem; letter-spacing: -0.01em; color: var(--bone); line-height: 1;
}
.dsrc { color: #9FBCB2; margin-top: var(--s2); font-size: 0.78rem; }

.rail.dark { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md);
             padding: 4px 18px; margin-top: var(--s3); }
.rail.dark > div { border-bottom-color: var(--rule-s); }
.rail.dark dt { color: var(--muted); }
.rail.dark dd { color: var(--teal); font-size: 1.5rem; }

/* --- buttons -------------------------------------------------------------
   Primary: bg #12433F, text white, radius 4px, hover #1A5A55 (DESIGN.md).
   On dark sections (hero/cta) the roles invert for contrast: a light
   sage/mint fill reads as the high-emphasis action instead. */

.btns { display: flex; gap: 12px; flex-wrap: wrap; margin: var(--s3) 0 0; }
.btn {
  display: inline-block; font-family: var(--disp); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: 0.02em; text-transform: uppercase;
  text-decoration: none; padding: 12px 24px; border-radius: var(--r-sm);
  background: var(--mint); color: var(--teal-d); border: 1px solid var(--mint);
}
.btn:hover { background: #ABD2C3; border-color: #ABD2C3; color: var(--teal-d); }
.btn.ghost { background: transparent; color: var(--mint); border-color: rgba(156, 197, 180, 0.55); }
.btn.ghost:hover { background: rgba(156, 197, 180, 0.15); color: var(--mint); border-color: var(--mint); }
.sec .btn { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.sec .btn:hover { background: var(--teal-l); border-color: var(--teal-l); }
.sec .btn.ghost { background: var(--paper); color: var(--teal); border-color: var(--rule); }
.sec .btn.ghost:hover { background: var(--bone); border-color: var(--teal); color: var(--teal); }
.ilink { font-weight: 600; }

/* --- sections ---------------------------------------------------------- */

.sec { padding: var(--s6) 0; }
.sec.top { padding-bottom: var(--s4); }
.sec.band { background: var(--bone); border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule); }
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3);
}
.sec-note { color: var(--muted); font-size: 0.9rem; margin: 0; max-width: 34ch; }

.crumbs { background: var(--bone); border-bottom: 1px solid var(--rule);
          font-size: 0.85rem; padding: 10px 0; color: var(--muted); }
.crumbs span { color: var(--muted); }

.split-in { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s5);
            align-items: start; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
       align-items: start; }
.reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
         margin-top: var(--s4); }
.reads > div { border-top: 3px solid var(--sage); padding-top: var(--s2); }
.reads h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.reads p { font-size: 0.94rem; color: #3A4A47; margin: 0; }

/* --- cards --------------------------------------------------------------
   Bento module: bg white, 1px hairline border, radius 8px (DESIGN.md
   "Bento Metric Cards"). The service grid keeps hairline dividers between
   cells via a 1px background gap rather than individual shadows. */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule);
         border-radius: var(--r-md); overflow: hidden; }
.card {
  background: var(--paper); padding: var(--s3); text-decoration: none;
  color: inherit; display: block; transition: background-color .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-visible {
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--sage); outline: none;
}
.card .ic { color: var(--sage); margin-bottom: 12px; }
.card h3 { margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem; }
.card p { font-size: 0.94rem; color: #3A4A47; margin: 0; }

.note-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md);
  border-top: 4px solid var(--sage); padding: var(--s3);
}
.sec.band .note-card { background: var(--paper); }
.note-card.flag { border-top-color: var(--flag); }
.nc-h { display: flex; gap: 10px; align-items: center; font-weight: 700;
        color: var(--teal); font-size: 1.1rem; margin: 0 0 var(--s2); }
.nc-h .ic { color: var(--flag); }
.note-card p:last-child { margin-bottom: 0; }

.auth { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s3); }
.auth.alt { border-left: 4px solid var(--sage); }
.ah { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--mint-d); font-weight: 600; margin: 0 0 6px; }
.auth h3 { font-size: 1.5rem; margin-bottom: var(--s2); text-transform: none; }

.lean { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s3); background: var(--paper); }
.lean.rep { border-top: 4px solid var(--teal); }
.lean.rpr { border-top: 4px solid var(--sage); }

/* --- lists --------------------------------------------------------------- */

ul.ticks, ul.plain, ol.steps { margin: 0 0 var(--s2); padding-left: 0;
                               list-style: none; }
ul.ticks li { position: relative; padding-left: 26px; margin-bottom: 12px; }
ul.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--sage);
}
ul.plain li { padding: 7px 0; border-bottom: 1px dotted var(--rule); }
ul.plain li:last-child { border-bottom: 0; }
ol.steps { counter-reset: s; }
ol.steps li { counter-increment: s; position: relative; padding-left: 34px;
              margin-bottom: 12px; font-size: 0.96rem; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--teal); color: var(--bone);
  font-family: var(--disp); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

.kv { margin: 0; display: grid; grid-template-columns: auto 1fr;
      gap: 0 var(--s2); font-size: 0.94rem; }
.kv.wide { grid-template-columns: 1fr; gap: 0; }
.kv dt { font-weight: 600; color: var(--muted); padding: 8px 0;
         border-top: 1px solid var(--rule-s); }
.kv dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--rule-s); }
.kv.wide dt { border-top: 1px solid var(--rule-s); padding-bottom: 0; }
.kv.wide dd { border-top: 0; padding-top: 2px; }
.kv > dt:first-of-type, .kv > dt:first-of-type + dd { border-top: 0; }

/* --- tables ---------------------------------------------------------------
   DESIGN.md "Data Tables": container radius 8px + overflow hidden, header
   36px on bone with muted uppercase label-sm text, rows ~40-44px with
   #FCFBF9 zebra striping, cells in data-mono with tabular figures. */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch;
      border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper); }
table.dt {
  width: 100%; border-collapse: collapse; font-size: 0.92rem;
  font-variant-numeric: tabular-nums; min-width: 640px;
}
table.dt thead th {
  background: var(--bone); color: var(--muted); text-align: left;
  font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 11px 14px; vertical-align: bottom;
  line-height: 1.3; height: 36px; border-bottom: 1px solid var(--rule);
}
table.dt thead th.n { text-align: right; }
table.dt tbody th {
  text-align: left; font-weight: 600; color: var(--teal); padding: 11px 14px;
  border-top: 1px solid var(--rule-s); font-size: 0.95rem; white-space: nowrap;
}
table.dt td { padding: 11px 14px; border-top: 1px solid var(--rule-s);
              vertical-align: top; font-family: var(--body); }
table.dt td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.dt tbody tr:nth-child(even) th,
table.dt tbody tr:nth-child(even) td { background: #FCFBF9; }
table.dt tr.tight th, table.dt tr.tight td { background: var(--tint); }
table.dt tr.tight:nth-child(even) th,
table.dt tr.tight:nth-child(even) td { background: #DCEFE4; }
table.dt tr.me th, table.dt tr.me td { background: var(--teal); color: var(--bone); }
table.dt tr.me th { color: var(--bone); }
table.dt .big { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; }
table.dt tr.hi th, table.dt tr.hi td { background: var(--tint); }
table.dt .hi { font-weight: 600; }
table.dt.narrow-first tbody th { white-space: normal; min-width: 190px; }
table.dt.narrow-first td:last-child { min-width: 340px; font-size: 0.88rem;
                                      color: #3A4A47; }

/* --- charts -------------------------------------------------------------- */

.fig { margin: 0; }
.fig.wide { margin-bottom: var(--s4); }
.chart { width: 100%; height: auto; display: block;
         background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md);
         padding: 12px 8px; }
.sec.band .chart { background: var(--paper); }
.chart .gr { stroke: var(--rule); stroke-width: 1; }
.chart .ax { font-family: var(--disp); font-size: 11px; fill: var(--muted);
             text-anchor: middle; }
.chart .rl { font-family: var(--disp); font-size: 13px; fill: var(--ink);
             text-anchor: end; }
.chart .rl.sm { font-size: 11.5px; }
.chart .vl { font-family: var(--disp); font-size: 12.5px; font-weight: 700;
             fill: var(--teal); }
.chart .vl.sm { font-size: 11px; font-weight: 600; fill: var(--muted); }
.chart .b1 { fill: var(--teal); }
.chart .b2 { fill: var(--sage); }
.chart .span { stroke: var(--mint-d); stroke-width: 6; stroke-linecap: round; }
.chart .med { fill: var(--teal); }
.cohort { min-width: 620px; }
figure.fig.wide > .cohort { }

/* --- services ------------------------------------------------------------ */

.svc { display: grid; grid-template-columns: 300px 1fr; gap: var(--s5);
       align-items: start; }
.svc-h { display: flex; gap: 14px; align-items: flex-start; }
.svc-h .ic { color: var(--sage); flex: 0 0 auto; margin-top: 4px; }
.svc-h h2 { margin: 0; }
.svc-b p:last-child { margin-bottom: 0; }

/* --- cta ------------------------------------------------------------------ */

.cta { background: var(--teal-d); color: #D6E4DF; }
.cta-in { padding: var(--s6) 0; max-width: 760px; }
.cta.sm .cta-in { padding: var(--s5) 0; }
.cta h2 { color: var(--bone); }
.cta .kick { color: var(--mint); }
.cta .btn { background: var(--mint); border-color: var(--mint); color: var(--teal-d); }
.cta .btn.ghost { background: transparent; color: var(--mint); border-color: rgba(156, 197, 180, 0.55); }

/* --- faq ------------------------------------------------------------------ */

.faq details {
  border-top: 1px solid var(--rule); padding: 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 18px 0; list-style: none; display: flex;
  align-items: baseline; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; font-family: var(--disp); font-weight: 700; color: var(--sage);
  font-size: 1.3rem; line-height: 1; flex: 0 0 14px;
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary h3 { margin: 0; font-size: 1.12rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.faq details > div { padding: 0 0 20px 26px; max-width: 78ch; }
.faq details > div p:last-child { margin-bottom: 0; }
.faq h2 { margin-bottom: 6px; }
.faq .lede-sm { margin-bottom: var(--s3); }

/* --- footer ---------------------------------------------------------------- */

.ftr { background: var(--teal); color: #C7DAD3; font-size: 0.92rem;
       padding-top: var(--s5); }
.ftr-in { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--s4);
          padding-bottom: var(--s4); }
.ftr a { color: var(--mint); }
.ftr h2 { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
          color: var(--mint); margin-bottom: var(--s2); font-weight: 600; }
.ftr-brand { display: flex; align-items: center; gap: 10px; font-family: var(--disp);
             font-size: 1.3rem; font-weight: 600; color: var(--bone);
             text-transform: uppercase; margin-bottom: 10px; }
.ftr-brand b { color: var(--mint); }
.footer-logo {
  height: 34px; width: auto; background: #fff; padding: 6px 12px;
  border-radius: 8px;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr ul li { padding: 4px 0; }
.ftr dl { margin: 0; }
.ftr dt { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
          color: #8FB1A6; margin-top: 10px; font-weight: 600; }
.ftr dd { margin: 0; color: #DCE9E4; }
.ftr .need { background: rgba(184, 98, 27, 0.28); color: #FBDBBB; border-color: rgba(184, 98, 27, 0.5); }
.ftr .need span { color: #C7DAD3; }
.ftr p.need { border-left-color: #D98A3E; background: rgba(184, 98, 27, 0.16); border-color: rgba(184, 98, 27, 0.4); }
.ftr-legal { border-top: 1px solid rgba(120, 168, 149, 0.3); padding-top: var(--s3);
             padding-bottom: var(--s4); font-size: 0.79rem; color: #9FBCB2;
             line-height: 1.55; }
.ftr-legal p { max-width: 100ch; }

/* --- forms ----------------------------------------------------------------
   DESIGN.md → Form Inputs: white field, 1px #CFD6D2 border, 4px radius,
   8px 12px padding, Inter; focus = primary teal border plus a 1px ring.
   16px text so iOS does not zoom the page on focus. The contact page's
   request form is the only form on the site; /lead.js sends it. */

.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.lf { margin: 0 0 var(--s2); }
.lf label { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--ink);
            margin: 0 0 6px; }
.lf label .opt { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.lf input, .lf select, .lf textarea {
  display: block; width: 100%; font: inherit; font-size: 1rem; line-height: 1.45;
  color: var(--ink); background: var(--paper); border: 1px solid #CFD6D2;
  border-radius: var(--r-sm); padding: 8px 12px;
}
.lf textarea { min-height: 120px; resize: vertical; }
.lf input:focus, .lf select:focus, .lf textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal);
}
button.btn { cursor: pointer; }

@media (max-width: 700px) {
  .lf-row { grid-template-columns: 1fr; }
}

/* --- responsive ------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-in, .split-in, .svc { grid-template-columns: 1fr; gap: var(--s4); }
  .cards, .reads { grid-template-columns: repeat(2, 1fr); }
  .ftr-in { grid-template-columns: 1fr 1fr; }
  .sec { padding: var(--s5) 0; }
  .hero-in { padding-top: var(--s5); padding-bottom: var(--s5); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .hdr-in { min-height: 0; }
  .nav { margin-left: 0; width: 100%; gap: 14px; order: 3;
         padding-top: 10px; border-top: 1px solid var(--rule); }
  .hdr-cta { margin-left: auto; }
  .cards, .reads, .two { grid-template-columns: 1fr; }
  .cards { gap: 1px; }
  .ftr-in { grid-template-columns: 1fr; gap: var(--s3); }
  .sec-head { display: block; }
  .sec-note { margin-top: var(--s2); max-width: none; }
  .rail dd { font-size: 1.45rem; }
}

@media print {
  .hdr, .cta, .ftr-legal, .btns, .skip { display: none; }
  body { font-size: 11pt; }
  .sec { padding: 12pt 0; }
  .faq details > div { display: block; }
}