/* ========================================
   BRANDS PAGE (ID 11274)
   ========================================
   Extracted from an inline <style> block that lived inside the Elementor HTML
   widget (issue #12). Two Elementor-only things were dropped in the move:

   1. A ".elementor-section:first-child" gap reset — that element no longer
      exists.
   2. "margin-top: -80px" plus a 100vw / -50vw breakout on the header. Both
      were compensating for the gap and width constraints Elementor imposed.
      The canvas overrides below zero the OceanWP container instead, so the
      header can simply be a full-width block.

   Design pass: the brand grid no longer comes from [pwb-all-brands], so the
   block of .pwb-* rules that existed only to override the plugin's own CSS with
   !important is gone. The cards are the template's own markup now.
   ======================================== */

/* Hide page title and breadcrumb */
body.page-id-11274 .page-header,
body.page-id-11274 .entry-header {
    display: none !important;
}

/* ----------------------------------------
   1. PAGE CANVAS
   ---------------------------------------- */
body.page-id-11274 #main,
body.page-id-11274 #content-wrap,
body.page-id-11274 #primary,
body.page-id-11274 .content-area,
body.page-id-11274 #content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-id-11274 #primary {
    border: 0 !important;
}

body.page-id-11274 {
    overflow-x: hidden;
}

/* ----------------------------------------
   2. PAGE HEADER
   ---------------------------------------- */
