/* ============================
   REUSABLE BLOCK HEADER STYLES

   Spacing comes from the --head-gap-* tokens in style.css. Only layout
   (alignment, width) belongs here.
   ============================ */

.block-header {
    text-align: center;
    margin-bottom: var(--head-gap-content);
}

/* Side-by-side layout: the header sits above body copy in a column rather
   than above a full-width grid, so it needs a tighter gap than a section
   header would. */
.usps-content .block-header {
    text-align: left;
    --head-gap-content: 1.5rem;
}

/* An h1 used as a block title still reads as a section heading, so it takes
   h2's size and weight. */
.block-title {
    margin-bottom: 0;
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem);
    color: var(--secondary);
    font-weight: 600;
    line-height: 1.2;
}

/* ============================
   IMAGE TITLE BLOCK
   ============================ */

section.image-title {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 7rem 0 8rem;
    overflow: hidden;
    color: white;
    
    @media (max-width: 767px) {
        padding: 7rem 0 7rem;
    }
    
    /* Video Background */
    &.has-video-bg {
        background-image: none !important; /* Ensure image doesn't override video */
    }
    
    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        
        video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translateX(-50%) translateY(-50%);
            object-fit: cover;
        }
    }
    
    .title {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        
        h1 {
            /* Top margin is the eyebrow gap, set globally */
            margin-bottom: var(--head-gap-intro);
            color: white;
        }

        p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            text-wrap: balance;
            
            @media (max-width: 767px) {
                font-size: 1rem;
            }
        }
    }
}

/* ============================
   TEXT & IMAGE BLOCK
   ============================ */

section.text-image {
    padding: var(--section-py) 0;
    position: relative;
    
    &.light-bg {
        background-color: var(--light-gray);
    }
    
    .text-image-wrapper {
        display: flex;
        align-items: center;
        gap: 4rem;
        flex-wrap: wrap;
        
        @media (max-width: 767px) {
            flex-direction: column;
            gap: 2rem;
        }
    }
    
    /* Diagonal stripes border accent - similar to USPs block */
    &.has-border-accent::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background: repeating-linear-gradient(
            -45deg,
            #eef3f5,
            #eef3f5 12px,
            #ffffff 12px,
            #ffffff 24px
        );
        opacity: 0.8;
    }
    
    .text-content {
        flex: 1;
        min-width: 300px;
        
        @media (max-width: 767px) {
            order: 1;
        }
        
        .text-content-body {
            .button,
            a.button {
                margin-top: 1rem;
            }
        }
        
        .button,
        a.button {
            margin-top: 1rem;
        }
    }
    
    .image-content {
        flex: 1;
        min-width: 300px;
        
        @media (max-width: 767px) {
            order: 2;
        }
        
        figure {
            margin: 0;
            overflow: hidden;
            height: 100%;
            border-radius: var(--border-radius);
        }
        
        img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
            
            &:hover {
                transform: scale(1.03);
            }
        }
        
        &.fit-cover img {
            object-fit: cover;
        }
        
        &.fit-contain img {
            object-fit: contain;
        }
    }
    
    &.image-right .text-image-wrapper {
        flex-direction: row;
    }
    
    &.image-left .text-image-wrapper {
        flex-direction: row-reverse;
    }
    
    &.hide-image-mobile .image-content {
        @media (max-width: 767px) {
            display: none;
        }
    }
}

/* ============================
   IMAGE CREDITS / CAPTIONS
   ============================ */

.image-credit {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.55rem;
    padding: 0.15rem 0.35rem;
    border-radius: 2px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 5;
    max-width: calc(100% - 1rem);
    pointer-events: auto;
    
    a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: underline;
        text-underline-offset: 2px;
        
        &:hover {
            color: white;
        }
    }
}

/* Image credit in hero sections */
.image-credit-hero {
    bottom: 1rem;
    right: 1rem;
    
    @media (max-width: 767px) {
        bottom: 0.75rem;
        right: 0.75rem;
    }
}

/* Ensure figure is positioned for absolute caption */
section.text-image .image-content figure {
    position: relative;
}

/* Non-stacked image: a tight flat offset in the brand blue plus a hairline
   keyline, so it reads as a deliberately placed panel rather than a bare photo.
   The offset points away from the text column (right on image-right, left on
   image-left). Brand-blue rather than black so it doesn't read as grey. */
section.text-image .image-content:not(.image-content-stack) figure {
    border-radius: 0;
    box-shadow:
        9px 9px 0 rgba(0, 79, 112, 0.09),
        0 0 0 1px var(--border-color);
}

section.text-image.image-left .image-content:not(.image-content-stack) figure {
    box-shadow:
        -9px 9px 0 rgba(0, 79, 112, 0.09),
        0 0 0 1px var(--border-color);
}

@media (max-width: 767px) {
    section.text-image .image-content:not(.image-content-stack) figure,
    section.text-image.image-left .image-content:not(.image-content-stack) figure {
        box-shadow:
            6px 6px 0 rgba(0, 79, 112, 0.09),
            0 0 0 1px var(--border-color);
    }
}

/* Offset image stack (text_image "Offset image stack" option):
   two square images offset diagonally, with a hollow two-tone square showing
   through the open corners behind them — top/right edges light primary
   (accent), bottom/left edges dark primary, echoing the logo. */
.text-image .image-stack {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
}

.text-image .image-stack .stack-frame {
    position: absolute;
    inset: 20%;
    border: 22px solid;
    /* top right bottom left */
    border-color: var(--accent) var(--accent) var(--primary) var(--primary);
    z-index: 0;
    pointer-events: none;
}

.text-image .image-stack .stack-img {
    position: absolute;
    width: 62%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.text-image .image-stack .stack-img:hover {
    transform: none;
}

.text-image .image-stack .stack-img-1 { /* top-left, sits on top */
    top: 0;
    left: 0;
    z-index: 2;
}

.text-image .image-stack .stack-img-2 { /* bottom-right, behind the top-left */
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ============================
   CTA BLOCK
   ============================ */

.cta-block {
    background-color: var(--primary);
    background-image:
        linear-gradient(rgba(0, 79, 112, 0.62), rgba(0, 79, 112, 0.62)),
        url('images/circuit-2.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 3rem 0;
    position: relative;
    
    @media (max-width: 767px) {
        padding: 2.5rem 0;
    }
    
    .cta-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
        flex-wrap: wrap;
        
        @media (max-width: 767px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 1.5rem;
            text-align: center;
        }
    }
    
    .cta-text {
        flex: 1;
        min-width: 250px;
        
        @media (max-width: 767px) {
            width: 100%;
        }
        
        h2 {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0 0 0.5rem;
            color: white;
        }
        
        p {
            font-size: 0.92rem;
            margin: 0;
        }
    }

    /* AOS's own fade-up end-state rule doubles up an attribute selector
       specifically to out-rank normal author styles
       ([data-aos^="fade"][data-aos^="fade"].aos-animate { opacity: 1 }) —
       that's why opacity here was silently snapping back to full once the
       element scrolled into view and AOS added .aos-animate. Matched its
       specificity (three class-level selectors) so 0.6 actually wins. */
    .cta-text p,
    .cta-text p.aos-animate {
        opacity: 0.6;
    }
    
    .cta-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        
        @media (max-width: 767px) {
            width: 100%;
            justify-content: center;
        }
        
        .button {
            margin: 0;
            white-space: nowrap;
            background-color: white;
            color: var(--primary);
            font-weight: 600;

            &::before {
                border-color: white;
            }
            
            &.outline {
                background-color: white;
                border: none;
                /* This variant has no border, unlike the global default —
                   don't inherit its border-compensated padding or this ends
                   up 4px shorter than the secondary button beside it. */
                padding: 0.75rem 1.5rem;
                color: var(--primary);

                &::before {
                    border-color: white;
                }

                &:hover, &:focus {
                    background-color: white;
                }
            }
            
            &.secondary {
                background-color: transparent;
                color: white;
                border: 2px solid rgba(255, 255, 255, 0.5);
                box-shadow: none;

                &:hover, &:focus, &:active {
                    background-color: white;
                    color: var(--primary);
                    border-color: white;
                    transform: none;
                    box-shadow: none;
                }
            }
        }
    }
}

/* ============================
   FEATURE BOXES
   ============================ */

.feature-boxes {
    padding: var(--section-py) 0 5rem;
    position: relative;
    overflow: hidden;

    @media (max-width: 767px) {
        padding-bottom: 3.5rem;
    }
    
    
    .container {
        position: relative;
        z-index: 1;
    }
    
    h2, h3 {
        color: white;
    }
    
    .feature-boxes-header {
        margin-bottom: 2rem;
        
        @media (max-width: 767px) {
            margin-bottom: 1.5rem;
        }
        
        .row {
            display: flex;
            justify-content: space-between;
            gap: 3rem;
            
            @media (max-width: 991px) {
                flex-direction: column;
                gap: 1rem;
            }
        }
        
        .col-title {
            flex: 1;
            min-width: 300px;
            
            h2 {
                margin-top: 0;
                margin-bottom: 0.5rem;
            }
        }
        
        .col-subtitle {
            flex: 1;
            min-width: 300px;
            
            p {
                margin: 0;
                opacity: 0.9;
                
                @media (max-width: 767px) {
                    font-size: 1rem;
                }
            }
        }
    }
    
    .feature-boxes-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        
        @media (max-width: 767px) {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }
    
    .feature-box-wrapper {
        height: 100%;
    }
    
    .feature-box {
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: var(--border-radius);
        transition: transform 0.3s ease, background-color 0.3s ease;
        border: solid 1px rgba(255, 255, 255, 0.1);
        
        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
        }
        
        .feature-box-inner {
            padding: 1.5rem;
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            height: 100%;
        }
        
        .feature-icon {
            flex: 0 0 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            img {
                width: 3.2rem;
                height: 3.2rem;
                border-radius: 0;
            }
        }
        
        .feature-content {
            flex: 1;
            
            h3 {
                font-size: 1.2rem;
                margin-top: 0;
                margin-bottom: 0.5rem;
            }
            
            p {
                margin: 0;
                opacity: 0.7;
                font-weight: 400;
                font-size: 0.9rem;
                line-height: 1.5;
            }
        }
    }
}

