/* /Components/Layout/ChatWidget.razor.rz.scp.css */
.chat-greeting[b-9kpet9zcw8] {
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 10000000;
    padding: 10px;
    border: 2px solid var(--wb-color-on-dark-strong);
    border-radius: 5px;
    background: var(--wb-color-primary);
    color: var(--wb-color-on-dark-strong);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.chat-greeting[hidden][b-9kpet9zcw8] {
    display: none;
}

.chat-button[b-9kpet9zcw8] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--wb-color-on-dark-strong);
    border-radius: 50%;
    background: var(--wb-color-primary);
    color: var(--wb-color-on-dark-strong);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.chat-button:hover[b-9kpet9zcw8],
.chat-button:focus-visible[b-9kpet9zcw8] {
    transform: scale(1.15);
}

.chat-button__icon[b-9kpet9zcw8] {
    width: 24px;
    height: 24px;
    fill: var(--wb-color-on-dark-strong);
}

.chat-button__icon[hidden][b-9kpet9zcw8] {
    display: none;
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* The header is on every page, the old theme's pages included, so everything here is explicit: the theme's global
   a, ul and button rules would otherwise leak in. The NavDropdown children are reached with ::deep. */

.site-header[b-x55lumkmm6] {
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: var(--wb-font);
    background: var(--wb-surface);
    box-shadow: 0 1px 0 var(--wb-mist-deep);
}

.site-header.is-scrolled[b-x55lumkmm6] {
    box-shadow: 0 1px 0 var(--wb-mist-deep), 0 4px 12px rgba(12, 39, 66, 0.08);
}

/* Keyboard users get a way past the menu; it shows only while it has focus. */
.site-header__skip[b-x55lumkmm6] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 10px 16px;
    border-radius: var(--wb-radius-sm);
    background: var(--wb-navy);
    font-size: 15px;
    font-weight: 700;
    color: var(--wb-color-on-dark-strong);
    text-decoration: none;
    transform: translateY(-200%);
}

.site-header__skip:focus[b-x55lumkmm6] {
    transform: none;
    outline: 3px solid var(--wb-sky);
    outline-offset: 2px;
}

/* ---- Main bar ---- */
.site-header__bar[b-x55lumkmm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-4);
    min-height: 72px;
}

/* The logo fills the bar but for 4px above and below, so growing it never changes the bar's height. */
.site-header__brand[b-x55lumkmm6] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px 0;
}

.site-header__brand img[b-x55lumkmm6] {
    display: block;
    width: auto;
    height: 60px;
}

.site-header__brand:focus-visible[b-x55lumkmm6],
.site-header__toggle:focus-visible[b-x55lumkmm6],
.site-nav__link--top:focus-visible[b-x55lumkmm6],
[b-x55lumkmm6] .site-nav__toggle:focus-visible,
[b-x55lumkmm6] .site-nav__link:focus-visible {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

/* ---- The menu button, phones and tablets only ---- */
.site-header__toggle[b-x55lumkmm6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--wb-mist-deep);
    border-radius: var(--wb-radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--wb-navy);
    cursor: pointer;
}

/* The three bars are stacked on the same whole-pixel centre line and moved apart by transforms alone, so the X is
   two of them turned about that one point. The middle bar shrinks to nothing under the X's crossing instead of
   fading: on iPhones the fade left its two ends showing as dots beside the X. Transforms run on the compositor, so
   the change doesn't wait on the layout the opening menu triggers. */
.site-header__toggle-bars[b-x55lumkmm6] {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.site-header__toggle-bars span[b-x55lumkmm6] {
    position: absolute;
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.18s var(--wb-ease);
}

.site-header__toggle-bars span:nth-child(1)[b-x55lumkmm6] {
    transform: translateY(-6px);
}

.site-header__toggle-bars span:nth-child(3)[b-x55lumkmm6] {
    transform: translateY(6px);
}

.site-header.is-menu-open .site-header__toggle-bars span:nth-child(1)[b-x55lumkmm6] {
    transform: rotate(45deg);
}

.site-header.is-menu-open .site-header__toggle-bars span:nth-child(2)[b-x55lumkmm6] {
    transform: scaleX(0);
}

.site-header.is-menu-open .site-header__toggle-bars span:nth-child(3)[b-x55lumkmm6] {
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .site-header__toggle-bars span[b-x55lumkmm6] {
        transition: none;
    }
}

/* Behind the header's content but over the page (the header is its own stacking context), so the bar and the menu
   stay usable and a tap anywhere else lands here. */
.site-header__backdrop[b-x55lumkmm6] {
    display: none;
}

.site-header.is-menu-open .site-header__backdrop[b-x55lumkmm6] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* ---- Navigation, stacked under the bar until 992px ---- */
.site-nav[b-x55lumkmm6] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* The menu scrolls inside what is left under the 72px bar. */
    max-height: calc(100vh - 72px);
    padding: 0 var(--wb-gutter) var(--wb-space-5);
    overflow-y: auto;
    border-top: 1px solid var(--wb-mist-deep);
    background: var(--wb-surface);
    box-shadow: 0 12px 24px rgba(12, 39, 66, 0.12);
}

.site-nav.is-open[b-x55lumkmm6] {
    display: block;
}

.site-nav__list[b-x55lumkmm6] {
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-x55lumkmm6] .site-nav__item {
    border-bottom: 1px solid var(--wb-mist-deep);
}

/* The Home link in the stacked menu reads as one of the section headings, so it shares their rule. */
[b-x55lumkmm6] .site-nav__toggle,
.site-nav__link--top[b-x55lumkmm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: var(--wb-navy);
    text-decoration: none;
    cursor: pointer;
}

[b-x55lumkmm6] .site-nav__chevron {
    flex: 0 0 auto;
    transition: transform 0.2s var(--wb-ease);
}

[b-x55lumkmm6] .site-nav__item.is-open .site-nav__chevron {
    transform: rotate(180deg);
}

[b-x55lumkmm6] .site-nav__panel {
    display: none;
    padding: 0 0 var(--wb-space-3);
}

[b-x55lumkmm6] .site-nav__item.is-open .site-nav__panel {
    display: block;
}

[b-x55lumkmm6] .site-nav__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-x55lumkmm6] .site-nav__link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--wb-radius-sm);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--wb-ink);
    text-decoration: none;
}

[b-x55lumkmm6] .site-nav__link:hover,
[b-x55lumkmm6] .site-nav__link:focus {
    background: var(--wb-mist);
    color: var(--wb-river);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- The phone number and the customer service email: stacked at the foot of the stacked menu, and in the row
   after the section menus from 992px. The two links share one set of clothes at every width. ---- */
.site-nav__contact[b-x55lumkmm6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--wb-space-4);
}

/* 15px, the section links' size: at 16px the address runs past a 320px phone's gutter. */
.site-nav__phone[b-x55lumkmm6],
.site-nav__email[b-x55lumkmm6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--wb-navy);
    text-decoration: none;
    white-space: nowrap;
}

/* The icons come from the Icon component, so they are reached with ::deep like the dropdown children. */
.site-nav__phone[b-x55lumkmm6]  .fa,
.site-nav__email[b-x55lumkmm6]  .fa {
    font-size: 14px;
    color: var(--wb-river);
}

.site-nav__phone:hover[b-x55lumkmm6],
.site-nav__phone:focus[b-x55lumkmm6],
.site-nav__email:hover[b-x55lumkmm6],
.site-nav__email:focus[b-x55lumkmm6] {
    color: var(--wb-river);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-nav__phone:focus-visible[b-x55lumkmm6],
.site-nav__email:focus-visible[b-x55lumkmm6] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

/* ---- From 992px everything sits in one 80px row: the logo on the left, the section menus, the phone number and
   the email on the right. The menus open as panels hanging from the row's bottom edge. ---- */
@media (min-width: 992px) {
    /* The row is full at every width until the container reaches its 1280px (1344px of viewport): at 992px the
       logo, Home, the four menus and the two icon squares fit with nothing to spare, so the menu links are a size
       smaller with the least padding that still reads as separate items, and the roomier spacing waits for 1344px. */
    .site-header__bar[b-x55lumkmm6] {
        gap: var(--wb-space-5);
        min-height: 80px;
    }

    .site-header__brand img[b-x55lumkmm6] {
        height: 60px;
    }

    .site-header__toggle[b-x55lumkmm6] {
        display: none;
    }

    .site-nav[b-x55lumkmm6] {
        display: flex;
        position: static;
        flex: 0 0 auto;
        align-items: stretch;
        align-self: stretch;
        margin-left: auto;
        max-height: none;
        padding: 0;
        overflow: visible;
        border: 0;
        box-shadow: none;
    }

    .site-nav__list[b-x55lumkmm6] {
        display: flex;
        align-items: stretch;
        gap: 0;
    }

    [b-x55lumkmm6] .site-nav__item {
        position: relative;
        display: flex;
        border-bottom: 0;
    }

    /* A quiet text link, as tall as the row, with a bar underneath when it is open or under the pointer. The bar
       sits on the row's bottom edge, which is where the panel hangs from. Home is a plain link in the same
       clothes (Tom, 2026-10-27: not everyone knows the logo goes home). */
    [b-x55lumkmm6] .site-nav__toggle,
    .site-nav__link--top[b-x55lumkmm6] {
        width: auto;
        min-height: 80px;
        gap: 6px;
        padding: 0 6px;
        border-bottom: 3px solid transparent;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.15s var(--wb-ease), border-color 0.15s var(--wb-ease);
    }

    [b-x55lumkmm6] .site-nav__toggle:hover,
    [b-x55lumkmm6] .site-nav__item.is-open .site-nav__toggle,
    .site-nav__link--top:hover[b-x55lumkmm6],
    .site-nav__link--top:focus[b-x55lumkmm6] {
        border-bottom-color: var(--wb-river);
        color: var(--wb-river);
        text-decoration: none;
    }

    [b-x55lumkmm6] .site-nav__chevron {
        width: 10px;
        height: 10px;
        opacity: 0.6;
    }

    [b-x55lumkmm6] .site-nav__panel {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        min-width: 280px;
        padding: var(--wb-space-2) 0;
        border: 1px solid var(--wb-mist-deep);
        border-top: 0;
        border-radius: 0 0 var(--wb-radius-sm) var(--wb-radius-sm);
        background: var(--wb-surface);
        box-shadow: var(--wb-shadow-float);
    }

    [b-x55lumkmm6] .site-nav__item:last-child .site-nav__panel {
        left: auto;
        right: 0;
    }

    [b-x55lumkmm6] .site-nav__link {
        padding: 10px 20px;
        border-radius: 0;
        white-space: nowrap;
    }

    /* The phone and the email stand apart from the menus behind a thin line. Until 1200px there is no room for the
       digits, and until 1344px none for the address, so each shows as an icon in a square the size of a tap
       target. */
    .site-nav__contact[b-x55lumkmm6] {
        flex-direction: row;
        align-items: center;
        align-self: center;
        gap: 6px;
        margin-left: var(--wb-space-1);
        padding: 0 0 0 10px;
        border-left: 1px solid var(--wb-mist-deep);
    }

    .site-nav__phone[b-x55lumkmm6],
    .site-nav__email[b-x55lumkmm6] {
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 0;
        border: 1px solid var(--wb-mist-deep);
        border-radius: var(--wb-radius-sm);
        font-size: 14px;
    }

    .site-nav__phone:hover[b-x55lumkmm6],
    .site-nav__phone:focus[b-x55lumkmm6],
    .site-nav__email:hover[b-x55lumkmm6],
    .site-nav__email:focus[b-x55lumkmm6] {
        border-color: var(--wb-river);
        text-decoration: none;
    }

    .site-nav__phone-text[b-x55lumkmm6],
    .site-nav__email-text[b-x55lumkmm6] {
        display: none;
    }
}

@media (min-width: 1200px) {
    .site-header__bar[b-x55lumkmm6] {
        gap: var(--wb-space-7);
    }

    .site-header__brand img[b-x55lumkmm6] {
        height: 68px;
    }

    .site-nav__list[b-x55lumkmm6] {
        gap: 2px;
    }

    [b-x55lumkmm6] .site-nav__toggle,
    .site-nav__link--top[b-x55lumkmm6] {
        padding: 0 8px;
        font-size: 15px;
    }

    .site-nav__contact[b-x55lumkmm6] {
        gap: 10px;
        margin-left: var(--wb-space-2);
        padding-left: var(--wb-space-4);
    }

    .site-nav__phone[b-x55lumkmm6] {
        width: auto;
        height: auto;
        min-height: 40px;
        border: 0;
        border-radius: 0;
    }

    .site-nav__phone:hover[b-x55lumkmm6],
    .site-nav__phone:focus[b-x55lumkmm6] {
        text-decoration: underline;
    }

    .site-nav__phone-text[b-x55lumkmm6] {
        display: inline;
    }
}

/* From 1344px the container is at its full width and the row has room for the address: the phone number sits
   over the email as two short lines, right-aligned so they end together at the row's edge, with no icons so the
   block stays quiet next to the menus. The number is the heavier line because it is the one a caller needs in a
   hurry. */
@media (min-width: 1344px) {
    [b-x55lumkmm6] .site-nav__toggle,
    .site-nav__link--top[b-x55lumkmm6] {
        padding: 0 10px;
    }

    .site-nav__contact[b-x55lumkmm6] {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }

    .site-nav__phone[b-x55lumkmm6],
    .site-nav__email[b-x55lumkmm6] {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 3px 0;
        border: 0;
        border-radius: 0;
        line-height: 1.3;
    }

    .site-nav__phone[b-x55lumkmm6] {
        font-size: 15px;
        font-weight: 700;
    }

    .site-nav__email[b-x55lumkmm6] {
        font-size: 14px;
        font-weight: 400;
        color: var(--wb-ink-soft);
    }

    .site-nav__phone[b-x55lumkmm6]  .fa,
    .site-nav__email[b-x55lumkmm6]  .fa {
        display: none;
    }

    .site-nav__email:hover[b-x55lumkmm6],
    .site-nav__email:focus[b-x55lumkmm6] {
        color: var(--wb-river);
        text-decoration: underline;
    }

    .site-nav__email-text[b-x55lumkmm6] {
        display: inline;
    }
}
/* /Components/Pages/AboutUs/About/AboutUs.razor.rz.scp.css */
.mission-list li[b-gwgpm0ckxg] {
    margin-bottom: var(--wb-space-3);
}

.annual-summaries[b-gwgpm0ckxg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--wb-space-2);
    max-width: 640px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.annual-summaries[b-gwgpm0ckxg]  .annual-summaries__year {
    width: 100%;
    padding-left: var(--wb-space-2);
    padding-right: var(--wb-space-2);
}

/* Opens the holiday closures dialog; drawn as a link because it reveals more of the same information. */
.about-holidays-button[b-gwgpm0ckxg] {
    display: inline-block;
    margin-top: var(--wb-space-1);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--wb-font);
    font-size: inherit;
    font-weight: 600;
    color: var(--wb-river);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.about-holidays-button:hover[b-gwgpm0ckxg] {
    color: var(--wb-river-deep);
    text-decoration-thickness: 2px;
}

.about-holidays-button:focus-visible[b-gwgpm0ckxg] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}
/* /Components/Pages/AboutUs/ContactUs/ContactInformation.razor.rz.scp.css */
/* The note sits on the tinted card, so it takes the card's white instead of a second tint. */
.contact-info[b-zbzln8i6mg]  .contact-info__emergency {
    margin: 0 0 var(--wb-space-5);
    background: var(--wb-surface);
}

/* The facts end flush with the bottom of the card. */
[b-zbzln8i6mg] .contact-info__facts {
    margin: 0;
}

[b-zbzln8i6mg] .contact-info__facts dd:last-child {
    margin-bottom: 0;
}

/* The facts sit a little closer together than the note sits above them (its 24px margin plus the card's 12px gap
   make 36px): the value's 24px margin plus the list's 4px row gap make 28px. */
.contact-info[b-zbzln8i6mg]  .contact-info__facts dd:not(:last-child) {
    margin-bottom: var(--wb-space-5);
}

/* The holidays read as a tight list of plain lines inside the card. */
.contact-info[b-zbzln8i6mg]  .observed-holidays li {
    padding-top: var(--wb-space-1);
}
/* /Components/Pages/AboutUs/ContactUs/ContactUs.razor.rz.scp.css */
/* Short fields pair up from 600px; the message gets the full width below them. */
.contact-form__fields[b-qgj8b0rjbb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--wb-space-5);
}

