/* ==========================================================================
   sanfordhvac.com — technical drawing / blueprint
   Tokens sourced from design-import/technical_blueprint_engineering/DESIGN.md
   (Stitch "Technical Blueprint Engineering" system):
     ink-navy #0F1B2A · drafting-blue #2D6CA8 · paper-bg #F3F1EC
     grid-line #E2DFD7 · blueprint-tint #E9F0F8 / border #C7D8EB
   Inter for headlines/body/labels, tabular figures everywhere, hairline
   rules and hard (non-blurred) offset shadows for elevation — no glassy
   drop-shadows, no soft blur. The page is the drawing sheet.
   ========================================================================== */

:root{
  /* ---- core palette (verbatim from DESIGN.md) --------------------------- */
  --ink:#0F1B2A;            /* ink-navy */
  --blue:#2D6CA8;            /* drafting-blue */
  --paper:#F3F1EC;           /* paper-bg */
  --rule:#E2DFD7;            /* grid-line */
  --wash:#E9F0F8;            /* blueprint-tint */
  --wash-border:#C7D8EB;     /* blueprint-tint-border */

  /* status */
  --status-active:#1B7340;
  --status-warning:#C45B12;
  --status-critical:#B3261E;

  /* derived, for legibility at small sizes / on paper */
  --ink-2:#2A3E52;
  --muted:#5F6E7C;
  --rule-2:#EAE7DF;
  --blue-2:#1E4C79;
  --blue-hover:#235687;      /* DESIGN.md primary-button hover */
  --card:#FBFAF7;
  --redline:var(--status-critical);
  --redline-bg:#F8E4E1;

  /* ---- typography --------------------------------------------------------
     Inter carries display/headline/body/label roles; a monospace stack
     carries "spec-code" technical labels, nav, buttons and form chrome —
     matching the Stitch mockup's own split between font-* (Inter) and
     font-mono utility classes. */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  /* DESIGN.md type scale (desktop values; display-lg has a mobile override
     applied via media query below, matching display-lg-mobile) */
  --fs-display-lg:3.0rem;   --lh-display-lg:3.5rem;   --ls-display-lg:-0.025em;
  --fs-headline-lg:2.0rem;  --lh-headline-lg:2.5rem;  --ls-headline-lg:-0.015em;
  --fs-headline-md:1.5rem;  --lh-headline-md:2.0rem;  --ls-headline-md:-0.01em;
  --fs-headline-sm:1.25rem; --lh-headline-sm:1.75rem; --ls-headline-sm:0em;
  --fs-body-lg:1.125rem;    --lh-body-lg:1.75rem;
  --fs-body-md:1.0rem;      --lh-body-md:1.5rem;
  --fs-body-sm:0.875rem;    --lh-body-sm:1.25rem;     --ls-body-sm:0.005em;
  --fs-spec-lg:1.125rem;    --ls-spec-lg:0.05em;
  --fs-spec-md:0.875rem;    --ls-spec-md:0.04em;
  --fs-spec-sm:0.75rem;     --ls-spec-sm:0.06em;
  --fs-label-md:0.8125rem;  --ls-label-md:0.05em;
  --fs-label-sm:0.6875rem;  --ls-label-sm:0.08em;

  /* ---- spacing (DESIGN.md 8px/4px rhythm) -------------------------------- */
  --sp-2xs:0.25rem; --sp-xs:0.5rem; --sp-sm:0.75rem; --sp-md:1rem;
  --sp-lg:1.5rem; --sp-xl:2rem; --sp-2xl:3rem; --sp-3xl:4rem;

  /* ---- shape -------------------------------------------------------------
     Base radius 0.25rem on buttons/inputs/badges/interior containers;
     large radius 0.5rem reserved for outermost module framing. */
  --r-sm:0.25rem;
  --r-lg:0.5rem;

  /* ---- elevation: hard technical offset, never blurred ------------------- */
  --shadow-sm:2px 2px 0 0 var(--ink);
  --shadow-md:3px 3px 0 0 var(--ink);
  --shadow-lg:4px 4px 0 0 var(--ink);

  --w:1180px;
  --gut:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background-color:var(--paper);
  /* the drafting grid: 24px minor dot rhythm, 120px major rule —
     DESIGN.md "Surface 0" recurring Cartesian grid over Paper Neutral,
     kept faint so it reads as registration marks, not noise */
  background-image:
    radial-gradient(rgba(45,108,168,.35) 0.6px,transparent 0.6px),
    linear-gradient(rgba(15,27,42,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,27,42,.045) 1px,transparent 1px);
  background-size:24px 24px,120px 120px,120px 120px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"cv05" 1,"cv08" 1;
}

