/* ==========================================================================
   SmartClimate — brand.css
   Design tokens are copied verbatim from the build brief, section 11.
   Do not edit the token values here without updating the brief — this
   file is the single source of truth for colour and type across the site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --plum:     #2E1330;   /* primary ground */
  --blue:     #0B6F94;
  --green:    #2E8B4F;
  --blue-lt:  #6FC2DE;   /* on plum only */
  --green-lt: #6FBE7A;   /* on plum only */
  --paper:    #F5F7F8;
  --ink:      #14181C;
  --rule:     #8A949E;
  /* One family (Archivo) for both display and body — it has a width
     axis as well as weight, so headings lean on font-stretch instead
     of a second typeface. Replaced Nunito/Nunito Sans, 2026-09-16 —
     see design-refs/NOTES.md's "Branding pass" section. IBM Plex Mono
     (--mono) is unaffected — it's a distinct signal for numerals,
     badges and credits, not part of this change. */
  --display:  "Archivo", ui-rounded, system-ui, sans-serif;
  --body:     "Archivo", system-ui, sans-serif;
  --mono:     "IBM Plex Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Accessibility constraints (brief, section 11) — do not violate these:
   - Deep green (--green) never passes AA for body text on light backgrounds.
     It is a mark, heading and accent colour only.
   - Light blue (--blue-lt) and light green (--green-lt) only work on plum.
     They fail contrast on paper/off-white.
   - Deep blue (--blue) passes on off-white (--paper) at all text sizes.
   - Plum (--plum) is the primary ground, not white/paper, because it is
     the only surface where the full palette works.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

*{
  margin: 0;
}

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

html, body{
  height: 100%;
}

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

input, button, textarea, select{
  font: inherit;
  color: inherit;
}

button{
  cursor: pointer;
  background: none;
  border: none;
}

a{
  color: inherit;
}

ul, ol{
  list-style: none;
  padding: 0;
}

table{
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body{
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--plum);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 105%;
  line-height: 1.15;
  /* No colour set here deliberately: headings inherit the surrounding
     text colour (off-white on the default plum ground). Deep green is
     a heading/accent colour ONLY on paper surfaces — see .surface-paper
     below — because it doesn't reliably pass contrast on plum. */
}

/* font-stretch/letter-spacing only — font-size and line-height stay as
   they were tuned per component (hero__heading, page-intro__heading etc.
   already override these anyway; a uniform line-height tight enough for
   a single-line hero would crowd the many multi-line wrapped headings
   elsewhere on the site, so that wasn't touched). */
h1{ font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-stretch: 108%; letter-spacing: -0.015em; }
h2{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-stretch: 105%; letter-spacing: -0.012em; }
h3{ font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-stretch: 100%; letter-spacing: -0.008em; }

p{
  max-width: 65ch;
  text-wrap: pretty;
}

/* Small section labels — sentence case, no tracking, no caps. Was an
   uppercase tracked mono label; moved off that (branding pass,
   2026-09-16, see design-refs/NOTES.md) since it read as a generated-
   page signature. Colour still comes from each section's own
   `*-eyebrow` modifier class below, unchanged. */