/* ============================
   PRODUCT LISTING BLOCK
   Cards / rows / comparison table + client-side filtering.
   .product-card is shared with "related products" on single product pages.
   ============================ */

.product-list-block {
    padding: var(--section-py) 0;
    background: white;
}

.product-list-block.light-bg {
    background-color: var(--light-gray);
}

.product-list-block [hidden] {
    display: none !important;
}

/* Every link in a listing is a UI control, not prose — the global
   a:hover underline doesn't belong on any of them. */
.product-list-block a:hover,
.product-list-block a:focus {
    text-decoration: none;
}

/* ---------- Lifecycle badge (shared: cards, rows, table, product page) ----------
   One flat chip with a coloured left edge — amber flags a superseded product,
   everything else stays in the brand accent. */

.product-status {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.55rem;
    background: var(--secondary);
    border-left: 3px solid var(--accent);
    color: white;
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-status-superseded {
    background: #f0b429;
    border-left-color: #96700c;
    color: #3d2c00;
}

.product-status-distributed,
.product-status-development {
    border-left-color: var(--accent);
}

/* ---------- Filters ---------- */

/* One control bar: category tabs on the left, search flush to the right. */
.product-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 2.25rem;
    background: white;
    border: 1px solid var(--border-color);
}

.product-filter-chips {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.product-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-filter-chip:hover,
.product-filter-chip:focus-visible {
    background: var(--light-gray);
    color: var(--text);
}

/* -ink, not the raw colour: as label text on white the lime category would
   sit at about 2:1. */
.product-filter-chip.is-active {
    color: var(--product-accent-ink, var(--primary));
    border-bottom-color: var(--product-accent, var(--primary));
}

.chip-swatch {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--product-accent, var(--border-color));
    transition: background-color 0.2s ease;
}

.product-filter-chip.is-active .chip-swatch {
    background: var(--product-accent, var(--primary));
}

.chip-count {
    font-size: 0.62rem;
    opacity: 0.55;
}

.product-filter-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 17rem;
    min-width: 11rem;
    border-left: 1px solid var(--border-color);
}

.product-filter-search:focus-within {
    box-shadow: inset 0 -3px 0 var(--product-accent, var(--accent));
}

.product-filter-search .material-symbols-outlined {
    position: absolute;
    left: 0.75rem;
    color: var(--gray);
    font-size: 1.05rem;
    pointer-events: none;
}

.product-filter-search input {
    width: 100%;
    padding: 0.7rem 0.8rem 0.7rem 2.3rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-family: 'Mona Sans Variable', sans-serif;
    font-size: 0.82rem;
}

.product-filter-search input:focus {
    outline: none;
}

@media (max-width: 700px) {
    .product-filter-search {
        flex: 1 1 100%;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}

/* Result count as a footer strip of the filter bar, so it reads as part of the
   control rather than a stray line of text underneath it. */
.product-filter-status {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
    padding: 0.45rem 0.9rem;
    background: var(--light-gray);
    border-top: 1px solid var(--border-color);
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.product-no-results {
    margin: 2rem 0 0;
    padding: 2rem;
    background: white;
    border: 1px dashed var(--border-color);
    text-align: center;
    color: var(--gray);
    font-size: 0.9rem;
}

.product-filter-reset {
    padding: 0;
    background: none;
    border: 0;
    color: var(--primary);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Card grid ---------- */

.product-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

@media (max-width: 1100px) {
    .product-grid.columns-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .product-grid,
    .product-grid.columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .product-grid,
    .product-grid.columns-2,
    .product-grid.columns-4 {
        grid-template-columns: 1fr;
    }
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--border-color);
    transition: border-color 0.25s ease;
}

/* category-coloured rule wipes across the top on hover — flat, no lift.
   Only the links that actually go to the product trigger it, so the card never
   promises a click it can't honour (the datasheet link is excluded). */
.product-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: var(--product-accent, var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 2;
}

.product-card:has([data-product-link]:hover),
.product-card:has([data-product-link]:focus-visible) {
    border-color: var(--product-accent, var(--primary));
}

.product-card:has([data-product-link]:hover)::before,
.product-card:has([data-product-link]:focus-visible)::before {
    transform: scaleX(1);
}

.product-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 2rem;
    background-color: var(--light-gray);
    background-image:
        linear-gradient(to right, rgba(0, 79, 112, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 79, 112, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
    overflow: hidden;
}

.product-card-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* drop-shadow follows the PNG's actual silhouette (unlike box-shadow,
       which would just draw a rectangle) — makes a cut-out product read as
       lifted off the grid instead of pasted flat onto it. */
    filter: drop-shadow(0 10px 14px rgba(0, 79, 112, 0.18));
    transition: transform 0.4s ease;
}

.product-card:has([data-product-link]:hover) .product-card-media img {
    transform: scale(1.04);
}

.product-card-media .product-status {
    position: absolute;
    top: 0;
    left: 0;
}

.product-card-body {
    flex: 1;
    padding: 1rem 1.1rem;
}

.product-card-category {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.product-card-category::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--product-accent, var(--accent));
}

/* The global heading rule adds 2rem to any h2–h6 that isn't a first child, and
   outranks a single class — hence the extra specificity here. */
.product-card-body .product-card-title {
    margin: 0.7rem 0 0.55rem;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.product-card-title a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-card-title a:hover,
.product-card-title a:focus {
    color: var(--product-accent-ink, var(--primary));
}

.product-card-summary {
    margin: 0;
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.55;
}

/* Spec values run from "24V" to "90-264V AC, 50/60Hz, 16A Max, 1400W Max", so
   every row is clamped to one line to keep the grid tidy; the full value is in
   a title tooltip and always in full on the product page. */
.product-card-specs {
    display: grid;
    gap: 0.35rem;
    margin: 0.9rem 0 0;
    padding: 0.75rem 0 0;
    list-style: none;
    border-top: 1px solid var(--border-color);
}

.product-card-specs li {
    display: grid;
    grid-template-columns: minmax(0, 5.25rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.6rem;
}

.product-card-specs .spec-label,
.product-card-specs .spec-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card-specs .spec-label,
.product-row-specs .spec-label {
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Values are data, not UI — body font reads lighter and clearer than a
   bold display size against the label. */
.product-card-specs .spec-value {
    font-family: 'Mona Sans Variable', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text);
    text-align: right;
    cursor: help;
}

.product-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    border-top: 1px solid var(--border-color);
}

.product-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.product-card-link .material-symbols-outlined {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.product-card:hover .product-card-link .material-symbols-outlined {
    transform: translateX(4px);
}

/* Sits in the same bar as "View product", so it gets its own quiet chip on
   hover rather than an underline — it goes somewhere different (the PDF). */
.product-card-datasheet {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: -0.35rem -0.5rem;
    padding: 0.35rem 0.5rem;
    color: var(--gray);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.product-card-datasheet:hover,
.product-card-datasheet:focus-visible {
    background: var(--light-gray);
    color: var(--primary);
}

.product-list-block.light-bg .product-card-datasheet:hover,
.product-list-block.light-bg .product-card-datasheet:focus-visible {
    background: var(--primary-light);
}

.product-card-datasheet .material-symbols-outlined {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

.product-card-datasheet:hover .material-symbols-outlined,
.product-card-datasheet:focus-visible .material-symbols-outlined {
    transform: translateY(2px);
}

.product-card-media-empty {
    display: block;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--border-color);
}

/* ---------- Compact rows ---------- */

.product-rows {
    border-top: 1px solid var(--border-color);
}

.product-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, padding-left 0.25s ease;
}

.product-row:hover {
    background-color: white;
    box-shadow: inset 3px 0 0 var(--product-accent, var(--accent));
    padding-left: 0.9rem;
}

.product-list-block.light-bg .product-row:hover {
    background-color: white;
}

.product-row-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 0.4rem;
    background-color: var(--light-gray);
    background-image:
        linear-gradient(to right, rgba(0, 79, 112, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 79, 112, 0.06) 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: center;
    /* Without this, a flex container's aspect-ratio can be overridden by a
       tall child (portrait photos grow the box past its ratio instead of
       being clipped to it) — matches .product-card-media. */
    overflow: hidden;
}

.product-list-block.light-bg .product-row-media {
    background-color: white;
}

.product-row-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Smaller than the card/full treatment — this thumbnail is only a few
       rem wide, a full-size shadow would overwhelm it. */
    filter: drop-shadow(0 4px 6px rgba(0, 79, 112, 0.18));
    transition: transform 0.4s ease;
}

/* Unscoped, matching .product-row:hover's own existing whole-row highlight
   (unlike cards, where hover is scoped to just the product links) — the row
   already lights up on any hover across it, so the image should move with
   that same trigger rather than a narrower one. */
.product-row:hover .product-row-media img {
    transform: scale(1.04);
}

.product-row-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.product-row-title a {
    color: var(--secondary);
    text-decoration: none;
}

.product-row-title a:hover,
.product-row-title a:focus {
    color: var(--primary);
}

.product-row-summary {
    margin: 0.25rem 0 0;
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.5;
}

.product-row-part {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--gray);
    font-family: 'Mona Sans Variable', sans-serif;
    font-size: 0.68rem;
}

.product-row-specs {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-row-specs li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Same treatment as the card's spec values (data, not UI — body font reads
   lighter and clearer): Mona Sans, weight 500, not a bold display size. */
.product-row-specs .spec-value {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Mona Sans Variable', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    cursor: help;
}

.product-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-row-datasheet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--light-gray);
    color: var(--primary);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.product-row-datasheet:hover,
.product-row-datasheet:focus {
    background: var(--primary);
    color: white;
}

.product-row .button {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
}

/* Below the wide breakpoint the row becomes a wrapping flex line: image, text
   and actions stay together and the specs drop to their own line underneath.
   (Grid auto-placement can't do this while the specs list is optional.) */
@media (max-width: 1000px) {
    .product-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1.25rem;
    }

    .product-row-media {
        width: 5rem;
        flex: 0 0 auto;
    }

    .product-row-body {
        flex: 1 1 12rem;
    }

    .product-row-actions {
        margin-left: auto;
    }

    .product-row-specs {
        flex: 1 1 100%;
        order: 5;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        padding-left: 6.25rem;
    }
}

