/* Add a lightweight reset so the page is flush with the browser edges */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh; /* defensive: ensure page fills viewport and avoid stray gaps */
}

/* make box-sizing predictable for all elements */
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* offset content so the fixed header does not overlap page content */
    padding-top: 104px; /* matches .header-wrap height */
}

/* header wrapper that contains both bars so logo can be centered between them */
.header-wrap {
    /* fixed wrapper so the two-bar header remains visible for the entire scroll */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 104px;    /* stable combined height (topbar 36 + navbar 68) */
    z-index: 99999;   /* very high so page content never covers the header */
    background: transparent; /* keep bars' background; wrapper itself transparent */
    box-shadow: 0 3px 10px rgba(6,18,45,0.06); /* subtle separation from content */
    overflow: visible; /* allow logo to overflow slightly if needed */
}

/* ensure headers span the full width and padding doesn't create overflow */
.topbar, .navbar {
    width: 100%;
    box-sizing: border-box;
}

/* Top contact bar - give a fixed height so vertical centering math is stable */
.topbar {
    background-color: #3C7DED;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 36px;           /* fixed height */
    padding: 0 1rem;        /* horizontal padding only */
    font-size: 0.95rem;
    border:none;
}

/* Main navbar immediately below the topbar */
.navbar {
    background-color: #3C7DED; /* same blue so they look like one continuous bar */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;       /* static inside the sticky header-wrap */
    height: 68px;
    box-shadow: 0 6px 18px rgba(10,28,70,0.07); /* soft lift so navbar stands out */
    font-size: 18px;
    padding: 8px 50px;      /* normal left/right padding; logo is absolutely positioned */
}

/* centered absolute logo placed between the bars */
.logo-wrap {
    position: absolute;
    /* nudged right so logo aligns with the navbar content area */
    left: 24px;            /* nudge the logo closer to the left edge */
    top: 0;
    bottom: 0;
    margin: auto 0;        /* reliable vertical centring between the two bars */
    max-height: 64px;
    z-index: 1200;         /* above all header content */
    display: flex;
    align-items: center;
    pointer-events: auto;               /* allow clicks on the logo (if needed) */
    /* defensively constrain height so it never overflows its bar */
    /* max-height: 64px; */
}

/* ensure the logo image doesn't produce inline whitespace or extra height */
.logo {
    display: block;
    width: auto;
    max-height: 56px;      /* slightly smaller to avoid clipping at small header heights */
    pointer-events: auto;
}

/* ensure navbar stays visible and is inside the sticky wrapper (static) */
.navbar {
    position: static;       /* static inside the sticky header-wrap */
    z-index: 1100;          /* keep below logo but above page content */
}

/* container for the background image and content */
.container {
    position: relative; /* needed for the overlay */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background-image: url('../images/../images/../images/Office Front.jpg'); /* photo only */
    background-repeat: no-repeat;
    /* restored: placement/size prior to the 75px reduction */
    background-position: center;
    background-size: cover;
    height: 480px;
    align-items: center;
    justify-items: stretch;
    padding: 2rem 2.5rem;
    color: #fff;
    overflow: hidden; /* clip any oversized pseudo-elements / background scaling so nothing spills past the bottom */
}

/* gradient overlay that always covers the container */
.container::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    /* changed: darker left-to-right gradient (darker on left, lighter on right) */
    background: linear-gradient(to right, rgba(10,15,82,0.86), rgba(60,125,237,0.55));
    pointer-events: none;
    z-index: 1;
    background-size: calc(100% + 150px) auto; /* ensure overlay uses the same sizing as the photo layer */
    /* remove visual scaling that could push blurred content outside the container */
    transform: none;
}

/* ensure container children render above the overlay */
.container > * {
    position: relative;
    z-index: 2;
}

/* contact group spacing and icon styles */
.topbar .contact {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    /* remove extra top padding that was increasing the topbar height */
    padding: 0;
}
.topbar .contact a.contact-item {
    display: inline-flex;
    align-items: center;
    color: #fff;               /* icons inherit this via currentColor */
    text-decoration: none;
    font-size: 0.95rem;
    gap: 0.5rem;
}

/* spacing between items (only apply margin to items after the first) */
.topbar .contact a.contact-item + a.contact-item {
    margin-left: 1rem;
}

/* icon sizing - uses currentColor for fill so they render white in the topbar */
.topbar .contact .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* ensure the span text inherits the link color */
.topbar .contact a.contact-item span {
    color: inherit;
}

/* menu layout */
.menu {
    display: flex;
    gap: 2rem; /* increase horizontal spacing so nav occupies similar footprint as topbar contact items */
    align-items: center;
}

/* ensure nav links are visually consistent (same size/weight) */
.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;       /* explicit size so 'Home' matches the rest */
    font-weight: 600;
    line-height: 1;
    display: inline-block;
    padding: 0.35rem 0.25rem; /* slight padding to increase clickable footprint and visual balance */
}


/* small text styling to improve contrast */
.hero-text h1,
.hero-text p {
    color: #fff;
}

.hero-text h1 {
    color: #ffffff; /* keep title pure white */
    /* stronger weight and tighter line height for Montserrat */
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    font-size: 1.8rem; /* tighten hero height */
}

.menu--desktop {
    display: flex;
}

.menu--mobile {
    display: none;
}

