/* ============================================================
   SOLINVA FINAL VISUAL PRECISION LAYER
   Desktop / Laptop / Tablet / Mobile
   ============================================================ */

:root {
    --sv-shell: 1540px;
    --sv-pad: clamp(22px, 3.4vw, 58px);
    --sv-green: #007f4f;
    --sv-green-dark: #003f31;
    --sv-green-deep: #00352a;
    --sv-gold: #f5b700;
    --sv-ink: #0b2d25;
    --sv-muted: #60726c;
    --sv-border: #dfe9e4;
    --sv-radius: 12px;
}

/* ---------- GLOBAL PRECISION ---------- */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    color: var(--sv-ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: min(calc(100% - (var(--sv-pad) * 2)), var(--sv-shell));
    max-width: var(--sv-shell);
    margin-inline: auto;
}

h1,
h2,
h3,
h4,
strong,
button,
.sv-btn {
    letter-spacing: -.018em;
}

p {
    letter-spacing: -.005em;
}

/* ---------- HEADER ---------- */

.site-header,
.public-header,
header {
    font-size: 14px;
}

.site-header .container,
.public-header .container,
header > .container {
    min-height: 72px;
}

.site-logo img,
.brand img,
.header-logo img {
    object-fit: contain;
}

.site-nav a,
.main-nav a,
.desktop-nav a {
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- HOME HERO ---------- */

.sv-home-hero,
.sv-hero-slide {
    min-height: 455px;
}

.sv-home-hero {
    background-position: center;
    background-size: cover;
}

.sv-hero-inner {
    width: min(calc(100% - (var(--sv-pad) * 2)), var(--sv-shell));
    min-height: 455px;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: clamp(42px, 6vw, 105px);
    padding-top: 38px;
    padding-bottom: 45px;
}

.sv-hero-copy {
    max-width: 710px;
}

.sv-kicker {
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .17em;
}

.sv-hero-copy h1 {
    max-width: 650px;
    margin: 11px 0 8px;
    font-size: clamp(50px, 4.2vw, 68px);
    line-height: .98;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.sv-hero-brand {
    margin-top: 13px;
    font-size: 14px;
    letter-spacing: .08em;
}

.sv-hero-copy p {
    max-width: 690px;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.55;
}

.sv-hero-actions {
    gap: 10px;
    margin-top: 17px;
}

.sv-btn {
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.sv-benefits {
    width: 100%;
    max-width: 310px;
    justify-self: end;
    gap: 8px;
}

.sv-benefit {
    min-height: 58px;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
}

.sv-benefit-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

.sv-benefit strong {
    font-size: 12px;
    line-height: 1.25;
}

.sv-benefit small {
    margin-top: 2px;
    font-size: 9.5px;
    line-height: 1.35;
}

.sv-slider-arrow {
    width: 39px;
    height: 39px;
    font-size: 26px;
}

.sv-slider-prev {
    left: 20px;
}

.sv-slider-next {
    right: 20px;
}

.sv-slider-dots {
    bottom: 13px;
}

/* ---------- SERVICE STRIP ---------- */

.sv-service-strip {
    padding: 13px 0;
}

.sv-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.sv-service-card {
    min-height: 88px;
    grid-template-columns: 40% 60%;
    border-radius: 9px;
}

.sv-service-photo {
    min-height: 88px;
}

.sv-service-content {
    grid-template-columns: 30px minmax(0,1fr) 23px;
    gap: 7px;
    padding: 10px 11px;
}

.sv-service-symbol {
    font-size: 21px;
}

.sv-service-content strong {
    font-size: 12px;
    line-height: 1.25;
}

.sv-service-content small {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 1.35;
}

.sv-service-content b {
    width: 23px;
    height: 23px;
    font-size: 11px;
}

/* ---------- TRUST STRIP ---------- */

.sv-trust-grid {
    grid-template-columns: repeat(5, minmax(0,1fr));
}

.sv-trust-item {
    min-height: 70px;
    gap: 11px;
    padding: 12px 17px;
}

.sv-trust-item > span {
    font-size: 23px;
}

.sv-trust-item strong {
    font-size: 11px;
    line-height: 1.25;
}

.sv-trust-item small {
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.3;
}

/* ---------- SECTION SYSTEM ---------- */

.sv-projects-section,
.sv-services-showcase,
.sv-about-intro,
.sv-about-process,
.sv-capabilities,
.sv-service-workflow,
.sv-service-support {
    padding-top: clamp(48px, 5vw, 68px);
    padding-bottom: clamp(48px, 5vw, 68px);
}

.sv-section-heading {
    gap: 30px;
    margin-bottom: 22px;
}

.sv-section-heading h2 {
    margin: 6px 0 5px;
    font-size: clamp(29px, 2.5vw, 39px);
    line-height: 1.08;
    letter-spacing: -.038em;
}

.sv-section-heading p {
    max-width: 720px;
    font-size: 13px;
    line-height: 1.55;
}

/* ---------- PROJECTS ---------- */

.sv-project-track {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.sv-project-card {
    border-radius: 10px;
}

.sv-project-photo {
    min-height: 145px;
}

.sv-project-info {
    gap: 10px;
    padding: 12px 13px;
}

.sv-project-info h3 {
    font-size: 13px;
}

.sv-project-info p {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 1.35;
}

/* ---------- PRODUCT CATEGORY STRIP ---------- */

.sv-brand-row {
    min-height: 70px;
    gap: 17px;
}

.sv-brand-row strong {
    font-size: 12px;
}

.sv-brand-row a {
    padding: 7px 13px;
    font-size: 11px;
}

/* ---------- ACTION STRIP ---------- */

.sv-action-card {
    min-height: 96px;
    grid-template-columns: 43px minmax(0,1fr) auto;
    gap: 12px;
    padding: 17px 20px;
}

.sv-action-icon {
    width: 39px;
    height: 39px;
    font-size: 17px;
}

.sv-action-card strong {
    font-size: 13px;
}

.sv-action-card small {
    margin-top: 3px;
    font-size: 9.5px;
}

.sv-action-card b {
    padding: 8px 11px;
    font-size: 9px;
}

/* ---------- HOME CLOSING ---------- */

.sv-home-closing {
    padding: 58px 0;
}

.sv-closing-grid {
    gap: 55px;
}

.sv-closing-grid h2 {
    margin: 7px 0 10px;
    font-size: clamp(32px, 3.2vw, 46px);
}

.sv-closing-grid p {
    font-size: 13px;
    line-height: 1.65;
}

/* ============================================================
   ABOUT + SERVICES INNER PAGE PRECISION
   ============================================================ */

.sv-inner-hero-grid {
    width: min(calc(100% - (var(--sv-pad) * 2)), var(--sv-shell));
    min-height: 410px;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr);
    gap: clamp(45px, 7vw, 110px);
    padding-top: 52px;
    padding-bottom: 52px;
}

.sv-inner-hero-copy {
    max-width: 760px;
}

.sv-inner-hero-copy h1 {
    max-width: 720px;
    margin: 12px 0 15px;
    font-size: clamp(44px, 4.2vw, 65px);
    line-height: 1;
    letter-spacing: -.05em;
}

.sv-inner-hero-copy > p {
    max-width: 680px;
    font-size: 14px;
    line-height: 1.65;
}

.sv-about-visual {
    max-width: 390px;
    width: 100%;
    justify-self: end;
    gap: 9px;
}

.sv-about-visual-card {
    grid-template-columns: 40px 1fr;
    padding: 13px 15px;
    border-radius: 10px;
}

.sv-about-visual-card > span {
    font-size: 17px;
}

.sv-about-visual-card strong {
    font-size: 13px;
}

.sv-about-visual-card small {
    font-size: 10px;
}

.sv-about-intro-grid {
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
    gap: clamp(45px, 6vw, 90px);
}

.sv-about-photo {
    min-height: 390px;
    border-radius: 16px;
}

.sv-about-copy h2,
.sv-service-support h2 {
    margin: 8px 0 17px;
    font-size: clamp(32px, 3.3vw, 48px);
    line-height: 1.06;
}

.sv-about-copy p,
.sv-service-support p {
    font-size: 13px;
    line-height: 1.72;
}

.sv-about-checks {
    gap: 9px;
    margin-top: 21px;
}

.sv-about-checks span {
    padding: 11px 12px;
    font-size: 11px;
}

/* ---------- ABOUT PROCESS ---------- */

.sv-process-line {
    gap: 11px;
}

.sv-process-line article {
    min-height: 190px;
    padding: 20px 18px;
    border-radius: 12px;
}

.sv-process-line article > span {
    width: 36px;
    height: 36px;
    margin-bottom: 23px;
    font-size: 10px;
}

.sv-process-line strong {
    font-size: 14px;
}

.sv-process-line p {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.55;
}

/* ---------- CAPABILITIES ---------- */

.sv-capability-grid {
    gap: 13px;
}

.sv-capability-grid > a {
    min-height: 190px;
    padding: 21px;
    border-radius: 12px;
}

.sv-capability-grid > a > span {
    font-size: 28px;
}

.sv-capability-grid strong {
    margin-top: 23px;
    font-size: 15px;
}

.sv-capability-grid small,
.sv-capability-grid b {
    font-size: 10px;
}

/* ---------- SERVICES HERO ---------- */

.sv-services-hero-panel {
    max-width: 390px;
    width: 100%;
    justify-self: end;
    gap: 8px;
}

.sv-services-hero-panel > a {
    min-height: 62px;
    grid-template-columns: 40px 1fr 26px;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
}

.sv-services-hero-panel > a > span {
    width: 37px;
    height: 37px;
    font-size: 17px;
}

.sv-services-hero-panel strong {
    font-size: 12px;
}

.sv-services-hero-panel small {
    font-size: 9.5px;
}

.sv-services-hero-panel b {
    width: 25px;
    height: 25px;
}

/* ---------- SERVICES SHOWCASE ---------- */

.sv-services-big-grid {
    gap: 16px;
}

.sv-service-big {
    border-radius: 13px;
}

.sv-service-big-photo {
    min-height: 210px;
    padding: 15px;
}

.sv-service-big-body {
    grid-template-columns: 43px 1fr 32px;
    gap: 13px;
    padding: 17px;
}

.sv-service-big-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
}

.sv-service-big-body h3 {
    font-size: 16px;
}

.sv-service-big-body p {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.5;
}

.sv-service-big-arrow {
    width: 31px;
    height: 31px;
}

/* ---------- SERVICES WORKFLOW ---------- */

.sv-workflow-grid {
    gap: 12px;
}

.sv-workflow-grid article {
    min-height: 165px;
    padding: 20px;
    border-radius: 12px;
}

.sv-workflow-grid article > span {
    font-size: 10px;
}

.sv-workflow-grid strong {
    margin-top: 21px;
    font-size: 15px;
}

.sv-workflow-grid p {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.55;
}

.sv-service-support-grid {
    grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);
    gap: clamp(45px, 6vw, 90px);
}

.sv-support-list {
    gap: 9px;
}

.sv-support-list > div {
    min-height: 68px;
    padding: 12px;
    border-radius: 10px;
}

.sv-support-list span {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
}

.sv-support-list strong {
    font-size: 11px;
}

/* ---------- CTA ---------- */

.sv-about-cta {
    padding: 48px 0;
}

.sv-about-cta h2 {
    margin: 7px 0;
    font-size: clamp(29px, 2.8vw, 41px);
}

.sv-about-cta p {
    font-size: 12px;
}

/* ============================================================
   LAPTOP
   ============================================================ */

@media (max-width: 1280px) {
    :root {
        --sv-pad: 32px;
    }

    .sv-hero-inner {
        grid-template-columns: minmax(0,1fr) 285px;
        gap: 50px;
    }

    .sv-hero-copy h1 {
        font-size: 56px;
    }

    .sv-service-content {
        grid-template-columns: 25px 1fr 22px;
        padding: 9px;
    }

    .sv-service-symbol {
        font-size: 18px;
    }

    .sv-trust-item {
        padding-inline: 12px;
    }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 980px) {
    :root {
        --sv-pad: 24px;
    }

    .sv-home-hero,
    .sv-hero-slide {
        min-height: auto;
    }

    .sv-hero-inner,
    .sv-inner-hero-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .sv-benefits,
    .sv-about-visual,
    .sv-services-hero-panel {
        max-width: none;
        justify-self: stretch;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .sv-service-grid,
    .sv-project-track,
    .sv-capability-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sv-trust-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sv-trust-item:last-child {
        grid-column: 1 / -1;
    }

    .sv-about-intro-grid,
    .sv-service-support-grid {
        grid-template-columns: 1fr;
    }

    .sv-process-line {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
    :root {
        --sv-pad: 17px;
    }

    .sv-hero-inner,
    .sv-inner-hero-grid {
        padding-top: 42px;
        padding-bottom: 45px;
    }

    .sv-kicker {
        font-size: 9px;
    }

    .sv-hero-copy h1,
    .sv-inner-hero-copy h1 {
        max-width: 100%;
        font-size: clamp(39px, 12vw, 50px);
        line-height: 1;
    }

    .sv-hero-copy p,
    .sv-inner-hero-copy > p {
        font-size: 12px;
    }

    .sv-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sv-btn {
        width: 100%;
    }

    .sv-benefits,
    .sv-about-visual,
    .sv-services-hero-panel,
    .sv-service-grid,
    .sv-project-track,
    .sv-trust-grid,
    .sv-capability-grid,
    .sv-process-line,
    .sv-services-big-grid,
    .sv-workflow-grid,
    .sv-support-list {
        grid-template-columns: 1fr;
    }

    .sv-trust-item:last-child {
        grid-column: auto;
    }

    .sv-service-card {
        grid-template-columns: 36% 64%;
    }

    .sv-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .sv-section-heading h2 {
        font-size: 29px;
    }

    .sv-action-grid {
        grid-template-columns: 1fr;
    }

    .sv-action-card {
        grid-template-columns: 40px 1fr;
    }

    .sv-action-card b {
        grid-column: 2;
        justify-self: start;
    }

    .sv-closing-grid,
    .sv-about-cta-inner {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }

    .sv-about-photo {
        min-height: 300px;
    }

    .sv-about-checks {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SOLINVA — HERO IMPACT + FOOTER ALIGNMENT FINAL PASS
   ============================================================ */

/* ---------- GLOBAL OVERFLOW SAFETY ---------- */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video {
    max-width: 100%;
}

/* ---------- HERO: MORE VISUAL IMPACT ---------- */

.sv-home-hero,
.sv-hero-slide {
    min-height: 535px;
}

.sv-home-hero {
    position: relative;
    background-size: cover;
    background-position: center center;
}

.sv-hero-inner {
    min-height: 535px;
    grid-template-columns: minmax(0, 1.15fr) 300px;
    gap: clamp(50px, 6vw, 105px);
    padding-top: 48px;
    padding-bottom: 56px;
}

.sv-hero-copy {
    max-width: 760px;
}

.sv-hero-copy h1 {
    max-width: 700px;
    margin-top: 12px;
    font-size: clamp(54px, 4.65vw, 76px);
    line-height: .96;
    letter-spacing: -.055em;
}

.sv-hero-copy p {
    max-width: 720px;
    font-size: 14.5px;
    line-height: 1.6;
}

.sv-hero-actions {
    margin-top: 21px;
}

.sv-benefits {
    max-width: 305px;
}

/* More open visual space through centre/right of hero */

.sv-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(0,48,37,.22) 0%,
            rgba(0,48,37,.05) 43%,
            transparent 68%
        );
}

/* Keep content above visual overlays */

.sv-home-hero .sv-hero-inner,
.sv-home-hero .sv-slider-arrow,
.sv-home-hero .sv-slider-dots {
    position: relative;
    z-index: 3;
}

/* ---------- SLIDER CONTROLS ---------- */

.sv-slider-arrow {
    width: 44px;
    height: 44px;
    background: rgba(0,49,37,.48);
    border: 1px solid rgba(255,255,255,.72);
    backdrop-filter: blur(6px);
}

.sv-slider-prev {
    left: 24px;
}

.sv-slider-next {
    right: 24px;
}

.sv-slider-dots {
    bottom: 17px;
}

.sv-slider-dots button {
    width: 9px;
    height: 9px;
}

.sv-slider-dots button.is-active {
    width: 26px;
    border-radius: 999px;
}

/* ---------- HEADER PRECISION ---------- */

header,
.site-header,
.public-header {
    width: 100%;
    max-width: 100%;
}

header .container,
.site-header .container,
.public-header .container {
    width: min(calc(100% - (var(--sv-pad) * 2)), var(--sv-shell));
    max-width: var(--sv-shell);
    margin-inline: auto;
}

/* ---------- FOOTER HARD ALIGNMENT ---------- */

footer,
.site-footer,
.public-footer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

footer .container,
.site-footer .container,
.public-footer .container {
    width: min(calc(100% - (var(--sv-pad) * 2)), var(--sv-shell));
    max-width: var(--sv-shell);
    margin-left: auto;
    margin-right: auto;
}

.footer-grid,
.site-footer-grid,
.public-footer-grid {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns:
        minmax(260px, 1.35fr)
        minmax(150px, .72fr)
        minmax(170px, .82fr)
        minmax(240px, 1fr);
    gap: clamp(30px, 4vw, 70px);
    align-items: start;
}

.footer-grid > *,
.site-footer-grid > *,
.public-footer-grid > * {
    min-width: 0;
    max-width: 100%;
}

footer ul,
.site-footer ul,
.public-footer ul {
    margin-left: 0;
    padding-left: 0;
}

footer a,
footer p,
footer span,
footer li,
.site-footer a,
.site-footer p,
.site-footer span,
.site-footer li,
.public-footer a,
.public-footer p,
.public-footer span,
.public-footer li {
    overflow-wrap: anywhere;
}

footer img,
.site-footer img,
.public-footer img {
    max-width: 100%;
    height: auto;
}

/* Footer social row must stay inside its column */

.footer-social,
.social-links,
.footer-socials {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.footer-social a,
.social-links a,
.footer-socials a {
    flex: 0 0 auto;
}

/* Footer bottom line */

.footer-bottom,
.site-footer-bottom,
.public-footer-bottom {
    width: 100%;
    max-width: 100%;
}

.footer-bottom .container,
.site-footer-bottom .container,
.public-footer-bottom .container {
    width: min(calc(100% - (var(--sv-pad) * 2)), var(--sv-shell));
    max-width: var(--sv-shell);
    margin-inline: auto;
}

/* ---------- LARGE DESKTOP ---------- */

@media (min-width: 1500px) {
    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: 560px;
    }

    .sv-hero-copy h1 {
        font-size: 78px;
    }
}

/* ---------- LAPTOP ---------- */

@media (max-width: 1280px) {
    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: 500px;
    }

    .sv-hero-inner {
        grid-template-columns: minmax(0,1fr) 275px;
        gap: 45px;
    }

    .sv-hero-copy h1 {
        font-size: 60px;
    }

    .footer-grid,
    .site-footer-grid,
    .public-footer-grid {
        grid-template-columns:
            minmax(230px,1.2fr)
            minmax(140px,.7fr)
            minmax(150px,.75fr)
            minmax(220px,1fr);
        gap: 28px;
    }
}

/* ---------- TABLET ---------- */

@media (max-width: 980px) {
    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: auto;
    }

    .sv-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .sv-benefits {
        max-width: none;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .footer-grid,
    .site-footer-grid,
    .public-footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 34px 45px;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width: 640px) {
    html,
    body {
        overflow-x: hidden;
    }

    .sv-hero-inner {
        padding-top: 45px;
        padding-bottom: 52px;
    }

    .sv-hero-copy h1 {
        font-size: clamp(42px,12.5vw,54px);
    }

    .sv-benefits {
        grid-template-columns: 1fr;
    }

    .sv-slider-arrow {
        display: none;
    }

    .footer-grid,
    .site-footer-grid,
    .public-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    footer .container,
    .site-footer .container,
    .public-footer .container,
    .footer-bottom .container,
    .site-footer-bottom .container,
    .public-footer-bottom .container {
        width: calc(100% - 34px);
    }
}

/* ============================================================
   SOLINVA — HERO 6 SLIDE PRECISION CORRECTION
   ============================================================ */

.sv-home-hero,
.sv-hero-slide {
    min-height: 475px !important;
}

.sv-home-hero {
    position: relative !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
}

.sv-hero-inner {
    position: relative;
    z-index: 3;
    min-height: 475px !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    align-items: center !important;
    gap: clamp(45px, 6vw, 95px) !important;
    padding-top: 38px !important;
    padding-bottom: 48px !important;
}

.sv-hero-copy {
    max-width: 700px !important;
}

.sv-hero-copy h1 {
    max-width: 640px !important;
    margin: 11px 0 7px !important;
    font-size: clamp(50px, 4.15vw, 68px) !important;
    line-height: .96 !important;
    letter-spacing: -.052em !important;
}

.sv-hero-brand {
    margin-top: 12px !important;
    font-size: 13px !important;
}

.sv-hero-copy p {
    max-width: 680px !important;
    margin-top: 5px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.sv-hero-actions {
    margin-top: 18px !important;
}

/* Right feature cards */

.sv-benefits {
    width: 100%;
    max-width: 300px !important;
    justify-self: end;
    gap: 7px !important;
}

.sv-benefit {
    min-height: 56px !important;
}

/* Remove visual rule that made hero look split/empty */

.sv-home-hero::before {
    background:
        linear-gradient(
            90deg,
            rgba(0,47,36,.20) 0%,
            rgba(0,47,36,.08) 36%,
            transparent 62%
        ) !important;
}

/* ============================================================
   SLIDER ARROWS — TRUE VERTICAL CENTER
   ============================================================ */

.sv-home-hero .sv-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 20 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

.sv-home-hero .sv-slider-prev {
    left: 20px !important;
    right: auto !important;
}

.sv-home-hero .sv-slider-next {
    right: 20px !important;
    left: auto !important;
}

/* ============================================================
   SLIDER DOTS — ABSOLUTE BOTTOM CENTER
   ============================================================ */

.sv-home-hero .sv-slider-dots {
    position: absolute !important;
    z-index: 25 !important;

    left: 50% !important;
    right: auto !important;

    bottom: 15px !important;
    top: auto !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    transform: translateX(-50%) !important;
}

.sv-home-hero .sv-slider-dots button {
    display: block !important;
    flex: 0 0 auto !important;

    width: 9px !important;
    height: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid rgba(255,255,255,.95) !important;
    border-radius: 999px !important;

    background: rgba(0,0,0,.10) !important;
    box-shadow: none !important;

    cursor: pointer;
    transition:
        width .22s ease,
        background .22s ease,
        border-color .22s ease !important;
}

.sv-home-hero .sv-slider-dots button.is-active {
    width: 25px !important;
    background: var(--sv-gold) !important;
    border-color: var(--sv-gold) !important;
}

/* ============================================================
   SERVICE STRIP — KEEP TARGET-LIKE HORIZONTAL PROPORTION
   ============================================================ */

.sv-service-strip {
    padding: 12px 0 !important;
}

.sv-service-grid {
    gap: 12px !important;
}

.sv-service-card {
    min-height: 86px !important;
}

/* ============================================================
   LAPTOP
   ============================================================ */

@media (max-width: 1280px) {
    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: 455px !important;
    }

    .sv-hero-inner {
        grid-template-columns: minmax(0,1fr) 275px !important;
        gap: 42px !important;
    }

    .sv-hero-copy h1 {
        font-size: 56px !important;
    }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 980px) {
    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: auto !important;
    }

    .sv-hero-inner {
        grid-template-columns: 1fr !important;
        padding-top: 55px !important;
        padding-bottom: 65px !important;
    }

    .sv-benefits {
        max-width: none !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
    .sv-hero-inner {
        padding-top: 42px !important;
        padding-bottom: 62px !important;
    }

    .sv-hero-copy h1 {
        font-size: clamp(40px,12vw,50px) !important;
    }

    .sv-benefits {
        grid-template-columns: 1fr !important;
    }

    .sv-home-hero .sv-slider-arrow {
        display: none !important;
    }

    .sv-home-hero .sv-slider-dots {
        bottom: 17px !important;
    }
}

/* ============================================================
   SOLINVA — REAL 2048x768 HERO GRAPHICS
   ============================================================ */

.sv-home-hero {
    position: relative !important;
    overflow: hidden !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    transition: background-image .55s ease-in-out !important;
}

/*
  2048x768 = 2.6667:1.
  Keep the desktop hero close to the source artwork ratio while
  leaving enough room for SOLINVA hero content.
*/
@media (min-width: 1281px) {
    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: clamp(455px, 31vw, 525px) !important;
    }
}

/* Keep SOLINVA copy readable without hiding the artwork */

.sv-home-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,37,29,.18) 0%,
            rgba(0,37,29,.08) 34%,
            transparent 63%
        ) !important;
}