h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--sans)}
h1{
  font-size:clamp(var(--fs-headline-lg),6vw + 0.4rem,var(--fs-display-lg));
  line-height:1.1;
  font-weight:700;
  letter-spacing:var(--ls-display-lg);
}
h2{
  font-size:clamp(var(--fs-headline-md),3.4vw,var(--fs-headline-lg));
  line-height:1.18;
  font-weight:600;
  letter-spacing:var(--ls-headline-lg);
}
h3{
  font-size:clamp(1.125rem,2vw,var(--fs-headline-sm));
  line-height:1.25;
  font-weight:600;
  letter-spacing:var(--ls-headline-sm);
}
h4{
  font-size:1rem;
  line-height:1.3;
  font-weight:600;
  letter-spacing:0;
}
p{margin:0 0 1.05em;font-size:var(--fs-body-md);line-height:var(--lh-body-md)}
a{color:var(--blue-2);text-decoration-thickness:1px}
a:hover{color:var(--ink)}
strong{font-weight:700}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:0 0 .42em}
hr{border:0;border-top:1px solid var(--rule);margin:34px 0}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}

/* ---- mono micro-labels — DESIGN.md "spec-code" / "label" roles --------- */
.lbl,.tag,.tb-no,.tb-tag,.src,.dim,.k{
  font-family:var(--mono);
  font-size:var(--fs-label-sm);
  letter-spacing:var(--ls-label-sm);
  text-transform:uppercase;
  font-weight:600;
}
.lbl{color:var(--blue-2);display:block;margin:0 0 10px}
.src{
  text-transform:none;letter-spacing:.02em;font-size:11.5px;line-height:1.55;
  font-weight:400;
  color:var(--muted);display:block;margin:10px 0 0;
}
.src::before{content:"\2514\2500\2500  ";color:var(--blue);}
.src a{color:var(--muted)}

