/* Salt City Power — site.css
   Hand-authored component + layout styles on top of the design system's
   token CSS (fonts/colors/typography/spacing/surfaces/motion/base).
   Reference: design system readme.md — buttons are stamped pills, cards are
   outlined signage panels, everything uses hard offset shadows, no blur. */

/* ---------- layout utilities ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
/* longhand on purpose: these combine with .container on the same element in
   several sections, and a shorthand padding here would blow away .container's
   left/right padding entirely (shorthand always sets all four sides) */
.section-y{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-y-tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.on-dark{color:var(--text-on-dark)}

img{max-width:100%;display:block}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:30}
/* The header is sticky and 94px tall, so a jump to #quote (or any anchor)
   used to land with the heading hidden underneath it. */
[id]{scroll-margin-top:114px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.header-bar{background:var(--green-700);color:var(--text-on-dark)}
.header-inner{max-width:var(--container-max);margin:0 auto;padding:0 24px;min-height:84px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-mark{height:26px;display:block}
.nav-links{display:flex;gap:28px;align-items:center;margin-left:auto}
.nav-link{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:15px;text-decoration:none;color:var(--cream-200);padding-bottom:3px;border-bottom:3px solid transparent;transition:color var(--duration-fast) var(--ease-standard)}
.nav-link:hover{color:var(--scp-yellow)}
.nav-link.is-active{color:var(--scp-yellow);border-bottom-color:var(--scp-yellow)}
.nav-phone{white-space:nowrap}
.nav-toggle-input{display:none}
.nav-toggle-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;cursor:pointer;margin-left:auto}
.nav-toggle-btn span{display:block;height:2px;background:var(--cream-200);border-radius:1px}

@media (max-width:760px){
  .header-inner{gap:16px}
  .nav-toggle-btn{display:flex}
  .nav-links{margin-left:0;order:4;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:14px;max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-standard)}
  .nav-toggle-input:checked ~ .nav-links{max-height:260px;padding:8px 0 20px}
  .nav-phone{order:3;margin-left:auto}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:14px;text-decoration:none;white-space:nowrap;border-radius:var(--radius-pill);border:var(--border-standard) solid var(--line-standard);padding:12px 26px;cursor:pointer;transition:transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard);box-shadow:var(--shadow-stamp)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--green-700)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 transparent}
.btn-lg{padding:15px 32px;font-size:15px}
.btn-sm{padding:8px 18px;font-size:13px;box-shadow:none}
.btn-sm:hover{transform:none;box-shadow:none}
.btn-sm:active{transform:none}

.btn-primary{background:var(--scp-yellow);color:var(--green-700);border-color:var(--green-700)}
.btn-primary:hover{background:var(--yellow-500)}
.btn-primary:active{background:var(--yellow-600)}

.btn-secondary{background:var(--cream-100);color:var(--green-700);border-color:var(--green-700)}
.btn-secondary:hover{background:var(--cream-300)}

