/* Solar heatable — homepage styles (Figma frame 5134:2) */

/* ---------- Layout helpers ---------- */
.wrap { max-width: 88.75rem; margin: 0 auto; padding: 0 2.5rem; }

/* Gradient italic accent text (shared convention, see flow.css) */
.grad-italic {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  background: linear-gradient(87.3deg, #111111 21.751%, #e2fa5a 136.65%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Larger CTA variant used in hero */
.btn-lg { font-size: 1.25rem; }
.btn-lg .chip { width: 2.5rem; height: 2.5rem; }
.btn-lg .chip img { width: 1.75rem; height: 1.75rem; }

/* Light button on dark background */
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: #ececec; }

/* Small lime arrow chip button */
.mini-chip {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  border-radius: var(--radius-sm);
  transition: transform .15s ease;
}
.mini-chip:hover { transform: translateX(0.125rem); }
.mini-chip img { width: 1.5rem; height: 1.5rem; }

/* Section headings in display face */
.exclusive h2, .steps h2, .products h2, .installs h2,
.save h2, .insights h2, .family h2, .faq h2, .footer-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.08rem;
  color: var(--ink);
  margin: 0;
}

/* ---------- Hover popovers (Figma prototype overlays) ---------- */
[data-popover] { position: relative; }
.popover {
  position: absolute;
  z-index: 30;
  width: 18.75rem;
  background: var(--white);
  border: 0.0625rem solid var(--ink-08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.125rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.popover.show { opacity: 1; visibility: visible; transform: translateY(0); }
.popover h4 {
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
}
.popover p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink-70); }
.pop-top { left: 50%; bottom: calc(100% + 0.75rem); margin-left: -9.375rem; }
.pop-side { right: 1.5rem; top: 1.5rem; }
.pop-center { left: 50%; top: 50%; margin: -3.75rem 0 0 -9.375rem; }

/* ============ HERO ============ */
/* The hero imagery layer used to carry its own `max(<figma px>, <the same in
   vw>)` fluid hack, because it was the ONLY part of the page that scaled above
   1920. That is now global — base.css makes the root font-size `100vw / 120`,
   so plain rem scales the imagery *and* the type together (84.5rem is exactly
   70.4166667vw at that root, and below the 1200 floor the root freezes at 16px
   so 84.5rem is exactly the original 1352px). The max() branches were
   provably equal at every width, so dropping them changes nothing.
   LOCAL EDIT, see CLAUDE.md before re-copying this file. */
.hero {
  position: relative;
  height: 84.5rem; /* 1352 = the houses' 405 top + 947 height */
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-sky {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 65.6875rem;
  object-fit: cover;
}
.hero-sky-flip { top: 65.625rem; transform: scaleY(-1); }
.hero-grad-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32.875rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.hero-grad-bottom {
  position: absolute;
  bottom: -0.0625rem; left: 0; right: 0;
  height: 17.1875rem;
  background: linear-gradient(to top, #FEFFF9, rgba(254, 255, 249, 0));
}
/* 1920px design canvas centered; crops evenly on narrower viewports, and grows
   with the viewport on wider ones. Width and height scale by the SAME factor,
   so the box aspect stays 1920/947 and every child's object-fit crop is
   unchanged — which is why the children below are percentages of this box
   rather than px: they then scale for free and no crop math is duplicated.
   The 120rem width still overscans the body by the scrollbar width (it tracks
   the viewport, not the body) — deliberate, and clipped by .hero's overflow. */
.hero-houses {
  position: absolute;
  top: 25.3125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 120rem;
  height: 59.1875rem;
}
/* px -> % of the 1920x947 box: -60/1920, 1661/1920, 1600/1920, 947/947 */
.hero-house-main { position: absolute; left: -3.125%; top: 0; width: 86.5104167%; height: 100%; object-fit: cover; }
.hero-house-mirror { position: absolute; left: 83.3333333%; top: 0; width: 86.5104167%; height: 100%; object-fit: cover; transform: scaleX(-1); }
/* 445.44/1920, 123/947, 733/1920, 216.5/947 — `left` is a twice-corrected local
   edit: Figma's 509 -> 452, then -> 23.2% (445.44) on 2026-08-17, the user's own
   DevTools value, when the outline became the drawing video. Desktop only by
   construction — home-mobile.css restates all four percentages below 768. */
.hero-panel-outline { position: absolute; left: 23.2%; top: 12.9883844%; width: 38.1770833%; height: 22.8616684%; }

/* --- Header / nav --- */
.site-header {
  position: relative;
  z-index: 10;
  max-width: 83.75rem;
  margin: 0 auto;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.header-left, .header-right { flex: 1 0 0; display: flex; align-items: center; }
.header-right { justify-content: flex-end; }
.logo { width: 7.3125rem; height: 3.75rem; object-fit: contain; filter: drop-shadow(0 0 2.5rem white); }
.header-nav {
  flex: 1 0 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}
.nav-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01rem;
  line-height: 1.6rem;
  color: var(--ink);
  white-space: nowrap;
}
.nav-link .chev { width: 1.5rem; height: 1.5rem; }

/* --- Hero copy --- */
.hero-inner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero h1 {
  margin: 3rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4rem;
  line-height: 4.4rem;
  letter-spacing: -0.08rem;
  color: var(--ink);
  white-space: nowrap;
}
.hero h1 .thin { font-weight: 400; color: var(--ink-70); }
.hero h1 .hl, .products-rail h2 .hl {
  font-weight: 600;
  font-style: italic;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom 0.5rem / 100% 0.75rem;
}
.hero-sub {
  margin: 0.9375rem 0 0;
  max-width: 36rem;
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
}
.hero-checks {
  list-style: none;
  margin: 1.375rem 0 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.hero-checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01rem;
}
.hero-checks li img { width: 1.5rem; height: 1.5rem; }
.hero-inner > .btn { margin-top: 2rem; }
.hero-reviews {
  margin-top: 3.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-reviews p { margin: 0; font-size: 1.25rem; letter-spacing: -0.01rem; }
.hero-reviews p em { font-weight: 600; }
.tp-stars {
  position: relative;
  display: block;
  width: 7.8125rem; height: 1.5rem;
  overflow: hidden;
}
.tp-stars img {
  position: absolute;
  left: 0; top: -140.95%;
  width: 100%; height: 241.9%;
  max-width: none;
}
.tp-logo {
  position: relative;
  display: block;
  width: 5.875rem; height: 1.5rem;
  overflow: hidden;
}
.tp-logo img {
  position: absolute;
  left: -36.63%; top: -62.21%;
  width: 172.68%; height: 291.68%;
  max-width: none;
}

/* --- "Nothing to pay" callout --- */
.hero-callout {
  position: absolute;
  z-index: 6;
  top: 33.125rem;
  right: max(1.5rem, calc(50% - 46.375rem));
  width: 20.8125rem;
}
.callout-dash {
  position: absolute;
  right: 0;
  top: 7.4375rem;
  width: 39.8125rem;
  max-width: none;
  height: 0.125rem;
}
.callout-card {
  position: relative;
  background: var(--accent);
  border: 0.125rem solid var(--ink);
  border-radius: 0.5rem;
  height: 6.9375rem;
  text-align: center;
  overflow: hidden;
  font-family: var(--font-display);
  letter-spacing: -0.08rem;
  white-space: nowrap;
}
.callout-title { margin: 0.625rem 0 0; font-weight: 500; font-size: 2rem; color: var(--ink); }
.callout-sub { margin: 0.0625rem 0 0; font-weight: 400; font-size: 1.5rem; color: var(--ink-70); }

/* ============ EXCLUSIVE SYSTEM ============ */
.exclusive { padding: 2.5rem 0 5.625rem; }
.exclusive-grid {
  display: grid;
  grid-template-columns: 1fr 38.75rem;
  gap: 4rem;
  align-items: start;
}
.exclusive-copy h2 { font-size: 3rem; line-height: 1.15; }
.exclusive-copy > p {
  margin: 1.25rem 0 0;
  max-width: 32.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.exclusive-copy > .btn { margin-top: 1.75rem; }
.exclusive-stats {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stat-card {
  background: var(--white);
  border: 0.0625rem solid var(--ink-08);
  border-radius: var(--radius);
  padding: 1.25rem 1.125rem;
}
.stat-ic { display: block; width: 1.75rem; height: 1.75rem; }
.stat-ic svg { width: 100%; height: 100%; }
.stat-card h3 {
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
}
.stat-card p { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--ink-70); }
.exclusive-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.exclusive-photo > img { width: 100%; height: 35rem; object-fit: cover; }
.exclusive-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}
.exclusive-photo figcaption p {
  margin: 0;
  max-width: 25rem;
  color: var(--white);
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.01rem;
}
.postbar {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--white);
  border: 0.0625rem solid var(--ink-08);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 0.75rem 0.75rem 0.75rem 1.375rem;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}
.post-ic { width: 1.5rem; height: 1.5rem; flex: none; }
.post-ic svg { width: 100%; height: 100%; }
.postbar input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 1.0625rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
  background: transparent;
  min-width: 0;
}
.postbar input::placeholder { color: var(--ink-60); }
.postbar .btn { flex: none; }

/* ============ STEPS (1-2-3) ============ */
.steps {
  background: linear-gradient(180deg, #FEFFF9 0%, #f0f5cf 45%, var(--accent) 100%);
  padding: 5.625rem 0 6.875rem;
  overflow: hidden;
}
.steps-title {
  text-align: center;
  font-size: 3rem;
  line-height: 1.15;
}
.steps-note {
  margin-top: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.note-avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
  flex: none;
  border: 0.125rem solid var(--ink);
}
.note-avatar img { width: 100%; height: 100%; object-fit: cover; }
.steps-note p { margin: 0; font-weight: 500; font-size: 1rem; letter-spacing: -0.01rem; }
.steps-cards {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.step-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}
.step-card:nth-child(2) { margin-top: 4.375rem; }
.step-card:nth-child(3) { margin-top: 8.75rem; }
.step-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.75rem;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom 0.25rem / 100% 0.625rem;
}
.step-n {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.09375rem solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
}
.step-card p { margin: 0.875rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-70); }
.step-sketch { display: block; width: 100%; height: auto; margin-top: 1.375rem; }

/* ============ PRODUCTS ============ */
.products { padding: 6.875rem 0; }
.products-grid {
  display: grid;
  grid-template-columns: 26.25rem 1fr;
  gap: 4.5rem;
  align-items: start;
}
.products-rail { position: sticky; top: 2.5rem; }
.products-rail h2 { font-size: 3.25rem; line-height: 1.1; }
.products-rail h2 .thin { font-weight: 400; color: var(--ink-70); }
.rail-checks {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.rail-checks li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01rem;
}
.rail-checks li img { width: 1.375rem; height: 1.375rem; flex: none; }
.rail-callout { margin-top: 2.5rem; max-width: 20.8125rem; }
.products-list { display: flex; flex-direction: column; gap: 3.5rem; }
.product { border-bottom: 0.0625rem solid var(--ink-08); padding-bottom: 2.5rem; }
.product:last-child { border-bottom: 0; padding-bottom: 0; }
.product-top {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.product-info { max-width: 26.25rem; }
.tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.075rem;
  color: var(--ink-70);
}
.tag-new { color: #E02B2B; }
.product h3 {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.875rem;
  letter-spacing: -0.0375rem;
}
.product-info > p { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-70); }
.product-info .btn { margin-top: 1.375rem; }
.product-img { width: 16.25rem; height: 16.25rem; object-fit: contain; flex: none; }
.product-thumbs { display: flex; gap: 0.75rem; flex: none; }
.product-thumbs img {
  width: 7.75rem; height: 7.75rem;
  object-fit: contain;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0.5rem;
}
.product-checks {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.product-checks li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  letter-spacing: -0.01rem;
}
.product-checks li img { width: 1.25rem; height: 1.25rem; flex: none; }
.learn-row {
  margin-top: 1.5rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
  cursor: pointer;
}
.learn-row span { border-bottom: 0.0625rem dashed var(--ink-70); padding-bottom: 0.125rem; }

/* ============ TRUST BAND ============ */
.trust { background: #0A0A0A; padding: 6rem 0; }
.trust-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.trust h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.125rem;
  line-height: 1.2;
  letter-spacing: -0.0425rem;
  color: var(--white);
}
.trust-item {
  text-align: center;
  position: relative;
  padding: 0 0.75rem;
}
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: -1.25rem; top: 50%;
  transform: translateY(-50%);
  width: 0.0625rem; height: 5.25rem;
  background: rgba(255, 255, 255, 0.14);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  margin-bottom: 1rem;
}
.trust-badge.which {
  border: 0.125rem solid #E4003B;
  border-radius: 62.4375rem;
  padding: 0 1.375rem;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  font-style: italic;
}
.trust-badge.star { width: 3rem; }
.trust-badge.star svg { width: 2.75rem; height: 2.75rem; }
.trust-badge.mcs {
  width: 3.25rem; height: 3.25rem;
  border: 0.125rem solid var(--white);
  border-radius: 50%;
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.03125rem;
}
.trust-item .t1 {
  margin: 0;
  color: var(--white);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01rem;
}
.trust-item .t2 { margin: 0.375rem 0 0; color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; }