/* slightly grey/off-white paragraph for subtle contrast */
.hero-text p {
    color: rgba(255,255,255,0.88); /* adjust alpha to taste (0.85-0.92) */
    font-weight: 300;
    line-height: 1.45;
    margin: 0 0 1rem; /* space before buttons */
    font-size: 0.92rem;
}

/* fixed: proper selector for max width */
.hero-text {
    max-width: none;
    width: 100%;
}

.hero-text p {
    max-width: none;
}

/* Desktop hero tuning: restore tighter crop + nudge text right + allow wrap */
@media (min-width: 761px) {
    .container {
        background-position: -25px calc(50% - 50px);
        background-size: calc(100% + 150px) auto;
        padding: 2.2rem clamp(1.5rem, calc((100vw - 1100px) / 2 + 1.5rem), 6rem);
    }

    .hero-text {
        padding-left: 0;
        max-width: 520px;
    }

    .hero-text {
        max-width: 520px;
    }

    .hero-text h1 {
        font-size: 2.1rem;
    }

    .hero-text p {
        max-width: 500px;
    }
}

/* CTA buttons layout and styles */
.hero-cta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.25rem;
}

/* base button */
.btn {
    display: inline-block;
    padding: 0.55rem 1.05rem;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px; /* very slightly rounded corners to remain rectangular */
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

/* primary: white background, dark text */
.btn--primary {
    background: #ffffff;
    color: #0a0f52;
    font-weight: 600;
}

/* ghost/secondary: transparent with subtle white border */
.btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.85);
    font-weight: 600;
}

.btn--brand {
    background: #3C7DEDFF;
    color: #ffffff;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.6rem 1.05rem;
    border: 1px solid rgba(60,125,237,0.28);
    box-shadow: 0 10px 22px rgba(37,81,165,0.22);
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease, background 120ms ease;
}

.btn--content {
    background: #0a0f52;        /* same colour as the content title */
    color: #ffffff;
    border: 1px solid rgba(10,15,82,0.08);
    font-weight: 700;
    border-radius: 8px;         /* more rounded */
    padding: 0.6rem 1rem;       /* slightly larger tappable area */
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease, background 120ms ease;
}


/* small hover effects */
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(10,28,70,0.06);
}
.btn--ghost:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}
.btn--content:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(10,15,82,0.09);
    opacity: 0.98;
}
.btn--brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(37,81,165,0.28);
    opacity: 0.98;
}

.nav-right {
    margin-left: auto; /* keep the menu pinned to the right edge (logo is placed in .nav-left) */
}

/* two-column content section beneath the hero */
.content-section {
    background: #ffffff; /* pure white so the "What we do" section stands apart */
    color: #0a0f52;
    padding: 3rem 1.5rem;
    margin-top: 0; /* remove gap so backgrounds meet cleanly */
    border-top: 1px solid rgba(10,15,82,0.02); /* very subtle separator */
}

/* Section background variants (applied via modifier classes) */
.content-section--white {
    background: #ffffff; /* explicit white band */
}

.content-section--pale {
    background: linear-gradient(180deg, #eef8ff 0%, #ffffff 100%); /* pale-blue -> white gradient */
}

.content-section--grey {
    background: #f4f6f8; /* light grey band */
}

/* center the orange divider in the contact header */
.contact-header .small-divider-line,
.contact-header .header-line {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 4.5px;
    background: #FF8A00;
    border-radius: 3px;
}

.content-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* use minmax(0,1fr) so columns can shrink properly and don't overflow at zoom levels */
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 2rem;
    align-items: stretch; /* ensure both columns are the same height */
}

/* ensure grid children can shrink (prevents overflow that can push content to one side) */
.content-grid > * {
    min-width: 0;
}

/* LEFT COLUMN: make the image container stretch to the grid row and center horizontally */
.content-img {
    display: flex;
    width: 100%;
    justify-content: center;   /* keep image centered horizontally */
    align-items: stretch;      /* stretch to match the text column height */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    justify-self: center;
    min-height: 0;             /* allow proper flex/grid shrinking */
}

/* image: fill the full height of the column, keep aspect ratio and avoid harsh cropping */
.content-image {
    display: block;
    height: 100%;              /* match the column height (so image vertical size = text) */
    width: auto;               /* preserve aspect ratio */
    max-width: 420px;          /* visual cap to prevent over-wide images */
    object-fit: contain;       /* show whole image within the box */
    border-radius: 8px;
    margin: 0;                 /* centering handled by parent */
}

/* Make the Hydrostation controls image much larger (override generic .content-image) */
#stealthboost-controls-img {
    /* allow the image container to grow but remain centered */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

#stealthboost-controls-img .content-image,
#hydrostation-controls {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;   /* much larger visual presence on desktop */
    object-fit: contain;
    margin: 0 auto;     /* centre the image inside its column */
}

/* Slightly reduce cap on medium screens to keep layout balanced */
@media (max-width: 1200px) {
    #stealthboost-controls-img .content-image,
    #hydrostation-controls {
        max-width: 600px;
    }
}

/* Keep it fully responsive on small screens */
@media (max-width: 760px) {
    #stealthboost-controls-img .content-image,
    #hydrostation-controls {
        max-width: 100%;
        width: 100%;
    }

    .content-image {
        height: auto;
        width: 100%;
        max-width: 100%;
    }

    .content-img {
        align-items: center;
    }

    .video-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .navbar {
        padding-left: 16px;
        padding-right: 16px;
        height: auto;
        line-height: normal;
    }

    .logo-wrap {
        left: 16px;
        max-height: 48px;
    }

    .logo {
        max-height: 44px;
    }

    .menu {
        flex-wrap: wrap;
        gap: 0.8rem;
    }
}