.btn-outline{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.btn-outline:hover{transform:none;background:var(--mint-100);color:var(--green-700);border-color:var(--green-700)}
.btn-outline:active{transform:none}

/* ---------- badges & tags ---------- */
.badge{display:inline-flex;align-items:center;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:12px;border-radius:var(--radius-pill);border:var(--border-standard) solid var(--line-standard);padding:6px 14px;white-space:nowrap}
.badge-sm{font-size:11px;padding:4px 10px}
.badge-yellow{background:var(--scp-yellow);color:var(--green-700)}
.badge-mint{background:var(--mint-300);color:var(--green-700)}

.tag{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:var(--type-body-s);color:var(--green-700);background:var(--cream-300);border:var(--border-standard) solid var(--line-standard);border-radius:var(--radius-pill);padding:6px 16px;white-space:nowrap}

/* ---------- cards ---------- */
.card{background:var(--surface-card);border:var(--border-standard) solid var(--line-standard);border-radius:var(--radius-md);box-sizing:border-box}
.card-standard{padding:var(--space-5)}
.card-stamp{padding:var(--space-6);box-shadow:var(--shadow-stamp-lg)}
.card-stamp.tone-yellow{background:var(--yellow-100)}
.card-stamp.tone-green{background:var(--green-700);color:var(--text-on-dark);border-color:var(--green-900)}
.card-flush{padding:0;overflow:hidden}

/* ---------- icon circles ---------- */
.icon-circle{flex:0 0 auto;border-radius:var(--radius-pill);background:var(--scp-yellow);border:var(--border-standard) solid var(--line-standard);display:flex;align-items:center;justify-content:center}
.icon{fill:none;display:block;flex:0 0 auto}

/* ---------- section heading ---------- */
.eyebrow{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-size:var(--type-eyebrow);color:var(--text-muted);margin:0 0 10px}
.eyebrow.on-dark{color:var(--scp-yellow)}
.headline{font-family:var(--font-display);line-height:var(--leading-display);margin:0;color:var(--text-body)}
.headline.on-dark{color:var(--text-on-dark)}
.headline-xl{font-size:var(--type-display-xl)}
.headline-l{font-size:var(--type-display-l)}
.headline-m{font-size:var(--type-display-m)}
.deck{font-family:var(--font-body);font-size:var(--type-body-l);color:var(--text-muted);max-width:var(--content-measure);margin:14px 0 0}
.deck.on-dark{color:var(--text-on-dark-muted)}

/* ---------- stripe ---------- */
.stripe{height:10px;background:var(--stripe-yellow-green)}

/* ---------- section-level grids ---------- */
.split{display:grid;gap:var(--space-8);align-items:center}
.split-hero{grid-template-columns:1.05fr .95fr}
.split-6040{grid-template-columns:1.1fr .9fr}
.split-4060{grid-template-columns:.9fr 1.1fr}
.split-owner{grid-template-columns:.8fr 1.2fr}
@media (max-width:900px){
  .split-hero,.split-6040,.split-4060,.split-owner{grid-template-columns:1fr}
}

.hero-copy{padding:var(--space-9) 0}
@media (max-width:900px){
  .hero-copy{padding-top:0;padding-bottom:var(--space-9)}
}

.hero-badge-frame{align-self:stretch;position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.hero-badge-frame img{width:70%;max-width:340px}
@media (max-width:900px){
  /* logo goes above the copy on mobile, centered, sized as the hero visual */
  .hero-badge-frame{order:-1;min-height:0;padding:var(--space-8) 0 var(--space-5)}
  .hero-badge-frame img{width:92%;max-width:420px}
}

.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:640px){ .steps-3{grid-template-columns:1fr;gap:var(--space-7)} }

.trust-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-cell{padding:var(--space-5) var(--space-4);text-align:center;border-left:1px solid var(--green-500)}
.trust-cell:first-child{border-left:none}
@media (max-width:640px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-cell:nth-child(2n+1){border-left:none}
}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
@media (max-width:900px){
  .cards-3,.cards-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cards-3,.cards-4{grid-template-columns:1fr}
}

.gallery-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-4)}
@media (max-width:760px){ .gallery-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .gallery-grid{grid-template-columns:1fr} }

.photo-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:760px){ .photo-grid-3{grid-template-columns:1fr} }

/* ---------- comparison table (Solar page) ---------- */
.compare-table{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;overflow:hidden;border-radius:var(--radius-md)}
.compare-cell{padding:var(--space-4) var(--space-5)}
.compare-head{background:var(--cream-300);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:13px}
.compare-head-us{background:var(--scp-yellow);border-left:var(--border-standard) solid var(--line-standard)}
.compare-row-label{border-top:var(--border-hair) solid var(--line-hairline);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:13px}
.compare-row-them{border-top:var(--border-hair) solid var(--line-hairline);color:var(--text-muted)}
.compare-row-us{border-top:var(--border-hair) solid var(--line-hairline);border-left:var(--border-standard) solid var(--line-standard);background:var(--yellow-100)}
@media (max-width:700px){
  .compare-table{font-size:14px}
  .compare-cell{padding:var(--space-3)}
}