.eyebrow{
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

small, .text-small{
  font-size: 0.875rem;
}

/* Tabular figures for anything showing a number that might update or
   sit in a column — kW ratings, prices, stats — so digits don't jitter
   or misalign. */
table,
.grants-table__amount,
.option__cost-value,
.stat__number,
.warranty__figure,
.archetype-hero__stat-value{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   Utility: surfaces
   Use these classes to switch ground colour deliberately, rather than
   hard-coding backgrounds inline. Text colour follows the ground.
   -------------------------------------------------------------------------- */

.surface-plum{
  background: var(--plum);
  color: var(--paper);
}

.surface-plum h1,
.surface-plum h2,
.surface-plum h3,
.surface-plum h4,
.surface-plum h5,
.surface-plum h6{
  color: var(--paper);
}

.surface-paper{
  background: var(--paper);
  color: var(--ink);
}

.surface-paper h1,
.surface-paper h2,
.surface-paper h3,
.surface-paper h4,
.surface-paper h5,
.surface-paper h6{
  color: var(--green);
}

.surface-paper a,
.surface-paper .link{
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Site header
   Mobile-first. Desktop nav/phone appear, and the mobile menu toggle
   disappears, at the 860px breakpoint used across the shell.
   -------------------------------------------------------------------------- */

.site-header{
  background: var(--plum);
}

.site-header__bar{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__brand{
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.site-header__brand .logo-mark{
  width: 16px;
  height: 16px;
  flex: none;
}

.site-header__wordmark{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

/* Two-tone wordmark (brief §11 / leaf sample): "Smart" in blue,
   "Climate" in green — light variants since this only ever appears
   on the plum ground (header, footer). Shared between header and
   footer wordmarks. */
.wordmark__smart{
  color: var(--blue-lt);
}

.wordmark__climate{
  color: var(--green-lt);
}

.site-header__nav{
  display: none;
  align-items: center;
  gap: 20px;
}

.site-header__nav a{
  font-size: 0.875rem;
  color: rgba(245,247,248,0.78);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__nav a:hover{
  color: var(--blue-lt);
}

.site-header__phone{
  display: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--blue-lt);
  text-decoration: none;
  border: 1px solid rgba(111,194,222,0.4);
  border-radius: 3px;
  padding: 8px 12px;
}

.site-header__phone:hover{
  color: var(--green-lt);
  border-color: var(--green-lt);
}

/* Checkbox/label toggle — no JS needed for the mobile menu. */
.site-header__toggle-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.site-header__toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.site-header__toggle span{
  height: 1.5px;
  background: var(--paper);
  display: block;
}

.site-header__mobile-nav{
  display: none;
  flex-direction: column;
  padding: 4px 20px 20px;
}

.site-header__mobile-nav a{
  padding: 12px 0;
  font-size: 1rem;
  color: var(--paper);
  text-decoration: none;
  border-top: 1px solid rgba(245,247,248,0.12);
}

.site-header__toggle-input:checked ~ .site-header__mobile-nav{
  display: flex;
}

@media (min-width: 860px){
  .site-header__bar{
    padding: 22px 56px;
  }
  .site-header__brand .logo-mark{
    width: 18px;
    height: 18px;
  }
  .site-header__nav{
    display: flex;
  }
  .site-header__phone{
    display: inline-block;
  }
  .site-header__toggle{
    display: none;
  }
  .site-header__mobile-nav{
    display: none !important;
  }
}

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

.site-footer{
  background: var(--plum);
  padding: 32px 20px 36px;
}

.site-footer__inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-footer__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-footer__brand .logo-mark{
  width: 13px;
  height: 13px;
  flex: none;
}

.site-footer__wordmark{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
}

.site-footer__warranty{
  margin-top: 14px;
  color: var(--blue-lt);
}

.site-footer__legal{
  margin-top: 10px;
  color: rgba(245,247,248,0.55);
  line-height: 1.9;
}

.site-footer__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.site-footer__nav-col{
  display: contents;
}

.site-footer__nav a{
  font-size: 0.875rem;
  color: var(--blue-lt);
  text-decoration: none;
}

.site-footer__nav a:hover{
  color: var(--green-lt);
}

@media (min-width: 860px){
  .site-footer{
    padding: 44px 56px 52px;
  }
  .site-footer__brand .logo-mark{
    width: 15px;
    height: 15px;
  }
  .site-footer__inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  .site-footer__nav{
    gap: 0 48px;
  }
  .site-footer__nav-col{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   Homepage — shared
   -------------------------------------------------------------------------- */

.house-icon{
  display: block;
}

.btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 19px 30px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  line-height: 1;
  background: var(--green-lt);
  color: var(--plum);
  text-decoration: none;
}

.btn-primary:hover{
  background: var(--blue-lt);
}

.btn-primary__arrow{
  font-family: var(--mono);
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Homepage — hero
   -------------------------------------------------------------------------- */

.hero{
  background: var(--plum);
  padding: 34px 20px 40px;
}

.hero__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.hero__eyebrow{
  color: var(--blue-lt);
  max-width: 34ch;
}

.hero__heading{
  margin-top: 18px;
  font-size: clamp(2.5rem, 1.7rem + 3.5vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 13ch;
  text-wrap: pretty;
}

.hero__lede{
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(245,247,248,0.82);
  max-width: 44ch;
}

.hero__cta{
  margin-top: 26px;
  width: 100%;
  justify-content: space-between;
  min-height: 56px;
  box-sizing: border-box;
}

.hero__start{
  display: none;
}

.hero__start-header{
  color: var(--blue-lt);
  padding: 16px 20px;
  border-bottom: 1px solid rgba(111,194,222,0.22);
}

.hero__start-list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(245,247,248,0.1);
  color: var(--paper);
  text-decoration: none;
  font-size: 1rem;
}

.hero__start-list a:last-child{
  border-bottom: none;
}

.hero__start-list a:hover{
  background: rgba(245,247,248,0.07);
}

.hero__start-label{
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__start-list .house-icon{
  width: 34px;
  height: 27px;
  flex: none;
}

@media (min-width: 860px){
  .hero{
    padding: 76px 56px 84px;
  }
  .hero__inner{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 72px;
    align-items: center;
  }
  .hero__cta{
    width: auto;
    justify-content: flex-start;
    min-height: 0;
  }
  .hero__start{
    display: block;
    border: 1px solid rgba(111,194,222,0.28);
    border-radius: 3px;
    background: rgba(245,247,248,0.04);
  }
}

/* --------------------------------------------------------------------------
   Homepage — house types
   -------------------------------------------------------------------------- */

.house-types{
  background: var(--plum);
  padding: 8px 20px 44px;
}

.house-types__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.house-types__rule{
  height: 1px;
  background: rgba(245,247,248,0.14);
}

.house-types__header{
  margin-top: 30px;
}

.house-types__eyebrow{
  color: var(--blue-lt);
}

.house-types__heading{
  margin-top: 12px;
}

.house-types__intro{
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(245,247,248,0.75);
}

.house-types__grid{
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.house-card{
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 3px;
  padding: 14px 16px;
  min-height: 92px;
  background: rgba(245,247,248,0.05);
  border: 1px solid rgba(111,194,222,0.22);
  text-decoration: none;
  color: inherit;
}

.house-card:hover{
  background: rgba(245,247,248,0.09);
  border-color: var(--green-lt);
}

.house-card .house-icon{
  width: 88px;
  height: 70px;
  flex: none;
}

.house-card__body{
  flex: 1;
}

.house-card__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--paper);
}

.house-card__line{
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(245,247,248,0.75);
}

.house-card__hint{
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--blue-lt);
}

.house-card__footer{
  display: none;
}

@media (min-width: 860px){
  .house-types{
    padding: 0 56px 88px;
  }
  .house-types__header{
    margin-top: 56px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .house-types__intro{
    margin-top: 0;
    max-width: 32ch;
    text-align: right;
    font-size: 1rem;
  }
  .house-types__grid{
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  .house-card{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px 18px 20px;
    min-height: 0;
  }
  .house-card .house-icon{
    width: 100%;
    height: auto;
    flex: none;
  }
  .house-card__body{
    flex: none;
  }
  .house-card__title{
    font-size: 1.1875rem;
  }
  .house-card__line{
    margin-top: 6px;
    font-size: 0.875rem;
  }
  .house-card__hint{
    margin-top: 10px;
    font-size: 0.8125rem;
  }
  .house-card__footer{
    display: block;
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-lt);
  }
}

/* --------------------------------------------------------------------------
   Homepage — process strip
   -------------------------------------------------------------------------- */

.process{
  background: var(--paper);
  padding: 40px 20px 44px;
}

.process__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.process__eyebrow{
  color: var(--blue);
}

.process__heading{
  margin-top: 12px;
  color: var(--green);
}

.process__list{
  margin-top: 26px;
  position: relative;
}

.process__connector{
  position: absolute;
  top: 6px;
  bottom: 22px;
  left: 15px;
  width: 1px;
  background: rgba(11,111,148,0.28);
  z-index: 0;
}

.process__items{
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.process__item{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}

.process__item:last-child{
  padding-bottom: 0;
}

.process__circle{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue);
}

.process__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--green);
}

.process__desc{
  margin-top: 4px;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: rgba(20,24,28,0.7);
}

@media (min-width: 860px){
  .process{
    padding: 76px 56px 80px;
  }
  .process__heading{
    font-size: 2.5rem;
  }
  .process__list{
    margin-top: 44px;
  }
  .process__connector{
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: auto;
    height: 1px;
    width: auto;
  }
  .process__items{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .process__item{
    display: block;
    padding-bottom: 0;
    padding-right: 28px;
  }
  .process__item:last-child{
    padding-right: 0;
  }
  .process__circle{
    margin-bottom: 16px;
  }
  .process__title{
    font-size: 1.3125rem;
  }
  .process__desc{
    margin-top: 8px;
    font-size: 0.875rem;
    max-width: 28ch;
  }
}

/* --------------------------------------------------------------------------
   Homepage — warranty
   -------------------------------------------------------------------------- */

.warranty{
  background: var(--plum);
  padding: 44px 20px;
}

.warranty__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.warranty__eyebrow{
  color: var(--blue-lt);
}

.warranty__figure{
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 2rem + 6vw, 8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--green-lt);
}

.warranty__unit{
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,247,248,0.6);
}

.warranty__copy{
  margin-top: 16px;
  font-size: clamp(1.4375rem, 1.2rem + 1.5vw, 2.125rem);
  line-height: 1.32;
  max-width: 42ch;
}

.warranty__copy strong{
  color: var(--green-lt);
  font-weight: 700;
}

@media (min-width: 860px){
  .warranty{
    padding: 80px 56px;
  }
  .warranty__inner{
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
  }
  .warranty__copy{
    margin-top: 0;
    padding-top: 12px;
    padding-left: 40px;
    border-left: 1px solid rgba(245,247,248,0.16);
  }
}

/* --------------------------------------------------------------------------
   Homepage — estimate CTA
   -------------------------------------------------------------------------- */

.estimate-cta{
  background: var(--paper);
  color: var(--ink);
  padding: 40px 20px 48px;
}

.estimate-cta__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.estimate-cta__eyebrow{
  color: var(--blue);
}

.estimate-cta__heading{
  margin-top: 12px;
  color: var(--green);
  font-weight: 700;
  font-size: 1.375rem;
}

.estimate-cta .btn-primary{
  margin-top: 20px;
  width: 100%;
  justify-content: space-between;
  min-height: 54px;
  box-sizing: border-box;
}

@media (min-width: 860px){
  .estimate-cta{
    padding: 76px 56px 84px;
  }
  .estimate-cta__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .estimate-cta__heading{
    font-size: 2.25rem;
  }
  .estimate-cta .btn-primary{
    margin-top: 0;
    width: auto;
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   Find your home type — hub page
   Reuses the homepage's .house-types/.house-card pattern (brief §15
   prompt B: "the whole page is these five cards plus a short intro").
   .hub-page only overrides top padding, since on the homepage that
   section sits right under the hero, but here it's the top of the page.
   -------------------------------------------------------------------------- */

.hub-page{
  padding-top: 32px;
}

@media (min-width: 860px){
  .hub-page{
    padding-top: 56px;
  }
}

/* --------------------------------------------------------------------------
   Archetype detail page
   Renders once per archetype from archetypes.json via pagination
   (src/find-your-home-type/archetype.njk). Three options are given
   strictly equal visual weight - brief §15 prompt C's explicit warning
   against a "recommended"-badge SaaS pricing-table pattern.
   -------------------------------------------------------------------------- */

.archetype-hero{
  background: var(--plum);
  padding: 32px 20px 30px;
}

.archetype-hero__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.archetype-hero__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.archetype-hero__breadcrumb{
  color: var(--blue-lt);
}

.archetype-hero__breadcrumb a{
  color: var(--blue-lt);
}

.archetype-hero__top .house-icon{
  width: 72px;
  height: 58px;
  flex: none;
}

.archetype-hero__stats{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
}

.archetype-hero__stat-label{
  font-family: var(--mono);
  font-size: 0.59375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,247,248,0.45);
}

.archetype-hero__stat-value{
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--paper);
}

@media (min-width: 860px){
  .archetype-hero{
    padding: 48px 56px 44px;
  }
  .archetype-hero__top .house-icon{
    width: 104px;
    height: 84px;
  }
  .archetype-hero__stats{
    margin-top: 28px;
    gap: 48px;
  }
  .archetype-hero__stat-label{
    font-size: 0.65625rem;
  }
  .archetype-hero__stat-value{
    margin-top: 6px;
    font-size: 1.0625rem;
  }
}

.options{
  background: var(--paper);
  color: var(--ink);
  padding: 36px 20px 0;
}

.options__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.options__eyebrow{
  color: var(--blue);
}

.options__heading{
  margin-top: 12px;
  color: var(--green);
}

.options__list{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.option{
  padding: 26px 0;
  border-top: 1px solid rgba(11,111,148,0.28);
}

.option:last-child{
  border-bottom: 1px solid rgba(11,111,148,0.28);
}

.option__eyebrow{
  color: var(--blue);
}

.option__name{
  margin-top: 8px;
  color: var(--green);
  font-weight: 700;
  font-size: 1.1875rem;
}

.option__diagram{
  width: 100%;
  height: 76px;
  margin-top: 16px;
}

.option__desc{
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.55;
}

.option__cost{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,111,148,0.18);
}

.option__cost-label{
  color: rgba(20,24,28,0.55);
}

.option__cost-value{
  margin-top: 5px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4375rem;
}

.option__best-if{
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(20,24,28,0.55);
}

.option__best-if strong{
  color: var(--ink);
}

.option__breakdown{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,111,148,0.18);
}

.option__breakdown-title{
  color: var(--blue);
  margin-bottom: 8px;
}

.option__breakdown-row{
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.78125rem;
}

.option__breakdown-row span:first-child{
  color: rgba(20,24,28,0.7);
}

.option__breakdown-subtotal{
  display: flex;
  justify-content: space-between;
  padding: 7px 0 3px;
  margin-top: 3px;
  border-top: 1px solid rgba(11,111,148,0.18);
  font-size: 0.78125rem;
  font-weight: 600;
}

.option__breakdown-grant{
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.78125rem;
  color: var(--blue);
}

.option__breakdown-grant--none{
  color: rgba(20,24,28,0.55);
}

@media (min-width: 860px){
  .options{
    padding: 64px 56px 0;
  }
  .options__heading{
    font-size: 2.125rem;
    max-width: 30ch;
  }
  .options__list{
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(11,111,148,0.28);
  }
  .option{
    padding: 32px 32px 48px;
    border-top: none;
    border-right: 1px solid rgba(11,111,148,0.18);
  }
  .option:first-child{
    padding-left: 0;
  }
  .option:last-child{
    padding-right: 0;
    border-right: none;
    border-bottom: none;
  }
  .option__name{
    font-size: 1.375rem;
  }
  .option__diagram{
    height: 90px;
    margin-top: 22px;
  }
  .option__desc{
    margin-top: 22px;
    font-size: 0.9375rem;
  }
  .option__cost{
    margin-top: 22px;
    padding-top: 18px;
  }
  .option__cost-value{
    font-size: 1.625rem;
  }
  .option__best-if{
    margin-top: 18px;
    font-size: 0.875rem;
  }
  .option__breakdown{
    margin-top: 24px;
    padding-top: 16px;
  }
  .option__breakdown-row,
  .option__breakdown-subtotal,
  .option__breakdown-grant{
    font-size: 0.8125rem;
  }
}

.grant-note{
  background: var(--paper);
  color: var(--ink);
  padding: 24px 20px 0;
}

.grant-note__inner{
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(11,111,148,0.28);
  padding-top: 18px;
}

.grant-note__label{
  color: var(--blue);
}

.grant-note__text{
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (min-width: 860px){
  .grant-note{
    padding: 32px 56px 0;
  }
  .grant-note__inner{
    padding-top: 24px;
    display: flex;
    gap: 16px;
    align-items: baseline;
  }
  .grant-note__label{
    flex: none;
  }
  .grant-note__text{
    margin-top: 0;
    max-width: 80ch;
  }
}

.disclaimer{
  background: var(--paper);
  color: var(--ink);
  padding: 28px 20px 40px;
}

.disclaimer__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.disclaimer__panel{
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  padding: 20px;
}

.disclaimer__label{
  color: var(--blue);
}

.disclaimer__text{
  margin-top: 12px;
  font-size: 0.90625rem;
  line-height: 1.6;
}

@media (min-width: 860px){
  .disclaimer{
    padding: 40px 56px 64px;
  }
  .disclaimer__panel{
    padding: 28px 32px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .disclaimer__label{
    flex: none;
    padding-top: 3px;
  }
  .disclaimer__text{
    margin-top: 0;
    font-size: 1rem;
    max-width: 75ch;
  }
}

/* --------------------------------------------------------------------------
   Text-page template (how-it-works.njk and future content pages —
   About us, Grants, Care plan). Generic, reusable page-content blocks:
   a plain plum intro band, a numbered process list, a pull-quote, and
   a simple two-column table. See design-refs/NOTES.md's "Text-page
   template" section — this is deliberately a spacious, sparser layout
   than the homepage's condensed connected-circle process strip.
   -------------------------------------------------------------------------- */

.page-intro{
  background: var(--plum);
  padding: 40px 20px 36px;
}

.page-intro__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.page-intro__eyebrow{
  color: var(--blue-lt);
}

.page-intro__heading{
  margin-top: 16px;
  max-width: 18ch;
}

/* For a longer hero line that reads better over more width — e.g.
   subcontractor-signup.njk's heading. */
.page-intro__heading--wide{
  max-width: 26ch;
}

.page-intro__lede{
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(245,247,248,0.82);
  max-width: 60ch;
}

/* 404 page has no content below the intro band, so it needs to fill
   the page properly rather than reading as a thin banner. */
.not-found{
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.not-found__cta{
  margin-top: 28px;
}

@media (min-width: 860px){
  .page-intro{
    padding: 56px 56px 48px;
  }
}

.process-detail{
  background: var(--paper);
  color: var(--ink);
  padding: 40px 20px;
}

.process-detail__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.process-detail__eyebrow{
  color: var(--blue);
}

.process-detail__heading{
  margin-top: 12px;
}

.process-detail__list{
  margin-top: 28px;
  max-width: 68ch;
}

.process-detail__row{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid rgba(11,111,148,0.28);
}

.process-detail__row:last-child{
  border-bottom: 1px solid rgba(11,111,148,0.28);
}

.process-detail__number{
  font-family: var(--mono);
  font-size: 1.125rem;
  color: var(--blue);
}

.process-detail__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--green);
}

.process-detail__desc{
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* A single explanatory paragraph following the heading, in place of
   the numbered list — e.g. care-plan.njk's warranty section. */
.process-detail__note{
  margin-top: 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 65ch;
}

@media (min-width: 860px){
  .process-detail{
    padding: 64px 56px;
  }
  .process-detail__list{
    margin-top: 40px;
  }
  .process-detail__row{
    grid-template-columns: 64px 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  .process-detail__number{
    font-size: 1.375rem;
  }
  .process-detail__desc{
    margin-top: 8px;
    font-size: 1rem;
  }
  .process-detail__note{
    margin-top: 24px;
    font-size: 1rem;
  }
}

.pull-quote{
  background: var(--plum);
  padding: 48px 20px;
}

.pull-quote__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.pull-quote__bar{
  width: 40px;
  height: 3px;
  background: var(--green-lt);
}

.pull-quote__text{
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 26ch;
}

@media (min-width: 860px){
  .pull-quote{
    padding: 72px 56px;
  }
  .pull-quote__text{
    margin-top: 24px;
    font-size: 2.25rem;
  }
}

.grants-table{
  background: var(--paper);
  color: var(--ink);
  padding: 40px 20px;
}

.grants-table__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.grants-table__eyebrow{
  color: var(--blue);
}

.grants-table__heading{
  margin-top: 12px;
  max-width: 20ch;
}

.grants-table__table{
  margin-top: 28px;
  width: 100%;
  max-width: 80ch;
  border-collapse: collapse;
}

.grants-table__table th{
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20,24,28,0.55);
  font-weight: 500;
  padding: 0 12px 12px 0;
  border-bottom: 1px solid rgba(11,111,148,0.28);
}

.grants-table__amount-col{
  text-align: right;
}

.grants-table__table td{
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid rgba(11,111,148,0.18);
  font-size: 0.9375rem;
}

.grants-table__table tr:last-child td{
  border-bottom: none;
}

.grants-table__amount{
  font-weight: 700;
}

.grants-table__amount--muted{
  font-weight: 400;
  color: rgba(20,24,28,0.55);
}

.grants-table__note-standalone{
  margin-top: 20px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(20,24,28,0.6);
  max-width: 60ch;
}

.grants-table__notes{
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 70ch;
}

.grants-table__note h3{
  color: var(--green);
  font-weight: 700;
  font-size: 1.25rem;
}

.grants-table__note p{
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 860px){
  .grants-table{
    padding: 64px 56px;
  }
  .grants-table__notes{
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: none;
  }
  .grants-table__table{
    margin-top: 36px;
  }
  .grants-table__table th{
    padding: 0 16px 14px 0;
  }
  .grants-table__table td{
    padding: 16px 16px 16px 0;
    font-size: 1.0625rem;
  }
}

/* --------------------------------------------------------------------------
   Estimate wizard (request-an-estimate.njk)
   Deliberately its own minimal chrome, not the site header/footer — a
   focused flow, not a page to browse from (see design-refs/NOTES.md).
   Mobile-first; the 640px centred column and larger type kick in at the
   same 860px breakpoint used everywhere else on the site.
   -------------------------------------------------------------------------- */

/* Plum ground throughout, matching the main site (not a separate
   paper-toned page) — inherits body's own default plum/paper, so no
   override needed here. */

.wizard-header{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(245,247,248,0.12);
}

.wizard-exit[hidden],
.wizard-back[hidden],
.wizard-confirmation[hidden]{
  display: none;
}

.wizard-exit{
  display: inline-flex;
  align-items: center;
  padding: 16px 10px;
  margin: -16px -10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,247,248,0.6);
  text-decoration: none;
}

.wizard-progress{
  height: 4px;
  background: rgba(245,247,248,0.15);
}

.wizard-progress__fill{
  height: 4px;
  width: 0%;
  background: var(--blue-lt);
  transition: width 0.25s ease;
}

.wizard-main{
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.wizard-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(245,247,248,0.32);
  border-radius: 3px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--paper);
  text-decoration: none;
}

.wizard-breadcrumb{
  margin-top: 26px;
  font-size: 0.71875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(245,247,248,0.7);
  line-height: 1.5;
}

.wizard-step h1{
  margin-top: 12px;
  font-size: 1.5625rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  /* No colour override — inherits paper, same as every other heading
     on the plum ground (brand.css's own h1-h6 convention). */
}

.wizard-kicker{
  color: var(--blue-lt);
}

.wizard-lede{
  margin-top: 10px;
  font-size: 0.90625rem;
  line-height: 1.5;
  color: rgba(245,247,248,0.82);
}

.wizard-honeypot{
  position: absolute;
  left: -9999px;
}

/* Fields */

.wizard-field{
  margin-top: 28px;
}

.wizard-field label{
  display: block;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-lt);
  margin-bottom: 7px;
}

.wizard-field input,
.wizard-main input[type="text"],
.wizard-main input[type="email"],
.wizard-main input[type="tel"],
.wizard-main input[type="number"],
.wizard-main textarea{
  width: 100%;
  font-size: 1rem;
  color: var(--ink);
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid rgba(11,111,148,0.32);
  border-radius: 3px;
}

.wizard-manual-link{
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 12px 4px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--paper);
  text-decoration: underline;
}

.wizard-error{
  margin-top: 10px;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--blue-lt);
}