/* Mobile navbar: logo left, hamburger right */
@media (max-width: 760px) {
    body {
        padding-top: 72px; /* match simplified mobile header height */
    }

    .header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 72px;
        background: #3C7DED;
        z-index: 99999;
    }

    .logo-wrap {
        position: absolute;
        left: 16px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        margin: 0;
        max-height: 48px;
    }

    .topbar {
        display: none;
    }

    .contact {
        display: none;
    }

    .navbar {
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        line-height: normal;
    }

    .nav-right {
        flex: 0 0 25%;
        width: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logo {
        max-height: 44px;
    }

    .nav-left {
        flex: 0 0 75%;
    }

    .mobile-menu {
        position: relative;
        margin-left: auto;
    }

    .mobile-menu summary {
        list-style: none;
        cursor: pointer;
        padding: 0;
        border-radius: 0;
        border: none;
        background: transparent;
        width: 26px;
        height: 26px;
    }

    .mobile-menu summary::-webkit-details-marker {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
        width: 26px;
        height: 26px;
        background: url("../images/../images/../images/hamburger-menu-svgrepo-com.svg") no-repeat center / contain;
        filter: brightness(0) invert(1);
    }

    .mobile-menu-icon::before,
    .mobile-menu-icon::after {
        content: none;
    }

    .mobile-menu .menu {
        display: none;
    }

    .mobile-menu[open] .menu {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 72vw;
        max-width: 300px;
        background: #3C7DED;
        padding: 5rem 1.25rem 1.25rem;
        box-shadow: -12px 0 30px rgba(0,0,0,0.25);
        z-index: 2000;
    }

    .mobile-menu[open] .menu::before {
        content: "";
        width: 160px;
        height: 40px;
        background: url("../images/../images/../images/bws-logo-white.png") no-repeat left center / contain;
        margin-bottom: 0.75rem;
    }

.mobile-menu .menu a {
    color: #fff;
}

    .mobile-menu[open] summary {
        position: fixed;
        top: 14px;
        right: 16px;
        z-index: 2100;
        width: 26px;
        height: 26px;
    }

    .mobile-menu[open] .mobile-menu-icon {
        background-image: url("../images/../images/../images/cross-svgrepo-com-white.svg");
        filter: none;
    }

    .mobile-menu-contact {
        margin-top: auto;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255,255,255,0.2);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .mobile-menu-contact a {
        color: #fff;
        text-decoration: none;
    }

    .mobile-menu-contact a:hover {
        text-decoration: underline;
    }

    .menu--desktop {
        display: none;
    }

    .menu--mobile {
        display: flex;
    }
}

/* Mobile-first reflow: make layout feel designed for phones */
@media (max-width: 760px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .container {
        grid-template-columns: 1fr;
        justify-items: start;
        height: 380px;
        padding: 2.2rem 1.5rem 2.6rem;
    }

    .hero-text {
        grid-column: 1 / -1;
        text-align: left;
    }

    .hero-text p {
        font-size: 0.98rem;
        line-height: 1.5;
        color: rgba(255,255,255,0.96);
        padding: 10px 0;
    }

    .hero-cta {
        justify-content: flex-start;
    }

    .products-section {
        padding: 2.5rem 1.1rem;
    }

    .products-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .products-header-row .products-text {
        flex: 1 1 auto;
    }

    .products-header-row .header-icon {
        margin-left: 0;
    }

    .content-section h1 {
        font-size: 1.9rem;
        line-height: 1.1;
    }

    #product-hero-text h1 {
        font-size: 1.8rem;
    }

    #product-hero-text p,
    .products-sub,
    .product-desc,
    .content-section p {
        font-size: 1rem;
    }

    #product-hero .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    #product-hero .hero-cta .btn {
        width: 100%;
        text-align: center;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .product-card {
        min-height: auto;
        padding: 16px;
    }

.product-photo {
    max-width: 140px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
}

/* responsive tweak: allow a touch larger on very wide screens but keep it compact */
@media (min-width: 1400px) {
    .content-image {
        max-width: 420px; /* slight increase on very wide viewports */
    }
}

/* small short orange divider under the content title */
.small-divider-line {
    width: 50px;                 /* max 50px */
    height: 4.5px;               /* around 4/5 px thick */
    background: #FF8A00;         /* orange */
    border-radius: 3px;
    margin: 1rem 0;             /* increase symmetric spacing above and below the line */
}

/* content section title + description styling */
.content-section h1 {
    margin: 0;
    font-size: 2.4rem;          /* much larger title */
    line-height: 1.05;
    color: #0a0f52;
    font-weight: 800;           /* bold */
}

/* body text slightly larger for readability */
.content-section p {
    color: #253046;
    font-size: 1.06rem;         /* slightly bigger body text */
    line-height: 1.6;
    margin-top: 0;              /* remove top margin so divider controls space */
}

/* Make product/header paragraph text match the site's main paragraph styling (same as .content-section p) */
.products-header-copy p,
.products-sub,
.product-desc {
    color: #253046;
    font-size: 1.06rem;
    line-height: 1.6;
    margin-top: 0; /* first paragraph under divider should sit flush (spacing handled via .products-header-copy p + p if needed) */
}

