/* Homepage top: identity hero and the product universe (build_home.py). */
/* The neighbourhood runs from edge to edge beneath the navigation. */
body:has(.gh-hero){overflow-x:clip}
.gh-hero{position:relative;isolation:isolate;margin:-38px calc(50% - 50vw) 0;color:var(--ink)}
.gh-hero h1{font-family:var(--heading-font);font-weight:400;font-size:clamp(32px,3.25vw,52px);line-height:1.1;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.gh-hero-lead{font-size:16px;line-height:1.65;margin:0;color:#4f675c}
.gh-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.gh-hero-actions .site-primary{margin:0}
.gh-hero-shop{color:var(--ink);font-size:13px;font-weight:650;text-underline-offset:4px}

/* The still is the first paint. The film is only the source for the canvas. */
.gh-demo{position:relative;min-width:0;margin:0}
.gh-scene{position:relative;aspect-ratio:1.85;overflow:hidden;background:var(--ink)}
.gh-still,.gh-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;filter:brightness(.8) contrast(1.1)}
.gh-film{position:absolute;width:1px;height:1px;opacity:0}
.gh-canvas{opacity:0}
.gh-hero.has-film-frame .gh-canvas{opacity:1}
@media(min-width:901px){
  .gh-hero{display:grid;align-items:center;min-height:clamp(475px,43vw,820px);color:#fff;background:#0a1c14}
  .gh-hero-copy{width:min(41%,550px);margin-inline-start:max(32px,calc((100% - 1320px) / 2));padding:clamp(36px,5vw,76px) 0}
  .gh-hero-lead{max-width:480px;color:#e0ebe2}
  .gh-hero-actions .site-primary{background:var(--sage);color:var(--ink)}
  .gh-hero-shop{color:#fff}
  .gh-demo{position:absolute;inset:0;z-index:-1}
  .gh-scene{height:100%;aspect-ratio:auto}
  .gh-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(8,23,17,.94),rgba(8,23,17,.79) 25%,rgba(8,23,17,.61) 37%,transparent 57%)}
}

/* Short labels and recognisable icons leave room for the house below. */
.gh-proofs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,28px);margin:18px 0 0;padding:0;list-style:none}
.gh-proofs li{display:flex;align-items:center;gap:10px;min-height:48px;font-size:14px;font-weight:650;line-height:1.25}
.gh-proof-icon{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--sage)}
.gh-proof-icon svg{width:25px;height:25px}

