/*
 * Pro Blinds theme chrome: header (Figma 5:553), dropdown menus (124:7911 etc.), footer (6:712).
 * Header/footer are theme parts, not editor blocks, so they use viewport media queries.
 */

body.pb-site {
    background: #fff;
    color: #202020;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.pb-site .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.pb-site .skip-link:focus {
    background: #fff;
    clip: auto;
    clip-path: none;
    color: #202020;
    height: auto;
    left: 8px;
    padding: 12px 16px;
    top: 8px;
    width: auto;
    z-index: 100000;
}

.pb-site main.pb-page {
    display: block;
    padding: 0;
}

/* ---------- Buttons used by theme parts (same look as core button styles) ---------- */
.pb-btn {
    align-items: center;
    border: 0;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    padding: 17px 20px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.pb-btn--primary { background: #4e804e; color: #fff; }
.pb-btn--primary:hover, .pb-btn--primary:focus-visible { background: #3f6b3f; color: #fff; }
.pb-btn--outline { border: 1px solid #4e804e; color: #4e804e; background: transparent; }
.pb-btn--outline:hover, .pb-btn--outline:focus-visible { background: #4e804e; color: #fff; }
.pb-btn--outline-light { border: 1px solid #fff; color: #fff; background: transparent; }
.pb-btn--outline-light:hover, .pb-btn--outline-light:focus-visible { background: #fff; color: #283649; }
.pb-btn:focus-visible { outline: 2px solid #6990c5; outline-offset: 3px; }

/* ---------- Header ---------- */
.pb-header {
    background: #fff;
    position: relative;
    z-index: 50;
}

.pb-header__rule {
    background: #283649;
    height: 4px;
}

.pb-header__main {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1280px;
    min-height: 96px;
    padding: 10px 60px;
}

.pb-header__logo {
    align-items: center;
    display: flex;
    flex: 0 0 116px;
    height: 76px;
    width: 116px;
}

.pb-header__logo-img {
    display: block;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 116px;
}

.pb-nav__list {
    align-items: center;
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-nav__item {
    margin: 0;
    position: relative;
}

.pb-nav__link,
.pb-nav__toggle,
.pb-nav__sublink {
    background: none;
    border: 0;
    border-radius: 0;
    color: #202020;
    cursor: pointer;
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.pb-nav__link:hover,
.pb-nav__toggle:hover,
.pb-nav__sublink:hover,
.pb-nav__toggle[aria-expanded="true"] {
    color: #4e804e;
}

.pb-nav__link:focus-visible,
.pb-nav__toggle:focus-visible,
.pb-nav__sublink:focus-visible {
    outline: 2px solid #6990c5;
    outline-offset: 3px;
}

.pb-nav__sub {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: -10px;
    list-style: none;
    margin: 0;
    min-width: max-content;
    padding: 10px;
    position: absolute;
    top: calc(100% + 31px);
    z-index: 60;
}

.pb-nav__sub[hidden] { display: none; }
.pb-nav__sub .pb-nav__item { position: static; }

.pb-nav__mobile-cta { display: none; }

.pb-header__actions {
    align-items: center;
    display: flex;
    gap: 36px;
}

.pb-header__phone {
    color: #201c1b;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.pb-header__phone:hover { color: #4e804e; }

.pb-header__burger {
    background: none;
    border: 0;
    cursor: pointer;
    display: none;
    height: 44px;
    padding: 10px;
    width: 44px;
}

.pb-header__burger-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pb-header__burger-lines span {
    background: #283649;
    border-radius: 2px;
    display: block;
    height: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 24px;
}

.pb-header__burger[aria-expanded="true"] .pb-header__burger-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pb-header__burger[aria-expanded="true"] .pb-header__burger-lines span:nth-child(2) { opacity: 0; }
.pb-header__burger[aria-expanded="true"] .pb-header__burger-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop: two-row header. One row put eight nav items plus the phone and CTA inside 1160px
   at 12px, which left the menu cramped and no room to add anything (Rom, 21/09/2026).
   Row one keeps logo, phone and CTA; row two gives the nav the full width. */
@media (min-width: 1024px) {
    .pb-header__main {
        flex-wrap: wrap;
        max-width: none;
        min-height: 0;
        padding: 10px max(24px, calc((100% - 1400px) / 2)) 0;
        row-gap: 4px;
    }

    .pb-header__logo { order: 1; }
    .pb-header__actions { order: 2; }

    .pb-nav {
        border-top: 1px solid #e4e7ec;
        flex-basis: 100%;
        order: 3;
    }

    .pb-nav__list {
        gap: 34px;
        justify-content: center;
        padding: 10px 0 12px;
    }

    /* 12px was unreadable on a 1400px row. 18px top level, 16px in the dropdowns (Rom, 21/09/2026). */
    .pb-nav__link,
    .pb-nav__toggle {
        font-size: 18px;
        user-select: none;
    }

    .pb-nav__item > .pb-nav__link,
    .pb-nav__item > .pb-nav__toggle { padding-block: 6px; }

    .pb-nav__sublink { font-size: 16px; }

    /* The dropdown was offset for the old one-row header: it sat 31px below the item and 10px
       to its left. On the two-row header it hangs off the item, so pin it to the item's left
       edge and let the panel start where the item ends (no gap to fall through on the way down). */
    .pb-nav__sub {
        gap: 12px;
        left: 0;
        padding: 18px 16px 16px;
        top: 100%;
    }

    /* Phone reads as an action, not a label. */
    .pb-header__phone {
        border: 1px solid #283649;
        border-radius: 6px;
        padding: 14px 18px;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .pb-header__phone:hover,
    .pb-header__phone:focus-visible {
        background: #283649;
        color: #fff;
    }
}

/* 1024 to 1199: 18px with 34px gaps needs 1065px and does not fit, so step down to 16px. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .pb-header__main { padding-inline: 24px; }
    .pb-nav__list { gap: 18px; }
    .pb-header__actions { gap: 20px; }

    .pb-nav__link,
    .pb-nav__toggle { font-size: 16px; }

    .pb-header__phone { padding: 12px 14px; }
}

@media (max-width: 1023.98px) {
    .pb-nav__list { gap: 14px; }
    .pb-header__actions { gap: 20px; }
}

/* Tablet and mobile header: burger + panel (design/mobile-rules.md, rule H1-H4). */
@media (max-width: 1023px) {
    .pb-header__main {
        flex-wrap: wrap;
        min-height: 72px;
        padding: 8px 20px;
    }

    .pb-header__logo { flex-basis: 96px; height: 56px; width: 96px; }
    .pb-header__logo-img { width: 96px; }
    .pb-header__burger { display: block; }
    .pb-header__cta { display: none; }

    .pb-nav {
        border-top: 1px solid #e4e7ec;
        display: none;
        flex-basis: 100%;
        order: 3;
        padding: 12px 0 20px;
    }

    .pb-nav.is-open { display: block; }

    .pb-nav__list {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .pb-nav__link,
    .pb-nav__toggle {
        font-size: 16px;
        padding: 14px 0;
        width: 100%;
    }

    .pb-nav__toggle {
        position: relative;
    }

    .pb-nav__toggle::after {
        border-bottom: 2px solid currentColor;
        border-right: 2px solid currentColor;
        content: '';
        height: 8px;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-70%) rotate(45deg);
        width: 8px;
    }

    .pb-nav__toggle[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }

    .pb-nav__item { border-bottom: 1px solid #eef0f3; }

    .pb-nav__sub {
        gap: 0;
        padding: 0 0 10px 16px;
        position: static;
    }

    .pb-nav__sublink {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 0;
        white-space: normal;
    }

    .pb-nav__sub .pb-nav__item { border: 0; }

    .pb-nav__mobile-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 20px;
    }
}

@media (max-width: 599px) {
    .pb-header__phone { font-size: 15px; }
    .pb-header__actions { gap: 8px; }
}

/* ---------- Footer ---------- */
.pb-footer {
    background: #283649;
    color: #fff;
    font-family: 'Lato', system-ui, sans-serif;
}

.pb-footer p,
.pb-footer ul,
.pb-footer li {
    font-size: inherit;
    line-height: 1.2;
    margin: 0;
}

.pb-footer__clients {
    background: #6990c5;
    display: flex;
    justify-content: center;
    padding: 0 60px;
}

.pb-site .pb-footer__clients-title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    text-transform: none;
}

.pb-footer__brands {
    background: #fff;
    display: flex;
    justify-content: center;
    padding: 40px 60px;
}

.pb-footer__brands-img {
    aspect-ratio: 1020 / 216.258;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 1020px;
}

.pb-footer__cta {
    align-items: center;
    background: #283649;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 435px;
    isolation: isolate;
    justify-content: center;
    overflow: clip;
    padding: 0 20px;
    position: relative;
    text-align: center;
}

.pb-footer__cta-bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    opacity: 0.15;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.pb-footer__cta-title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.5;
}

.pb-footer__cta-sub {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.5;
    max-width: 606px;
}

.pb-footer__cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.pb-footer__main {
    align-items: flex-start;
    background: #313131;
    box-sizing: border-box;
    display: flex;
    font-size: 18px;
    justify-content: space-between;
    line-height: 1.2;
    min-height: 378px;
    padding: 40px max(60px, calc((100% - 1160px) / 2));
}

.pb-footer__main p,
.pb-footer__main li { margin: 0 0 6px; }

.pb-footer__main a {
    color: #fff;
    text-decoration: none;
}

.pb-footer__main a:hover { text-decoration: underline; }

.pb-footer__head { margin-bottom: calc(12px + 1.2em) !important; }

.pb-footer__col--areas { width: 228px; }

.pb-footer__products {
    column-gap: 40px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    grid-template-rows: repeat(8, auto);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-footer__col--proudly {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pb-footer__col--proudly p { margin: 0; }

.pb-footer__flags {
    display: flex;
    gap: 10px;
}

.pb-footer__flag {
    display: block;
    height: 29px;
    object-fit: cover;
    width: 49px;
}

.pb-footer__copy {
    background: #283649;
    padding: 5px max(128px, calc((100% - 1024px) / 2));
}

.pb-footer__copy p {
    font-size: 18px;
    line-height: 1.2;
}

@media (max-width: 1023px) {
    .pb-footer__main {
        display: grid;
        gap: 40px 32px;
        grid-template-columns: 1fr 1fr;
        min-height: 0;
        padding: 40px 32px;
    }

    .pb-footer__col--areas { width: auto; }
    .pb-footer__col--proudly { align-items: flex-start; align-self: start; }
    .pb-footer__copy { padding: 8px 32px; }
    .pb-footer__cta { height: auto; padding: 64px 32px; }
}

@media (max-width: 599px) {
    .pb-site .pb-footer__clients-title { font-size: 28px; }
    .pb-footer__clients { padding: 4px 20px; }
    .pb-footer__brands { padding: 32px 20px; }
    .pb-footer__cta { padding: 56px 20px; }
    .pb-footer__cta-title { font-size: 30px; }
    .pb-footer__cta-sub { font-size: 20px; }
    .pb-footer__main { grid-template-columns: 1fr; padding: 40px 20px; font-size: 17px; }
    .pb-footer__products { grid-template-columns: 1fr 1fr; column-gap: 20px; }
    .pb-footer__copy { padding: 10px 20px; }
    .pb-footer__copy p { font-size: 15px; }
}

/* ---------- Single post fallback (posts without Pro Blinds layout blocks) ---------- */
.pb-article-fallback {
    background: var(--pb-c-ice, #f4f4f4);
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 80px max(20px, calc((100% - 1024px) / 2));
}
.pb-article-fallback__title {
    color: var(--pb-c-text, #202020);
    margin: 0 auto;
    max-width: 702px;
    text-align: center;
}
.pb-article-fallback__body {
    font-family: var(--pb-font);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 918px;
    width: 100%;
}
.pb-article-fallback__body > * { margin: 0 0 12px; }

/* Footer service-area suburb links (context aware, see pb_service_areas_html): read as the Figma text */
.pb-footer .pb-footer__area-link { color: inherit; text-decoration: none; }
.pb-footer .pb-footer__area-link:hover,
.pb-footer .pb-footer__area-link:focus-visible { text-decoration: underline; }

/* ---------- Sticky mobile call / estimate bar (12/09/2026) ----------
   Below 1024px the header's estimate button is hidden, so the two actions live here instead. Sits above the page,
   respects the iPhone home indicator, and the body gets matching bottom padding so the footer is never covered. */
.pb-stickycta { display: none; }

@media (max-width: 1023.98px) {
    .pb-stickycta {
        align-items: center;
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid #e1e5e1;
        bottom: 0;
        box-shadow: 0 -4px 22px rgba(30, 39, 51, 0.10);
        display: flex;
        gap: 10px;
        left: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        z-index: 80;
    }

    .pb-stickycta__btn {
        flex: 1 1 0;
        gap: 8px;
        min-height: 52px;
        padding: 14px 10px;
    }

    .pb-stickycta .pb-btn--outline { background: #fff; }

    body { padding-bottom: 76px; }

    /* the mobile nav panel covers the screen, so the bar would sit on top of it */
    body:has(#pb-primary-nav.is-open) .pb-stickycta { display: none; }
}

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 1023.98px) {
        body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    }
}


/* ---------- Blog index (Figma 128:8136) ---------- */
.pb-bloghero {
    align-items: center;
    background: #0d1718;
    box-sizing: border-box;
    display: flex;
    min-height: 380px;
    overflow: hidden;
    padding: 60px max(20px, calc((100% - 1160px) / 2));
    position: relative;
}

.pb-bloghero__bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0.35;
    position: absolute;
    width: 100%;
}

.pb-bloghero__card {
    background: rgba(44, 44, 44, 0.5);
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 708px;
    padding: 30px;
    position: relative;
    width: 100%;
}

.pb-site .pb-bloghero__title {
    color: #fff;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 45px;
    margin: 0;
    text-transform: capitalize;
}

.pb-site .pb-bloghero__intro {
    color: #fff;
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
}

.pb-bloghero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pb-blogindex {
    background: #fff;
    box-sizing: border-box;
    padding: 80px max(20px, calc((100% - 1024px) / 2));
}

.pb-blogindex__inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.pb-blogrow {
    align-items: center;
    display: flex;
    gap: 40px;
    margin: 0;
}

.pb-blogrow--reverse {
    flex-direction: row-reverse;
}

.pb-blogrow__media {
    border-radius: 171px;
    display: block;
    flex: 0 0 180px;
    height: 190px;
    overflow: hidden;
    width: 180px;
}

.pb-blogrow__image {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.pb-blogrow__image--placeholder { background: #f4f4f4; }

.pb-blogrow__body {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pb-site .pb-blogrow__title {
    color: #202020;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 45px;
    margin: 0;
    text-transform: capitalize;
}

.pb-site .pb-blogrow__title a {
    color: inherit;
    text-decoration: none;
}

.pb-site .pb-blogrow__title a:hover,
.pb-site .pb-blogrow__title a:focus-visible { color: #4e804e; }

.pb-site .pb-blogrow__excerpt {
    color: #202020;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.pb-site .pb-blogrow__more {
    color: #4e804e;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    text-decoration: none;
    text-transform: uppercase;
}

.pb-site .pb-blogrow__more:hover,
.pb-site .pb-blogrow__more:focus-visible { text-decoration: underline; }

.pb-blogindex__pagination { margin-top: 60px; }

.pb-blogindex__pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pb-site .pb-blogindex__pagination .page-numbers {
    align-items: center;
    border: 1px solid #d9dee8;
    border-radius: 6px;
    color: #202020;
    display: inline-flex;
    min-height: 40px;
    min-width: 40px;
    justify-content: center;
    padding: 6px 12px;
    text-decoration: none;
}

.pb-site .pb-blogindex__pagination .page-numbers.current,
.pb-site .pb-blogindex__pagination .page-numbers:hover {
    background: #4e804e;
    border-color: #4e804e;
    color: #fff;
}

@media (max-width: 1023.98px) {
    .pb-bloghero { padding: 48px 32px; min-height: 320px; }
    .pb-blogindex { padding: 56px 32px; }
    .pb-blogindex__inner { gap: 56px; }
    .pb-site .pb-bloghero__title { font-size: 38px; line-height: 1.1; }
    .pb-site .pb-blogrow__title { font-size: 30px; line-height: 1.2; }
    .pb-blogrow__media { flex-basis: 150px; height: 158px; width: 150px; }
}

@media (max-width: 599.98px) {
    .pb-bloghero { padding: 32px 20px; min-height: 0; }
    .pb-bloghero__card { border-radius: 16px; gap: 16px; padding: 20px; }
    .pb-site .pb-bloghero__title { font-size: 32px; }
    .pb-site .pb-bloghero__intro { font-size: 17px; }
    .pb-bloghero__actions { gap: 12px; }
    .pb-bloghero__actions .pb-btn { flex: 1 1 100%; }
    .pb-blogindex { padding: 40px 20px; }
    .pb-blogindex__inner { gap: 40px; }
    .pb-blogrow,
    .pb-blogrow--reverse { align-items: flex-start; flex-direction: column; gap: 16px; }
    .pb-blogrow__media { flex: 0 0 auto; height: 148px; width: 140px; }
    .pb-site .pb-blogrow__title { font-size: 26px; }
    .pb-site .pb-blogrow__more { text-align: left; }
}


/* ---------- Trust strip spacing (Rom, 21/09/2026) ----------
   The band is built from four stacks that top-align, and the stars column carried a 10px
   label gap where the other three used 20px, so the rows never lined up and the shorter
   columns left dead space. Centre the columns and use one gap for all four. */
.pb-section__inner:has(.has-pb-star-color) {
    align-items: center;
    padding-block: 32px;
    row-gap: 24px;
}

.pb-section__inner:has(.has-pb-star-color) .pb-stack { gap: 10px; }

@media (max-width: 1023.98px) {
    .pb-section__inner:has(.has-pb-star-color) { padding-block: 24px; }
}

/* ---------------------------------------------------------------------------
 * 404. Reuses the blog hero's dark band and card so it reads as part of the
 * site rather than the starter theme's blue-and-orange default.
 * ------------------------------------------------------------------------- */

.pb-404hero {
    align-items: center;
    background: #0d1718;
    box-sizing: border-box;
    display: flex;
    min-height: 420px;
    overflow: hidden;
    padding: 80px max(20px, calc((100% - 1160px) / 2));
    position: relative;
}

.pb-404hero__bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0.3;
    position: absolute;
    width: 100%;
}

.pb-404hero__card {
    background: rgba(44, 44, 44, 0.5);
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 708px;
    padding: 36px 30px;
    position: relative;
    width: 100%;
}

.pb-site .pb-404hero__eyebrow {
    color: #9fc49f;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.pb-site .pb-404hero__title {
    color: #fff;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 45px;
    margin: 0;
}

.pb-site .pb-404hero__intro {
    color: #fff;
    font-family: var(--pb-font, 'Poppins', system-ui, sans-serif);
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    max-width: 616px;
}

.pb-404hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

/* ---- helpful links band ---- */

.pb-404links {
    background: var(--pb-c-ice, #f4f4f4);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 80px max(20px, calc((100% - 1024px) / 2));
}

.pb-site .pb-404links__title {
    color: var(--pb-c-text, #202020);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 45px;
    margin: 0;
}

.pb-404links__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-404links__item { margin: 0; }

.pb-site .pb-404links__link {
    align-items: center;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    box-sizing: border-box;
    color: #202020;
    display: flex;
    font-family: var(--pb-font, 'Poppins', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    min-height: 56px;
    padding: 14px 18px;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
    width: 100%;
}

.pb-site .pb-404links__link::after {
    content: '→';
    color: #4e804e;
    margin-left: auto;
}

.pb-site .pb-404links__link:hover,
.pb-site .pb-404links__link:focus-visible {
    background: #4e804e;
    border-color: #4e804e;
    color: #fff;
}

.pb-site .pb-404links__link:hover::after,
.pb-site .pb-404links__link:focus-visible::after { color: #fff; }

.pb-404links__search form {
    display: flex;
    gap: 12px;
    max-width: 520px;
}

.pb-404links__search input[type="search"] {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    box-sizing: border-box;
    color: #202020;
    flex: 1 1 auto;
    font-family: var(--pb-font, 'Poppins', system-ui, sans-serif);
    font-size: 16px;
    min-height: 52px;
    min-width: 0;
    padding: 12px 16px;
}

.pb-404links__search input[type="search"]:focus-visible {
    border-color: #4e804e;
    outline: 2px solid #6990c5;
    outline-offset: 2px;
}

.pb-404links__search .pb-btn { flex: 0 0 auto; }

@media (max-width: 767.98px) {
    .pb-404hero { min-height: 0; padding: 48px 20px; }
    .pb-404hero__card { padding: 24px 20px; }
    .pb-site .pb-404hero__title { font-size: 32px; line-height: 36px; }
    .pb-site .pb-404hero__intro { font-size: 16px; }
    .pb-404hero__actions { gap: 12px; }
    .pb-404hero__actions .pb-btn { flex: 1 1 100%; justify-content: center; }
    .pb-404links { gap: 20px; padding: 48px 20px; }
    .pb-site .pb-404links__title { font-size: 28px; line-height: 34px; }
    .pb-404links__search form { flex-direction: column; }
    .pb-404links__search .pb-btn { justify-content: center; }
}