/* ensure subsequent paragraphs get comfortable spacing like other sections */
.products-header-copy p + p {
    margin-top: 0.75rem;
}

/* products section: ensure background fills to the bottom and remove external margins */
.products-section {
    background: linear-gradient(180deg, #eef8ff 0%, #ffffff 100%); /* pale-blue -> white */
    color: #0a0f52;
    padding: 3.5rem 1.5rem;
    margin-bottom: 0;      /* ensure no margin that could reveal page background */
    padding-bottom: 2rem;  /* explicit bottom padding so spacing is controlled */
    border-top: 1px solid rgba(10,15,82,0.02);
}

/* ----- Fix: stable products grid + uniform cards ----- */

.products-header-full {
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
}

.products-header-inner {
    width: 100%;
}

/* keep the outer wrapper constrained and simple (centered block) */
.products-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    display: block;           /* simpler, less fragile than a 3-col parent grid */
    text-align: center;
}

/* header: keep left-aligned content if you prefer, but centered visually here */
.products-header {
    /* allow the header content to span the full wrapper but left-align it */
    max-width: none;
    margin: 0;
    padding: 1rem 0;
    text-align: left; /* changed from right -> left */
}

.products-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.products-header-row .products-text {
    flex: 0 1 65%;
    min-width: 0;
}

.products-header-row .header-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    margin-left: -13rem;
}

/* Desktop: show normal menu, hide hamburger/summary */
@media (min-width: 761px) {
    .mobile-menu summary {
        display: none;
    }

    .mobile-menu {
        display: none;
    }

    .menu--desktop {
        display: flex;
    }
}
.page-commercial-index .products-header-row .header-icon {
    margin-left: 0;
}

.products-header h1 {
    /* match the "What we do" heading: big, bold, show-off style */
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.05;
    color: #0a0f52;
    font-weight: 800;
}

.products-header .products-sub {
    /* match the content body paragraph styling for consistent rhythm */
    margin: 0;
    color: #253046;
    font-size: 1.06rem;
    line-height: 1.6;
    margin-top: 0.6rem;
}

/* position the small orange divider under the left edge of the header */
.products-header .small-divider-line {
    display: block;
    margin: 0.6rem 0 0.9rem 0; /* top / right / bottom / left */
    margin-left: 0;            /* ensure the divider is left-aligned under the heading */
    margin-right: auto;
}

/* centered, constrained grid: controls card width by column size */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;                /* reduced gap so outer cards sit closer to centre */
    margin: 1rem auto 0;
    max-width: 1100px;        /* increased so 3 columns comfortably fit */
    justify-items: center;    /* keep each card centered within its column */
    align-items: start;
}

#domestic-products .products-grid > .product-card:last-child {
    grid-column: 2;
}

@media (max-width: 900px) {
    #domestic-products .products-grid > .product-card:last-child {
        grid-column: auto;
    }
}