@media (max-width: 600px) {
    .product-row-media {
        width: 4.5rem;
    }

    .product-row-body {
        flex: 1 1 8rem;
    }

    .product-row-specs {
        padding-left: 0;
    }
}

/* ---------- Comparison table ---------- */

.product-table-wrap {
    overflow-x: auto;
    background: white;
    border: 1px solid var(--border-color);
}

.product-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
}

/* The global table styles use !important, so these have to as well */
.product-table thead {
    background: var(--secondary);
}

.product-table thead th {
    padding: 0.7rem 1rem !important;
    background: var(--secondary) !important;
    border: 0 !important;
    color: white !important;
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.62rem;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left !important;
    white-space: nowrap !important;
}

.product-table tbody th,
.product-table tbody td {
    padding: 0.7rem 1rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 0.8rem;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

/* Data columns only — the product-name th keeps its own Montserrat rule
   below, and this must not out-rank it (that's a separate, lower-specificity
   selector, so this is scoped to td alone rather than added to the shared
   th+td rule above). */
.product-table tbody td {
    font-family: 'Mona Sans Variable', sans-serif;
}

.product-table tbody tr:nth-child(even) {
    background: transparent;
}

/* category colour bar down the left of each row */
.product-table tbody tr {
    box-shadow: inset 3px 0 0 var(--product-accent, transparent);
}

.product-table tbody tr:last-child th,
.product-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.product-table tbody tr:hover {
    background: var(--light-gray);
}

/* Product titles elsewhere pick up Montserrat automatically (they're h2–h4
   headings); this cell is a <th>, not a heading, so it needs it explicitly. */
.product-table-name {
    font-family: 'Montserrat Variable', sans-serif;
    font-weight: 600 !important;
    color: var(--secondary) !important;
}

.product-table-name a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--secondary);
    text-decoration: none;
}

.product-table-name a:hover {
    color: var(--primary);
}

.product-table-name img {
    flex: 0 0 auto;
    width: 3rem;
    height: 2.25rem;
    padding: 0.15rem;
    background: var(--light-gray);
    object-fit: contain;
}

.product-table-name .product-status {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.product-table td .is-empty {
    color: var(--border-color);
}

.product-table-actions {
    white-space: nowrap;
    text-align: right;
}

.product-table-actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
}

.product-table-actions a + a {
    margin-left: 0.75rem;
}

.product-table-actions .material-symbols-outlined {
    font-size: 1rem;
}

/* ---------- Full (expanded listing) ---------- */

.product-full-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Bordered like a card, not a bare editorial divider list — same hover
   language as the grid cards (accent wipe across the top, border to accent),
   just roomier inside. Keeps every entry visually "contained" as a product
   rather than loose flowing content. */
.product-full {
    position: relative;
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    background: white;
    border: 1px solid var(--border-color);
    transition: border-color 0.25s ease;
}

.product-full::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: var(--product-accent, var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.product-full:has([data-product-link]:hover),
.product-full:has([data-product-link]:focus-visible) {
    border-color: var(--product-accent, var(--primary));
}

.product-full:has([data-product-link]:hover)::before,
.product-full:has([data-product-link]:focus-visible)::before {
    transform: scaleX(1);
}

.product-full-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: start;
}

@media (max-width: 800px) {
    .product-full-grid {
        grid-template-columns: 1fr;
    }
}


/* The global heading rule adds 2rem to any h2–h6 that isn't a first child, and
   outranks a single class — hence the extra specificity here (same fix as
   .product-card-body .product-card-title). Without it the eyebrow tag reads
   as oddly far from the title. */
/* Only the bottom margin — the top one belongs to the eyebrow rule in
   style.css, and a shorthand here would zero it and close the gap. */
.product-full-content .product-full-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    /* Tracks the global h2 ramp — this is the headline of a full-width listing
       row, and at the old size the eyebrow above it and the button beside it
       both carried more weight than the product's own name. */
    font-size: clamp(1.35rem, 1.05rem + 1.35vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.product-full-title a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-full:has([data-product-link]:hover) .product-full-title a,
.product-full:has([data-product-link]:focus-visible) .product-full-title a {
    color: var(--product-accent-ink, var(--primary));
}

/* Full's whole reason to exist is the complete overview text — shown in full,
   not trimmed like the card/row summaries. */
.product-full-description {
    max-width: 60ch;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.7;
}

.product-full-description p {
    margin: 0 0 0.85rem;
}

.product-full-description p:last-child {
    margin-bottom: 0;
}

.product-full-features {
    display: grid;
    gap: 0.4rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    max-width: 60ch;
}

.product-full-features li {
    position: relative;
    padding-left: 1.3rem;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
}

.product-full-features li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--product-accent, var(--accent));
}

.product-full-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* ---------- Full: image + key data aside ---------- */

.product-full-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-full-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 5;
    padding: 1.5rem;
    background-color: var(--light-gray);
    background-image:
        linear-gradient(to right, rgba(0, 79, 112, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 79, 112, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
    /* Without this, a flex container's aspect-ratio can be overridden by a
       tall child (portrait photos grow the box past its ratio instead of
       being clipped to it) — matches .product-card-media. This was the
       actual cause of the inconsistent image boxes, not the ratio itself. */
    overflow: hidden;
}

.product-full-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 16px rgba(0, 79, 112, 0.18));
    transition: transform 0.4s ease;
}

.product-full:has([data-product-link]:hover) .product-full-media img {
    transform: scale(1.04);
}

.product-full-media-empty {
    display: block;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--border-color);
}

/* Key data list — same rhythm as the single product page's Identification
   panel: small label, wrapping value, no forced truncation since some specs
   (AC input, connector types…) run long. */
.product-full-specs {
    margin: 0;
    padding: 1rem 1.1rem;
    background: white;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--product-accent, var(--primary));
}

.product-full-specs > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.product-full-specs > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.product-full-specs > div:first-child {
    padding-top: 0;
}

.product-full-specs dt {
    color: var(--gray);
    font-size: 0.76rem;
    line-height: 1.5;
}

.product-full-specs dd {
    margin: 0;
    max-width: 60%;
    color: var(--text);
    font-family: 'Mona Sans Variable', sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.product-list-block.light-bg .product-full-media {
    background-color: white;
}

/* ---------- Grouped by category ---------- */

/* Applied to every group, not just siblings after the first: adjacent-sibling
   margins collapse in normal flow, so this collapses with .product-filters'
   own margin-bottom for the first group instead of stacking — same visual
   gap above every category heading, whether it follows the filter bar or
   another group. */
.product-group {
    margin-top: 3.5rem;
}

/* Category label as a tab, echoing the "Our Markets" tab on the home hero:
   a solid category-coloured chip with a cut corner, a hairline rule running
   out from it, and the "all …" link parked at the end. */
.product-group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1.75rem;
}

/* Optional 1-2 line subtitle from the category term's Description field
   (Products → Categories). When present, the header sits closer to it and
   the description's own margin does the job of reaching the product grid —
   categories with no description keep the original header-to-grid gap. */
.product-group-header:has(+ .product-group-description) {
    margin-bottom: 0.65rem;
}

.product-group-description {
    max-width: 60ch;
    margin: 0 0 1.75rem;
    color: var(--gray);
    font-size: 0.86rem;
    line-height: 1.6;
}

.product-group-header h3 {
    order: 0;
    margin: 0;
    padding: 0.55rem 0.95rem;
    background: var(--product-accent, var(--primary));
    color: var(--product-accent-text, white);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

.product-group-header::after {
    content: "";
    order: 1;
    flex: 1 1 3rem;
    height: 1px;
    background: var(--border-color);
}

.product-group-header a {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.product-group-header a:hover,
.product-group-header a:focus-visible {
    color: var(--product-accent-ink, var(--primary));
}

.product-group-header a .material-symbols-outlined {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.product-group-header a:hover .material-symbols-outlined {
    transform: translateX(4px);
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

@keyframes rotate-text {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Video Popup Overlay */
.video-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    
    &.active {
        opacity: 1;
        visibility: visible;
    }
    
    .video-popup-container {
        position: relative;
        width: min(90vw, 90vh * 16 / 9);
        height: min(90vh, 90vw * 9 / 16);
        max-width: 90vw;
        max-height: 90vh;
        aspect-ratio: 16 / 9;
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }
    
    &.active .video-popup-container {
        transform: scale(1);
    }
    
    .video-popup-iframe {
        width: 100%;
        height: 100%;
    }
    
    iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 2px;
    }
    
    .video-popup-close {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
        
        &:hover {
            border-color: white;
            background: rgba(0, 0, 0, 1);
            transform: rotate(90deg);
        }
        
        svg {
            width: 20px;
            height: 20px;
        }
    }
}

/* ============================
   POSTS GRID BLOCK
   ============================ */

.posts-grid {
    padding: var(--section-py) 0;

    /* Wrapper separates AOS animation from card hover transforms */
    .post-wrapper {
        height: 100%;
    }

    .posts-grid-header {
        text-align: center;
        max-width: 900px;
        margin: 0 auto 3rem;
        
        @media (max-width: 767px) {
            margin-bottom: 2rem;
        }
        
        .row {
            display: block;
            
            @media (max-width: 991px) {
                gap: 1rem;
            }
        }
        
        .col-title {
            margin-bottom: 1rem;
            
            h2 {
                margin-top: 0;
                margin-bottom: 0.5rem;
            }
        }
        
        .col-subtitle {
            p {
                margin: 0;
                opacity: 0.7;
            }
        }
    }
    
    .posts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: 3rem 2.5rem;
        position: relative;

        @media (max-width: 767px) {
            gap: 2.5rem;
        }

        .post {
            display: flex;
            flex-direction: column;
            height: 100%;

            &:hover .card-image img {
                transform: scale(1.04);
            }

            /* Category eyebrow above the image */
            .post-eyebrow {
                font-family: 'Montserrat Variable', sans-serif;
                font-size: 0.72rem;
                font-weight: 600;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--gray);
                margin-bottom: 0.9rem;
            }

            .card-image {
                width: 100%;
                position: relative;
                overflow: hidden;
                aspect-ratio: 3 / 2;
                border-radius: var(--border-radius);
                margin-bottom: 1.15rem;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    transition: transform 0.5s ease;
                }

                a {
                    display: block;
                    height: 100%;
                }
            }

            .card-content {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
            }

            .card-meta {
                display: block;
                color: var(--gray);
                font-size: 0.85rem;
                font-weight: 400;
                margin-bottom: 0.55rem;
            }

            h3 {
                font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
                line-height: 1.3;
                font-weight: 600;
                letter-spacing: -0.01em;
                margin: 0 0 0.85rem;

                a {
                    color: var(--secondary);
                    text-decoration: none;
                    transition: var(--transition);

                    &:hover {
                        color: var(--primary);
                    }
                }
            }

            /* Optional excerpt (block "Show Excerpts" toggle) */
            .card-text {
                margin: 0 0 1.25rem;
                color: var(--gray);
                font-size: 0.925rem;
                line-height: 1.6;
            }

            /* When an excerpt is present, let the read-more sit under it
               rather than being pushed to the card bottom */
            .card-text ~ .post-readmore {
                margin-top: 0;
            }

            /* Push read-more to the card bottom so they line up across a row
               (only when there's no excerpt; with an excerpt it follows the text) */
            .post-readmore {
                margin-top: auto;
                align-self: flex-start;
                display: inline-flex;
                align-items: center;
                gap: 0.45rem;
                font-family: 'Montserrat Variable', sans-serif;
                font-weight: 600;
                font-size: 0.9rem;
                color: var(--secondary);
                text-decoration: none;
                transition: var(--transition);

                svg {
                    width: 0.95rem;
                    height: 0.95rem;
                    transition: transform 0.25s ease;
                }

                &:hover {
                    color: var(--primary);

                    svg {
                        transform: translate(2px, -2px);
                    }
                }
            }
        }
    }
}