/* ============ INSTALLATIONS SLIDER ============ */
.installs { padding: 6.875rem 0 2.5rem; }
.installs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.installs h2 { font-size: 3rem; line-height: 1.12; }
.installs h2 .sub {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-70);
  font-size: 0.72em;
}
.slider-arrows { display: flex; gap: 0.625rem; }
.slide-btn {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--ink-08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.slide-btn:hover { background: var(--accent); }
.slide-btn img { width: 1.625rem; height: 1.625rem; }
.slide-btn.prev img { transform: scaleX(-1); }
.installs-track {
  margin-top: 2.75rem;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.installs-track::-webkit-scrollbar { display: none; }
.install-card {
  flex: 0 0 35rem;
  background: var(--white);
  border: 0.0625rem solid var(--ink-08);
  border-radius: var(--radius);
  overflow: hidden;
}
.install-photo { position: relative; height: 23.75rem; }
.install-photo img { width: 100%; height: 100%; object-fit: cover; }
.ph-tag {
  position: absolute;
  left: 1rem; top: 1rem;
  background: rgba(17, 17, 17, 0.82);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
}
.install-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
}
.install-meta h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.025rem;
}
.install-meta p { margin: 0.375rem 0 0; font-size: 0.9375rem; color: var(--ink-70); }
.install-cta {
  flex: 0 0 26.25rem;
  background: var(--accent);
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
}
.install-cta h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 2.125rem;
  letter-spacing: -0.0425rem;
}
.install-cta p { margin: 0.875rem 0 0; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-70); }
.install-cta .btn { margin-top: 1.75rem; align-self: flex-start; }