@media (min-width: 600px) {
    .contact-form__fields[b-qgj8b0rjbb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ValidationMessage renders its own div, so the system's error style reaches it through ::deep. */
.contact-form[b-qgj8b0rjbb]  .validation-message {
    margin-top: var(--wb-space-2);
    font-size: var(--wb-text-sm);
    font-weight: 600;
    color: var(--wb-mahogany);
}

.contact-form[b-qgj8b0rjbb]  .wb-field__input.invalid {
    border-color: var(--wb-mahogany);
}

/* js/contact-us.js loads reCAPTCHA only once focus enters the form, so the widget takes no room until then and the
   button sits right under the message. The button's margin collapses with the field's, so it is the same 24px below
   the message or the widget. */
.contact-form__actions[b-qgj8b0rjbb] {
    margin-top: var(--wb-space-5);
}

/* Below 992px the contact information stacks under the form, so the button needs more room than the grid's gap. */
@media (max-width: 991.98px) {
    .contact-form__actions[b-qgj8b0rjbb] {
        margin-bottom: var(--wb-space-5);
    }
}
/* /Components/Pages/AboutUs/DistrictHistory/DistrictHistory.razor.rz.scp.css */
.history-gallery[b-o4tgw1w2ac] {
    display: grid;
    gap: var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-gallery--wide[b-o4tgw1w2ac] {
    margin-top: var(--wb-space-6);
}

/* Under 992px the archive photos follow the article and sit two across, so they don't stack into a long column. */
@media (min-width: 600px) and (max-width: 991px) {
    .history-gallery:not(.history-gallery--wide)[b-o4tgw1w2ac] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/AboutUs/DistrictHistory/HistoryPhoto.razor.rz.scp.css */
.history-photo[b-n2k91n14ql] {
    margin: 0;
}

.history-photo__link[b-n2k91n14ql] {
    position: relative;
    display: block;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.history-photo__link[b-n2k91n14ql]  img {
    display: block;
    width: 100%;
    height: auto;
}

.history-photo__link:focus-visible[b-n2k91n14ql] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

/* A small magnifier in the corner says the photo opens larger; it brightens under the pointer. */
.history-photo__zoom[b-n2k91n14ql] {
    position: absolute;
    right: var(--wb-space-2);
    bottom: var(--wb-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    color: var(--wb-navy);
}

.history-photo__link:hover .history-photo__zoom[b-n2k91n14ql] {
    background: var(--wb-color-surface);
    color: var(--wb-river);
}

.wb-page .history-photo__caption[b-n2k91n14ql] {
    margin: var(--wb-space-2) 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wb-ink-soft);
}
/* /Components/Pages/AboutUs/Staff/ExecutiveCard.razor.rz.scp.css */
.staff-card[b-atdf3yotvj] {
    gap: var(--wb-space-1);
}

/* The portraits are 400 by 509; the frame keeps that shape and the face at the top if a photo is a little off. */
.staff-card__media[b-atdf3yotvj] {
    aspect-ratio: 400 / 509;
    background: var(--wb-mist);
}

.staff-card__media[b-atdf3yotvj]  .staff-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.wb-page .staff-card__name[b-atdf3yotvj] {
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}

.wb-page .staff-card__title[b-atdf3yotvj] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

/* Phones, where the grid is one column: a full-width card made each portrait about 445px tall. Each executive is a
   flat row instead, a small portrait beside the name and title, with a line between them, as the trustees are. */
@media (max-width: 499px) {
    .staff-card[b-atdf3yotvj] {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: var(--wb-space-4);
        row-gap: var(--wb-space-1);
        align-content: start;
        padding: 0 0 var(--wb-space-5);
        border: 0;
        border-bottom: 1px solid var(--wb-color-line);
        border-radius: 0;
        background: transparent;
    }

    .staff-card__media[b-atdf3yotvj] {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        margin: 0;
        border-radius: var(--wb-radius-sm);
    }

    .wb-page .staff-card__name[b-atdf3yotvj] {
        grid-column: 2;
        align-self: end;
        margin: 0;
    }

    .wb-page .staff-card__title[b-atdf3yotvj] {
        grid-column: 2;
        align-self: start;
    }
}
/* /Components/Pages/AboutUs/Staff/ManagerCard.razor.rz.scp.css */
.manager-card[b-wbk1kdbg0t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--wb-space-3) 0;
    border-bottom: 1px solid var(--wb-mist-deep);
}

.manager-card__name[b-wbk1kdbg0t] {
    font-weight: 700;
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink);
}

.manager-card__title[b-wbk1kdbg0t] {
    font-size: 15px;
    line-height: 1.5;
}
/* /Components/Pages/AboutUs/Staff/Staff.razor.rz.scp.css */
/* Four executives across on a wide screen; the trustees, with more on each card, get wider cards. */
.staff-grid[b-yzvzlwpe65] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cards keep their own height, so opening one biography doesn't stretch the others in its row. */
.staff-grid--trustees[b-yzvzlwpe65] {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    align-items: start;
}

.manager-list[b-yzvzlwpe65] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0 var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* /Components/Pages/AboutUs/Staff/TrusteeCard.razor.rz.scp.css */
.trustee-card[b-6wnhhtlnun] {
    gap: var(--wb-space-1);
}

/* The portraits are 400 by 509; a shorter frame anchored at the top keeps the three-across cards from running long. */
.trustee-card__media[b-6wnhhtlnun] {
    aspect-ratio: 4 / 4.2;
    background: var(--wb-mist);
}

.trustee-card__media[b-6wnhhtlnun]  .trustee-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.wb-page .trustee-card__name[b-6wnhhtlnun] {
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}

.wb-page .trustee-card__area[b-6wnhhtlnun] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--wb-ink-soft);
}

.trustee-card__links[b-6wnhhtlnun] {
    margin: var(--wb-space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.trustee-card__links li + li[b-6wnhhtlnun] {
    margin-top: var(--wb-space-1);
}

/* The biography toggle sits under the links and looks like them (.wb-page a), with a small chevron that turns when
   the biography is open. */
/* The card's gap spaces it like one more line of the list above. */
.trustee-card__bio[b-6wnhhtlnun] {
    font-size: 15px;
}

.trustee-card__bio summary[b-6wnhhtlnun] {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    list-style: none;
    font-weight: 600;
    color: var(--wb-color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.trustee-card__bio summary[b-6wnhhtlnun]::-webkit-details-marker {
    display: none;
}

.trustee-card__bio summary[b-6wnhhtlnun]::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.trustee-card__bio[open] summary[b-6wnhhtlnun]::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .trustee-card__bio summary[b-6wnhhtlnun]::after {
        transition: none;
    }
}

.trustee-card__bio summary:hover[b-6wnhhtlnun] {
    color: var(--wb-color-link-hover);
    text-decoration-thickness: 2px;
}

.trustee-card__bio summary:focus-visible[b-6wnhhtlnun] {
    outline: 3px solid var(--wb-river);
    outline-offset: 2px;
}

.wb-page .trustee-card__bio p[b-6wnhhtlnun] {
    margin: var(--wb-space-2) 0 0;
    font-size: 15px;
    line-height: 1.55;
}

/* Phones: a full-width card made each portrait about 370px tall, nine of them in a row. Each trustee is a flat row
   instead, a small portrait beside the name, area and links (the biography opens under them), with a line between
   trustees. */
@media (max-width: 599px) {
    .trustee-card[b-6wnhhtlnun] {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: var(--wb-space-4);
        row-gap: var(--wb-space-1);
        align-content: start;
        padding: 0 0 var(--wb-space-5);
        border: 0;
        border-bottom: 1px solid var(--wb-color-line);
        border-radius: 0;
        background: transparent;
    }

    .trustee-card__media[b-6wnhhtlnun] {
        grid-column: 1;
        grid-row: 1 / span 4;
        align-self: start;
        margin: 0;
        aspect-ratio: 4 / 5;
        border-radius: var(--wb-radius-sm);
    }

    .wb-page .trustee-card__name[b-6wnhhtlnun],
    .wb-page .trustee-card__area[b-6wnhhtlnun],
    .trustee-card__links[b-6wnhhtlnun],
    .trustee-card__bio[b-6wnhhtlnun] {
        grid-column: 2;
    }

    .wb-page .trustee-card__name[b-6wnhhtlnun] {
        margin: 0;
    }

    /* The open biography reaches back under the portrait to use the row's full width. The name, area and three
       links always stand taller than the 130px portrait, so the text starts below it. */
    .wb-page .trustee-card__bio p[b-6wnhhtlnun] {
        margin-left: calc(-104px - var(--wb-space-4));
    }
}
/* /Components/Pages/Conservation/About/About.razor.rz.scp.css */
/* theme-colors.css sets video to 45% width from 768px; inside a frame it fills the frame. */
[b-20ur7pwx9g] .about-video {
    margin: 0;
}

.about-video video[b-20ur7pwx9g] {
    width: 100%;
    height: auto;
}
/* /Components/Pages/Conservation/Classes/Calendar/ClassCalendar.razor.rz.scp.css */
/* The four shortcuts sit in a row under the slideshow: two across on tablets, one on phones. */
.class-links[b-rua0d2mhxq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--wb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The heading's anchor clears the sticky header when the band's button jumps here. */
.class-calendar[b-rua0d2mhxq] {
    scroll-margin-top: 130px;
}

.class-calendar__cards[b-rua0d2mhxq] {
    padding: 0;
    list-style: none;
}

.class-calendar__empty[b-rua0d2mhxq] {
    margin-top: var(--wb-space-5);
}
/* /Components/Pages/Conservation/Classes/Calendar/ClassCard.razor.rz.scp.css */
.class-card[b-230d5fqley] {
    gap: var(--wb-space-2);
}

.wb-page .class-card__date[b-230d5fqley] {
    margin: 0;
    font-size: var(--wb-text-sm);
    font-weight: 700;
    color: var(--wb-ink-soft);
}

.wb-page .class-card__title[b-230d5fqley] {
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}

.wb-page .class-card__title a[b-230d5fqley] {
    text-decoration: none;
}

.wb-page .class-card__title a:hover[b-230d5fqley] {
    text-decoration: underline;
}

.class-card__facts[b-230d5fqley] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-1) var(--wb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: var(--wb-ink);
}

.class-card__facts .fa[b-230d5fqley] {
    margin-right: var(--wb-space-1);
    color: var(--wb-ink-soft);
}

.wb-page .class-card__description[b-230d5fqley] {
    margin: var(--wb-space-1) 0 0;
    font-size: 15px;
    line-height: 1.55;
}

.wb-page .class-card__opens[b-230d5fqley] {
    margin: 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-ink-soft);
}
/* /Components/Pages/Conservation/Classes/Calendar/ClassLinkTileCard.razor.rz.scp.css */
/* The icon sits beside the text, so four shortcuts stay short enough to read as one row of choices. */
.class-link-tile[b-hmexpbcz3z] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wb-space-4);
    padding: var(--wb-space-4);
}

.class-link-tile__text[b-hmexpbcz3z] {
    min-width: 0;
}

.wb-page .class-link-tile__title[b-hmexpbcz3z] {
    margin-bottom: var(--wb-space-1);
    font-size: var(--wb-text-base);
    line-height: var(--wb-leading-snug);
}

.wb-page .class-link-tile__line[b-hmexpbcz3z] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}
/* /Components/Pages/Conservation/Classes/Files/ClassFiles.razor.rz.scp.css */
.class-files-table__class[b-t56hfrnee9] {
    display: block;
    font-weight: 700;
    color: var(--wb-ink);
}

.class-files-table__date[b-t56hfrnee9] {
    display: block;
    font-size: var(--wb-text-sm);
    color: var(--wb-ink-soft);
}

.class-files-table__added[b-t56hfrnee9] {
    white-space: nowrap;
}

/* On phones each file becomes a stacked block, labelled from data-label, instead of a three-column table. */
@media (max-width: 599px) {
    .class-files-table thead[b-t56hfrnee9] {
        display: none;
    }

    .class-files-table tr[b-t56hfrnee9] {
        display: block;
        padding: var(--wb-space-3) var(--wb-space-4);
        border-bottom: 1px solid var(--wb-mist-deep);
    }

    .class-files-table tbody tr:last-child[b-t56hfrnee9] {
        border-bottom: 0;
    }

    .class-files-table td[b-t56hfrnee9],
    .class-files-table tbody tr:last-child td[b-t56hfrnee9] {
        display: block;
        padding: 2px 0;
        border: 0;
    }

    .class-files-table td[data-label][b-t56hfrnee9]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--wb-ink);
    }
}
/* /Components/Pages/Conservation/Classes/Info/ClassInfo.razor.rz.scp.css */
/* Staff upload photos of any size; this keeps a tall one from pushing the description off the first screen. */
[b-0goqjvww27] .class-info__image {
    max-width: 640px;
    margin-bottom: var(--wb-space-6);
}

.class-info__image img[b-0goqjvww27] {
    max-height: 420px;
    object-fit: cover;
}

/* Staff type the description as plain text with line breaks. */
.class-info__description[b-0goqjvww27] {
    white-space: pre-line;
}

[b-0goqjvww27] .class-info__back {
    margin-top: var(--wb-space-5);
}

.wb-page .class-info__no-registration[b-0goqjvww27] {
    margin: 0;
    font-size: 15px;
}
/* /Components/Pages/Conservation/Classes/Info/ClassInfoRegisterButton.razor.rz.scp.css */
.wb-page .class-info-register__opens[b-kd0yq4oq0b] {
    margin: var(--wb-space-2) 0 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-ink-soft);
}
/* /Components/Pages/Conservation/Classes/Recordings/ClassRecordings.razor.rz.scp.css */
.recordings__grid[b-3irixwq79h] {
    padding: 0;
    list-style: none;
}

.recordings__back[b-3irixwq79h]  .wb-btn {
    margin-bottom: var(--wb-space-2);
}
/* /Components/Pages/Conservation/Classes/Recordings/RecordingTopicCard.razor.rz.scp.css */
/* Topic photos come in any shape, so they share one frame and are trimmed to fit it. */
.recording-topic__media[b-njhgwdhox9] {
    aspect-ratio: 3 / 2;
    background: var(--wb-mist);
}

.recording-topic__media[b-njhgwdhox9]  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-page .recording-topic__title[b-njhgwdhox9] {
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}
/* /Components/Pages/Conservation/Classes/Registration/ClassRegistration.razor.rz.scp.css */
.class-registration-form__actions[b-r6p7jhnh78] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-4);
    margin-top: var(--wb-space-5);
}

.wb-page .class-registration-form__payment[b-r6p7jhnh78] {
    flex: 1 1 100%;
    max-width: var(--wb-measure);
    margin: 0;
    font-weight: 600;
    color: var(--wb-ink);
}

.class-registration-form__saving[b-r6p7jhnh78] {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    font-weight: 700;
    color: var(--wb-ink);
}

/* The hidden attribute alone loses to the display rule above. */
.class-registration-form__saving[hidden][b-r6p7jhnh78] {
    display: none;
}

/* /Components/Pages/Conservation/Classes/Registration/RegistrationFields.razor.rz.scp.css */
/* Each group of fields is a mist panel with a heading, matching the Customer Service forms. The panel is tinted, so
   its text is a step darker than on white. */
.registration-panel[b-4tlozl4i2g] {
    margin-bottom: var(--wb-space-5);
    padding: var(--wb-space-5);
    border-radius: var(--wb-radius-md);
    background: var(--wb-mist);
    color: var(--wb-ink);
}

@media (min-width: 768px) {
    .registration-panel[b-4tlozl4i2g] {
        padding: var(--wb-space-6);
    }
}

.wb-page .registration-panel__title[b-4tlozl4i2g] {
    margin: 0 0 var(--wb-space-4);
    font-size: var(--wb-text-xl);
}

/* Two fields to a row from 600px, one on phones. */
.registration-panel__grid[b-4tlozl4i2g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0 var(--wb-space-5);
}

.registration-panel .wb-field:last-child[b-4tlozl4i2g] {
    margin-bottom: 0;
}

.wb-page .registration-panel__fine-print[b-4tlozl4i2g] {
    max-width: var(--wb-measure);
    margin: var(--wb-space-1) 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wb-ink-soft);
}

/* Blazor's validation output, in the system's error style. */
.registration-panel[b-4tlozl4i2g]  .validation-message {
    margin-top: var(--wb-space-2);
    font-size: var(--wb-text-sm);
    font-weight: 600;
    color: var(--wb-mahogany);
}

.registration-panel[b-4tlozl4i2g]  .wb-field__input.invalid {
    border-color: var(--wb-mahogany);
}