/* ---- skip link --------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 16px;font-family:var(--mono);font-size:13px;z-index:99;
}
.skip:focus{left:0}

/* ---- masthead ---------------------------------------------------------- */
.strip{
  background:var(--ink);color:#C9D6E4;
  font-family:var(--mono);font-size:var(--fs-spec-sm);letter-spacing:var(--ls-spec-sm);text-transform:uppercase;
}
.strip .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;padding-top:7px;padding-bottom:7px}
.strip a{color:#EAF1F8;text-decoration:none;border-bottom:1px solid rgba(234,241,248,.4)}
.strip a:hover{color:#fff;border-bottom-color:#fff}
.strip .sep{color:#4E6479}

header.mast{border-bottom:1px solid var(--ink);background:rgba(243,241,236,.94);backdrop-filter:saturate(1.1)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);padding-right:14px;border-right:1px solid var(--rule)}
.brand-logo{display:block;flex:0 0 auto;height:38px;width:auto}
.brand .bn{font-family:var(--mono);line-height:1.08}
.brand .b1{display:block;font-size:16px;letter-spacing:.16em;font-weight:700}
.brand .b2{display:block;font-size:16px;letter-spacing:.16em;font-weight:700;color:var(--blue)}
.brand .b3{display:block;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:3px;font-weight:600}

nav.main ul{display:flex;flex-wrap:wrap;gap:2px 20px;list-style:none;margin:0;padding:0}
nav.main a{
  font-family:var(--mono);font-size:var(--fs-spec-sm);letter-spacing:var(--ls-spec-sm);text-transform:uppercase;
  font-weight:500;
  color:var(--ink);text-decoration:none;padding:5px 0;display:inline-block;
  border-bottom:2px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--blue)}
nav.main a[aria-current="page"]{border-bottom-color:var(--ink);color:var(--blue-2)}

/* ---- buttons ------------------------------------------------------------
   Primary: solid drafting-blue on the ink-navy border with the hard offset
   shadow always present, pressed flat on :active — the site's dominant
   tactile affordance, straight out of the Stitch component spec. */
.btn{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-spec-md);letter-spacing:var(--ls-spec-md);
  font-weight:600;
  text-transform:uppercase;text-decoration:none;padding:13px 22px;border:1px solid var(--ink);
  border-radius:var(--r-sm);
  background:var(--blue);color:#fff;
  box-shadow:var(--shadow-sm);
  transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease;
}
.btn:hover{background:var(--blue-hover);border-color:var(--ink);color:#fff}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--wash);color:var(--ink)}
.btn.ghost:active{transform:translate(1px,1px)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}

/* ---- redline: unresolved handover fields ------------------------------- */
.need{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;font-weight:600;
  color:var(--redline);background:var(--redline-bg);
  border:1px dashed var(--redline);border-radius:var(--r-sm);padding:2px 7px;display:inline-block;
  text-transform:none;white-space:normal;
}
.need-block{
  border:1px dashed var(--redline);background:var(--redline-bg);border-radius:var(--r-sm);
  padding:18px 20px;margin:22px 0;
}
.need-block .lbl{color:var(--redline)}
.need-block p:last-child{margin-bottom:0}

/* ---- sheet sections ---------------------------------------------------- */
section{padding:clamp(44px,6vw,76px) 0;border-bottom:1px solid var(--rule)}
section.tight{padding:clamp(30px,4vw,48px) 0}
section.alt{background:rgba(233,240,248,.55)}

/* title block heading — the "[SEC. 0x]" registration tag before each h2 */
.tb{
  display:flex;align-items:baseline;gap:14px;
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin:0 0 26px;
}
.tb-no{
  color:var(--blue);flex:0 0 auto;font-weight:700;
  border:1px solid var(--ink);border-radius:var(--r-sm);
  background:var(--wash);padding:3px 8px;
}
.tb h2,.tb h3{margin:0;flex:1 1 auto}
.tb-tag{color:var(--muted);flex:0 0 auto;display:none}
@media(min-width:760px){.tb-tag{display:block}}

/* ---- hero -------------------------------------------------------------- */
.hero{border-bottom:1px solid var(--ink);padding:clamp(38px,6vw,68px) 0 clamp(34px,5vw,56px)}
.hero h1{max-width:16ch}
.hero .lede{
  font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);max-width:62ch;color:var(--ink-2);
}
.hero-grid{display:grid;gap:clamp(26px,4vw,48px)}
@media(min-width:940px){.hero-grid{grid-template-columns:1.25fr .85fr;align-items:start}}

/* dimension strip under the H1 — technical spec chips, hard offset like the
   Stitch hero's "EFFICIENCY SPEC / REFRIGERANT CYCLE" readout row */
.dimstrip{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--ink);background:var(--card);margin:26px 0 0;
  border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);
}
.dimstrip div{
  flex:1 1 150px;padding:13px 15px;border-right:1px solid var(--rule);
}
.dimstrip div:last-child{border-right:0}
.dimstrip b{display:block;font-family:var(--mono);font-size:20px;letter-spacing:.01em;color:var(--blue-2)}
.dimstrip span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:4px;line-height:1.45;
}