/* ---------- Posts Grid: category filter bar ---------- */

/* One bordered control strip spanning the grid width: a fixed label on the
   left, the category pills flowing after it — same "this is a control, not
   loose buttons" treatment as the product listing filter bar. */
.posts-grid-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 0 0 2.75rem;
    padding: 0.7rem 0.9rem;
    background: white;
    border: 1px solid var(--border-color);
}

@media (max-width: 767px) {
    .posts-grid-filters {
        margin-bottom: 2rem;
    }
}

.posts-grid-filters-label {
    flex: 0 0 auto;
    padding-right: 0.9rem;
    border-right: 1px solid var(--border-color);
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .posts-grid-filters-label {
        flex-basis: 100%;
        padding-right: 0;
        padding-bottom: 0.6rem;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }
}

.posts-grid-filters-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.posts-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.posts-filter-pill:hover,
.posts-filter-pill:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.posts-filter-pill.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.posts-grid-empty {
    margin: 1rem 0 0;
    padding: 2rem;
    background: white;
    border: 1px dashed var(--border-color);
    text-align: center;
    color: var(--gray);
    font-size: 0.95rem;
}

/* ============================
   USPS BLOCK
   ============================ */

.usps-block {
    padding: var(--section-py) 0 6rem;
    text-wrap: balance;
    background: white;
    position: relative;

    @media (max-width: 768px) {
        padding-bottom: 5rem;
    }
    
    /* Diagonal stripes at the bottom - only when enabled */
    &.has-border-accent::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background: repeating-linear-gradient(
            -45deg,
            #eef3f5,
            #eef3f5 12px,
            #ffffff 12px,
            #ffffff 24px
        );
        opacity: 0.8;
    }
}

.usps-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    
    @media (max-width: 991px) {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    @media (max-width: 768px) {
        gap: 2.5rem;
    }
}

.usps-content {
    text-align: left;
    
    @media (max-width: 991px) {
        text-align: left;
    }
    
    /* Heading margins come from .block-title / .block-header — a bare `h2`
       rule here out-specifies both and reintroduced the drift. */

    .button {
        margin-top: 1rem;
        display: inline-block;
    }
}

.usps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.usp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    flex-direction: column;
    text-align: left;
    transition: var(--transition);
    border: solid 1px #dce4e8;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* Clickable card styles */
.usp-item.has-link {
    text-decoration: none;
    cursor: pointer;
    
    &:hover {
        border-color: var(--primary);
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        
        .usp-icon {
            background: var(--primary);
            transform: scale(1.05);
        }
        
        .usp-title {
            color: var(--primary);
        }
    }
}

.usp-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--secondary);
    border-radius: 2px;
    display: flex;
    will-change: transform;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    transition: var(--transition);
    
    @media (max-width: 768px) {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0.5rem;
    }
    
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1); /* Make SVGs white */
    }
}

.usp-content {
    flex: 1;
    margin-top: 0.125rem;

        p { text-wrap: balance; }
}

.usp-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    transition: var(--transition);
}

.usp-description {
    font-size: 0.75rem;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}

/* Hover effects for non-linked items */
.usp-item:not(.has-link):hover .usp-icon {
    background: var(--primary);
    transform: scale(1.05);
}

/* Alternative layout for when there are 5 or 6 items */
.usps-grid:has(.usp-item:nth-child(5)),
.usps-grid:has(.usp-item:nth-child(6)) {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
    
    .usp-item {
        gap: 1rem;
    }
    
    .usp-icon {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.5rem;
        background: var(--secondary);
    }
    
    .usp-title {
        font-size: 1rem;
    }
    
    .usp-description {
        font-size: 0.85rem;
    }
}

/* ============================
   SINGLE POST TEMPLATE
   ============================ */

.single-post {
    background: white;
}

/* Post Header */
.post-header {
    padding: var(--section-py) 0 13rem;
    background-color: var(--secondary);
    background-image:
        linear-gradient(rgba(6, 40, 58, 0.62), rgba(6, 40, 58, 0.62)),
        url('images/circuit-4.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0;
    position: relative;

    @media (max-width: 768px) {
        padding-bottom: 11rem;
    }
    
    
    .container {
        position: relative;
        z-index: 1;
    }
}

.post-header-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
    
    @media (max-width: 768px) {
        padding: 0.75rem 0 1.5rem;
    }
}

.post-date {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 1rem;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    
    @media (max-width: 768px) {
        gap: 1rem;
        margin-top: 1.25rem;
    }
}

.post-categories,
.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
        margin: 0;
    }
}

.post-categories a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: var(--primary);
    color: white;
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.5rem 1rem;
    border-radius: 0;
    /* geometric cut corner, matching the eyebrow tag */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    transition: var(--transition);

    /* battery-cells + terminal marker, a callback to the logo */
    &::before {
        content: "";
        flex: 0 0 auto;
        width: 18px;
        height: 0.85em;
        background-image:
            repeating-linear-gradient(to right, var(--accent) 0 2px, transparent 2px 4px),
            linear-gradient(var(--accent), var(--accent));
        background-repeat: no-repeat, no-repeat;
        background-size: 14px 100%, 2px 55%;
        background-position: left center, right center;
    }

    &:hover {
        background-color: var(--primary-hover);
        color: white;
    }
}

.post-tags a {
    display: inline-block;
    background-color: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.35rem 0.75rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    
    &:hover {
        background-color: var(--primary);
        color: white;
    }
}

.post-title {
    font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    font-weight: 650;
    color: white;
    margin: 0 0 1rem 0;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.post-excerpt {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
    
    @media (max-width: 768px) {
        font-size: 1.1rem;
    }
}

/* No featured image: the header's deep bottom padding exists only to sit behind
   the image that pulls up into it, and the content's zero top padding assumes
   that image provides the gap. Without one, close both up. */
.single-post.no-featured-image .post-header {
    padding-bottom: var(--section-py);
}

.single-post.no-featured-image .post-content {
    padding-top: var(--section-py);
}

/* Featured Image */
.post-featured-image {
    position: relative;
    max-width: 900px;
    margin: -10rem auto 3rem;
    z-index: 1;
    
    @media (max-width: 768px) {
        margin: -8rem auto 2rem;
    }
    
    figure {
        margin: 0;
        overflow: hidden;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
    }
    
    img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }
}

/* Featured image "contain" fit (e.g. accreditation logos) — whole image on a
   white, padded background instead of filling & cropping. Shared by the news
   cards and the single post; frame ratio stays the same as cover. */
.posts-grid .posts .post .card-image.fit-contain {
    background: #fff;
}
.posts-grid .posts .post .card-image.fit-contain img {
    object-fit: contain;
    padding: 1.25rem;
}
.posts-grid .posts .post:hover .card-image.fit-contain img {
    transform: none; /* no zoom on contained logos */
}

.post-featured-image.fit-contain figure {
    background: #fff;
}
.post-featured-image.fit-contain img {
    object-fit: contain;
    padding: 2rem;
}

/* Placeholder when a post has no featured image — keeps the card frame (and so
   the card height) identical to one with a picture: a white panel with the
   Lincad mark ghosted in. */
.posts-grid .posts .post .card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.posts-grid .posts .post .card-image--placeholder img {
    width: 30%;
    min-width: 3.25rem;
    max-width: 4.75rem;
    height: auto;
    object-fit: contain;
    opacity: 0.2;
    filter: grayscale(1);
}
.posts-grid .posts .post:hover .card-image--placeholder img {
    transform: none;
}

/* Post Content */
.post-content {
    padding: 0 0 4rem;
    background: white;
    position: relative;
    
    @media (max-width: 768px) {
        padding: 0 0 3rem;
    }
}