/* While the empty "Choose one" prompt is chosen it reads as the DevExpress combo box's placeholder; the open list
   keeps the text color. This lives here, not in design-system.css, because the bundle's minifier can't parse it. */
.registration-panel[b-4tlozl4i2g]  select.wb-field__input:has(option[value=""]:checked) {
    color: var(--wb-color-placeholder);
}

.registration-panel[b-4tlozl4i2g]  select.wb-field__input option {
    color: var(--wb-color-text-strong);
}
/* /Components/Pages/Conservation/Classes/Shared/ClassVideoCard.razor.rz.scp.css */
.class-video-card__media[b-xw7btgwpyp] {
    aspect-ratio: 16 / 9;
    background: var(--wb-mist);
}

.class-video-card__media[b-xw7btgwpyp]  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-page .class-video-card__title[b-xw7btgwpyp] {
    font-size: var(--wb-text-base);
    line-height: var(--wb-leading-snug);
}
/* /Components/Pages/Conservation/Classes/Video/ClassVideo.razor.rz.scp.css */
.class-video__player[b-7my3ljs1im]  .wb-media-frame {
    background: #000;
}

.video-facade[b-7my3ljs1im] {
    padding: 0;
    border: 0;
    background-color: #000;
    cursor: pointer;
}

.video-facade[b-7my3ljs1im]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-facade-play[b-7my3ljs1im] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background-color: rgba(12, 39, 66, 0.85);
    transition: background-color 0.15s ease;
}

.video-facade-play[b-7my3ljs1im]::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 28px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent var(--wb-color-on-dark-strong);
}

.video-facade:hover .video-facade-play[b-7my3ljs1im],
.video-facade:focus .video-facade-play[b-7my3ljs1im] {
    background-color: var(--wb-river);
}

.video-facade:focus-visible[b-7my3ljs1im] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: -3px;
}

.class-video__others[b-7my3ljs1im] {
    padding: 0;
    list-style: none;
}
/* /Components/Pages/Conservation/CustomerPortal/CustomerPortal.razor.rz.scp.css */
.portal-closing[b-bxgdyu7fpu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-4) var(--wb-space-6);
}

.portal-closing p[b-bxgdyu7fpu] {
    margin: 0;
}

.wb-page .portal-closing .wb-section__title[b-bxgdyu7fpu] {
    margin-bottom: var(--wb-space-2);
}
/* /Components/Pages/Conservation/Home/ConservationCalendar.razor.rz.scp.css */
.wb-calendar[b-dqfme8e4o5] {
    /* Clears the sticky header when a month link jumps here. */
    scroll-margin-top: 130px;
}

.wb-calendar-header[b-dqfme8e4o5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wb-space-2);
}

.wb-page .wb-calendar-title[b-dqfme8e4o5] {
    margin: 0;
    font-size: var(--wb-text-base);
    line-height: 36px;
    color: var(--wb-ink);
}

.wb-page .wb-calendar-nav[b-dqfme8e4o5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    font-size: 12px;
    color: var(--wb-navy);
    text-decoration: none;
}

.wb-page .wb-calendar-nav:hover[b-dqfme8e4o5] {
    border-color: var(--wb-river);
    color: var(--wb-river);
}

.wb-calendar-grid[b-dqfme8e4o5] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

.wb-calendar-grid th[b-dqfme8e4o5] {
    padding-bottom: var(--wb-space-2);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--wb-ink-soft);
}

.wb-calendar-grid abbr[title][b-dqfme8e4o5] {
    border-bottom: none;
    text-decoration: none;
    cursor: default;
}

.wb-calendar-grid td[b-dqfme8e4o5] {
    height: 38px;
    padding: 1px 0;
    font-size: 14px;
    color: var(--wb-ink);
}

.wb-calendar-grid td > span[b-dqfme8e4o5],
.wb-calendar-grid td > a[b-dqfme8e4o5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--wb-radius-sm);
}

.wb-calendar-grid td.is-today > span[b-dqfme8e4o5] {
    box-shadow: inset 0 0 0 2px var(--wb-navy);
    font-weight: 700;
}

/* A day with a class is a filled river square: the one color that means "you can click this". */
.wb-page .conservation-day[b-dqfme8e4o5] {
    background: var(--wb-river);
    font-weight: 700;
    color: var(--wb-color-on-dark-strong);
    text-decoration: none;
}

.wb-page .conservation-day:hover[b-dqfme8e4o5] {
    background: var(--wb-river-deep);
    color: var(--wb-color-on-dark-strong);
}

.wb-calendar-grid td.is-today > .conservation-day[b-dqfme8e4o5] {
    box-shadow: 0 0 0 2px var(--wb-color-surface), 0 0 0 4px var(--wb-navy);
}
/* /Components/Pages/Conservation/Home/ConservationHome.razor.rz.scp.css */
.conservation-tiles[b-ynirlt1fdp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.conservation-classes[b-ynirlt1fdp]  .wb-card {
    gap: var(--wb-space-4);
}

.conservation-newsletter[b-ynirlt1fdp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-4) var(--wb-space-6);
}

.conservation-newsletter p[b-ynirlt1fdp] {
    margin: 0;
}

.conservation-newsletter .wb-section__title[b-ynirlt1fdp] {
    margin-bottom: var(--wb-space-2);
}

@media (max-width: 599px) {
    .conservation-tiles[b-ynirlt1fdp] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wb-space-3);
    }
}
/* /Components/Pages/Conservation/Home/ConservationTile.razor.rz.scp.css */
.conservation-tile[b-87a8qo79yr] {
    gap: var(--wb-space-2);
}

/* The pictures are square, some with words near their edges, so the frame is square too and nothing is cut off. */
.conservation-tile__media[b-87a8qo79yr] {
    aspect-ratio: 1 / 1;
    background: var(--wb-mist);
}

.conservation-tile__media img[b-87a8qo79yr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-page .conservation-tile__title[b-87a8qo79yr] {
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}

.conservation-tile__caption[b-87a8qo79yr] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.conservation-tile--soon .conservation-tile__media img[b-87a8qo79yr] {
    opacity: 0.55;
}

.conservation-tile__soon[b-87a8qo79yr] {
    align-self: flex-start;
    justify-self: start;
}

/* On phones nine full-width squares are a long scroll, so each card becomes a row: a small picture beside the title
   and line. */
@media (max-width: 599px) {
    .conservation-tile[b-87a8qo79yr] {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: var(--wb-space-4);
        row-gap: var(--wb-space-1);
        align-items: start;
        align-content: start;
        padding: var(--wb-space-3);
    }

    .conservation-tile .conservation-tile__media[b-87a8qo79yr] {
        grid-row: 1 / span 3;
        width: 88px;
        margin: 0;
        border-radius: var(--wb-radius-sm);
    }

    .conservation-tile__title[b-87a8qo79yr],
    .conservation-tile__caption[b-87a8qo79yr],
    .conservation-tile__soon[b-87a8qo79yr] {
        grid-column: 2;
    }

    .wb-page .conservation-tile__title[b-87a8qo79yr] {
        font-size: var(--wb-text-base);
    }

    .conservation-tile__caption[b-87a8qo79yr] {
        font-size: 14px;
    }
}
/* /Components/Pages/Conservation/Home/UpcomingClassesList.razor.rz.scp.css */
.upcoming-classes[b-cpjtvbwkq1] {
    padding-top: var(--wb-space-4);
    border-top: 1px solid var(--wb-color-line);
}

.wb-page .upcoming-classes__title[b-cpjtvbwkq1] {
    margin: 0 0 var(--wb-space-2);
    font-size: var(--wb-text-base);
    color: var(--wb-ink);
}

.upcoming-classes__empty[b-cpjtvbwkq1] {
    margin: 0;
    font-size: 15px;
}

.upcoming-classes__list[b-cpjtvbwkq1] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.upcoming-classes__list li + li[b-cpjtvbwkq1] {
    border-top: 1px solid var(--wb-color-line);
}

.wb-page .upcoming-classes__link[b-cpjtvbwkq1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--wb-space-2) 0;
    text-decoration: none;
}

.upcoming-classes__date[b-cpjtvbwkq1] {
    font-size: 13px;
    font-weight: 700;
    color: var(--wb-ink-soft);
}

.upcoming-classes__name[b-cpjtvbwkq1] {
    font-weight: 600;
    color: var(--wb-river);
}

.wb-page .upcoming-classes__link:hover .upcoming-classes__name[b-cpjtvbwkq1] {
    text-decoration: underline;
}
/* /Components/Pages/Conservation/IrrigationBasics/HighUseCause.razor.rz.scp.css */
.high-use-cause[b-m1e2ffn4fb] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-2);
    padding: var(--wb-space-5);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface);
}

.high-use-cause__lead[b-m1e2ffn4fb] {
    margin: 0;
    font-size: var(--wb-text-lg);
    font-weight: 700;
    line-height: 1.4;
    color: var(--wb-color-text-strong);
}

.high-use-cause__body[b-m1e2ffn4fb]  p {
    margin: 0;
}

/* Nested in the causes list, so the browser would draw hollow circles. */
.high-use-cause__body[b-m1e2ffn4fb]  ul {
    margin: 0;
    padding-left: var(--wb-space-5);
    list-style: disc;
}

.high-use-cause__body[b-m1e2ffn4fb]  li::marker {
    color: var(--wb-river);
}

.high-use-cause__body[b-m1e2ffn4fb]  li {
    margin-bottom: var(--wb-space-2);
}

.high-use-cause__body[b-m1e2ffn4fb]  li:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .high-use-cause[b-m1e2ffn4fb] {
        padding: var(--wb-space-4);
    }
}
/* /Components/Pages/Conservation/IrrigationBasics/IrrigationBasics.razor.rz.scp.css */
/* ---- Why use can be high: tinted cards (HighUseCause) stacked with room between them ---- */
.high-use-causes[b-wqmcf6hkck] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
    max-width: var(--wb-measure);
    margin: 0 0 var(--wb-space-5);
    padding: 0;
    list-style: none;
}

/* ---- Basic lawn care: one card per practice. The cards' inner elements are written here, so they carry this
   page's scope even though Card renders the box around them. ---- */
.lawn-care-topics[b-wqmcf6hkck] {
    margin: var(--wb-space-5) 0;
}

.lawn-care-topic__lead[b-wqmcf6hkck] {
    margin: 0 0 var(--wb-space-3);
    font-size: var(--wb-text-lg);
    line-height: 1.5;
    color: var(--wb-color-text-strong);
}

.lawn-care-topic__intro[b-wqmcf6hkck] {
    margin: var(--wb-space-4) 0 var(--wb-space-3);
    padding-top: var(--wb-space-4);
    border-top: 1px solid var(--wb-color-line);
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.lawn-care-topic__list[b-wqmcf6hkck] {
    margin: 0;
    padding-left: var(--wb-space-5);
}

/* The Irrigation card spans the column, so its text keeps the reading measure. */
.lawn-care-topic__lead[b-wqmcf6hkck],
.lawn-care-topic__intro[b-wqmcf6hkck],
.lawn-care-topic__list[b-wqmcf6hkck],
.lawn-care-topic__body[b-wqmcf6hkck] {
    max-width: var(--wb-measure);
}

.lawn-care-topic__list li[b-wqmcf6hkck] {
    margin-bottom: var(--wb-space-3);
}

.lawn-care-topic__list li:last-child[b-wqmcf6hkck] {
    margin-bottom: 0;
}

.lawn-care-topic__list li[b-wqmcf6hkck]::marker {
    color: var(--wb-river);
}

/* ---- Landscape changes: the system's numbered steps under a small heading ---- */
.landscape-steps__title[b-wqmcf6hkck] {
    margin: var(--wb-space-5) 0 var(--wb-space-4);
    font-size: var(--wb-text-lg);
}

/* ---- Aside ---- */
.irrigation-tools[b-wqmcf6hkck] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.irrigation-tools li[b-wqmcf6hkck] {
    padding: var(--wb-space-3) 0;
    border-top: 1px solid var(--wb-mist-deep);
}

.irrigation-tools li:first-child[b-wqmcf6hkck] {
    padding-top: 0;
    border-top: 0;
}

.irrigation-tools li:last-child[b-wqmcf6hkck] {
    padding-bottom: 0;
}
/* /Components/Pages/Conservation/Landscapes/LandscapeIntro.razor.rz.scp.css */
.landscape-intro[b-j28l543uc3] {
    margin-bottom: var(--wb-space-7);
}
/* /Components/Pages/Conservation/Landscapes/LandscapePhotoGrid.razor.rz.scp.css */
.landscape-photos[b-scyy4wmusq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.landscape-photos__item[b-scyy4wmusq] {
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.landscape-photos__item img[b-scyy4wmusq] {
    display: block;
    width: 100%;
    height: auto;
}
/* /Components/Pages/Conservation/Landscapes/ParadeOfHomes/HomePhotoGallery.razor.rz.scp.css */
.home-gallery[b-kq78d6lcue] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The theme sets the gallery items' display, so hiding the extra photos' links needs !important. */
.hidden-photo[b-kq78d6lcue] {
    display: none !important;
}

.home-gallery__thumb[b-kq78d6lcue] {
    position: relative;
    display: block;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.home-gallery__thumb img[b-kq78d6lcue] {
    display: block;
    width: 100%;
    height: auto;
}

/* A magnifier in the corner says the photo opens larger. */
.home-gallery__zoom[b-kq78d6lcue] {
    position: absolute;
    right: var(--wb-space-2);
    bottom: var(--wb-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    color: var(--wb-navy);
}

.home-gallery__thumb:hover .home-gallery__zoom[b-kq78d6lcue] {
    background: var(--wb-color-surface);
    color: var(--wb-river);
}

.home-gallery__thumb:focus-visible[b-kq78d6lcue] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}
/* /Components/Pages/Conservation/Landscapes/ParadeOfHomes/ParadeHomeSection.razor.rz.scp.css */
/* The gallery thumbnail beside the home's details, with a line between homes, laid out like the topics on the
   Landscape Examples page. */
.parade-home[b-7ldfz3h499] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wb-space-4);
    align-items: start;
    padding: var(--wb-space-6) 0;
    border-top: 1px solid var(--wb-color-line);
}

.parade-home:first-of-type[b-7ldfz3h499] {
    padding-top: 0;
    border-top: 0;
}

.wb-page .parade-home__title[b-7ldfz3h499] {
    margin-bottom: var(--wb-space-3);
    font-size: var(--wb-text-2xl);
}

[b-7ldfz3h499] .parade-home__facts {
    margin-bottom: 0;
}

[b-7ldfz3h499] .parade-home__actions {
    margin-bottom: 0;
}

@media (min-width: 600px) {
    .parade-home[b-7ldfz3h499] {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: var(--wb-space-6);
    }
}
/* /Components/Pages/Conservation/LearningGarden/LearningGarden.razor.rz.scp.css */
/* The plant lists dialog. .wb-dialog (design-system.css) draws the frame and backdrop; this narrows it and gives
   the contents the system's type, corners and lines. */
.plant-list-dialog[b-hpdv5zg4zt] {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.plant-list-content[b-hpdv5zg4zt] {
    border: 0;
    border-radius: var(--wb-radius-md);
    box-shadow: var(--wb-shadow-float);
}

.plant-list-header[b-hpdv5zg4zt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4) var(--wb-space-5);
    border-bottom: 1px solid var(--wb-color-line);
}

.plant-list-header[b-hpdv5zg4zt]::before,
.plant-list-header[b-hpdv5zg4zt]::after {
    display: none;
}

.wb-page .plant-list-title[b-hpdv5zg4zt] {
    margin: 0;
    font-size: var(--wb-text-xl);
}

.plant-list-close[b-hpdv5zg4zt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    background: transparent;
    font-size: 14px;
    color: var(--wb-navy);
    cursor: pointer;
}

.plant-list-close:hover[b-hpdv5zg4zt] {
    border-color: var(--wb-river);
    color: var(--wb-river);
}

.plant-list-body[b-hpdv5zg4zt] {
    padding: var(--wb-space-4) var(--wb-space-5) var(--wb-space-5);
}

.wb-page .plant-list-intro[b-hpdv5zg4zt] {
    margin-bottom: var(--wb-space-2);
    font-size: 15px;
    color: var(--wb-ink-soft);
}

.plant-list-links[b-hpdv5zg4zt] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plant-list-links li + li[b-hpdv5zg4zt] {
    border-top: 1px solid var(--wb-color-line);
}

.wb-page .plant-list-links[b-hpdv5zg4zt]  a {
    display: block;
    padding: var(--wb-space-3) 0;
}
/* /Components/Pages/Conservation/Learn/Learn.razor.rz.scp.css */
/* Phones stack the photo over the text; from 768px the photo sits beside it. */
.learn-layout[b-27x5j99pf2] {
    display: grid;
    gap: var(--wb-space-5);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

[b-27x5j99pf2] .learn-photo {
    margin: 0;
}

/* Standing in the garden, people read at arm's length, so the description runs a size up on phones. */
.wb-page .learn-description[b-27x5j99pf2] {
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-body);
}

@media (min-width: 768px) {
    .learn-layout[b-27x5j99pf2] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--wb-space-7);
    }

    .wb-page .learn-description[b-27x5j99pf2] {
        font-size: var(--wb-text-base);
    }
}