/* ---- generic cards / grids --------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--rule)}
.grid.g2{grid-template-columns:1fr}
.grid.g3{grid-template-columns:1fr}
@media(min-width:700px){.grid.g2{grid-template-columns:1fr 1fr}.grid.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid.g3{grid-template-columns:repeat(3,1fr)}}
.grid>*{background:var(--card);padding:24px;transition:transform .12s ease}
.card{border:1px solid var(--ink);border-radius:var(--r-sm);background:var(--card);padding:24px;box-shadow:var(--shadow-sm)}
.card h3{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}

.svc h3{display:flex;align-items:baseline;gap:10px}
.svc h3 .k{color:var(--blue);flex:0 0 auto}

/* ---- callout figures --------------------------------------------------- */
.cal{border-left:2px solid var(--blue);padding:2px 0 2px 16px;margin:0 0 22px}
.cal-n{
  display:block;font-family:var(--mono);font-size:clamp(28px,4vw,40px);line-height:1.05;color:var(--ink);
  font-weight:700;
}
.cal-l{display:block;font-size:15px;color:var(--ink-2);margin-top:6px}

/* ---- tables — DESIGN.md "Tables & Spec Matrices" ------------------------ */
.tw{overflow-x:auto;border:1px solid var(--ink);border-radius:var(--r-sm);background:var(--card);margin:0 0 14px}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
caption{
  text-align:left;font-family:var(--mono);font-size:var(--fs-spec-sm);letter-spacing:var(--ls-spec-sm);
  text-transform:uppercase;font-weight:600;color:var(--blue-2);padding:12px 14px;border-bottom:1px solid var(--ink);
}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label-sm);text-transform:uppercase;
  color:var(--muted);font-weight:600;border-bottom:2px solid var(--ink);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even){background:rgba(233,240,248,.4)}
table.plain{min-width:0}
table.plain td:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;width:1%}

/* ---- the permit decision diagram (jurisdiction branching tree) --------- */
.dg{margin:6px 0 0;font-size:15px}
.dg-node{
  border:1px solid var(--ink);border-radius:var(--r-sm);background:#fff;padding:15px 17px;position:relative;
}
.dg-node h3,.dg-node h4{margin:0 0 6px}
.dg-node p:last-child,.dg-node ul:last-child{margin-bottom:0}
.dg-start{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dg-start .k{color:#8FB6DB}
.dg-q{border:1px solid var(--blue);background:var(--wash)}
.dg-q .k{color:var(--blue-2)}
.dg-desk{border-width:2px;box-shadow:var(--shadow-md)}
.dg-desk .k{color:var(--blue)}

.drop{width:1px;height:24px;background:var(--blue);margin:0 auto}
.tee{position:relative;height:26px}
.tee::before{content:"";position:absolute;left:50%;top:0;width:1px;height:13px;background:var(--blue)}
.tee::after{content:"";position:absolute;left:25%;right:25%;top:13px;height:1px;background:var(--blue)}
.dg-split{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:860px){.dg-split{grid-template-columns:1fr 1fr;gap:0 26px}}
.dg-col{display:flex;flex-direction:column}
.dg-col .drop{height:13px}
.edge{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--blue-2);background:var(--paper);display:block;text-align:center;
  padding:5px 0;border-top:1px solid var(--blue);border-bottom:1px solid var(--blue);
}
.edge.no{color:var(--redline);border-color:var(--redline)}
@media(max-width:859px){
  .tee::after{display:none}
  .tee{height:16px}
  .tee::before{height:16px}
}
.dg-sub{margin-top:0}
.dg-out{display:grid;gap:1px;background:var(--rule);border:1px solid var(--ink);border-radius:var(--r-sm);margin-top:0;overflow:hidden}
.dg-out>div{background:#fff;padding:13px 15px;font-size:14.5px}
.dg-out b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.dg-out .yes b{color:var(--blue-2)}
.dg-out .none b{color:var(--redline)}

/* ---- SVG figures --------------------------------------------------------
   The schematic-panel treatment: title-block strip feel, hard offset,
   mirrors the Stitch hero's "SCHEMATIC ISO-01" cutaway panel framing. */
figure{margin:0 0 22px;border:1px solid var(--ink);border-radius:var(--r-sm);background:var(--card);padding:20px;box-shadow:var(--shadow-sm)}
figure svg{display:block;width:100%;height:auto}
figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);
  margin-top:14px;line-height:1.55;
}
figcaption::before{content:"\2514\2500\2500  ";color:var(--blue)}

