/* ============================================================
   HVAC360 DESIGN SYSTEM

   NAVY + WHITE + BLUE        core professional identity
   CYAN                       airflow, cooling, technology
   TEAL                       freshness and indoor air quality
   GREEN / AMBER / RED        system status only

   MANROPE                    headings
   INTER                      body
   IBM PLEX MONO              technical numbers and readings

   ------------------------------------------------------------
   One note on where this deviates from the brief, and why.

   Eight of the specified colours fail contrast when used as small
   text on white: teal at 2.99, cyan at 2.02, amber at 2.08, green
   at 3.33. That is not a fault in the palette, it is what those
   hues do at small sizes. So every one of them is kept exactly as
   specified for fills, dots, icons, borders and large numbers, and
   a darker sibling is used only when the same colour has to appear
   as a word. This is what rule 2 already asks for: status is
   carried by a badge and a label, never by colour alone.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Core brand ---- */
  --navy:        #0B1F33;   /* nav, hero, footer, CTA bands, sidebar */
  --navy-soft:   #14304a;   /* hover on navy surfaces */
  --blue:        #1677C8;   /* primary action */
  --blue-hover:  #0F66AE;
  --blue-text:   #1574c2;   /* the same blue, safe as a link on cool white */
  --cyan:        #39C6E8;   /* airflow accent, used sparingly */
  --cyan-text:   #117a94;   /* when cyan must be a word */
  --teal:        #12A6A6;   /* indoor air quality, freshness */
  --teal-text:   #0d7a7a;
  --teal-bg:     #e7f6f6;

  /* ---- Surfaces ---- */
  --cool:        #F5F9FC;   /* page and workspace background */
  --white:       #FFFFFF;   /* cards, forms, tables */
  --border:      #DCE7EF;

  /* ---- Text ---- */
  --text:        #172B3A;   /* body and headings on light */
  --slate:       #607486;   /* secondary, metadata, helper */
  --on-navy:     #FFFFFF;
  --on-navy-2:   #AFC2D1;   /* secondary text on navy */

  /* ---- Status. Fill = your hex. Text = the safe sibling. ---- */
  --ok:          #22A06B;  --ok-bg:   #e9f6f0;  --ok-text:   #1b7d54;
  --warn:        #F0A51A;  --warn-bg: #fef6e8;  --warn-text: #98660a;
  --crit:        #D64545;  --crit-bg: #fbecec;  --crit-text: #cb2d2d;
  --crit-solid:  #d43e3e;                        /* white text passes on this */
  --info:        #1677C8;  --info-bg: #e8f1fa;  --info-text: #146eb9;
  --off:         #8A9AAA;  --off-bg:  #f3f5f6;  --off-text:  #5f7082;

  /* ---- Secondary button ---- */
  --sec-bg:      #E8F5FA;
  --sec-text:    #0B5F80;
  --sec-hover:   #d8eef6;

  /* ---- Type ---- */
  --head: 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --t-hero: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);   /* to 72px */
  --t-h1:   clamp(2rem, 1.4rem + 2.4vw, 3.5rem);      /* to 56px */
  --t-h2:   clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem);    /* to 40px */
  --t-h3:   clamp(1.25rem, 1.1rem + .5vw, 1.6rem);    /* to 26px */
  --t-h4:   1.1875rem;
  --t-body: 1.0625rem;                                 /* 17px */
  --t-sm:   0.9375rem;
  --t-xs:   0.8125rem;
  --t-stat: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);

  /* ---- Shape and rhythm ---- */
  --r:      12px;
  --r-sm:   8px;
  --band:   clamp(3.5rem, 2rem + 4.5vw, 6rem);
  --gap:    1.25rem;
  --shadow: 0 1px 2px rgba(11,31,51,.04), 0 4px 12px -6px rgba(11,31,51,.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-h4); font-weight: 600; }
p  { margin: 0 0 1em; }
a  { color: var(--blue-text); }
img { max-width: 100%; display: block; }