.learn-resources[b-27x5j99pf2] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wb-color-line);
}

.learn-resources__item[b-27x5j99pf2] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-1);
    padding: var(--wb-space-3) 0;
    border-bottom: 1px solid var(--wb-color-line);
}

.learn-resources__description[b-27x5j99pf2] {
    font-weight: 600;
    color: var(--wb-ink);
}

/* A full-width tap target on phones; the file name can be long, so it wraps. */
.learn-resources[b-27x5j99pf2]  .learn-resources__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    min-height: 44px;
    overflow-wrap: anywhere;
}

.learn-onward p[b-27x5j99pf2] {
    max-width: var(--wb-measure);
    color: var(--wb-ink);
}

.learn-onward__buttons[b-27x5j99pf2]  .wb-btn-group {
    margin-bottom: 0;
}
/* /Components/Pages/Conservation/Plants/PlantInfo/BloomColorDot.razor.rz.scp.css */
/* The swatches are the flowers' own colors, not the site's, so they keep their hues. Each has a thin ink edge so pale
   ones (white, yellow) still show on white and mist. */
.color-dot[b-lxj36uhgvf] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--wb-space-1);
    border: 1px solid rgba(22, 33, 58, 0.35);
    border-radius: 50%;
    vertical-align: -2px;
}

.color-dot--large[b-lxj36uhgvf] {
    width: 18px;
    height: 18px;
    margin-right: 0;
    vertical-align: middle;
}

.color-dot--pink[b-lxj36uhgvf] {
    background: #FF69B4;
}

.color-dot--white[b-lxj36uhgvf] {
    background: #FFFFFF;
}

.color-dot--yellow[b-lxj36uhgvf] {
    background: #FFD700;
}

.color-dot--purple[b-lxj36uhgvf] {
    background: #8A2BE2;
}

.color-dot--red[b-lxj36uhgvf] {
    background: #DC143C;
}

.color-dot--orange[b-lxj36uhgvf] {
    background: #FF8C00;
}

.color-dot--blue[b-lxj36uhgvf] {
    background: #4169E1;
}

.color-dot--green[b-lxj36uhgvf] {
    background: #228B22;
}

/* Mixed blooms show as a split swatch of three colors, the one place a multi-color fill means something. */
.color-dot--mixture[b-lxj36uhgvf] {
    background: conic-gradient(#FF69B4 0 33%, #FFD700 0 66%, #4169E1 0);
}
/* /Components/Pages/Conservation/Plants/PlantInfo/BloomSeasonIcon.razor.rz.scp.css */
/* Each season keeps a color of its own, from the district palette where one fits, darkened to read on white and mist. */
.bloom-icon[b-mvtghum9au] {
    width: 1.1em;
    text-align: center;
}

.bloom-icon--spring[b-mvtghum9au] {
    color: var(--wb-garden-green-ink);
}

.bloom-icon--summer[b-mvtghum9au] {
    color: var(--wb-sandstone-ink);
}

.bloom-icon--fall[b-mvtghum9au] {
    color: var(--wb-mahogany);
}
/* /Components/Pages/Conservation/Plants/PlantInfo/PlantAlphaBar.razor.rz.scp.css */
.alpha-bar[b-zz0dtjx7vw] {
    margin: 0 0 var(--wb-space-5);
}

.alpha-bar__list[b-zz0dtjx7vw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.alpha-bar__button[b-zz0dtjx7vw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--wb-space-2);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-surface);
    font-family: var(--wb-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--wb-navy);
    cursor: pointer;
    transition: border-color 0.15s var(--wb-ease), background-color 0.15s var(--wb-ease), color 0.15s var(--wb-ease);
}

.alpha-bar__button--all[b-zz0dtjx7vw] {
    padding: 0 var(--wb-space-3);
}

.alpha-bar__button:hover[b-zz0dtjx7vw] {
    border-color: var(--wb-river);
    color: var(--wb-river);
}

.alpha-bar__button:focus-visible[b-zz0dtjx7vw] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

.alpha-bar__button[aria-pressed="true"][b-zz0dtjx7vw] {
    border-color: var(--wb-river);
    background: var(--wb-river);
    color: var(--wb-color-on-dark-strong);
}

/* Phones get a slightly smaller key so the alphabet wraps onto three rows instead of five. */
@media (max-width: 599px) {
    .alpha-bar__button[b-zz0dtjx7vw] {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }
}
/* /Components/Pages/Conservation/Plants/PlantInfo/PlantCardItem.razor.rz.scp.css */
/* A bordered result card, like .wb-card--link: the name button's overlay covers the card, so a click anywhere opens
   the plant, and the border turns river under the pointer. */
.plant-card[b-sa2ngd8x1u] {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--wb-space-5);
    align-items: start;
    margin-bottom: var(--wb-space-3);
    padding: var(--wb-space-4);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-surface);
    transition: border-color 0.15s var(--wb-ease);
}

.plant-card:hover[b-sa2ngd8x1u] {
    border-color: var(--wb-river);
}

.plant-card__media[b-sa2ngd8x1u] {
    border-radius: var(--wb-radius-sm);
    overflow: hidden;
    background: var(--wb-mist);
}

.plant-card__media img[b-sa2ngd8x1u] {
    display: block;
    width: 160px;
    height: 120px;
    object-fit: cover;
}

.plant-card__body[b-sa2ngd8x1u] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-1);
    min-width: 0;
}

.wb-page .plant-card__title[b-sa2ngd8x1u] {
    margin: 0;
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}

.plant-card__name[b-sa2ngd8x1u] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--wb-navy);
    cursor: pointer;
}

.plant-card__name[b-sa2ngd8x1u]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--wb-radius-md);
}

.plant-card:hover .plant-card__name[b-sa2ngd8x1u] {
    color: var(--wb-river);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.plant-card__name:focus-visible[b-sa2ngd8x1u] {
    outline: none !important;
}

.plant-card__name:focus-visible[b-sa2ngd8x1u]::after {
    outline: 3px solid var(--wb-river);
    outline-offset: 2px;
}

.wb-page .plant-card__botanical[b-sa2ngd8x1u] {
    margin: 0;
    font-style: italic;
    color: var(--wb-ink-soft);
}

/* Descriptions run long; three lines are enough to choose from, and the popup has the rest. */
.wb-page .plant-card__description[b-sa2ngd8x1u] {
    display: -webkit-box;
    margin: var(--wb-space-1) 0 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    color: var(--wb-ink-soft);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.plant-card__facts[b-sa2ngd8x1u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-1) var(--wb-space-4);
    margin-top: var(--wb-space-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--wb-ink);
}

.plant-card__icons[b-sa2ngd8x1u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-2);
    margin: var(--wb-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.plant-card__icons img[b-sa2ngd8x1u] {
    display: block;
    width: 24px;
    height: 24px;
}

@media (max-width: 599px) {
    .plant-card[b-sa2ngd8x1u] {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: var(--wb-space-3);
        padding: var(--wb-space-3);
    }

    .plant-card__media img[b-sa2ngd8x1u] {
        width: 96px;
        height: 96px;
    }

    .wb-page .plant-card__title[b-sa2ngd8x1u] {
        font-size: var(--wb-text-base);
    }

    .wb-page .plant-card__description[b-sa2ngd8x1u] {
        -webkit-line-clamp: 2;
    }
}
/* /Components/Pages/Conservation/Plants/PlantInfo/PlantDetailView.razor.rz.scp.css */
/* The popup's own frame comes from DevExpress; everything inside it is drawn here. .wb-page on the wrapper brings
   the system's type, but not its page padding, which this resets. */
.plant-detail[b-zsd0cnymt4] {
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    background: var(--wb-surface);
}

.plant-detail__header[b-zsd0cnymt4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wb-space-4);
    padding-bottom: var(--wb-space-4);
    border-bottom: 1px solid var(--wb-color-line);
}

.wb-page .plant-detail__title[b-zsd0cnymt4] {
    margin: 0;
    font-size: var(--wb-text-2xl);
    line-height: var(--wb-leading-tight);
    color: var(--wb-navy);
}

.wb-page .plant-detail__botanical[b-zsd0cnymt4] {
    margin: var(--wb-space-1) 0 0;
    font-style: italic;
    color: var(--wb-ink-soft);
}

.plant-detail__close[b-zsd0cnymt4] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-surface);
    font-size: 16px;
    color: var(--wb-navy);
    cursor: pointer;
}

.plant-detail__close:hover[b-zsd0cnymt4] {
    border-color: var(--wb-river);
    color: var(--wb-river);
}

.plant-detail__close:focus-visible[b-zsd0cnymt4] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

.plant-detail__body[b-zsd0cnymt4] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--wb-space-4) 0;
}

.plant-detail__summary[b-zsd0cnymt4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wb-space-4);
}

@media (min-width: 600px) {
    .plant-detail__summary[b-zsd0cnymt4] {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }
}

[b-zsd0cnymt4] .plant-detail__image {
    margin: 0;
}

.plant-detail__image img[b-zsd0cnymt4] {
    max-height: 260px;
    object-fit: cover;
}

[b-zsd0cnymt4] .plant-detail__facts {
    margin: 0;
    font-size: 15px;
}

.plant-detail__season[b-zsd0cnymt4] {
    margin-right: var(--wb-space-3);
    white-space: nowrap;
}

.plant-detail__traits[b-zsd0cnymt4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2);
    margin: var(--wb-space-4) 0 0;
    padding: 0;
    list-style: none;
}

.plant-detail__traits li[b-zsd0cnymt4] {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-1) var(--wb-space-3) var(--wb-space-1) var(--wb-space-1);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-mist);
    font-size: 14px;
    font-weight: 600;
    color: var(--wb-ink);
}

.plant-detail__traits img[b-zsd0cnymt4] {
    display: block;
    width: 28px;
    height: 28px;
}

.wb-page .plant-detail__subheading[b-zsd0cnymt4] {
    margin: var(--wb-space-5) 0 var(--wb-space-2);
    font-size: var(--wb-text-base);
    color: var(--wb-ink);
}

.wb-page .plant-detail__description[b-zsd0cnymt4] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.plant-detail__similar[b-zsd0cnymt4] {
    max-height: 240px;
    margin: 0;
    overflow-y: auto;
}

.plant-detail__similar-name[b-zsd0cnymt4] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--wb-river);
    cursor: pointer;
}

.plant-detail__similar-name:hover[b-zsd0cnymt4] {
    color: var(--wb-river-deep);
    text-decoration: underline;
}

.plant-detail__similar-name:focus-visible[b-zsd0cnymt4] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

.plant-detail-field--botanical[b-zsd0cnymt4] {
    font-style: italic;
}

.plant-detail__footer[b-zsd0cnymt4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-3);
    padding-top: var(--wb-space-4);
    border-top: 1px solid var(--wb-color-line);
}
/* /Components/Pages/Conservation/Plants/PlantInfo/PlantFilterRow.razor.rz.scp.css */
/* The label sits above its options on phones and beside them from 768px, so the options line up in one column. */
.filter-row[b-kjbmynaa4u] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-1);
}

.filter-row-label[b-kjbmynaa4u] {
    font-size: 14px;
    font-weight: 700;
    color: var(--wb-ink);
}

.filter-row__options[b-kjbmynaa4u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-1) var(--wb-space-4);
}

.filter-row[b-kjbmynaa4u]  .filter-option {
    min-height: 32px;
    cursor: pointer;
}

/* Bootstrap 3 makes every label bold; the options read as plain choices. */
.filter-row[b-kjbmynaa4u]  .filter-option label {
    margin-bottom: 0;
    font-family: var(--wb-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--wb-ink);
    cursor: pointer;
}

.filter-icon[b-kjbmynaa4u] {
    width: 20px;
    height: 20px;
    margin-right: var(--wb-space-1);
    vertical-align: middle;
}

@media (min-width: 768px) {
    .filter-row[b-kjbmynaa4u] {
        flex-direction: row;
        align-items: baseline;
        gap: var(--wb-space-4);
    }

    .filter-row-label[b-kjbmynaa4u] {
        flex: 0 0 96px;
    }
}
/* /Components/Pages/Conservation/Plants/PlantInfo/PlantInfo.razor.rz.scp.css */
.plant-filters[b-8cp76532a6]  .wb-card {
    gap: var(--wb-space-4);
    margin-bottom: var(--wb-space-5);
}

.wb-page .plant-filters__title[b-8cp76532a6] {
    margin: 0;
    font-size: var(--wb-text-xl);
}

/* The DevExpress search box takes the system's input: a granite edge, 4px corners and the river focus ring. */
.plant-search-box[b-8cp76532a6]  .plant-search-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--wb-granite);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-surface);
    box-shadow: none;
}

.plant-search-box[b-8cp76532a6]  .plant-search-input:focus-within {
    border-color: var(--wb-river);
    box-shadow: var(--wb-ring);
}

.plant-search-box[b-8cp76532a6]  .plant-search-input .dxbl-text-edit-input {
    padding: 10px 14px;
    font-family: var(--wb-font);
    font-size: 16px;
    color: var(--wb-ink);
}

.plant-filters__rows[b-8cp76532a6] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
}

.plant-filters__footer[b-8cp76532a6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-3);
    padding-top: var(--wb-space-4);
    border-top: 1px solid var(--wb-mist-deep);
}

.plant-filters__count[b-8cp76532a6] {
    font-size: 15px;
    font-weight: 600;
    color: var(--wb-ink);
}

.plant-results[b-8cp76532a6] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pager-bar[b-8cp76532a6] {
    display: flex;
    justify-content: center;
    padding: var(--wb-space-5) 0 0;
}

/* The pager takes the alphabet bar's look: bordered 4px keys, river for the current page. DevExpress draws it inline
   inside .pager-bar, so ::deep reaches its buttons. */
.pager-bar[b-8cp76532a6]  .dxbl-btn {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-surface);
    box-shadow: none;
    font-family: var(--wb-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--wb-navy);
}

.pager-bar[b-8cp76532a6]  .dxbl-btn:hover:not(:disabled) {
    border-color: var(--wb-river);
    color: var(--wb-river);
}

.pager-bar[b-8cp76532a6]  .dxbl-btn:focus-visible {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

.pager-bar[b-8cp76532a6]  .dxbl-btn.dxbl-active,
.pager-bar[b-8cp76532a6]  .dxbl-btn[aria-current="page"] {
    border-color: var(--wb-river);
    background: var(--wb-river);
    color: var(--wb-color-on-dark-strong);
}

.plant-detail-error[b-8cp76532a6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wb-space-3);
}

.plant-detail-error p[b-8cp76532a6] {
    margin: 0;
}
/* /Components/Pages/Conservation/Plants/PlantLookup/PlantLookup.razor.rz.scp.css */
/* The photo comes first in the markup so phones see it above the details; --swap keeps it on the right from 992px. */
.lookup-photo[b-cnxnabw40t] {
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.lookup-photo img[b-cnxnabw40t] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

/* The facts list is PlantLookupDetails' outermost element, so its spacing is set from this page. */
[b-cnxnabw40t] .lookup-facts {
    margin-bottom: var(--wb-space-6);
}
/* /Components/Pages/Conservation/Plants/PlantLookup/PlantLookupDetails.razor.rz.scp.css */
.wb-page .lookup-subheading[b-tkilen30y9] {
    margin: 0 0 var(--wb-space-3);
    font-size: var(--wb-text-xl);
}

.lookup-characteristics[b-tkilen30y9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-3);
    margin: 0 0 var(--wb-space-6);
    padding: 0;
    list-style: none;
}