.wizard-cta{
  margin-top: 22px;
  width: 100%;
  background: var(--blue);
  color: var(--paper);
  border: none;
  border-radius: 3px;
  padding: 17px;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.wizard-cta:disabled{
  background: rgba(245,247,248,0.12);
  color: rgba(245,247,248,0.4);
  cursor: not-allowed;
}

.wizard-reassurance{
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.59375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,247,248,0.7);
  text-align: center;
}

/* Radio-card options (built form / fuel / insulation / address picker) */

.wizard-options{
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wizard-substep{
  margin-top: 22px;
}

.wizard-option{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(245,247,248,0.22);
  border-radius: 3px;
  padding: 16px;
  cursor: pointer;
}

.wizard-option:has(.wizard-option__input:checked){
  border-color: var(--blue-lt);
  box-shadow: 0 0 0 1px var(--blue-lt) inset;
}

.wizard-option__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wizard-option__label{
  flex: 1;
  font-weight: 700;
  font-size: 0.96875rem;
  color: var(--paper);
}

.wizard-option__icon{
  width: 34px;
  height: 27px;
  flex: none;
}

.wizard-option__dot{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,247,248,0.35);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-option__input:checked + .wizard-option__dot,
.wizard-option__input:checked ~ .wizard-option__dot{
  background: var(--blue-lt);
  border-color: var(--blue-lt);
}

.wizard-option__input:checked + .wizard-option__dot::after,
.wizard-option__input:checked ~ .wizard-option__dot::after{
  content: "✓";
  color: var(--plum);
  font-size: 0.75rem;
}

.wizard-option--described{
  align-items: flex-start;
}

.wizard-option__text{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wizard-option__desc{
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(245,247,248,0.65);
}

.wizard-option--described .wizard-option__dot{
  margin-top: 2px;
}

/* Numeric input + unit toggle */

.wizard-numeric{
  margin-top: 22px;
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid rgba(11,111,148,0.32);
  border-radius: 3px;
  padding: 14px 16px;
}

.wizard-numeric input{
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  padding: 0;
  width: auto;
}

.wizard-numeric__unit{
  font-size: 0.9375rem;
  color: rgba(20,24,28,0.7);
}

.wizard-unit-toggle{
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.wizard-unit-btn{
  position: relative;
  flex: 1;
  text-align: center;
  border: 1px solid rgba(245,247,248,0.22);
  border-radius: 3px;
  padding: 12px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--paper);
  cursor: pointer;
}

.wizard-unit-btn:has(input:checked){
  border-color: var(--blue-lt);
  box-shadow: 0 0 0 1px var(--blue-lt) inset;
}

.wizard-unit-btn input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Contact step */

.wizard-contact-grid{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wizard-field-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.wizard-field-label span:first-child{
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--paper);
}

.wizard-required-badge,
.wizard-optional-badge{
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}

.wizard-required-badge{
  background: rgba(111,194,222,0.15);
  color: var(--blue-lt);
}

.wizard-optional-badge{
  color: rgba(245,247,248,0.7);
}

.wizard-name-row{
  display: flex;
  gap: 10px;
}

.wizard-contact-pair{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Confirmation */

.wizard-confirmation{
  background: var(--plum);
  padding: 48px 20px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wizard-confirmation__check{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--green-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.wizard-confirmation__check svg{
  width: 22px;
  height: 22px;
}

.wizard-confirmation__eyebrow{
  color: var(--blue-lt);
  margin-top: 22px;
}

.wizard-confirmation__heading{
  margin-top: 14px;
  font-size: 1.6875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.wizard-confirmation__text{
  margin-top: 14px;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: rgba(245,247,248,0.82);
  max-width: 46ch;
}

.wizard-confirmation__steps{
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-top: 1px solid rgba(245,247,248,0.14);
  padding-top: 30px;
  width: 100%;
  max-width: 460px;
  text-align: left;
}

.wizard-confirmation__steps > div{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.wizard-confirmation__num{
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--green-lt);
  flex: none;
  width: 28px;
}

.wizard-confirmation__steps > div > span:last-child{
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(245,247,248,0.82);
}

.wizard-confirmation__cta{
  margin-top: 36px;
}

.wizard-confirmation__legal{
  margin-top: 28px;
  color: rgba(245,247,248,0.78);
}

.wizard-confirmation__legal--muted{
  margin-top: 10px;
  color: rgba(245,247,248,0.55);
  font-size: 0.625rem;
}

@media (min-width: 860px){
  .wizard-header{
    padding: 22px 56px;
  }
  .wizard-header .logo-mark{
    width: 18px;
    height: 18px;
  }
  .wizard-main{
    padding: 56px 40px 96px;
  }
  .wizard-back{
    padding: 14px 18px;
    font-size: 0.90625rem;
  }
  .wizard-breadcrumb{
    margin-top: 30px;
    font-size: 0.75rem;
  }
  .wizard-step h1{
    margin-top: 14px;
    font-size: 2rem;
  }
  .wizard-lede{
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.55;
  }
  .wizard-field{
    margin-top: 36px;
  }
  .wizard-option{
    padding: 18px;
    gap: 16px;
  }
  .wizard-option__label{
    font-size: 1rem;
  }
  .wizard-option__icon{
    width: 40px;
    height: 32px;
  }
  .wizard-option__dot{
    width: 22px;
    height: 22px;
  }
  .wizard-option__desc{
    font-size: 0.875rem;
  }
  .wizard-contact-pair{
    flex-direction: row;
    gap: 12px;
  }
  .wizard-contact-pair > div{
    flex: 1;
  }
  .wizard-confirmation{
    padding: 88px 40px 96px;
  }
  .wizard-confirmation__heading{
    font-size: 2.125rem;
  }
  .wizard-confirmation__text{
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   About us (src/content/about-us.md)
   Long-form editorial prose — reuses .page-intro/.pull-quote/
   .estimate-cta from the text-page template, plus two page-specific
   components: a plain prose block (no data loop needed, unlike
   process-detail/grants-table) and a two-up founder-card grid.

   This page is markdown, not a .njk template (deliberately — see
   CLAUDE.md), so its headings/paragraphs are plain h1/h2/h3/p with no
   custom classes on them; only the surrounding section/div wrappers
   and the eyebrow <p> tags are raw HTML with real classes. So these
   rules are mostly scoped by container instead of a class on the
   element itself. The one exception, `.page-intro__inner h1`, uses
   :not(.page-intro__heading) so it can't also catch how-it-works/
   grants/care-plan's h1, which DOES carry that class directly. */

.about-content{
  background: var(--paper);
  color: var(--ink);
  padding: 40px 20px;
}

.about-content__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.about-block{
  max-width: 70ch;
}

.about-block + .about-block{
  margin-top: 44px;
}

.about-block__eyebrow{
  color: var(--blue);
}

.about-content__inner h2{
  color: var(--green);
  font-weight: 700;
  font-size: 1.375rem;
}

.about-block p{
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.page-intro__inner h1:not(.page-intro__heading){
  margin-top: 16px;
  max-width: 26ch;
}

@media (min-width: 860px){
  .about-content{
    padding: 64px 56px;
  }
  .about-block + .about-block{
    margin-top: 56px;
  }
  .about-content__inner h2{
    font-size: 1.625rem;
  }
  .about-block p{
    font-size: 1rem;
  }
}

.founders{
  background: var(--paper);
  color: var(--ink);
  padding: 8px 20px 40px;
}

.founders__inner{
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(11,111,148,0.28);
  padding-top: 36px;
}

.founders__eyebrow{
  color: var(--blue);
}

.founders__inner h2{
  margin-top: 12px;
}

.founders__grid{
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.founder__photo{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  object-fit: cover;
}

.founder h3{
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3125rem;
  color: var(--green);
}

.founder p{
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 860px){
  .founders{
    padding: 8px 56px 64px;
  }
  .founders__inner{
    padding-top: 48px;
  }
  .founders__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
  }
}

/* --------------------------------------------------------------------------
   Subcontractor sign-up (subcontractor-signup.njk)
   A real intake form on the normal paper ground (unlike the estimate
   wizard's own plum-ground field styles) — new dedicated classes
   rather than reusing .wizard-field, since that component's label
   colour (blue-lt) assumes a plum background and would fail contrast
   here.
   -------------------------------------------------------------------------- */

.partner-form{
  background: var(--paper);
  color: var(--ink);
  padding: 40px 20px 56px;
}

.partner-form__inner{
  max-width: 640px;
  margin: 0 auto;
}

.partner-form__section{
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(11,111,148,0.28);
}

.partner-form__section:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.partner-form__section-title{
  color: var(--green);
  font-weight: 700;
  font-size: 1.25rem;
}

.partner-field{
  margin-top: 20px;
}

.partner-field label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 7px;
}

.partner-field__optional{
  color: rgba(20,24,28,0.55);
}

.partner-field input,
.partner-field select,
.partner-field textarea{
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 14px;
  background: var(--paper);
  border: 1px solid rgba(11,111,148,0.32);
  border-radius: 3px;
}

.partner-field textarea{
  resize: vertical;
}

.partner-field input[type="file"]{
  padding: 10px;
  font-size: 0.875rem;
}

.partner-field-hint{
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(20,24,28,0.6);
}

.partner-field-row{
  display: flex;
  gap: 12px;
}

.partner-field-row .partner-field{
  flex: 1;
  margin-top: 0;
}

.partner-form__error{
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--blue);
}

.partner-form__submit{
  margin-top: 32px;
  width: 100%;
  background: var(--blue);
  color: var(--paper);
  border: none;
  border-radius: 3px;
  padding: 17px;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.partner-form__submit:disabled{
  background: rgba(20,24,28,0.12);
  color: rgba(20,24,28,0.4);
  cursor: not-allowed;
}

.partner-form__progress{
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(20,24,28,0.6);
}

.partner-form__confirmation{
  text-align: center;
  padding: 48px 0;
}

.partner-form__confirmation-eyebrow{
  color: var(--blue);
}

.partner-form__confirmation h2{
  margin-top: 16px;
  color: var(--green);
}

.partner-form__confirmation p{
  margin: 12px auto 0;
  max-width: 50ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 860px){
  .partner-form{
    padding: 64px 56px 80px;
  }
  .partner-field-row{
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
   Product pages (src/products/*.njk — Quint first; EHS range, air
   conditioning etc. to follow, same pattern). Real photography from
   Samsung Climate Solutions (used with permission — CS Marketing,
   2026-09-03; on-page credit line removed 2026-09-16 at the owner's
   request — the permission itself is unaffected, still documented in
   design-refs/NOTES.md). Category page -> existing estimate wizard,
   not a separate checkout — see design-refs/NOTES.md.
   -------------------------------------------------------------------------- */

.product-hero{
  background: var(--paper);
  padding: 0 20px 28px;
}

.product-hero__image{
  max-width: min(640px, 100%);
  margin: 0 auto;
  border-radius: 4px;
}

.product-hero--secondary{
  padding-top: 40px;
}

@media (min-width: 860px){
  .product-hero{
    padding: 0 56px 40px;
  }
  .product-hero__image{
    max-width: min(900px, 100%);
  }
  .product-hero--secondary{
    padding-top: 64px;
  }
}

/* --------------------------------------------------------------------------
   Adia Thermal page — a big-numeral stat row (real published figures,
   see design-refs/NOTES.md) and a two-column supported/not-yet
   compatibility list. Both reusable if a future product page needs
   the same shape.
   -------------------------------------------------------------------------- */

.stat-row{
  background: var(--paper);
  color: var(--ink);
  padding: 40px 20px;
}

.stat-row__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.stat-row__eyebrow{
  color: var(--blue);
}

.stat-row__heading{
  margin-top: 12px;
  max-width: 30ch;
}

/* One stat (the first in the data, chosen for the strongest lead) gets
   hero treatment; the other three sit together as supporting context —
   a considered composition rather than four identical boxes. Mobile
   stacks hero above a single column of the rest; desktop puts the
   hero in its own column beside a divider. */
.stat-row__layout{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stat-row__hero{
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(11,111,148,0.28);
}

.stat-row__hero-number{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 2.5rem + 2.5vw, 4.25rem);
  letter-spacing: -0.02em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.stat-row__hero-label{
  margin-top: 6px;
  font-size: 1rem;
  color: rgba(20,24,28,0.65);
}

.stat-row__grid{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat__number{
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  color: var(--green);
}

.stat__label{
  margin-top: 4px;
  font-size: 0.8125rem;
  color: rgba(20,24,28,0.65);
}

.stat-row__credit{
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(20,24,28,0.45);
}

@media (min-width: 860px){
  .stat-row{
    padding: 64px 56px;
  }
  .stat-row__layout{
    margin-top: 44px;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
  .stat-row__hero{
    flex: none;
    width: 280px;
    padding: 0 40px 0 0;
    border-bottom: none;
    border-right: 1px solid rgba(11,111,148,0.28);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .stat-row__grid{
    flex: 1;
    flex-direction: row;
    padding-left: 40px;
    gap: 48px;
  }
  .stat-row__grid .stat{
    /* Natural width, not stretched to fill the row — so the group
       stays a compact cluster next to the divider regardless of how
       many supporting stats there are, rather than spreading a
       short number/label pair across a wide flex-grown column. */
    flex: none;
  }
  .stat__number{
    font-size: 3rem;
  }
}

.compat{
  background: var(--paper);
  color: var(--ink);
  padding: 8px 20px 40px;
}

.compat__inner{
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(11,111,148,0.28);
  padding-top: 36px;
}

.compat__eyebrow{
  color: var(--blue);
}

.compat__heading{
  margin-top: 12px;
  max-width: 26ch;
}

.compat__lede{
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 65ch;
}

.compat__cols{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.compat__col-title{
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.compat__col-title--yes{
  color: var(--blue);
}

.compat__col-title--no{
  color: rgba(20,24,28,0.55);
}

.compat__list{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compat__list li{
  font-size: 0.875rem;
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}

.compat__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.compat__col-title--no ~ .compat__list li{
  color: rgba(20,24,28,0.55);
}

@media (min-width: 860px){
  .compat{
    padding: 8px 56px 64px;
  }
  .compat__inner{
    padding-top: 48px;
  }
  .compat__cols{
    flex-direction: row;
    gap: 56px;
  }
  .compat__col{
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Products overview page (src/products/index.njk) — one consolidated
   page for the whole range, not a hub linking out to separate pages
   per product (Quint and Adia Thermal already have their own detail
   pages, so they appear here as cards linking out; the Gen 7 Mono
   heat pump and air conditioning content lives directly on this page,
   since neither has — or currently needs — its own detail page).
   -------------------------------------------------------------------------- */

.product-cards{
  background: var(--paper);
  color: var(--ink);
  padding: 8px 20px 40px;
}

.product-cards__inner{
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(11,111,148,0.28);
  padding-top: 36px;
}

.product-cards__heading{
  color: var(--green);
}

.product-cards__grid{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-card{
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid rgba(11,111,148,0.22);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.product-card:hover{
  border-color: var(--blue);
}

.product-card__image{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.product-card__diagram{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border-bottom: 1px solid rgba(11,111,148,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.product-card__diagram svg{
  width: 100%;
  height: 100%;
}

.product-card__body{
  padding: 20px;
}

.product-card__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--green);
}

.product-card__desc{
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(20,24,28,0.75);
}

.product-card__link{
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--blue);
}

@media (min-width: 860px){
  .product-cards{
    padding: 8px 56px 64px;
  }
  .product-cards__inner{
    padding-top: 48px;
  }
  .product-cards__grid{
    flex-direction: row;
    gap: 24px;
  }
  .product-card{
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Guides (src/guides.njk listing page + src/_includes/guide.njk article
   layout, used by every file in src/content/guides/). Long-form prose
   on a paper ground, same family as .about-content but its own class
   rather than reusing that one directly — about-content was built
   one-off for the About page; guides is a genuinely repeating content
   type and deserves an honestly-named component, even at the cost of
   duplicating a handful of values.
   -------------------------------------------------------------------------- */

.guide-body{
  background: var(--paper);
  color: var(--ink);
  padding: 8px 20px 40px;
}

.guide-body__inner{
  max-width: 68ch;
  margin: 0 auto;
}

.guide-body__inner h2{
  margin-top: 36px;
  color: var(--green);
  font-weight: 700;
  font-size: 1.375rem;
}

.guide-body__inner h3{
  margin-top: 28px;
  color: var(--green);
  font-weight: 700;
  font-size: 1.25rem;
}

.guide-body__inner p{
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.guide-body__inner ul,
.guide-body__inner ol{
  margin-top: 14px;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.guide-body__inner ul{ list-style: disc; }
.guide-body__inner ol{ list-style: decimal; }

.guide-body__inner li + li{
  margin-top: 6px;
}

.guide-body__inner a{
  color: var(--blue);
  text-decoration: underline;
}

.guide-body__inner h2:first-child,
.guide-body__inner h3:first-child{
  margin-top: 0;
}

@media (min-width: 860px){
  .guide-body{
    padding: 8px 56px 64px;
  }
  .guide-body__inner h2{
    font-size: 1.625rem;
  }
  .guide-body__inner p,
  .guide-body__inner ul,
  .guide-body__inner ol{
    font-size: 1rem;
  }
}

.guide-list{
  background: var(--paper);
  color: var(--ink);
  padding: 8px 20px 48px;
}

.guide-list__inner{
  max-width: 1280px;
  margin: 0 auto;
}

.guide-list__empty{
  font-size: 0.9375rem;
  color: rgba(20,24,28,0.6);
}

.guide-list__items{
  display: flex;
  flex-direction: column;
}

.guide-list__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(11,111,148,0.28);
  text-decoration: none;
  color: inherit;
}

.guide-list__items .guide-list__item:last-child{
  border-bottom: 1px solid rgba(11,111,148,0.28);
}

.guide-list__item-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--green);
}

.guide-list__item-desc{
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(20,24,28,0.75);
  max-width: 60ch;
}

.guide-list__item-link{
  flex: none;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--blue);
}

@media (min-width: 860px){
  .guide-list{
    padding: 8px 56px 64px;
  }
  .guide-list__item-title{
    font-size: 1.1875rem;
  }
}