/* Anything an instrument produced */
.num, .stat-value, .kpi-value, td.num, .reading {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Section rhythm. Never all white. ---------- */
section { padding: var(--band) 0; }
section.cool  { background: var(--cool); }
section.navy  { background: var(--navy); color: var(--on-navy-2); }
section.navy h1, section.navy h2, section.navy h3, section.navy h4 { color: var(--on-navy); }
section.navy a { color: var(--cyan); }

/* ---------- Navigation ---------- */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
header.site.scrolled { box-shadow: 0 1px 3px rgba(11,31,51,.08); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; }
header.site .logo {
  font-family: var(--head); font-weight: 800; font-size: 1.25rem;
  letter-spacing: -0.03em; color: var(--navy); text-decoration: none;
}
header.site .logo span { color: var(--blue); }
header.site nav { display: flex; align-items: center; gap: 1.75rem; }
header.site nav a {
  color: var(--text); text-decoration: none; font-size: var(--t-sm);
  font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent;
}
header.site nav a:hover { color: var(--blue-text); }
header.site nav a.active { color: var(--blue-text); border-bottom-color: var(--blue); }
@media (max-width: 940px) { header.site nav a:not(.btn) { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  padding: 12px 22px; border-radius: var(--r-sm); border: 0;
  text-decoration: none; cursor: pointer;
  background: var(--blue); color: #fff;
  transition: background .15s ease;
}
.btn:hover { background: var(--blue-hover); }
.btn .i { width: 17px; height: 17px; }

.btn.secondary { background: var(--sec-bg); color: var(--sec-text); }
.btn.secondary:hover { background: var(--sec-hover); }

.btn.dark { background: var(--navy); color: #fff; }
.btn.dark:hover { background: var(--navy-soft); }

.btn.outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.btn.outline-light:hover { background: rgba(255,255,255,.10); }

.btn.emergency { background: var(--crit-solid); color: #fff; }
.btn.emergency:hover { background: #b93434; }

.btn.small { padding: 9px 16px; font-size: var(--t-xs); }

/* ---------- Eyebrow, lede ---------- */
.eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 .85rem;
  display: flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cyan); flex: none; }
section.navy .eyebrow { color: var(--cyan); }
.lede { font-size: 1.125rem; line-height: 1.65; color: var(--slate); max-width: 62ch; }
section.navy .lede { color: var(--on-navy-2); }
.section-head { max-width: 66ch; margin-bottom: 2.5rem; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
@media (max-width: 960px) { .g3,.g4 { grid-template-columns: repeat(2,minmax(0,1fr)); } .split { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .g2,.g3,.g4 { grid-template-columns: 1fr; } }

/* ---------- Cards. One visual language, not a colour per card. ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
}
.card.link { transition: border-color .15s ease, box-shadow .15s ease; }
.card.link:hover { border-color: #b9cfe0; box-shadow: var(--shadow); }

.card .idx {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--slate); letter-spacing: .08em; display: block; margin-bottom: .9rem;
}
.card .i-plate {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--info-bg); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card .i-plate.air  { background: var(--teal-bg); color: var(--teal-text); }
.card .i-plate.cool { background: #ebf9fd; color: var(--cyan-text); }
.card .i-plate .i { width: 21px; height: 21px; }
.card h3 { margin-bottom: .4rem; font-size: 1.1875rem; }
.card p  { color: var(--slate); font-size: var(--t-sm); margin: 0; }
.card .go {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1rem; font-size: var(--t-sm); font-weight: 600;
  color: var(--blue-text); text-decoration: none;
}
.card .go .i { width: 15px; height: 15px; }
.card dl { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: var(--t-sm); }
.card dt { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-top: .8rem; }
.card dt:first-child { margin-top: 0; }
.card dd { margin: .2rem 0 0; color: var(--text); }

/* ---------- Icons ---------- */
.i { width: 20px; height: 20px; stroke: currentColor; fill: none;
     stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
     flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Statistics ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem; }
.stats .stat-value {
  font-family: var(--head); font-weight: 800; font-size: var(--t-stat);
  color: var(--blue); line-height: 1; display: block; letter-spacing: -0.03em;
}
section.navy .stats .stat-value { color: var(--cyan); }
.stats .stat-label { color: var(--slate); font-size: var(--t-sm); margin-top: .6rem; display: block; }
section.navy .stats .stat-label { color: var(--on-navy-2); }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.75rem; } }

/* ---------- Status badges. Colour plus a word, always. ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 600;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.badge.ok    { background: var(--ok-bg);   color: var(--ok-text); }
.badge.ok    .dot { background: var(--ok); }
.badge.warn  { background: var(--warn-bg); color: var(--warn-text); }
.badge.warn  .dot { background: var(--warn); }
.badge.crit  { background: var(--crit-bg); color: var(--crit-text); }
.badge.crit  .dot { background: var(--crit); }
.badge.info  { background: var(--info-bg); color: var(--info-text); }
.badge.info  .dot { background: var(--info); }
.badge.off   { background: var(--off-bg);  color: var(--off-text); }
.badge.off   .dot { background: var(--off); }

/* ---------- Report ---------- */
.report { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.report-head { background: var(--navy); color: var(--on-navy); padding: 1.15rem 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.report-head .who { font-family: var(--head); font-weight: 700; font-size: 1.0625rem; }
.report-head .meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--on-navy-2); margin-top: .2rem; }
.report-body { padding: 1.4rem; }
.report h4 { color: var(--blue-text); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); font-weight: 500; margin: 1.6rem 0 .8rem; }
.report h4:first-child { margin-top: 0; }

.score { display: flex; align-items: center; gap: 1.25rem; padding: 1.15rem 1.25rem; border-radius: var(--r-sm); background: var(--warn-bg); }
.score .kpi-value { font-family: var(--head); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--warn-text); }
.score.ok   { background: var(--ok-bg); }   .score.ok   .kpi-value { color: var(--ok-text); }
.score.crit { background: var(--crit-bg); } .score.crit .kpi-value { color: var(--crit-text); }
.score .of { font-size: 1rem; color: var(--slate); font-family: var(--body); }
.score .band { font-weight: 600; color: var(--text); }
.score .note { font-size: var(--t-sm); color: var(--slate); margin: .15rem 0 0; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table thead th {
  text-align: left; background: var(--cool); color: var(--slate);
  font-family: var(--mono); font-weight: 500; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
  padding: .7rem .9rem; border-bottom: 1px solid var(--border);
}
table td { padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table tbody tr:last-child td { border-bottom: 0; }
table td.num { text-align: right; white-space: nowrap; color: var(--text); font-weight: 500; }
.table-card { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--white); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem; padding: 1.35rem 0; border-top: 1px solid var(--border); }
.step:last-child { border-bottom: 1px solid var(--border); }
.step .n { font-family: var(--mono); font-size: var(--t-sm); color: var(--blue-text); font-weight: 500; }
.step h3 { font-size: 1.125rem; margin: 0 0 .25rem; }
.step p  { margin: 0; color: var(--slate); font-size: var(--t-sm); }

/* ---------- Imagery ---------- */
.shot { position: relative; overflow: hidden; border-radius: var(--r); background: var(--cool); line-height: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.wide { aspect-ratio: 16/9; }
.shot.tall { aspect-ratio: 4/5; }
.shot.sq   { aspect-ratio: 1/1; }
.shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.25rem 1rem .8rem;
  background: linear-gradient(to top, rgba(11,31,51,.88), rgba(11,31,51,0));
  color: #d5e2ee; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5;
}
figure { margin: 0; }

/* ---------- Hero ---------- */
.hero { background: var(--navy); color: var(--on-navy-2); padding: clamp(3.5rem,2rem+4vw,6rem) 0; }
.hero h1 { font-size: var(--t-hero); color: #fff; max-width: 16ch; margin-bottom: 1rem; }
.hero .lede { color: var(--on-navy-2); font-size: 1.1875rem; margin-bottom: 2rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .assure { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: var(--t-sm); color: var(--on-navy-2); }
.hero .assure span { display: inline-flex; align-items: center; gap: .5rem; }
.hero .assure .i { color: var(--cyan); width: 17px; height: 17px; }

/* ---------- Page head ---------- */
.page-head { background: var(--navy); color: var(--on-navy-2); padding: clamp(2.75rem,2rem+2vw,4rem) 0; }
.page-head h1 { color: #fff; margin-bottom: .5rem; }
.page-head .lede { color: var(--on-navy-2); margin: 0; }

/* ---------- Problem chooser, customer-first ---------- */
.problems { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 900px) { .problems { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 580px) { .problems { grid-template-columns: 1fr; } }
.problem {
  display: flex; align-items: flex-start; gap: .85rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.15rem 1.25rem;
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.problem:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.problem .i { color: var(--blue); margin-top: 2px; }
.problem strong { display: block; font-family: var(--head); font-weight: 700; font-size: 1.0625rem; margin-bottom: .2rem; }
.problem span { font-size: var(--t-sm); color: var(--slate); }

/* ---------- Notes ---------- */
.note { border-left: 3px solid var(--blue); background: var(--info-bg); padding: 1rem 1.2rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--t-sm); }
.note.air  { border-left-color: var(--teal); background: var(--teal-bg); }
.note.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.note strong { color: var(--text); }
.note p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: var(--t-body); color: var(--text);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 13px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,200,.15);
}
.field .hint { font-size: var(--t-xs); color: var(--slate); margin-top: .3rem; }

/* ---------- Footer ---------- */
footer.site { background: var(--navy); color: var(--on-navy-2); padding: 3.5rem 0 2rem; font-size: var(--t-sm); }
footer.site a { color: #cfe0ee; text-decoration: none; }
footer.site a:hover { color: #fff; }
footer.site h4 { color: #fff; font-size: var(--t-sm); margin: 0 0 .8rem; font-family: var(--head); font-weight: 700; }
footer.site .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
footer.site .legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.35rem; font-size: var(--t-xs); color: #8fa6bb; }
@media (max-width: 720px) { footer.site .cols { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- Utility ---------- */
.muted { color: var(--slate); }
.small { font-size: var(--t-sm); }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.disclaimer { font-size: var(--t-xs); color: var(--slate); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card.link, .problem, .btn { transition: none; }
}