.lookup-characteristics li[b-tkilen30y9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wb-space-1);
    width: 88px;
    padding: var(--wb-space-3) var(--wb-space-2);
    border-radius: var(--wb-radius-md);
    background: var(--wb-mist);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--wb-ink);
}
/* /Components/Pages/Conservation/Rebates/LawnExchangeChecklist.razor.rz.scp.css */
/* Checklist headings inside the details block read as labels at body size, not as section headings. */
.wb-page .rebate-label[b-10g3j8ygck] {
    margin: var(--wb-space-5) 0 var(--wb-space-2);
    font-size: var(--wb-text-base);
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink);
}

.wb-page .checklist[b-10g3j8ygck] {
    padding-left: 0;
    list-style: none;
}

.checklist li[b-10g3j8ygck] {
    position: relative;
    padding-left: var(--wb-space-6);
}

/* An empty box before each item, for applicants to tick on a printout. */
.checklist li[b-10g3j8ygck]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--wb-ink-soft);
    border-radius: 2px;
}
/* /Components/Pages/Conservation/Rebates/LawnExchangeRules.razor.rz.scp.css */
/* Rule headings inside the details block read as labels at body size, not as section headings. */
.wb-page .rebate-label[b-6d33k3d9p7] {
    margin: var(--wb-space-5) 0 var(--wb-space-2);
    font-size: var(--wb-text-base);
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink);
}

.wb-page .rebate-label:first-child[b-6d33k3d9p7] {
    margin-top: 0;
}

.program-steps__parts[b-6d33k3d9p7] {
    margin: var(--wb-space-2) 0 0;
    list-style-type: lower-alpha;
}

.program-steps__note[b-6d33k3d9p7] {
    font-size: var(--wb-text-sm);
    color: var(--wb-ink-soft);
}
/* /Components/Pages/Conservation/Rebates/RebateDetails.razor.rz.scp.css */
/* conservation.css still carries the old site's look for these; the scope attribute outranks it. */
.rebate-details[b-yd7y5xw947] {
    margin: 0 0 var(--wb-space-3);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-surface);
}

.rebate-details > summary[b-yd7y5xw947] {
    position: relative;
    display: block;
    min-height: 44px;
    padding: var(--wb-space-3) 44px var(--wb-space-3) var(--wb-space-4);
    background: var(--wb-surface);
    font-weight: 600;
    line-height: var(--wb-leading-snug);
    color: var(--wb-river);
    cursor: pointer;
    list-style: none;
}

.rebate-details > summary[b-yd7y5xw947]::-webkit-details-marker {
    display: none;
}

.rebate-details > summary:hover[b-yd7y5xw947] {
    background: var(--wb-mist);
    color: var(--wb-river-deep);
}

.rebate-details > summary:focus-visible[b-yd7y5xw947] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

/* A chevron that turns when the block opens, drawn from the icon font the site already loads. */
.rebate-details > summary[b-yd7y5xw947]::after {
    content: "\f107";
    position: absolute;
    top: 50%;
    right: var(--wb-space-4);
    transform: translateY(-50%);
    font-family: FontAwesome;
    font-size: 18px;
    line-height: 1;
}

.rebate-details[open] > summary[b-yd7y5xw947]::after {
    content: "\f106";
}

.rebate-details[open] > summary[b-yd7y5xw947] {
    border-bottom: 1px solid var(--wb-color-line);
}

.rebate-details__body[b-yd7y5xw947] {
    max-width: none;
    padding: var(--wb-space-4);
}
/* /Components/Pages/Conservation/Rebates/RebateOption.razor.rz.scp.css */
/* Residential and commercial sit one after the other inside a program, with a line between them. */
.rebate-option + .rebate-option[b-t85rtqx1fc] {
    margin-top: var(--wb-space-6);
    padding-top: var(--wb-space-6);
    border-top: 1px solid var(--wb-color-line);
}

.wb-page .rebate-option__title[b-t85rtqx1fc] {
    margin: 0 0 var(--wb-space-2);
}

[b-t85rtqx1fc] .rebate-option__actions {
    margin: var(--wb-space-4) 0 0;
}
/* /Components/Pages/Conservation/Rebates/Rebates.razor.rz.scp.css */
/* The city lists run in columns so the long one doesn't scroll on and on. */
.wb-page .rebate-cities[b-ll6dr7uz1a] {
    columns: 2 180px;
    column-gap: var(--wb-space-6);
    margin: 0;
    padding-left: var(--wb-space-5);
}

.rebate-cities li[b-ll6dr7uz1a] {
    break-inside: avoid;
}
/* /Components/Pages/Conservation/SecondaryWaterUseReport/SecondaryWaterUseReport.razor.rz.scp.css */
.use-report-sample[b-nuphpzpqw3]  .wb-media-frame {
    max-width: 760px;
    margin: 0;
    border: 1px solid var(--wb-color-line);
}

.use-report-sample[b-nuphpzpqw3]  img {
    display: block;
    width: 100%;
    height: auto;
}
/* /Components/Pages/Conservation/Shared/ConservationTopicSection.razor.rz.scp.css */
.topic-section[b-7b3a2jlhnk] {
    display: grid;
    gap: var(--wb-space-5);
    grid-template-columns: minmax(0, 1fr);
    scroll-margin-top: 130px;
}

/* A line between one topic and the next; the first one sits straight under the slideshow. */
.topic-section + .topic-section[b-7b3a2jlhnk] {
    margin-top: var(--wb-space-7);
    padding-top: var(--wb-space-7);
    border-top: 1px solid var(--wb-color-line);
}

.topic-section__picture[b-7b3a2jlhnk] {
    max-width: 240px;
}

.topic-section__picture img[b-7b3a2jlhnk] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wb-radius-md);
}

@media (min-width: 768px) {
    .topic-section[b-7b3a2jlhnk] {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: var(--wb-space-6);
        align-items: start;
    }

    .topic-section__picture[b-7b3a2jlhnk] {
        max-width: none;
    }
}
/* /Components/Pages/Conservation/Shared/GardenTopicSection.razor.rz.scp.css */
/* On phones the picture sits above its title; from 600px it moves into a column beside the text. The topics are a
   list a visitor scans, not cards, so they stay flat on the page with a line between them. */
.garden-topic[b-j7d58euibu] {
    display: grid;
    gap: var(--wb-space-4);
    align-items: start;
    padding: var(--wb-space-6) 0;
    border-top: 1px solid var(--wb-color-line);
}

.garden-topic:first-of-type[b-j7d58euibu] {
    padding-top: 0;
    border-top: 0;
}

/* The picture shows whole at its own shape. On phones it also stops at 240px tall, so a tall graphic such as the
   watering guide doesn't push its title off the screen; a wide photo fills the column instead. The mist shows as the
   loading box behind the empty placeholder. */
.garden-topic__media img[b-j7d58euibu] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--wb-radius-sm);
    background: var(--wb-mist);
}

.wb-page .garden-topic__title[b-j7d58euibu] {
    margin-bottom: var(--wb-space-2);
    font-size: var(--wb-text-xl);
}

.garden-topic__text[b-j7d58euibu] {
    margin-bottom: var(--wb-space-4);
}

@media (min-width: 600px) {
    .garden-topic[b-j7d58euibu] {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: var(--wb-space-6);
    }

    /* A compact picture stops short of the column so a square doesn't tower over the photos around it. */
    .garden-topic__media--compact[b-j7d58euibu] {
        max-width: 240px;
    }

    .garden-topic__media img[b-j7d58euibu] {
        width: 100%;
        max-height: none;
        border-radius: var(--wb-radius-md);
    }

    .wb-page .garden-topic__title[b-j7d58euibu] {
        font-size: var(--wb-text-2xl);
    }
}
/* /Components/Pages/Conservation/WarmSeasonLawn/InstallationLightbox.razor.rz.scp.css */
/* js/warm-season-lawn.js shows it by setting display: flex. Above the sticky site header (z-index 1000). */
.lightbox-modal[b-gwdh1pbany] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 64px var(--wb-space-4);
    background: rgba(7, 26, 46, 0.94);
}

.lightbox-content[b-gwdh1pbany] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    height: 100%;
}

.lightbox-figure[b-gwdh1pbany] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wb-space-3);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

#lightboxImage[b-gwdh1pbany] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-height: 0;
    border-radius: var(--wb-radius-md);
}

.lightbox-caption[b-gwdh1pbany] {
    flex: 0 0 auto;
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
    text-align: center;
    color: var(--wb-color-on-dark-strong);
}

.lightbox-close[b-gwdh1pbany],
.lightbox-prev[b-gwdh1pbany],
.lightbox-next[b-gwdh1pbany] {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--wb-radius-sm);
    background: var(--wb-color-surface);
    font-size: 16px;
    color: var(--wb-navy);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lightbox-close:hover[b-gwdh1pbany],
.lightbox-prev:hover[b-gwdh1pbany],
.lightbox-next:hover[b-gwdh1pbany] {
    background: var(--wb-sky-soft);
}

.lightbox-close[b-gwdh1pbany] {
    top: -56px;
    right: 0;
}

.lightbox-prev[b-gwdh1pbany],
.lightbox-next[b-gwdh1pbany] {
    top: 50%;
    margin-top: -22px;
}

.lightbox-prev[b-gwdh1pbany] {
    left: var(--wb-space-2);
}

.lightbox-next[b-gwdh1pbany] {
    right: var(--wb-space-2);
}

.lightbox-close:focus-visible[b-gwdh1pbany],
.lightbox-prev:focus-visible[b-gwdh1pbany],
.lightbox-next:focus-visible[b-gwdh1pbany] {
    outline: 3px solid var(--wb-sky) !important;
    outline-offset: 2px;
}
/* /Components/Pages/Conservation/WarmSeasonLawn/InstallationSlideshow.razor.rz.scp.css */
.installation-gallery-section[b-ljyimc771p] {
    margin: 0;
}

.wb-page .gallery-title[b-ljyimc771p] {
    margin-bottom: var(--wb-space-3);
    font-size: var(--wb-text-xl);
    color: var(--wb-navy);
}

/* Framed like .wb-media-frame: the system's corners on a mist background while the photo loads. */
.slideshow-wrapper[b-ljyimc771p] {
    position: relative;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
    /* A sideways swipe changes the photo (warm-season-lawn.js), not the browser's history. */
    touch-action: pan-y pinch-zoom;
}

#slideshowImage[b-ljyimc771p] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.3s ease;
}

/* Always visible, so keyboard and touch users can reach them, matching the Customer Service photo carousels. */
.slideshow-prev[b-ljyimc771p],
.slideshow-next[b-ljyimc771p] {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    color: var(--wb-navy);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.slideshow-prev[b-ljyimc771p] {
    left: var(--wb-space-3);
}

.slideshow-next[b-ljyimc771p] {
    right: var(--wb-space-3);
}

.slideshow-prev:hover[b-ljyimc771p],
.slideshow-next:hover[b-ljyimc771p] {
    background: var(--wb-color-surface);
    color: var(--wb-river);
}

.slideshow-expand[b-ljyimc771p] {
    position: absolute;
    right: var(--wb-space-3);
    bottom: var(--wb-space-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    min-height: 36px;
    padding: 0 var(--wb-space-3);
    border: 0;
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font-family: var(--wb-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--wb-navy);
    cursor: pointer;
}

.slideshow-expand:hover[b-ljyimc771p] {
    background: var(--wb-color-surface);
    color: var(--wb-river);
}

.slideshow-expand .fa[b-ljyimc771p] {
    font-size: 12px;
}

.slideshow-container[b-ljyimc771p] {
    margin: 0;
}

.slideshow-caption[b-ljyimc771p] {
    margin-top: var(--wb-space-2);
    font-size: 14px;
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink-soft);
}

.slideshow-dots[b-ljyimc771p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2);
    margin-top: var(--wb-space-2);
}

/* Each dot is a 24px button for an easy tap, drawn as a 10px circle. */
.dot[b-ljyimc771p] {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.dot[b-ljyimc771p]::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wb-mist-deep);
    box-shadow: inset 0 0 0 1px var(--wb-granite);
}

.dot:hover[b-ljyimc771p]::before {
    background: var(--wb-sky-soft);
}

.dot.active[b-ljyimc771p]::before {
    background: var(--wb-river);
    box-shadow: none;
}

.slideshow-prev:focus-visible[b-ljyimc771p],
.slideshow-next:focus-visible[b-ljyimc771p],
.slideshow-expand:focus-visible[b-ljyimc771p],
.dot:focus-visible[b-ljyimc771p] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #slideshowImage[b-ljyimc771p] {
        transition: none;
    }
}
/* /Components/Pages/Conservation/WarmSeasonLawn/LawnFeatures.razor.rz.scp.css */
.lawn-features__list[b-hlz3889wbr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--wb-space-5) var(--wb-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lawn-feature[b-hlz3889wbr] {
    display: flex;
    align-items: flex-start;
    gap: var(--wb-space-4);
}

.lawn-feature__icon[b-hlz3889wbr] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.wb-page .lawn-feature__title[b-hlz3889wbr] {
    margin: 0 0 var(--wb-space-1);
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
}

/* On the tinted section, text goes a step darker than on white. */
.wb-page .lawn-feature__text[b-hlz3889wbr] {
    margin: 0;
    color: var(--wb-ink);
}
/* /Components/Pages/Conservation/WarmSeasonLawn/LawnResourceLinks.razor.rz.scp.css */
.resource-links[b-3e2gwfzzo2] {
    margin: var(--wb-space-4) 0;
}

.wb-page .resource-links__heading[b-3e2gwfzzo2] {
    margin: 0 0 var(--wb-space-2);
    font-size: var(--wb-text-lg);
}

.resource-links__list[b-3e2gwfzzo2] {
    margin: 0;
    padding-left: var(--wb-space-5);
}

.resource-links__list li[b-3e2gwfzzo2] {
    margin-bottom: var(--wb-space-2);
}
/* /Components/Pages/Conservation/WarmSeasonLawn/LawnStoryNavigation.razor.rz.scp.css */
.navigation-section[b-0zrpmfvatq] {
    margin-bottom: var(--wb-space-6);
}

.story-steps[b-0zrpmfvatq] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-color-surface);
    list-style: none;
}

.story-steps li + li[b-0zrpmfvatq] {
    border-left: 1px solid var(--wb-color-line);
}

.wb-page .story-step[b-0zrpmfvatq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: var(--wb-space-4) var(--wb-space-5);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.wb-page .story-step:hover[b-0zrpmfvatq] {
    background: var(--wb-mist);
}

.step-title[b-0zrpmfvatq] {
    font-weight: 700;
    color: var(--wb-river);
}

.wb-page .story-step:hover .step-title[b-0zrpmfvatq] {
    text-decoration: underline;
}

.step-summary[b-0zrpmfvatq] {
    font-size: 14px;
    color: var(--wb-ink-soft);
}

@media (min-width: 768px) {
    .navigation-section[b-0zrpmfvatq] {
        margin-bottom: var(--wb-space-7);
    }
}

/* On narrow screens the five boxes would stack into most of a screen, so the links run as one wrapped row of
   titles and the summaries are left out. */
@media (max-width: 991px) {
    .story-steps[b-0zrpmfvatq] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--wb-space-2) var(--wb-space-5);
        padding: var(--wb-space-3) var(--wb-space-4);
    }

    .story-steps li + li[b-0zrpmfvatq] {
        border-left: 0;
    }

    .wb-page .story-step[b-0zrpmfvatq] {
        padding: var(--wb-space-1) 0;
    }

    .step-summary[b-0zrpmfvatq] {
        display: none;
    }
}
/* /Components/Pages/Conservation/WarmSeasonLawn/LawnStorySection.razor.rz.scp.css */
/* Each section is a full-width band; the page alternates white, mist and navy so the sections read as panels, the
   way the old page's colored panels did, without a gradient. */
.story-section[b-plv46iieup] {
    padding: var(--wb-space-7) 0;
    /* Leaves room for the sticky site header when a story navigation link scrolls here. */
    scroll-margin-top: 90px;
}

.story-section--white[b-plv46iieup] {
    background: var(--wb-color-surface);
}

.story-section--tint[b-plv46iieup] {
    background: var(--wb-color-surface-tint);
}

.story-section--dark[b-plv46iieup] {
    background: var(--wb-navy);
    color: var(--wb-color-on-dark);
}

/* Two white sections never touch, so a line is only needed where a white section follows the features block. */
.story-section--white:first-child[b-plv46iieup] {
    border-top: 1px solid var(--wb-color-line);
}

/* The photo on top of the text on phones, side by side from tablets up. The media follows the text in the markup,
   so it is moved ahead of it here. */
.story-section__split[b-plv46iieup] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wb-space-5);
    align-items: center;
}