.post-body {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text);

    @media (max-width: 768px) {
        font-size: 1rem;
    }

    /* Override the global `p { line-height: 1.6 }` which sets it directly on the
       paragraph and beats the value inherited from .post-body */
    p, li {
        line-height: inherit;
    }
    
    h2, h3, h4, h5, h6 {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        color: var(--secondary);
        font-weight: 700;
        line-height: 1.3;
        
        &:first-child {
            margin-top: 0;
        }
    }
    
    h2 {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;

        @media (max-width: 768px) {
            font-size: 1.5rem;
        }
    }
    
    h3 {
        font-size: 1.4rem;
        
        @media (max-width: 768px) {
            font-size: 1.25rem;
        }
    }
    
    h4 {
        font-size: 1.25rem;
        
        @media (max-width: 768px) {
            font-size: 1.1rem;
        }
    }
    
    h5 {
        font-size: 1.1rem;
    }
    
    h6 {
        font-size: 1rem;
        font-weight: 600;
    }
    
    blockquote {
        border-left: 4px solid var(--primary);
        margin: 2rem 0;
        padding: 1.5rem 2rem;
        background: var(--light-gray);
        font-style: italic;
        font-size: 1.1rem;
        
        @media (max-width: 768px) {
            font-size: 1rem;
            padding: 1.25rem 1.5rem;
        }
        
        p:last-child {
            margin-bottom: 0;
        }
    }
    
    img {
        max-width: 100%;
        height: auto;
        border-radius: 2px;
        box-shadow: var(--shadow);
        margin: 2rem 0;
    }
    
    .wp-block-image {
        margin: 2rem 0;
        
        figcaption {
            font-size: 0.9rem;
            color: var(--gray);
            text-align: center;
            margin-top: 0.5rem;
            font-style: italic;
        }
    }
}

/* Page Links for paginated posts */
.page-links {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: var(--border-radius);
    
    .page-links-title {
        font-weight: 600;
        color: var(--secondary);
        margin-right: 1rem;
    }
    
    a {
        display: inline-block;
        padding: 0.5rem 0.8rem;
        margin: 0 0.25rem;
        background: white;
        border-radius: var(--border-radius);
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition);
        
        &:hover {
            background: var(--primary);
            color: white;
        }
    }
}

/* Post Share Button */
.post-share-button {
    margin: 2rem auto 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Post Navigation */
.post-navigation {
    background: var(--light-gray);
    padding: 3rem 0;
    
    @media (max-width: 768px) {
        padding: 2rem 0;
    }
}

.post-nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.nav-previous,
.nav-next {
    a {
        display: block;
        padding: 2rem;
        background: white;
        border-radius: var(--border-radius);
        text-decoration: none;
        transition: var(--transition);
        box-shadow: var(--shadow);
        height: 100%;
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
    }
}

.nav-previous {
    text-align: left;
}

.nav-next {
    text-align: right;
    
    @media (max-width: 768px) {
        text-align: left;
    }
}

.nav-direction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.75rem;
    
    .material-symbols-outlined {
        font-size: 1.2rem;
    }
}

.nav-next .nav-direction {
    justify-content: flex-end;
    
    @media (max-width: 768px) {
        justify-content: flex-start;
    }
}

.nav-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.3;
}

/* Comments Area */
.comments-area {
    background: white;
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
    
    @media (max-width: 768px) {
        padding: 3rem 0;
    }
}

.comments-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 2rem 0;
    
    span {
        color: var(--primary);
    }
}

/* Comment List */
.comment-list {
    list-style: none;
    margin: 0 0 3rem 0;
    padding: 0;
}

.comment-list .comment {
    margin-bottom: 2rem;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 2px;
    
    .children {
        margin-top: 2rem;
        margin-left: 2rem;
        list-style: none;
        padding: 0;
        
        @media (max-width: 768px) {
            margin-left: 1rem;
        }
        
        .comment {
            background: white;
            border: 2px solid var(--border-color);
        }
    }
}

.comment-body {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    
    @media (max-width: 768px) {
        gap: 1rem;
    }
}

.comment-author {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex: 1;
    
    img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        
        @media (max-width: 768px) {
            width: 50px;
            height: 50px;
        }
    }
}

.comment-metadata {
    .fn {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--secondary);
        font-style: normal;
    }
    
    a {
        color: var(--gray);
        font-size: 0.85rem;
        text-decoration: none;
        
        &:hover {
            color: var(--primary);
        }
    }
}

.comment-content {
    margin-top: 1rem;
    line-height: 1.6;
    color: var(--text);
    
    p:last-child {
        margin-bottom: 0;
    }
}

.comment-awaiting-moderation {
    color: var(--primary);
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.reply {
    margin-top: 1rem;
    
    a {
        color: var(--primary);
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        
        &:hover {
            color: var(--primary-hover);
        }
    }
}

/* Comment Form */
.comment-respond {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 2px;
    margin-top: 3rem;
}

.comment-reply-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 1.5rem 0;
}

.comment-form {
    display: grid;
    gap: 1.5rem;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
    label {
        display: block;
        font-weight: 600;
        color: var(--secondary);
        margin-bottom: 0.5rem;
        
        .required {
            color: var(--primary);
        }
    }
    
    input {
        width: 100%;
        padding: 0.8rem;
        border: 2px solid var(--border-color);
        border-radius: 2px;
        font-size: 1rem;
        transition: var(--transition);
        
        &:focus {
            outline: none;
            border-color: var(--primary);
        }
    }
}

.comment-form-comment {
    label {
        display: block;
        font-weight: 600;
        color: var(--secondary);
        margin-bottom: 0.5rem;
        
        .required {
            color: var(--primary);
        }
    }
    
    textarea {
        width: 100%;
        padding: 0.8rem;
        border: 2px solid var(--border-color);
        border-radius: 2px;
        font-size: 1rem;
        font-family: inherit;
        resize: vertical;
        min-height: 120px;
        transition: var(--transition);
        
        &:focus {
            outline: none;
            border-color: var(--primary);
        }
    }
}

.form-submit {
    .button {
        background: var(--primary);
        color: white;
        padding: 0.8rem 2rem;
        border: none;
        border-radius: 2px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        
        &:hover {
            background: var(--primary-hover);
        }
    }
}

/* Comments Navigation */
.comment-navigation {
    margin: 2rem 0;
    
    .nav-links {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        
        a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 2px;
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            
            &:hover {
                background: var(--primary);
                color: white;
                border-color: var(--primary);
            }
            
            .material-symbols-outlined {
                font-size: 1.2rem;
            }
        }
    }
}

.no-comments {
    color: var(--gray);
    font-style: italic;
    text-align: center;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 2px;
}

/* ============================
   END SINGLE POST TEMPLATE
   ============================ */

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

section.faq-block {
    padding: var(--section-py) 0;
    
    &.light-bg {
        background-color: var(--light-gray);
    }
    
    .faq-header {
        text-align: left;
        margin-bottom: var(--head-gap-content);

        h2 {
            margin-bottom: 0;
        }

        /* Hide header if no title or subtitle is present */
        &:empty {
            display: none;
        }
    }
    
    .faq-container {
        width: 100%;
        max-width: none;
    }
    
    .faq-item {
        border: 1px solid var(--border-color);
        margin-bottom: 0.5rem;
        background: white;
        overflow: hidden;
        transition: var(--transition);
        border-radius: var(--border-radius);
        
        &:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        &[open] {
            .faq-icon svg {
                transform: rotate(180deg);
            }
        }
        
        &:last-child {
            margin-bottom: 0;
        }
    }
    
    .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem 0.9rem;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--secondary);
        cursor: pointer;
        list-style: none;
        transition: var(--transition);
        
        &::-webkit-details-marker {
            display: none;
        }
        
        &::marker {
            display: none;
        }
        
        &:hover {
            background-color: rgba(0,0,0,0.02);
        }
        
        span:first-child {
            flex: 1;
            text-align: left;
            line-height: 1.4;
        }
    }
    
    .faq-icon {
        flex-shrink: 0;
        margin-left: 0.75rem;
        color: var(--primary);
        
        svg {
            transition: transform 0.3s ease;
            width: 20px;
            height: 20px;
        }
    }
    
    .faq-answer {
        padding: 0.5rem 1.25rem 1rem;
        color: var(--text);
        line-height: 1.5;
        font-size: 0.85rem;
        border-top: 1px solid var(--border-color);
        
        p:first-child {
            margin-top: 0.75rem;
        }
        
        p:last-child {
            margin-bottom: 0;
        }
        
        ul, ol {
            margin: 0.75rem 0;
            padding-left: 1.25rem;
            
            li {
                margin-bottom: 0.25rem;
            }
        }
        
        a {
            color: var(--primary);
            
            &:hover {
                color: var(--primary-hover);
            }
        }
    }
    
    @media (max-width: 767px) {
        padding: 4rem 0;
        
        .faq-question {
            padding: 0.875rem 1rem;
            font-size: 0.9rem;
        }
        
        .faq-answer {
            padding: 0 1rem 0.875rem;
            font-size: 0.85rem;
            
            p:first-child {
                margin-top: 0.5rem;
            }
        }
        
        .faq-icon {
            margin-left: 0.5rem;
            
            svg {
                width: 18px;
                height: 18px;
            }
        }
    }
}

/* ============================
   TWO COLUMN TEXT BLOCK
   ============================ */