/* product card: occupy full available column width, consistent vertical height */
.product-card {
    width: 100%;
    max-width: 300px;         /* make each card visually thinner */
    min-height: 320px;        /* consistent vertical size for all cards */
    padding: 18px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: 0 8px 22px rgba(10,28,70,0.06);
    border: 1px solid rgba(10,15,82,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

/* ensure card hover is preserved but not altering layout size */
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* product photo: constrained and non-cropping so whole image is visible */
.product-photo {
    display: block;
    max-width: 180px;         /* keep the whole image visible */
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* icon container: clip any stray pixels and keep consistent color */
.product-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #007DED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;         /* clip stray white corners in icon files */
}

/* icon itself */
.product-icon {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}

/* title/desc: consistent spacing */
.product-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}
.product-desc {
    margin: 0;
    font-size: 13.5px;
    color: #546170;
    line-height: 1.45;
    text-align: center;
    max-width: 95%;
}

/* Short product summary shown above feature lists on product pages */
.product-summary {
    margin: 0 0 0.85rem;
    color: #253046;
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Product summary section: span full width inside the grid */
.product-summary-full {
    grid-column: 1 / -1;
}

.product-summary-section h1 {
    padding-top: 2rem;
}

/* Privacy page layout */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.legal-content h2,
.legal-content h3 {
    color: #0a0f52;
    margin: 1.25rem 0 0.5rem;
}

.page-privacy .feature-list {
    grid-template-columns: 1fr;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #5b6b7e;
    margin: 0.85rem auto 0.75rem;
    max-width: 1200px;
    padding: 0 1.5rem;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    color: #9aa8b7;
}

/* Breadcrumbs inside the product hero card */
.breadcrumbs--card {
    margin: 0 0 0.5rem 0;
    padding: 0;
    font-size: 0.82rem;
    color: #6b7a8c;
}

/* Default: show section breadcrumbs, hide card breadcrumbs */
.breadcrumbs--card { display: none; }
.breadcrumbs--section { display: flex; }

@media (max-width: 760px) {
    .breadcrumbs--card { display: flex; }
    .breadcrumbs--section { display: none; }
}

/* keep desktop breadcrumbs above any hero background overlap */
.breadcrumbs--section {
    position: relative;
    z-index: 2;
}

/* ensure the CTA sits at the bottom of every product card so buttons align */
.product-cta {
    margin-top: auto;       /* pushes CTA to the bottom of the flex card */
    align-self: center;     /* keep the button centered horizontally inside the card */
    padding: 8px 12px;
    background: #0b214f;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    border: none;
}

/* Feature list inside product-features */
.product-features {
    /* keep flow and spacing consistent with other content blocks */
    max-width: 720px;
    background: #f7f9fb;                 /* very light grey to separate the section */
    padding: 1.25rem 1.5rem;             /* breathing space around the features */
}

.feature-list {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* two columns on wide screens */
    gap: 0.6rem 1.25rem;
    align-items: start;
}

.feature-list li {
    position: relative;
    padding-left: 28px;
    color: #253046;
    font-size: 0.98rem;
    line-height: 1.45;
    font-weight: 600; /* slight emphasis so features read confidently */
}

/* small orange square bullet to the left of each item */
.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem; /* vertically align with first line */
    width: 10px;
    height: 10px;
    background: #FF8A00;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(15,30,80,0.06);
}

/* responsive: single column on narrow viewports */
@media (max-width: 760px) {
    .feature-list {
        grid-template-columns: 1fr;
        gap: 0.5rem 0;
    }
    .feature-list li::before {
        top: 0.6rem;
    }
}

/* responsive: 3 -> 2 -> 1 columns, keep card widths consistent */
@media (max-width: 1100px) {
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
    .product-card { max-width: 320px; }
}
@media (max-width: 680px) {
    .products-grid { grid-template-columns: 1fr; max-width: 420px; gap: 14px; }
    .product-card { max-width: 420px; width: 100%; min-height: auto; }
    .product-photo { max-width: 150px; }
}

/* Contact section */
.contact-section {
    background: #f4f6f8; /* slightly warmer light grey for contrast */
    padding: 2rem 1.25rem; /* tighter vertical padding so section reads smaller */
    color: #0a0f52;
    border-top: 1px solid rgba(10,15,82,0.02);
}
.contact-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;  /* keep centered by default for centered variants */
}
.contact-header {
    max-width: 720px;
    margin: 0 0 0.75rem 0;
    /* ensure children (title + divider) are centered */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* center the orange divider in the contact header */
.contact-header .small-divider-line,
.contact-header .header-line {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 4.5px;
    background: #FF8A00;
    border-radius: 3px;
}

/* left-aligned contact header (override centered version) */
.contact-header--left {
    align-items: flex-start;
    text-align: left;
    width: 100%;           /* take full width of .contact-inner */
    max-width: 760px;      /* match container width so divider and title align with details/form */
    padding: 0;
    margin: 0 0 0.75rem 0;
}

/* Small orange line left-aligned under left header */
.contact-header--left .small-divider-line,
.contact-header--left .header-line {
    margin: 0.45rem 0 0.9rem 0; /* top/bottom spacing; left aligned */
    width: 50px;
    height: 4.5px;
    background: #FF8A00;
    border-radius: 3px;
    align-self: flex-start;
}

/* -------- Contact form: compact, centred, and usable -------- */
.contact-form {
    width: 100%;
    max-width: 760px;          /* keep form compact */
    margin: 0.6rem auto 0;     /* separate from details/map slightly */
    box-sizing: border-box;
    padding: 0;
}

/* grid layout for inputs */
.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

/* single full-width field */
.form-field--full {
    grid-column: 1 / -1;
}

/* field wrapper */
.form-field {
    display: flex;
    flex-direction: column;
}

/* labels */
.form-field label {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: #0a0f52;
}

/* inputs and textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(10,15,82,0.08);
    background: #ffffff;
    color: #0a0f52;
    font-size: 0.95rem;
    line-height: 1.3;
    width: 100%;
    box-sizing: border-box;
}

/* make textarea comfortable but not huge */
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
    padding-top: 10px;
}

/* submit/button alignment */
.form-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
}

/* keep submit consistent with site button style */
.form-actions .btn--content {
    padding: 0.56rem 1.05rem;
}

/* Add consistent font-family to contact form elements so they match the rest of the site */
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button,
.contact-form .form-field,
.contact-form .form-field * {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ensure inputs/textarea use the same sizing/line-height and don't fall back to monospace */
.contact-form input,
.contact-form textarea,
.contact-form select {
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 400;
}

/* placeholder text should also match the site font */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    color: rgba(10,15,82,0.32);
    opacity: 1; /* consistent across browsers */
}

/* Honeypot field for spam prevention */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Footer: ensure consistent visual and responsive layout (fixes broken/unstyled footer) */
.site-footer {
    background: #3C7DED; /* same blue as header */
    color: #ffffff;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
    opacity: 0.95;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    box-sizing: border-box;
}

/* Column headings */
.footer-column h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff;
}

/* Column body text */
.footer-column p,
.footer-column a,
.footer-column li {
    color: rgba(255,255,255,0.95);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.6rem 0;
}