.story-section__media[b-plv46iieup] {
    order: -1;
    min-width: 0;
}

.story-section__image[b-plv46iieup] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wb-radius-md);
}

.story-section__body[b-plv46iieup] {
    min-width: 0;
}

.wb-page .story-section__body h2[b-plv46iieup] {
    margin: 0 0 var(--wb-space-2);
}

.wb-page .story-section__subtitle[b-plv46iieup] {
    margin: 0 0 var(--wb-space-5);
    font-size: var(--wb-text-lg);
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink-soft);
}

/* On the tinted band, text goes a step darker than on white. */
.story-section--tint .story-section__text[b-plv46iieup],
.story-section--tint .story-section__subtitle[b-plv46iieup] {
    color: var(--wb-ink);
}

.story-section--dark .story-section__subtitle[b-plv46iieup],
.story-section--dark .story-section__text[b-plv46iieup] {
    color: var(--wb-color-on-dark);
}

.story-section__after[b-plv46iieup] {
    margin-top: var(--wb-space-6);
}

/* A note on the navy band: a lighter navy panel with a sky bar instead of the mist panel, so its text stays on
   the on-navy colors (the pair is in ContrastTable as "Note on navy"). */
.story-section--dark[b-plv46iieup]  .wb-note {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--wb-sky);
    color: var(--wb-color-on-dark);
}

.story-section--dark[b-plv46iieup]  .wb-note__icon {
    color: var(--wb-sky);
}

@media (min-width: 768px) {
    .story-section[b-plv46iieup] {
        padding: var(--wb-space-8) 0;
        scroll-margin-top: 130px;
    }

    .story-section__split[b-plv46iieup] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wb-space-8);
    }

    .story-section--photo-right .story-section__media[b-plv46iieup] {
        order: 1;
    }

    /* A nearly square photo gets two fifths of the width and a cap, so it sits beside the text instead of over it. */
    .story-section--narrow-photo.story-section--photo-left .story-section__split[b-plv46iieup] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .story-section--narrow-photo.story-section--photo-right .story-section__split[b-plv46iieup] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .story-section--narrow-photo .story-section__image[b-plv46iieup] {
        max-width: 420px;
        margin: 0 auto;
    }

    .story-section__after[b-plv46iieup] {
        margin-top: var(--wb-space-7);
    }
}
/* /Components/Pages/Conservation/WarmSeasonLawn/LawnTitleHero.razor.rz.scp.css */
/* The photo is 4:3; a wide crop keeps the page's opening short, so the story navigation shows on the first
   screen. LawnTitleHero.razor serves sets already cut to these two shapes; keep them in step. */
.lawn-hero[b-ky11jybttm] {
    display: block;
    aspect-ratio: 2 / 1;
    background: var(--wb-color-surface-tint);
}

.lawn-hero__image[b-ky11jybttm] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 768px) {
    .lawn-hero[b-ky11jybttm] {
        aspect-ratio: 4 / 1;
    }
}
/* /Components/Pages/Conservation/WarmSeasonLawn/ResearchSection.razor.rz.scp.css */
/* The white card on the mist band, like the navy trial card on the first section: the two link lists in one column
   on phones and side by side from tablets up. */
.research-links[b-xjvc025hrl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--wb-space-8);
}

.research-links[b-xjvc025hrl]  .resource-links {
    margin: 0;
}

@media (min-width: 768px) {
    .research-links[b-xjvc025hrl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--wb-space-6);
    }
}
/* /Components/Pages/Conservation/WarmSeasonLawn/WarmSeasonLawn.razor.rz.scp.css */
/* Shown by js/warm-season-lawn.js once the visitor scrolls past 300px. Left of the chat button's corner. */
.back-to-top[b-1ughjjj31u] {
    position: fixed;
    right: var(--wb-space-5);
    bottom: var(--wb-space-5);
    z-index: 1000;
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--wb-radius-sm);
    background: var(--wb-navy);
    font-size: 16px;
    color: var(--wb-color-on-dark-strong);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.back-to-top:hover[b-1ughjjj31u] {
    background: var(--wb-river);
}

.back-to-top:focus-visible[b-1ughjjj31u] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}
/* /Components/Pages/Conservation/WarmSeasonLawn/WhatAreTheySection.razor.rz.scp.css */
/* The navy featured card under the two halves, at the container's full width: the paragraph on the left and the
   links beside it from tablets up. */
.evaluation-panel[b-8sg9fbpu2l] {
    color: var(--wb-color-on-dark);
}

.evaluation-panel__body[b-8sg9fbpu2l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wb-space-4) var(--wb-space-8);
}

.wb-page .evaluation-panel p[b-8sg9fbpu2l] {
    margin: 0;
}

.evaluation-panel__body[b-8sg9fbpu2l]  .resource-links {
    margin: 0;
}

@media (min-width: 768px) {
    .evaluation-panel__body[b-8sg9fbpu2l] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }
}
/* /Components/Pages/Conservation/WaterAuditInfo/WaterAuditInfo.razor.rz.scp.css */
.audit-resources[b-jxoeoehmh3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The two banners are 8:1 strips; the frame keeps their shape while they wait to load. */
.audit-resources[b-jxoeoehmh3]  .wb-card__media {
    aspect-ratio: 8 / 1;
    background: var(--wb-mist);
}

.audit-resource .wb-card__media img[b-jxoeoehmh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The facts end flush with the bottom of the card. */
.audit-facts[b-jxoeoehmh3]  .wb-facts {
    margin: 0;
}

.audit-facts[b-jxoeoehmh3]  dd:last-child {
    margin-bottom: 0;
}
/* /Components/Pages/CustomerService/ApplyForService/ApplyForService.razor.rz.scp.css */
.apply-paper[b-ide0vues53] {
    margin: 0;
    padding-top: var(--wb-space-3);
    border-top: 1px solid var(--wb-mist-deep);
}
/* /Components/Pages/CustomerService/ApplyForService/ProjectFields.razor.rz.scp.css */
.project-fields__checks[b-x4tq6l5qrg] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-2);
}

.project-fields__help[b-x4tq6l5qrg] {
    padding-top: var(--wb-space-2);
    font-size: 14px;
    color: var(--wb-ink-soft);
}
/* /Components/Pages/CustomerService/CulinaryWater/CulinaryWater.razor.rz.scp.css */
.report-links[b-jwwc7hjm86] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--wb-space-2);
    max-width: 640px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-jwwc7hjm86] .report-links__button {
    width: 100%;
    padding-left: var(--wb-space-2);
    padding-right: var(--wb-space-2);
}
/* /Components/Pages/CustomerService/CurrentOutages/CurrentOutages.razor.rz.scp.css */
[b-6ywpa66hbh] .outages-map {
    margin-top: var(--wb-space-5);
}

.outages-hours[b-6ywpa66hbh] {
    margin: var(--wb-space-2) 0 0;
}
/* /Components/Pages/CustomerService/MemberAgencies/AgencyCard.razor.rz.scp.css */
.agency-card[b-dixzum0sp3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--wb-space-3) 0;
    border-bottom: 1px solid var(--wb-mist-deep);
}

.agency-card__name[b-dixzum0sp3] {
    font-weight: 600;
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink);
}

.wb-page .agency-card__phone[b-dixzum0sp3] {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    font-weight: 400;
    text-decoration: none;
}

.wb-page .agency-card__phone:hover[b-dixzum0sp3] {
    text-decoration: underline;
}

.agency-card__phone .fa[b-dixzum0sp3] {
    font-size: 13px;
}
/* /Components/Pages/CustomerService/MemberAgencies/AgencyDirectorySection.razor.rz.scp.css */
.agency-directory[b-r8j0iy7nk6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 0 var(--wb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* /Components/Pages/CustomerService/ProviderSearch/ProviderSearch.razor.rz.scp.css */
.provider-disclaimer[b-kg01d0qo70] {
    max-width: var(--wb-measure);
    margin: var(--wb-space-3) 0 0;
}
/* /Components/Pages/CustomerService/ReplacementWaterApplication/ReplacementWaterApplication.razor.rz.scp.css */
.replacement-steps[b-4havl33kro] {
    margin-bottom: var(--wb-space-6);
}

.replacement-more[b-4havl33kro] {
    margin: 0;
    padding-top: var(--wb-space-3);
    border-top: 1px solid var(--wb-mist-deep);
}
/* /Components/Pages/CustomerService/Reporting/ReportingGuidance.razor.rz.scp.css */
.reporting-guidance[b-duoh3lcymq] {
    margin-bottom: var(--wb-space-6);
}
/* /Components/Pages/CustomerService/SecondaryWater/SecondaryWater.razor.rz.scp.css */
.secondary-faq[b-l3bvgp32t2] {
    margin: 0;
}

.secondary-faq__item[b-l3bvgp32t2] {
    padding: var(--wb-space-4) 0;
    border-top: 1px solid var(--wb-mist-deep);
}

.secondary-faq__item:first-child[b-l3bvgp32t2] {
    padding-top: 0;
    border-top: 0;
}

.secondary-faq dt[b-l3bvgp32t2] {
    margin-bottom: var(--wb-space-1);
    font-weight: 700;
    color: var(--wb-ink);
}

.secondary-faq dd[b-l3bvgp32t2] {
    margin: 0;
}
/* /Components/Pages/CustomerService/SetupNewService/SetupNewService.razor.rz.scp.css */
.setup-mywater[b-i0e3nmm7pc] {
    margin: 0;
    padding-top: var(--wb-space-3);
    border-top: 1px solid var(--wb-mist-deep);
}
/* /Components/Pages/CustomerService/Shared/DistrictIvNotice.razor.rz.scp.css */
/* The notice's heading is an h2 for the page outline but reads as a note title, not a section heading. */
.wb-page .district-iv-notice__title[b-588i0j19h0] {
    margin: 0 0 var(--wb-space-2);
    font-size: var(--wb-text-base);
    line-height: var(--wb-leading-snug);
    color: var(--wb-ink);
}

.district-iv-notice p[b-588i0j19h0] {
    font-size: 15px;
}
/* /Components/Pages/CustomerService/Shared/FactsSidebar.razor.rz.scp.css */
.facts-sidebar__list[b-6jv2n7awqs] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.facts-sidebar__list li[b-6jv2n7awqs] {
    padding: var(--wb-space-3) 0;
    border-top: 1px solid var(--wb-mist-deep);
}

.facts-sidebar__list li:first-child[b-6jv2n7awqs] {
    padding-top: 0;
    border-top: 0;
}

.facts-sidebar__list li:last-child[b-6jv2n7awqs] {
    padding-bottom: 0;
}
/* /Components/Pages/CustomerService/Shared/PhotoCarousel.razor.rz.scp.css */
.photo-carousel[b-jilyy7bfb1] {
    position: relative;
    margin: 0 0 var(--wb-space-6);
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.photo-carousel .item img[b-jilyy7bfb1] {
    display: block;
    width: 100%;
    height: auto;
}

.photo-carousel__control[b-jilyy7bfb1] {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    color: var(--wb-navy);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.photo-carousel__control:hover[b-jilyy7bfb1],
.photo-carousel__control:focus[b-jilyy7bfb1] {
    background: var(--wb-color-surface);
    color: var(--wb-river);
    text-decoration: none;
}

.photo-carousel__control:focus-visible[b-jilyy7bfb1] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

.photo-carousel__control--prev[b-jilyy7bfb1] {
    left: var(--wb-space-3);
}

.photo-carousel__control--next[b-jilyy7bfb1] {
    right: var(--wb-space-3);
}
/* /Components/Pages/CustomerService/Shared/SubmissionBanner.razor.rz.scp.css */
.submission-banner[b-oy7recsise] {
    margin: 0 0 var(--wb-space-6);
}

/* The warning wrapper takes the banner's spacing, so the note inside it drops its own. */
.submission-banner[b-oy7recsise]  .wb-note {
    margin: 0;
}
/* /Components/Pages/Home/CounterTile.razor.rz.scp.css */
/* Centered, as the old counters were: the icon in a ring, the number, a short rule, then the label. */
.counter-tile[b-qoksb046yp] {
    align-items: center;
    gap: var(--wb-space-3);
    text-align: center;
}

.counter-tile__icon[b-qoksb046yp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: 1px solid var(--wb-mist-deep);
    border-radius: 50%;
    background: var(--wb-surface);
    font-size: var(--wb-text-3xl);
    line-height: 1;
    color: var(--wb-basin-blue);
}

/* The number keeps its width while site.js counts it up, so the row doesn't jitter. */
.counter-tile .wb-stat__value[b-qoksb046yp] {
    font-size: var(--wb-text-4xl);
    font-variant-numeric: tabular-nums;
}

.counter-tile__rule[b-qoksb046yp] {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--wb-basin-blue);
}

.wb-page .counter-tile__label[b-qoksb046yp] {
    font-size: var(--wb-text-base);
    color: var(--wb-color-text);
}

@media (min-width: 768px) {
    .counter-tile__icon[b-qoksb046yp] {
        width: 104px;
        height: 104px;
        font-size: var(--wb-text-4xl);
    }

    .counter-tile .wb-stat__value[b-qoksb046yp] {
        font-size: var(--wb-text-5xl);
    }
}
/* /Components/Pages/Home/HighlightCard.razor.rz.scp.css */
.highlight-card[b-snysh8n4yx] {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--wb-radius-sm);
    overflow: hidden;
    background: var(--wb-mist);
}

.highlight-card__media[b-snysh8n4yx] {
    aspect-ratio: 270 / 170;
}

.highlight-card__media img[b-snysh8n4yx] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The caption bar. It grows to the bottom of the tile, so a caption that wraps in one tile doesn't leave a strip
   under the others in its row. The link's ::after spreads its hit area over the whole tile, so the picture is
   clickable too. */
.wb-page .highlight-card__caption[b-snysh8n4yx] {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--wb-text-sm);
    line-height: var(--wb-leading-snug);
}

.wb-page .highlight-card__caption a[b-snysh8n4yx] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-2);
    min-height: 44px;
    padding: var(--wb-space-2) var(--wb-space-3);
    background: var(--wb-river);
    font-weight: 700;
    color: var(--wb-color-on-dark-strong);
    text-decoration: none;
    transition: background-color 0.15s var(--wb-ease);
}

.highlight-card__caption a[b-snysh8n4yx]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.highlight-card__caption .fa[b-snysh8n4yx] {
    flex: none;
    font-size: 12px;
}

.wb-page .highlight-card:hover .highlight-card__caption a[b-snysh8n4yx],
.wb-page .highlight-card:focus-within .highlight-card__caption a[b-snysh8n4yx] {
    background: var(--wb-river-deep);
    color: var(--wb-color-on-dark-strong);
    text-decoration: none;
}

/* The focus ring goes round the tile, since the link covers all of it. */
.wb-page .highlight-card__caption a:focus-visible[b-snysh8n4yx] {
    outline: none !important;
}

.highlight-card:focus-within[b-snysh8n4yx] {
    outline: 3px solid var(--wb-color-focus-on-dark);
    outline-offset: 3px;
}

/* The description over the picture, shown on hover or focus as the old overlay was. It stays in the markup at all
   times, so screen readers get it whether or not it is visible. */
.wb-page .highlight-card__description[b-snysh8n4yx] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    aspect-ratio: 270 / 170;
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--wb-space-3);
    background: rgba(12, 39, 66, 0.85);
    font-size: var(--wb-text-sm);
    line-height: var(--wb-leading-snug);
    color: var(--wb-color-on-dark-strong);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s var(--wb-ease), transform 0.2s var(--wb-ease);
    pointer-events: none;
}

.highlight-card:hover .highlight-card__description[b-snysh8n4yx],
.highlight-card:focus-within .highlight-card__description[b-snysh8n4yx] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .highlight-card__description[b-snysh8n4yx],
    .highlight-card__caption a[b-snysh8n4yx] {
        transition: none;
    }

    .highlight-card__description[b-snysh8n4yx] {
        transform: none;
    }
}

/* On phones there is no hover and the tiles are small, so the overlay would only ever cover a tapped picture. */
@media (max-width: 479px) {
    .highlight-card__description[b-snysh8n4yx] {
        display: none;
    }
}
/* /Components/Pages/Home/Home.razor.rz.scp.css */
.home-notices[b-biu1mk95w6] {
    padding-top: var(--wb-space-4);
}

.home-notices[b-biu1mk95w6]  .wb-note {
    margin: 0 0 var(--wb-space-4);
}

/* The theme sets every heading in Roboto Slab, and even a hidden heading downloads the font. The home page has no
   visible Roboto Slab text, so its screen-reader heading uses the page's own family and the font is never fetched. */