/* ---------- emergency / CTA bands ---------- */
.cta-band{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.cta-band img{height:100px}
.cta-headline{font-family:var(--font-display);font-size:clamp(30px,5vw,48px);line-height:.98;margin:0}
.cta-copy{margin:10px 0 0;max-width:52ch}
.cta-action{margin-left:auto;flex:0 0 auto}
@media (max-width:640px){ .cta-action{margin-left:0} }

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:13px;color:var(--text-body)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:var(--type-body-m);color:var(--text-body);background:var(--cream-100);border:var(--border-standard) solid var(--line-standard);border-radius:var(--radius-sm);padding:12px 14px;width:100%;box-sizing:border-box}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 3px var(--yellow-200);border-color:var(--scp-yellow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:520px){ .form-grid{grid-template-columns:1fr} }
.field-full{grid-column:1 / -1}
.quote-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:var(--space-7);align-items:start}
@media (max-width:860px){ .quote-grid{grid-template-columns:1fr} }
.form-actions{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-top:var(--space-6);padding-top:var(--space-5);border-top:var(--border-hair) solid var(--line-hairline)}

/* ---------- footer ---------- */
.site-footer{background:var(--green-700);color:var(--text-on-dark)}
.footer-grid{max-width:var(--container-max);margin:0 auto;padding:var(--space-8) 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-7)}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr;gap:var(--space-6)} }
.footer-heading{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--scp-yellow);margin-bottom:var(--space-3)}
.footer-links{display:grid;gap:8px;font-size:15px}
.footer-link{color:var(--text-on-dark-muted);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
.footer-link:hover{color:var(--scp-yellow)}
.footer-meta{display:grid;gap:10px;color:var(--text-on-dark-muted);font-size:15px}
.footer-bottom{border-top:1px solid var(--green-500);padding:var(--space-4) 24px;font-size:13px;color:var(--mint-400);text-align:center}

/* ---------- service-area tags row ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- price list (EV page) ---------- */
.price-list{margin-top:var(--space-7);background:var(--surface-card);border:var(--border-standard) solid var(--line-standard);border-radius:var(--radius-md);overflow:hidden}
.price-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,2.4fr);gap:var(--space-4);align-items:baseline;padding:var(--space-4) var(--space-5);border-top:var(--border-hair) solid var(--line-hairline)}
.price-row:first-child{border-top:0}
.price-name{font-family:var(--font-subhead);text-transform:uppercase;letter-spacing:var(--tracking-subhead);font-size:var(--type-subhead-s);color:var(--green-700)}
.price-amt{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;color:var(--text-body);white-space:nowrap}
.price-note{font-size:var(--type-body-s);color:var(--text-muted)}
.price-total,.price-incentives{margin-top:var(--space-5);padding:var(--space-5);border-radius:var(--radius-md)}
.price-total{background:var(--yellow-100);border:var(--border-standard) solid var(--line-standard)}
.price-incentives{border:var(--border-hair) solid var(--line-hairline);background:var(--surface-card)}
.price-total-label{margin:0 0 var(--space-2);font-family:var(--font-subhead);text-transform:uppercase;letter-spacing:var(--tracking-subhead);font-size:var(--type-subhead-s);color:var(--green-700)}
.price-total-body{margin:0;max-width:70ch}
.price-incentives ul{margin:0;padding-left:1.2em;display:grid;gap:var(--space-2);font-size:var(--type-body-s);max-width:80ch}
@media (max-width:640px){.price-row{grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-4);padding:var(--space-4)}.price-note{grid-column:1/-1}}