/* Wall-GapS Savings Estimator wizard.
   Brand colours come from css/style.css; the fallbacks keep this file usable
   if it is ever loaded on its own. */.wgs{
    --wgs-green: var(--primary-green, #128241);
    --wgs-green-bright: var(--secondary-green, #20db6e);
    --wgs-green-dark: var(--dark-green, #023718);
    --wgs-ink: var(--text-primary, #353736);
    --wgs-muted: #6b7280;
    --wgs-line: #e2e8ec;
    --wgs-card: #ffffff;
    --wgs-radius: 18px;

    padding: 130px 0 90px;
    font-family: 'Lufga Regular', Calibri, sans-serif;
    color: var(--wgs-ink);
}.wgs__shell{
    max-width: 860px;
    margin: 0 auto;
    padding: 0 18px;
}/* Intro */.wgs__intro{
    text-align: center;
    margin-bottom: 34px;
}.wgs__headline{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: clamp(28px, 4.4vw, 42px);
    line-height: 1.15;
    color: var(--wgs-green-dark);
    margin: 0 0 12px;
}.wgs__lead{
    font-size: 17px;
    line-height: 1.6;
    color: var(--wgs-muted);
    max-width: 620px;
    margin: 0 auto;
}/* Progress */.wgs__progress{
    position: sticky;
    top: 92px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--wgs-line);
    border-radius: 999px;
    padding: 12px 20px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(2, 55, 24, 0.06);
}.wgs__progress-label{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    color: var(--wgs-green-dark);
}.wgs__progress-track{
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: #e8efeb;
    overflow: hidden;
}.wgs__progress-bar{
    display: block;
    height: 100%;
    width: 20%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wgs-green) 0%, var(--wgs-green-bright) 100%);
    transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}/* Step cards */.wgs__step{
    background: var(--wgs-card);
    border: 1px solid var(--wgs-line);
    border-radius: var(--wgs-radius);
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(2, 55, 24, 0.05);
    transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    scroll-margin-top: 170px;
}.wgs__step.is-active{
    border-color: rgba(18, 130, 65, 0.45);
    box-shadow: 0 16px 40px rgba(2, 55, 24, 0.1);
}.wgs__step.is-locked{
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.35);
}.wgs__step-head{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
}.wgs__step-number{
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 15px;
    background: #eef4f0;
    color: var(--wgs-muted);
    transition: background 0.3s ease, color 0.3s ease;
}.wgs__step.is-active .wgs__step-number{
    background: linear-gradient(135deg, var(--wgs-green) 0%, var(--wgs-green-bright) 100%);
    color: #ffffff;
}.wgs__step.is-complete .wgs__step-number{
    background: var(--wgs-green-dark);
    color: #ffffff;
}.wgs__step-titles{
    flex: 1;
    min-width: 0;
}.wgs__step-title{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 18px;
    margin: 0;
    color: var(--wgs-green-dark);
}.wgs__step-help{
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--wgs-muted);
}.wgs__summary{
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--wgs-green);
    font-family: 'Lufga Medium', Calibri, sans-serif;
}.wgs__edit{
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--wgs-line);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    color: var(--wgs-green);
    cursor: pointer;
    font-family: 'Lufga Medium', Calibri, sans-serif;
}.wgs__edit:hover{
    border-color: var(--wgs-green);
    background: #f2f9f5;
}.wgs__step-body{
    padding: 0 24px 24px;
}.wgs__step.is-complete .wgs__step-body,
.wgs__step.is-complete .wgs__step-help{
    display: none;
}.wgs__step:not(.is-complete) .wgs__summary{
    display: none;
}/* Fields */.wgs__field{
    margin-bottom: 18px;
}.wgs__field:last-child{
    margin-bottom: 0;
}.wgs__label{
    display: block;
    font-family: 'Lufga Medium', Calibri, sans-serif;
    font-size: 14px;
    margin-bottom: 7px;
    color: var(--wgs-green-dark);
}.wgs__hint{
    font-size: 13px;
    color: var(--wgs-muted);
    margin: 6px 0 0;
}.wgs__input,
.wgs__select{
    width: 100%;
    border: 1px solid var(--wgs-line);
    border-radius: 11px;
    padding: 13px 15px;
    font-size: 15px;
    font-family: inherit;
    color: var(--wgs-ink);
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}.wgs__input:focus,
.wgs__select:focus{
    outline: none;
    border-color: var(--wgs-green);
    box-shadow: 0 0 0 3px rgba(32, 219, 110, 0.18);
}.wgs__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}/* Option cards, used for radios */.wgs__options{
    display: grid;
    gap: 10px;
}.wgs__options--tiles{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}.wgs__option{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--wgs-line);
    border-radius: 13px;
    padding: 15px 17px;
    cursor: pointer;
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}.wgs__option:hover{
    border-color: rgba(18, 130, 65, 0.5);
    background: #f8fcfa;
}.wgs__option input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}.wgs__option-dot{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid #cbd5d0;
    position: relative;
    transition: border-color 0.2s ease;
}.wgs__option-dot::after{
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--wgs-green);
    transform: scale(0);
    transition: transform 0.18s ease;
}.wgs__option input:checked ~ .wgs__option-dot{
    border-color: var(--wgs-green);
}.wgs__option input:checked ~ .wgs__option-dot::after{
    transform: scale(1);
}.wgs__option:has(input:checked){
    border-color: var(--wgs-green);
    background: #f1f9f4;
    box-shadow: 0 0 0 1px rgba(18, 130, 65, 0.25);
}.wgs__option:has(input:focus-visible){
    box-shadow: 0 0 0 3px rgba(32, 219, 110, 0.3);
}.wgs__option-text{
    font-size: 15px;
    line-height: 1.45;
}.wgs__option-note{
    display: block;
    font-size: 13px;
    color: var(--wgs-muted);
    margin-top: 3px;
}/* Slider */.wgs__slider-row{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}.wgs__range{
    flex: 1 1 260px;
    min-width: 200px;
    accent-color: var(--wgs-green);
    height: 26px;
}.wgs__range:focus-visible{
    outline: 2px solid var(--wgs-green);
    outline-offset: 4px;
}.wgs__range-value{
    flex: 0 0 148px;
    display: flex;
    align-items: center;
    gap: 8px;
}.wgs__range-value .wgs__input{
    text-align: right;
}.wgs__unit{
    font-size: 14px;
    color: var(--wgs-muted);
    white-space: nowrap;
}/* Collapsible defaults block */.wgs__defaults{
    border: 1px dashed var(--wgs-line);
    border-radius: 13px;
    padding: 15px 17px;
    margin-top: 18px;
    background: #fbfdfc;
}.wgs__defaults-title{
    font-size: 13px;
    color: var(--wgs-muted);
    margin: 0 0 12px;
    font-family: 'Lufga Medium', Calibri, sans-serif;
}.wgs__defaults .wgs__input{
    padding: 10px 13px;
    font-size: 14px;
}/* Buttons */.wgs__actions{
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}.wgs__btn{
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 15px;
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    cursor: pointer;
    background: linear-gradient(135deg, var(--wgs-green) 0%, var(--wgs-green-bright) 100%);
    color: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 8px 20px rgba(18, 130, 65, 0.25);
}.wgs__btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(18, 130, 65, 0.32);
}.wgs__btn:focus-visible{
    outline: 3px solid rgba(32, 219, 110, 0.5);
    outline-offset: 3px;
}.wgs__btn[disabled]{
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}.wgs__btn--submit{
    padding: 16px 40px;
    font-size: 16px;
}/* Messages */.wgs__error{
    display: none;
    margin-top: 7px;
    font-size: 13px;
    color: #c0392b;
}.wgs__error.is-shown{
    display: block;
}.wgs__input.is-invalid,
.wgs__select.is-invalid{
    border-color: #c0392b;
}.wgs__alert{
    border-radius: 13px;
    padding: 15px 18px;
    margin-bottom: 22px;
    font-size: 14.5px;
    line-height: 1.6;
}.wgs__alert--error{
    background: #fdeceb;
    border: 1px solid #f3c2be;
    color: #a33027;
}/* Consent */.wgs__check{
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.55;
    cursor: pointer;
    margin-bottom: 12px;
}.wgs__check input{
    width: 19px;
    height: 19px;
    margin-top: 2px;
    accent-color: var(--wgs-green);
    flex: 0 0 auto;
}.wgs__check input:focus-visible{
    outline: 2px solid var(--wgs-green);
    outline-offset: 2px;
}/* Honeypot. Kept off screen rather than hidden, so bots still find it. */.wgs__trap{
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}/* Promotional slot */.wgs__promo{
    border-radius: var(--wgs-radius);
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--wgs-line);
    background: #ffffff;
}.wgs__promo img{
    display: block;
    width: 100%;
    height: auto;
}.wgs__promo-body{
    padding: 18px 22px;
}.wgs__promo-heading{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 17px;
    margin: 0 0 6px;
    color: var(--wgs-green-dark);
}.wgs__promo-text{
    margin: 0;
    font-size: 14.5px;
    color: var(--wgs-muted);
    line-height: 1.6;
}/* Result page */.wgs__result-card{
    background: #ffffff;
    border: 1px solid var(--wgs-line);
    border-radius: 22px;
    padding: 44px 38px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(2, 55, 24, 0.08);
}.wgs__result-eyebrow{
    font-size: 14.5px;
    letter-spacing: 0.01em;
    color: var(--wgs-green);
    margin: 0 0 12px;
    font-family: 'Lufga Medium', Calibri, sans-serif;
}.wgs__result-headline{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: clamp(26px, 4vw, 36px);
    color: var(--wgs-green-dark);
    margin: 0 0 28px;
    line-height: 1.2;
}.wgs__bands{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}.wgs__band{
    background: linear-gradient(160deg, #f2fbf6 0%, #ecf5f0 100%);
    border: 1px solid rgba(18, 130, 65, 0.18);
    border-radius: 16px;
    padding: 24px 20px;
}.wgs__band-label{
    font-size: 13.5px;
    color: var(--wgs-muted);
    margin: 0 0 8px;
}.wgs__band-value{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 25px;
    color: var(--wgs-green-dark);
    line-height: 1.25;
    margin: 0;
}.wgs__band-unit{
    display: block;
    color: var(--wgs-muted);
    margin-top: 5px;
}.wgs__payback{
    display: inline-block;
    background: var(--wgs-green-dark);
    color: #ffffff;
    border-radius: 999px;
    padding: 11px 26px;
    font-family: 'Lufga Medium', Calibri, sans-serif;
    font-size: 15.5px;
    margin-bottom: 26px;
}.wgs__promise{
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--wgs-muted);
    max-width: 560px;
    margin: 0 auto;
}.wgs__note{
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--wgs-muted);
}@media (max-width: 640px){.wgs{
        padding-top: 110px;
}.wgs__progress{
        top: 78px;
        padding: 10px 15px;
}.wgs__step-head{
        padding: 17px 17px;
        gap: 11px;
}.wgs__step-body{
        padding: 0 17px 20px;
}.wgs__result-card{
        padding: 30px 22px;
}}/* ------------------------------------------------------------------
   Result page, second pass.
   Everything a visitor needs to act on sits in one card, above the fold.
   The long explanation lives underneath in small print.
   ------------------------------------------------------------------ */.wgs--result{
    padding: 110px 0 70px;
}.wgs__shell--narrow{
    max-width: 720px;
}.wgs--result .wgs__result-card{
    text-align: center;
}.wgs--result .wgs__result-eyebrow{
    margin-bottom: 8px;
}.wgs--result .wgs__band-label{
    margin-bottom: 6px;
}.wgs--result .wgs__band-unit{
    margin-top: 3px;
    font-size: 13.5px;
}/* Payback is information, not an action, so it reads as a line of text. */.wgs__payback-line{
    font-size: 15px;
    color: var(--wgs-muted);
    margin: 0 0 22px;
}.wgs__payback-line strong{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    color: var(--wgs-green-dark);
}.wgs__payback-note{
    display: block;
    font-size: 13px;
    margin-top: 4px;
}/* The offer, inside the same card. */.wgs__offer{
    border-top: 1px solid var(--wgs-line);
    margin-top: 4px;
    text-align: left;
}.wgs__offer-title{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    color: var(--wgs-green-dark);
    margin: 0 0 6px;
    text-align: center;
}.wgs__offer-line{
    line-height: 1.55;
    color: var(--wgs-muted);
    margin: 0 0 18px;
    text-align: center;
}.wgs__check--offer{
    justify-content: center;
    max-width: 520px;
    margin: 0 auto 18px;
    font-size: 14.5px;
}.wgs__choices{
    display: grid;
}.wgs__choice{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}.wgs__choice-label{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    line-height: 1.25;
}.wgs__choice-note{
    line-height: 1.4;
    opacity: 0.85;
}.wgs__choice:hover:not([disabled]){
    transform: translateY(-2px);
}.wgs__choice:focus-visible{
    outline: 3px solid rgba(32, 219, 110, 0.55);
    outline-offset: 3px;
}.wgs__choice[disabled]{
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}/* Small print under the card. */.wgs__smallprint{
    margin-top: 18px;
    padding: 0 6px;
}.wgs__smallprint-title{
    font-family: 'Lufga Medium', Calibri, sans-serif;
    font-size: 14px;
    color: var(--wgs-muted);
    margin: 0 0 6px;
}.wgs__smallprint-text{
    font-size: 12.5px;
    line-height: 1.6;
    color: #8a929b;
    margin: 0 0 8px;
}/* Thank-you page. */.wgs__result-card--thanks{
    padding: 46px 40px 40px;
}.wgs__tick{
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 27px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--wgs-green) 0%, var(--wgs-green-bright) 100%);
}.wgs__thanks-body{
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--wgs-ink);
    max-width: 540px;
    margin: 0 auto 16px;
}.wgs__thanks-contact{
    font-size: 15px;
    line-height: 1.6;
    color: var(--wgs-muted);
    max-width: 540px;
    margin: 0 auto 22px;
}.wgs__thanks-meta{
    font-size: 13.5px;
    color: var(--wgs-muted);
    margin: 0 0 24px;
}.wgs__thanks-back{
    display: inline-block;
    border: 1px solid var(--wgs-line);
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 14.5px;
    color: var(--wgs-green);
    text-decoration: none;
    font-family: 'Lufga Medium', Calibri, sans-serif;
}.wgs__thanks-back:hover{
    border-color: var(--wgs-green);
    background: #f2f9f5;
    color: var(--wgs-green-dark);
}@media (max-width: 640px){.wgs--result{
        padding-top: 96px;
}.wgs--result .wgs__result-card{
        padding: 26px 20px 24px;
}.wgs__choices{
        grid-template-columns: 1fr;
}}/* ------------------------------------------------------------------
   Landing band, second pass. "Free" carries the offer, so it is the
   largest word on the section and it uses the colour reserved for
   everything free across the site. The button is large and beats
   gently so the eye finds it.
   ------------------------------------------------------------------ */.wgs-promo{
    background-position: center;
}/* A soft light behind the copy, so a flat colour still has depth. */.wgs-promo__glow{
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    max-width: 140%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32, 219, 110, 0.22) 0%, rgba(32, 219, 110, 0) 68%);
    pointer-events: none;
}.wgs-promo__headline{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    line-height: 1.02;
    margin: 0 0 18px;
    font-size: clamp(34px, 5vw, 56px);
}.wgs-promo__free{
    display: block;
    font-family: 'Lufga Bold', 'Lufga SemiBold', Calibri, sans-serif;
    font-size: clamp(64px, 12vw, 132px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}.wgs-promo__rest{
    display: block;
}.wgs-promo__body{
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    margin: 0 0 30px;
    opacity: 0.9;
}.wgs-promo__btn{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-radius: 999px;
    padding: 24px 56px;
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: clamp(19px, 2.2vw, 24px);
    text-decoration: none;
    color: #ffffff;
    background: var(--primary-green, #128241);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}.wgs-promo__btn svg{
    flex: 0 0 auto;
}.wgs-promo__btn:hover{
    color: #ffffff;
    background: var(--secondary-green, #20db6e);
    animation-play-state: paused;
    transform: scale(1.03);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
}.wgs-promo__btn:focus-visible{
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}.wgs-promo__note{
    margin: 16px 0 0;
    font-size: 15px;
    opacity: 0.72;
}@media (max-width: 900px){.wgs-promo{
        padding: 66px 0 70px;
}.wgs-promo__btn{
        padding: 20px 38px;
}}/* ------------------------------------------------------------------
   Result page: the expert option is solid green so its white text
   always has something to sit on, and the equivalents get their own
   strip with icons.
   ------------------------------------------------------------------ */.wgs__choice-head{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}.wgs__equivalents{
    margin: 0 0 22px;
}.wgs__equivalents-title{
    font-size: 14px;
    letter-spacing: 0.01em;
    margin: 0 0 14px;
    font-family: 'Lufga Medium', Calibri, sans-serif;
}.wgs__equivalents-grid{
    display: grid;
}.wgs__equivalent{
    color: #ffffff;
}.wgs__equivalent-value{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    line-height: 1.2;
    margin: 0;
}.wgs__equivalent-label{
    font-size: 12.5px;
    line-height: 1.35;
    color: #cdeedd;
    margin: 3px 0 0;
}@media (max-width: 640px){.wgs__equivalents-grid{
        grid-template-columns: 1fr;
        gap: 16px;
}}/* Layout for the landing band. These sit after the colour rules above so the
   section keeps its own width and alignment regardless of page styles. */.wgs-promo__inner{
    margin: 0 auto;
    padding: 0 24px;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}.wgs-promo__inner--single{
    grid-template-columns: 1fr;
    text-align: center;
}.wgs-promo__inner--single .wgs-promo__body{
    margin-left: auto;
    margin-right: auto;
}/* The section sets its own text colour, so headings must not inherit the
   page's dark heading colour. */.wgs-promo__headline,
.wgs-promo__rest,
.wgs-promo .wgs-promo__body,
.wgs-promo .wgs-promo__note{
    color: inherit;
}.wgs-promo__media img{
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}@media (max-width: 900px){.wgs-promo__inner{
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
}.wgs-promo__body{
        margin-left: auto;
        margin-right: auto;
}}/* ------------------------------------------------------------------
   Button animations for the landing band. Pick one in Estimator
   Settings, Landing page. All of them are slow and small on purpose:
   the button should catch the eye without nagging.
   ------------------------------------------------------------------ */.wgs-promo__btn--none{
    animation: none;
}/* A steady, even breath. The default. */.wgs-promo__btn--pulse{
    animation: wgs-pulse 2s ease-in-out infinite;
}@keyframes wgs-pulse{
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.026); }
}/* Two quick beats, then a rest, like a pulse you can feel. */.wgs-promo__btn--heartbeat{
    animation: wgs-heartbeat 2s ease-in-out infinite;
}/* A ring of light travelling outwards. Nothing moves, so it never nudges
   the layout. */.wgs-promo__btn--glow{
    animation: wgs-glow 2s ease-out infinite;
}@keyframes wgs-glow{
    0% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(32, 219, 110, 0.55); }
    70% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 18px rgba(32, 219, 110, 0); }
    100% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(32, 219, 110, 0); }
}/* A slow rise and fall. */.wgs-promo__btn--float{
    animation: wgs-float 3s ease-in-out infinite;
}@keyframes wgs-float{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}/* ------------------------------------------------------------------
   Result page, third pass. A large icon sits beside each figure, the
   boxes are tighter now that "per year" has gone, and the whole card
   fits a 14 inch screen without scrolling to reach the buttons.
   ------------------------------------------------------------------ */.wgs--result .wgs__result-card{
    padding: 26px 34px 24px;
}.wgs--result .wgs__result-headline{
    margin-bottom: 18px;
    font-size: clamp(22px, 3vw, 30px);
}.wgs--result .wgs__bands{
    gap: 14px;
    margin-bottom: 14px;
}.wgs--result .wgs__band{
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 16px 18px;
}.wgs__band-icon{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}.wgs__band-body{
    display: flex;
    flex-direction: column;
    min-width: 0;
}.wgs--result .wgs__band-label{
    margin: 0 0 2px;
    line-height: 1.3;
}.wgs--result .wgs__band-label strong{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 16px;
    color: var(--wgs-green-dark);
}.wgs--result .wgs__band-value{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    line-height: 1.15;
    color: var(--wgs-green-dark);
    margin: 0;
}.wgs__equivalent-value{
    font-size: 17px;
}.wgs__equivalent svg{
    margin-bottom: 4px;
}.wgs__offer{
    padding-top: 18px;
}.wgs__offer-title{
    font-size: 18px;
    margin-bottom: 4px;
}.wgs__offer-line{
    font-size: 14.5px;
    margin-bottom: 14px;
}.wgs__check--offer{
    margin-bottom: 14px;
}.wgs__choice{
    padding: 14px 18px;
    gap: 3px;
}.wgs__promise--small{
    margin-top: 14px;
    font-size: 13px;
}@media (max-width: 640px){.wgs--result .wgs__band{
        flex-direction: row;
        padding: 14px;
        gap: 12px;
}.wgs__band-icon{
        width: 52px;
        height: 52px;
}}/* ------------------------------------------------------------------
   Landing band: a slow drift on the picture and a gentle entrance for
   the words, so the section feels alive without costing anything.
   Everything here is a compositor transform, which the graphics card
   handles; no scroll listeners, no extra requests, no layout work.
   ------------------------------------------------------------------ */.wgs-promo{
    background-attachment: scroll;
    background-size: 118% auto;
    will-change: background-position;
}@keyframes wgs-drift{
    0% { background-position: 42% 46%; }
    100% { background-position: 58% 54%; }
}/* The glow behind the copy breathes on its own timing, so the two layers
   never move together and the section reads as depth rather than a slide. */.wgs-promo__glow{
    animation: wgs-breathe 16s ease-in-out infinite alternate;
    will-change: transform, opacity;
}@keyframes wgs-breathe{
    0% { transform: translateX(-50%) scale(1); opacity: 0.85; }
    100% { transform: translateX(-50%) scale(1.14); opacity: 1; }
}/* Nothing here is hidden waiting for a script. The words are visible, and
   their movement is the pinned backdrop they scroll up across, the same
   way the chat bubble's beat is plain CSS that simply runs. *//* A heartbeat that lights up as it beats, the way the chat bubble does. */.wgs-promo__btn--heartbeat-glow{
    animation: wgs-heartbeat 2s ease-in-out infinite, wgs-lightup 2s ease-in-out infinite;
}@keyframes wgs-lightup{
    0%, 100% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(32, 219, 110, 0); }
    10% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 26px 4px rgba(32, 219, 110, 0.55); }
    30% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 20px 2px rgba(32, 219, 110, 0.34); }
    55% { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(32, 219, 110, 0); }
}/* The picture layer. Drifting it with a transform keeps the work on the
   graphics card, so the section costs almost nothing while it moves. */.wgs-promo__bg,