/* Socials list */
.footer-socials {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-socials li {
    margin: 0 0 0.45rem 0;
}

/* Footer address */
.footer-address {
    margin: 0;
    color: rgba(255,255,255,0.95);
}

/* Divider under headings inside footer — keep the small orange line but ensure spacing */
.footer-line {
    margin: 0.5rem 0 0.75rem 0;
    width: 50px;
    height: 4.5px;
    background: #FF8A00;
    border-radius: 3px;
}

/* bottom row: spans full width, small separator and compact text */
.footer-bottom {
    grid-column: 1 / -1;
    margin-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.9rem;
    text-align: center;
    color: rgba(255,255,255,0.9);
    font-size: 0.92rem;
}

/* privacy link sits inline with copyright */
.footer-bottom .footer-privacy {
    color: rgba(255,255,255,0.95);
    margin-left: 0.6rem;
}

/* Responsive: stack columns on small screens */
@media (max-width: 860px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .footer-column {
        text-align: left;
    }
    .footer-bottom {
        text-align: left;
    }
}

/* Defensive: ensure footer is not covered by fixed header on very short pages */
body {
    /* ...existing code... */
    /* ensure bottom content has breathing room if header is fixed; keep previous padding-top */
    /* no bottom padding required here, but if you find footer overlaps on some touch devices
       consider adding `padding-bottom: 20px;` to body. */
}

/* ===== Header stability fixes (prevent logo overlap / clipping) =====
   - Reserve horizontal space inside the navbar so the absolutely-positioned logo
     cannot overlap or push/clip the nav content.
   - Keep logo vertically centred and bounded.
*/
.header-wrap {
    /* ensure header wrapper remains visible and does not clip children */
    overflow: visible; /* defensive */
}

.logo-wrap {
    /* keep a stable left offset (tweak if you prefer a different horizontal position) */
    left: 24px;            /* nudge the logo closer to the left edge */
    top: 0;
    bottom: 0;
    margin: auto 0;        /* reliable vertical centring between the two bars */
    max-height: 64px;
}

/* Reserve space on the left of the navbar so menu items never sit under the logo */
.navbar {
    padding-left: 140px;   /* leave room for the logo; reduces overlap/clipping issues */
    padding-right: 50px;   /* keep right padding consistent */
}

/* Defensive: ensure logo never gets clipped and is visually centred */
.logo {
    display: block;
    max-height: 56px;      /* slightly smaller to avoid clipping at small header heights */
    width: auto;
}

/* make sure both bars use consistent heights (defensive) */
.topbar { height: 36px; line-height: 36px; }
.navbar { height: 68px; line-height: 68px; }

/* ensure the navbar content (menu) is above page content but below the logo */
.header-wrap .navbar { z-index: 1100; }
.logo-wrap { z-index: 1200; }

/* Mobile override: prevent desktop header fixes from clipping the logo */
@media (max-width: 760px) {
    .logo-wrap {
        top: 50%;
        bottom: auto;
        margin: 0;
        max-height: 48px;
    }

    .logo {
        max-height: 44px;
    }

    .navbar {
        padding-left: 16px;
        padding-right: 16px;
        height: 72px;
        line-height: normal;
    }
}

/* responsive video block used in product-template left column (keeps 16:9) */
.content-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0; /* allow proper shrinking inside grid */
    padding: 0;
    box-sizing: border-box;
}

.video-wrapper {
    width: 100%;
    max-width: 560px; /* desktop cap */
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(6,18,45,0.06);
}

/* iframe fills the wrapper */
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* responsive adjustments */
@media (max-width: 980px) {
    .video-wrapper { max-width: 480px; }
}
@media (max-width: 680px) {
    /* stack and make video full width on small screens */
    .content-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .video-wrapper { max-width: 100%; aspect-ratio: 16 / 9; }
}



#stealthboost-features {
    background-color: #f7f9fb;
}

/* ====== About / Contact / Domestic hero (shared .container.about-hero) ====== */

.container.about-hero {
    position: relative;      /* contains the pseudo-elements */
    overflow: hidden;        /* clip the blurred overlay so it cannot extend past the hero box */
    height: 420px;           /* slightly shorter than the homepage hero */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: none;        /* override global .container background */
    color: #ffffff;
}

.container.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(to right, rgba(10,15,82,0.72), rgba(60,125,237,0.30)),
            url('../images/../images/../images/Office Front.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center, -25px calc(50% - 180px);
    background-size: cover, calc(100% + 150px) auto;
    transform: none;
    filter: brightness(0.88);
    z-index: 1;
}

/* Strong blur overlay sitting above both the gradient and the image */
.container.about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 82, 0.18);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2;
    pointer-events: none; /* allow clicks to pass through */
}

.container.about-hero > .about-us {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 960px;
    padding: 0 1rem;
    margin: 0 auto;
}

.container.about-hero .about-us h1 {
    margin: 0 0 0.8rem;
    font-size: 2.75rem;
    line-height: 1.08;
}

.container.about-hero .small-divider-line {
    margin: 0 auto 1.2rem;
}

.container.about-hero .about-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
    max-width: 640px;
    margin: 0 auto;
}

.container.about-hero .hero-cta {
    justify-content: center;
    margin-top: 1.6rem;
    gap: 1.1rem;
}

@media (max-width: 900px) {
    .container.about-hero {
        height: 360px;
        padding: 1.75rem;
    }

    .container.about-hero .about-us h1 {
        font-size: 2.1rem;
    }
}

@media (max-width: 680px) {
    .container.about-hero {
        height: auto;
        padding: 1.5rem 1.25rem;
    }

    .container.about-hero .about-us h1 {
        font-size: 1.8rem;
    }

    .container.about-hero .about-lead {
        font-size: 1rem;
    }
}

/* Mobile: ensure About/Contact/Products hero has real height + full background */
@media (max-width: 760px) {
    .container.about-hero {
        min-height: 260px;
        padding: 2rem 1.25rem;
        justify-content: center;
    }

    .container.about-hero::before {
        background-position: center, center;
        background-size: cover, cover;
    }
}

