/* ==========================================================================
   Lake Mary HVAC — hvaclakemary.com
   Direction: quiet, architectural, engineering-grade. Comparison table as
   the hero. Restyled to the Lake Mary HVAC Stitch design system: deep slate
   + technical cool grey, flat surfaces, hairline structural borders, zero
   shadows, zero gradients, minimal 4px radius on controls only.
   Palette: primary #22303C, secondary #8FA3B0, surface #F4F6F8,
            border #D1D9E0, white. Accent colours are avoided.
   Type:    Inter. Three steps — display, subheading, body/label — hierarchy
            comes from weight, case and rules, never a fourth size.
   ========================================================================== */

:root {
  /* Stitch design-system tokens (design-import/lake_mary_hvac_system/DESIGN.md) */
  --primary:       #22303C;
  --primary-hover: #324555;
  --secondary:     #8FA3B0;
  --surface:       #F4F6F8;
  --surface-alt:   #ECEEF0;
  --border:        #D1D9E0;
  --white:         #FFFFFF;
  --ink:           #22303C;
  --ink-muted:     #526574;
  --ink-faint:     #8FA3B0;

  /* Tints mixed from the palette only — no new hues enter the system. */
  --border-strong: #b9c6cd;
  --wash:          #f9fafb;

  /* Type scale — display (h1), subheading (h2/h3/h4), body (everything else). */
  --fs-display: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem); /* 28px → 36px */
  --fs-subhead: 1.25rem;   /* 20px */
  --fs-lede:    1.0625rem; /* 17px, intro paragraphs only */
  --fs-body:    0.875rem;  /* 14px */

  --wrap:  1120px;
  --prose: 66ch;

  --radius:    0.25rem;  /* 4px — Stitch control/panel radius */
  --radius-sm: 0.125rem; /* 2px — checkboxes, small chips */

  --hair: 1px solid var(--border);
  --rule: 2px solid var(--primary);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1 {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
  max-width: 22ch;
}

h2 {
  font-size: var(--fs-subhead);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  max-width: 30ch;
}

h3, h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 0.4em;
}
h4 { font-weight: 500; }

p, ul, ol, dl, table, figure { margin: 0 0 1.15em; }
p, li { max-width: var(--prose); }

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

strong, b { font-weight: 700; }

small, .fs-s { font-size: var(--fs-body); line-height: 1.5; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-alt);
  border: var(--hair);
  border-radius: var(--radius-sm);
  padding: 5px 10px 5px 8px;
  margin: 0 0 1.1em;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--primary);
  flex-shrink: 0;
}

.lede {
  font-size: var(--fs-lede);
  font-weight: 500;
  max-width: 60ch;
  border-top: var(--rule);
  padding-top: 1.1em;
  margin-top: 0;
}

.muted { color: var(--ink-muted); }

.note {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  max-width: 78ch;
  line-height: 1.55;
}
.note a { color: var(--ink-muted); }

/* Handover markers — the [NEED: x] strings the buyer fills in. Deliberately
   legible rather than hidden: they are the product's fill-in-the-blanks. */
.need {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--primary);
  background: var(--surface-alt);
  border: 1px dashed var(--secondary);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.5em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.prose { max-width: var(--prose); }

section { padding: clamp(44px, 5.5vw, 80px) 0; border-top: var(--hair); }
section.tint { background: var(--surface); }
section.first { border-top: 0; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: var(--white);
  padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.cols {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cols-2 { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols-2 { grid-template-columns: 1.15fr 1fr; } }

/* Homepage hero: intro text beside a short aside, with the comparison grid
   running full width beneath both. The table is the hero, so it does not get
   crammed into a half column and forced to scroll on a desktop. */
.hero-intro { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; margin-bottom: clamp(34px, 4vw, 54px); }
@media (min-width: 900px) { .hero-intro { grid-template-columns: 1.55fr 1fr; align-items: start; } }
.hero-aside { border-top: var(--rule); padding-top: 1.1em; }
.hero-aside h2 { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--ink-muted); margin-bottom: 0.9em; max-width: none; }
.hero-aside p { font-size: var(--fs-body); color: var(--ink); }

.stack > * + * { margin-top: 1.15em; }

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

.site-head { border-bottom: var(--rule); background: var(--white); }
.site-head .wrap {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; padding: 16px 0;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--primary);
  line-height: 1.1; margin-right: auto;
}
.brand-logo { flex-shrink: 0; height: 42px; width: auto; display: block; }
.brand-copy { display: block; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-body); }
.brand-copy .tagline { display: block; font-size: var(--fs-body); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 3px; }