.gh-partnership {
  margin: 0 0 clamp(30px, 5vw, 65px);
  padding: clamp(20px, 4vw, 52px);
  border-radius: 24px;
  background: var(--sage);
  color: var(--ink);
  scroll-margin-top: 92px;
}
.gh-partnership h2, .gh-partnership h3 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.15;
}
.gh-partnership h2 { font-size: clamp(29px, 3.4vw, 48px); }
.gh-partnership h3 { font-size: clamp(21px, 2vw, 28px); }
.gh-partnership p { margin: 0; color: #3f594d; line-height: 1.55; }
.gh-partnership p.gh-partnership-intro { max-width: 68ch; margin: 12px 0 24px; font-size: 16px; }

.gh-partnership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.gh-partnership-track {
  --track-line: #c7cfc3;
  --track-icon: #e9eee6;
  padding: clamp(14px, 2.2vw, 26px);
  border: 1px solid var(--track-line);
  border-radius: 18px;
  background: #fbfbf6;
}
.gh-partnership-track[data-track=GreenHero] {
  --track-line: #719a81;
  --track-icon: #dbead6;
  background: var(--ink);
  color: #f5faf1;
}
.gh-partnership-track[data-track=GreenHero] p { color: #e0ebe2; }
.gh-partnership-track[data-track=GreenHero] svg { color: var(--ink); }
.gh-partnership-track ol {
  display: grid;
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.gh-partnership-step {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.gh-partnership-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset: 38px auto -18px 18px;
  width: 2px;
  background: var(--track-line);
}
.gh-partnership-step svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background: var(--track-icon);
}
.gh-partnership-step h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.gh-partnership-step p { font-size: 14px; }

@media(max-width:760px) {
  .gh-partnership-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Universe: the products circle the white house clockwise in the owner's order
   (roof, panels, batteries, electricity, services, app), freestanding, each with
   its line. Laid out at 1360 x 1710 inside a frame of the same proportions and
   scaled to the frame's width (--s, set by home-universe.js), so nothing moves
   when it is scaled. Per product: --x/--y centre of the picture, --iw/--ih
   picture box, --w text width. */
.hu{margin:20px 0 44px;padding:40px clamp(22px,4vw,60px) 44px;border-radius:28px;color:var(--ink);background:#fbfbf6;
  box-shadow:inset 0 0 0 1px rgba(20,58,47,.08);scroll-margin-top:90px;overflow:hidden}
.hu-head{text-align:center;max-width:860px;margin:0 auto}
.hu-head .site-eyebrow{color:#3e6b46}
.hu-head h2{font-family:var(--heading-font);font-weight:400;font-size:clamp(36px,4.2vw,62px);line-height:1.04;letter-spacing:-.025em;margin:12px 0 14px}
.hu-head>p:last-child{color:#4f675c;font-size:16px;line-height:1.7;margin:0}
.hu-note{text-align:center;font-size:11px;color:#6b8070;margin:18px 0 0}
.hu-frame{position:relative;max-width:1360px;aspect-ratio:1360/1710;margin:16px auto 0}
.hu-stage{position:absolute;left:0;top:0;width:1360px;height:1710px;transform:scale(var(--s,1));transform-origin:0 0}
.hu-villa{position:absolute;left:300px;top:510px;width:760px;margin:0}
.hu-villa::before{content:"";position:absolute;inset:-34% -16% -26%;border-radius:50%;background:radial-gradient(closest-side,rgba(239,195,81,.16),rgba(185,217,164,.12) 55%,transparent);z-index:-1}
.hu-villa img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(20,58,47,.2))}
.hu-spot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#d9a520;box-shadow:0 0 0 4px rgba(217,165,32,.22);transition:transform .3s,box-shadow .3s}
.hu-spot.is-active{transform:scale(1.4);box-shadow:0 0 0 8px rgba(217,165,32,.25),0 0 22px rgba(217,165,32,.8)}
.hu-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* The path 01 to 07: a solid line with arrows; the way back from 07 to 01 is faint. */
.hu-lines .hu-orbit{fill:none;stroke:rgba(23,62,46,.38);stroke-width:2;stroke-linecap:round}
.hu-lines .hu-orbit-back{stroke:rgba(23,62,46,.16);stroke-dasharray:2 7}
.hu-lines .hu-arrow{fill:none;stroke:#d9a520;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hu-lines .hu-comet{fill:#d9a520;filter:drop-shadow(0 0 6px rgba(217,165,32,.9))}
.hu-lines path[data-node]{fill:none;stroke:rgba(20,58,47,.22);stroke-width:1.3;stroke-dasharray:3 5;transition:stroke .3s}
.hu-lines path[data-node].is-active{stroke:#d9a520;stroke-width:2.4;stroke-dasharray:none}
.hu-items{list-style:none;margin:0;padding:0;counter-reset:hu}
.hu-item{counter-increment:hu;--w:250px}
.hu-node{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;justify-items:center;width:var(--w);transform:translate(-50%,calc(var(--ih) / -2));text-align:center;color:var(--ink);text-decoration:none}
.hu-node:focus-visible{outline:2px solid #d9a520;outline-offset:8px;border-radius:12px}
/* The product's number, 01 to 07. */
.hu-node::before,.hu-price::before{content:counter(hu,decimal-leading-zero);position:absolute;left:calc(50% - var(--iw) / 2 - 22px);top:-8px;z-index:3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;background:#173e2e;color:#efc351;box-shadow:0 6px 16px rgba(20,58,47,.25)}
.hu-plate{display:flex;align-items:center;justify-content:center;width:var(--iw);height:var(--ih);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hu-plate img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(20,58,47,.2))}
.hu-item.is-active .hu-plate,.hu-node:hover .hu-plate,.hu-node:focus-visible .hu-plate{transform:scale(1.05)}
.hu-name{font-family:var(--heading-font);font-size:27px;line-height:1.1;margin-top:18px}
.hu-kind{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5a7a5d;margin-top:6px}
.hu-line{font-size:15.5px;line-height:1.55;color:#2d4a3e;margin-top:10px}
.hu-go{font-size:13.5px;font-weight:650;color:#173e2e;margin-top:8px;opacity:.75;transition:opacity .25s}
.hu-item.is-active .hu-go,.hu-node:hover .hu-go{opacity:1;text-decoration:underline;text-underline-offset:3px}
.hu-phone{display:block}
.hu-phone .ghp{--ghp-w:236px;display:block}
/* Places around the house, clockwise from the roof. */
.hu-item[data-spot=Mount]{--x:250px;--y:165px;--iw:210px;--ih:255px}
.hu-item[data-spot=Solar]{--x:680px;--y:165px;--iw:165px;--ih:292px}
.hu-item[data-spot=Infinity]{--x:1110px;--y:175px;--iw:160px;--ih:310px}
.hu-item[data-spot=Totem]{--x:1245px;--y:780px;--iw:190px;--ih:300px;--w:190px}
.hu-item[data-spot=Energy]{--x:905px;--y:1200px;--iw:250px;--ih:250px}
.hu-item[data-spot=Balance]{--x:520px;--y:1150px;--iw:250px;--ih:163px}
.hu-item[data-spot=App]{--x:165px;--y:740px;--iw:236px;--ih:483px;--w:214px}
/* Green Hero Energy: the app's price page, live, in Apple's bezel (the same
   frame as the app phones). The page is laid out at the app's own 390 x 848
   points and scaled to the screen (--k, set by the script). Without the chart
   the brand picture stays. */
.hu-plate-brand{border-radius:44px;background:#173e2e;box-shadow:0 18px 40px rgba(20,58,47,.18)}
.hu-plate-brand img{width:88%;height:88%;filter:none}
.hu-item[data-spot=Energy].has-chart{--iw:236px;--ih:483px}
.hu-item.has-chart .hu-plate{visibility:hidden}
.hu-item.has-chart .hu-node::before{display:none}
.hu-price[hidden]{display:none}
.hu-price{position:absolute;left:var(--x);top:var(--y);z-index:3;width:var(--iw);transform:translate(-50%,-50%)}
.hu-price .ghp{--ghp-w:var(--iw)}
.hu-price .ghp-screen{background:#020c05}
.hu-app{position:absolute;left:0;top:0;width:390px;height:848px;display:flex;flex-direction:column;transform:scale(var(--k,.55));transform-origin:0 0;
  color:#fff;font:15px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:radial-gradient(130% 55% at 0% 0%,#0b5a1c,#05290f 48%,#020c05 85%)}
.hu-app img{position:static;inset:auto;display:block;width:100%;height:auto;opacity:1;flex:none;transition:none}
.hu-app-top{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.hu-app-body{flex:1;min-height:0;overflow-y:auto;padding:0 16px 10px;scrollbar-width:none;overscroll-behavior:contain}
.hu-app-body::-webkit-scrollbar{display:none}
.hu-app .contract-planning-chart{border:0;padding:0;background:none;gap:12px}
/* Numbers stay clear of the phones: nothing is drawn on Apple's bezel. */
@media(min-width:901px){
  .hu-item[data-spot=App] .hu-node {
    --app-left-shift: 80px;
    --app-down-shift: 34px;
    left: calc(var(--x) - var(--app-left-shift));
    top: calc(var(--y) + var(--app-down-shift));
  }
  /* Keep 07 at the original position and clear of the phone's top edge. */
  .hu-item[data-spot=App] .hu-node::before {
    left: calc(50% - var(--iw) / 2 - 44px + var(--app-left-shift));
    top: calc(-8px - var(--app-down-shift));
  }
}
.hu-price::before{left:-44px}

/* On narrower screens the full-width film comes first, with copy beneath it.
   The proof points and products fit without horizontal scrolling. */
@media(max-width:900px){
  .gh-hero{display:flex;flex-direction:column;gap:18px}
  .gh-demo{order:-1}
  .gh-hero-copy{margin-inline:max(24px,calc((100% - 760px) / 2))}
  .gh-hero h1{font-size:clamp(27px,7.2vw,40px);margin-bottom:12px}
  .gh-hero-actions{margin-top:16px}
  .gh-proofs{grid-template-columns:repeat(2,minmax(0,1fr))}

  .hu{margin:20px calc(50% - 50vw) 32px;padding:26px 16px 28px;border-radius:0}
  .hu-head h2{font-size:clamp(32px,9vw,40px)}
  .hu-head>p:last-child{font-size:15px}
  .hu-frame{aspect-ratio:auto;margin-top:12px}
  .hu-stage{position:static;width:auto;height:auto;transform:none}
  .hu-villa{position:static;width:auto;margin:0 -8px 18px}
  .hu-villa::before,.hu-spot,.hu-lines{display:none}
  .hu-items{display:grid;gap:14px}
  .hu-item,.hu-item[data-spot],.hu-item[data-spot=Energy].has-chart{--iw:100%;--ih:170px;position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(20,58,47,.08),0 10px 26px rgba(20,58,47,.06)}
  .hu-node{position:static;transform:none;width:auto;display:block;text-align:center}
  /* The number sits in the card's corner, the same on every card. */
  .hu-node::before,.hu-price::before{display:none!important}
  .hu-item::before{content:counter(hu,decimal-leading-zero);position:absolute;left:12px;top:12px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:#173e2e;color:#efc351}
  .hu-plate{width:100%;height:170px;margin:0 0 16px}
  .hu-plate img{filter:drop-shadow(0 14px 16px rgba(20,58,47,.16))}
  .hu-plate-brand{width:150px;height:150px;margin:0 auto 16px;border-radius:30px}
  .hu-name{display:block;margin-top:0;font-size:25px}
  .hu-kind{display:block;margin-top:5px}
  .hu-line{display:block;margin-top:10px;font-size:16px}
  .hu-go{display:inline-block;margin-top:12px;opacity:1}
  /* The two phones: full phones above their text, clear of the numbers. */
  .hu-phone{margin:22px auto 18px;width:220px}
  .hu-phone .ghp{--ghp-w:220px}
  .hu-price{order:-1;position:static;transform:none;width:220px;margin:22px auto 18px}
  .hu-price .ghp{--ghp-w:220px}
  .hu-item.has-chart .hu-plate{display:none}
}
@media(prefers-reduced-motion:reduce){.hu-plate,.hu-go,.hu-spot{transition:none!important}}

@media(max-width:600px){
  .gh-scene{aspect-ratio:1.54}
  .gh-proofs{gap:6px 12px}
  .gh-proofs li{gap:8px;min-height:36px;font-size:12px}
  .gh-proof-icon{width:32px;height:32px}
  .gh-proof-icon svg{width:20px;height:20px}
  .gh-partnership{margin-inline:-12px}
}