/* Services hub + Solar and battery + Efficiency upgrades (Builder B).
   Loaded by src/pages/services/index.html, solar-battery.html and efficiency-upgrades.html. */

/* ---------- page hero with a line drawing ---------- */
.page-hero.has-art .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-6) clamp(32px,5vw,72px);align-items:center}
.page-hero.has-art .fact-row{grid-column:1 / -1;margin-top:var(--sp-5)}
.ph-art svg{width:100%;height:auto;max-height:440px;margin-inline:auto;padding-bottom:0}

/* ---------- labels and markers inside drawings ---------- */
.ill text{stroke:none;fill:var(--text-2);font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.16em}
.dark .ill text{fill:var(--on-dark-3)}
.ill text.t-o{fill:var(--orange)}
.ill text.t-g{fill:var(--green)}
.ill .mk circle{fill:var(--orange);stroke:var(--mk-ring,var(--ink));stroke-width:4}
.ill .mk text{fill:var(--ink);font-size:14px;letter-spacing:0;text-anchor:middle;dominant-baseline:central}
.ill .glow{fill:var(--glow);stroke:none}
.ill .thick{stroke-width:3.5}
.mk-key{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--ink);font-family:var(--f-label);font-weight:700;font-size:13px}

/* ---------- services hub: bento ---------- */
.svc-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:
  "solar solar eff"
  "solar solar elec"
  "kb kb adu";gap:var(--sp-4)}
.svc-bento .mk-key{position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px)}
.b-solar{grid-area:solar}
.b-solar h3{font-size:clamp(28px,2.6vw,36px);font-weight:700;letter-spacing:-.025em;max-width:14ch}
.b-solar p{font-size:16.5px;max-width:52ch}
.b-solar .ill{width:100%;max-width:560px;height:auto}
.b-solar .dot-list{margin-top:var(--sp-3)}
.b-eff{grid-area:eff}
.b-elec{grid-area:elec}
.b-kb{grid-area:kb;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.b-adu{grid-area:adu}
.b-txt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);height:100%}
.b-kb .b-txt{justify-content:center}
.b-kb .more{margin-top:var(--sp-3)}
.b-kb h3{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.02em}
.b-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}
.b-adu .b-photo{order:-1}
.b-adu .b-photo img{aspect-ratio:16/10}
.b-photo 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(--text-2)}
.tile.dark .b-photo figcaption{color:var(--on-dark-3)}

/* ---------- solar: what we need from you ---------- */
.need{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-5) clamp(32px,5vw,80px);margin-top:clamp(56px,6vw,96px);border-radius:var(--r-lg);padding:clamp(28px,4vw,56px)}
.need .h3{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.02em}
.need .checks{border-top:0}
.need .checks li:first-child{padding-top:0}
.need .checks li:last-child{border-bottom:0;padding-bottom:0}

/* ---------- solar: battery chart ---------- */
.bat-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.chart-fig{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(16px,2.5vw,32px)}
.chart-fig svg{width:100%;height:auto;padding-bottom:0}
.chart-key{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-dark);font-family:var(--f-label);font-weight:600;font-size:12.5px;letter-spacing:.06em;color:var(--on-dark)}
.chart-key li{display:inline-flex;align-items:center;gap:10px}
.chart-key li::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--on-dark-2)}
.chart-key .k-sun::before{background:var(--orange)}
.chart-key .k-use::before{background:var(--green)}
.chart-key .k-bat::before{background:none;border-top:3px dotted var(--orange);height:0}
.chart-fig figcaption{margin-top:var(--sp-3);font-size:14px;line-height:1.55;color:var(--on-dark-3)}

/* ---------- solar: roof ---------- */
.roof-ill{margin-top:var(--sp-6)}
.roof-ill .ill{width:100%;max-width:420px;height:auto}
.checks a{color:var(--red);font-weight:600;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);border-top:2px solid var(--text)}
.faq > div{padding:var(--sp-5) 0 var(--sp-6);border-bottom:1px solid var(--mist-line)}
.faq h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-bottom:var(--sp-3)}
.faq p{font-size:15.5px;line-height:1.65;color:var(--text-2)}
.faq p + p{margin-top:var(--sp-3)}
.faq a{color:var(--red);font-weight:600;text-underline-offset:3px}
.faq .fine{font-size:14px;line-height:1.6}

/* ---------- efficiency: envelope diagram ---------- */
.env-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.env-fig{--mk-ring:var(--mist);background:var(--mist);border-radius:var(--r-lg);padding:clamp(12px,2.5vw,32px)}
.env-fig svg{width:100%;height:auto;padding-bottom:0}
.env-fig figcaption{margin-top:var(--sp-3);font-size:14px;line-height:1.55;color:var(--text-2)}
.env-legend{list-style:none;display:grid;gap:var(--sp-5)}
.env-legend li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.env-legend strong{display:block;font-family:var(--f-head);font-weight:600;font-size:17px;line-height:1.3;margin-bottom:2px}
.env-legend span:not(.mk-key){display:block;font-size:15.5px;line-height:1.55;color:var(--text-2)}

/* ---------- efficiency: upgrade rows ---------- */
.ups{list-style:none;display:grid;gap:var(--sp-4)}
.up{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);gap:var(--sp-6) clamp(32px,4vw,64px);background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,3vw,44px)}
.up-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.up-num{font-family:var(--f-head);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.05em}
.up-num span{color:var(--mist-line)}
.up-head .ill{height:104px;width:auto;max-width:100%;padding-bottom:var(--sp-2)}
.up-head h3{font-size:clamp(22px,2vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.up-head .text-link{margin-top:auto}
.up-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5) var(--sp-6);align-content:start}
.up-dl dt{font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:2px solid var(--mist)}
.up-dl dd{font-size:15.5px;line-height:1.6;color:var(--text-2)}

/* ---------- related services ---------- */
.related .tile h3{font-size:20px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .svc-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"solar solar" "eff elec" "kb kb" "adu adu"}
  .b-adu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
  .b-adu .b-photo{order:0}
  .b-adu .b-photo img{aspect-ratio:4/3}
  .bat-grid,.env-grid{grid-template-columns:minmax(0,1fr)}
  .up{grid-template-columns:minmax(0,1fr)}
  .up-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-6);align-items:center}
  .up-head .ill{grid-row:1 / span 4;align-self:center}
  .up-head .text-link{margin-top:0}
}
@media (max-width:900px){
  .page-hero.has-art .wrap{grid-template-columns:minmax(0,1fr)}
  .ph-art{max-width:520px;width:100%}
  .need{grid-template-columns:minmax(0,1fr)}
  .faq{grid-template-columns:minmax(0,1fr)}
  .up-dl{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .up-dl dt{padding-bottom:var(--sp-2);margin-bottom:var(--sp-2)}
}
@media (max-width:640px){
  .ph-art svg{max-height:300px}
  .svc-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .svc-bento > .tile{grid-area:auto}
  .b-kb,.b-adu{grid-template-columns:minmax(0,1fr)}
  .b-solar .ill{max-width:100%;padding-top:30px}
  .chart-fig,.env-fig{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-left:0;border-right:0;padding:16px 8px}
  .chart-fig figcaption,.chart-key,.env-fig figcaption{margin-inline:12px}
  .up-head{grid-template-columns:minmax(0,1fr)}
  .up-head .ill{grid-row:auto;height:84px}
  .up-num{font-size:36px}
}