/* Home page only (src/pages/index.html). Owned by Foundation. */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark);
  --iso-front:#2A100E;--iso-gable:#3D1915;--iso-roof:#1E0806;--iso-back:#140303;--iso-edge:rgba(255,255,255,.34)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--sp-6);align-items:center;padding-block:clamp(32px,4.4vw,64px) clamp(28px,3vw,40px)}
.hero h1{font-size:clamp(44px,5.6vw,84px);font-weight:700;line-height:1.02;letter-spacing:-.04em;max-width:12ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{margin-top:var(--sp-5);font-size:clamp(17px,1.45vw,20px);max-width:44ch}
.hero-art{position:relative;margin-right:calc(var(--gutter) * -0.5)}
.hero-art svg{width:100%;height:auto;max-height:min(560px,70vh);margin-inline:auto}
.hero .fact-row{margin-bottom:clamp(28px,3vw,40px)}
.iso-grid{fill:none;stroke:var(--line-dark);stroke-width:1}
.f-front{fill:var(--iso-front);stroke:var(--iso-edge);stroke-width:1}
.f-gable{fill:var(--iso-gable);stroke:var(--iso-edge);stroke-width:1}
.f-roof{fill:var(--iso-roof);stroke:var(--iso-edge);stroke-width:1}
.f-roofb{fill:var(--iso-back);stroke:var(--iso-edge);stroke-width:1}
.pv{fill:var(--pv);stroke:var(--orange);stroke-width:1.1;stroke-linejoin:round}
.pv-l{stroke:var(--orange);stroke-opacity:.38;stroke-width:.7}
.win{fill:var(--glow);stroke:var(--iso-edge);stroke-width:1}
.mull{stroke:var(--iso-edge);stroke-width:1}
.door{fill:var(--iso-back);stroke:var(--iso-edge);stroke-width:1}
.batt,.evc{fill:var(--iso-back);stroke:var(--on-dark-2);stroke-width:1.1}
.batt-bar{fill:var(--green)}
.hp-top{fill:var(--iso-gable);stroke:var(--iso-edge)}
.hp-side{fill:var(--iso-front);stroke:var(--iso-edge)}
.hp-front{fill:var(--iso-roof);stroke:var(--iso-edge)}
.hp-fan{fill:none;stroke:var(--on-dark-2);stroke-width:1}
.eline{stroke:var(--orange);stroke-width:1.6;stroke-dasharray:2 4;stroke-linecap:round}
.eline-g{stroke:var(--green);stroke-width:1.6;stroke-dasharray:2 4;stroke-linecap:round}
.sun-arc{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:.5 9;stroke-linecap:round}
.sun-arc-2{fill:none;stroke:var(--line-dark);stroke-width:1}
.tick{stroke:var(--line-dark-2);stroke-width:1.2}
.tick-major{stroke:var(--orange);stroke-width:1.6}
.sun-core{fill:var(--orange)}
.sun-halo{fill:none;stroke:var(--orange)}
.svg-label{font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.18em;fill:var(--on-dark-3)}

/* ---------- storyline ---------- */
.story-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-6) clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(48px,6vw,88px)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-5);position:relative}
.steps::before{content:"";position:absolute;left:22px;right:0;top:21px;height:2px;background:linear-gradient(90deg,var(--red),var(--orange))}
.step{position:relative}
.step-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-6);margin-bottom:var(--sp-4)}
.step-node{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--on-dark);font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.06em}
.step:first-child .step-node{background:var(--red)}
.step-icon{width:34px;height:34px;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step .step-where{font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:var(--sp-2)}
.step h3{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.01em;margin-bottom:var(--sp-3)}
.step p{font-size:15.5px;line-height:1.6;color:var(--text-2)}

/* ---------- energy flow ---------- */
.flow-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.flow-fig{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(12px,2.5vw,32px)}
.flow-fig svg{width:100%;height:auto}
.d-ground{stroke:var(--line-dark-2);stroke-width:1.2}
.d-line{fill:none;stroke:var(--on-dark-2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.d-fill{fill:var(--ink);stroke:var(--on-dark-2);stroke-width:1.6;stroke-linejoin:round}
.d-pv{fill:var(--pv);stroke:var(--orange);stroke-width:1.3}
.d-pv-l{stroke:var(--orange);stroke-opacity:.4;stroke-width:.8}
.d-bar{fill:var(--green)}
.d-sun{fill:var(--orange)}
.d-line.d-scr{stroke:var(--green)}
.d-label{font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.16em;fill:var(--on-dark-3)}
.fl{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 10;animation:flow 1.4s linear infinite}
.fl-base{fill:none;stroke-width:1.5;stroke-opacity:.35}
.c-sun{stroke:var(--orange)}
.c-use{stroke:var(--green)}
.c-grid{stroke:var(--on-dark-2)}
.fl.c-grid{animation-duration:2.4s}
@keyframes flow{to{stroke-dashoffset:-22}}
.mk circle{stroke:var(--ink-2);stroke-width:3}
.mk text{font-family:var(--f-label);font-weight:700;font-size:14px;text-anchor:middle;dominant-baseline:central}
.mk-sun circle{fill:var(--orange)} .mk-sun text{fill:var(--ink)}
.mk-use circle{fill:var(--green)} .mk-use text{fill:var(--ink)}
.mk-grid circle{fill:var(--on-dark-2)} .mk-grid text{fill:var(--ink)}
.legend{list-style:none;display:grid;gap:var(--sp-5)}
.legend li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.legend .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-family:var(--f-label);font-weight:700;font-size:13px;color:var(--ink)}
.n-sun{background:var(--orange)} .n-use{background:var(--green)} .n-grid{background:var(--on-dark-2)}
.legend strong{display:block;font-family:var(--f-head);font-weight:600;font-size:17px;line-height:1.3;color:var(--on-dark);margin-bottom:2px}
.legend .t{display:block;font-size:15.5px;line-height:1.55;color:var(--on-dark-2)}
.flow-note{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line-dark);font-size:14.5px;color:var(--on-dark-3)}

/* ---------- services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:
  "solar solar hvac water"
  "solar solar hvac insul"
  "win win roof bath"
  "elec elec adu adu"
  "cab cab cab cab";gap:var(--sp-4)}
.t-solar{grid-area:solar}
.t-solar h3{font-size:clamp(28px,2.6vw,36px);font-weight:700;letter-spacing:-.025em;max-width:14ch}
.t-solar p{font-size:16.5px;max-width:52ch}
.t-solar .ill{width:100%;max-width:560px;height:auto}
.t-solar .dot-list{margin-top:var(--sp-3)}
.t-hvac{grid-area:hvac}
.t-water{grid-area:water}
.t-insul{grid-area:insul}
.t-win{grid-area:win}
.t-roof{grid-area:roof}
.t-bath{grid-area:bath}
.t-elec{grid-area:elec}
.t-adu{grid-area:adu}
.t-cab{grid-area:cab;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.t-cab h3{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.02em}
.t-cab .txt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.t-cab .more{margin-top:var(--sp-2)}
.t-cab figure img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-md);max-width:400px}
.t-cab figcaption{margin-top:var(--sp-2);font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}

/* ---------- about / credentials ---------- */
.about-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-6) var(--sp-8);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.about-top .text-link{margin-top:var(--sp-4)}
.about-bottom{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.about-logo{height:60px;width:auto;margin-bottom:var(--sp-6)}

/* ---------- projects + reviews links ---------- */
.rev-more{margin-top:var(--sp-5)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"solar solar" "hvac water" "hvac insul" "win win" "roof bath" "elec elec" "adu adu" "cab cab"}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--sp-7)}
  .steps::before{display:none}
}
@media (max-width:900px){
  .hero-grid,.story-head,.flow-grid,.about-top,.about-bottom{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:560px;margin:0 auto;width:100%}
  .t-cab{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-cab .txt{grid-column:1 / -1}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(40px,11.5vw,56px)}
  .flow-fig{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-left:0;border-right:0;padding:16px 6px}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .steps::before{display:block;left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;background:linear-gradient(180deg,var(--red),var(--orange))}
  .step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--sp-4);padding-bottom:var(--sp-6)}
  .step-top{display:contents}
  .step-node{grid-row:1 / span 4;align-self:start}
  .step-icon{display:none}
  .bento{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .bento > .tile{grid-area:auto}
}