/* ============ WE HANDLE YOUR INSTALLATION ============ */
.handled { padding: 4.375rem 0; }
.handled-panel {
  background: var(--accent);
  border-radius: 1rem;
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.handled .kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.01rem;
  color: rgba(17, 17, 17, 0.75);
}
.handled h2 { margin: 0.125rem 0 0; font-size: 3.5rem; }
.handled h2 em {
  font-style: italic;
  font-weight: 600;
}
.handled-desc {
  margin: 1.125rem 0 0;
  max-width: 26.875rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.75);
}
.handled-chips {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  max-width: 28.75rem;
}
.h-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01rem;
}
.h-chip i {
  width: 2.5rem; height: 2.5rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.h-chip i svg { width: 1.375rem; height: 1.375rem; }
.handled-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
}
.handled-card > p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.handled-card > p strong { color: var(--ink); font-weight: 600; }
.handled-glow {
  margin-top: 1.75rem;
  background: radial-gradient(60% 70% at 50% 45%, #3a4d0f 0%, #101503 55%, #0A0A0A 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem;
}
.handled-glow img {
  width: 78%;
  filter: drop-shadow(0 0 2.75rem rgba(226, 250, 90, 0.35));
  transform: rotate(-6deg) skewY(2deg);
}

/* ============ SUNSET PHOTO ============ */
.sunset { position: relative; height: 48.75rem; overflow: hidden; }
.sunset > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(.5) saturate(1.7) hue-rotate(-18deg) brightness(.62) contrast(1.1);
}
.sunset-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 8, 0, 0.55), rgba(0, 0, 0, 0) 40%, rgba(10, 4, 0, 0.6)),
    radial-gradient(70% 55% at 50% 8%, rgba(255, 140, 30, 0.4), rgba(255, 140, 30, 0) 70%);
}