section.two-column-text {
    padding: var(--section-py) 0;
    
    &.light-bg {
        background: var(--light-gray);
    }
    
    .two-column-text-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        
        @media (max-width: 767px) {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }
    
    .two-column-text-column {
        h1, h2, h3, h4, h5, h6 {
            &:first-child {
                margin-top: 0;
            }
        }
        
        p:first-child {
            margin-top: 0;
        }
        
        p:last-child {
            margin-bottom: 0;
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
        
        .button,
        a.button {
            margin-top: 1rem;
        }

        /* A Contact Form 7 form dropped into a column (via the WYSIWYG) gets a
           tinted panel so it reads as its own thing rather than floating
           unstyled in the prose. Field styling comes from the global .wpcf7
           rules in style.css; this just supplies the container. */
        .wpcf7 {
            margin-top: 1.75rem;
            padding: clamp(1.5rem, 3vw, 2rem);
            background: var(--light-gray);
            border: 1px solid var(--border-color);
            border-top: 3px solid var(--accent);
        }

        .wpcf7:first-child {
            margin-top: 0;
        }

        /* The column is already narrow — never split fields two-up in here. */
        .wpcf7 .form-grid {
            grid-template-columns: 1fr;
        }
    }

    /* On a light-bg section the panel flips to white so it still stands out. */
    &.light-bg .two-column-text-column .wpcf7 {
        background: white;
    }
}

/* ============================
   BLOCKQUOTE / TESTIMONIAL
   ============================ */

section.blockquote-block {
    --bq-cut: clamp(45px, 7vw, 100px);
    padding: var(--section-py) 0;
    position: relative;
    overflow: hidden;
    /* angled bottom-right corner, matching the hero markets band */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bq-cut)), calc(100% - var(--bq-cut)) 100%, 0 100%);

    .bq-header {
        margin-bottom: var(--head-gap-content);
    }

    .bq-heading {
        margin-bottom: 0;
        color: var(--secondary);
    }

    .bq-stage {
        position: relative;
    }

    /* ============================
       CARD
       ============================ */
    .bq-card {
        position: relative;
        margin: 0;
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 2.75rem 3rem;

        @media (max-width: 767px) {
            padding: 2rem 1.5rem;
        }
    }

    /* Geometric quote mark (boxed logo-style glyph) */
    .bq-mark {
        display: block;
        width: 3.4rem;
        height: auto;
        margin-bottom: 1rem;
        fill: var(--primary);

        @media (max-width: 767px) {
            width: 2.75rem;
            margin-bottom: 0.85rem;
        }
    }

    /* ---- Quote text ---- */
    .bq-quote {
        margin: 0 0 1.75rem;
        font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
        line-height: 1.5;
        font-weight: 500;
        color: var(--text);
        text-wrap: pretty;
    }

    .bq-quote p {
        margin: 0 0 1rem;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
    }

    .bq-quote p:last-child { margin-bottom: 0; }

    /* ---- Footer: author + optional link ---- */
    .bq-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-color);

        @media (max-width: 600px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 1.25rem;
        }
    }

    .bq-author {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        min-width: 0;
    }

    .bq-avatar {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--light-gray);
        border: 1px solid var(--border-color);
    }

    .bq-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .bq-avatar.bq-avatar--contain {
        background: #ffffff;
    }

    .bq-avatar.bq-avatar--contain img {
        object-fit: contain;
        padding: 3px;
    }

    .bq-author-meta {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .bq-author-name {
        font-family: 'Montserrat Variable', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1.25;
        color: var(--secondary);
    }

    .bq-author-title {
        font-size: 0.82rem;
        line-height: 1.3;
        color: var(--gray);
    }

    .bq-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
        font-family: 'Montserrat Variable', sans-serif;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--primary);
        text-decoration: none;
        transition: var(--transition);
    }

    .bq-link .material-symbols-outlined {
        font-size: 1.1rem;
        transition: transform 0.2s ease;
    }

    .bq-link:hover {
        color: var(--secondary);
    }

    .bq-link:hover .material-symbols-outlined {
        transform: translateX(3px);
    }

    /* ============================
       CAROUSEL CONTROLS
       ============================ */
    .bq-controls {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .bq-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        padding: 0;
        border: none;
        cursor: pointer;
        background: var(--primary);
        color: #fff;
        border-radius: var(--border-radius);
        /* accent ledge + 3D press, matching site buttons */
        box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 65%, white);
        transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.3s ease;
    }

    .bq-nav .material-symbols-outlined { font-size: 1.35rem; }

    .bq-nav:hover,
    .bq-nav:focus-visible,
    .bq-nav:active {
        background: var(--primary-hover);
        transform: translateY(3px);
        box-shadow: 0 0 0 var(--accent);
    }

    .bq-nav.swiper-button-disabled {
        opacity: 0.4;
        pointer-events: none;
    }

    /* Pagination as segmented "battery cell" bars (logo motif) */
    .bq-pagination {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .bq-pagination .swiper-pagination-bullet {
        width: 22px;
        height: 4px;
        border-radius: 0;
        background: var(--border-color);
        opacity: 1;
        margin: 0 !important;
        cursor: pointer;
        transition: background-color 0.3s ease, width 0.3s ease;
    }

    .bq-pagination .swiper-pagination-bullet-active {
        width: 34px;
        background: var(--primary);
    }

    /* ============================
       ALIGNMENT
       ============================ */
    &.align-center {
        text-align: center;
    }

    &.align-center .bq-header .tag {
        margin-inline: auto;
    }

    &.align-center .bq-card {
        text-align: left;
    }

    &.align-center .bq-controls {
        justify-content: center;
    }

    /* ============================
       BACKGROUND VARIANTS
       ============================ */
    &.bg-light { background: var(--light-gray); }

    &.bg-white {
        background: #ffffff;
    }

    &.bg-white .bq-card {
        background: var(--light-gray);
        border-color: transparent;
    }

    &.bg-white .bq-footer {
        border-top-color: var(--border-color);
    }

    /* Dark treatments share a translucent-panel card, echoing the hero panel */
    &.bg-primary,
    &.bg-secondary,
    &.bg-circuit {
        color: #fff;
    }

    &.bg-primary .bq-heading,
    &.bg-secondary .bq-heading,
    &.bg-circuit .bq-heading { color: #fff; }

    &.bg-primary .bq-card,
    &.bg-secondary .bq-card,
    &.bg-circuit .bq-card {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(2px);
    }

    &.bg-primary .bq-quote,
    &.bg-secondary .bq-quote,
    &.bg-circuit .bq-quote { color: #fff; }

    &.bg-primary .bq-mark,
    &.bg-secondary .bq-mark,
    &.bg-circuit .bq-mark { fill: var(--accent); }

    &.bg-primary .bq-footer,
    &.bg-secondary .bq-footer,
    &.bg-circuit .bq-footer { border-top-color: rgba(255, 255, 255, 0.18); }

    &.bg-primary .bq-author-name,
    &.bg-secondary .bq-author-name,
    &.bg-circuit .bq-author-name { color: #fff; }

    &.bg-primary .bq-author-title,
    &.bg-secondary .bq-author-title,
    &.bg-circuit .bq-author-title { color: rgba(255, 255, 255, 0.72); }

    &.bg-primary .bq-avatar,
    &.bg-secondary .bq-avatar,
    &.bg-circuit .bq-avatar {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.1);
    }

    &.bg-primary .bq-link,
    &.bg-secondary .bq-link,
    &.bg-circuit .bq-link { color: var(--accent); }

    &.bg-primary .bq-link:hover,
    &.bg-secondary .bq-link:hover,
    &.bg-circuit .bq-link:hover { color: #fff; }

    &.bg-primary .bq-nav,
    &.bg-secondary .bq-nav,
    &.bg-circuit .bq-nav {
        background: #fff;
        color: var(--primary);
        box-shadow: 0 3px 0 var(--accent);
    }

    &.bg-primary .bq-nav:hover,
    &.bg-primary .bq-nav:focus-visible,
    &.bg-primary .bq-nav:active,
    &.bg-secondary .bq-nav:hover,
    &.bg-secondary .bq-nav:focus-visible,
    &.bg-secondary .bq-nav:active,
    &.bg-circuit .bq-nav:hover,
    &.bg-circuit .bq-nav:focus-visible,
    &.bg-circuit .bq-nav:active {
        background: #fff;
        box-shadow: 0 0 0 var(--accent);
    }

    &.bg-primary .bq-pagination .swiper-pagination-bullet,
    &.bg-secondary .bq-pagination .swiper-pagination-bullet,
    &.bg-circuit .bq-pagination .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.3);
    }

    &.bg-primary .bq-pagination .swiper-pagination-bullet-active,
    &.bg-secondary .bq-pagination .swiper-pagination-bullet-active,
    &.bg-circuit .bq-pagination .swiper-pagination-bullet-active {
        background: var(--accent);
    }

    /* Primary matches the hero markets band: blue base + circuit board */
    &.bg-primary {
        background-color: var(--primary);
        background-image:
            linear-gradient(rgba(0, 79, 112, 0.62), rgba(0, 79, 112, 0.62)),
            url('images/circuit-1.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    &.bg-secondary { background: var(--secondary); }

    &.bg-circuit {
        background-color: var(--secondary);
        background-image:
            linear-gradient(rgba(6, 40, 58, 0.82), rgba(6, 40, 58, 0.82)),
            url('images/circuit-1.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    @media (prefers-reduced-motion: reduce) {
        .bq-link .material-symbols-outlined,
        .bq-nav { transition: none; }
    }
}

/* ============================
   IMAGE BLOCK
   ============================ */

.image-block {
    padding: 3rem 0;
    
    @media (max-width: 767px) {
        padding: 2rem 0;
    }
    
    &.full-width {
        padding: 0;
        
        .image-block-wrapper {
            max-width: 100%;
        }
    }
    
    .image-block-wrapper {
        position: relative;
        overflow: hidden;
    }
    
    .image-block-figure {
        margin: 0;
        position: relative;
        display: block;
        overflow: hidden;
        
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }
    
    &.has-aspect-ratio {
        .image-block-figure {
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }
    
    &.has-parallax {
        .image-block-figure {
            overflow: hidden;
            
            img {
                min-height: 130%;
                min-width: 100%;
                object-fit: cover;
                position: relative;
                top: -15%;
                transition: transform 0.1s linear;
                will-change: transform;
            }
        }
        
        &.has-aspect-ratio {
            .image-block-figure {
                img {
                    position: absolute;
                    width: 100%;
                    height: 130%;
                    top: -15%;
                    left: 0;
                }
            }
        }
    }
    
    &.has-caption {
        .image-block-figure {
            position: relative;
        }
    }
    
    .image-caption-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    .image-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 0;
        color: white;
        font-size: 0.9rem;
        line-height: 1.5;
        z-index: 2;
        margin: 0;
        
        @media (max-width: 767px) {
            padding: 1.5rem 0;
            font-size: 0.85rem;
        }
        
        p {
            margin: 0;
            color: white;
            
            &:last-child {
                margin-bottom: 0;
            }
        }
        
        a {
            color: white;
            text-decoration: underline;
            
            &:hover {
                color: var(--primary);
            }
        }
    }
}

/* Stats Block */
.stats-block {
    padding: var(--section-py) 0;
    /* Shared with the coloured themes below: brand colour base + circuit-board
       texture + a darkening wash, the same decorated dark panel used on the
       single-post header and the CTA band. */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
        
        @media (max-width: 767px) {
            gap: 2.5rem;
        }
    }
    
    /* Squared, left-read cards with the 3px accent top rule — the same card
       language as the team, accreditation and product-category tiles. */
    .stat-item {
        position: relative;
        text-align: left;
        padding: 2rem 1.75rem;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.14);
        transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;

        @media (max-width: 767px) {
            padding: 1.6rem 1.4rem;
        }
    }

    .stat-item::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: var(--accent);
    }

    .stat-item:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-3px);
    }

    .stat-number-wrapper {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0.15rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        font-family: 'Montserrat Variable', sans-serif;
        font-weight: 700;
        font-size: 3.25rem;
        letter-spacing: -0.02em;
        line-height: 1;
        color: var(--accent);

        @media (max-width: 991px) {
            font-size: 2.9rem;
        }

        @media (max-width: 767px) {
            font-size: 2.5rem;
        }
    }

    .stat-number {
        color: currentColor;
    }

    .stat-prefix,
    .stat-suffix {
        font-size: 1.75rem;
        opacity: 0.7;

        @media (max-width: 991px) {
            font-size: 1.55rem;
        }

        @media (max-width: 767px) {
            font-size: 1.4rem;
        }
    }

    .stat-subtitle {
        font-family: 'Montserrat Variable', sans-serif;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin: 0 0 0.85rem 0;
        color: #fff;

        @media (max-width: 767px) {
            font-size: 0.7rem;
        }
    }
    
    .stat-description {
        font-size: 0.95rem;
        line-height: 1.6;
        opacity: 0.85;
        
        p {
            margin: 0 0 0.75rem 0;
            
            &:last-child {
                margin-bottom: 0;
            }
        }
        
        @media (max-width: 767px) {
            font-size: 0.9rem;
        }
    }
    
    /* Theme variations */
    &.theme-primary {
        background-color: var(--primary);
        background-image:
            linear-gradient(rgba(0, 79, 112, 0.7), rgba(0, 79, 112, 0.7)),
            url('images/circuit-3.svg');
        color: white;
        
        .stat-item {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            
            &:hover {
                background: rgba(255, 255, 255, 0.15);
                border-color: rgba(255, 255, 255, 0.3);
            }
        }
    }
    
    &.theme-secondary {
        background-color: var(--secondary);
        background-image:
            linear-gradient(rgba(6, 40, 58, 0.72), rgba(6, 40, 58, 0.72)),
            url('images/circuit-4.svg');
        color: white;
        
        .stat-item {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            
            &:hover {
                background: rgba(255, 255, 255, 0.15);
                border-color: rgba(255, 255, 255, 0.3);
            }
        }
    }
    
    &.theme-sustainability {
        background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
        color: white;
        position: relative;
        overflow: hidden;
        
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }
        
        .container {
            position: relative;
            z-index: 1;
        }
        
        .stat-item {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            
            &:hover {
                background: rgba(255, 255, 255, 0.18);
                border-color: rgba(255, 255, 255, 0.35);
            }
        }
        
        .stat-number-wrapper {
            color: #d1fae5;
        }
    }
}