.sr-only[b-biu1mk95w6] {
    font-family: var(--wb-font);
}
/* /Components/Pages/Home/HomeCounters.razor.rz.scp.css */
/* A mist section in place of the old black and white photo band (which also saves a 94 KB download). Light, so it
   reads as its own section between the navy highlights band and the navy footer. */
.home-counters[b-7caip4jyf1] {
    padding: var(--wb-space-7) 0;
    background: var(--wb-mist);
}

.home-counters__list[b-7caip4jyf1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wb-space-6) var(--wb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .home-counters[b-7caip4jyf1] {
        padding: var(--wb-space-8) 0;
    }

    .home-counters__list[b-7caip4jyf1] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--wb-space-5);
    }
}
/* /Components/Pages/Home/HomeHeroCarousel.razor.rz.scp.css */
/* Slide backgrounds. The paths are absolute because the scoped CSS bundle is served from the site root. */

.home-hero__slide--lawn-exchange[b-pxwiybmmvj] {
    background-image: url('/images/home/slider/flip-your-strip-background.webp');
}

/* Every slide is laid out in the scroll-snap track, so these would download with the first slide and slow its paint.
   carousel.js adds carousel-ready on the load event, which lets them in after the page has loaded. */
.home-hero.carousel-ready .home-hero__slide--warm-season[b-pxwiybmmvj] {
    background-image: url('/images/conservation/hero.webp');
}

.home-hero.carousel-ready .home-hero__slide--about[b-pxwiybmmvj] {
    background-image: url('/images/home/slider/east-smaller.webp');
}

.home-hero.carousel-ready .home-hero__slide--best-water[b-pxwiybmmvj] {
    background-image: url('/images/home/slider/bestwaterlight-smaller.webp');
}

/* ---- The design system over theme.css's .home-hero layout ----
   Scoped selectors outrank theme.css's single-class rules, so these win without editing it. The hero sits inside
   .wb-page, so its links would otherwise take the page's river link color. */

.home-hero[b-pxwiybmmvj] {
    border-bottom: 4px solid var(--wb-basin-blue);
    background: var(--wb-navy);
}

/* Flat overlays in place of the theme's dark gradient: a navy wash under the text panels' photos, and the theme's
   white wash kept under the artwork slides. */
.home-hero__slide[b-pxwiybmmvj]::before {
    background: rgba(12, 39, 66, 0.45);
}

.home-hero__slide--artwork[b-pxwiybmmvj]::before {
    background: rgba(255, 255, 255, 0.6);
}

.home-hero__card[b-pxwiybmmvj] {
    width: min(560px, 72%);
    padding: var(--wb-space-6);
    border-radius: var(--wb-radius-md);
    background: var(--wb-navy);
    box-shadow: none;
    text-align: left;
}

.home-hero__card h2[b-pxwiybmmvj] {
    margin: 0 0 var(--wb-space-3);
    font-family: var(--wb-font);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--wb-color-on-dark-strong);
}

.home-hero__card p[b-pxwiybmmvj] {
    margin: 0 0 var(--wb-space-5);
    font-size: var(--wb-text-lg);
    line-height: 1.5;
    color: var(--wb-sky-soft);
}

/* The button is rendered by Button, so it has no scope attribute and needs ::deep from the card. */
.home-hero__card[b-pxwiybmmvj]  .home-hero__button {
    min-width: 0;
    font-size: var(--wb-text-base);
}

.home-hero .carousel-control[b-pxwiybmmvj],
.home-hero .carousel-control:hover[b-pxwiybmmvj],
.home-hero .carousel-control:focus[b-pxwiybmmvj] {
    color: var(--wb-color-on-dark-strong);
    text-decoration: none;
}

.home-hero .carousel-control:focus-visible[b-pxwiybmmvj],
.home-hero__indicator:focus-visible[b-pxwiybmmvj] {
    outline: 3px solid var(--wb-sky) !important;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .home-hero__card[b-pxwiybmmvj] {
        width: 100%;
        padding: var(--wb-space-5);
    }

    .home-hero__card h2[b-pxwiybmmvj] {
        font-size: var(--wb-text-2xl);
    }

    .home-hero__card p[b-pxwiybmmvj] {
        font-size: var(--wb-text-base);
    }
}
/* /Components/Pages/Home/HomeHighlights.razor.rz.scp.css */
/* The old home page's dark "District Highlights" area in the system's navy, flat instead of the theme's gradient. */
.home-highlights[b-ot04q3ru55] {
    padding: var(--wb-space-7) 0;
    background: var(--wb-navy);
}

.wb-page .home-highlights__title[b-ot04q3ru55] {
    margin: 0 0 var(--wb-space-5);
    font-size: var(--wb-text-2xl);
    text-align: center;
    color: var(--wb-color-on-dark-strong);
}

/* Two across on phones and four from tablets up, as the old page laid them out. */
.home-highlights__grid[b-ot04q3ru55] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .home-highlights[b-ot04q3ru55] {
        padding: var(--wb-space-8) 0;
    }

    .home-highlights__grid[b-ot04q3ru55] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--wb-space-5);
    }
}
/* /Components/Pages/Home/PolimorphicSearch.razor.rz.scp.css */
.home-search-wrap[b-8lr5uxkx3c] {
    max-width: 800px;
    margin: 0 auto var(--wb-space-7);
}

/* The Polimorphic search embed sets its own height once it loads, which pushed everything below it down (most of
   the page's layout shift). These reserve the height it settles at for each width, measured 2026-10-20, for the
   lookalike and the embed alike. Where the change falls between measured widths the smaller height is used, so
   the frame never shows an empty strip under the widget. Re-measure if Polimorphic changes the embed. */

.home-search[b-8lr5uxkx3c] {
    /* The embed's own grey for the field's hint and edge, copied so the swap passes unnoticed; ContrastTable checks it. */
    --home-search-hint: #666666;
    position: relative;
    min-height: 306px;
    border-radius: var(--wb-radius-sm);
    overflow: hidden;
    background-color: var(--wb-surface);
}

@media (max-width: 620px) {
    .home-search[b-8lr5uxkx3c] {
        min-height: 335px;
    }
}

@media (max-width: 520px) {
    .home-search[b-8lr5uxkx3c] {
        min-height: 359px;
    }
}

@media (max-width: 412px) {
    .home-search[b-8lr5uxkx3c] {
        min-height: 383px;
    }
}

@media (max-width: 372px) {
    .home-search[b-8lr5uxkx3c] {
        min-height: 411px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home-search[b-8lr5uxkx3c] {
        min-height: 296px;
    }
}

/* js/home.js adds the iframe; it stays invisible on top of the lookalike until it has loaded, so the swap never
   shows a blank box. Pointer events pass through it meanwhile, or a press on the lookalike's button would land on
   the empty frame instead. */
.home-search[b-8lr5uxkx3c]  .home-search-frame {
    display: block;
    width: 100%;
    min-height: inherit;
    border: 0;
}

.home-search:not(.home-search--loaded)[b-8lr5uxkx3c]  .home-search-frame {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.home-search--loaded .home-search__facade[b-8lr5uxkx3c] {
    display: none;
}

/* ---- The lookalike. Every size below is the embed's own, so that the swap to the real thing barely changes the
   screen. The header and button are river rather than the embed's Weber Basin Blue: white on #307FE2 is 3.99:1,
   short of AA for 18px regular and 16px bold text (2026-11-03). Setting the embed's color to #1B5BC9 in Polimorphic
   would make the swap seamless again. ---- */

.home-search__facade[b-8lr5uxkx3c] {
    padding-bottom: 48px;
}

.wb-page .home-search__header[b-8lr5uxkx3c] {
    margin: 0;
    padding: 24px;
    background-color: var(--wb-river);
    font-size: 18px;
    line-height: 1.6;
    color: var(--wb-color-on-dark-strong);
}

.wb-page .home-search__header strong[b-8lr5uxkx3c] {
    color: var(--wb-color-on-dark-strong);
}

.home-search__start[b-8lr5uxkx3c] {
    display: flex;
    gap: 16px;
    width: calc(100% - 48px);
    margin: 24px 24px 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--wb-font);
    text-align: left;
    cursor: pointer;
}

.home-search__prompt[b-8lr5uxkx3c] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px 0 18px;
    border: 1px solid var(--home-search-hint);
    border-radius: 4px;
    font-size: 16px;
    line-height: 23px;
    color: var(--home-search-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-search__submit[b-8lr5uxkx3c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
    width: 129px;
    height: 48px;
    border-radius: 4px;
    background-color: var(--wb-river);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--wb-color-on-dark-strong);
}

.home-search__submit .fa[b-8lr5uxkx3c] {
    font-size: 18px;
}

.home-search__start:focus-visible[b-8lr5uxkx3c] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 4px;
}

.home-search__notes[b-8lr5uxkx3c] {
    margin-top: 24px;
    padding: 8px 24px;
    text-align: center;
}

.wb-page .home-search__note[b-8lr5uxkx3c] {
    margin: 0;
    font-size: 12px;
    line-height: 24px;
    color: #000;
}

.wb-page .home-search__note[b-8lr5uxkx3c]  a {
    font-weight: 700;
    text-decoration: none;
    color: #000;
}

.wb-page .home-search__note[b-8lr5uxkx3c]  a:hover {
    text-decoration: underline;
}
/* /Components/Pages/NaturalSystems/Accreditation/Accreditation.razor.rz.scp.css */
/* Holds the floated seal inside its section so the next heading starts below it. */
.accreditation-body[b-zbovtbg9a1]  .accreditation-intro {
    display: flow-root;
}

/* The NELAP seal sits above the text on phones and beside it, at the right, once the column has room. */
.accreditation-logo[b-zbovtbg9a1] {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 0 var(--wb-space-4);
}

@media (min-width: 480px) {
    .accreditation-logo[b-zbovtbg9a1] {
        float: right;
        width: 160px;
        margin: 0 0 var(--wb-space-4) var(--wb-space-5);
    }
}
/* /Components/Pages/NaturalSystems/StreamAndReservoir/StreamAndReservoir.razor.rz.scp.css */
.gauge-photo[b-wrglb0p7ak]  img {
    display: block;
    width: 100%;
    height: auto;
}

/* The streams as a row of jump links that wraps, so phones reach a stream without scrolling past the others. */
.stream-jump__list[b-wrglb0p7ak] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2) var(--wb-space-5);
    margin: 0 0 var(--wb-space-5);
    padding: 0;
    list-style: none;
}

.stream-jump__list a[b-wrglb0p7ak] {
    display: inline-block;
    padding: var(--wb-space-2) 0;
    font-weight: 600;
}

.stream-gauges__sites[b-wrglb0p7ak] {
    padding: 0;
    list-style: none;
}
/* /Components/Pages/NaturalSystems/WaterQualityLab/WaterQualityLab.razor.rz.scp.css */
/* The two lab photos, the early lab and today's, side by side once the column has room. */
.lab-photos[b-ebn67w92zo] {
    display: grid;
    gap: var(--wb-space-5);
    margin: var(--wb-space-2) 0 var(--wb-space-5);
}

@media (min-width: 480px) {
    .lab-photos[b-ebn67w92zo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lab-photo[b-ebn67w92zo] {
    margin: 0;
}

.lab-photo[b-ebn67w92zo]  img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--wb-radius-md);
    background: var(--wb-mist);
}

.wb-page .lab-photo figcaption[b-ebn67w92zo] {
    margin-top: var(--wb-space-2);
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text);
}

.lab-links[b-ebn67w92zo] {
    padding: 0;
    list-style: none;
}

.lab-contacts__phone[b-ebn67w92zo] {
    white-space: nowrap;
}
/* /Components/Pages/Policies/PrivacyPolicy/PrivacyPolicy.razor.rz.scp.css */
/* The jump links as a plain list with tap-sized rows. */
.privacy-jump[b-232c73ssm2] {
    margin: 0 0 var(--wb-space-4);
    padding: 0;
    list-style: none;
}

.privacy-jump a[b-232c73ssm2] {
    display: block;
    padding: var(--wb-space-2) 0;
    font-weight: 600;
}
/* /Components/Pages/Policies/PrivacyPolicy/UserPrivacyNotice.razor.rz.scp.css */
/* Each defined term on its own line with room between them, as the old notice set them as paragraphs. */
.privacy-terms li[b-0eilj4s8r5] {
    margin-bottom: var(--wb-space-3);
}
/* /Components/Pages/PublicResources/Easements/EasementLocations/EasementLocations.razor.rz.scp.css */
.location-with-map[b-2no97nbtco] {
    display: grid;
    gap: var(--wb-space-5);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .location-with-map[b-2no97nbtco] {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--wb-space-7);
        align-items: start;
    }
}

/* The gallery's own top margin would push the map below the text's first line. */
.location-with-map[b-2no97nbtco]  .photo-gallery {
    margin: 0;
}
/* /Components/Pages/PublicResources/Easements/Shared/EasementDocumentList.razor.rz.scp.css */
/* A lined list rather than bullets: each download is a row a thumb can hit, with its note under the link. */
.easement-documents[b-znnujf3jls] {
    margin: var(--wb-space-4) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wb-color-line);
}

.easement-documents__item[b-znnujf3jls] {
    margin: 0;
    padding: var(--wb-space-3) 0;
    border-bottom: 1px solid var(--wb-color-line);
}

.easement-documents[b-znnujf3jls]  .easement-documents__link {
    font-weight: 600;
}

.wb-page .easement-documents__note[b-znnujf3jls] {
    margin: var(--wb-space-1) 0 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-ink-soft);
}
/* /Components/Pages/PublicResources/Jobs/Employment/Employment.razor.rz.scp.css */
.employment__jobs[b-ihw0amyx2x] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.employment__documents[b-ihw0amyx2x] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wb-color-line);
}

.employment__document[b-ihw0amyx2x] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4) 0;
    border-bottom: 1px solid var(--wb-color-line);
}

.employment__document-links[b-ihw0amyx2x] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2);
}

@media (min-width: 768px) {
    .employment__document[b-ihw0amyx2x] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .employment__document-links[b-ihw0amyx2x] {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}
/* /Components/Pages/PublicResources/Jobs/Employment/JobListingCard.razor.rz.scp.css */
.job-listing__title[b-631eed9mm9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-2);
}

.job-listing__facts[b-631eed9mm9] {
    display: grid;
    gap: var(--wb-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--wb-color-text);
}

.job-listing__facts li[b-631eed9mm9] {
    display: flex;
    align-items: baseline;
    gap: var(--wb-space-2);
}

.job-listing__facts[b-631eed9mm9]  .fa {
    flex: 0 0 var(--wb-space-5);
    color: var(--wb-color-accent);
    text-align: center;
}

@media (min-width: 768px) {
    .job-listing__facts[b-631eed9mm9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/PublicResources/Jobs/JobApplication/ApplicationClosedNotice.razor.rz.scp.css */
.application-closed__actions[b-ap2ue2sw1y] {
    margin-top: var(--wb-space-5);
}
/* /Components/Pages/PublicResources/Jobs/JobApplication/DocumentsStep.razor.rz.scp.css */
.documents-step[b-1bwmht7tj1] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
}

/* The step's gap spaces the notes, so they drop their own margin. */
.documents-step[b-1bwmht7tj1]  .wb-note {
    margin: 0;
}

.documents-step__files[b-1bwmht7tj1] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.documents-step__file[b-1bwmht7tj1] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
}

.documents-step__name[b-1bwmht7tj1] {
    overflow-wrap: anywhere;
}

.documents-step__confirm[b-1bwmht7tj1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-2);
    color: var(--wb-color-text-strong);
    font-weight: 600;
}

@media (min-width: 768px) {
    .documents-step__file[b-1bwmht7tj1] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}
/* /Components/Pages/PublicResources/Jobs/JobApplication/EducationStep.razor.rz.scp.css */
.education-step__heading[b-n6t6kzyoix] {
    margin-top: var(--wb-space-6);
}

.education-step[b-n6t6kzyoix]  .education-step__skills {
    margin-top: var(--wb-space-6);
}
/* /Components/Pages/PublicResources/Jobs/JobApplication/JobApplication.razor.rz.scp.css */
.job-application:focus[b-j2le1ckb3u] {
    outline: none;
}

.job-application__progress[b-j2le1ckb3u] {
    margin: 0 0 var(--wb-space-2);
    color: var(--wb-color-text-muted);
    font-size: var(--wb-text-sm);
    font-weight: 600;
}
/* /Components/Pages/PublicResources/Jobs/JobApplication/StepButtons.razor.rz.scp.css */
.step-buttons[b-7qvipoq81i] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
    margin-top: var(--wb-space-6);
}