.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nav a {
  font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; text-decoration: none; color: var(--ink-muted);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }

.head-tel { font-size: var(--fs-body); text-align: right; line-height: 1.4; }
.head-tel span { display: block; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.head-tel a { font-size: 1rem; font-weight: 700; text-decoration: none; color: var(--primary); }

.site-foot { background: var(--white); color: var(--ink); border-top: var(--rule); padding: clamp(44px, 5vw, 72px) 0 28px; }
.site-foot a { color: var(--primary); text-decoration-color: var(--secondary); }
.site-foot h3 { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); font-weight: 600; margin-bottom: 1em; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 0.5em; font-size: var(--fs-body); color: var(--ink-muted); }
.site-foot .need { background: var(--surface-alt); color: var(--primary); border-color: var(--secondary); }
.foot-brand { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.footer-logo { height: 36px; width: auto; margin-bottom: 12px; }
.foot-legal {
  border-top: var(--hair); margin-top: 36px; padding-top: 20px;
  font-size: var(--fs-body); color: var(--ink-muted); max-width: none;
}
.foot-legal p { max-width: 86ch; margin-bottom: 0.6em; }
.foot-legal a { color: var(--ink-muted); }
.foot-legal strong { color: var(--primary); }

/* --------------------------------------------------------------------------
   Buttons — one style, used sparingly.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; text-decoration: none;
  background: var(--primary); color: var(--white);
  border: 1px solid var(--primary); border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0 22px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { background: var(--white); color: var(--primary); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--primary); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.6em; }

/* --------------------------------------------------------------------------
   Tables — the spine of this site.
   -------------------------------------------------------------------------- */

.scroller {
  overflow-x: auto; margin: 0 0 1em;
  border: var(--hair); border-radius: var(--radius); background: var(--white);
}
.scroller:focus-visible { outline: 2px solid var(--primary); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption {
  text-align: left; font-size: var(--fs-body); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  padding: 12px 14px;
  border-bottom: var(--hair);
}
th, td { text-align: left; padding: 11px 14px; border-bottom: var(--hair); vertical-align: top; font-size: var(--fs-body); letter-spacing: 0.01em; }
thead th {
  background: var(--surface-alt);
  border-bottom: var(--rule); font-size: var(--fs-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--primary);
}
tbody th { font-weight: 500; font-size: var(--fs-body); }
td.num, th.num { text-align: right; }
tbody tr:nth-child(even) { background: var(--wash); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* The blank quote-comparison grid. Empty cells are the point. */
.compare th:first-child { width: 34%; min-width: 190px; }
.compare thead th + th { text-align: center; }
.compare tbody tr:nth-child(even) { background: transparent; }
.compare td.blank {
  border-left: var(--hair);
  height: 46px;
  min-width: 108px;
  background: var(--white);
}
.compare tbody th { font-weight: 700; color: var(--primary); padding-right: 20px; }
.compare tbody th span { display: block; font-weight: 400; color: var(--ink-muted); letter-spacing: 0; text-transform: none; }
section.tint .compare td.blank { background: var(--white); }

/* --------------------------------------------------------------------------
   Figures / stat row
   -------------------------------------------------------------------------- */

.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: var(--rule); }
.stats div { padding: 20px 20px 20px 0; border-bottom: var(--hair); }
.stats b { display: block; font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--primary); }
.stats span { display: block; font-size: var(--fs-body); color: var(--ink-muted); margin-top: 6px; max-width: 30ch; }

/* --------------------------------------------------------------------------
   Cards / list blocks — hairlines only, never boxes with shadows.
   -------------------------------------------------------------------------- */

.entry { border-top: var(--rule); padding-top: 18px; }
.entry h3 { margin-bottom: 0.3em; }
.entry p { font-size: var(--fs-body); color: var(--ink-muted); margin-bottom: 0.6em; }
.entry a { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--secondary); }
.entry a:hover { border-bottom-color: var(--primary); }

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 0.55em; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 1px; background: var(--primary);
}

/* Ranked causes — the /problems/ cluster's diagnosis list. Numbered rule,
   same restraint as .stats and .entry: no colour beyond the palette,
   hierarchy from weight and a border. */