/* ============================
   VIDEO EMBED BLOCK
   ============================ */

section.video-embed-block {
    padding: var(--section-py) 0;
    background: white;
    position: relative;
    
    &.light-bg {
        background-color: var(--light-gray);
    }
    
    .container {
        position: relative;
        z-index: 2;
    }
    
    .video-primary-section {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 33.333%;
        background: var(--primary);
        z-index: 0;
        min-height: 320px;
        
        @media (max-width: 767px) {
            min-height: 230px;
        }
    }
    
    .custom-shape-divider-bottom-1763930673 {
        position: absolute;
        top: -120px;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
        
        svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 120px;
            
            @media (max-width: 767px) {
                height: 80px;
            }
        }
        
        .shape-fill {
            fill: var(--primary);
        }
        
        @media (max-width: 767px) {
            top: -80px;
        }
    }
    
    .video-embed-wrapper {
        max-width: 100%;
        position: relative;
    }
    
    .video-embed-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 2px;
        overflow: hidden;
        background: #000;
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;
        
        &:hover {
            box-shadow: 
                0 15px 50px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(0, 79, 112, 0.2);
            transform: translateY(-2px);
        }
        
        &.video-loaded {
            cursor: default;
            
            .video-cover {
                display: none;
            }
        }
        
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    }
    
    .video-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        z-index: 1;
        
        .video-thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.85;
            transition: opacity 0.3s ease;
        }
        
        .video-play-button {
            position: relative;
            z-index: 2;
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            
            svg {
                width: 90px;
                height: 90px;
                transition: all 0.3s ease;
                filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
            }
            
            .play-bg {
                fill: var(--primary);
                stroke: rgba(255, 255, 255, 0.9);
                stroke-width: 2;
                transition: all 0.3s ease;
            }
            
            .play-icon {
                fill: #fff;
                transition: transform 0.3s ease;
                transform-origin: center;
            }
            
            &:hover svg {
                transform: scale(1.1);
            }
            
            &:hover .play-bg {
                fill: var(--primary-hover);
                stroke: #fff;
            }
            
            &:hover .play-icon {
                transform: scale(1.1);
            }
            
            &:active svg {
                transform: scale(0.95);
            }
        }
        
        .video-privacy-notice {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(4px);
            padding: 8px 16px;
            border-radius: 2px;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.9);
            z-index: 2;
            white-space: nowrap;
            
            a {
                color: #fff;
                text-decoration: underline;
                
                &:hover {
                    color: var(--primary);
                }
            }
        }
    }
    
    .video-embed-container:hover .video-cover {
        .video-thumbnail {
            opacity: 1;
        }
    }
    
    .video-caption {
        margin-top: 1rem;
        text-align: center;
        color: var(--gray);
        font-size: 0.9rem;
        font-style: italic;
    }
    
    /* Mobile adjustments */
    @media (max-width: 767px) {
        padding: 3rem 0;
        
        .video-embed-container {
            border-radius: 2px;
            
            &:hover {
                transform: translateY(-1px);
            }
        }
        
        .video-cover {
            .video-play-button svg {
                width: 70px;
                height: 70px;
            }
            
            .video-privacy-notice {
                font-size: 0.7rem;
                padding: 6px 12px;
                bottom: 8px;
                max-width: 90%;
                white-space: normal;
                text-align: center;
            }
        }
        
        .video-caption {
            font-size: 0.85rem;
        }
    }
}

/* ============================
   CONTACT BOX SHORTCODE
   ============================ */

.contact-box {
    background: var(--primary);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    margin: 2rem 0;
    color: white;
    
    @media (max-width: 768px) {
        padding: 2rem 1.5rem;
    }
}

.contact-box-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin: 0 0 2rem 0 !important;
    
    @media (max-width: 768px) {
        font-size: 1.5rem;
        margin-bottom: 1.5rem !important;
    }
}

.contact-box-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-box-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: white !important;
    text-decoration: none;
    
    &:hover,
    &:focus,
    &:active,
    &:visited {
        color: white !important;
        text-decoration: none !important;
    }
}

.contact-box-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: calc(var(--border-radius) * 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    
    .material-symbols-outlined {
        font-size: 28px;
        color: var(--primary);
    }
}

.contact-box-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.contact-box-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.contact-box-value {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    text-wrap: balance;
}

/* ============================
   IMAGE MARQUEE BLOCK
   ============================ */

.image-marquee {
    padding: var(--section-py) 0;
    overflow: hidden;

    &.bg-white {
        background: white;
    }

    &.bg-light {
        background: var(--light-gray);
    }

    &.bg-dark {
        background: var(--secondary);
        color: white;

        .image-marquee-header h2 {
            color: white;
        }

        .image-marquee-intro {
            color: rgba(255, 255, 255, 0.8);
        }
    }
}

.image-marquee-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--head-gap-content);

    h2 {
        margin-bottom: var(--head-gap-intro);
        color: var(--secondary);
    }

    .image-marquee-intro {
        margin: 0 auto;
        max-width: 56ch;
        color: var(--gray);
        line-height: 1.6;
    }
}

.image-marquee-rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    @media (max-width: 767px) {
        gap: 0.9rem;
    }
}

.image-marquee-row {
    overflow: hidden;
    width: 100%;
}

.image-marquee-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    will-change: transform;
    animation: image-marquee-scroll 100s linear infinite;

    @media (max-width: 767px) {
        gap: 0.75rem;
    }
}

.image-marquee-track-duplicate {
    display: contents;
}

.image-marquee-row--rtl .image-marquee-track {
    animation-direction: reverse;
}

.image-marquee-item {
    flex: 0 0 auto;
    width: 15rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--light-gray);

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 767px) {
        width: 11rem;
    }
}

/* Card style variants */
.image-marquee.card-rounded .image-marquee-item {
    border-radius: var(--border-radius);
    box-shadow: 0 6px 18px rgba(6, 40, 58, 0.08);
}

.image-marquee.card-flat .image-marquee-item {
    border-radius: 0;
}

.image-marquee.card-polaroid .image-marquee-item {
    padding: 0.55rem 0.55rem 1.5rem;
    background: white;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(6, 40, 58, 0.12);

    img {
        border-radius: 2px;
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

/* Speed variants (slower throughout) */
.image-marquee.speed-slow  .image-marquee-track { animation-duration: 160s; }
.image-marquee.speed-medium .image-marquee-track { animation-duration: 110s; }
.image-marquee.speed-fast  .image-marquee-track { animation-duration: 70s; }

@keyframes image-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .image-marquee-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .image-marquee-track {
        animation: none;
    }
}

/* ============================
   CLIENT LOGOS
   ============================ */

.client-logos {
    background: #fff;
    padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    padding-bottom: clamp(1.4rem, 1.1rem + 1.1vw, 2.25rem);
    overflow: hidden;
}

/* Scoped to out-specify the global p:last-child margin reset */
.client-logos .client-logos-title {
    text-align: center;
    margin: 0 0 0.75rem;
    font-family: 'Montserrat Variable', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray);

    @media (max-width: 767px) {
        margin-bottom: 0.6rem;
    }
}

.client-logos-row {
    width: 100%;
    overflow: hidden;
    /* fade the logos in/out at both edges */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.client-logos-track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    width: max-content;
    padding-left: clamp(2.5rem, 5vw, 5rem); /* keeps spacing even across the loop seam */
    will-change: transform;
    animation: client-logos-scroll 60s linear infinite;
}

