:root {
  --ink: #0b0d0f;
  --ink-soft: #14181c;
  --ink-card: #1a1f24;
  --paper: #f1f2f2;
  --white: #ffffff;
  --muted: #a9b0b6;
  --dark-muted: #5e666d;
  --line: rgba(11, 13, 15, .16);
  --line-light: rgba(255, 255, 255, .15);
  --orange: #ff2800;
  --orange-dark: #b51d00;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, dl, figure { margin-top: 0; }
h1, h2 { line-height: .98; letter-spacing: -.055em; }
h3 { line-height: 1.15; letter-spacing: -.025em; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-140%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(calc(100% - 56px), var(--max));
  min-height: 92px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line-light);
}
.brand { width: 176px; text-decoration: none; }
.brand img { width: 100%; height: auto; filter: invert(1); }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a {
  color: #d6dadd;
  font-size: .86rem;
  font-weight: 650;
  text-decoration: none;
}
.site-header nav a:hover { color: var(--white); }
.header-cta {
  justify-self: end;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--orange);
  color: var(--white);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  min-height: 850px;
  padding-top: 92px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px max(52px, calc((100vw - var(--max)) / 2)) 150px max(28px, calc((100vw - var(--max)) / 2));
}
.kicker, .eyebrow {
  margin-bottom: 20px;
  color: var(--orange);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 780px;
  margin-bottom: 30px;
  font-size: clamp(3.8rem, 6.4vw, 7rem);
  font-weight: 820;
}
.hero h1 em {
  display: block;
  margin-top: .12em;
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .76);
}
.hero-lead {
  max-width: 650px;
  margin-bottom: 34px;
  color: #cfd4d8;
  font-size: clamp(1.04rem, 1.35vw, 1.24rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid transparent;
  font-size: .88rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .filter:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid #ff8f7a;
  outline-offset: 3px;
}
.button-primary { background: var(--orange); color: var(--white); }
.button-primary:hover { background: #e82300; }
.button-outline { border-color: rgba(255, 255, 255, .38); color: var(--white); }
.button-outline:hover { background: var(--white); color: var(--ink); }
.button-outline-dark { border-color: rgba(11, 13, 15, .28); color: var(--ink); }
.button-outline-dark:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.hero-note {
  margin: 24px 0 0;
  color: #737c83;
  font-size: .76rem;
  letter-spacing: .04em;
}
.hero-visual {
  position: relative;
  min-height: 690px;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--line-light);
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 13, 15, .16), transparent 25%), linear-gradient(0deg, rgba(11, 13, 15, .72), transparent 32%);
  pointer-events: none;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 125px;
  left: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .42);
  color: var(--white);
}
.hero-visual figcaption span { color: #c7ccd0; font-size: .75rem; text-transform: uppercase; letter-spacing: .11em; }
.hero-visual figcaption strong { text-align: right; font-size: .9rem; }
.hero-stats {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(calc(100% - 56px), var(--max));
  margin: 0 auto;
  border-top: 1px solid var(--line-light);
}
.hero-stats div { padding: 24px 22px; border-right: 1px solid var(--line-light); }
.hero-stats div:first-child { padding-left: 0; }
.hero-stats div:last-child { border-right: 0; }
.hero-stats dt { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 850; letter-spacing: -.04em; }
.hero-stats dd { margin: 1px 0 0; color: #8f989f; font-size: .78rem; }

.section { padding: 112px max(28px, calc((100vw - var(--max)) / 2)); background: var(--paper); }
.section-dark { background: var(--ink); color: var(--white); }
.section-orange { background: var(--orange); color: var(--ink); }
.section-index {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: #697178;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-index span:first-child { color: var(--orange); }
.section-index.light { border-color: var(--line-light); color: #858e95; }
.section-orange .section-index { border-color: rgba(11, 13, 15, .28); color: rgba(11, 13, 15, .62); }
.section-orange .section-index span:first-child { color: var(--ink); }
.section-heading h2, .transfer h2, .puffers h2, .contact h2, .faq h2 {
  max-width: 920px;
  margin-bottom: 0;
  font-size: clamp(2.6rem, 5vw, 5.5rem);
  font-weight: 800;
}
.section-heading.split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(48px, 9vw, 130px);
  align-items: end;
}
.section-heading.split > p {
  max-width: 520px;
  margin-bottom: 8px;
  color: var(--dark-muted);
  font-size: 1.08rem;
}
.section-dark .section-heading.split > p { color: var(--muted); }
.section-orange .eyebrow.dark { color: #7a1600; }

.family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 74px;
  border: 1px solid var(--line);
  background: var(--line);
}
.family-grid article {
  display: flex;
  flex-direction: column;
  min-height: 475px;
  padding: 30px;
  background: var(--paper);
}
.family-number { color: #747c83; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.family-grid h3 { margin: 76px 0 4px; font-size: 1.25rem; }
.family-grid article > strong { font-size: clamp(2.2rem, 3.8vw, 4rem); line-height: 1; letter-spacing: -.06em; }
.family-grid article > p { margin: 24px 0; color: var(--dark-muted); }
.family-grid ul { margin: 0 0 30px; padding: 0; list-style: none; color: #383e43; }
.family-grid li { padding: 8px 0; border-top: 1px solid var(--line); }
.family-grid article > a { width: max-content; margin-top: auto; color: var(--orange-dark); font-size: .84rem; font-weight: 850; text-underline-offset: 4px; }
.family-grid .accent-family { background: var(--ink); color: var(--white); }
.family-grid .accent-family p, .family-grid .accent-family ul { color: var(--muted); }
.family-grid .accent-family li { border-color: var(--line-light); }
.family-grid .accent-family a { color: #ff6d56; }

.transfer {
  display: grid;
  grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
}
.transfer-image {
  position: relative;
  height: min(860px, 78vw);
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  background: #050607;
}
.transfer-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.transfer-image figcaption, .puffers-image figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 11px 13px;
  background: rgba(8, 10, 12, .78);
  color: #d9dde0;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.large-copy { max-width: 720px; margin: 32px 0 0; color: var(--dark-muted); font-size: 1.12rem; }
.section-dark .large-copy { color: #b2b9be; }
.transfer-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 46px 0;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.transfer-metrics div { min-height: 132px; padding: 22px; background: var(--ink); }
.transfer-metrics strong { display: block; margin-bottom: 8px; font-size: clamp(1.45rem, 2.3vw, 2.2rem); letter-spacing: -.045em; }
.transfer-metrics span { color: #8d969d; font-size: .76rem; }
.technical-points, .feature-stack {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
  list-style: none;
}
.technical-points li, .feature-stack article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-light);
}
.technical-points li > span, .feature-stack article > span { color: var(--orange); font-size: .75rem; font-weight: 850; }
.technical-points h3, .feature-stack h3 { margin-bottom: 7px; font-size: 1.15rem; }
.technical-points p, .feature-stack p { margin: 0; color: #959ea5; }

.catalog { background: #e6e8e9; }
.filter-bar { display: flex; gap: 8px; margin: 54px 0 16px; overflow-x: auto; scrollbar-width: thin; }
.filter {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid rgba(11, 13, 15, .22);
  background: transparent;
  color: #444b51;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}
.filter span { margin-left: 7px; color: #858d93; }
.filter:hover, .filter.active { border-color: var(--ink); background: var(--ink); color: var(--white); }
.filter.active span { color: #aeb5ba; }
.result-count { margin: 0 0 25px; color: #747c82; font-size: .8rem; }
.result-count strong { color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card {
  position: relative;
  min-height: 380px;
  padding: 25px;
  overflow: hidden;
  background: #f7f8f8;
  border: 1px solid rgba(11, 13, 15, .13);
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.product-card::after {
  content: "";
  position: absolute;
  right: -58px;
  top: 86px;
  width: 180px;
  height: 180px;
  border: 26px solid rgba(11, 13, 15, .025);
  border-radius: 50%;
}
.product-card:hover { z-index: 2; transform: translateY(-4px); box-shadow: 0 24px 60px rgba(11, 13, 15, .1); }
.product-card[hidden] { display: none; }
.product-card.product-featured { border-top: 3px solid var(--orange); }
.product-card.combo-card { background: var(--ink); color: var(--white); }
.product-tag { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; color: #737b82; font-size: .69rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.product-tag span:first-child { color: var(--orange-dark); }
.combo-card .product-tag { color: #899299; }
.combo-card .product-tag span:first-child { color: #ff8c63; }
.product-card h3 { position: relative; z-index: 1; margin: 64px 0 5px; font-size: 1.08rem; }
.capacity { position: relative; z-index: 1; display: block; font-size: clamp(2.6rem, 4vw, 4.15rem); line-height: 1; letter-spacing: -.065em; white-space: nowrap; }
.capacity small { color: #747d84; font-size: .86rem; letter-spacing: 0; }
.product-card dl {
  position: absolute;
  z-index: 1;
  right: 25px;
  bottom: 22px;
  left: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin: 0;
  border-top: 1px solid var(--line);
}
.combo-card dl { border-color: var(--line-light); }
.product-card dl div { padding-top: 11px; }
.product-card dt { color: #818990; font-size: .69rem; }
.product-card dd { margin: 2px 0 0; font-size: .83rem; font-weight: 750; }

.puffers {
  display: grid;
  grid-template-columns: 1fr minmax(360px, .82fr);
  gap: clamp(54px, 9vw, 130px);
  align-items: center;
}
.puffers-copy .large-copy { margin-bottom: 42px; }
.puffers .feature-stack { border-color: var(--line); }
.puffers .feature-stack article { border-color: var(--line); }
.puffers .feature-stack p { color: var(--dark-muted); }
.puffers-image { position: relative; height: 790px; margin: 0; overflow: hidden; background: #d7d9da; }
.puffers-image img { width: 100%; height: 100%; object-fit: cover; }

.energy-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 70px 0 0;
  padding: 0;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  list-style: none;
}
.energy-flow li { position: relative; min-height: 285px; padding: 28px; background: var(--ink); }
.energy-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 32px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: var(--orange);
  color: var(--white);
  text-align: center;
  line-height: 23px;
}
.energy-flow span { color: var(--orange); font-size: .74rem; font-weight: 850; }
.energy-flow h3 { margin: 90px 0 12px; font-size: 1.35rem; }
.energy-flow p { margin: 0; color: #8d969d; }
.system-result {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 25px 28px;
  background: var(--orange);
  color: var(--ink);
}
.system-result span { font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.system-result strong { text-align: right; }

.table-wrap { margin-top: 60px; overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; min-width: 880px; border-collapse: collapse; text-align: left; }
th, td { padding: 19px 18px; border-bottom: 1px solid var(--line); }
thead th { background: rgba(11, 13, 15, .055); color: #687178; font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; }
tbody th { color: var(--orange-dark); }
tbody td { color: #41484e; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(11, 13, 15, .035); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.choice-grid article { padding: 28px; border: 1px solid var(--line); }
.choice-grid span { display: block; margin-bottom: 35px; color: var(--orange-dark); font-size: .76rem; font-weight: 850; }
.choice-grid h3 { margin-bottom: 10px; font-size: 1.5rem; }
.choice-grid p { margin: 0; color: var(--dark-muted); }

.combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 68px; background: rgba(11, 13, 15, .28); border: 1px solid rgba(11, 13, 15, .28); }
.combo-grid article { min-height: 340px; padding: 28px; background: var(--orange); }
.combo-grid article > span { font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.combo-grid article > strong { display: block; margin: 76px 0 48px; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1; letter-spacing: -.06em; }
.combo-grid dl { margin: 0; border-top: 1px solid rgba(11, 13, 15, .28); }
.combo-grid dl div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid rgba(11, 13, 15, .2); }
.combo-grid dt { font-size: .77rem; }
.combo-grid dd { margin: 0; font-size: .8rem; font-weight: 800; text-align: right; }

.selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 68px; }
.selection-grid article { min-height: 320px; padding: 28px; border: 1px solid var(--line); }
.selection-grid article > span { color: var(--orange); font-size: .76rem; font-weight: 900; }
.selection-grid h3 { margin: 72px 0 14px; font-size: 1.4rem; }
.selection-grid p { margin: 0; color: var(--dark-muted); }
.selection-note {
  display: grid;
  grid-template-columns: .35fr 1.65fr;
  gap: 42px;
  margin-top: 14px;
  padding: 28px;
  background: var(--ink);
  color: var(--white);
}
.selection-note strong { color: #ff6d56; }
.selection-note p { margin: 0; color: var(--muted); }

.faq-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 10vw, 150px); }
.faq-list { border-top: 1px solid var(--line-light); }
.faq-list details { border-bottom: 1px solid var(--line-light); }
.faq-list summary {
  position: relative;
  padding: 23px 48px 23px 0;
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 17px; color: var(--orange); font-size: 1.65rem; font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 720px; margin: -4px 48px 24px 0; color: #9aa2a9; }

.contact {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(60px, 10vw, 150px);
  align-items: center;
  background: var(--white);
}
.contact-logo { width: min(360px, 72%); margin-bottom: 66px; }
.contact-main > p:not(.eyebrow) { max-width: 720px; margin: 30px 0 34px; color: var(--dark-muted); font-size: 1.08rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 36px;
  background: var(--paper);
  border-top: 4px solid var(--orange);
  font-style: normal;
}
.contact-card > span { margin-bottom: 32px; color: #6f777e; font-size: .75rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.contact-card > a:not(.site-link) { font-size: clamp(1.25rem, 2.3vw, 1.9rem); font-weight: 850; letter-spacing: -.035em; text-decoration: none; }
.contact-card > a:hover { color: var(--orange-dark); }
.contact-card p { margin: 32px 0; color: var(--dark-muted); }
.contact-card .site-link { color: var(--orange-dark); font-weight: 800; text-underline-offset: 4px; }

footer {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 34px;
  align-items: center;
  padding: 55px max(28px, calc((100vw - var(--max)) / 2));
  background: #07090a;
  color: #9ba3a9;
}
footer > img { width: 180px; filter: invert(1); }
footer div strong, footer div span { display: block; }
footer div strong { color: var(--white); font-size: .9rem; }
footer div span { margin-top: 4px; font-size: .74rem; }
footer p { margin: 0; font-size: .8rem; }
footer small {
  grid-column: 1 / -1;
  max-width: 920px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  color: #687178;
  line-height: 1.5;
}

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr .85fr; }
  .hero-copy { padding-right: 34px; }
  .hero h1 { font-size: clamp(3.5rem, 7vw, 5.7rem); }
  .family-grid, .product-grid, .selection-grid { grid-template-columns: repeat(2, 1fr); }
  .family-grid article:last-child { grid-column: span 2; }
  .transfer { grid-template-columns: .7fr 1.3fr; gap: 46px; }
  .transfer-metrics { grid-template-columns: 1fr; }
  .transfer-metrics div { min-height: auto; }
  .puffers { grid-template-columns: 1fr 1fr; gap: 48px; }
  .energy-flow { grid-template-columns: repeat(2, 1fr); }
  .energy-flow li:nth-child(2)::after { display: none; }
  .combo-grid { grid-template-columns: 1fr; }
  .combo-grid article { min-height: auto; }
  .combo-grid article > strong { margin: 54px 0 40px; }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 32px); min-height: 76px; }
  .brand { width: 150px; }
  .header-cta { font-size: .8rem; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding-top: 76px; }
  .hero-copy { order: 2; padding: 54px 16px 42px; }
  .hero-visual { order: 1; min-height: 520px; height: 64svh; border-left: 0; border-bottom: 1px solid var(--line-light); }
  .hero-visual figcaption { bottom: 24px; }
  .hero h1 { font-size: clamp(3.1rem, 14vw, 4.5rem); }
  .hero h1 em { color: var(--white); -webkit-text-stroke: 0; }
  .hero-actions .button { width: 100%; }
  .hero-stats { position: relative; order: 3; width: calc(100% - 32px); grid-template-columns: repeat(2, 1fr); }
  .hero-stats div { padding: 15px 10px; border-bottom: 1px solid var(--line-light); }
  .hero-stats div:nth-child(2) { border-right: 0; }
  .hero-stats div:first-child { padding-left: 0; }
  .section { padding: 78px 16px; }
  .section-index { margin-bottom: 34px; }
  .section-heading.split, .faq-layout, .contact { grid-template-columns: 1fr; gap: 34px; }
  .section-heading h2, .transfer h2, .puffers h2, .contact h2, .faq h2 { font-size: clamp(2.45rem, 11vw, 3.6rem); }
  .family-grid, .product-grid, .selection-grid { grid-template-columns: 1fr; margin-top: 50px; }
  .family-grid article:last-child { grid-column: auto; }
  .family-grid article { min-height: 420px; }
  .family-grid h3 { margin-top: 55px; }
  .transfer { display: flex; flex-direction: column; gap: 50px; }
  .transfer-image { width: 100%; height: 720px; min-height: 0; }
  .transfer-content { width: 100%; }
  .transfer-metrics { margin: 36px 0; }
  .product-card { min-height: 370px; }
  .puffers { display: flex; flex-direction: column; gap: 52px; }
  .puffers-image { width: 100%; height: 690px; }
  .energy-flow { grid-template-columns: 1fr; margin-top: 50px; }
  .energy-flow li { min-height: 235px; }
  .energy-flow li:not(:last-child)::after { top: auto; right: 26px; bottom: -12px; transform: rotate(90deg); }
  .energy-flow li:nth-child(2)::after { display: block; }
  .energy-flow h3 { margin-top: 60px; }
  .system-result { flex-direction: column; }
  .system-result strong { text-align: left; }
  .choice-grid { grid-template-columns: 1fr; }
  .selection-note { grid-template-columns: 1fr; gap: 14px; }
  .contact-logo { margin-bottom: 46px; }
  .contact-actions .button { width: 100%; }
  .contact-card { padding: 26px; }
  .contact-card > a:not(.site-link) { font-size: 1.1rem; }
  footer { grid-template-columns: 1fr; }
  footer p { margin-top: 10px; }
}

/* Spartan Heating hub */
.site-header nav a.nav-current { color: var(--white); }
.site-header nav a.nav-current::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 6px;
  background: var(--orange);
}

.home-hero {
  position: relative;
  min-height: 920px;
  padding-top: 92px;
  overflow: hidden;
  background: #080a0c;
  color: var(--white);
}
.home-hero-copy {
  position: relative;
  z-index: 4;
  width: min(56%, 820px);
  padding: 130px 40px 180px max(28px, calc((100vw - var(--max)) / 2));
}
.home-hero h1 {
  max-width: 780px;
  margin-bottom: 30px;
  font-size: clamp(4rem, 7vw, 7.6rem);
  font-weight: 830;
}
.home-hero h1 em { display: block; color: var(--orange); font-style: normal; }
.home-hero-copy > p:not(.kicker) {
  max-width: 650px;
  margin-bottom: 34px;
  color: #c7cdd2;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}
.home-hero-stage {
  position: absolute;
  inset: 92px 0 0 48%;
  overflow: hidden;
  border-left: 1px solid var(--line-light);
  background: #050708;
}
.home-stage-main, .home-stage-detail { position: absolute; margin: 0; overflow: hidden; }
.home-stage-main { inset: 0; }
.home-stage-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080a0c 0%, rgba(8, 10, 12, .52) 18%, transparent 50%), linear-gradient(0deg, rgba(8, 10, 12, .76), transparent 38%);
}
.home-stage-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.home-stage-main figcaption {
  position: absolute;
  z-index: 2;
  right: 36px;
  bottom: 138px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--white);
}
.home-stage-main figcaption span, .home-stage-detail figcaption { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-stage-main figcaption strong { margin-top: 5px; font-size: 1.15rem; }
.home-stage-detail {
  z-index: 3;
  top: 38px;
  right: 38px;
  width: 210px;
  height: 142px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
}
.home-stage-detail img { width: 100%; height: 100%; object-fit: cover; }
.home-stage-detail figcaption { position: absolute; right: 10px; bottom: 8px; padding: 5px 7px; background: rgba(7,9,10,.76); }
.home-hero-stats {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: .7fr 1fr .8fr 1.5fr;
  width: min(calc(100% - 56px), var(--max));
  margin: 0 auto;
  border-top: 1px solid var(--line-light);
}
.home-hero-stats div { min-height: 106px; padding: 24px 22px; border-right: 1px solid var(--line-light); }
.home-hero-stats div:first-child { padding-left: 0; }
.home-hero-stats div:last-child { border-right: 0; }
.home-hero-stats dt { font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 850; letter-spacing: -.045em; }
.home-hero-stats dd { margin: 3px 0 0; color: #879098; font-size: .76rem; }

.home-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 70px; }
.home-range-card { position: relative; min-height: 680px; overflow: hidden; color: var(--white); text-decoration: none; }
.home-range-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,7,8,.95) 0%, rgba(5,7,8,.1) 68%); transition: background .25s ease; }
.home-range-card:hover::after { background: linear-gradient(0deg, rgba(5,7,8,.98) 0%, rgba(5,7,8,.03) 72%); }
.home-range-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.home-range-card.heat img { object-position: center 64%; }
.home-range-card:hover img { transform: scale(1.025); }
.home-range-overlay { position: absolute; z-index: 2; right: 32px; bottom: 30px; left: 32px; }
.home-range-overlay > span { color: #a9b0b6; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.home-range-overlay h3 { margin: 14px 0 10px; font-size: clamp(2.5rem, 4vw, 4.25rem); letter-spacing: -.055em; }
.home-range-overlay p { max-width: 580px; margin-bottom: 24px; color: #c6ccd1; }
.home-range-overlay strong { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.32); font-size: .84rem; }
.home-range-overlay b { color: var(--orange); font-size: 1.2rem; }

.home-evolution-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(70px, 10vw, 150px); align-items: start; }
.home-evolution h2, .home-platform h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 5.6rem); font-weight: 820; }
.home-evolution-steps { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch; }
.home-evolution-steps article { min-height: 310px; padding: 28px; border: 1px solid var(--line-light); }
.home-evolution-steps article.current { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.home-evolution-steps article > span { color: #8e979e; font-size: .73rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.home-evolution-steps article.current > span { color: #6b1d02; }
.home-evolution-steps strong { display: block; margin-top: 90px; font-size: 1.45rem; }
.home-evolution-steps p { margin: 14px 0 0; color: #8f989f; }
.home-evolution-steps article.current p { color: #54200d; }
.evolution-arrow { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--orange); font-size: 1.5rem; }
.home-text-link { display: inline-block; margin-top: 44px; color: #ff6d56; font-weight: 800; text-underline-offset: 5px; }

.home-system-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 70px 0 0; padding: 0; background: var(--line); border: 1px solid var(--line); list-style: none; }
.home-system-flow li { min-height: 350px; padding: 28px; background: var(--paper); }
.home-system-flow li > span { color: var(--orange); font-size: .72rem; font-weight: 900; }
.home-system-flow li > strong { display: block; margin-top: 78px; color: #737b81; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; }
.home-system-flow h3 { margin: 10px 0 14px; font-size: 1.45rem; }
.home-system-flow p { margin: 0; color: var(--dark-muted); }

.home-platform { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(60px, 10vw, 150px); align-items: end; }
.home-platform > p { max-width: 520px; margin: 0 0 8px; color: #52200e; font-size: 1.15rem; }

/* Heat pump generations */
.hp-hero {
  position: relative;
  min-height: 920px;
  padding-top: 92px;
  overflow: hidden;
  background: #080a0c;
  color: var(--white);
}
.hp-hero-copy {
  position: relative;
  z-index: 4;
  width: 50%;
  padding: 112px 36px 180px max(28px, calc((100vw - var(--max)) / 2));
}
.hp-hero h1 { max-width: 760px; margin-bottom: 30px; font-size: clamp(3.8rem, 6.5vw, 7rem); font-weight: 830; }
.hp-hero h1 em { display: block; color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.72); }
.hp-lead { max-width: 670px; margin-bottom: 34px; color: #c8ced3; font-size: clamp(1.05rem,1.35vw,1.24rem); }
.hp-hero-products { position: absolute; inset: 92px 0 0 50%; overflow: hidden; border-left: 1px solid var(--line-light); background: #030506; }
.hp-product { position: absolute; margin: 0; overflow: hidden; }
.hp-product img { width: 100%; height: 100%; object-fit: cover; }
.hp-product.evo2 { top: 0; bottom: 0; left: 0; width: 46%; filter: saturate(.78) brightness(.72); }
.hp-product.evo2 img { object-position: 55% center; }
.hp-product.evo3 { top: 0; right: 0; bottom: 0; width: 58%; clip-path: polygon(16% 0,100% 0,100% 100%,0 100%); }
.hp-product.evo3 img { object-position: center 67%; }
.hp-product::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,7,8,.78), transparent 42%); }
.hp-product figcaption { position: absolute; z-index: 2; bottom: 140px; left: 30px; display: flex; flex-direction: column; }
.hp-product.evo3 figcaption { left: 90px; }
.hp-product figcaption span { color: #a9b0b6; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hp-product figcaption strong { margin-top: 4px; font-size: 1rem; }
.hp-hero-stats { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4,1fr); width: min(calc(100% - 56px),var(--max)); margin: 0 auto; border-top: 1px solid var(--line-light); }
.hp-hero-stats div { min-height: 106px; padding: 23px 20px; border-right: 1px solid var(--line-light); }
.hp-hero-stats div:first-child { padding-left: 0; }
.hp-hero-stats div:last-child { border-right: 0; }
.hp-hero-stats dt { font-size: clamp(1.35rem,2.2vw,2rem); font-weight: 850; letter-spacing: -.045em; }
.hp-hero-stats dd { margin: 3px 0 0; color: #879098; font-size: .76rem; }

.hp-generation-grid { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: stretch; margin-top: 72px; }
.hp-gen-card { min-height: 540px; padding: 34px; border: 1px solid var(--line); }
.hp-gen-card.gen3 { background: var(--ink); color: var(--white); border-color: var(--ink); }
.hp-gen-top { display: flex; justify-content: space-between; color: #747c82; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hp-gen-card.gen3 .hp-gen-top { color: #8f979e; }
.hp-gen-top strong { color: var(--orange); }
.hp-gen-card h3 { margin: 86px 0 12px; font-size: clamp(2.5rem,4.5vw,4.7rem); letter-spacing: -.055em; }
.hp-gen-card > p { max-width: 560px; color: var(--dark-muted); }
.hp-gen-card.gen3 > p { color: var(--muted); }
.hp-gen-card dl { margin: 50px 0 28px; border-top: 1px solid var(--line); }
.hp-gen-card.gen3 dl { border-color: var(--line-light); }
.hp-gen-card dl div { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.hp-gen-card.gen3 dl div { border-color: var(--line-light); }
.hp-gen-card dt { color: #747c82; font-size: .77rem; }
.hp-gen-card dd { margin: 0; font-size: .82rem; font-weight: 800; text-align: right; }
.hp-gen-card > a { color: var(--orange-dark); font-size: .84rem; font-weight: 850; text-underline-offset: 4px; }
.hp-gen-card.gen3 > a { color: #ff6d56; }
.hp-progress-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #747c82; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hp-progress-rail i { width: 1px; height: 80px; background: var(--line); }
.hp-progress-rail b { writing-mode: vertical-rl; color: var(--orange-dark); }

.hp-progress-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 70px; border: 1px solid var(--line-light); background: var(--line-light); }
.hp-progress-grid article { min-height: 360px; padding: 27px; background: var(--ink); }
.hp-progress-grid article > span { color: #8b949b; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hp-shift { display: flex; align-items: center; gap: 12px; margin: 88px 0 28px; white-space: nowrap; }
.hp-shift b { color: #7c858c; font-size: clamp(1.55rem,2.5vw,2.55rem); }
.hp-shift i { color: var(--orange); font-style: normal; }
.hp-shift strong { color: var(--white); font-size: clamp(1.75rem,2.8vw,3rem); }
.hp-shift.text b, .hp-shift.text strong { font-size: clamp(1.2rem,1.8vw,1.9rem); }
.hp-progress-grid p { margin: 0; color: #919aa1; }
.hp-compare-table { margin-top: 56px; overflow-x: auto; border: 1px solid var(--line-light); }
.hp-compare-table table { color: var(--white); }
.hp-compare-table th, .hp-compare-table td { border-color: var(--line-light); }
.hp-compare-table thead th { background: rgba(255,255,255,.06); color: #9aa3aa; }
.hp-compare-table tbody th { color: #ff6d56; }
.hp-compare-table tbody td { color: #c4cbd0; }
.hp-compare-table tbody tr:hover { background: rgba(255,255,255,.035); }
.hp-compare-note { max-width: 930px; margin: 22px 0 0; color: #747d84; font-size: .78rem; }

.hp-evo { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(60px,8vw,120px); align-items: center; }
.hp-evo.hp-evo3 { grid-template-columns: 1.15fr .85fr; }
.hp-evo-visual { position: relative; height: 780px; overflow: hidden; background: #080a0c; }
.hp-evo-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,7,8,.82),transparent 38%); }
.hp-evo-visual img { width: 100%; height: 100%; object-fit: cover; }
.hp-evo2 .hp-evo-visual img { object-position: center; }
.hp-evo3 .hp-evo-visual img { object-position: center 68%; }
.hp-evo-visual > div { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.35); color: var(--white); }
.hp-evo-visual span { color: #a4acb2; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hp-evo-visual strong { text-align: right; }
.hp-evo-content h2 { margin-bottom: 0; font-size: clamp(2.8rem,5vw,5.5rem); font-weight: 820; }
.hp-evo3 .large-copy { color: #57210d; }
.hp-feature-list { margin: 46px 0 34px; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.hp-feature-list li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.hp-feature-list li > span { color: var(--orange); font-size: .73rem; font-weight: 900; }
.hp-feature-list strong { font-size: 1.08rem; }
.hp-feature-list p { margin: 5px 0 0; color: var(--dark-muted); }
.hp-evo3-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 48px 0 34px; border: 1px solid rgba(11,13,15,.28); background: rgba(11,13,15,.28); }
.hp-evo3-metrics div { min-height: 130px; padding: 23px; background: var(--orange); }
.hp-evo3-metrics strong { display: block; font-size: clamp(1.55rem,2.3vw,2.35rem); letter-spacing: -.045em; }
.hp-evo3-metrics span { display: block; margin-top: 7px; color: #5d210c; font-size: .76rem; }

.hp-model-groups { display: grid; gap: 14px; margin-top: 70px; }
.hp-model-group { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; min-height: 270px; padding: 34px; border: 1px solid var(--line); }
.hp-model-group.evo3-models { background: var(--ink); color: var(--white); }
.hp-model-group.evo3-commercial { background: var(--orange); border-color: var(--orange); }
.hp-model-heading > span { color: var(--orange-dark); font-size: .73rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.evo3-models .hp-model-heading > span { color: #ff6d56; }
.evo3-commercial .hp-model-heading > span { color: #7a1600; }
.hp-model-heading > strong { display: block; margin: 34px 0 8px; font-size: clamp(2rem,3.8vw,4rem); letter-spacing: -.055em; }
.hp-model-heading p { margin: 0; color: var(--dark-muted); }
.evo3-models .hp-model-heading p { color: var(--muted); }
.evo3-commercial .hp-model-heading p { color: #62230d; }
.hp-power-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-power-row span { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; min-height: 66px; padding: 0 12px; border: 1px solid var(--line); font-weight: 850; }
.evo3-models .hp-power-row span { border-color: var(--line-light); }
.evo3-commercial .hp-power-row span { border-color: rgba(11,13,15,.28); }
.hp-model-group small { grid-column: 2; color: #788087; }
.evo3-models small { color: #8f989f; }
.evo3-commercial small { color: #64250e; }

.hp-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 70px; }
.hp-choice-grid article { min-height: 440px; padding: 34px; border: 1px solid var(--line-light); }
.hp-choice-grid article.preferred { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.hp-choice-grid article > span { color: #9aa2a8; font-size: .73rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hp-choice-grid article.preferred > span { color: #6a1d02; }
.hp-choice-grid h3 { max-width: 540px; margin: 80px 0 25px; font-size: clamp(2rem,3.5vw,3.8rem); letter-spacing: -.05em; }
.hp-choice-grid ul { margin: 0; padding: 0; list-style: none; color: #9aa3aa; }
.hp-choice-grid article.preferred ul { color: #5b210c; }
.hp-choice-grid li { padding: 10px 0; border-top: 1px solid var(--line-light); }
.hp-choice-grid article.preferred li { border-color: rgba(11,13,15,.24); }

.hp-storage-link { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(60px,8vw,120px); align-items: center; background: #e6e8e9; }
.hp-storage-copy h2 { max-width: 720px; margin: 0 0 28px; font-size: clamp(2.8rem,5vw,5.5rem); font-weight: 820; }
.hp-storage-copy > p:not(.eyebrow) { max-width: 640px; margin-bottom: 32px; color: var(--dark-muted); font-size: 1.08rem; }
.hp-storage-link > img { width: 100%; height: 620px; object-fit: cover; }

@media (max-width: 1040px) {
  .home-hero-copy { width: 62%; }
  .home-hero-stage { left: 54%; }
  .home-range-card { min-height: 600px; }
  .home-evolution-layout { grid-template-columns: 1fr; }
  .home-system-flow, .hp-progress-grid { grid-template-columns: repeat(2,1fr); }
  .hp-hero-copy { width: 55%; }
  .hp-hero-products { left: 55%; }
  .hp-generation-grid { grid-template-columns: 1fr; gap: 14px; }
  .hp-progress-rail { flex-direction: row; min-height: 62px; }
  .hp-progress-rail i { width: 80px; height: 1px; }
  .hp-progress-rail b { writing-mode: horizontal-tb; }
  .hp-evo, .hp-evo.hp-evo3 { grid-template-columns: 1fr 1fr; gap: 48px; }
  .hp-evo-visual { height: 700px; }
  .hp-model-group { grid-template-columns: 1fr; }
  .hp-model-group small { grid-column: 1; }
}

@media (max-width: 760px) {
  .home-hero, .hp-hero { min-height: 0; padding-top: 76px; }
  .home-hero-copy, .hp-hero-copy { width: 100%; padding: 54px 16px 44px; }
  .home-hero h1, .hp-hero h1 { font-size: clamp(3.05rem,14vw,4.6rem); }
  .hp-hero h1 em { color: var(--white); -webkit-text-stroke: 0; }
  .home-hero-stage, .hp-hero-products { position: relative; inset: auto; width: 100%; height: 610px; border-top: 1px solid var(--line-light); border-left: 0; }
  .home-stage-detail { top: 18px; right: 18px; width: 155px; height: 105px; }
  .home-stage-main figcaption { right: 18px; bottom: 24px; }
  .home-hero-stats, .hp-hero-stats { position: relative; width: calc(100% - 32px); grid-template-columns: repeat(2,1fr); }
  .home-hero-stats div, .hp-hero-stats div { min-height: 92px; padding: 15px 10px; border-bottom: 1px solid var(--line-light); }
  .home-hero-stats div:nth-child(2), .hp-hero-stats div:nth-child(2) { border-right: 0; }
  .home-range-grid, .home-evolution-steps, .home-system-flow, .home-platform, .hp-progress-grid, .hp-evo, .hp-evo.hp-evo3, .hp-choice-grid, .hp-storage-link { grid-template-columns: 1fr; }
  .home-range-card { min-height: 570px; }
  .home-evolution-steps { gap: 10px; }
  .evolution-arrow { min-height: 44px; transform: rotate(90deg); }
  .home-evolution-steps strong { margin-top: 55px; }
  .home-system-flow li { min-height: 290px; }
  .home-platform { gap: 28px; }
  .hp-product.evo2 { width: 54%; }
  .hp-product.evo3 { width: 62%; }
  .hp-product figcaption { bottom: 22px; left: 16px; }
  .hp-product.evo3 figcaption { left: 62px; }
  .hp-gen-card { min-height: 500px; padding: 26px; }
  .hp-gen-card h3 { margin-top: 58px; }
  .hp-progress-rail i { width: 34px; }
  .hp-progress-grid article { min-height: 300px; }
  .hp-shift { margin-top: 58px; }
  .hp-evo { display: flex; flex-direction: column; gap: 48px; }
  .hp-evo3 .hp-evo-content { order: 2; }
  .hp-evo3 .hp-evo-visual { order: 1; }
  .hp-evo-visual { width: 100%; height: 650px; }
  .hp-evo3-metrics { grid-template-columns: 1fr; }
  .hp-model-group { padding: 26px; }
  .hp-choice-grid article { min-height: 400px; padding: 26px; }
  .hp-choice-grid h3 { margin-top: 58px; }
  .hp-storage-link > img { height: 540px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Spartan Heating — clean editorial system, inspired by premium product pages */
:root {
  --ink: #090909;
  --ink-soft: #151515;
  --ink-card: #1d1d1f;
  --paper: #f5f5f7;
  --white: #ffffff;
  --muted: #a1a1a6;
  --dark-muted: #6e6e73;
  --line: rgba(0, 0, 0, .1);
  --line-light: rgba(255, 255, 255, .16);
  --orange: #ff2800;
  --orange-dark: #b51d00;
  --max: 1180px;
}

html { background: #fff; }
body {
  background: #fff;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.012em;
}
h1, h2, h3 { letter-spacing: -.045em; }
p { text-wrap: pretty; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  min-height: 56px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  transform: none;
  grid-template-columns: 190px 1fr auto;
  gap: 32px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(9,9,9,.82);
  backdrop-filter: saturate(180%) blur(20px);
}
.brand { width: 168px; }
.brand img { filter: none; }
.site-header nav { justify-content: center; gap: 28px; }
.site-header nav a { color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 500; letter-spacing: -.01em; }
.site-header nav a:hover, .site-header nav a.nav-current { color: #fff; }
.header-cta { padding: 7px 13px; border: 0; border-radius: 999px; background: var(--orange); font-size: .75rem; font-weight: 650; }
.header-cta:hover { background: #e82300; }

.section { padding: 140px max(24px, calc((100vw - var(--max)) / 2)); background: #fff; }
.section-dark { background: var(--ink); color: #f5f5f7; }
.section-orange { background: var(--orange); color: #fff; }
.section-index { display: none; }
.section-heading.split { display: block; max-width: 940px; margin: 0 auto 72px; text-align: center; }
.section-heading.split > p { max-width: 680px; margin: 26px auto 0; color: var(--dark-muted); font-size: 1.12rem; }
.section-dark .section-heading.split > p { color: var(--muted); }
.section-heading h2, .transfer h2, .puffers h2, .contact h2, .faq h2, .hp-evo-content h2, .hp-storage-copy h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2.8rem, 5.6vw, 5.7rem);
  font-weight: 700;
  line-height: 1.02;
}
.eyebrow, .kicker { margin-bottom: 18px; color: var(--orange); font-size: .74rem; font-weight: 700; letter-spacing: .09em; }
.section-orange .eyebrow.dark, .hp-evo3 .eyebrow.dark { color: rgba(255,255,255,.76); }
.large-copy { max-width: 680px; color: var(--dark-muted); font-size: 1.08rem; }

.button { min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: .86rem; font-weight: 600; }
.button-primary { background: var(--orange); }
.button-primary:hover { background: #e82300; }
.button-outline { border-color: rgba(255,255,255,.44); }
.button-outline-dark { border-color: rgba(0,0,0,.2); }
.button:focus-visible, .filter:focus-visible, summary:focus-visible, a:focus-visible { outline-color: #ff8f7a; }

/* Brand home */
.home-hero {
  display: block;
  min-height: 0;
  padding: 56px 0 0;
  background: #000;
  color: #fff;
}
.home-hero-copy { width: min(900px, calc(100% - 48px)); margin: 0 auto; padding: 116px 0 58px; text-align: center; }
.home-hero h1 { margin-bottom: 28px; font-size: clamp(4rem, 8vw, 7.8rem); font-weight: 700; line-height: .94; }
.home-hero h1 em { color: var(--orange); }
.home-hero-copy > p:not(.kicker) { max-width: 680px; margin: 0 auto 30px; color: #a1a1a6; font-size: 1.25rem; }
.home-hero .hero-actions { justify-content: center; }
.home-hero-stage { position: relative; inset: auto; width: min(1180px, calc(100% - 48px)); height: 570px; margin: 0 auto; border: 0; border-radius: 36px 36px 0 0; background: radial-gradient(circle at 50% 68%, #272727 0, #0d0d0d 42%, #000 72%); }
.home-stage-main img { object-fit: contain; object-position: center bottom; padding: 10px 80px 0; }
.home-stage-main::after { background: linear-gradient(0deg,rgba(0,0,0,.72),transparent 30%); }
.home-stage-detail { top: 28px; right: 28px; width: 220px; height: 145px; border-radius: 20px; box-shadow: 0 22px 60px rgba(0,0,0,.36); }
.home-stage-main figcaption { right: 34px; bottom: 28px; left: 34px; }
.home-hero-stats { position: relative; width: min(1180px, calc(100% - 48px)); border-top-color: rgba(255,255,255,.14); }
.home-hero-stats div { min-height: 112px; padding: 28px 22px; }
.home-hero-stats dt { font-size: 1.35rem; font-weight: 650; }
.home-hero-stats dd { margin-top: 6px; color: #86868b; }

.home-range-grid { gap: 24px; border: 0; background: transparent; }
.home-range-card { min-height: 680px; border-radius: 32px; background: #000; }
.home-range-card::after { background: linear-gradient(0deg,rgba(0,0,0,.9),transparent 70%); }
.home-range-card img { object-fit: contain; padding: 26px 42px 140px; }
.home-range-card.storage img { object-fit: cover; padding: 0; }
.home-range-overlay { padding: 40px; }
.home-range-overlay h3 { font-size: clamp(2.4rem,4vw,4rem); }
.home-range-overlay > p { max-width: 480px; font-size: 1rem; }

.home-evolution-layout { gap: 70px; }
.home-evolution-layout h2 { font-size: clamp(3rem,5.8vw,6rem); font-weight: 700; }
.home-evolution-steps { gap: 18px; }
.home-evolution-steps article { min-height: 340px; padding: 34px; border-radius: 28px; background: #171719; }
.home-evolution-steps article.current { border: 0; background: var(--orange); color: #fff; }
.home-evolution-steps strong { margin-top: 82px; font-size: 1.6rem; }
.home-evolution-steps article.current p { color: rgba(255,255,255,.78); }
.evolution-arrow { border-radius: 28px; background: #171719; color: var(--orange); }
.home-text-link { color: #ff6d56; }

.home-system-flow { gap: 16px; }
.home-system-flow li { min-height: 330px; padding: 30px; border: 0; border-radius: 28px; background: var(--paper); }
.home-system-flow h3 { margin-top: 76px; font-size: 1.7rem; }
.home-platform { gap: 70px; border-radius: 0; background: var(--orange); color: #fff; }
.home-platform .eyebrow.dark { color: rgba(255,255,255,.72); }
.home-platform p { color: rgba(255,255,255,.82); }

/* Heat pump generations */
.hp-hero { display: block; min-height: 0; padding: 56px 0 0; background: #000; color: #fff; }
.hp-hero-copy { width: min(960px, calc(100% - 48px)); margin: 0 auto; padding: 118px 0 48px; text-align: center; }
.hp-hero h1 { max-width: none; margin-bottom: 28px; font-size: clamp(3.8rem,7.5vw,7.4rem); font-weight: 700; line-height: .95; }
.hp-hero h1 em { display: block; margin-top: .09em; color: var(--orange); -webkit-text-stroke: 0; }
.hp-lead { max-width: 760px; margin: 0 auto 32px; color: #a1a1a6; font-size: 1.22rem; }
.hp-hero .hero-actions { justify-content: center; }
.hp-hero-products { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; width: min(1180px, calc(100% - 48px)); height: 560px; margin: 0 auto; border: 0; overflow: hidden; border-radius: 36px 36px 0 0; background: #111; }
.hp-product { position: relative; inset: auto !important; width: auto !important; height: 100%; opacity: 1; background: radial-gradient(circle at 50% 58%,#333 0,#171717 44%,#0b0b0b 72%); }
.hp-product + .hp-product { border-left: 1px solid rgba(255,255,255,.12); }
.hp-product img { width: 100%; height: 100%; object-fit: contain; padding: 56px 42px 92px; }
.hp-product figcaption, .hp-product.evo3 figcaption { right: 28px; bottom: 24px; left: 28px; text-align: center; }
.hp-hero-stats { position: relative; width: min(1180px, calc(100% - 48px)); }
.hp-hero-stats div { min-height: 112px; padding: 28px 22px; }
.hp-hero-stats dt { font-size: 1.45rem; }

.hp-generation-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
.hp-progress-rail { display: none; }
.hp-gen-card { min-height: 560px; padding: 38px; border: 0; border-radius: 30px; background: var(--paper); }
.hp-gen-card.gen3 { background: var(--ink); color: #fff; }
.hp-gen-card h3 { margin: 74px 0 20px; font-size: clamp(2.8rem,4.6vw,4.8rem); }
.hp-gen-card > p { max-width: 540px; }
.hp-gen-card dl { margin-top: 44px; }
.hp-gen-card dl div { padding: 14px 0; }
.hp-gen-card > a, .hp-gen-card.gen3 > a { color: var(--orange); }

.hp-progress-grid { gap: 16px; }
.hp-progress-grid article { min-height: 330px; padding: 32px; border: 0; border-radius: 28px; background: #1c1c1e; }
.hp-shift { margin-top: 72px; font-size: clamp(1.8rem,3vw,3rem); }
.hp-compare-table { margin-top: 70px; border-radius: 24px; overflow: hidden; background: #151515; }
.hp-compare-table table { min-width: 860px; }
.hp-compare-table th, .hp-compare-table td { padding: 19px 18px; }
.hp-compare-note { margin: 22px auto 0; text-align: center; }
.hp-technical-disclosure { margin-top: 66px; }
.hp-technical-disclosure summary { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; font-weight: 600; cursor: pointer; list-style: none; }
.hp-technical-disclosure summary::-webkit-details-marker { display: none; }
.hp-technical-disclosure summary::after { content: "+"; color: var(--orange); font-size: 1.6rem; font-weight: 300; }
.hp-technical-disclosure[open] summary::after { content: "−"; }

.hp-evo { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hp-evo-visual { height: 650px; border-radius: 32px; background: #f5f5f7; }
.hp-evo-visual::after { background: linear-gradient(0deg,rgba(0,0,0,.78),transparent 32%); }
.hp-evo-visual img { object-fit: contain; padding: 40px 26px 92px; }
.hp-evo-content h2 { font-size: clamp(3rem,5vw,5.4rem); }
.hp-feature-list { margin-top: 40px; }
.hp-evo3 { background: var(--orange); color: #fff; }
.hp-evo3 .large-copy { color: rgba(255,255,255,.8); }
.hp-evo3 .hp-evo-visual { background: #111; }
.hp-evo3-metrics { gap: 12px; border: 0; background: transparent; }
.hp-evo3-metrics div { min-height: 120px; border: 1px solid rgba(255,255,255,.34); border-radius: 22px; background: transparent; }
.hp-evo3-metrics span { color: rgba(255,255,255,.74); }
.hp-evo3 .button-outline-dark { border-color: rgba(255,255,255,.56); color: #fff; }
.hp-evo3 .button-outline-dark:hover { background: #fff; color: #111; }

.hp-media { background: var(--paper); }
.hp-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hp-video-grid article { overflow: hidden; border-radius: 30px; background: #fff; }
.hp-video-frame { position: relative; aspect-ratio: 9 / 16; max-height: 680px; background: #000; }
.hp-video-frame iframe { width: 100%; height: 100%; border: 0; }
.hp-video-grid article > div:last-child { padding: 30px; }
.hp-video-grid span, .hp-doc-links span { color: var(--orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hp-video-grid h3 { margin: 14px 0 8px; font-size: 2rem; }
.hp-video-grid p { margin: 0; color: var(--dark-muted); }
.hp-docs { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; margin-top: 100px; padding-top: 70px; border-top: 1px solid var(--line); }
.hp-docs h3 { margin: 0; font-size: clamp(2.2rem,4vw,4rem); }
.hp-doc-links { display: grid; gap: 10px; }
.hp-doc-links a { display: grid; grid-template-columns: 86px 1fr auto; gap: 20px; align-items: center; min-height: 78px; padding: 16px 20px; border-radius: 18px; background: #fff; text-decoration: none; }
.hp-doc-links a:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.hp-doc-links strong { font-weight: 600; }
.hp-doc-links b { color: var(--dark-muted); font-size: .8rem; }

.hp-model-groups { gap: 18px; }
.hp-model-group { min-height: 250px; padding: 36px; border: 0; border-radius: 28px; background: var(--paper); }
.hp-model-group.evo3-models { background: var(--ink); }
.hp-model-group.evo3-commercial { border: 0; background: var(--orange); color: #fff; }
.hp-model-heading > strong { margin-top: 28px; }
.evo3-commercial .hp-model-heading > span, .evo3-commercial .hp-model-heading p, .evo3-commercial small { color: rgba(255,255,255,.78); }
.hp-power-row span { min-width: 62px; min-height: 62px; border-radius: 16px; }
.hp-choice-grid { gap: 22px; }
.hp-choice-grid article { min-height: 420px; padding: 38px; border-radius: 30px; background: #171719; }
.hp-choice-grid article.preferred { border: 0; background: var(--orange); color: #fff; }
.hp-choice-grid article.preferred > span, .hp-choice-grid article.preferred ul { color: rgba(255,255,255,.74); }
.hp-choice-grid article.preferred li { border-color: rgba(255,255,255,.25); }
.hp-storage-link { gap: 72px; background: var(--paper); }
.hp-storage-link > img { height: 560px; border-radius: 30px; }

/* Thermal storage */
.hero { display: block; min-height: 0; padding: 56px 0 0; background: #000; }
.hero-copy { max-width: 940px; margin: 0 auto; padding: 112px 24px 64px; text-align: center; }
.hero h1 { font-size: clamp(3.8rem,7.3vw,7.2rem); font-weight: 700; }
.hero h1 em { color: var(--orange); -webkit-text-stroke: 0; }
.hero-lead { margin-right: auto; margin-left: auto; }
.hero .hero-actions { justify-content: center; }
.hero-visual { width: min(1180px, calc(100% - 48px)); height: 640px; min-height: 0; margin: 0 auto; border: 0; border-radius: 34px 34px 0 0; }
.hero-stats { position: relative; }
.family-grid { gap: 18px; border: 0; background: transparent; }
.family-grid article { min-height: 450px; border-radius: 28px; background: var(--paper); }
.family-grid .accent-family { background: var(--ink); }
.transfer { gap: 80px; }
.transfer-image { height: 720px; min-height: 0; border-radius: 30px; }
.product-grid { gap: 16px; }
.product-card { min-height: 340px; border: 0; border-radius: 24px; background: var(--paper); }
.product-card.product-featured { border-top: 4px solid var(--orange); }
.filter-bar { gap: 8px; border: 0; }
.filter { border: 0; border-radius: 999px; background: var(--paper); }
.filter.active { background: var(--ink); color: #fff; }
.puffers-image { border-radius: 30px; overflow: hidden; }
.combo-grid { gap: 16px; }
.combo-grid article { border-radius: 28px; background: rgba(255,255,255,.12); color: #fff; }
.selection-grid article, .choice-grid article { border-radius: 24px; }

.contact { background: var(--ink); color: #fff; }
.contact-main > p:not(.eyebrow) { color: var(--muted); }
.contact-logo { filter: none; }
.contact .button-outline-dark { border-color: rgba(255,255,255,.44); color: #fff; }
.contact .button-outline-dark:hover { background: #fff; color: #111; }
.contact-card { border: 0; border-radius: 28px; background: #fff; color: #1d1d1f; }
footer img { filter: none; }

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 170px 1fr auto; }
  .site-header nav { gap: 18px; }
  .section { padding-top: 110px; padding-bottom: 110px; }
  .home-range-card { min-height: 600px; }
  .hp-evo, .hp-evo.hp-evo3 { gap: 48px; }
  .hp-docs { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .site-header { min-height: 52px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .brand { width: 150px; }
  .site-header nav { display: none; }
  .header-cta { display: inline-flex; }
  .section { padding: 92px 18px; }
  .section-heading.split { margin-bottom: 52px; }
  .home-hero-copy, .hp-hero-copy { width: calc(100% - 36px); padding-top: 90px; }
  .home-hero h1, .hp-hero h1, .hero h1 { font-size: clamp(3.25rem, 14vw, 5rem); }
  .home-hero-stage, .hp-hero-products, .hero-visual { width: calc(100% - 24px); border-radius: 24px 24px 0 0; }
  .home-hero-stage { height: 520px; }
  .home-stage-main img { padding: 20px 20px 0; }
  .home-stage-detail { display: none; }
  .home-hero-stats, .hp-hero-stats, .hero-stats { width: calc(100% - 36px); }
  .home-range-grid, .home-evolution-steps, .home-system-flow, .hp-generation-grid, .hp-progress-grid, .hp-video-grid, .hp-evo, .hp-evo.hp-evo3, .hp-choice-grid, .hp-storage-link, .family-grid, .transfer, .puffers, .section-heading.split, .selection-grid, .contact, footer { grid-template-columns: 1fr; }
  .hp-hero-products { height: auto; }
  .hp-product { min-height: 420px; }
  .hp-product + .hp-product { border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .hp-product img { padding: 30px 20px 86px; }
  .hp-evo { display: flex; }
  .hp-evo-visual { height: 520px; border-radius: 24px; }
  .hp-video-frame { max-height: none; }
  .hp-doc-links a { grid-template-columns: 70px 1fr auto; padding: 14px 16px; }
  .hp-model-group { grid-template-columns: 1fr; }
  .hp-model-group small { grid-column: 1; }
  .hero-copy { padding-top: 90px; }
  .hero-visual { height: 520px; }
  .family-grid article { min-height: 390px; }
  .transfer-image { height: 560px; }
  .contact-logo { max-width: 210px; }
}

@media (max-width: 520px) {
  .home-hero h1, .hp-hero h1, .hero h1 { font-size: 3.2rem; }
  .home-hero-copy > p:not(.kicker), .hp-lead, .hero-lead { font-size: 1.04rem; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .home-hero-stage { height: 430px; }
  .home-hero-stats, .hp-hero-stats, .hero-stats { grid-template-columns: 1fr 1fr; }
  .home-hero-stats div, .hp-hero-stats div, .hero-stats div { min-height: 96px; padding: 16px 10px; }
  .home-range-card { min-height: 540px; border-radius: 24px; }
  .home-range-overlay { padding: 26px; }
  .hp-gen-card, .hp-progress-grid article, .hp-model-group, .hp-choice-grid article { padding: 26px; border-radius: 24px; }
  .hp-doc-links a { grid-template-columns: 1fr auto; }
  .hp-doc-links a span { grid-column: 1 / -1; }
  .hp-docs { margin-top: 72px; padding-top: 52px; }
}

/* Final responsive QA corrections */
.brand { width: 168px; }
.brand img { width: 100%; height: auto; }

.hp-product.evo2 {
  background: #fff;
  filter: none;
}
.hp-product.evo2 img {
  background: #fff;
}
.hp-product.evo3 {
  background: #0b0b0d;
  clip-path: none;
}
.hp-evo2 .hp-evo-visual {
  background: #fff;
}

@media (max-width: 820px) {
  .brand { width: 156px; }

  .home-evolution-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .home-evolution-steps article {
    min-height: 0;
    padding: 30px;
  }
  .home-evolution-steps strong {
    margin-top: 42px;
  }
  .evolution-arrow {
    width: 52px;
    min-height: 52px;
    margin: 0 auto;
    border-radius: 999px;
    transform: none;
  }

  .hp-hero-products {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    background: transparent;
  }
  .hp-product {
    width: 100% !important;
    min-height: 390px;
    border-radius: 24px;
  }
  .hp-product + .hp-product {
    margin-top: 14px;
    border: 0;
  }
  .hp-product img {
    padding: 28px 18px 82px;
  }
  .hp-product figcaption,
  .hp-product.evo3 figcaption {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .hp-generation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hp-progress-rail {
    display: none;
  }
  .hp-gen-card {
    min-height: 0;
  }
  .hp-gen-card h3 {
    margin-top: 44px;
  }
}

@media (max-width: 520px) {
  .brand { width: 144px; }
  .site-header { min-height: 58px; }
  .header-cta { white-space: nowrap; }

  .home-evolution-layout {
    gap: 44px;
  }
  .home-evolution-steps article {
    padding: 26px;
    border-radius: 24px;
  }
  .home-evolution-steps strong {
    margin-top: 34px;
    font-size: 1.48rem;
    line-height: 1.16;
  }
  .home-evolution-steps p {
    font-size: .98rem;
  }
  .home-text-link {
    margin-top: 34px;
    font-size: .98rem;
  }

  .hp-product {
    min-height: 330px;
  }
  .hp-product img {
    padding: 22px 12px 76px;
  }
  .hp-gen-card dl div {
    align-items: flex-start;
  }
  .hp-gen-card dt,
  .hp-gen-card dd {
    max-width: 50%;
  }
}

/* Batch 1: cinematic intro + mobile navigation + responsive QA */
.visual-intro {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.visual-intro-media,
.visual-intro-media::after {
  position: absolute;
  inset: 0;
}
.visual-intro-media::after {
  content: "";
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 20%, transparent 58%, rgba(0,0,0,.76) 100%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 26%, transparent 74%, rgba(0,0,0,.18));
  pointer-events: none;
}
.visual-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}
.visual-intro-overlay {
  position: absolute;
  z-index: 2;
  right: max(24px, calc((100vw - var(--max)) / 2));
  bottom: 92px;
  left: max(24px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 48px;
  align-items: end;
}
.visual-intro-kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.visual-intro-title {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 5.7vw, 6rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.visual-intro-links {
  display: grid;
  gap: 8px;
  min-width: 230px;
}
.visual-intro-links a {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.9);
  font-size: .84rem;
  font-weight: 550;
  text-decoration: none;
}
.visual-intro-links a:hover { color: #fff; border-color: var(--orange); }
.visual-intro-links span { color: var(--orange); }
.visual-intro-scroll {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.visual-intro-scroll span { color: var(--orange); font-size: 1rem; }

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.mobile-menu {
  position: fixed;
  z-index: 99;
  inset: 56px 0 0;
  padding: 32px 20px max(32px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: rgba(8,8,9,.98);
  color: #fff;
  backdrop-filter: blur(22px);
}
.mobile-menu nav { display: grid; }
.mobile-menu nav a {
  padding: 18px 2px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #f5f5f7;
  font-size: clamp(1.35rem, 7vw, 2rem);
  font-weight: 560;
  letter-spacing: -.035em;
  text-decoration: none;
}
.mobile-menu nav a:hover { color: var(--orange); }
.mobile-menu-cta { margin-top: 28px; }
body.menu-open { overflow: hidden; }

.hp-compare-table {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 10px; }
  .menu-toggle { display: block; }
  .visual-intro { min-height: 100svh; }
  .visual-intro-overlay {
    right: 18px;
    bottom: 82px;
    left: 18px;
    display: block;
  }
  .visual-intro-title { max-width: 620px; font-size: clamp(2.55rem, 12vw, 4.7rem); }
  .visual-intro-links { margin-top: 24px; min-width: 0; }
  .visual-intro-scroll { bottom: 22px; }
}

@media (max-width: 520px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header .header-cta { display: none; }
  .mobile-menu { inset: 58px 0 0; }
  .visual-intro-kicker { margin-bottom: 8px; }
  .visual-intro-title { font-size: clamp(2.7rem, 13vw, 3.85rem); }
  .visual-intro-links a { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-intro-video { display: none; }
  .visual-intro-media {
    background: #000 url('/assets/spartan-hero-poster.webp') center / cover no-repeat;
  }
  .menu-toggle span { transition: none; }
}

/* Intro refinement: the first impact is visual; the main marketing headline remains below. */
.visual-intro-title {
  max-width: 680px;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 560;
  letter-spacing: -.035em;
}
@media (max-width: 820px) {
  .visual-intro-title { font-size: clamp(1.65rem, 7vw, 2.45rem); }
}
@media (max-width: 520px) {
  .visual-intro-title { font-size: 1.7rem; }
}

/* Batch 1 final QA: preserve grid bounds and the full cinematic triptych. */
.hp-progress-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-progress-grid article { min-width: 0; }
.hp-shift { min-width: 0; }
.hp-shift.text { white-space: normal; flex-wrap: wrap; }
.hp-progress-grid p { overflow-wrap: break-word; }
.visual-intro-video { object-fit: contain; }

@media (max-width: 1040px) {
  .hp-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hp-progress-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .visual-intro-video { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .visual-intro-media {
    background-image: url('/assets/spartan-hero-poster-mobile.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Brand lockup normalization - official Spartan Heat Pump proportions. */
.brand img,
.contact-logo,
footer > img {
  display: block;
  height: auto !important;
  max-height: none;
  aspect-ratio: 2600 / 1005;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}
.brand img { width: 100%; }
.contact-logo { width: min(360px, 72%); }
footer > img { width: 180px; }
@media (max-width: 820px) {
  .contact-logo { width: min(260px, 76%); }
  footer > img { width: 170px; }
}

/* =========================================================
   Batch 2 — product/range pages
   ========================================================= */
.model-page,
.range-page,
.storage-model { background: var(--paper); }
.model-page main,
.range-page main,
.storage-model main { overflow: clip; }
.model-page .site-header,
.range-page .site-header,
.storage-model .site-header { background: transparent; }
.site-header .nav-current { color: var(--white); }

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 108px max(28px, calc((100vw - var(--max)) / 2)) 18px;
  background: var(--ink);
  color: #8f989f;
  font-size: .76rem;
}
.breadcrumbs a { color: #aeb5ba; text-decoration: none; }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs strong { color: var(--white); font-weight: 700; }
.breadcrumbs span { color: #535b62; }

.model-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
  grid-template-areas:
    "copy media"
    "stats stats";
  gap: 0;
  min-height: 680px;
  padding: 34px max(28px, calc((100vw - var(--max)) / 2)) 0;
  background: var(--ink);
  color: var(--white);
}
.model-hero-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 56px 72px 72px 0;
}
.model-hero h1 {
  max-width: 780px;
  margin-bottom: 26px;
  font-size: clamp(3rem, 5.6vw, 6.35rem);
  font-weight: 820;
  overflow-wrap: anywhere;
}
.model-lead {
  max-width: 720px;
  margin-bottom: 34px;
  color: #c9cfd3;
  font-size: clamp(1.03rem, 1.3vw, 1.22rem);
}
.model-hero-media {
  grid-area: media;
  position: relative;
  min-width: 0;
  min-height: 460px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: linear-gradient(145deg, #171b1f, #090b0d 72%);
}
.model-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.62));
}
.model-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: contain;
  object-position: center;
}
.model-hero-media figcaption {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 20px;
  left: 24px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.3);
  color: #d5d9dc;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.storage-media img { object-fit: cover; }

.model-statline {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-light);
}
.model-statline > div {
  min-width: 0;
  padding: 22px 20px;
  border-right: 1px solid var(--line-light);
}
.model-statline > div:first-child { padding-left: 0; }
.model-statline > div:last-child { border-right: 0; }
.model-statline dt {
  overflow-wrap: anywhere;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 820;
  letter-spacing: -.035em;
}
.model-statline dd {
  margin: 3px 0 0;
  color: #858e95;
  font-size: .73rem;
}

.model-intro .section-heading { margin-bottom: 0; }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 48px 0 34px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.spec-grid article {
  min-width: 0;
  padding: 28px;
  background: #12161a;
}
.spec-grid span {
  display: block;
  margin-bottom: 13px;
  color: #808990;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.spec-grid strong {
  display: block;
  margin-bottom: 7px;
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: clamp(1.2rem, 1.65vw, 1.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.spec-grid p { margin: 0; color: #9ca4aa; font-size: .79rem; }

.model-table { margin-top: 28px; }
.model-table table { min-width: 640px; }
.model-table th:first-child { width: 42%; }
.model-table tbody th { color: #afb6bb; font-weight: 650; }

.model-docs {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 72px;
  align-items: start;
}
.model-docs h2 { max-width: 540px; margin-bottom: 0; font-size: clamp(2.35rem, 4.3vw, 5rem); }
.doc-cards { display: grid; gap: 10px; }
.doc-cards a {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.32);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.doc-cards a:hover { transform: translateY(-2px); border-color: var(--orange); background: var(--white); }
.doc-cards span { color: var(--orange); font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.doc-cards strong { font-size: 1rem; line-height: 1.2; }
.doc-cards b { font-size: 1.05rem; }

.model-faq .faq-list { max-width: 920px; margin: 0 auto; }
.model-faq details { border-color: var(--line-light); }
.model-faq summary { color: var(--white); }
.model-faq details p { color: #abb2b8; }

.related-models { padding-top: 72px; padding-bottom: 72px; }
.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.related-links a,
.hp-power-link,
.product-detail-link {
  text-decoration: none;
}
.related-links a {
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.3);
  font-size: .82rem;
  font-weight: 760;
}
.related-links a:hover { border-color: var(--orange); color: var(--orange-dark); }

/* Evo III family landing */
.range-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
  min-height: 650px;
  padding: 44px max(28px, calc((100vw - var(--max)) / 2)) 72px;
  background: var(--ink);
  color: var(--white);
}
.range-hero > div { align-self: center; padding-right: 72px; }
.range-hero h1 {
  margin-bottom: 26px;
  font-size: clamp(3.8rem, 7vw, 7.4rem);
  font-weight: 830;
}
.range-hero h1 em { color: var(--orange); font-style: normal; }
.range-hero p:not(.kicker) { max-width: 660px; color: #c2c8cc; font-size: clamp(1.05rem, 1.45vw, 1.28rem); }
.range-hero figure {
  align-self: stretch;
  margin: 0;
  border: 1px solid var(--line-light);
  background: linear-gradient(145deg, #171b1f, #090b0d 72%);
}
.range-hero figure img { width: 100%; height: 100%; object-fit: contain; }
.range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 48px;
}
.range-model {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  min-height: 145px;
  padding: 26px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.34);
  text-decoration: none;
}
.section-dark .range-model { border-color: var(--line-light); background: #12161a; }
.range-model span { align-self: end; font-size: clamp(1.7rem, 2.5vw, 2.5rem); font-weight: 830; letter-spacing: -.045em; }
.range-model small { align-self: start; color: #687078; font-size: .76rem; }
.section-dark .range-model small { color: #929aa0; }
.range-model b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--orange); font-size: 1.1rem; }
.range-model:hover { border-color: var(--orange); }

/* Existing category pages: links added by Batch 2 */
.hp-power-row .hp-power-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  color: inherit;
  font: inherit;
  font-weight: 800;
}
.hp-power-row .hp-power-link:hover { border-color: var(--orange); color: var(--orange); }
.product-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--orange-dark);
  font-size: .78rem;
  font-weight: 820;
}
.product-detail-link:hover { color: var(--orange); }

@media (max-width: 1040px) {
  .model-hero,
  .range-hero { grid-template-columns: minmax(0, 1fr) minmax(330px, .7fr); }
  .model-hero-copy,
  .range-hero > div { padding-right: 42px; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .breadcrumbs { padding-top: 80px; }
  .model-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media" "stats";
    padding-top: 18px;
  }
  .model-hero-copy { padding: 42px 0 48px; }
  .model-hero h1 { font-size: clamp(2.7rem, 12vw, 4.9rem); }
  .model-hero-media,
  .model-hero-media img { min-height: 360px; }
  .model-statline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-statline > div { border-bottom: 1px solid var(--line-light); }
  .model-statline > div:nth-child(2) { border-right: 0; }
  .model-statline > div:first-child { padding-left: 20px; }
  .model-statline > div:nth-last-child(-n+2) { border-bottom: 0; }
  .model-docs { grid-template-columns: 1fr; gap: 38px; }
  .range-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; }
  .range-hero > div { padding: 36px 0 48px; }
  .range-hero h1 { font-size: clamp(3.4rem, 15vw, 5.7rem); }
  .range-hero figure { min-height: 390px; }
  .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .breadcrumbs { gap: 6px; font-size: .7rem; }
  .model-hero { padding-right: 20px; padding-left: 20px; }
  .model-hero-media,
  .model-hero-media img { min-height: 300px; }
  .model-statline { margin-right: -20px; margin-left: -20px; }
  .model-statline > div { padding: 18px 14px; }
  .model-statline > div:first-child { padding-left: 14px; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-grid article { padding: 22px; }
  .doc-cards a { grid-template-columns: 48px 1fr auto; gap: 12px; padding: 16px; }
  .range-grid { grid-template-columns: 1fr; }
  .range-model { min-height: 116px; }
  .range-hero figure { min-height: 310px; }
}

/* =========================================================
   Batch 3 — technical guides
   ========================================================= */
.guide-page { background: var(--paper); }
.guide-page main { overflow: clip; }
.guide-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 72px;
  min-height: 560px;
  padding: 90px max(28px, calc((100vw - var(--max)) / 2)) 96px;
  background: var(--ink);
  color: var(--white);
}
.guide-hub-hero h1 {
  max-width: 920px;
  margin-bottom: 28px;
  font-size: clamp(3.6rem, 6.7vw, 7.2rem);
  font-weight: 830;
}
.guide-hub-hero p:not(.kicker) {
  max-width: 760px;
  margin-bottom: 0;
  color: #bbc2c7;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
.guide-hub-hero aside {
  display: grid;
  justify-items: end;
  padding: 0 0 10px 48px;
  border-left: 1px solid var(--line-light);
}
.guide-hub-hero aside strong {
  color: var(--orange);
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: .8;
  letter-spacing: -.07em;
}
.guide-hub-hero aside span { margin-top: 16px; color: #90999f; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 30px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.38);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.guide-card:hover { transform: translateY(-4px); border-color: var(--orange); background: var(--white); }
.guide-card > span { margin-bottom: 30px; color: var(--orange-dark); font-size: .68rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.guide-card h2 { margin-bottom: 18px; font-size: clamp(1.65rem, 2.35vw, 2.45rem); line-height: 1; }
.guide-card p { margin-bottom: 30px; color: #5f686f; font-size: .9rem; }
.guide-card b { margin-top: auto; color: var(--orange-dark); font-size: .8rem; }

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: 72px;
  min-height: 650px;
  padding: 82px max(28px, calc((100vw - var(--max)) / 2)) 88px;
  background: var(--ink);
  color: var(--white);
}
.guide-hero > div { align-self: center; }
.guide-hero h1 {
  max-width: 930px;
  margin-bottom: 30px;
  font-size: clamp(3.1rem, 5.6vw, 6.2rem);
  font-weight: 830;
}
.guide-hero > div > p:not(.kicker) {
  max-width: 800px;
  margin-bottom: 34px;
  color: #c3c9cd;
  font-size: clamp(1.04rem, 1.35vw, 1.23rem);
}
.guide-key {
  align-self: center;
  padding: 30px;
  border: 1px solid var(--line-light);
  background: #12161a;
}
.guide-key span { display: block; margin-bottom: 30px; color: var(--orange); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.guide-key strong { display: block; margin-bottom: 16px; font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1; letter-spacing: -.045em; }
.guide-key p { margin: 0; color: #8e979d; font-size: .84rem; }

.article-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 850px);
  justify-content: center;
  gap: 80px;
  padding: 100px max(28px, calc((100vw - var(--max)) / 2));
  background: var(--paper);
}
.toc {
  position: sticky;
  top: 28px;
  align-self: start;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.toc > p { margin: 16px 0 20px; color: #697178; font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.toc a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: #4e565c;
  font-size: .76rem;
  line-height: 1.3;
  text-decoration: none;
}
.toc a:hover { color: var(--orange-dark); }
.toc a span { color: var(--orange); font-weight: 850; }

.article-body { min-width: 0; }
.article-section {
  scroll-margin-top: 24px;
  padding: 0 0 74px;
  margin-bottom: 74px;
  border-bottom: 1px solid var(--line);
}
.article-index { margin-bottom: 18px; color: var(--orange); font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.article-section h2 { max-width: 780px; margin-bottom: 28px; font-size: clamp(2.2rem, 4vw, 4.1rem); }
.article-prose { color: #32383d; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.75; }
.article-prose p:last-child { margin-bottom: 0; }
.article-prose strong { color: var(--ink); }
.formula {
  margin: 30px 0;
  padding: 28px;
  border-left: 4px solid var(--orange);
  background: var(--white);
  color: var(--ink);
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
.guide-table { margin: 30px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guide-table table { width: 100%; min-width: 600px; border-collapse: collapse; background: var(--white); }
.guide-table th,
.guide-table td { padding: 15px 16px; border: 1px solid var(--line); text-align: left; }
.guide-table th { background: #e7e9ea; font-size: .78rem; }
.guide-table td { font-size: .86rem; }
.guide-note { color: #687178; font-size: .78rem; font-style: italic; }

.article-cta {
  padding: 42px;
  margin-bottom: 74px;
  background: var(--ink);
  color: var(--white);
}
.article-cta h2 { max-width: 620px; margin-bottom: 30px; font-size: clamp(2.25rem, 4vw, 4rem); }
.article-cta > div { display: grid; gap: 8px; }
.article-cta a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line-light);
  color: #d9dde0;
  text-decoration: none;
}
.article-cta a:hover { color: var(--orange); }
.article-cta a span { color: var(--orange); }
.article-faq { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.article-faq .faq-list details { border-color: var(--line); }
.article-faq .faq-list summary { color: var(--ink); }
.article-faq .faq-list details p { color: #5b646b; }

.guide-related { padding-top: 76px; padding-bottom: 76px; background: #e7e9ea; }
.guide-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.guide-related-grid a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.42);
  text-decoration: none;
}
.guide-related-grid a:hover { border-color: var(--orange); background: var(--white); }
.guide-related-grid span { grid-column: 1; color: var(--orange-dark); font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.guide-related-grid strong { align-self: end; font-size: 1.15rem; line-height: 1.15; }
.guide-related-grid b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--orange); }

@media (max-width: 1040px) {
  .guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .guide-hero { grid-template-columns: 1fr minmax(240px,.38fr); gap: 42px; }
  .article-layout { grid-template-columns: 220px minmax(0,1fr); gap: 50px; }
}
@media (max-width: 820px) {
  .guide-hub-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 68px; }
  .guide-hub-hero aside { justify-items: start; width: fit-content; padding: 26px 0 0; border-top: 1px solid var(--line-light); border-left: 0; }
  .guide-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 62px; }
  .guide-key { max-width: 600px; }
  .article-layout { grid-template-columns: 1fr; gap: 50px; padding-top: 64px; }
  .toc { position: static; }
  .toc a { grid-template-columns: 28px 1fr; }
  .guide-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 320px; padding: 24px; }
  .guide-hub-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .guide-hero h1 { font-size: clamp(2.7rem, 12vw, 4.2rem); }
  .article-cta { padding: 28px 22px; }
  .guide-table { margin-right: -8px; margin-left: -8px; }
}

/* =========================================================
   Batch 4 — heat-pump pre-sizing calculator
   ========================================================= */
.calculator-page { background: var(--paper); }
.calculator-page main { overflow: clip; }
.calculator-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.42fr);
  gap: 72px;
  min-height: 560px;
  padding: 76px max(28px, calc((100vw - var(--max)) / 2)) 82px;
  background: var(--ink);
  color: var(--white);
}
.calculator-hero > div { align-self: center; }
.calculator-hero h1 {
  max-width: 900px;
  margin-bottom: 28px;
  font-size: clamp(3.4rem, 6.3vw, 6.8rem);
  font-weight: 830;
}
.calculator-hero > div > p:not(.kicker) { max-width: 760px; margin:0; color:#c3c9cd; font-size:clamp(1.04rem,1.4vw,1.24rem); }
.calculator-hero aside { align-self:center; padding:30px; border:1px solid var(--line-light); background:#12161a; }
.calculator-hero aside span { display:block; margin-bottom:26px; color:var(--orange); font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.calculator-hero aside strong { display:block; margin-bottom:15px; font-size:clamp(1.55rem,2.3vw,2.4rem); line-height:1; letter-spacing:-.04em; }
.calculator-hero aside p { margin:0; color:#8e979d; font-size:.82rem; }

.calculator-shell {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:32px;
  padding:96px max(28px, calc((100vw - var(--max)) / 2));
  background:var(--paper);
}
.calculator-form { min-width:0; }
.calculator-section-title {
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  align-items:start;
  margin:0 0 28px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.calculator-section-title:first-child { padding-top:0; border-top:0; }
.calculator-section-title > span { color:var(--orange); font-size:.72rem; font-weight:850; letter-spacing:.12em; }
.calculator-section-title h2 { margin-bottom:6px; font-size:clamp(1.8rem,3vw,3rem); }
.calculator-section-title p { margin:0; color:#6b7379; font-size:.84rem; }
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:54px;
}
.form-grid label { display:grid; gap:8px; min-width:0; }
.form-grid label > span { color:#4f575d; font-size:.74rem; font-weight:780; }
.form-grid input,
.form-grid select {
  width:100%;
  min-height:52px;
  padding:0 14px;
  border:1px solid #c6cacc;
  border-radius:0;
  background:#fff;
  color:var(--ink);
  font:inherit;
  outline:none;
}
.form-grid input:focus,
.form-grid select:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(255,40,0,.12); }
.input-unit { position:relative; }
.input-unit input { padding-right:50px; }
.input-unit b { position:absolute; top:50%; right:14px; transform:translateY(-50%); color:#747c82; font-size:.75rem; }
.calculator-disclaimer { margin:0 0 26px; padding:22px; border-left:3px solid var(--orange); background:#e6e8e9; }
.calculator-disclaimer strong { display:block; margin-bottom:7px; font-size:.82rem; }
.calculator-disclaimer p { margin:0; color:#5b6369; font-size:.78rem; }
.calculator-submit { min-width:220px; }

.calculator-result {
  position:sticky;
  top:24px;
  align-self:start;
  min-height:460px;
  padding:34px;
  background:var(--ink);
  color:var(--white);
}
.result-empty span,
.result-ready > span { display:block; margin-bottom:28px; color:var(--orange); font-size:.7rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.result-empty strong { display:block; margin-bottom:18px; font-size:clamp(2rem,3vw,3.2rem); line-height:1; letter-spacing:-.045em; }
.result-empty p { color:#8e979d; }
.result-ready > strong { display:block; margin-bottom:14px; font-size:clamp(3rem,5vw,5.5rem); line-height:.9; letter-spacing:-.06em; }
.result-ready > p { color:#9ca4aa; font-size:.84rem; }
.result-warning { margin:24px 0; padding:16px; border:1px solid rgba(255,255,255,.14); color:#c9cfd3; font-size:.78rem; }
.result-ready h3 { margin:28px 0 12px; color:#fff; font-size:1rem; }
.result-models { display:grid; gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.result-models a { display:flex; justify-content:space-between; gap:16px; padding:13px 14px; background:#12161a; color:#fff; font-size:.84rem; font-weight:760; text-decoration:none; }
.result-models a:hover { color:var(--orange); }
.result-models span { color:var(--orange); font-size:.72rem; }
.result-ready dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:24px 0; background:var(--line-light); }
.result-ready dl > div { padding:13px; background:#12161a; }
.result-ready dt { color:#7e878e; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.result-ready dd { margin:3px 0 0; color:#fff; font-size:.82rem; }
.result-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.result-actions .button-outline-dark { border-color:rgba(255,255,255,.34); color:#fff; background:transparent; cursor:pointer; }
.result-actions .button-outline-dark:hover { background:#fff; color:var(--ink); }
.result-ready small { display:block; margin-top:18px; color:#6f787f; font-size:.67rem; }
.calculator-method { background:#e7e9ea; }
.calculator-hub-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  padding:48px max(28px, calc((100vw - var(--max)) / 2));
  background:var(--orange);
  color:var(--ink);
}
.calculator-hub-cta .eyebrow { color:var(--ink); }
.calculator-hub-cta h2 { max-width:780px; margin:0; font-size:clamp(2rem,4vw,4.2rem); }
.calculator-hub-cta .button-primary { background:var(--ink); color:#fff; white-space:nowrap; }

@media (max-width:1100px) {
  .calculator-shell { grid-template-columns:minmax(0,1fr) minmax(300px,.68fr); }
}
@media (max-width:900px) {
  .calculator-hero { grid-template-columns:1fr; gap:30px; min-height:0; }
  .calculator-hero aside { max-width:600px; }
  .calculator-shell { grid-template-columns:1fr; }
  .calculator-result { position:static; }
}
@media (max-width:620px) {
  .calculator-hero h1 { font-size:clamp(2.8rem,13vw,4.3rem); }
  .form-grid { grid-template-columns:1fr; }
  .calculator-section-title { grid-template-columns:38px 1fr; }
  .calculator-result { padding:26px 20px; }
  .calculator-hub-cta { align-items:flex-start; flex-direction:column; }
  .calculator-hub-cta .button-primary { width:100%; }
}

/* Header breakpoint QA: with the expanded navigation, switch to the menu before the logo/CTA become crowded. */
@media (max-width: 1040px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 10px;
  }
  .site-header nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { inset: 92px 0 0; }
}
@media (max-width: 820px) {
  .mobile-menu { inset: 56px 0 0; }
}
@media (max-width: 520px) {
  .mobile-menu { inset: 58px 0 0; }
}