.wgs-promo__tint{
    position: absolute;
    inset: -4%;
    pointer-events: none;
}.wgs-promo__bg{
    background-size: cover;
    background-position: center;
    animation: wgs-drift-layer 38s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateZ(0);
}@keyframes wgs-drift-layer{
    0% { transform: scale(1.04) translate3d(-1.2%, -0.8%, 0); }
    100% { transform: scale(1.09) translate3d(1.2%, 0.8%, 0); }
}/* The section no longer paints or animates the picture itself. */.wgs-promo{
    background-image: none !important;
    animation: none;
}/* The value keeps to one line at the widths this card is used at. */.wgs--result .wgs__band-value{
    font-size: clamp(21px, 2.1vw, 25px);
    white-space: nowrap;
}/* ------------------------------------------------------------------
   Equivalents, in the plain layout the owner asked for: a big icon on
   top, one number, a short caption. No panel behind them.
   ------------------------------------------------------------------ */.wgs__equivalents{
    background: none;
    border-top: 1px solid var(--wgs-line);
    border-radius: 0;
    padding: 18px 0 6px;
    margin-bottom: 14px;
}.wgs__equivalents-title{
    color: var(--wgs-muted);
    text-align: center;
    margin-bottom: 14px;
}.wgs__equivalents-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}.wgs__eq-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}.wgs__eq-icon{
    height: 48px;
    display: grid;
    place-items: center;
}.wgs__eq-value{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 17px;
    line-height: 1.15;
    color: var(--wgs-green-dark);
}.wgs__eq-label{
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--wgs-muted);
}/* The figure tiles keep their icons bare, with no box behind them. */.wgs__band-icon{
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
}@media (max-width: 760px){.wgs__equivalents-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
}}/* A corner ribbon on each choice, so the price is read before the words. */.wgs__choice{
    position: relative;
    overflow: hidden;
}.wgs__ribbon{
    position: absolute;
    transform: rotate(38deg);
    text-align: center;
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    letter-spacing: 0.04em;
    line-height: 1.4;
    pointer-events: none;
}/* Room for the ribbon, so it never sits over the label. *//* ------------------------------------------------------------------
   The button, final pass.

   The rest of this site animates whatever the visitor's system says,
   because none of its CSS asks. This file does ask, which is why the
   chat bubble kept beating on a machine where this button sat still.

   Movement is what that setting protects people from, so the beat is
   what stops. A soft glow is not movement, so the button still shows
   itself. Nobody ends up looking at a dead button.

   These rules come last on purpose: they override the blanket
   "animation: none" written earlier in this file.
   ------------------------------------------------------------------ *//* Matches the beat of the chat bubble, which uses breathing at 1.05. */@keyframes wgs-heartbeat{
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.05); }
    22% { transform: scale(1); }
    32% { transform: scale(1.028); }
    45% { transform: scale(1); }
}/* ------------------------------------------------------------------
   The moving backdrop.

   The waves are real elements inside an inlined SVG, so they can slide.
   Each is drawn at twice its width and moved by exactly half, which makes
   the loop seamless with no jump. Only transforms are animated, so this
   runs on the graphics card and costs the page almost nothing.

   The rest of this site animates regardless of the system motion setting.
   These effects are slow and small rather than switched off entirely, so
   the section still looks alive on a machine that asks for less motion.
   ------------------------------------------------------------------ */.wgs-promo__flow{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}.wgs-flow{
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%;
    display: block;
}.wgs-flow__wave{
    will-change: transform;
}/* Flow: the waves drift sideways, each at its own speed. The speeds
   themselves are set once, further down, where they were made three times
   quicker; only the direction and the curve are set here. */.wgs-promo__flow--flow .wgs-flow__wave--1{ animation: wgs-wave 15s linear infinite;
}.wgs-promo__flow--flow .wgs-flow__wave--2{ animation: wgs-wave 11s linear infinite reverse;
}.wgs-promo__flow--flow .wgs-flow__wave--3{ animation: wgs-wave 19s linear infinite;
}.wgs-promo__flow--flow .wgs-flow__wave--4{ animation: wgs-wave 13s linear infinite reverse;
}.wgs-promo__flow--flow .wgs-flow__wave--5{ animation: wgs-wave 17s linear infinite;
}@keyframes wgs-wave{
    from { transform: translateX(0); }
    to { transform: translateX(-1600px); }
}/* Sway: the waves rise and fall gently instead of travelling. */.wgs-promo__flow--sway .wgs-flow__wave--1{ animation: wgs-sway 12s ease-in-out infinite alternate;
}.wgs-promo__flow--sway .wgs-flow__wave--2{ animation: wgs-sway 16s ease-in-out infinite alternate-reverse;
}.wgs-promo__flow--sway .wgs-flow__wave--3{ animation: wgs-sway 20s ease-in-out infinite alternate;
}.wgs-promo__flow--sway .wgs-flow__wave--4{ animation: wgs-sway 15s ease-in-out infinite alternate-reverse;
}.wgs-promo__flow--sway .wgs-flow__wave--5{ animation: wgs-sway 18s ease-in-out infinite alternate;
}@keyframes wgs-sway{
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-40px, -14px, 0); }
}/* Drift: the whole backdrop pans slowly, nothing moves against anything else. */.wgs-promo__flow--drift .wgs-flow,
.wgs-promo__bg--drift{
    animation: wgs-drift-layer 38s ease-in-out infinite alternate;
}.wgs-promo__flow--still .wgs-flow__wave,
.wgs-promo__bg--still{
    animation: none;
}/* The light behind the words breathes on its own timing. */.wgs-flow__glow{
    transform-origin: center;
    animation: wgs-flow-glow 14s ease-in-out infinite alternate;
}@keyframes wgs-flow-glow{
    from { opacity: 0.75; }
    to { opacity: 1; }
}/* A wider band, as asked. */.wgs-promo__inner{
    max-width: 1320px;
}.wgs-promo__inner--single{
    max-width: 1040px;
}/* ------------------------------------------------------------------
   The band holds its backdrop while the words scroll up over it.

   The backdrop is one screen tall and sticky, so it pins to the top of
   the viewport as the section passes. The words sit on top and are
   pulled back over it, so they travel up while the green stays put.
   When the section runs out, the backdrop leaves with it.

   Sticky rather than fixed on purpose: a fixed layer would escape the
   section and sit behind the rest of the page.
   ------------------------------------------------------------------ */.wgs-promo{
    position: relative;
    padding: 0;
    overflow: clip;
}.wgs-promo__backdrop{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}.wgs-promo__backdrop > *{
    position: absolute;
    inset: 0;
}/* The words are pulled back over the pinned backdrop. The extra height
   below them is what the backdrop stays put for.

   They sit at the BOTTOM of the pinned screen, not its middle. Centred, they
   came into view halfway up and appeared to start from the middle of the page.
   Held at the bottom, the green arrives on its own first and the words then
   rise up through it, which is the same order you already get coming back up
   the page. */.wgs-promo__inner{
    position: relative;
    z-index: 1;
    margin-top: -100vh;
    min-height: 100vh;
    /* One whole screen of green is held above the words. With the words
       packed to the end of the box, this is what makes the background
       arrive on its own and the words climb up through it afterwards,
       going down the page as well as coming back up. */
    padding-top: 100vh;
    padding-bottom: 170px;
    display: grid;
    align-content: end;
}/* The room the backdrop holds for, after the words have gone by. Shorter
   than it was, because the screen of green now sits before the words
   instead of after them and the section should not get longer. */.wgs-promo__tail{
    height: 30vh;
}@media (max-width: 900px){.wgs-promo__inner{
        padding-top: 100vh;
        padding-bottom: 96px;
}.wgs-promo__tail{
        /* A little more than the desktop share: on a narrow screen the headline
           wraps onto more lines, so the words take longer to clear. */
        height: 36vh;
}}/* Pinning is deliberately not switched off for reduced motion. Nothing else
   on this site honours that setting, so switching it off here only produced a
   section that looked broken next to everything around it. Pinning holds an
   element still while the page scrolls; it does not animate anything, so the
   risk it carries is small. *//* ------------------------------------------------------------------
   Header buttons.

   The beat matches the chat bubble exactly: the same breathing curve at
   3s and the same glow at 2s, taken from the site's own css/style.css so
   everything on the page pulses together rather than to its own clock.
   ------------------------------------------------------------------ */.btn-header.wgs-header-ask,