.sb2u-brands-page-header {
    background: linear-gradient(135deg, #1a3828 0%, #2d5a3f 55%, #3F6A54 100%);
    box-sizing: border-box;
    margin: 0 0 48px;
    overflow: hidden;
    padding: 70px 40px;
    position: relative;
    text-align: center;
    width: 100%;
}

.sb2u-brands-page-header .sb2u-brands-texture {
    background-image: repeating-linear-gradient(-52deg,
            transparent, transparent 18px,
            rgba(255, 255, 255, 0.03) 18px, rgba(255, 255, 255, 0.03) 19px);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

/* Gold hairline along the bottom edge */
.sb2u-brands-page-header::after {
    background: linear-gradient(90deg, transparent 0%, #FFD700 30%, #FFD700 70%, transparent 100%);
    bottom: 0;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

/* Oversized watermark glyph */
.sb2u-brands-page-header::before {
    content: '🔒';
    font-size: 200px;
    line-height: 1;
    opacity: 0.04;
    pointer-events: none;
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
    z-index: 0;
}

.sb2u-brands-page-header-inner {
    margin: 0 auto;
    max-width: 720px;
    position: relative;
    z-index: 2;
}

.sb2u-brands-page-label {
    background: #FFD700;
    border-radius: 20px;
    color: #1a1a1a;
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    margin-bottom: 20px;
    padding: 4px 16px;
    text-transform: uppercase;
}

.sb2u-brands-page-title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: 1.15;
    margin: 0 0 16px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.sb2u-brands-page-title span {
    color: #FFD700;
}

.sb2u-brands-page-sub {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 auto 36px;
    max-width: 560px;
}

.sb2u-brands-page-stats {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    display: inline-flex;
    gap: 28px;
    padding: 16px 36px;
}

.sb2u-brands-page-stat {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb2u-brands-page-stat strong {
    color: #FFD700;
    font-family: var(--font-heading);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-display);
    line-height: 1;
    letter-spacing: var(--tracking-display);
}

.sb2u-brands-page-stat span {
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-body);
    font-size: 11px;
    white-space: nowrap;
}

.sb2u-brands-page-stat-divider {
    background: rgba(255, 255, 255, 0.25);
    height: 36px;
    width: 1px;
}

/* ----------------------------------------
   3. BRAND CARDS
   ----------------------------------------
   Native markup from the template, not [pwb-all-brands], so none of this needs
   !important any more.

   The cards used to be dark green with a white tile floated inside them. That
   put two boxes around every logo and made the page read as a grid of green
   blocks, with the logo — the only thing a visitor is actually scanning for —
   as the smallest element in each one. Light cards on the off-white page put
   the logos first and match the brand strip on the home page. */

/* The page header already carries 48px of bottom margin. */
.sb2u-brandgrid-section {
    padding: 8px 0;
}

.sb2u-brandgrid-inner {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 30px;
}

/* Four across, so eight brands make two even rows. Five left an orphan row of
   three. */
.sb2u-brandgrid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sb2u-brandcard {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 2px 10px rgba(15, 38, 26, 0.05);
    display: flex;
    flex-direction: column;
    padding: 26px 20px 22px;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sb2u-brandcard:hover {
    border-color: var(--color-border-dark);
    box-shadow: 0 14px 32px rgba(15, 38, 26, 0.12);
    transform: translateY(-4px);
}

/* Fixed box so eight logos of eight different aspect ratios sit on one optical
   baseline. object-fit does the rest.

   104px, not 76px. Every one of these files is a square JPG with the mark
   floating in a wide white margin, so the box has to be bigger than the mark
   needs or the logo renders at about a third of the space it appears to occupy.
   Sized against Chubbsafes and Pegasus, the two with the most padding baked in. */
.sb2u-brandcard-logo {
    align-items: center;
    display: flex;
    height: 104px;
    justify-content: center;
    margin-bottom: 12px;
    width: 100%;
}

.sb2u-brandcard-logo img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: auto;
    max-width: 100%;
}

.sb2u-brandcard-logo-fallback {
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-primary);
    display: flex;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: var(--weight-heading);
    height: 64px;
    justify-content: center;
    width: 64px;
}

.sb2u-brandcard-name {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-subhead);
    line-height: 1.3;
}

/* "57 safes", not "(57)". A bare number in brackets reads as a footnote. */
.sb2u-brandcard-count {
    color: var(--color-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

/* Always visible, brightening on hover, rather than appearing on hover. Hidden
   it left every card with sixty-odd pixels of empty white below the count, and
   on touch — where there is no hover — the affordance never showed at all. */
.sb2u-brandcard-go {
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: var(--weight-body-strong);
    margin-top: 12px;
    transition: color 0.25s ease;
}

.sb2u-brandcard:hover .sb2u-brandcard-go,
.sb2u-brandcard:focus-visible .sb2u-brandcard-go {
    color: var(--color-primary);
}

/* ----------------------------------------
   4. CLOSING CTA
   ----------------------------------------
   The page used to stop dead after the last logo. */
.sb2u-brands-outro {
    background: linear-gradient(135deg, #3F6A54 0%, #2d5a3f 50%, #1e4030 100%);
    margin-top: 64px;
    padding: 68px 0;
    position: relative;
    text-align: center;
}

.sb2u-brands-outro::before {
    background: var(--accent-line);
    content: "";
    height: var(--accent-line-height);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.sb2u-brands-outro h2 {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-heading);
    margin: 0 0 14px;
}

.sb2u-brands-outro p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto 28px;
    max-width: 620px;
}

.sb2u-brands-outro-btn {
    align-items: center;
    background: var(--color-accent);
    border-radius: var(--radius-button);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.28);
    color: var(--color-accent-text) !important;
    display: inline-flex;
    font-size: 16px;
    font-weight: var(--weight-body-strong);
    justify-content: center;
    min-height: 52px;
    padding: 14px 32px;
    text-decoration: none !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.sb2u-brands-outro-btn:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 12px 32px rgba(255, 180, 0, 0.38);
    transform: translateY(-2px);
}

/* ----------------------------------------
   5. QUALITY FLOOR
   ---------------------------------------- */
.sb2u-brands-page-header a:focus-visible,
.sb2u-brandcard:focus-visible,
.sb2u-brands-outro-btn:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .sb2u-brandcard,
    .sb2u-brandcard-go,
    .sb2u-brands-outro-btn {
        transition-duration: 0.01ms;
    }

    .sb2u-brandcard:hover,
    .sb2u-brands-outro-btn:hover {
        transform: none;
    }
}

/* ----------------------------------------
   6. RESPONSIVE
   ---------------------------------------- */
@media (max-width: 1024px) {
    .sb2u-brandgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .sb2u-brands-page-header {
        padding: 56px 24px;
    }
}

@media (max-width: 640px) {
    .sb2u-brandgrid {
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sb2u-brandgrid-inner {
        padding: 0 20px;
    }

    .sb2u-brandcard {
        padding: 20px 14px 18px;
    }

    .sb2u-brandcard-logo {
        height: 76px;
        margin-bottom: 8px;
    }

    .sb2u-brandcard-name {
        font-size: 15px;
    }

    .sb2u-brands-page-header {
        padding: 44px 20px;
    }

    .sb2u-brands-page-header::before {
        font-size: 130px;
    }

    .sb2u-brands-page-stats {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 14px 20px !important;
    }

    .sb2u-brands-page-stat-divider {
        display: none !important;
    }

    .sb2u-brands-outro {
        margin-top: 44px;
        padding: 50px 0;
    }

    .sb2u-brands-outro h2 {
        font-size: 25px;
    }

    .sb2u-brands-outro p {
        font-size: 16px;
    }
}

/* Scroll reveal stagger — four across, so the count restarts each row. */
.sb2u-brandgrid .sb2u-reveal:nth-child(4n + 2) {
    --sb2u-reveal-i: 1;
}

.sb2u-brandgrid .sb2u-reveal:nth-child(4n + 3) {
    --sb2u-reveal-i: 2;
}

.sb2u-brandgrid .sb2u-reveal:nth-child(4n) {
    --sb2u-reveal-i: 3;
}