@media (max-width: 680px) {
    .products-header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .products-header-row .products-text {
        text-align: center;
        flex: 1 1 auto;
    }

    .products-header .small-divider-line {
        margin-left: auto;
        margin-right: auto;
    }

    .products-header-row .header-icon {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* About page: reduce Jon image size on mobile */
@media (max-width: 760px) {
    .jon-image {
        max-width: 300px;
        width: 100%;
        height: auto;
    }
}

/* Page-specific overrides for product-template.html hero (id="product-hero") */

/* use auto column for image so it sits to the left and text occupies remaining space */
#product-hero {
    grid-template-columns: minmax(320px, 720px) minmax(0, 520px);
    align-items: center;
    justify-content: center;
    padding: 1.2rem 2.2rem 1.05rem;
    gap: 1.5rem;
    height: auto;
    min-height: 420px;
}

/* left image column */
#product-hero > .product-image-wrap {
    justify-self: end;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    margin-left: -40px;
    width: 100%;
}

/* product image used in both columns */
#product-hero .product-image {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
}

/* Product page: use a blurred background via ::before (page-specific override) */
#product-hero {
    /* remove any inherited background image so we only render the pseudo-layer */
    background: none !important;
    position: relative; /* contain the absolutely positioned pseudo-element */
    overflow: hidden;   /* prevent background layer from bleeding into next section */
}

/* blurred background layer for product hero — softened and aligned with site hero sizing */
#product-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    /* gradient sits beneath the photo and stretches edge-to-edge; photo layer is overscaled */
    background-image:
      linear-gradient(90deg,
        rgba(60,125,237,0.09) 0%,
        rgba(60,125,237,0.16) 45%,
        rgba(49,94,186,0.26) 70%,
        rgba(28,52,120,0.4) 100%),
      url("../images/../images/../images/text-left-image-right.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center, calc(50% + 45px) center; /* nudge subject right without exposing edges */
    background-size: cover, cover; /* ensure background image covers full hero */

    /* bump blur + enlarge pseudo-layer so the zoomed image stays soft at the edges */
    transform: scale(1.12);
    transform-origin: center;
}

/* --- product page hero: make right-hand panel lighter, longer and tied to site colours --- */
#product-hero .hero-text {
    /* stronger glassmorphism: translucent fill, frosted blur, brighter edge */
    background: #ffffff;
    padding: 1rem 1.2rem 1.15rem;
    min-height: auto;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(11,24,58,0.1);
    border: 1px solid rgba(60,125,237,0.12);
    color: #1f2f4a;
    max-width: 520px;
    max-height: none;
    justify-self: center;
    align-self: center;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0 auto;
}

.product-image-inline {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4rem 0 0.4rem;
}

/* increase headline / paragraph prominence but keep good contrast on the lighter panel */
#product-hero-text h1 {
    font-size: 2.2rem;
    line-height: 1.05;
    margin: 0;
    color: #3C7DED;
}
#product-hero-text p {
    font-size: 1.06rem;
    color: #253046;
    margin: 0;
    font-weight: 400;
}

/* Hero CTA placement under tech specs */
#product-hero .hero-cta {
    justify-content: flex-start;
}

.hero-cta--product {
    margin-top: 0.9rem;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* match CTA proportions with the rest of the site */
.hero-cta--product .btn {
    padding: 0.72rem 1.05rem;
    flex: 0 0 auto;
}

/* Tech specs: keep white text but reduce weight so it doesn't feel heavy on the lighter panel */
#product-hero .tech-specs {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(60,125,237,0.18);
    background: rgba(245,249,255,0.96);
    box-shadow: none;
    overflow: hidden;
}

#product-hero .tech-specs-header {
    padding: 0.6rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #193870;
    background: linear-gradient(90deg, rgba(60,125,237,0.18), rgba(242,247,255,0.82));
    border-bottom: 1px solid rgba(60,125,237,0.18);
}

#product-hero .tech-specs-list {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem 0.7rem;
    margin: 0;
}

#product-hero .tech-specs-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
    padding: 0.15rem 0;
}


#product-hero .tech-specs-list li + li {
    border-top: 1px solid rgba(27,73,155,0.12);
    padding-top: 0.4rem;
    margin-top: 0.18rem;
}

.tech-specs-label {
    color: #204a93;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.tech-specs-value {
    color: #2b3f63;
    font-weight: 500;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 640px) {
    #product-hero .tech-specs-list li {
        gap: 0.5rem;
    }

    .tech-specs-value {
        width: 100%;
        text-align: left;
        font-size: 0.9rem;
    }

    #product-hero .tech-specs-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    .tech-specs-label {
        width: 100%;
    }

}

@media (max-width: 900px) {
    #product-hero .hero-text {
        max-width: 520px;
    }
}