.ranked { list-style: none; padding: 0; counter-reset: rank; border-top: var(--rule); }
.ranked li { counter-increment: rank; border-bottom: var(--hair); padding: 16px 0 16px 40px; position: relative; }
.ranked li::before {
  content: counter(rank);
  position: absolute; left: 0; top: 16px;
  font-size: var(--fs-body); font-weight: 700; color: var(--ink-muted);
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border: var(--hair); border-radius: var(--radius-sm);
}
.ranked .rank {
  display: inline-block; margin-left: 10px;
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ranked p { font-size: var(--fs-body); color: var(--ink-muted); margin: 0.35em 0 0; }

/* Two-way callout: the jurisdiction split. */
.split { display: grid; gap: 0; grid-template-columns: 1fr; border-top: var(--rule); }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } }
.split > div { padding: 24px 28px 26px 0; border-bottom: var(--hair); }
@media (min-width: 820px) { .split > div + div { padding-left: 34px; border-left: var(--hair); } }
.split h3 { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-body); color: var(--ink-muted); font-weight: 600; }
.split p { font-size: var(--fs-body); }
.split .who { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; max-width: 24ch; color: var(--primary); }

/* Pull quote / key statement. Same size as body; weight and rule do the work. */
.key { border-left: var(--rule); padding: 4px 0 4px 22px; margin: 1.8em 0; font-weight: 500; max-width: 58ch; }

/* FAQ */
.faq { border-top: var(--rule); }
.faq > div { border-bottom: var(--hair); padding: 22px 0; }
.faq h3 { max-width: 60ch; }
.faq p { font-size: var(--fs-body); color: var(--ink-muted); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

form { max-width: 34rem; }
label { display: block; font-size: var(--fs-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; color: var(--primary); }
input, select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--primary);
  background: var(--white); border: var(--hair); border-radius: var(--radius);
  padding: 10px 12px; margin: 0 0 20px;
  height: 44px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
textarea { min-height: 120px; height: auto; resize: vertical; }

/* --------------------------------------------------------------------------
   Print — the checklist page is meant to leave the screen.
   -------------------------------------------------------------------------- */

.print-hint { font-size: var(--fs-body); color: var(--ink-muted); }

@media print {
  :root { --fs-display: 18pt; --fs-subhead: 12pt; --fs-body: 8pt; }
  body { color: #000; font-size: 10pt; line-height: 1.4; }
  .site-head, .site-foot, .nav, .btn, .btn-row, .no-print, .skip { display: none !important; }
  section { padding: 0 0 14pt; border-top: 0; break-inside: auto; }
  section.tint { background: transparent; }
  .wrap { width: 100%; }
  h1 { font-size: 18pt; margin-bottom: 6pt; }
  h2 { font-size: 12pt; font-weight: 700; margin: 12pt 0 5pt; break-after: avoid; }
  h3 { font-size: 10pt; break-after: avoid; }
  p, li { max-width: none; }
  .print-only { display: block !important; }
  table { break-inside: auto; }
  tr, .check-row { break-inside: avoid; }
  th, td { border-bottom: 1px solid #999; padding: 5pt 6pt 5pt 0; }
  thead th { border-bottom: 1.5pt solid #000; background: transparent; }
  .scroller { border: 0; }
  .compare td.blank { height: 26pt; border: 1px solid #999; }
  .print-foot { display: block !important; border-top: 1px solid #000; margin-top: 14pt; padding-top: 6pt; font-size: 8pt; }
}

.print-only, .print-foot { display: none; }

/* --------------------------------------------------------------------------
   Printable checklist page — fill-in rows
   -------------------------------------------------------------------------- */

.check-group { border-top: var(--rule); padding-top: 16px; margin-bottom: 34px; break-inside: avoid; }
.check-group > h3 {
  font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-muted); font-weight: 600; margin-bottom: 14px;
}
.check-row {
  display: grid; grid-template-columns: 22px 1fr; gap: 0 12px;
  padding: 10px 0; border-bottom: var(--hair); align-items: start;
}
.check-row .box { width: 14px; height: 14px; border: 1px solid var(--primary); border-radius: var(--radius-sm); margin-top: 4px; }
.check-row p { margin: 0; font-size: var(--fs-body); max-width: 74ch; }
.check-row p em { font-style: normal; color: var(--ink-muted); display: block; }
.check-row .line { grid-column: 2; border-bottom: 1px solid var(--secondary); height: 20px; margin-top: 8px; }

@media (max-width: 640px) {
  .site-head .wrap { padding: 14px 0; }
  .head-tel { text-align: left; }
  .brand { margin-right: 0; width: 100%; }
  th, td { padding: 10px 12px; }
}