:root {
  --green: #0b0b0b;
  --green2: #d49f00;
  --gold: #ffc20e;
  --ink: #171717;
  --muted: #686868;
  --paper: #f7f7f5;
  --line: #e1e1dc;
  --shadow: 0 24px 60px rgba(0, 0, 0, .13);
}

.topbar { background: #090909; color: #f7d96b; }
.brand-logo { display: block; width: 184px; height: 62px; object-fit: contain; object-position: left center; }
.hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.10) 72%); }
.solution-card:after { background: linear-gradient(140deg, rgba(10,10,10,.98), rgba(30,30,30,.90)); }
.solution-card.residential { background: linear-gradient(135deg, #242424, #050505); }
.solution-card.commercial { background: linear-gradient(135deg, #3a2d05, #0a0a0a); }
.calc-section, .quote-band { background: #0b0b0b; }
.location-box { background: #25200d; }
.how-section, .steps > div { background: #101010; }
footer { background: #080808; color: #d5d5d5; }
.toast { background: #0b0b0b; }
.product-visual { background: linear-gradient(145deg, #fff4be, #f1bf1b); }
.product-visual.office { background: linear-gradient(145deg, #ffe47a, #be8d00); }
.product-visual.inverter { background: linear-gradient(145deg, #f7f7f7, #c9c9c9); }
.assumptions, .results-panel { background: #f7f4e9; }
.quick-add button { background: #fff9df; border-color: #ead98d; color: #5b4700; }
.capacity-note { background: #fff4c4; }
.capacity-note p { color: #514000; }
.pulse, .status-dot { background: #ffc20e; }
.project:before { background: linear-gradient(transparent, rgba(0,0,0,.92)); }
.showcase { background: #f6f5f1; }
.showcase-slider { position: relative; overflow: hidden; border-radius: 22px; background: #111; box-shadow: 0 28px 70px rgba(0,0,0,.18); }
.showcase-track { position: relative; min-height: 520px; }
.showcase-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease; display: grid; grid-template-columns: 1.25fr .75fr; }
.showcase-slide.active { opacity: 1; visibility: visible; }
.showcase-slide img { width: 100%; height: 520px; object-fit: cover; background: #fff; }
.showcase-slide > div { padding: clamp(32px,5vw,70px); color: #fff; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg,#161616,#2b2206); }
.showcase-slide span { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.showcase-slide h3 { font-size: clamp(2rem,3vw,3.25rem); margin: 16px 0; }
.showcase-slide p { color: #d7d7d1; max-width: 460px; }
.slider-control { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 2rem; cursor: pointer; }
.slider-control.prev { left: 18px; }.slider-control.next { right: 18px; }
.slider-dots { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; }
.slider-dots button { width: 9px; height: 9px; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); padding: 0; cursor: pointer; }
.slider-dots button.active { width: 26px; border-radius: 999px; background: var(--gold); }
.shop-page-link { margin-top: 24px; }

/* Fluid layout and screen-size support */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.site-header, .topbar, .section, footer {
  padding-left: max(5vw, calc((100vw - 1600px) / 2));
  padding-right: max(5vw, calc((100vw - 1600px) / 2));
}
.hero-content {
  padding-left: max(5vw, calc((100vw - 1600px) / 2));
  padding-right: 5vw;
}
.site-header nav { min-width: 0; }
.site-header nav a { white-space: nowrap; }
.calc-shell, .solution-grid, .product-grid, .project-grid, .shipping, .faq, .quote-band, footer { min-width: 0; }
.solution-card, .product, .package-card, .lead-card, .results-panel, .appliance-panel { min-width: 0; }
.section-head > *, .calc-heading > *, .shipping > *, .faq > *, .quote-band > * { min-width: 0; }
.hero h1 { font-size: clamp(2.35rem, 5.2vw, 5.25rem); }
.hero-content { width: min(760px, 92vw); }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
dialog { max-height: 92dvh; overflow-y: auto; }

/* Keep the complete hero call-to-action visible on shorter laptop displays. */
@media (min-width: 761px) and (max-height: 920px) {
  .hero {
    height: auto;
    min-height: calc(100svh - 109px);
  }
  .hero-content {
    padding-top: clamp(38px, 6vh, 64px);
    padding-bottom: clamp(38px, 6vh, 64px);
  }
  .hero h1 {
    font-size: clamp(2.6rem, 4.4vw, 4.25rem);
    line-height: 1.02;
  }
  .hero p { margin-top: 18px; margin-bottom: 22px; }
  .trust-row { margin-top: 22px; }
}

@media (min-width: 761px) and (max-height: 720px) {
  .hero-content { padding-top: 28px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(2.35rem, 4vw, 3.55rem); }
  .hero p { font-size: 1rem; margin: 14px 0 18px; }
  .trust-row { margin-top: 16px; }
}

@media (max-width: 1200px) {
  .site-header nav { gap: 14px; font-size: .84rem; }
  .nav-cta { padding: 10px 13px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shipping { gap: 36px; }
  .faq { gap: 42px; }
}

@media (max-width: 1120px) {
  .menu-btn { display: block; }
  .site-header nav { display: none; position: absolute; top: 78px; left: 0; right: 0; background: #fff; padding: 20px 5vw; flex-direction: column; align-items: stretch; box-shadow: 0 20px 30px rgba(0,0,0,.12); }
  .site-header nav.open { display: flex; }
  .site-header nav a { white-space: normal; }
}

@media (max-width: 980px) {
  .menu-btn { display: block; }
  .site-header nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px 5vw;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 20px 30px rgba(0,0,0,.12);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { white-space: normal; }
  .calc-shell { grid-template-columns: 1fr; }
  .results-panel { border-left: 0; border-top: 1px solid var(--line); }
  .solution-grid, .shipping, .faq { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-card:last-child { grid-column: 1 / -1; }
  footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .showcase-slide { grid-template-columns: 1fr; }
  .showcase-track { min-height: 690px; }
  .showcase-slide img { height: 390px; }
  .showcase-slide > div { min-height: 300px; padding: 34px 68px 50px; }
}

@media (max-width: 760px) {
  .site-header nav { top: 68px; }
  .hero { min-height: 600px; height: min(760px, 82svh); }
  .hero-content { width: 100%; padding-top: clamp(72px, 13vh, 110px); }
  .hero h1 { font-size: clamp(2.15rem, 11vw, 3.25rem); }
  .hero p { font-size: 1rem; }
  .section { padding-top: clamp(58px, 10vw, 76px); padding-bottom: clamp(58px, 10vw, 76px); }
  .section-head h2, .calc-heading h2, .shipping-copy h2, .quote-band h2 { font-size: clamp(1.9rem, 8vw, 2.7rem); }
  .section-head, .calc-heading { gap: 18px; }
  .product-grid, .project-grid, .package-grid { grid-template-columns: 1fr; }
  .package-card:last-child { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-actions { width: 100%; }
  .quote-actions .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .dialog-card { padding: 28px 20px 22px; }
  .form-actions { align-items: stretch; }
  footer { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer-bottom { display: grid; gap: 8px; }
}

@media (max-width: 760px) {
  .brand-logo { width: 150px; height: 54px; }
}

@media (max-width: 520px) {
  .topbar { font-size: .72rem; padding-top: 6px; padding-bottom: 6px; }
  .topbar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { min-height: 640px; }
  .hero-actions, .hero-actions .btn { width: 100%; }
  .hero-actions { display: grid; }
  .trust-row { font-size: .8rem; }
  .solution-card { padding: 28px 22px; min-height: 0; }
  .solution-card h3 { font-size: 1.65rem; }
  .appliance-panel, .results-panel { padding: 18px 14px; }
  .panel-title { align-items: flex-start; gap: 12px; }
  .small-btn { flex: 0 0 auto; }
  .metric-grid { grid-template-columns: 1fr; }
  .main-result strong { font-size: 1.9rem; }
  .route-list { grid-template-columns: 1fr; }
  .project { min-height: 270px; }
  footer { grid-template-columns: 1fr; }
  footer > *, .footer-brand, .footer-bottom { grid-column: auto; }
  .contact-buttons { flex-wrap: wrap; }
  .dialog-card h2 { font-size: 1.65rem; }
  .showcase-track { min-height: 590px; }
  .showcase-slide img { height: 280px; }
  .showcase-slide > div { min-height: 310px; padding: 28px 26px 54px; }
  .showcase-slide h3 { font-size: 1.75rem; }
  .slider-control { width: 40px; height: 40px; }
}

@media (max-width: 360px) {
  .brand-logo { width: 132px; }
  .site-header { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 2rem; }
  .section, footer { padding-left: 16px; padding-right: 16px; }
}