@media (max-width: 760px) {
    #product-hero {
        grid-template-columns: 1fr;
        padding: 1rem 1.25rem;
        gap: 1rem;
    }

    #product-hero > .product-image-wrap {
        display: none;
    }

    .product-image-inline {
        display: flex;
    }

    #product-hero .product-image {
        max-width: 100%;
    }

    #product-hero .hero-text {
        max-width: 100%;
        width: 100%;
        padding: 0.95rem 1rem 1rem;
    }

    #product-hero .tech-specs-header {
        padding: 0.5rem 0.9rem;
        font-size: 0.95rem;
    }

    #product-hero .tech-specs {
        width: 100%;
        max-width: 100%;
    }

    #product-hero .tech-specs-list {
        padding: 0.45rem 0.9rem 0.6rem;
        gap: 0.3rem;
    }

    #product-hero .tech-specs-list li {
        font-size: 0.82rem;
    }

    .tech-specs-label {
        font-size: 0.72rem;
    }

    .tech-specs-value {
        font-size: 0.8rem;
    }
}

@media (min-width: 761px) {
    .product-image-inline {
        display: none;
    }
}

/* Slightly reduce the negative image offset so the photo and the panel feel connected */
#product-hero .product-image {
    margin: 0 auto;
    max-width: 700px;
}

/* Calpeda meta-s page: tone down hero and control images without shifting layout */
.page-meta-s #product-hero .product-image {
    max-width: 520px;
}

.page-meta-s #hydrostation-controls {
    max-width: 420px;
}

/* Calpeda meta-l page: match meta-s image sizing */
.page-meta-l #product-hero .product-image {
    max-width: 520px;
}

.page-meta-l #hydrostation-controls {
    max-width: 420px;
}

/* Ebara 1GPE Matrix E-SPD+ page: match meta image sizing */
.page-espd #product-hero .product-image {
    max-width: 520px;
}

.page-espd #hydrostation-controls {
    max-width: 420px;
}

/* Calpeda 2mèta-s-24 page: match meta image sizing */
.page-meta-2s #product-hero .product-image {
    max-width: 520px;
}

.page-meta-2s #hydrostation-controls {
    max-width: 420px;
}

/* Calpeda 2mèta-l-24 page: match meta image sizing */
.page-meta-2l #product-hero .product-image {
    max-width: 520px;
}

.page-meta-2l #hydrostation-controls {
    max-width: 420px;
}

/* Calpeda meta-tank 1S-250 page: match meta image sizing */
.page-meta-tank-1s #product-hero .product-image {
    max-width: 520px;
}

.page-meta-tank-1s #hydrostation-controls {
    max-width: 420px;
}

.page-meta-tank-1s #stealthboost-controls-img .content-image {
    max-width: 420px;
}

/* Calpeda meta-tank 1L-250 page: match meta image sizing */
.page-meta-tank-1l #product-hero .product-image {
    max-width: 520px;
}

.page-meta-tank-1l #hydrostation-controls {
    max-width: 420px;
}

.page-meta-tank-1l #stealthboost-controls-img .content-image {
    max-width: 420px;
}

/* Ebara GPE E-Tank page: match meta image sizing */
.page-gpe-tank #product-hero .product-image {
    max-width: 520px;
}

.page-gpe-tank #hydrostation-controls {
    max-width: 420px;
}

.page-gpe-tank #stealthboost-controls-img .content-image {
    max-width: 420px;
}

/* Ebara Hydrostation page: reduce hero image size slightly */
.page-hydrostation #product-hero .product-image {
    max-width: 560px;
}

.page-commercial-espd #hydrostation-controls {
    max-width: 420px;
}

.page-commercial-easymat #hydrostation-controls {
    max-width: 420px;
}

.page-commercial-imat #hydrostation-controls {
    max-width: 420px;
}

/* Cold water storage page image sizing */
.page-cold-water-storage #product-hero .product-image {
    max-width: 420px;
}
.page-cold-water-storage .product-summary-section .content-image {
    max-width: 420px;
}

/* Variable speed index: normalize card visuals */
.page-variable-speed-index .product-photo {
    width: 180px;
    height: 140px;
    object-fit: contain;
}
.page-variable-speed-index .product-desc {
    min-height: 2.6em;
}

.page-commercial #product-hero .product-image {
    max-width: 520px;
}

/* product hero divider tweaks */
.small-divider-line--hero {
    margin: 0.9rem 0 0.35rem;
    width: 60px;
}

/* Variable speed drive page sizing */
.page-variable-speed-espd #product-hero .product-image {
    max-width: 420px;
}


.page-variable-speed-imat #product-hero .product-image {
    max-width: 560px;
}

.page-variable-speed-hydrovar #product-hero .product-image {
    max-width: 500px;
}

@media (max-width: 760px) {
    .page-variable-speed-imat #product-hero .product-image {
        max-width: 100%;
    }
}

/* I-MAT page: shrink the lower control image */
.page-variable-speed-imat #hydrostation-controls {
    max-width: 260px;
}

.page-variable-speed-hydrovar #stealthboost-features .content-image {
    max-width: 600px;
}

/* Industrial index: center banner and prevent horizontal overflow */
.page-industrial-index {
    overflow-x: hidden;
}

/* prevent horizontal scrollbars site-wide */
html, body {
    overflow-x: hidden;
}
.page-industrial-index .industrial-other-manufacturers .product-summary-full {
    text-align: center;
}
.page-industrial-index .industrial-other-manufacturers .small-divider-line {
    margin: 0.6rem auto 1rem;
}
.page-industrial-index .industrial-other-manufacturers .content-image {
    max-width: 900px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Industrial product pages: normalize hero image size */
.page-industrial #product-hero .product-image {
    max-width: 440px;
}

.page-industrial #stealthboost-controls-img .content-image {
    max-width: 440px;
}