.step-buttons__alert[b-7qvipoq81i] {
    margin: 0;
}

.step-buttons__row[b-7qvipoq81i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--wb-space-3);
}

.step-buttons__row[b-7qvipoq81i]  .step-buttons__next {
    margin-left: auto;
}

.step-buttons__row--first[b-7qvipoq81i]  .step-buttons__next {
    margin-left: 0;
}
/* /Components/Pages/PublicResources/Jobs/JobID/JobID.razor.rz.scp.css */
.job-details__files[b-8sie9pgf8n] {
    margin: 0;
    padding-left: var(--wb-space-5);
}
/* /Components/Pages/PublicResources/Notices/PasswordReset/PasswordReset.razor.rz.scp.css */
.password-reset[b-t3prqy1vkp]  .password-reset__next {
    margin-top: var(--wb-space-5);
}
/* /Components/Pages/PublicResources/Notices/PublicNoticeID/NoticeAccountPanel.razor.rz.scp.css */
.notice-account[b-i1zhmt4cx1]  .notice-account__modes {
    margin-bottom: var(--wb-space-5);
}
/* /Components/Pages/PublicResources/Notices/PublicNoticeID/NoticeAttachmentsTable.razor.rz.scp.css */
.notice-attachments-table__name[b-dowa5h7088] {
    font-weight: 600;
    color: var(--wb-color-text-strong);
    overflow-wrap: anywhere;
}

/* On phones each document becomes a stacked block, labelled from data-label, instead of a table. */
@media (max-width: 599px) {
    .notice-attachments-table thead[b-dowa5h7088] {
        display: none;
    }

    .notice-attachments-table tr[b-dowa5h7088] {
        display: block;
        padding: var(--wb-space-3) var(--wb-space-4);
        border-bottom: 1px solid var(--wb-color-line);
    }

    .notice-attachments-table tbody tr:last-child[b-dowa5h7088] {
        border-bottom: 0;
    }

    .notice-attachments-table td[b-dowa5h7088],
    .notice-attachments-table tbody tr:last-child td[b-dowa5h7088] {
        display: block;
        padding: 2px 0;
        border: 0;
    }

    .notice-attachments-table td[data-label][b-dowa5h7088]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--wb-color-text-strong);
    }
}
/* /Components/Pages/PublicResources/Notices/PublicNoticeID/NoticeFilesSection.razor.rz.scp.css */
.notice-files__account[b-ux8d2r7wvc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-3);
    margin-bottom: var(--wb-space-4);
    padding: var(--wb-space-3) var(--wb-space-4);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-color-surface-tint);
}

.notice-files__logged-in[b-ux8d2r7wvc] {
    margin: 0;
    color: var(--wb-ink);
}

.notice-files__forms[b-ux8d2r7wvc] {
    margin-top: var(--wb-space-6);
    padding-top: var(--wb-space-5);
    border-top: 1px solid var(--wb-color-line);
}
/* /Components/Pages/PublicResources/Notices/PublicNoticeID/NoticeSubmissionItem.razor.rz.scp.css */
.notice-submission__name[b-tpzc5230jh] {
    margin: 0 0 var(--wb-space-1);
    font-weight: 600;
    color: var(--wb-color-text-strong);
    overflow-wrap: anywhere;
}

.notice-submission__description[b-tpzc5230jh] {
    margin: 0 0 var(--wb-space-1);
    max-width: var(--wb-measure);
}

.notice-submission__date[b-tpzc5230jh] {
    margin: 0 0 var(--wb-space-2);
    color: var(--wb-color-text-muted);
}

.notice-submission__question[b-tpzc5230jh] {
    margin: 0 0 var(--wb-space-2);
    font-weight: 600;
    color: var(--wb-color-text-strong);
}
/* /Components/Pages/PublicResources/Notices/PublicNoticeID/NoticeSubmissionsPanel.razor.rz.scp.css */
.notice-submissions__list[b-dxbeygjhkr] {
    margin: 0 0 var(--wb-space-5);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wb-color-line);
}

.notice-submissions__item[b-dxbeygjhkr] {
    padding: var(--wb-space-4) 0;
    border-bottom: 1px solid var(--wb-color-line);
}

.notice-submissions__upload-title[b-dxbeygjhkr] {
    margin-top: var(--wb-space-6);
}
/* /Components/Pages/PublicResources/Notices/PublicNoticeID/PublicNoticeID.razor.rz.scp.css */
/* One column wide enough for the attachments table and the account forms. */
.notice-page[b-nj9i1en9ie] {
    max-width: 800px;
}

/* The notice as a document: its dates in a tinted strip across the top, then the text staff wrote. */
.notice-document[b-nj9i1en9ie] {
    margin-bottom: var(--wb-space-7);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface);
    overflow: hidden;
}

.notice-document[b-nj9i1en9ie]  .notice-document__dates {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    gap: var(--wb-space-1) var(--wb-space-7);
    margin: 0;
    padding: var(--wb-space-4) var(--wb-space-6);
    border-bottom: 1px solid var(--wb-color-line);
    background: var(--wb-color-surface-tint);
}

.notice-document[b-nj9i1en9ie]  .notice-document__dates dt {
    font-size: var(--wb-text-sm);
}

.notice-document__body[b-nj9i1en9ie] {
    padding: var(--wb-space-6) var(--wb-space-6) 0;
    overflow-wrap: anywhere;
}

.notice-document__questions[b-nj9i1en9ie] {
    margin: var(--wb-space-6) var(--wb-space-6) 0;
    padding: var(--wb-space-4) 0 var(--wb-space-5);
    border-top: 1px solid var(--wb-color-line);
}

/* On phones the three dates stack, each label beside its value, and the padding tightens. */
@media (max-width: 599px) {
    .notice-document[b-nj9i1en9ie]  .notice-document__dates {
        grid-template-columns: max-content minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: var(--wb-space-1) var(--wb-space-4);
        padding: var(--wb-space-4);
    }

    .notice-document__body[b-nj9i1en9ie] {
        padding: var(--wb-space-5) var(--wb-space-4) 0;
    }

    .notice-document__questions[b-nj9i1en9ie] {
        margin: var(--wb-space-5) var(--wb-space-4) 0;
    }
}
/* /Components/Pages/PublicResources/Notices/PublicNotices/BoardDocumentsTable.razor.rz.scp.css */
.board-documents-table__date[b-95y70zixhf] {
    font-weight: 700;
    color: var(--wb-color-text-strong);
    white-space: nowrap;
}

/* On phones each document becomes a stacked block, labelled from data-label, instead of a three-column table. */
@media (max-width: 599px) {
    .board-documents-table thead[b-95y70zixhf] {
        display: none;
    }

    .board-documents-table tr[b-95y70zixhf] {
        display: block;
        padding: var(--wb-space-3) var(--wb-space-4);
        border-bottom: 1px solid var(--wb-color-line);
    }

    .board-documents-table tbody tr:last-child[b-95y70zixhf] {
        border-bottom: 0;
    }

    .board-documents-table td[b-95y70zixhf],
    .board-documents-table tbody tr:last-child td[b-95y70zixhf] {
        display: block;
        padding: 2px 0;
        border: 0;
    }

    .board-documents-table td[data-label][b-95y70zixhf]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--wb-color-text-strong);
    }
}
/* /Components/Pages/PublicResources/Notices/PublicNotices/CompletedProjectsList.razor.rz.scp.css */
.completed-projects[b-cl3f4j1u9i] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Text beside the picture from 768px, as the old grid's two halves were; one column on phones. */
.completed-projects__item[b-cl3f4j1u9i] {
    display: grid;
    gap: var(--wb-space-5);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: var(--wb-space-5) 0;
    border-top: 1px solid var(--wb-color-line);
}

.completed-projects__item:first-child[b-cl3f4j1u9i] {
    padding-top: 0;
    border-top: 0;
}

@media (min-width: 768px) {
    .completed-projects__item[b-cl3f4j1u9i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.wb-page .completed-projects__title[b-cl3f4j1u9i] {
    margin: 0 0 var(--wb-space-2);
    font-size: var(--wb-text-xl);
}

.completed-projects__text[b-cl3f4j1u9i] {
    max-width: var(--wb-measure);
}

.completed-projects__text > :last-child[b-cl3f4j1u9i] {
    margin-bottom: 0;
}

.completed-projects__gallery[b-cl3f4j1u9i] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.completed-projects__photo-link[b-cl3f4j1u9i] {
    display: block;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.completed-projects__photo-link img[b-cl3f4j1u9i] {
    display: block;
    width: 100%;
    height: auto;
}

.completed-projects__photo-link:focus-visible[b-cl3f4j1u9i] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}
/* /Components/Pages/PublicResources/Notices/PublicNotices/NoticeGroupList.razor.rz.scp.css */
/* The type's heading sits a short step above the rule that opens its list, so the two read as one block. */
.wb-page .notice-group__title[b-e6x8xeiv5p] {
    margin: 0 0 var(--wb-space-3);
}

.notice-group__list[b-e6x8xeiv5p] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wb-color-line);
}

.notice-group__item[b-e6x8xeiv5p] {
    padding: var(--wb-space-4) 0;
    border-bottom: 1px solid var(--wb-color-line);
}
/* /Components/Pages/PublicResources/Notices/PublicNotices/NoticeListItem.razor.rz.scp.css */
.notice-item__title[b-e3zq568us1] {
    margin: 0 0 var(--wb-space-2);
}

.notice-item__tags[b-e3zq568us1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2);
    margin: 0 0 var(--wb-space-2);
}

.notice-item__summary[b-e3zq568us1] {
    margin: 0 0 var(--wb-space-2);
    max-width: var(--wb-measure);
}

.notice-item__dates[b-e3zq568us1] {
    margin: 0;
    color: var(--wb-color-text-muted);
}

/* /Components/Pages/PublicResources/Notices/PublicNotices/PublicNotices.razor.rz.scp.css */
.notices-intro[b-57yiukqdhc] {
    max-width: var(--wb-measure);
}

/* The count sits just above the table it counts; the table's own margin sets the gap below. */
.notices-count[b-57yiukqdhc] {
    margin: 0;
}
/* /Components/Pages/PublicResources/Projects/Projects.razor.rz.scp.css */
.projects-jump-list[b-t04y2pwb5f] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each jump link gets a full row so a thumb can hit it. */
.projects-jump-list li[b-t04y2pwb5f] {
    margin: 0;
    border-top: 1px solid var(--wb-mist-deep);
}

.projects-jump-list li:first-child[b-t04y2pwb5f] {
    border-top: 0;
}

.projects-jump-list a[b-t04y2pwb5f] {
    display: block;
    padding: var(--wb-space-2) 0;
    color: var(--wb-color-link);
}
/* /Components/Pages/PublicResources/Reports/Reports.razor.rz.scp.css */
.reports-grid[b-j7hvcr32kj] {
    padding: 0;
    list-style: none;
}
/* /Components/Pages/PublicResources/SecondaryMetering/SecondaryMetering.razor.rz.scp.css */
.metering-faq[b-849mlxvtml] {
    margin: 0;
}

.metering-faq__item[b-849mlxvtml] {
    padding: var(--wb-space-4) 0;
    border-top: 1px solid var(--wb-mist-deep);
}

.metering-faq__item:first-child[b-849mlxvtml] {
    padding-top: 0;
    border-top: 0;
}

.metering-faq dt[b-849mlxvtml] {
    margin-bottom: var(--wb-space-1);
    font-weight: 700;
    color: var(--wb-ink);
}

.metering-faq dd[b-849mlxvtml] {
    margin: 0;
}

/* The report guide is a ul.popup-gallery so js/site.js opens the picture in its lightbox, but it reads as one of
   the card's buttons. */
.metering-resources[b-849mlxvtml] {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* /Components/Pages/PublicResources/Shared/PhotoGallery.razor.rz.scp.css */
.photo-gallery[b-wvv90l7rk9] {
    display: grid;
    gap: var(--wb-space-5);
    margin: var(--wb-space-5) 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .photo-gallery--2[b-wvv90l7rk9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
/* /Components/Pages/PublicResources/Shared/ZoomablePhoto.razor.rz.scp.css */
.zoomable-photo[b-w6x4wnoe4d] {
    margin: 0;
}

.zoomable-photo__link[b-w6x4wnoe4d] {
    position: relative;
    display: block;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    background: var(--wb-mist);
}

.zoomable-photo__link[b-w6x4wnoe4d]  img {
    display: block;
    width: 100%;
    height: auto;
}

.zoomable-photo__link:focus-visible[b-w6x4wnoe4d] {
    outline: 3px solid var(--wb-river) !important;
    outline-offset: 2px;
}

/* A small magnifier in the corner says the photo opens larger; it brightens under the pointer. */
.zoomable-photo__zoom[b-w6x4wnoe4d] {
    position: absolute;
    right: var(--wb-space-2);
    bottom: var(--wb-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    color: var(--wb-navy);
}

.zoomable-photo__link:hover .zoomable-photo__zoom[b-w6x4wnoe4d] {
    background: var(--wb-color-surface);
    color: var(--wb-river);
}

.wb-page .zoomable-photo__caption[b-w6x4wnoe4d] {
    margin: var(--wb-space-2) 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wb-ink-soft);
}
/* /Components/Pages/PublicResources/SurplusSales/SurplusSales.razor.rz.scp.css */
.surplus-introduction[b-qmci5bwgbp] {
    margin-bottom: var(--wb-space-6);
}

.surplus-items[b-qmci5bwgbp] {
    padding: 0;
    list-style: none;
}
/* /Components/Pages/Tax/Tax.razor.rz.scp.css */
/* A Sway scrolls inside its own frame, so the frame takes most of the screen instead of a video's 16:9. */
.tax-proposal[b-v5ykemwp8u]  .wb-frame {
    aspect-ratio: auto;
    height: 80vh;
}
/* /Components/Shared/Components/FormAttachmentItem.razor.rz.scp.css */
.form-attachment-item__help[b-feg5utsi6l] {
    padding-top: 5px;
    font-size: 14px;
}
/* /Components/Shared/Components/FormCheckItem.razor.rz.scp.css */
.form-check-item__detail[b-pxwg2k2hm6] {
    padding: 5px 0 0 28px;
    font-style: italic;
}
/* /Components/Shared/Components/FormCheckListItem.razor.rz.scp.css */
.form-check-list-item[b-hz7l9zf8xv] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-2);
}
/* /Components/Shared/Components/FormComboItem.razor.rz.scp.css */
.form-combo-item__note[b-wd8svtav2w] {
    padding-top: 5px;
    font-size: 14px;
}
/* /Components/Shared/Components/FormRowList.razor.rz.scp.css */
.form-row-list[b-emdpd5aju7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wb-space-4);
}

.form-row-list > *[b-emdpd5aju7] {
    max-width: 100%;
}

.form-row-list[b-emdpd5aju7]  form {
    width: 100%;
}

.form-row-list__empty[b-emdpd5aju7] {
    margin: 0;
    color: var(--wb-color-text-muted);
}

.form-row-list__items[b-emdpd5aju7] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-row-list__item[b-emdpd5aju7] {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-3);
    padding: var(--wb-space-4);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface);
}

.form-row-list__summary[b-emdpd5aju7] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.form-row-list__actions[b-emdpd5aju7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-2);
}

.form-row-list__question[b-emdpd5aju7] {
    margin: 0 0 var(--wb-space-2);
    color: var(--wb-color-text-strong);
    font-weight: 600;
}

.form-row-list__alert[b-emdpd5aju7] {
    width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
    .form-row-list__item[b-emdpd5aju7] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .form-row-list__actions[b-emdpd5aju7] {
        flex-shrink: 0;
    }
}
/* /Components/Shared/Components/FormSubmitItem.razor.rz.scp.css */
.form-submit-item__alert[b-rxktupfg6r] {
    margin-bottom: 10px;
}

.form-submit-item__waiting[b-rxktupfg6r] {
    display: inline-block;
    padding-left: 10px;
    font-weight: bold;
}
/* /Components/Shared/Components/ReCaptchaField.razor.rz.scp.css */
.recaptcha-field__alert[b-uq7gsciupb] {
    margin: 10px 0 0;
}
/* /Components/Shared/ObservedHolidays.razor.rz.scp.css */
.observed-holidays[b-1heb1k6ln6] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.observed-holidays li[b-1heb1k6ln6] {
    padding-top: 10px;
}