.sv-home-hero .sv-hero-inner {
    position: relative !important;
    z-index: 3 !important;
}

/* Slider navigation always centred */

.sv-home-hero .sv-slider-dots {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 16px !important;
    top: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    margin: 0 !important;
    gap: 7px !important;

    transform: translateX(-50%) !important;
    z-index: 30 !important;
}

/* Desktop artwork should remain visible behind right-side cards */

.sv-benefits {
    background: transparent !important;
}

/* Laptop */

@media (max-width: 1280px) and (min-width: 981px) {
    .sv-home-hero {
        background-position: center center !important;
    }

    .sv-home-hero,
    .sv-hero-slide,
    .sv-hero-inner {
        min-height: 455px !important;
    }
}

/* Tablet */

@media (max-width: 980px) {
    .sv-home-hero {
        background-position: center center !important;
    }
}

/* Mobile:
   use cover but bias toward the important central artwork */

@media (max-width: 640px) {
    .sv-home-hero {
        background-position: 56% center !important;
    }

    .sv-home-hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(0,42,32,.82) 0%,
                rgba(0,42,32,.62) 58%,
                rgba(0,42,32,.28) 100%
            ) !important;
    }
}


/* ============================================================
   SOLINVA HERO — 2048x768 NATIVE RATIO / NO SIDE CROP
   Source aspect ratio: 2.6666667 : 1
   ============================================================ */