/* ---- FAQ ----------------------------------------------------------------
   Q-prefix kept mono/drafting-blue to match the Stitch accordion's
   "[FAQ-0x]" numbering convention. */
.faq{border-top:2px solid var(--ink)}
.faq .qa{border-bottom:1px solid var(--rule);padding:22px 0}
.faq h3{font-size:18px;margin-bottom:.45em}
.faq h3::before{content:"Q  ";font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:700;color:var(--blue);vertical-align:2px}
.faq p:last-child{margin-bottom:0}

/* ---- contact / form -------------------------------------------------------
   DESIGN.md "Input Fields & Select Controls": white surface, 1px ink
   border, drafting-blue focus ring. */
.form label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;font-weight:600;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px;
}
.form .row{margin:0 0 16px}
.form input,.form select,.form textarea{
  width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:var(--r-sm);
}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:0;background:var(--wash)}

/* ---- footer title block -------------------------------------------------
   Kept square (no radius) — matches the Stitch header's own ink-navy
   utility bar, which stays sharp-cornered edge-to-edge. */
footer.tblock{background:var(--ink);color:#C9D6E4;border-top:2px solid var(--blue)}
footer.tblock a{color:#EAF1F8}
footer.tblock .fgrid{display:grid;gap:1px;background:#2A3E52;margin:0 0 0}
@media(min-width:760px){footer.tblock .fgrid{grid-template-columns:repeat(4,1fr)}}
footer.tblock .fcell{background:var(--ink);padding:18px 20px}
.footer-logo{
  height:34px;width:auto;background:#fff;padding:6px 12px;
  border-radius:8px;display:block;margin-bottom:10px;
}
footer.tblock .fcell .k{display:block;color:#7C93A9;margin-bottom:6px}
footer.tblock .fcell b{color:#fff;font-weight:600;font-size:15px}
footer.tblock .fcell p{font-size:14px;margin:0}
footer.tblock .fnav{padding:22px 0;border-top:1px solid #2A3E52}
footer.tblock .fnav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
footer.tblock .fnav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;font-weight:500;text-decoration:none;
}
footer.tblock .fnav a:hover{color:#fff;text-decoration:underline}
footer.tblock .fine{padding:20px 0 34px;font-size:12.5px;color:#93A7B9;line-height:1.6}
footer.tblock .fine p{margin:0 0 .7em}
footer.tblock .fine .need{background:transparent;color:#E7A79A;border-color:#8E4536}

/* ---- misc ---------------------------------------------------------------- */
.note{border-left:2px solid var(--blue);background:var(--wash);padding:16px 18px;margin:0 0 22px;font-size:15.5px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.note p:last-child{margin-bottom:0}
.note .lbl{margin-bottom:6px}
.checks{list-style:none;padding:0}
.checks li{padding-left:26px;position:relative}
.checks li::before{
  content:"\2713";position:absolute;left:0;top:0;color:var(--status-active);font-family:var(--mono);font-size:14px;font-weight:700;
}
.crosses{list-style:none;padding:0}
.crosses li{padding-left:26px;position:relative}
.crosses li::before{
  content:"\2715";position:absolute;left:0;top:0;color:var(--redline);font-family:var(--mono);font-size:13px;font-weight:700;
}
.stack>*+*{margin-top:22px}

/* ---- responsive: mobile display-lg override (DESIGN.md display-lg-mobile) */
@media(max-width:759px){
  .hero h1{letter-spacing:var(--ls-display-lg)}
}

@media print{
  body{background:#fff;font-size:12pt}
  .strip,nav.main,.btns,.skip{display:none}
  section{border-bottom:1px solid #999;padding:14pt 0}
  .btn,.card,.dimstrip,.dg-desk,figure{box-shadow:none}
  footer.tblock{background:#fff;color:#000;border-top:1px solid #000}
  footer.tblock .fcell{background:#fff;color:#000;border:1px solid #999}
  footer.tblock a,footer.tblock .fcell b{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}