.client-logos-track-duplicate {
    display: contents;
}

.client-logos-row:hover .client-logos-track {
    animation-play-state: paused;
}

.client-logos-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    img {
        display: block;
        width: auto;
        height: 6rem;
        max-width: 13rem;
        object-fit: contain;

        @media (max-width: 767px) {
            height: 4.5rem;
            max-width: 10rem;
        }
    }
}

a.client-logos-item {
    transition: transform 0.25s ease;

    &:hover {
        transform: translateY(-3px);
    }
}

/* Grayscale variant — logos unify in grayscale, return to colour on hover */
.client-logos.is-grayscale .client-logos-item img {
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-logos.is-grayscale .client-logos-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Scroll speed */
.client-logos.speed-slow   .client-logos-track { animation-duration: 90s; }
.client-logos.speed-medium .client-logos-track { animation-duration: 60s; }
.client-logos.speed-fast   .client-logos-track { animation-duration: 38s; }

@keyframes client-logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .client-logos-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .client-logos-track {
        animation: none;
    }
}

/* ============================
   .check-list - reusable checklist for WYSIWYG content
   Drop class="check-list" on any <ul>. Use <strong> for the
   item title; remaining text becomes the description.
   ============================ */

.check-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: 1.1rem;
}

.check-list li {
    position: relative;
    padding-left: 2.5rem;
    margin: 0;
    line-height: 1.55;
    color: var(--gray);
}

.check-list li::before {
    content: "check_circle";
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 1.6rem;
    color: var(--primary);
    display: inline-block;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    line-height: 1;
}

.check-list li strong {
    display: block;
    color: var(--secondary);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

/* Two-column variant for wider containers */
@media (min-width: 768px) {
    .check-list.two-col {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 2rem;
    }
}

/* ============================
   CATEGORY-COLOURED EYEBROWS

   Any eyebrow inside something carrying --product-accent takes that colour:
   the category chip on a card, every eyebrow on a single product page, and
   every eyebrow in a listing that's showing one category. It's the strongest
   signal these pages have that you're in Batteries rather than Chargers.
   ============================ */

.tag.tag-category,
.single-product .tag,
.product-list-block.is-single-category .tag {
    background-color: var(--product-accent, var(--primary));
    color: var(--product-accent-text, white);
}

/* The "battery cell" marks follow the text colour so they stay legible
   whichever way the chip is filled — the lime category needs dark marks. */
.tag.tag-category::before,
.single-product .tag::before,
.product-list-block.is-single-category .tag::before {
    background-image:
        repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 4px),
        linear-gradient(currentColor, currentColor);
    opacity: 0.85;
}

/* ============================
   PRODUCT CATEGORIES BLOCK
   ============================ */

.product-categories {
    padding: var(--section-py) 0;
    background: white;
}

/* Needs the doubled class: the global .light-bg is a single class in style.css,
   which loads first, so .product-categories would out-order it. */
.product-categories.light-bg {
    background: var(--light-gray);
}

.product-categories-header {
    max-width: 42rem;
}

/* The intro allows inline links — the section-head paragraph is grey body copy,
   so without this they'd be indistinguishable from the text around them. */
.product-categories-header > p a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.product-categories-header > p a:hover,
.product-categories-header > p a:focus {
    color: var(--primary-hover);
}

/* White tiles on the light band, joined by the grid gap showing through as
   hairlines — the set reads as one panel rather than four floating cards.
   Each category's own colour carries the top rule and the icon, which is
   where the colour earns its place; on the old dark band those colours had
   to fight the background. */
.product-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

/* Halve straight from four to two. Left to auto-fit this passes through a
   three-across step, which strands the fourth category alone on its own row.
   1080px is where the container stops fitting four 15rem tiles. */
@media (max-width: 1080px) {
    .product-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .product-categories-grid {
        grid-template-columns: 1fr;
    }
}

.product-category-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem 1.5rem 1.35rem;
    background: white;
    color: var(--text);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.product-category-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--product-accent, var(--primary));
}

a.product-category-tile:hover,
a.product-category-tile:focus {
    background: var(--light-gray);
    color: var(--text);
    text-decoration: none;
}

/* "You are here". A wash of the category's own colour plus a thicker top rule
   — enough to find at a glance without competing with the tiles that are
   actually somewhere to go. */
.product-category-tile.is-current {
    background: color-mix(in srgb, var(--product-accent, var(--primary)) 9%, white);
}

a.product-category-tile.is-current:hover,
a.product-category-tile.is-current:focus {
    background: color-mix(in srgb, var(--product-accent, var(--primary)) 14%, white);
}

.product-category-tile.is-current .product-category-name {
    color: var(--product-accent-ink, var(--primary));
}

/* "You are here" reuses .product-category-count rather than being its own
   element — identical box, so it can't drift out of line with the counts on
   the tiles beside it. The dot takes the arrow's slot for the same reason. */
.product-category-count.is-here {
    color: var(--product-accent-ink, var(--primary));
}

/* The visible square is the pseudo-element; .product-category-dot itself is
   the slot, sized above to match the arrow it replaces. */
.product-category-dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--product-accent, var(--primary));
}

.product-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.35rem;
    background: color-mix(in srgb, var(--product-accent, var(--primary)) 12%, white);
    color: var(--product-accent-ink, var(--primary));
}

.product-category-icon .material-symbols-outlined {
    font-size: 1.6rem;
}

.product-category-icon img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

.product-category-name {
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--secondary);
}

.product-category-tagline {
    color: var(--gray);
    font-size: 0.85rem;
    line-height: 1.55;
}

/* The row's height is set by the go-there arrow, which the current tile
   doesn't have. Without a floor, that tile's row is shorter — and because it's
   pinned to the bottom, its label ends up sitting lower than the counts beside
   it. 1.15rem matches the arrow's line box. */
.product-category-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.15rem;
    margin-top: auto;
    padding-top: 1rem;
}

.product-category-count {
    color: var(--gray);
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* One fixed slot, whichever marker sits in it. The arrow's height would
   otherwise come from the icon font's own metrics, making the row taller than
   the tile holding the dot — and since the row is bottom-pinned, the shorter
   row's label drops below the counts beside it. */
.product-category-meta > .material-symbols-outlined,
.product-category-dot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1;
}

.product-category-meta > .material-symbols-outlined {
    color: var(--product-accent-ink, var(--primary));
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

/* Only the meta arrow nudges — scoped, or the category icon in the tile head
   slides along with it. */
a.product-category-tile:hover .product-category-meta .material-symbols-outlined {
    transform: translateX(4px);
}

/* ============================
   TEAM BLOCK
   ============================ */

.team-block {
    padding: var(--section-py) 0;
    background: white;
}

/* Doubled class to out-order the global .light-bg in style.css. */
.team-block.light-bg {
    background: var(--light-gray);
}

.team-block-head {
    max-width: 42rem;
}

/* White cards joined by the grid gap showing through as hairlines, so the set
   reads as one panel — same treatment as the product categories block. */
.team-block-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

@media (max-width: 900px) {
    .team-block-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .team-block-grid {
        grid-template-columns: 1fr;
    }
}

.team-member {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.9rem 1.6rem;
    background: white;
}

/* 3px accent top rule — the same motif as the hero panel and category tiles. */
.team-member::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--accent);
}

/* Name/role on the left, LinkedIn anchored top-right so it reads as part of the
   person's details rather than a stray glyph floating in the card. */
.team-member-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.team-member-head {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.team-member-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--secondary);
}

.team-member-role {
    margin: 0;
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.team-member-bio {
    margin: 0;
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Boxed and squared to match the design language; fills with brand blue on
   hover so it looks like a deliberate control. */
.team-member-linkedin {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-color);
    color: var(--gray);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.team-member-linkedin:hover,
.team-member-linkedin:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.team-member-linkedin svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

/* ============================
   ACCREDITATIONS BLOCK
   ============================ */

.accreditations {
    padding: var(--section-py) 0;
    background: white;
}

/* Doubled class to out-order the global .light-bg in style.css. */
.accreditations.light-bg {
    background: var(--light-gray);
}

/* No wrapper width cap — the global `.section-head > p` already holds the intro
   to a sensible measure, and capping the whole header squeezed it further. */

/* Same panel-of-white-cards treatment as the team and product category grids.
   Hairline seams need to survive two things at DPR 1: fractional `1fr` track
   widths that shift on every resize, and AOS promoting each card to its own
   compositor layer (`will-change: transform`), which is what made a 1px
   border/gap flicker in and out as the window resized. So:
     - the grey shows as a solid painted fill (grid `background` + 1px
       `padding`/`gap`), never an empty gap that can round to zero;
     - each card also carries a 1px `box-shadow` ring, so if a gap does
       collapse the neighbouring rings still draw the line;
     - `.accreditation` drops the AOS layer promotion so all of the above
       rasterise on the normal paint path and stay put.
   Column count is picked on the block (Styling → Columns); it steps down to
   2 then 1 on narrower viewports. */
.accreditations-grid {
    display: grid;
    gap: 1px;
    padding: 1px;
    background: var(--border-color);
}

.accreditations-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accreditations-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .accreditations-grid.cols-3,
    .accreditations-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .accreditations-grid.cols-3,
    .accreditations-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.accreditation {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.9rem 1.6rem;
    background: white;
    /* Backs up the 1px grid gap if it rounds away on a given viewport width. */
    box-shadow: 0 0 0 1px var(--border-color);
    /* Undo AOS's `will-change: transform` — no permanent layer, so the seams
       above paint on the normal path instead of shimmering on resize. */
    will-change: auto;
}

/* 3px accent top rule — the shared motif across the boxy card blocks. */
.accreditation::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--accent);
}

/* Every logo sits in the same framed tile, so wildly different aspect ratios
   read as one consistent set: landscape marks fill the width, portrait marks
   the height, but the footprint is identical. Logos keep their own colours —
   these are third-party badges. */
.accreditation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.9rem;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
}

.accreditation-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Specificity bump: the icon span makes the h3 a non-first-child, so the global
   `h*:not(:first-child) { margin-top: 2rem }` rule would otherwise push it down. */
.accreditation .accreditation-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--secondary);
}

.accreditation-desc {
    margin: 0;
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.6;
}