/* DESKTOP + LARGE LAPTOP */
@media (min-width: 1101px) {

    .sv-home-hero {
        width: 100% !important;

        /*
         * 2048 / 768 = 2.6667
         * Required height = viewport width / 2.6667
         * = 37.5vw
         */
        height: 37.5vw !important;
        min-height: 430px !important;
        max-height: 576px !important;

        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .sv-home-hero .sv-hero-slide,
    .sv-home-hero .sv-hero-inner {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .sv-home-hero .sv-hero-inner {
        align-items: center !important;
        padding-top: 34px !important;
        padding-bottom: 44px !important;
    }
}

/* STANDARD LAPTOP
   Keep the complete image visible without making hero excessively tall */
@media (min-width: 981px) and (max-width: 1100px) {

    .sv-home-hero {
        height: 37.5vw !important;
        min-height: 400px !important;
        max-height: 455px !important;

        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .sv-home-hero .sv-hero-slide,
    .sv-home-hero .sv-hero-inner {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* TABLET
   Natural cover is better after layout stacks */
@media (max-width: 980px) {

    .sv-home-hero {
        height: auto !important;
        min-height: 0 !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    .sv-home-hero .sv-hero-inner {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* MOBILE */
@media (max-width: 640px) {

    .sv-home-hero {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Keep navigation locked to actual hero box */

.sv-home-hero .sv-slider-dots {
    position: absolute !important;
    left: 50% !important;
    bottom: 15px !important;
    transform: translateX(-50%) !important;
}

.sv-home-hero .sv-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}


/* ============================================================
   SOLINVA — HOME CONTENT PROPORTION + THEME BALANCE
   Hero intentionally untouched
   ============================================================ */

/* ---------- SERVICE CARDS ---------- */

.sv-service-strip {
    padding: 18px 0 !important;
    background: #ffffff !important;
}

.sv-service-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 16px !important;
}

.sv-service-card {
    min-height: 108px !important;
    grid-template-columns: 42% 58% !important;
    overflow: hidden !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(4,56,42,.07) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.sv-service-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 34px rgba(4,56,42,.12) !important;
}

.sv-service-photo {
    min-height: 108px !important;
    height: 100% !important;
}

.sv-service-content {
    grid-template-columns: 31px minmax(0,1fr) 27px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 14px 13px !important;
}

.sv-service-symbol {
    font-size: 22px !important;
    color: #007f4f !important;
}

.sv-service-content strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: #073d30 !important;
}

.sv-service-content small {
    display: block !important;
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    color: #60736c !important;
}

.sv-service-content b {
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #007f4f !important;
}


/* ---------- TRUST STRIP ---------- */

.sv-trust-strip {
    background: #004b3b !important;
}

.sv-trust-grid {
    width: min(calc(100% - (var(--sv-pad) * 2)),var(--sv-shell)) !important;
    margin-inline: auto !important;
}

.sv-trust-item {
    min-height: 76px !important;
    padding: 14px 18px !important;
}

.sv-trust-item strong {
    font-size: 12px !important;
}

.sv-trust-item small {
    font-size: 9px !important;
    opacity: .82 !important;
}


/* ---------- PROJECT / APPLICATION SECTION ---------- */

.sv-projects-section {
    padding: 56px 0 62px !important;
    background:
        linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%) !important;
}

.sv-projects-section .sv-section-heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 30px !important;
    margin-bottom: 24px !important;
}

.sv-projects-section .sv-section-heading h2 {
    margin: 7px 0 5px !important;
    font-size: clamp(31px,2.6vw,41px) !important;
    line-height: 1.05 !important;
    color: #003f31 !important;
}

.sv-projects-section .sv-section-heading p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: #60736c !important;
}

.sv-project-track {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 16px !important;
}

.sv-project-card {
    overflow: hidden !important;
    min-width: 0 !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 9px 27px rgba(4,56,42,.07) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

.sv-project-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 38px rgba(4,56,42,.13) !important;
}

.sv-project-photo {
    position: relative !important;
    min-height: 190px !important;
    height: 190px !important;
    background-size: cover !important;
    background-position: center !important;
}

.sv-project-photo > span {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    z-index: 2 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #008653 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

.sv-project-info {
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 31px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 14px !important;
}

.sv-project-info h3 {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #073d30 !important;
}

.sv-project-info p {
    margin: 4px 0 0 !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
    color: #60736c !important;
}

.sv-project-info b {
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 50% !important;
    color: #007f4f !important;
}


/* ---------- PRODUCT CATEGORY ROW ---------- */

.sv-brand-strip {
    border-top: 1px solid #e4ece8 !important;
    border-bottom: 1px solid #e4ece8 !important;
    background: #fff !important;
}

.sv-brand-row {
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 1.25fr repeat(4,1fr) !important;
    align-items: center !important;
    gap: 15px !important;
}

.sv-brand-row > strong {
    font-size: 12px !important;
    color: #073d30 !important;
}

.sv-brand-row a {
    justify-self: center !important;
    min-width: 105px !important;
    padding: 9px 15px !important;
    text-align: center !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #006c45 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}


/* ---------- BOTTOM ACTION STRIP ---------- */

.sv-action-strip {
    background:
        linear-gradient(90deg,#eef9f3 0%,#fff8df 100%) !important;
}

.sv-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

.sv-action-card {
    min-height: 104px !important;
    grid-template-columns: 46px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 18px 20px !important;
    border-right: 1px solid rgba(0,75,59,.12) !important;
}

.sv-action-card:last-child {
    border-right: 0 !important;
}

.sv-action-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 19px !important;
}

.sv-action-card strong {
    font-size: 13px !important;
    color: #073d30 !important;
}

.sv-action-card small {
    margin-top: 4px !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
}

.sv-action-card b {
    white-space: nowrap !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: #007f4f !important;
    color: #fff !important;
    font-size: 9px !important;
}


/* ---------- LAPTOP ---------- */

@media (max-width: 1280px) {
    .sv-project-photo {
        height: 170px !important;
        min-height: 170px !important;
    }

    .sv-service-content {
        padding: 12px 10px !important;
    }
}


/* ---------- TABLET ---------- */

@media (max-width: 980px) {
    .sv-service-grid,
    .sv-project-track {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .sv-brand-row {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        padding: 18px 0 !important;
    }

    .sv-brand-row > strong {
        grid-column: 1 / -1 !important;
    }

    .sv-action-grid {
        grid-template-columns: 1fr !important;
    }

    .sv-action-card {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(0,75,59,.12) !important;
    }

    .sv-action-card:last-child {
        border-bottom: 0 !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 640px) {
    .sv-service-grid,
    .sv-project-track,
    .sv-brand-row {
        grid-template-columns: 1fr !important;
    }

    .sv-service-card {
        grid-template-columns: 38% 62% !important;
    }

    .sv-project-photo {
        min-height: 210px !important;
        height: 210px !important;
    }

    .sv-projects-section {
        padding: 44px 0 !important;
    }

    .sv-projects-section .sv-section-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .sv-action-card {
        grid-template-columns: 44px minmax(0,1fr) !important;
    }

    .sv-action-card b {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}


/* ============================================================
   SOLINVA — FULL HOME PROFESSIONAL ALIGNMENT SYSTEM
   IMPORTANT: HERO / 6 SLIDER IMAGES ARE NOT MODIFIED HERE
   ============================================================ */

:root {
    --home-shell: 1340px;
    --home-pad: clamp(20px, 3vw, 42px);
    --home-section-y: 68px;
    --home-gap: 20px;
    --home-radius: 16px;
    --home-card-border: #dfe9e4;
    --home-green: #007f4f;
    --home-dark: #003f31;
    --home-text: #123c32;
    --home-muted: #667a73;
}

/* ---------- COMMON HOME CONTAINER ---------- */

.why-section > .container,
.process-section > .container,
.products-section > .container,
.package-section > .container,
.calculator-band > .container,
.subsidy-section > .container,
.visit-section > .container,
.faq-section > .container,
.contact-band > .container,
.sv-projects-section > .container,
.sv-brand-section > .container,
.sv-action-strip > .container,
.sv-home-closing > .container {
    width: min(calc(100% - (var(--home-pad) * 2)), var(--home-shell)) !important;
    max-width: var(--home-shell) !important;
    margin-inline: auto !important;
}

/* ---------- COMMON SECTION HEIGHT / SPACING ---------- */

.why-section,
.process-section,
.products-section,
.package-section,
.subsidy-section,
.visit-section,
.faq-section {
    padding-top: var(--home-section-y) !important;
    padding-bottom: var(--home-section-y) !important;
}

.calculator-band,
.contact-band {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* Never allow recovered sections to create accidental giant blank space */

.why-section,
.process-section,
.products-section,
.package-section,
.calculator-band,
.subsidy-section,
.visit-section,
.faq-section,
.contact-band {
    min-height: 0 !important;
    height: auto !important;
}

/* ---------- COMMON TYPOGRAPHY ---------- */

.why-section h2,
.process-section h2,
.products-section h2,
.package-section h2,
.calculator-band h2,
.subsidy-section h2,
.visit-section h2,
.faq-section h2,
.contact-band h2 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-size: clamp(30px, 2.7vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
}

.why-section p,
.process-section p,
.products-section p,
.package-section p,
.calculator-band p,
.subsidy-section p,
.visit-section p,
.faq-section p,
.contact-band p {
    line-height: 1.65 !important;
}

.section-heading,
.section-head {
    margin-bottom: 28px !important;
}

.section-heading > *,
.section-head > * {
    max-width: 760px;
}


/* ============================================================
   WHY SOLINVA
   ============================================================ */

.why-section {
    background:
        radial-gradient(circle at 15% 20%, rgba(245,183,0,.08), transparent 28%),
        linear-gradient(135deg,#003d30,#005744) !important;
}

.why-grid {
    display: grid !important;
    grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr) !important;
    align-items: center !important;
    gap: clamp(45px,6vw,90px) !important;
}

.why-intro {
    max-width: 500px !important;
}

.why-list {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
}

.why-item {
    min-height: 142px !important;
    height: 100% !important;
    padding: 20px !important;
    border-radius: 14px !important;
}

.why-index {
    display: block !important;
    margin-bottom: 20px !important;
}


/* ============================================================
   HOW IT WORKS / PROCESS
   ============================================================ */

.process-section {
    background: #f6faf8 !important;
}

.process-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 15px !important;
    align-items: stretch !important;
}

.process-card {
    min-height: 205px !important;
    height: 100% !important;
    padding: 22px !important;
    border: 1px solid var(--home-card-border) !important;
    border-radius: var(--home-radius) !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(3,58,44,.055) !important;
}

.process-number {
    margin-bottom: 25px !important;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.products-section {
    background: #fff !important;
}

.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.product-card {
    min-height: 225px !important;
    height: 100% !important;
    padding: 24px !important;
    border: 1px solid var(--home-card-border) !important;
    border-radius: var(--home-radius) !important;
    background: #fff !important;
    box-shadow: 0 9px 26px rgba(3,58,44,.06) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 38px rgba(3,58,44,.12) !important;
}

.product-symbol {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 27px !important;
    border-radius: 12px !important;
    background: #eaf6f0 !important;
    color: var(--home-green) !important;
    font-size: 24px !important;
}


/* ============================================================
   PACKAGE SECTION
   ============================================================ */

.package-section {
    background: #f5f9f7 !important;
}

.package-shell {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(360px,.72fr) !important;
    align-items: center !important;
    gap: clamp(50px,7vw,100px) !important;
}

.package-copy {
    max-width: 700px !important;
}

.package-visual {
    width: 100% !important;
    min-height: 330px !important;
    max-height: 390px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}


/* ============================================================
   SOLAR CALCULATOR BAND
   ============================================================ */

.calculator-band {
    background:
        linear-gradient(115deg,#003e31 0%,#00694e 100%) !important;
}

.calculator-band-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 45px !important;
}

.calculator-band h2 {
    max-width: 720px !important;
}

.calculator-band p {
    max-width: 760px !important;
}


/* ============================================================
   SUBSIDY
   ============================================================ */

.subsidy-section > .container {
    display: grid !important;
    grid-template-columns: minmax(360px,.85fr) minmax(0,1fr) !important;
    align-items: center !important;
    gap: clamp(50px,7vw,100px) !important;
}

.subsidy-visual {
    width: 100% !important;
    min-height: 330px !important;
    max-height: 390px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}


/* ============================================================
   SITE VISIT
   ============================================================ */

.visit-section {
    background: #f5faf7 !important;
}

.visit-box {
    min-height: 250px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 50px !important;
    padding: clamp(32px,4vw,52px) !important;
    border: 1px solid var(--home-card-border) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 14px 38px rgba(3,58,44,.07) !important;
}


/* ============================================================
   FAQ
   ============================================================ */

.faq-section {
    background: #fff !important;
}

.faq-layout {
    display: grid !important;
    grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr) !important;
    align-items: start !important;
    gap: clamp(50px,7vw,95px) !important;
}

.faq-heading {
    position: sticky !important;
    top: 105px !important;
}

.faq-list {
    display: grid !important;
    gap: 10px !important;
}

.faq-item {
    width: 100% !important;
    overflow: hidden !important;
    border: 1px solid var(--home-card-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.faq-item summary {
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 15px 18px !important;
    cursor: pointer !important;
}

.faq-item > p {
    margin: 0 !important;
    padding: 0 18px 18px !important;
}


/* ============================================================
   CONTACT BAND
   ============================================================ */

.contact-band {
    background:
        linear-gradient(120deg,#003b2f,#00664c) !important;
}

.contact-band-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(400px,.8fr) !important;
    align-items: center !important;
    gap: 55px !important;
}

.contact-actions {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 10px !important;
}

.contact-action {
    min-width: 0 !important;
    min-height: 82px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 14px !important;
    border-radius: 12px !important;
    overflow-wrap: anywhere !important;
}


/* ============================================================
   HOME CLOSING
   ============================================================ */

.sv-home-closing {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
}

.sv-closing-grid {
    align-items: center !important;
}


/* ============================================================
   BUTTON CONSISTENCY
   ============================================================ */

.why-section a,
.process-section a,
.products-section a,
.package-section a,
.calculator-band a,
.subsidy-section a,
.visit-section a,
.contact-band a {
    max-width: 100%;
}

.button,
.btn,
.primary-button,
.secondary-button {
    min-height: 44px;
}


/* ============================================================
   LAPTOP
   ============================================================ */

@media (max-width: 1200px) {

    :root {
        --home-section-y: 58px;
    }

    .process-grid,
    .product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .contact-band-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-actions {
        max-width: 800px !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    :root {
        --home-pad: 24px;
        --home-section-y: 52px;
    }

    .why-grid,
    .package-shell,
    .subsidy-section > .container,
    .faq-layout {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .faq-heading {
        position: static !important;
    }

    .calculator-band-grid,
    .visit-box {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .package-visual,
    .subsidy-visual {
        min-height: 290px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

    :root {
        --home-pad: 17px;
        --home-section-y: 44px;
    }

    .why-list,
    .process-grid,
    .product-grid,
    .contact-actions {
        grid-template-columns: 1fr !important;
    }

    .why-item,
    .process-card,
    .product-card {
        min-height: 0 !important;
    }

    .package-visual,
    .subsidy-visual {
        min-height: 230px !important;
    }

    .visit-box {
        min-height: 0 !important;
        padding: 25px 20px !important;
    }

    .contact-action {
        min-height: 72px !important;
    }

    .faq-item summary {
        min-height: 58px !important;
    }
}


/* ============================================================
   SOLINVA — HERO SERVICE CARDS FINAL SIZE / ALIGNMENT
   Hero itself is intentionally untouched.
   ============================================================ */

.sv-service-strip {
    padding: 18px 0 20px !important;
}

.sv-service-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.sv-service-card {
    display: grid !important;
    grid-template-columns: 40% minmax(0, 60%) !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 116px !important;
    min-height: 116px !important;

    overflow: hidden !important;

    border: 1px solid #dce8e2 !important;
    border-radius: 13px !important;
    background: #fff !important;

    text-decoration: none !important;
}

/* left visual */

.sv-service-photo {
    width: 100% !important;
    height: 116px !important;
    min-height: 116px !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* right content */

.sv-service-content {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) 28px !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 9px !important;
    padding: 13px 11px !important;
}

.sv-service-content > div {
    min-width: 0 !important;
}

.sv-service-symbol {
    display: grid !important;
    place-items: center !important;

    width: 26px !important;
    height: 30px !important;

    font-size: 19px !important;
    line-height: 1 !important;

    color: #008552 !important;
}

/* title */

.sv-service-content strong {
    display: block !important;

    margin: 0 !important;

    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;

    color: #063d30 !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* description */

.sv-service-content small {
    display: block !important;

    margin-top: 5px !important;

    font-size: 9.5px !important;
    line-height: 1.42 !important;

    color: #61756e !important;
}

/* arrow */

.sv-service-content b {
    display: grid !important;
    place-items: center !important;

    width: 27px !important;
    height: 27px !important;

    padding: 0 !important;

    border: 1px solid #dce8e2 !important;
    border-radius: 50% !important;

    background: #fff !important;
    color: #007f4f !important;

    font-size: 12px !important;
    line-height: 1 !important;

    justify-self: end !important;
}


/* Ground Mount gets enough title room */

.sv-service-ground .sv-service-content strong {
    font-size: 12px !important;
}


/* ---------- NORMAL LAPTOP ---------- */

@media (max-width: 1280px) and (min-width: 981px) {

    .sv-service-card,
    .sv-service-photo {
        height: 112px !important;
        min-height: 112px !important;
    }

    .sv-service-card {
        grid-template-columns: 37% minmax(0, 63%) !important;
    }

    .sv-service-content {
        grid-template-columns: 24px minmax(0, 1fr) 26px !important;
        gap: 7px !important;
        padding: 11px 9px !important;
    }

    .sv-service-content strong {
        font-size: 11.5px !important;
    }

    .sv-service-content small {
        font-size: 9px !important;
    }
}


/* ---------- TABLET ---------- */

@media (max-width: 980px) {

    .sv-service-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 12px !important;
    }

    .sv-service-card,
    .sv-service-photo {
        height: 120px !important;
        min-height: 120px !important;
    }

    .sv-service-card {
        grid-template-columns: 40% minmax(0,60%) !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 620px) {

    .sv-service-strip {
        padding: 14px 0 17px !important;
    }

    .sv-service-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .sv-service-card,
    .sv-service-photo {
        height: 112px !important;
        min-height: 112px !important;
    }

    .sv-service-card {
        grid-template-columns: 38% minmax(0,62%) !important;
    }

    .sv-service-content {
        grid-template-columns: 25px minmax(0,1fr) 27px !important;
        padding: 11px !important;
    }

    .sv-service-content strong,
    .sv-service-ground .sv-service-content strong {
        font-size: 12px !important;
    }
}


/* ============================================================
   SOLINVA SERVICE CARDS — CORRECTION
   Keep original horizontal proportions.
   Increase ONLY vertical breathing room.
   ============================================================ */

.sv-service-strip {
    padding: 20px 0 22px !important;
}

.sv-service-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 14px !important;
}

/* Restore original side proportion — do NOT widen either side */
.sv-service-card {
    grid-template-columns: 42% 58% !important;

    height: 132px !important;
    min-height: 132px !important;

    border-radius: 13px !important;
    overflow: hidden !important;
}

/* Increase vertical image area only */
.sv-service-photo {
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
}

/* Give content vertical breathing room */
.sv-service-content {
    grid-template-columns: 27px minmax(0,1fr) 28px !important;

    align-items: center !important;

    gap: 9px !important;
    padding: 18px 12px !important;

    min-width: 0 !important;
    height: 100% !important;
}

/* Text block remains vertically centered */
.sv-service-content > div {
    min-width: 0 !important;
    align-self: center !important;
}

.sv-service-content strong {
    margin: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.32 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.sv-service-content small {
    margin-top: 7px !important;

    font-size: 9.5px !important;
    line-height: 1.5 !important;

    white-space: normal !important;
}

/* Do not specially squeeze Ground Mount */
.sv-service-ground .sv-service-content strong {
    font-size: 12.5px !important;
}


/* Laptop — still increase HEIGHT, not width */

@media (max-width:1280px) and (min-width:981px) {

    .sv-service-card {
        grid-template-columns: 42% 58% !important;
        height: 126px !important;
        min-height: 126px !important;
    }

    .sv-service-photo {
        height: 126px !important;
        min-height: 126px !important;
    }

    .sv-service-content {
        grid-template-columns: 26px minmax(0,1fr) 27px !important;
        padding: 16px 11px !important;
        gap: 8px !important;
    }

    .sv-service-content strong,
    .sv-service-ground .sv-service-content strong {
        font-size: 12px !important;
    }

    .sv-service-content small {
        font-size: 9.25px !important;
        line-height: 1.48 !important;
    }
}


/* Tablet */

@media (max-width:980px) {

    .sv-service-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .sv-service-card {
        grid-template-columns: 42% 58% !important;
        height: 132px !important;
        min-height: 132px !important;
    }

    .sv-service-photo {
        height: 132px !important;
        min-height: 132px !important;
    }
}


/* Mobile */

@media (max-width:620px) {

    .sv-service-grid {
        grid-template-columns: 1fr !important;
    }

    .sv-service-card {
        grid-template-columns: 42% 58% !important;
        height: 126px !important;
        min-height: 126px !important;
    }

    .sv-service-photo {
        height: 126px !important;
        min-height: 126px !important;
    }
}


/* ============================================================
   SOLINVA HERO — CONTENT POSITION / BACKGROUND VISIBILITY
   Does NOT change hero image size or slider images.
   ============================================================ */

@media (min-width: 981px) {

    /* Move BOTH hero content areas slightly downward */
    .sv-home-hero .sv-hero-copy {
        transform: translateY(42px) !important;
    }

    .sv-home-hero .sv-benefits {
        transform: translateY(46px) !important;
    }

    /* Let more of slide #5/#6 artwork remain visible */
    .sv-home-hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(0,37,29,.42) 0%,
                rgba(0,37,29,.28) 27%,
                rgba(0,37,29,.10) 49%,
                rgba(0,37,29,.02) 68%,
                transparent 100%
            ) !important;
    }

    /* Right cards: slightly transparent instead of solid white */
    .sv-home-hero .sv-benefit-card {
        background: rgba(255,255,255,.92) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }
}

/* Keep slider dots independent — they must NOT move down */
.sv-home-hero .sv-slider-dots {
    transform: translateX(-50%) !important;
    bottom: 15px !important;
}

/* Tablet: smaller downward adjustment */
@media (max-width: 980px) and (min-width: 641px) {
    .sv-home-hero .sv-hero-copy {
        transform: translateY(20px) !important;
    }

    .sv-home-hero .sv-benefits {
        transform: translateY(20px) !important;
    }
}

/* Mobile: do not force desktop offsets */
@media (max-width: 640px) {
    .sv-home-hero .sv-hero-copy,
    .sv-home-hero .sv-benefits {
        transform: none !important;
    }
}


/* ============================================================
   SOLINVA HERO — FINAL CLEAR-ARTWORK POSITION
   Keep all 6 background images untouched.
   ============================================================ */

@media (min-width: 981px) {

    /* Main left message lower so upper artwork stays visible */
    .sv-home-hero .sv-hero-copy {
        transform: translateY(92px) !important;
    }

    /* Right information stack lower */
    .sv-home-hero .sv-benefits {
        transform: translateY(108px) !important;
        gap: 7px !important;
    }

    /* Slightly lighter cards so background remains visible */
    .sv-home-hero .sv-benefit-card {
        background: rgba(255,255,255,.88) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    /* Keep text readable without making a heavy dark wall */
    .sv-home-hero .sv-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,38,30,.55) 0%,
                rgba(0,38,30,.40) 24%,
                rgba(0,38,30,.18) 43%,
                rgba(0,38,30,.04) 61%,
                rgba(0,38,30,0) 76%
            ) !important;
    }
}

/* Slider navigation stays fixed and centered */
.sv-home-hero .sv-slider-dots {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
}

/* Do not apply large desktop movement on smaller screens */
@media (max-width: 980px) {
    .sv-home-hero .sv-hero-copy,
    .sv-home-hero .sv-benefits {
        transform: none !important;
    }
}


/* SOLINVA HERO — RIGHT 4 CARDS SOFT TRANSPARENCY */

.sv-home-hero .sv-benefit-card {
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;

    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;

    box-shadow: 0 8px 22px rgba(0, 45, 34, 0.10) !important;
}

/* Keep card text strong/readable */
.sv-home-hero .sv-benefit-card strong {
    color: #073d31 !important;
}

.sv-home-hero .sv-benefit-card small {
    color: rgba(20, 58, 49, 0.82) !important;
}


/* HERO RIGHT CARDS — MORE TRANSPARENT, IMAGE VISIBLE BELOW */

.sv-home-hero .sv-benefit-card {
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;

    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;

    box-shadow: 0 5px 16px rgba(0, 40, 30, 0.08) !important;
}

.sv-home-hero .sv-benefit-card strong {
    color: #063b2f !important;
    text-shadow: 0 1px 2px rgba(255,255,255,.45) !important;
}

.sv-home-hero .sv-benefit-card small {
    color: #234f44 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,.40) !important;
}


/* ============================================================
   SOLINVA HERO — ACTUAL RIGHT BENEFIT CARDS TRANSPARENCY FIX
   Correct selector: .sv-benefit
   ============================================================ */

.sv-home-hero .sv-benefits .sv-benefit {
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    box-shadow: 0 5px 16px rgba(0, 42, 32, 0.08) !important;
}

/* Keep heading readable */
.sv-home-hero .sv-benefits .sv-benefit strong {
    color: #073d31 !important;
    text-shadow:
        0 1px 1px rgba(255,255,255,.80),
        0 0 4px rgba(255,255,255,.55) !important;
}

/* Keep small description readable */
.sv-home-hero .sv-benefits .sv-benefit small {
    color: #234c42 !important;
    text-shadow:
        0 1px 1px rgba(255,255,255,.75),
        0 0 3px rgba(255,255,255,.45) !important;
}

/* Green round icon remains solid for clarity */
.sv-home-hero .sv-benefits .sv-benefit-icon {
    background: rgba(0, 145, 88, 0.94) !important;
    color: #fff !important;
}


/* ============================================================
   SOLINVA HERO — RIGHT BENEFIT CARDS PREMIUM HOVER
   ============================================================ */

.sv-home-hero .sv-benefits .sv-benefit {
    cursor: pointer !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

/* Mouse hover */
.sv-home-hero .sv-benefits .sv-benefit:hover {
    background: rgba(0, 128, 78, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.78) !important;

    transform: translateX(-5px) scale(1.015) !important;

    box-shadow:
        0 10px 26px rgba(0, 55, 39, 0.22),
        0 0 0 1px rgba(255,255,255,.16) !important;
}

/* Heading becomes white */
.sv-home-hero .sv-benefits .sv-benefit:hover strong {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Description becomes light */
.sv-home-hero .sv-benefits .sv-benefit:hover small {
    color: rgba(255,255,255,.90) !important;
    text-shadow: none !important;
}

/* Icon reverses on hover */
.sv-home-hero .sv-benefits .sv-benefit:hover .sv-benefit-icon {
    background: #ffffff !important;
    color: #007f4f !important;

    transform: scale(1.08) !important;
}

/* Keyboard focus also clearly visible */
.sv-home-hero .sv-benefits .sv-benefit:focus-visible {
    outline: 3px solid #f4b400 !important;
    outline-offset: 3px !important;
}

/* Don't use movement effect on touch/mobile */
@media (max-width: 640px) {
    .sv-home-hero .sv-benefits .sv-benefit:hover {
        transform: none !important;
    }
}


/* ============================================================
   SOLINVA HERO — LEFT CTA PREMIUM HOVER
   ============================================================ */

.sv-home-hero .sv-hero-actions a {
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;

    transition:
        transform .22s ease,
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}

/* FIRST BUTTON — Get Solar Recommendation */

.sv-home-hero .sv-hero-actions a:first-child:hover {
    background: #f4b400 !important;
    border-color: #f4b400 !important;
    color: #073d31 !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 12px 26px rgba(0, 62, 43, .22),
        0 0 0 1px rgba(255,255,255,.15) !important;
}

/* SECOND BUTTON — Book Site Visit */

.sv-home-hero .sv-hero-actions a:last-child:hover {
    background: #008755 !important;
    border-color: #008755 !important;
    color: #fff !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 12px 26px rgba(0, 62, 43, .20) !important;
}

/* Arrow movement */

.sv-home-hero .sv-hero-actions a span:last-child {
    transition: transform .22s ease !important;
}

.sv-home-hero .sv-hero-actions a:hover span:last-child {
    transform: translateX(4px) !important;
}

/* Keyboard accessibility */

.sv-home-hero .sv-hero-actions a:focus-visible {
    outline: 3px solid #f4b400 !important;
    outline-offset: 3px !important;
}

/* Touch devices — no artificial movement */

@media (hover: none) {
    .sv-home-hero .sv-hero-actions a:hover {
        transform: none !important;
    }
}


/* ============================================================
   SOLINVA PUBLIC WEBSITE — SHARED PREMIUM DESIGN SYSTEM
   Home hero / slider intentionally excluded.
   ============================================================ */

:root {
    --sv-shell: 1340px;
    --sv-page-pad: clamp(18px, 3vw, 42px);
    --sv-section-space: clamp(58px, 6vw, 86px);

    --sv-green: #008553;
    --sv-green-dark: #003f31;
    --sv-green-deep: #002f25;
    --sv-gold: #f4b400;

    --sv-text: #123d32;
    --sv-muted: #647870;
    --sv-line: #dfe9e4;
    --sv-soft: #f5f9f7;

    --sv-radius: 16px;
    --sv-shadow: 0 12px 34px rgba(5, 60, 45, .07);
    --sv-shadow-hover: 0 20px 44px rgba(5, 60, 45, .13);
}


/* ============================================================
   GLOBAL PUBLIC WIDTH
   ============================================================ */

.page-hero > .container,
.section > .container,
.sv-inner-hero > .container,
.sv-about-intro > .container,
.sv-about-process > .container,
.sv-capabilities > .container,
.sv-about-cta > .container {
    width: min(
        calc(100% - (var(--sv-page-pad) * 2)),
        var(--sv-shell)
    ) !important;

    max-width: var(--sv-shell) !important;
    margin-inline: auto !important;
}

.container.narrow {
    width: min(
        calc(100% - (var(--sv-page-pad) * 2)),
        1080px
    ) !important;

    max-width: 1080px !important;
}


/* ============================================================
   GENERIC INNER PAGE HERO
   ============================================================ */

.page-hero {
    position: relative !important;
    overflow: hidden !important;

    min-height: 330px !important;

    display: flex !important;
    align-items: center !important;

    padding: 70px 0 !important;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(244,180,0,.18),
            transparent 26%
        ),
        linear-gradient(
            118deg,
            #00392d 0%,
            #005944 55%,
            #00704f 100%
        ) !important;

    color: #fff !important;
}

.page-hero::after {
    content: "" !important;
    position: absolute !important;
    width: 420px !important;
    height: 420px !important;
    right: -100px !important;
    bottom: -260px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.page-hero .container {
    position: relative !important;
    z-index: 1 !important;
}

.page-hero .eyebrow {
    display: inline-block !important;

    margin-bottom: 16px !important;

    color: var(--sv-gold) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .15em !important;
}

.page-hero h1 {
    max-width: 900px !important;

    margin: 0 !important;

    color: #fff !important;

    font-size: clamp(42px, 5vw, 68px) !important;
    line-height: .98 !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
}

.page-hero p {
    max-width: 760px !important;

    margin: 22px 0 0 !important;

    color: rgba(255,255,255,.86) !important;

    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* ============================================================
   NORMAL SECTIONS
   ============================================================ */

.section {
    padding-top: var(--sv-section-space) !important;
    padding-bottom: var(--sv-section-space) !important;

    min-height: 0 !important;
    height: auto !important;
}

.section:nth-of-type(even) {
    background: #fff !important;
}

.section h2 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;

    color: var(--sv-green-dark) !important;

    font-size: clamp(30px, 3vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
}

.section h3 {
    color: var(--sv-green-dark) !important;
}

.section p {
    color: var(--sv-muted) !important;
    line-height: 1.68 !important;
}


/* ============================================================
   GENERIC CARD SYSTEM
   ============================================================ */

.cards {
    display: grid !important;
    gap: 18px !important;
    align-items: stretch !important;

    margin-bottom: 30px !important;
}

.cards-3 {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

.cards-4 {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.card {
    position: relative !important;

    min-width: 0 !important;
    min-height: 190px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    padding: 26px !important;

    border: 1px solid var(--sv-line) !important;
    border-radius: var(--sv-radius) !important;

    background: #fff !important;

    box-shadow: var(--sv-shadow) !important;

    text-decoration: none !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background-color .22s ease !important;
}

.card:hover {
    transform: translateY(-5px) !important;

    border-color: rgba(0,133,83,.35) !important;

    box-shadow: var(--sv-shadow-hover) !important;
}

a.card:hover {
    background: #f8fcfa !important;
}

.card > span:first-child {
    display: inline-flex !important;
    align-items: center !important;

    margin-bottom: 30px !important;

    color: var(--sv-green) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}

.card h3 {
    margin: 0 0 10px !important;

    font-size: 21px !important;
    line-height: 1.2 !important;
}

.card p {
    margin: 0 !important;

    font-size: 14px !important;
}


/* ============================================================
   BUTTON SYSTEM + HOVER
   ============================================================ */

.btn {
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    padding: 0 22px !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}

.btn-primary {
    background: var(--sv-green) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: var(--sv-gold) !important;
    color: var(--sv-green-deep) !important;

    transform: translateY(-3px) !important;

    box-shadow: 0 12px 25px rgba(0,75,52,.16) !important;
}

.btn:focus-visible,
.card:focus-visible {
    outline: 3px solid var(--sv-gold) !important;
    outline-offset: 3px !important;
}


/* ============================================================
   NOTICE / INFORMATION PANEL
   ============================================================ */

.notice {
    margin-bottom: 28px !important;

    padding: 18px 20px !important;

    border: 1px solid #d9e8df !important;
    border-left: 4px solid var(--sv-green) !important;
    border-radius: 11px !important;

    background: #f3faf6 !important;

    color: #365c51 !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* ============================================================
   FORMS — SITE VISIT + FUTURE PUBLIC FORMS
   ============================================================ */

.form-card {
    max-width: 1080px !important;

    padding: clamp(26px,4vw,44px) !important;

    border: 1px solid var(--sv-line) !important;
    border-radius: 20px !important;

    background: #fff !important;

    box-shadow: var(--sv-shadow) !important;
}

.form-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;

    gap: 20px !important;
}

.form-card label {
    display: grid !important;
    gap: 8px !important;

    margin-bottom: 20px !important;

    color: var(--sv-green-dark) !important;

    font-size: 13px !important;
    font-weight: 750 !important;
}

.form-card input,
.form-card select,
.form-card textarea {
    width: 100% !important;

    border: 1px solid #d5e2dc !important;
    border-radius: 10px !important;

    background: #fbfdfc !important;
    color: var(--sv-text) !important;

    font: inherit !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease !important;
}

.form-card input,
.form-card select {
    min-height: 48px !important;
    padding: 0 14px !important;
}

.form-card textarea {
    min-height: 120px !important;
    padding: 13px 14px !important;

    resize: vertical !important;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    outline: none !important;

    border-color: var(--sv-green) !important;

    background: #fff !important;

    box-shadow: 0 0 0 3px rgba(0,133,83,.10) !important;
}


/* ============================================================
   SMART SOLAR CALCULATOR CURRENT FOUNDATION
   ============================================================ */

.calculator-card {
    max-width: 1080px !important;

    margin-inline: auto !important;

    padding: clamp(28px,4vw,48px) !important;

    border: 1px solid var(--sv-line) !important;
    border-radius: 20px !important;

    background:
        linear-gradient(145deg,#ffffff,#f5faf7) !important;

    box-shadow: var(--sv-shadow) !important;
}

.calculator-card > h2 {
    margin-bottom: 12px !important;
}

.calculator-card > p {
    max-width: 760px !important;
    margin-bottom: 30px !important;
}

.calculator-card .cards {
    margin: 0 0 30px !important;
}

.calculator-card .mini {
    min-height: 125px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding: 20px !important;

    border: 1px solid var(--sv-line) !important;
    border-radius: 13px !important;

    background: #fff !important;
}

.calculator-card .mini strong {
    margin-bottom: 7px !important;

    color: var(--sv-green-dark) !important;

    font-size: 16px !important;
}

.calculator-card .mini span {
    color: var(--sv-muted) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* ============================================================
   PRODUCTS CATEGORY PAGE
   ============================================================ */

.product-category-section {
    background: var(--sv-soft) !important;
}

.product-category-grid {
    gap: 18px !important;
}

.product-category-card {
    min-height: 245px !important;

    border-radius: 17px !important;

    box-shadow: var(--sv-shadow) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

.product-category-card:hover {
    transform: translateY(-6px) !important;

    box-shadow: var(--sv-shadow-hover) !important;
}


/* ============================================================
   ABOUT — ALIGN WITH SHARED WIDTH RHYTHM
   ============================================================ */

.sv-about-intro,
.sv-about-process,
.sv-capabilities {
    padding-top: var(--sv-section-space) !important;
    padding-bottom: var(--sv-section-space) !important;
}

.sv-about-cta {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 980px) {

    :root {
        --sv-section-space: 58px;
        --sv-page-pad: 24px;
    }

    .page-hero {
        min-height: 300px !important;
        padding: 58px 0 !important;
    }

    .page-hero h1 {
        font-size: clamp(38px,7vw,56px) !important;
    }

    .cards-4,
    .cards-3 {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

    :root {
        --sv-section-space: 44px;
        --sv-page-pad: 17px;
    }

    .page-hero {
        min-height: 260px !important;
        padding: 48px 0 !important;
    }

    .page-hero h1 {
        font-size: clamp(36px,11vw,48px) !important;
        line-height: 1.02 !important;
    }

    .page-hero p {
        margin-top: 17px !important;

        font-size: 14px !important;
    }

    .cards-3,
    .cards-4 {
        grid-template-columns: 1fr !important;
    }

    .card {
        min-height: 165px !important;
        padding: 22px !important;
    }

    .form-card,
    .calculator-card {
        padding: 22px 18px !important;
        border-radius: 15px !important;
    }

    .btn {
        width: 100% !important;
    }
}


/* ============================================================
   HOVERLESS / TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .card:hover,
    .product-category-card:hover,
    .btn:hover {
        transform: none !important;
    }
}


/* ============================================================
   SOLINVA — WIDER DESKTOP CONTENT SHELL
   ============================================================ */

:root {
    --sv-shell: 1440px;
    --home-shell: 1440px;
}

/* Large desktop gets comfortable side clearance */
@media (min-width: 1500px) {
    :root {
        --sv-page-pad: 34px;
        --home-pad: 34px;
    }
}

/* Laptop stays safely contained */
@media (max-width: 1499px) {
    :root {
        --sv-page-pad: 28px;
        --home-pad: 28px;
    }
}

/* Tablet */
@media (max-width: 980px) {
    :root {
        --sv-page-pad: 24px;
        --home-pad: 24px;
    }
}

/* Mobile */
@media (max-width: 620px) {
    :root {
        --sv-page-pad: 17px;
        --home-pad: 17px;
    }
}


/* ============================================================
   SOLINVA HOME — SERVICE CARD REAL IMAGES
   ============================================================ */

.sv-service-residential .sv-service-photo {
    background-image: url('/assets/images/services/service-residential-solar.png') !important;
}

.sv-service-commercial .sv-service-photo {
    background-image: url('/assets/images/services/service-commercial-solar.png') !important;
}

.sv-service-industrial .sv-service-photo {
    background-image: url('/assets/images/services/service-industrial-solar.png') !important;
}

.sv-service-ground .sv-service-photo {
    background-image: url('/assets/images/services/service-ground-mount-solar.png') !important;
}

.sv-service-card .sv-service-photo {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Premium clickable-card interaction */
.sv-service-card {
    overflow: hidden !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

.sv-service-card .sv-service-photo {
    transition:
        transform .35s ease,
        filter .35s ease !important;
}

.sv-service-card:hover {
    transform: translateY(-4px) !important;

    border-color: rgba(0, 133, 83, .30) !important;

    box-shadow: 0 14px 30px rgba(0, 62, 43, .13) !important;
}

.sv-service-card:hover .sv-service-photo {
    transform: scale(1.045) !important;
    filter: brightness(1.04) saturate(1.05) !important;
}

/* Keyboard navigation */
.sv-service-card:focus-visible {
    outline: 3px solid #f4b400 !important;
    outline-offset: 3px !important;
}

/* No movement on touch devices */
@media (hover: none) {
    .sv-service-card:hover {
        transform: none !important;
    }

    .sv-service-card:hover .sv-service-photo {
        transform: none !important;
    }
}


/* ============================================================
   SOLINVA — SERVICE CARD FINAL PHOTO / CONTENT PROPORTION
   ============================================================ */

@media (min-width: 981px) {

    .sv-service-card {
        min-height: 148px !important;
        height: 148px !important;

        display: grid !important;
        grid-template-columns: 44% 56% !important;
    }

    .sv-service-card .sv-service-photo {
        width: 100% !important;
        height: 100% !important;
        min-height: 148px !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    .sv-service-card .sv-service-content {
        width: 100% !important;
        height: 100% !important;

        padding: 18px 16px !important;

        display: grid !important;
        grid-template-columns: auto minmax(0,1fr) auto !important;
        align-items: center !important;
        gap: 11px !important;
    }

    .sv-service-content strong {
        display: block !important;
        margin-bottom: 6px !important;

        font-size: 15px !important;
        line-height: 1.18 !important;
    }

    .sv-service-content small {
        display: block !important;

        font-size: 11px !important;
        line-height: 1.45 !important;
    }
}


/* ============================================================
   SOLINVA — ORIGINAL INTRO VIDEO SECTION
   ============================================================ */

.sv-intro-video-section {
    position: relative !important;
    overflow: hidden !important;

    padding: clamp(68px, 6vw, 92px) 0 !important;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(244,180,0,.13),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #003c30 0%,
            #005743 58%,
            #00694c 100%
        ) !important;
}

.sv-intro-video-section > .container {
    width: min(
        calc(100% - 68px),
        1440px
    ) !important;

    max-width: 1440px !important;
    margin-inline: auto !important;
}

.sv-intro-video-grid {
    display: grid !important;
    grid-template-columns: minmax(0,.82fr) minmax(520px,1.18fr) !important;

    align-items: center !important;

    gap: clamp(44px,5vw,78px) !important;
}


/* COPY */

.sv-intro-video-copy {
    max-width: 570px !important;
}

.sv-intro-eyebrow {
    display: inline-block !important;

    margin-bottom: 18px !important;

    color: #f4b400 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .15em !important;
}

.sv-intro-video-copy h2 {
    margin: 0 !important;

    color: #fff !important;

    font-size: clamp(38px,4vw,60px) !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
}

.sv-intro-video-copy p {
    max-width: 540px !important;

    margin: 22px 0 0 !important;

    color: rgba(255,255,255,.78) !important;

    font-size: 15px !important;
    line-height: 1.72 !important;
}


/* VIDEO */

.sv-intro-video-media {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 20px !important;

    background: #001c16 !important;

    box-shadow:
        0 28px 65px rgba(0,20,15,.28) !important;
}

.sv-intro-video-media video {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    background: #001c16 !important;
}


/* BUTTONS */

.sv-intro-video-actions {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 12px !important;

    margin-top: 30px !important;
}

.sv-intro-primary,
.sv-intro-secondary {
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    padding: 0 20px !important;

    border-radius: 10px !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    transition:
        transform .22s ease,
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}

.sv-intro-primary {
    border: 1px solid #f4b400 !important;

    background: #f4b400 !important;
    color: #003d30 !important;
}

.sv-intro-secondary {
    border: 1px solid rgba(255,255,255,.45) !important;

    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.sv-intro-primary:hover {
    transform: translateY(-3px) !important;

    background: #fff !important;
    border-color: #fff !important;

    box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
}

.sv-intro-secondary:hover {
    transform: translateY(-3px) !important;

    background: #fff !important;
    border-color: #fff !important;
    color: #004333 !important;
}

.sv-intro-primary span,
.sv-intro-secondary span {
    transition: transform .2s ease !important;
}

.sv-intro-primary:hover span,
.sv-intro-secondary:hover span {
    transform: translateX(4px) !important;
}


/* TABLET */

@media (max-width: 980px) {

    .sv-intro-video-section > .container {
        width: min(calc(100% - 48px), 1440px) !important;
    }

    .sv-intro-video-grid {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .sv-intro-video-copy {
        max-width: 700px !important;
    }

    .sv-intro-video-media {
        max-width: 900px !important;
    }

    .sv-service-card {
        height: auto !important;
    }
}


/* MOBILE */

@media (max-width: 620px) {

    .sv-intro-video-section {
        padding: 52px 0 !important;
    }

    .sv-intro-video-section > .container {
        width: calc(100% - 34px) !important;
    }

    .sv-intro-video-grid {
        gap: 30px !important;
    }

    .sv-intro-video-copy h2 {
        font-size: 38px !important;
    }

    .sv-intro-video-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .sv-intro-primary,
    .sv-intro-secondary {
        width: 100% !important;
    }

    .sv-intro-video-media {
        border-radius: 14px !important;
    }
}


/* TOUCH */

@media (hover: none) {

    .sv-intro-primary:hover,
    .sv-intro-secondary:hover {
        transform: none !important;
    }
}


/* ============================================================
   SOLINVA INTRO VIDEO — COMPACT PREMIUM DESKTOP BALANCE
   ============================================================ */

@media (min-width: 981px) {

    .sv-intro-video-section {
        padding: 54px 0 !important;
    }

    .sv-intro-video-grid {
        grid-template-columns:
            minmax(360px, .88fr)
            minmax(0, 1.12fr) !important;

        gap: 58px !important;
    }

    .sv-intro-video-copy {
        max-width: 520px !important;
    }

    .sv-intro-video-copy h2 {
        font-size: clamp(42px, 3.4vw, 54px) !important;
        line-height: 1.02 !important;
    }

    .sv-intro-video-copy p {
        max-width: 500px !important;
        margin-top: 18px !important;
    }

    .sv-intro-video-actions {
        margin-top: 24px !important;
    }

    .sv-intro-video-media {
        width: 100% !important;
        max-width: 620px !important;

        justify-self: end !important;

        aspect-ratio: 16 / 9 !important;

        border-radius: 16px !important;
    }
}

/* Tablet keeps video centered */
@media (min-width: 621px) and (max-width: 980px) {

    .sv-intro-video-section {
        padding: 56px 0 !important;
    }

    .sv-intro-video-media {
        width: min(100%, 760px) !important;
        margin-inline: auto !important;
    }
}


/* ============================================================
   SOLINVA HOME SERVICE CARDS — PHOTO-FIRST FINAL LAYOUT
   Only affects the 4 cards directly below the hero
   ============================================================ */

@media (min-width: 981px) {

    .sv-service-strip .sv-service-grid {
        align-items: stretch !important;
    }

    .sv-service-strip .sv-service-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 150px auto !important;

        height: auto !important;
        min-height: 245px !important;

        overflow: hidden !important;

        border-radius: 14px !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        width: 100% !important;
        height: 150px !important;
        min-height: 150px !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .sv-service-strip .sv-service-card .sv-service-content {
        width: 100% !important;
        height: auto !important;
        min-height: 95px !important;

        padding: 15px 16px !important;

        display: grid !important;
        grid-template-columns: auto minmax(0,1fr) auto !important;
        align-items: center !important;
        gap: 11px !important;

        background: #ffffff !important;
    }

    .sv-service-strip .sv-service-content strong {
        display: block !important;

        margin: 0 0 5px !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .sv-service-strip .sv-service-content small {
        display: block !important;

        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    .sv-service-strip .sv-service-card:hover .sv-service-photo {
        transform: scale(1.035) !important;
    }
}


/* Tablet */
@media (min-width: 621px) and (max-width: 980px) {

    .sv-service-strip .sv-service-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 170px auto !important;

        height: auto !important;
        overflow: hidden !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        width: 100% !important;
        height: 170px !important;
        min-height: 170px !important;

        background-size: cover !important;
        background-position: center !important;
    }
}


/* Mobile */
@media (max-width: 620px) {

    .sv-service-strip .sv-service-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 190px auto !important;

        height: auto !important;
        overflow: hidden !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        width: 100% !important;
        height: 190px !important;
        min-height: 190px !important;

        background-size: cover !important;
        background-position: center !important;
    }
}


/* ============================================================
   SOLINVA HOME SERVICE CARDS — FINAL COMPACT HEIGHT
   Width and images remain unchanged
   ============================================================ */

@media (min-width: 981px) {

    .sv-service-strip .sv-service-card {
        grid-template-rows: 118px 78px !important;
        min-height: 196px !important;
        height: 196px !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        height: 118px !important;
        min-height: 118px !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    .sv-service-strip .sv-service-card .sv-service-content {
        height: 78px !important;
        min-height: 78px !important;

        padding: 11px 14px !important;
    }

    .sv-service-strip .sv-service-content strong {
        margin-bottom: 4px !important;

        font-size: 13px !important;
        line-height: 1.18 !important;
    }

    .sv-service-strip .sv-service-content small {
        font-size: 10px !important;
        line-height: 1.32 !important;
    }
}


/* ============================================================
   SOLINVA HOME SERVICE CARDS — FINAL PREMIUM PROPORTION
   Preserve original service images and 4-column desktop layout
   ============================================================ */

@media (min-width: 981px) {

    .sv-service-strip {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .sv-service-strip .sv-service-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .sv-service-strip .sv-service-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px 82px !important;

        height: 302px !important;
        min-height: 302px !important;

        overflow: hidden !important;
        border-radius: 15px !important;

        background: #ffffff !important;
        border: 1px solid rgba(0, 78, 60, .12) !important;

        box-shadow:
            0 10px 26px rgba(0, 45, 34, .07) !important;

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;

        transition: transform .4s ease !important;
    }

    /* Preserve the useful part of each original image */
    .sv-service-strip .sv-service-residential .sv-service-photo {
        background-position: center 48% !important;
    }

    .sv-service-strip .sv-service-commercial .sv-service-photo {
        background-position: center 52% !important;
    }

    .sv-service-strip .sv-service-industrial .sv-service-photo {
        background-position: center 52% !important;
    }

    .sv-service-strip .sv-service-ground .sv-service-photo {
        background-position: center 55% !important;
    }

    .sv-service-strip .sv-service-card .sv-service-content {
        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;

        padding: 12px 14px !important;

        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;

        background: #ffffff !important;
    }

    .sv-service-strip .sv-service-content strong {
        display: block !important;
        margin: 0 0 4px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .sv-service-strip .sv-service-content small {
        display: block !important;

        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .sv-service-strip .sv-service-card:hover {
        transform: translateY(-5px) !important;
        border-color: rgba(0, 143, 98, .28) !important;

        box-shadow:
            0 18px 38px rgba(0, 45, 34, .13) !important;
    }

    .sv-service-strip .sv-service-card:hover .sv-service-photo {
        transform: scale(1.025) !important;
    }
}


/* TABLET */
@media (min-width: 621px) and (max-width: 980px) {

    .sv-service-strip .sv-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .sv-service-strip .sv-service-card {
        grid-template-rows: 230px auto !important;
        height: auto !important;
        min-height: 315px !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        height: 230px !important;
        min-height: 230px !important;
        background-size: cover !important;
    }
}


/* MOBILE */
@media (max-width: 620px) {

    .sv-service-strip .sv-service-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .sv-service-strip .sv-service-card {
        grid-template-rows: minmax(240px, 62vw) auto !important;
        height: auto !important;
    }

    .sv-service-strip .sv-service-card .sv-service-photo {
        height: min(72vw, 330px) !important;
        min-height: 240px !important;
        background-size: cover !important;
    }
}


/* ============================================================
   SOLINVA TRUST BAR — PREMIUM HOVER
   No layout / height / width changes
   ============================================================ */

.sv-trust-bar .sv-trust-item {
    position: relative !important;
    cursor: default !important;

    border-radius: 10px !important;

    transition:
        background-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease !important;
}

/* Icon */
.sv-trust-bar .sv-trust-item > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition:
        color .24s ease,
        transform .24s ease,
        text-shadow .24s ease !important;
}

/* Text */
.sv-trust-bar .sv-trust-item strong,
.sv-trust-bar .sv-trust-item small {
    transition:
        color .24s ease,
        opacity .24s ease !important;
}


/* ---------- HOVER ---------- */

@media (hover: hover) {

    .sv-trust-bar .sv-trust-item:hover {
        background: rgba(255,255,255,.10) !important;

        transform: translateY(-2px) !important;

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.10),
            0 7px 18px rgba(0,30,22,.13) !important;
    }

    .sv-trust-bar .sv-trust-item:hover > span {
        color: #f4b400 !important;

        transform: scale(1.13) !important;

        text-shadow:
            0 0 14px rgba(244,180,0,.28) !important;
    }

    .sv-trust-bar .sv-trust-item:hover strong {
        color: #ffffff !important;
    }

    .sv-trust-bar .sv-trust-item:hover small {
        color: rgba(255,255,255,.94) !important;
        opacity: 1 !important;
    }
}


/* ============================================================
   SOLINVA PROJECT-READY SOLAR ENGINEERING
   Premium application cards
   Existing approved images only
   ============================================================ */

/* ---------- REAL PROJECT APPLICATION IMAGES ---------- */

.sv-project-residential .sv-project-photo {
    background-image:
        linear-gradient(180deg,rgba(0,35,27,.02) 35%,rgba(0,35,27,.30) 100%),
        url('/assets/images/services/service-residential-solar.png') !important;
    background-position: center 48% !important;
}

.sv-project-commercial .sv-project-photo {
    background-image:
        linear-gradient(180deg,rgba(0,35,27,.02) 35%,rgba(0,35,27,.30) 100%),
        url('/assets/images/services/service-commercial-solar.png') !important;
    background-position: center 50% !important;
}

.sv-project-industrial .sv-project-photo {
    background-image:
        linear-gradient(180deg,rgba(0,35,27,.02) 35%,rgba(0,35,27,.30) 100%),
        url('/assets/images/services/service-industrial-solar.png') !important;
    background-position: center 50% !important;
}

.sv-project-ground .sv-project-photo {
    background-image:
        linear-gradient(180deg,rgba(0,35,27,.02) 35%,rgba(0,35,27,.30) 100%),
        url('/assets/images/services/service-ground-mount-solar.png') !important;
    background-position: center 52% !important;
}


/* ---------- PREMIUM CARD ---------- */

.sv-projects-section .sv-project-card {
    border: 1px solid #dce8e2 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(3,55,41,.075) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}


/* ---------- PHOTO ---------- */

.sv-projects-section .sv-project-photo {
    position: relative !important;
    overflow: hidden !important;

    height: 205px !important;
    min-height: 205px !important;

    background-size: cover !important;

    transition:
        background-size .45s ease,
        filter .3s ease !important;
}


/* ---------- CATEGORY BADGE ---------- */

.sv-projects-section .sv-project-photo > span {
    left: 14px !important;
    bottom: 14px !important;

    padding: 7px 11px !important;

    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;

    background: rgba(0,126,78,.92) !important;

    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;

    box-shadow: 0 5px 15px rgba(0,35,27,.18) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transition:
        background-color .25s ease,
        transform .25s ease !important;
}


/* ---------- INFORMATION AREA ---------- */

.sv-projects-section .sv-project-info {
    min-height: 88px !important;
    padding: 15px 15px 14px !important;

    grid-template-columns: minmax(0,1fr) 36px !important;
    gap: 12px !important;
}

.sv-projects-section .sv-project-info h3 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.sv-projects-section .sv-project-info p {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
}


/* ---------- ROUND ARROW ---------- */

.sv-projects-section .sv-project-info > a {
    width: 34px !important;
    height: 34px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid #cfe0d8 !important;
    border-radius: 50% !important;

    background: #f7fbf9 !important;
    color: #007f4f !important;

    font-size: 17px !important;
    text-decoration: none !important;

    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease,
        transform .24s ease !important;
}


/* ---------- DESKTOP HOVER ---------- */

@media (hover: hover) {

    .sv-projects-section .sv-project-card:hover {
        transform: translateY(-6px) !important;

        border-color: rgba(0,127,79,.28) !important;

        box-shadow:
            0 20px 42px rgba(3,55,41,.14) !important;
    }

    .sv-projects-section .sv-project-card:hover .sv-project-photo {
        background-size: 106% !important;
        filter: saturate(1.04) contrast(1.02) !important;
    }

    .sv-projects-section .sv-project-card:hover .sv-project-photo > span {
        background: #006f46 !important;
        transform: translateY(-2px) !important;
    }

    .sv-projects-section .sv-project-card:hover .sv-project-info > a {
        background: #007f4f !important;
        border-color: #007f4f !important;
        color: #ffffff !important;

        transform: translateX(2px) !important;
    }
}


/* ---------- LAPTOP ---------- */

@media (max-width: 1280px) {

    .sv-projects-section .sv-project-photo {
        height: 190px !important;
        min-height: 190px !important;
    }
}


/* ---------- TABLET ---------- */

@media (max-width: 980px) {

    .sv-projects-section .sv-project-photo {
        height: 230px !important;
        min-height: 230px !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 640px) {

    .sv-projects-section .sv-project-photo {
        height: clamp(235px,68vw,330px) !important;
        min-height: 235px !important;
    }

    .sv-projects-section .sv-project-info {
        min-height: 86px !important;
    }
}


/* ============================================================
   SOLINVA PROJECT SOLUTIONS — PREMIUM MANUAL SLIDER
   Dynamic-card / CRM-CMS entry ready
   ============================================================ */

.sv-project-heading-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.sv-project-slider-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sv-project-slider-controls button {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;

    border: 1px solid #cfe0d8 !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    color: #006f46 !important;

    font: inherit !important;
    font-size: 24px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow: 0 5px 16px rgba(3,55,41,.07) !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        opacity .22s ease !important;
}

@media (hover: hover) {
    .sv-project-slider-controls button:not(:disabled):hover {
        background: #007f4f !important;
        border-color: #007f4f !important;
        color: #ffffff !important;

        transform: translateY(-2px) !important;

        box-shadow: 0 9px 20px rgba(0,95,59,.18) !important;
    }
}

.sv-project-slider-controls button:focus-visible {
    outline: 3px solid rgba(0,127,79,.18) !important;
    outline-offset: 3px !important;
}

.sv-project-slider-controls button:disabled {
    opacity: .34 !important;
    cursor: default !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ---------- SLIDER VIEWPORT ---------- */

.sv-project-slider-shell {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}


/* Desktop: 3 full cards + visible preview of next card */

.sv-projects-section .sv-project-track {
    display: flex !important;
    grid-template-columns: none !important;

    gap: 18px !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    padding: 5px 8.5% 22px 2px !important;

    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;

    -webkit-overflow-scrolling: touch !important;
}

.sv-projects-section .sv-project-track::-webkit-scrollbar {
    display: none !important;
}

.sv-projects-section .sv-project-card {
    flex: 0 0 calc((100% - 36px) / 3.18) !important;
    width: auto !important;
    min-width: 0 !important;

    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
}


/* ---------- PROGRESS INDICATOR ---------- */

.sv-project-slider-progress {
    position: relative !important;

    width: min(240px, 38%) !important;
    height: 3px !important;

    margin: 1px auto 0 !important;

    overflow: hidden !important;
    border-radius: 999px !important;

    background: #dce8e2 !important;
}

.sv-project-slider-progress > span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    height: 100% !important;

    border-radius: inherit !important;
    background: #007f4f !important;

    transform-origin: left center !important;

    transition:
        width .25s ease,
        transform .18s ease !important;
}


/* ---------- TABLET ---------- */

@media (max-width: 980px) {

    .sv-projects-section .sv-section-heading {
        align-items: flex-end !important;
    }

    .sv-project-heading-actions {
        gap: 10px !important;
    }

    .sv-projects-section .sv-project-track {
        gap: 16px !important;
        padding-right: 12% !important;
    }

    .sv-projects-section .sv-project-card {
        flex-basis: calc((100% - 16px) / 2.15) !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 640px) {

    .sv-projects-section .sv-section-heading {
        align-items: flex-start !important;
    }

    .sv-project-heading-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .sv-project-slider-controls button {
        width: 36px !important;
        height: 36px !important;
        font-size: 22px !important;
    }

    .sv-projects-section .sv-project-track {
        gap: 14px !important;

        padding-left: 1px !important;
        padding-right: 16% !important;
        padding-bottom: 20px !important;
    }

    .sv-projects-section .sv-project-card {
        flex-basis: 88% !important;
    }

    .sv-project-slider-progress {
        width: 44% !important;
    }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

    .sv-projects-section .sv-project-track {
        scroll-behavior: auto !important;
    }

    .sv-project-slider-controls button,
    .sv-project-slider-progress > span {
        transition: none !important;
    }
}


/* ============================================================
   SOLINVA PROJECT SLIDER — CLEAN PREVIEW FIX
   Desktop: 3 complete cards + intentional next-card preview
   ============================================================ */

@media (min-width: 981px) {

    .sv-project-slider-shell {
        overflow: hidden !important;
    }

    .sv-projects-section .sv-project-track {
        gap: 18px !important;

        /*
         * No artificial right padding.
         * Card width itself creates a controlled preview.
         */
        padding: 5px 0 22px 2px !important;
    }

    .sv-projects-section .sv-project-card {
        /*
         * ~3.35 cards in viewport:
         * 3 cards remain comfortably readable,
         * next card appears only as a deliberate visual preview.
         */
        flex: 0 0 calc((100% - 54px) / 3.35) !important;
    }

    /*
     * Keep text safely inside every card.
     */
    .sv-projects-section .sv-project-info {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sv-projects-section .sv-project-info > div {
        min-width: 0 !important;
    }

    .sv-projects-section .sv-project-info h3,
    .sv-projects-section .sv-project-info p {
        max-width: 100% !important;
    }
}


/* Tablet: 2 complete cards + intentional preview */

@media (min-width: 641px) and (max-width: 980px) {

    .sv-projects-section .sv-project-track {
        padding: 5px 0 20px 1px !important;
    }

    .sv-projects-section .sv-project-card {
        flex: 0 0 calc((100% - 32px) / 2.28) !important;
    }
}


/* Mobile: one readable card + small next preview */

@media (max-width: 640px) {

    .sv-projects-section .sv-project-track {
        padding: 5px 0 20px 1px !important;
    }

    .sv-projects-section .sv-project-card {
        flex: 0 0 86% !important;
    }
}


/* ============================================================
   SOLINVA PROJECT SLIDER — CLEAN PREVIEW FIX
   Desktop: 3 complete cards + intentional next-card preview
   ============================================================ */

@media (min-width: 981px) {

    .sv-project-slider-shell {
        overflow: hidden !important;
    }

    .sv-projects-section .sv-project-track {
        gap: 18px !important;

        /*
         * No artificial right padding.
         * Card width itself creates a controlled preview.
         */
        padding: 5px 0 22px 2px !important;
    }

    .sv-projects-section .sv-project-card {
        /*
         * ~3.35 cards in viewport:
         * 3 cards remain comfortably readable,
         * next card appears only as a deliberate visual preview.
         */
        flex: 0 0 calc((100% - 54px) / 3.35) !important;
    }

    /*
     * Keep text safely inside every card.
     */
    .sv-projects-section .sv-project-info {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sv-projects-section .sv-project-info > div {
        min-width: 0 !important;
    }

    .sv-projects-section .sv-project-info h3,
    .sv-projects-section .sv-project-info p {
        max-width: 100% !important;
    }
}


/* Tablet: 2 complete cards + intentional preview */

@media (min-width: 641px) and (max-width: 980px) {

    .sv-projects-section .sv-project-track {
        padding: 5px 0 20px 1px !important;
    }

    .sv-projects-section .sv-project-card {
        flex: 0 0 calc((100% - 32px) / 2.28) !important;
    }
}


/* Mobile: one readable card + small next preview */

@media (max-width: 640px) {

    .sv-projects-section .sv-project-track {
        padding: 5px 0 20px 1px !important;
    }

    .sv-projects-section .sv-project-card {
        flex: 0 0 86% !important;
    }
}


/* ============================================================
   SOLINVA SOLUTIONS / CAPABILITIES — LOCKED SEPARATE SECTION
   ============================================================ */

.sv-solutions-section {
    padding: 72px 0 68px;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 4%, rgba(245,185,32,.14), transparent 27%),
        linear-gradient(180deg,#f7fbf9 0%,#fff 100%);
}

.sv-solutions-section > .container {
    width: min(var(--home-shell,1340px),calc(100% - 40px));
    margin-inline: auto;
}

.sv-solutions-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:28px;
}

.sv-solutions-heading > div:first-child {
    max-width:780px;
}

.sv-solutions-heading h2 {
    margin:8px 0 10px;
    color:#063f31;
    font-size:clamp(30px,3vw,45px);
    line-height:1.05;
    letter-spacing:-.035em;
}

.sv-solutions-heading p {
    max-width:700px;
    margin:0;
    color:#62756e;
    font-size:15px;
    line-height:1.7;
}

.sv-solutions-arrows {
    display:flex;
    gap:9px;
    flex:none;
}

.sv-solutions-arrows button {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid #d5e5df;
    border-radius:50%;
    background:#fff;
    color:#007654;
    font-size:25px;
    cursor:pointer;
    transition:.2s ease;
}

.sv-solutions-arrows button:not(:disabled):hover {
    transform:translateY(-2px);
    background:#edf8f4;
    border-color:#008862;
}

.sv-solutions-arrows button:disabled {
    opacity:.35;
    cursor:default;
}

.sv-solutions-track {
    display:flex;
    gap:18px;
    overflow-x:auto;
    padding:4px 2px 23px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
}

.sv-solutions-track::-webkit-scrollbar {
    display:none;
}

.sv-solution-card {
    flex:0 0 calc((100% - 54px) / 3.35);
    min-width:0;
    overflow:hidden;
    scroll-snap-align:start;
    border:1px solid #dceae5;
    border-radius:22px;
    background:#fff;
    box-shadow:0 13px 36px rgba(0,65,47,.08);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.sv-solution-card:hover {
    transform:translateY(-5px);
    border-color:#b8d9cd;
    box-shadow:0 20px 46px rgba(0,65,47,.13);
}

.sv-solution-top {
    position:relative;
    height:200px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 18%,rgba(255,196,0,.28),transparent 26%),
        linear-gradient(135deg,#003d30,#00795a);
}

.sv-solution-top::before,
.sv-solution-top::after {
    content:"";
    position:absolute;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}

.sv-solution-top::before {
    width:210px;
    height:210px;
    right:-85px;
    bottom:-115px;
}

.sv-solution-top::after {
    width:125px;
    height:125px;
    left:-55px;
    top:-55px;
}

.sv-solution-index {
    position:absolute;
    z-index:2;
    top:17px;
    left:18px;
    color:rgba(255,255,255,.6);
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
}

.sv-solution-top > strong {
    position:relative;
    z-index:2;
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:36px;
    box-shadow:inset 0 1px rgba(255,255,255,.18);
    backdrop-filter:blur(6px);
}

.sv-flow {
    position:absolute;
    z-index:2;
    left:15px;
    right:15px;
    bottom:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#fff;
    font-size:9px;
    font-weight:800;
}

.sv-flow span {
    padding:5px 7px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    background:rgba(0,0,0,.12);
}

.sv-battery-bars,
.sv-smart-bars,
.sv-carport-panels {
    position:absolute;
    z-index:2;
    right:18px;
    bottom:17px;
    display:flex;
    align-items:flex-end;
    gap:5px;
}

.sv-battery-bars i,
.sv-smart-bars i {
    display:block;
    width:7px;
    border-radius:5px;
    background:rgba(255,255,255,.7);
}

.sv-battery-bars i:nth-child(1){height:12px}
.sv-battery-bars i:nth-child(2){height:20px}
.sv-battery-bars i:nth-child(3){height:28px}
.sv-battery-bars i:nth-child(4){height:36px;background:#ffc400}

.sv-smart-bars i:nth-child(1){height:17px}
.sv-smart-bars i:nth-child(2){height:31px;background:#ffc400}
.sv-smart-bars i:nth-child(3){height:23px}

.sv-carport-panels i {
    display:block;
    width:31px;
    height:21px;
    transform:skewX(-15deg);
    border:1px solid rgba(255,255,255,.38);
    background:rgba(255,255,255,.12);
}

.sv-ev-line {
    position:absolute;
    z-index:2;
    right:18px;
    bottom:25px;
    width:68px;
    height:3px;
    border-radius:5px;
    background:linear-gradient(90deg,#ffc400,rgba(255,255,255,.65));
}

.sv-care-ring {
    position:absolute;
    z-index:2;
    right:19px;
    bottom:18px;
    width:40px;
    height:40px;
    border:5px solid rgba(255,255,255,.24);
    border-top-color:#ffc400;
    border-radius:50%;
}

.sv-solution-content {
    padding:21px 21px 23px;
}

.sv-solution-content > span {
    display:block;
    margin-bottom:8px;
    color:#00845f;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.sv-solution-content h3 {
    margin:0 0 9px;
    color:#073f32;
    font-size:20px;
    line-height:1.2;
}

.sv-solution-content p {
    min-height:72px;
    margin:0 0 17px;
    color:#63766f;
    font-size:13px;
    line-height:1.62;
}

.sv-solution-content a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#007c59;
    font-size:12px;
    font-weight:850;
    text-decoration:none;
}

.sv-solution-content a b {
    transition:transform .2s ease;
}

.sv-solution-content a:hover b {
    transform:translateX(4px);
}

.sv-solutions-progress {
    width:170px;
    height:3px;
    margin:2px auto 0;
    overflow:hidden;
    border-radius:10px;
    background:#dce9e4;
}

.sv-solutions-progress span {
    display:block;
    width:25%;
    height:100%;
    border-radius:inherit;
    background:#00845f;
    transition:width .2s ease,transform .2s ease;
}

@media(max-width:980px) {
    .sv-solution-card {
        flex-basis:calc((100% - 18px) / 2.28);
    }
}

@media(max-width:700px) {
    .sv-solutions-section {
        padding:50px 0;
    }

    .sv-solutions-section > .container {
        width:min(calc(100% - 28px),var(--home-shell,1340px));
    }

    .sv-solutions-heading {
        align-items:flex-start;
        gap:16px;
    }

    .sv-solutions-heading h2 {
        font-size:30px;
    }

    .sv-solutions-heading p {
        font-size:14px;
    }

    .sv-solutions-arrows button {
        width:40px;
        height:40px;
    }

    .sv-solution-card {
        flex-basis:86%;
    }

    .sv-solution-top {
        height:190px;
    }
}


/* ============================================================
   SOLINVA SOLUTIONS — REAL IMAGE VISUALS
   Keeps existing cards, content and slider behaviour unchanged.
   ============================================================ */

.sv-solutions-section .sv-solution-top.sv-solution-photo {
    background-color: #064b3a;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.sv-solutions-section .sv-solution-top.sv-solution-photo::before {
    width: auto;
    height: auto;
    inset: 0;
    right: 0;
    bottom: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            180deg,
            rgba(1, 39, 30, .03) 35%,
            rgba(1, 39, 30, .48) 100%
        );
    pointer-events: none;
}

.sv-solutions-section .sv-solution-top.sv-solution-photo::after {
    display: none;
}

.sv-solutions-section .sv-solution-photo > strong,
.sv-solutions-section .sv-solution-photo .sv-flow,
.sv-solutions-section .sv-solution-photo .sv-battery-bars,
.sv-solutions-section .sv-solution-photo .sv-ev-line,
.sv-solutions-section .sv-solution-photo .sv-carport-panels,
.sv-solutions-section .sv-solution-photo .sv-smart-bars,
.sv-solutions-section .sv-solution-photo .sv-care-ring {
    display: none;
}

.sv-solutions-section .sv-solution-photo .sv-solution-index {
    top: 14px;
    left: 14px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    background: rgba(0,55,42,.66);
    color: #fff;
    line-height: 1;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}


/* SOLINVA Solutions — hide card number badge */
.sv-solutions-section .sv-solution-index {
    display: none !important;
}


/* ============================================================
   SOLINVA — SOLAR COMBO SELECTOR
   ============================================================ */

.sv-combo-section {
    padding: 78px 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(247,184,0,.11), transparent 27%),
        linear-gradient(135deg, #f7fbf9 0%, #ffffff 54%, #fffaf0 100%);
    border-top: 1px solid #e4eee9;
    border-bottom: 1px solid #e4eee9;
}

.sv-combo-container {
    max-width: var(--home-shell, 1340px);
}

.sv-combo-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 34px;
}

.sv-combo-heading > div {
    max-width: 790px;
}

.sv-combo-kicker,
.sv-combo-result-label,
.sv-combo-custom span {
    display: block;
    color: #efaa00;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.sv-combo-heading h2 {
    max-width: 760px;
    margin: 8px 0 10px;
    color: #073f34;
    font-size: clamp(34px, 3.3vw, 52px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.sv-combo-heading p {
    max-width: 720px;
    margin: 0;
    color: #60736d;
    font-size: 15px;
    line-height: 1.7;
}

.sv-combo-heading-link {
    flex: 0 0 auto;
    color: #087b59;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sv-combo-heading-link:hover {
    color: #045a42;
}

.sv-combo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, .72fr);
    gap: 22px;
    align-items: stretch;
}

.sv-combo-builder,
.sv-combo-result {
    border: 1px solid #dce9e4;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 50px rgba(8,72,55,.07);
}

.sv-combo-builder {
    padding: 30px;
}

.sv-combo-step + .sv-combo-step {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid #e6efeb;
}

.sv-combo-step-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
}

.sv-combo-step-heading > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #087b59;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.sv-combo-step-heading strong {
    display: block;
    color: #073f34;
    font-size: 17px;
}

.sv-combo-step-heading small {
    display: block;
    margin-top: 2px;
    color: #74847f;
    font-size: 12px;
}

.sv-combo-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.sv-combo-option {
    min-width: 68px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #d8e6e1;
    border-radius: 12px;
    background: #fff;
    color: #174d40;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.sv-combo-brands .sv-combo-option {
    min-width: 112px;
}

.sv-combo-option:hover {
    transform: translateY(-2px);
    border-color: #72ad9a;
    box-shadow: 0 8px 18px rgba(8,123,89,.10);
}

.sv-combo-option.is-active {
    border-color: #087b59;
    background: #087b59;
    color: #fff;
    box-shadow: 0 8px 20px rgba(8,123,89,.20);
}

.sv-combo-option:focus-visible,
.sv-combo-primary:focus-visible,
.sv-combo-secondary:focus-visible,
.sv-combo-custom a:focus-visible {
    outline: 3px solid rgba(239,170,0,.45);
    outline-offset: 3px;
}

.sv-combo-result {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background:
        radial-gradient(circle at 90% 0%, rgba(247,184,0,.19), transparent 30%),
        linear-gradient(155deg, #063f34 0%, #075b46 100%);
    color: #fff;
}

.sv-combo-result::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -85px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.sv-combo-result-label {
    position: relative;
    z-index: 1;
}

.sv-combo-capacity {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 14px 0 0;
}

.sv-combo-capacity strong {
    font-size: clamp(52px, 5vw, 76px);
    line-height: .95;
    letter-spacing: -.055em;
}

.sv-combo-capacity span {
    color: #ffd04b;
    font-size: 21px;
    font-weight: 900;
}

.sv-combo-equation {
    position: relative;
    z-index: 1;
    margin: 11px 0 25px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
}

.sv-combo-summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,.15);
    border-left: 1px solid rgba(255,255,255,.15);
}

.sv-combo-summary > div {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.sv-combo-summary span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,.64);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.sv-combo-summary strong {
    color: #fff;
    font-size: 14px;
}

.sv-combo-system-note {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.07);
}

.sv-combo-system-note strong {
    display: block;
    margin-bottom: 5px;
    color: #ffd04b;
    font-size: 13px;
}

.sv-combo-system-note p {
    margin: 0;
    color: rgba(255,255,255,.77);
    font-size: 12px;
    line-height: 1.6;
}

.sv-combo-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.sv-combo-primary,
.sv-combo-secondary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sv-combo-primary {
    background: #f4b900;
    color: #073f34;
}

.sv-combo-secondary {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sv-combo-primary:hover,
.sv-combo-secondary:hover {
    transform: translateY(-2px);
}

.sv-combo-primary:hover {
    box-shadow: 0 10px 24px rgba(244,185,0,.20);
}

.sv-combo-disclaimer {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 15px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    line-height: 1.5;
}

.sv-combo-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    padding: 22px 26px;
    border: 1px solid #dce9e4;
    border-radius: 18px;
    background: #fff;
}

.sv-combo-custom strong {
    display: block;
    margin-top: 4px;
    color: #073f34;
    font-size: 19px;
}

.sv-combo-custom p {
    max-width: 780px;
    margin: 5px 0 0;
    color: #697a75;
    font-size: 12px;
    line-height: 1.55;
}

.sv-combo-custom a {
    flex: 0 0 auto;
    padding: 12px 17px;
    border-radius: 11px;
    background: #087b59;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 980px) {
    .sv-combo-section {
        padding: 58px 0;
    }

    .sv-combo-heading {
        display: block;
    }

    .sv-combo-heading-link {
        display: inline-block;
        margin-top: 17px;
    }

    .sv-combo-layout {
        grid-template-columns: 1fr;
    }

    .sv-combo-result {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .sv-combo-section {
        padding: 44px 0;
    }

    .sv-combo-heading {
        margin-bottom: 24px;
    }

    .sv-combo-heading h2 {
        font-size: 32px;
    }

    .sv-combo-builder,
    .sv-combo-result {
        padding: 20px;
        border-radius: 18px;
    }

    .sv-combo-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .sv-combo-brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-combo-option,
    .sv-combo-brands .sv-combo-option {
        width: 100%;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .sv-combo-summary {
        grid-template-columns: 1fr;
    }

    .sv-combo-custom {
        display: block;
        padding: 20px;
    }

    .sv-combo-custom a {
        display: inline-flex;
        margin-top: 15px;
    }
}


/* ============================================================
   SOLINVA — SMART SOLAR SIZING + SOLAR COMBO
   ============================================================ */

.sv-smart-sizing {
    padding: 78px 0;
    background:
        radial-gradient(circle at 90% 8%, rgba(244,185,0,.12), transparent 25%),
        linear-gradient(135deg, #f5faf8 0%, #ffffff 56%, #fffaf0 100%);
    border-top: 1px solid #e2ece8;
    border-bottom: 1px solid #e2ece8;
}

.sv-smart-sizing-container {
    max-width: var(--home-shell, 1340px);
}

.sv-smart-sizing-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 34px;
}

.sv-smart-sizing-heading > div {
    max-width: 790px;
}

.sv-smart-sizing-kicker,
.sv-sizing-result-kicker,
.sv-sizing-recommendation > span,
.sv-sizing-larger > div > span {
    display: block;
    color: #efa900;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
}

.sv-smart-sizing-heading h2 {
    max-width: 780px;
    margin: 8px 0 10px;
    color: #073f34;
    font-size: clamp(34px, 3.3vw, 52px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.sv-smart-sizing-heading p {
    max-width: 730px;
    margin: 0;
    color: #61746e;
    font-size: 15px;
    line-height: 1.7;
}

.sv-smart-sizing-heading-link {
    flex: 0 0 auto;
    color: #087b59;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.sv-smart-sizing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(360px, .76fr);
    gap: 22px;
    align-items: stretch;
}

.sv-smart-sizing-builder,
.sv-sizing-result {
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(8,72,55,.07);
}

.sv-smart-sizing-builder {
    padding: 30px;
    border: 1px solid #dce9e4;
    background: rgba(255,255,255,.96);
}

.sv-sizing-block + .sv-sizing-block {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid #e5eeea;
}

.sv-sizing-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.sv-sizing-title > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #087b59;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.sv-sizing-title strong {
    display: block;
    color: #073f34;
    font-size: 17px;
}

.sv-sizing-title small {
    display: block;
    margin-top: 2px;
    color: #74857f;
    font-size: 12px;
}

.sv-sizing-mode,
.sv-sizing-period,
.sv-sizing-future-options,
.sv-sizing-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.sv-sizing-mode {
    margin-bottom: 17px;
}

.sv-sizing-mode button,
.sv-sizing-period button,
.sv-sizing-future-options button,
.sv-sizing-options button {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #d7e5e0;
    border-radius: 11px;
    background: #fff;
    color: #174d40;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.sv-sizing-mode button:hover,
.sv-sizing-period button:hover,
.sv-sizing-future-options button:hover,
.sv-sizing-options button:hover {
    transform: translateY(-2px);
    border-color: #77ad9c;
}

.sv-sizing-mode button.is-active,
.sv-sizing-period button.is-active,
.sv-sizing-future-options button.is-active,
.sv-sizing-options button.is-active {
    border-color: #087b59;
    background: #087b59;
    color: #fff;
    box-shadow: 0 8px 20px rgba(8,123,89,.18);
}

.sv-sizing-options button.is-recommended:not(.is-active) {
    border-color: #e9ad00;
    background: #fff8dd;
    color: #735500;
    box-shadow: inset 0 0 0 1px rgba(233,173,0,.12);
}

.sv-sizing-options button.is-recommended:not(.is-active)::after {
    content: "★";
    margin-left: 5px;
    color: #d99d00;
    font-size: 9px;
}

.sv-sizing-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    gap: 16px;
}

.sv-sizing-field > span,
.sv-sizing-option-label {
    display: block;
    margin-bottom: 8px;
    color: #4e665f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sv-sizing-input-wrap {
    display: flex;
    min-height: 48px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d4e3de;
    border-radius: 12px;
    background: #fff;
}

.sv-sizing-input-wrap:focus-within {
    border-color: #087b59;
    box-shadow: 0 0 0 3px rgba(8,123,89,.09);
}

.sv-sizing-input-wrap input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #073f34;
    font: inherit;
    font-size: 17px;
    font-weight: 900;
}

.sv-sizing-input-wrap b {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #f2f7f5;
    color: #537068;
    font-size: 12px;
}

.sv-sizing-bill-note {
    margin-top: 13px;
    padding: 12px 14px;
    border: 1px solid #f0d891;
    border-radius: 11px;
    background: #fff9e8;
    color: #735f20;
    font-size: 11px;
    line-height: 1.55;
}

.sv-sizing-option-group + .sv-sizing-option-group {
    margin-top: 20px;
}

.sv-sizing-brands button {
    min-width: 105px;
}

.sv-sizing-quantities button {
    min-width: 48px;
}

.sv-sizing-option-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.sv-sizing-option-heading small {
    color: #7a8985;
    font-size: 10px;
}

.sv-sizing-result {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background:
        radial-gradient(circle at 100% 0%, rgba(244,185,0,.18), transparent 27%),
        linear-gradient(155deg, #063f34 0%, #075d48 100%);
    color: #fff;
}

.sv-sizing-result::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    pointer-events: none;
}

.sv-sizing-result > * {
    position: relative;
    z-index: 1;
}

.sv-sizing-result-main {
    margin-top: 16px;
}

.sv-sizing-result-main > span {
    color: rgba(255,255,255,.65);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.sv-sizing-result-main > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.sv-sizing-result-main > div strong {
    font-size: clamp(54px, 5vw, 76px);
    line-height: .95;
    letter-spacing: -.055em;
}

.sv-sizing-result-main > div b {
    color: #ffd14d;
    font-size: 20px;
}

.sv-sizing-result-main > small {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
}

.sv-sizing-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 23px;
    border-top: 1px solid rgba(255,255,255,.14);
    border-left: 1px solid rgba(255,255,255,.14);
}

.sv-sizing-metrics > div {
    padding: 13px;
    border-right: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.sv-sizing-metrics > div > span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.58);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sv-sizing-metrics strong {
    display: block;
    color: #fff;
    font-size: 17px;
}

.sv-sizing-metrics strong small {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.60);
    font-size: 9px;
    font-weight: 600;
}

.sv-sizing-metrics i {
    font-style: normal;
}

.sv-sizing-recommendation {
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(255,209,77,.30);
    border-radius: 14px;
    background: rgba(255,209,77,.08);
}

.sv-sizing-recommendation strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 17px;
}

.sv-sizing-recommendation p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 10px;
    line-height: 1.5;
}

.sv-sizing-comparison {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.sv-sizing-comparison-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.sv-sizing-comparison-heading strong {
    font-size: 13px;
}

.sv-sizing-comparison-heading span {
    color: #ffd14d;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.sv-sizing-compare-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sv-sizing-compare-row span {
    color: rgba(255,255,255,.64);
    font-size: 11px;
}

.sv-sizing-compare-row strong {
    text-align: right;
    font-size: 11px;
}

.sv-sizing-coverage {
    margin-top: 14px;
}

.sv-sizing-coverage > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sv-sizing-coverage span {
    color: rgba(255,255,255,.70);
    font-size: 11px;
}

.sv-sizing-coverage strong {
    color: #ffd14d;
    font-size: 18px;
}

.sv-sizing-coverage-bar {
    height: 7px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.sv-sizing-coverage-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #f4b900;
    transition: width .3s ease;
}

.sv-sizing-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 11px;
    background: rgba(255,255,255,.07);
}

.sv-sizing-selection span {
    color: rgba(255,255,255,.63);
    font-size: 10px;
}

.sv-sizing-selection strong {
    color: #fff;
    font-size: 13px;
}

.sv-sizing-planning-note {
    margin-top: 16px;
}

.sv-sizing-planning-note strong {
    color: #ffd14d;
    font-size: 11px;
}

.sv-sizing-planning-note p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.56);
    font-size: 9px;
    line-height: 1.55;
}

.sv-sizing-actions {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.sv-sizing-primary,
.sv-sizing-secondary {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sv-sizing-primary {
    background: #f4b900;
    color: #073f34;
}

.sv-sizing-secondary {
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.07);
    color: #fff;
}

.sv-sizing-primary:hover,
.sv-sizing-secondary:hover {
    transform: translateY(-2px);
}

.sv-sizing-larger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    padding: 22px 26px;
    border: 1px solid #dce9e4;
    border-radius: 18px;
    background: #fff;
}

.sv-sizing-larger strong {
    display: block;
    margin-top: 4px;
    color: #073f34;
    font-size: 19px;
}

.sv-sizing-larger p {
    max-width: 790px;
    margin: 5px 0 0;
    color: #697b75;
    font-size: 12px;
    line-height: 1.55;
}

.sv-sizing-larger a {
    flex: 0 0 auto;
    padding: 12px 17px;
    border-radius: 11px;
    background: #087b59;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.sv-sizing-mode button:focus-visible,
.sv-sizing-period button:focus-visible,
.sv-sizing-future-options button:focus-visible,
.sv-sizing-options button:focus-visible,
.sv-sizing-primary:focus-visible,
.sv-sizing-secondary:focus-visible,
.sv-sizing-larger a:focus-visible {
    outline: 3px solid rgba(244,185,0,.45);
    outline-offset: 3px;
}

@media (max-width: 980px) {
    .sv-smart-sizing {
        padding: 58px 0;
    }

    .sv-smart-sizing-heading {
        display: block;
    }

    .sv-smart-sizing-heading-link {
        display: inline-block;
        margin-top: 17px;
    }

    .sv-smart-sizing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sv-smart-sizing {
        padding: 44px 0;
    }

    .sv-smart-sizing-heading h2 {
        font-size: 32px;
    }

    .sv-smart-sizing-builder,
    .sv-sizing-result {
        padding: 20px;
        border-radius: 18px;
    }

    .sv-sizing-input-row {
        grid-template-columns: 1fr;
    }

    .sv-sizing-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .sv-sizing-brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-sizing-options button {
        width: 100%;
        min-width: 0;
        padding-left: 7px;
        padding-right: 7px;
    }

    .sv-sizing-metrics {
        grid-template-columns: 1fr;
    }

    .sv-sizing-option-heading {
        display: block;
    }

    .sv-sizing-option-heading small {
        display: block;
        margin: -2px 0 9px;
    }

    .sv-sizing-larger {
        display: block;
        padding: 20px;
    }

    .sv-sizing-larger a {
        display: inline-flex;
        margin-top: 15px;
    }
}


/* SOLAR COMBO — FINAL HEADING ALIGNMENT WITHOUT STEP NUMBERS */
.sv-combo-section .sv-combo-step-heading {
    gap: 0;
}

.sv-combo-section .sv-combo-step-heading > span {
    display: none !important;
}


/* ============================================================
   SOLINVA HOME — COMPACT PREMIUM HERO FINAL OVERRIDE
   Reference-layout refinement — 2026-10-17
   ============================================================ */

@media (min-width: 981px) {

    /* Keep hero content compact and vertically balanced */
    .sv-home-hero .sv-hero-copy {
        transform: translateY(34px) !important;
    }

    /* Right benefit stack: compact, less obstruction */
    .sv-home-hero .sv-benefits {
        transform: translateY(34px) !important;
        gap: 6px !important;
        width: 250px !important;
        max-width: 250px !important;
    }

    .sv-home-hero .sv-benefits .sv-benefit {
        min-height: 48px !important;
        padding: 7px 10px !important;
        gap: 10px !important;
        border-radius: 13px !important;

        background: rgba(255,255,255,.78) !important;
        border: 1px solid rgba(255,255,255,.82) !important;

        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;

        box-shadow: 0 5px 16px rgba(0,45,34,.10) !important;
    }

    .sv-home-hero .sv-benefits .sv-benefit-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 15px !important;
    }

    .sv-home-hero .sv-benefits .sv-benefit strong {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    .sv-home-hero .sv-benefits .sv-benefit small {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }
}

/* Hero navigation stays independent */
.sv-home-hero .sv-slider-dots {
    left: 50% !important;
    right: auto !important;
    bottom: 13px !important;
    transform: translateX(-50%) !important;
}

/* Tablet/mobile must retain their responsive layout */
@media (max-width: 980px) {
    .sv-home-hero .sv-hero-copy,
    .sv-home-hero .sv-benefits {
        transform: none !important;
    }

    .sv-home-hero .sv-benefits {
        width: auto !important;
        max-width: none !important;
    }
}