/* ============ SAVE ON BILLS ============ */
.save { padding: 6.875rem 0 5.625rem; text-align: center; }
.save h2 { font-size: 3rem; }
.save-sub {
  margin: 1.375rem auto 0;
  max-width: 51.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.save-cards {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
}
.save-card {
  background: var(--white);
  border: 0.0625rem solid var(--ink-08);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.save-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--accent);
  border-radius: var(--radius);
}
.save-ic svg { width: 1.875rem; height: 1.875rem; }
.save-card h3 {
  margin: 2.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.025rem;
}
.save-card > p { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-70); }

/* ============ INSIGHTS ============ */
.insights {
  background: linear-gradient(180deg, #FEFFF9 0%, #f0f5cf 55%, var(--accent) 100%);
  padding: 5.625rem 0 6.875rem;
}
.insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.insights h2 { font-size: 3rem; }
.insights-head p {
  margin: 0.625rem 0 0;
  font-size: 1.125rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.insights-cards {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.insight-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
}
.insight-card:hover { transform: translateY(-0.25rem); }
.insight-img { height: 15rem; overflow: hidden; }
.insight-img img { width: 100%; height: 100%; object-fit: cover; }
.insight-illu {
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.insight-illu .illu {
  width: 82%;
  height: auto;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
  opacity: .8;
}
.insight-body { padding: 1.375rem 1.5rem 1.75rem; }
.insight-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tagchip {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  border-radius: 62.4375rem;
  padding: 0.375rem 0.75rem;
}
.insight-meta .date { font-size: 0.875rem; color: var(--ink-60); }
.insight-body h3 {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.025rem;
}
.insight-body p { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-70); }

/* ============ FAMILY BUSINESS ============ */
.family { background: #0A0A0A; overflow: hidden; }
.family-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 35.75rem;
}
.family h2 {
  font-size: 3.25rem;
  line-height: 1.15;
  color: var(--white);
}
.family h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.family-copy p {
  margin: 1.5rem 0 0;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01rem;
  color: rgba(255, 255, 255, 0.7);
}
.family-copy .btn { margin-top: 2rem; }
.family-photo {
  position: relative;
  height: 35.75rem;
}
.family-photo img {
  width: 120%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.9);
  -webkit-mask-image: radial-gradient(85% 85% at 55% 45%, #000 40%, transparent 78%);
          mask-image: radial-gradient(85% 85% at 55% 45%, #000 40%, transparent 78%);
}

/* ============ FAQ ============ */
.faq { padding: 7.5rem 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 27.5rem 1fr;
  gap: 5rem;
  align-items: start;
}
.faq h2 { font-size: 3rem; line-height: 1.15; }
.faq-sub {
  margin: 1.375rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.faq-contact {
  margin-top: 8.125rem;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.faq-contact p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--ink-70); }
.faq-list { display: flex; flex-direction: column; gap: 0.625rem; }
.faq-item {
  background: var(--white);
  border: 0.0625rem solid var(--ink-08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item.open { border-color: var(--accent); border-width: 0.125rem; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01rem;
}
.faq-q .chip {
  flex: none;
  width: 2rem; height: 2rem;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.faq-q .chip img { width: 1.25rem; height: 1.25rem; transform: rotate(90deg); transition: transform .25s ease; }
.faq-item.open .faq-q .chip img { transform: rotate(-90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.open .faq-a { max-height: 18.75rem; }
.faq-a p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  font-size: 0.96875rem;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 40rem;
}

/* ============ FOOTER ============ */
.footer { padding: 0 1.25rem 1.25rem; }
.footer-wrap {
  max-width: 86.25rem;
  margin: 0 auto;
  background: linear-gradient(180deg, #f5f6f0 0%, var(--accent) 100%);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.footer-cta {
  text-align: center;
  padding: 6rem 2.5rem 0;
}
.footer-cta h2 { font-size: 2.75rem; line-height: 1.2; }
.footer-cta h2 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom 0.375rem / 100% 0.75rem;
}
.footer-cta p {
  margin: 1.125rem auto 0;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.footer-cta .btn { margin-top: 1.75rem; }
.footer-photo {
  height: 28.75rem;
  margin-top: -2.5rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8.125rem, #000 calc(100% - 5.625rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 8.125rem, #000 calc(100% - 5.625rem), transparent 100%);
}
.footer-photo img { width: 100%; height: 100%; object-fit: cover; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 1.25rem 2.5rem 3.5rem;
}
.footer-logo { display: block; width: 7.3125rem; }
.footer-logo img { width: 7.3125rem; height: 3.75rem; object-fit: contain; }
.footer-brand p {
  margin: 1.25rem 0 0;
  max-width: 20rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.footer-social { margin-top: 1.75rem; display: flex; gap: 0.5rem; }
.footer-social a {
  width: 2.5rem; height: 2.5rem;
  background: var(--ink);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a img { width: 1.5rem; height: 1.5rem; }
.footer-col h4 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.25rem;
  background: linear-gradient(88deg, #111111 21.751%, #E2FA5A 136.65%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col ul a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
  white-space: nowrap;
}
.footer-bar {
  background: var(--white);
  border-radius: var(--radius);
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-bar p {
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01rem;
}

/* ============ RESPONSIVE (>=1280 desktop-first flexibility) ============ */
@media (max-width: 767.98px) { /* was 1440px — at or above the 768 fluid floor the design scales proportionally, so this narrow-viewport fallback is only needed below it */
  .exclusive-grid { grid-template-columns: 1fr 32.5rem; gap: 3rem; }
  .products-grid { grid-template-columns: 23.75rem 1fr; gap: 3rem; }
}
@media (max-width: 767.98px) { /* was 1320px — at or above the 768 fluid floor the design scales proportionally, so this narrow-viewport fallback is only needed below it */
  .exclusive-copy h2, .steps-title, .installs h2, .save h2, .insights h2, .faq h2 { font-size: 2.625rem; }
  .products-rail h2 { font-size: 2.75rem; }
  .hero h1 { font-size: 3.5rem; line-height: 3.875rem; }
  .exclusive-grid { grid-template-columns: 1fr 28.75rem; }
  .exclusive-photo > img { height: 30rem; }
  .trust-row { gap: 1.5rem; }
  .family h2 { font-size: 2.75rem; }
  .footer-cta h2 { font-size: 2.375rem; }
  .faq-grid { gap: 3rem; }
}