.btn-header.wgs-header-calc{
    padding: 8px 18px;
    font-size: 14.5px;
    line-height: 1.35;
    white-space: nowrap;
}.btn-header.wgs-header-calc{
    margin-left: 6px;
    background: var(--dark-green, #023718);
    border-color: var(--dark-green, #023718);
    animation:
        wgs-chat-breathe 3s ease-in-out infinite,
        wgs-chat-glow 2s ease-in-out infinite;
}.btn-header.wgs-header-calc:hover{
    background: var(--secondary-green, #20db6e);
    border-color: var(--secondary-green, #20db6e);
    animation-play-state: paused;
}/* The chat bubble's own two keyframes, matched so every beat on the page
   keeps the same rhythm. */@keyframes wgs-chat-breathe{
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}@keyframes wgs-chat-glow{
    0%, 100% { box-shadow: 0 4px 20px rgba(2, 55, 24, 0.4); }
    50% {
        box-shadow:
            0 4px 25px rgba(2, 55, 24, 0.6),
            0 0 20px rgba(32, 219, 110, 0.45);
    }
}/* The landing button beats to the same clock. */.wgs-promo__btn--heartbeat-glow,
.wgs-promo__btn--pulse,
.wgs-promo__btn--heartbeat{
    animation:
        wgs-chat-breathe 3s ease-in-out infinite,
        wgs-chat-glow 2s ease-in-out infinite !important;
}@media (max-width: 1400px){.btn-header.wgs-header-ask,
    .btn-header.wgs-header-calc{
        padding: 7px 14px;
        font-size: 13.5px;
}}/* ------------------------------------------------------------------
   The chat bubble's own beat, copied exactly.

   Taken from components/frontend-chat.blade.php: one keyframe at 2s that
   scales to 1.08 while the green lifts from #128241 to #0ea34e and the
   shadow opens up. Using the same single keyframe rather than an
   imitation means every beat on the page is genuinely identical.
   ------------------------------------------------------------------ */.btn-header.wgs-header-calc,
.wgs-promo__btn--heartbeat-glow,
.wgs-promo__btn--pulse,
.wgs-promo__btn--heartbeat{
    background: #128241;
    border-color: #128241;
    color: #ffffff;
    /* Same bright flash, half as often, so it draws the eye to the
       calculator without becoming something you have to watch. */
    animation: wgs-chat-blink 4s ease-in-out infinite !important;
}.btn-header.wgs-header-calc:hover,
.wgs-promo__btn:hover{
    animation: none !important;
    background: #0ea34e;
    border-color: #0ea34e;
    color: #ffffff;
}@keyframes wgs-chat-blink-still{
    0%, 100% {
        box-shadow: 0 6px 24px rgba(18, 130, 65, 0.18);
        background: #128241;
    }
    50% {
        box-shadow: 0 8px 32px rgba(18, 130, 65, 0.35);
        background: #0ea34e;
    }
}/* ------------------------------------------------------------------
   Three choices, and only one of them is a decision.

   Build sits in the middle, larger than its neighbours and in the
   site green, because it is the one that starts a conversation. The
   two report options move to blue, so green on this page now means
   one thing only: talk to us. Free and paid stay apart by weight,
   light blue against solid, and by their corner ribbons.
   ------------------------------------------------------------------ */.wgs__choices{
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: stretch;
    gap: 12px;
}/* --- the two reports, blue --- */.wgs__choice--free{
    background: #eef4fc;
    color: #0d4b90;
    border: 2px solid #a9c8ec;
    box-shadow: none;
}.wgs__choice--free:hover:not([disabled]){
    background: #e0ecfa;
    border-color: #1668c9;
}.wgs__choice--paid{
    background: #1668c9;
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 24px rgba(22, 104, 201, 0.26);
}.wgs__choice--paid:hover:not([disabled]){
    background: #0d4b90;
    box-shadow: 0 14px 30px rgba(22, 104, 201, 0.34);
}.wgs__ribbon--free{
    background: #1668c9;
    color: #ffffff;
}.wgs__ribbon--paid{
    background: #ffffff;
    color: #0d4b90;
}/* --- build, the big green one --- */.wgs__choice--build{
    background: linear-gradient(135deg, var(--wgs-green, #128241) 0%, #0ea34e 100%);
    color: #ffffff;
    border: none;
    padding: 20px 22px;
    box-shadow: 0 12px 30px rgba(18, 130, 65, 0.32);
}.wgs__choice--build:hover:not([disabled]){
    background: linear-gradient(135deg, #0ea34e 0%, var(--wgs-green-bright, #20db6e) 100%);
    box-shadow: 0 16px 36px rgba(18, 130, 65, 0.4);
}.wgs__choice--build .wgs__choice-label{
    font-size: 19px;
}.wgs__choice--build .wgs__choice-note{
    font-size: 12.5px;
    opacity: 0.95;
}.wgs__choice-label{
    font-size: 15.5px;
}.wgs__choice-note{
    font-size: 12px;
}/* On a phone the row becomes a column, and build keeps the top spot
   it earns by sitting in the middle on a wide screen. */@media (max-width: 860px){.wgs__choices{
        grid-template-columns: 1fr;
        gap: 12px;
}.wgs__choice--build{
        order: -1;
}.wgs__choice--build .wgs__choice-label{
        font-size: 18px;
}}/* The ribbon was crossing the longer labels, so it tucks further into the
   corner and the label keeps a clear lane beside it. */.wgs__ribbon{
    top: 9px;
    right: -32px;
    width: 100px;
    font-size: 10px;
    padding: 2px 0;
}.wgs__choice-head{
    padding-right: 22px;
    padding-left: 4px;
}.wgs__choice--build .wgs__choice-head{
    padding-right: 26px;
}/* The tick box is gone. Pressing a choice is the agreement, and this line
   under the row says so, quietly, where small print belongs. */.wgs__offer-terms{
    margin: 14px auto 0;
    max-width: 620px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    text-align: center;
}.wgs__offer-terms a{
    color: var(--wgs-green, #128241);
    text-decoration: underline;
}/* Bright green on green did not read. The ribbon on a solid button follows
   the same rule as the paid one: white behind, the button colour in front. */.wgs__ribbon--build{
    background: #ffffff;
    color: var(--wgs-green-dark, #023718);
}/* The address on the thank you page is part of the sentence, so it takes the
   site green rather than the browser's default blue. */.wgs__thanks-contact a{
    color: var(--wgs-green, #128241);
    text-decoration: underline;
}/* The returning visitor's line links back to the thank you page. Green, like
   every other link inside the estimator. */.wgs__offer-done a{
    color: var(--wgs-green, #128241);
    text-decoration: underline;
}/* The unit is not the figure. It follows in the normal weight and a little
   smaller, so the number is what the eye lands on. */.wgs__band-unit{
    font-family: 'Lufga', Calibri, sans-serif;
    font-weight: 400;
    font-size: 0.82em;
    margin-left: 0.32em;
}/* Two steps down from the figure, in the normal weight. Written in pixels
   because the figure's own size is set in pixels further up. */.wgs--result .wgs__band-value .wgs__band-unit{
    /* The figure is clamp(21px, 2.1vw, 25px). This tracks it two steps down
       at every width rather than fixing one size that only fits one. */
    font-size: clamp(19px, 1.93vw, 23px);
    font-weight: 400;
    font-family: 'Lufga', Calibri, sans-serif;
    /* Spans inside a band are stacked by an earlier rule. The unit belongs
       on the same line as the figure it follows. */
    display: inline;
}/* Band labels read as headings now: bold, capitals, dark. The word
   "Potential" left the text because the eyebrow above already says it.
   The units come down another step so the figure is what the eye lands on. */.wgs--result .wgs__band-label{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12.5px;
    color: var(--wgs-green-dark, #023718);
}.wgs--result .wgs__band-label sub{
    text-transform: none;
}.wgs--result .wgs__band-value .wgs__band-unit{
    font-size: clamp(15px, 1.5vw, 18px);
}/* The phone box is optional. Until the visitor has typed a number it looks
   like every other box, whatever the shared phone script marks it as. */.wgs .wgs__input[data-wgs-untouched].is-invalid{
    border-color: var(--wgs-line, #cbd5d0);
    background-image: none;
    box-shadow: none;
}/* ------------------------------------------------------------------
   Step 4. A list the visitor ticks as many times as applies, with the
   electricity box on the same line as the equipment it belongs to.
   ------------------------------------------------------------------ */.wgs__systems{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}.wgs__system{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--wgs-line, #cbd5d0);
    border-radius: 13px;
    background: #ffffff;
    transition: border-color 0.15s ease, background 0.15s ease;
}.wgs__system.is-picked{
    border-color: var(--wgs-green, #128241);
    background: var(--wgs-green-mist, #f2fbf6);
}.wgs__system-pick{
    display: flex;
    align-items: flex-start;
    gap: 11px;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    margin: 0;
}.wgs__system-pick input{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}/* Square rather than round, so a tick reads as "more than one allowed". */.wgs__option-dot--box{
    border-radius: 6px;
    flex: 0 0 auto;
    margin-top: 2px;
}.wgs__system-pick input:checked + .wgs__option-dot--box{
    border-color: var(--wgs-green, #128241);
    background: var(--wgs-green, #128241);
    box-shadow: inset 0 0 0 3px #ffffff;
}.wgs__system-pick input:focus-visible + .wgs__option-dot--box{
    outline: 3px solid rgba(32, 219, 110, 0.55);
    outline-offset: 2px;
}.wgs__system-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}.wgs__system-name{
    font-family: 'Lufga SemiBold', Calibri, sans-serif;
    font-size: 15px;
    color: var(--wgs-ink, #1a2b22);
}.wgs__system-hint{
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--wgs-muted, #6b7280);
}.wgs__system-energy{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}.wgs__system-energy-label{
    display: none;
}.wgs__input--energy{
    width: 108px;
    text-align: right;
    padding: 8px 10px;
    font-size: 14px;
}.wgs__input--energy:disabled{
    background: #f4f7f5;
    color: #9aa6a0;
    border-color: #e2e8ec;
    cursor: not-allowed;
}.wgs__system-energy .wgs__unit{
    font-size: 12px;
    color: var(--wgs-muted, #6b7280);
    white-space: nowrap;
}.wgs__system-other{
    margin: -2px 0 2px;
    padding: 0 14px;
}.wgs__systems-note{
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--wgs-muted, #6b7280);
}/* On a phone the box drops under its own row rather than squeezing the name. */@media (max-width: 620px){.wgs__system{
        flex-wrap: wrap;
        gap: 8px;
}.wgs__system-energy{
        width: 100%;
        padding-left: 32px;
}.wgs__system-energy-label{
        display: block;
        font-size: 12px;
        color: var(--wgs-muted, #6b7280);
}.wgs__input--energy{
        flex: 1 1 auto;
        width: auto;
}}/* ------------------------------------------------------------------
   The three choices, aligned.

   Each button is the same two rows: a fixed head and the note under
   it. The rows start at the top rather than being centred, so the
   labels sit on one line across all three whatever the font size or
   how the note wraps. The buttons are a little slimmer now that every
   label fits on one line.
   ------------------------------------------------------------------ */.wgs--result .wgs__choice{
    display: grid;
    grid-template-rows: 32px auto;
    align-content: start;
    justify-items: center;
    row-gap: 6px;
    padding: 15px 18px;
    gap: 6px;
}.wgs--result .wgs__choice-head{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0;
}.wgs--result .wgs__choice-note{
    margin: 0;
    align-self: start;
}/* The green one keeps its larger label; the fixed row keeps it in line. */.wgs--result .wgs__choice--build{
    padding: 15px 18px;
}.wgs--result .wgs__choice--build .wgs__choice-label{
    font-size: 18px;
}/* The notes were two different sizes, which put their first line two pixels
   apart. One size for all three, so every line starts level. */.wgs--result .wgs__choice .wgs__choice-note,
.wgs--result .wgs__choice--build .wgs__choice-note{
    font-size: 12.5px;
    line-height: 1.45;
}/* The free option has a visible border and the other two do not, which pushed
   its content down by exactly the border width. All three carry a border now;
   on the solid buttons it is simply invisible. */.wgs--result .wgs__choice--build,
.wgs--result .wgs__choice--paid{
    border: 2px solid transparent;
}/* The build button uses the site's own Font Awesome handshake. It sits in the
   same fixed head row as the two drawn marks, so the labels stay level. */.wgs__choice-fa{
    font-size: 26px;
    line-height: 1;
    color: #ffffff;
    flex: 0 0 auto;
}/* On a phone "Sustainability Starts Here" wrapped onto two lines and made the
   button 97px tall. One size down puts it back on one line. */@media (max-width: 620px){.wgs-promo__btn{
        font-size: 16px;
        padding: 16px 26px;
}}/* ------------------------------------------------------------------
   Admin, the Locations table.

   It carries more columns than a laptop shows, and the ones past
   "Water" were cut off with nothing to say they existed. The bar is
   always visible rather than appearing on hover, and a soft edge on
   the right says there is more to the side.
   ------------------------------------------------------------------ */.wgs-admin-scroll{
    overflow-x: auto;
    scrollbar-width: thin;
    background:
        linear-gradient(90deg, #ffffff 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 70%) right center,
        radial-gradient(farthest-side at 0 50%, rgba(2, 55, 24, 0.16), rgba(2, 55, 24, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(2, 55, 24, 0.16), rgba(2, 55, 24, 0)) right center;
    background-repeat: no-repeat;
    background-size: 42px 100%, 42px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}.wgs-admin-scroll::-webkit-scrollbar{
    height: 10px;
}.wgs-admin-scroll::-webkit-scrollbar-thumb{
    background: #b9c6bf;
    border-radius: 999px;
}.wgs-admin-scroll::-webkit-scrollbar-track{
    background: #eef2f0;
    border-radius: 999px;
}
/* Shown when a page was left open past its session and the visitor was sent
   back here. It is information, not a failure, so it is not red. */

.wgs__notice {
    margin: 0 auto 16px;
    max-width: 620px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff7e6;
    border: 1px solid #f0d9a8;
    color: #7a5a12;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}

/* ------------------------------------------------------------------
   Corrections after the first look at the live site.
   ------------------------------------------------------------------ */

/* The waves drifted so slowly you could not tell they moved. Three times
   faster, keeping each wave on its own speed so they never march in step. */

.wgs-promo__flow--flow .wgs-flow__wave--1 { animation-duration: 15s; }
.wgs-promo__flow--flow .wgs-flow__wave--2 { animation-duration: 11s; }
.wgs-promo__flow--flow .wgs-flow__wave--3 { animation-duration: 19s; }
.wgs-promo__flow--flow .wgs-flow__wave--4 { animation-duration: 13s; }
.wgs-promo__flow--flow .wgs-flow__wave--5 { animation-duration: 17s; }
.wgs-promo__flow--flow .wgs-flow__glow { animation-duration: 5s; }

/* The backdrop is drawn to a fixed shape and was letter-boxed on a wide
   screen, showing a bare strip of the section colour down one side. It now
   fills whatever window it is given, cropping instead of leaving a gap. */

.wgs-flow {
    /* The original rule sized this at 104% and pulled it back by 2% on each
       side. Overriding only the width left the 2% offset in place, which is
       what put a bare strip of the section colour down the right edge. It
       now sits square on the corner and fills the whole box; the drawing
       crops itself, so no edge can show. */
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

.wgs-promo__backdrop,
.wgs-promo__backdrop > * {
    width: 100%;
    min-width: 100%;
}

/* The heartbeat on the header button only lifted a shade. It now goes twice
   as far towards the light green, so the beat is unmistakable. */

@keyframes wgs-chat-blink {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 24px rgba(18, 130, 65, 0.18);
        background: #128241;
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 10px 38px rgba(32, 219, 110, 0.55);
        background: #2fd47c;
    }
}

/* The word above each electricity box, so it is obvious what the number is. */

.wgs__system-energy-label {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--wgs-muted, #6b7280);
    text-align: right;
    margin-bottom: 2px;
}

.wgs__system-energy {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.wgs__system-energy .wgs__unit {
    font-size: 11px;
}

@media (max-width: 620px) {
    .wgs__system-energy {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .wgs__system-energy-label {
        text-align: left;
        margin-bottom: 0;
    }
}