/* ==========================================================================
   Bluwebz — The Connected Flow
   Design tokens and global chrome. Every value here is taken from the
   approved design; see design_handoff_bluwebz_website/README.md.
   ========================================================================== */

:root {
    /* Brand */
    --bwz-cyan: #12bbe8;          /* fills, strokes, gradients only — never text on light */
    --bwz-mint: #17e0c0;
    --bwz-blue: #2e7df7;
    --bwz-cyan-deep: #0a6e8c;     /* accent TEXT on light backgrounds (AA, ~5.8:1 on white) */

    /* Surfaces and text */
    --bwz-base: #0a2e44;
    --bwz-surface: #10405c;
    --bwz-body: #48626f;
    --bwz-muted: #5c7a8a;
    --bwz-faint: #4a6b7a;
    --bwz-border: #e2e9ec;
    --bwz-border-cyan: #cfeef8;
    --bwz-soft-cyan: #eaf9fd;
    --bwz-neutral: #f5f7f8;
    --bwz-page: #f7fafc;
    --bwz-white: #ffffff;
    --bwz-on-cyan: #fdfeff;

    /* Gradients */
    --bwz-grad-dark-deep: linear-gradient(160deg, #0e3b57 0%, #0a2e44 55%, #07263a 100%);
    --bwz-grad-dark-surface: linear-gradient(155deg, #14506f 0%, #10405c 60%, #0c3550 100%);
    --bwz-grad-primary-panel: linear-gradient(135deg, #0a6e8c 0%, #12bbe8 100%);
    --bwz-grad-flow: linear-gradient(90deg, #17e0c0, #12bbe8 55%, #2e7df7);
    --bwz-grad-section-dark: linear-gradient(165deg, #14506f 0%, #10405c 32%, #0a2e44 72%, #07263a 100%);
    --bwz-grad-section-light: linear-gradient(180deg, #eaf9fd 0%, #f7fcfe 45%, #ffffff 100%);

    /* Type */
    --bwz-font-display: "Poppins", system-ui, sans-serif;
    --bwz-font-body: "IBM Plex Sans", system-ui, sans-serif;

    /* Motion */
    --bwz-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);  /* reveals, entrances */
    --bwz-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);         /* hover, toggles, menus */

    /* Layout */
    --bwz-max: 1440px;
    --bwz-section-pad: clamp(90px, 11vh, 150px) clamp(24px, 5vw, 80px);

    /* Legacy aliases used by inline SVG fills carried over from the design */
    --cy: #12bbe8;
    --cy2: #17e0c0;
    --cy3: #2e7df7;

    /* Scroll-linked variables. Every consumer also passes its own fallback so the
       page renders correctly BEFORE the deferred script runs. */
    --sp: 0;
    --hs: 0;
    --hp: 0;
    --p2: 1;
    --p4: 0;
    --p5: 1;
    --p7: 1;
    --mx: 0;
    --my: 0;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bwz-page);
    color: var(--bwz-surface);
    font-family: var(--bwz-font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: var(--bwz-cyan-deep);
    text-decoration: none;
}

a:hover {
    color: var(--bwz-cyan);
}

img {
    max-width: 100%;
}

::selection {
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
}

:focus-visible {
    outline: 2px solid var(--bwz-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

.bwz-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bwz-skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 300;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
    font-weight: 600;
    transition: top 0.2s var(--bwz-ease-ui);
}

.bwz-skip-link:focus {
    top: 0;
    color: var(--bwz-on-cyan);
}

.bwz-page {
    position: relative;
    background: var(--bwz-page);
    font-family: var(--bwz-font-body);
}

.bwz-shell {
    width: 100%;
    max-width: var(--bwz-max);
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

.bwz-h1 {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(38px, 5.2vw, 76px);
    line-height: 1.03;
    letter-spacing: -0.03em;
    color: var(--bwz-base);
    margin: 0 0 26px;
}

.bwz-h2 {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--bwz-base);
    margin: 0;
    text-wrap: pretty;
}

.bwz-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-micro {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-lead {
    font-size: clamp(15.5px, 1.25vw, 18px);
    line-height: 1.62;
    color: var(--bwz-body);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Buttons — solid cyan, never gradient
   -------------------------------------------------------------------------- */

.bwz-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
    font-family: var(--bwz-font-body);
    font-weight: 600;
    font-size: 15.5px;
    cursor: pointer;
    transition: transform 0.24s var(--bwz-ease-ui), box-shadow 0.24s var(--bwz-ease-ui);
}

.bwz-btn:hover {
    color: var(--bwz-on-cyan);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(18, 187, 232, 0.4);
}

.bwz-btn:active {
    transform: translateY(0);
    transition-duration: 0.09s;
}

.bwz-btn--ghost {
    background: transparent;
    border: 1px solid #c4dae4;
    color: var(--bwz-base);
    font-weight: 500;
}

.bwz-btn--ghost:hover {
    color: var(--bwz-base);
    border-color: var(--bwz-cyan);
    background: rgba(18, 187, 232, 0.08);
    box-shadow: none;
}

.bwz-btn--sm {
    padding: 13px 22px;
    font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Loader — cyan point, drawn path, wordmark, fade out
   -------------------------------------------------------------------------- */

.bwz-loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bwz-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: opacity 0.6s ease;
}

.bwz-loader.is-done {
    opacity: 0;
    pointer-events: none;
}

.bwz-loader__mark {
    display: block;
    width: min(300px, 62vw);
    height: calc(min(300px, 62vw) * 0.168);
    overflow: hidden;
    opacity: 0;
    animation: bwzFade 0.9s 1.15s forwards;
}

.bwz-loader__path {
    width: min(300px, 62vw);
    overflow: visible;
    margin-top: -8px;
}

.bwz-loader__line {
    stroke-dasharray: 420;
    animation: bwzDraw 1.7s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
    filter: drop-shadow(0 0 10px rgba(18, 187, 232, 0.7));
}

.bwz-loader__node {
    opacity: 0;
    animation: bwzFade 0.3s forwards;
}

.bwz-loader__caption {
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bwz-body);
    opacity: 0;
    animation: bwzFade 0.8s 0.7s forwards;
}

/* --------------------------------------------------------------------------
   Flow rail — fixed scroll-progress line
   -------------------------------------------------------------------------- */

.bwz-rail {
    position: fixed;
    left: clamp(10px, 2.4vw, 46px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(11, 34, 53, 0.1);
    z-index: 40;
    pointer-events: none;
}

.bwz-rail__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--sp, 0) * 100%);
    background: linear-gradient(180deg, rgba(18, 187, 232, 0) 0%, var(--bwz-mint) 16%, var(--bwz-cyan) 52%, var(--bwz-blue) 100%);
    box-shadow: 0 0 14px rgba(18, 187, 232, 0.75);
}

.bwz-rail__dot {
    position: absolute;
    top: calc(var(--sp, 0) * 100%);
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 16px 4px rgba(18, 187, 232, 0.9);
}

/* --------------------------------------------------------------------------
   Header — 96px shrinking to 66px, transparent over hero then white glass
   -------------------------------------------------------------------------- */

.bwz-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: calc(96px - var(--hs, 0) * 30px);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, calc(var(--hs, 0) * 0.9));
    backdrop-filter: blur(calc(var(--hs, 0) * 16px));
    border-bottom: 1px solid rgba(11, 34, 53, calc(var(--hs, 0) * 0.09));
    transition: height 0.35s var(--bwz-ease-ui), background 0.35s ease;
}

.bwz-header__inner {
    width: 100%;
    max-width: var(--bwz-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: 28px;
}

.bwz-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bwz-base);
    flex: 0 0 auto;
}

.bwz-brand__mark {
    --lw: calc(176px - var(--hs, 0) * 22px);
    display: block;
    width: var(--lw);
    height: calc(var(--lw) * 0.168);
    overflow: hidden;
    transition: width 0.35s ease, height 0.35s ease;
}

/* The width/height attributes stay on the <img> for CLS, so height must be reset to
   auto here — otherwise the attribute acts as a presentational hint and the wordmark
   renders at full natural height, leaving the container cropping the top few pixels. */
.bwz-brand__mark img,
.bwz-loader__mark img,
.bwz-mobilemenu__mark img,
.bwz-footer__mark img {
    width: 100%;
    height: auto;
    display: block;
}

.bwz-brand__tagline {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
    align-self: flex-end;
    padding-bottom: 3px;
    white-space: nowrap;
    opacity: calc(1 - var(--hs, 0));
}

.bwz-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.bwz-nav__link {
    display: block;
    padding: 12px 16px;
    color: #294454;
    font-size: 14.5px;
    font-weight: 500;
    transition: color 0.24s var(--bwz-ease-ui);
}
.bwz-nav__link:hover {
    color: var(--bwz-cyan-deep);
}

/* Parents carry a caret so a link that opens a panel is distinguishable from one
   that just navigates. */
.bwz-nav__link--parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bwz-nav__caret {
    width: 9px;
    height: 6px;
    opacity: .5;
    transition: transform 0.24s var(--bwz-ease-ui), opacity 0.24s var(--bwz-ease-ui);
}

.bwz-nav__item:hover .bwz-nav__caret,
.bwz-nav__item:focus-within .bwz-nav__caret {
    transform: rotate(180deg);
    opacity: 1;
}

.bwz-nav__item {
    position: relative;
}

.bwz-mega {
    position: absolute;
    top: 100%;
    /* Right-aligned to the trigger: the nav sits on the right of the header, so a
       centred panel pushed the last menu hard against the viewport edge. */
    right: 0;
    left: auto;
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    width: max-content;
    max-width: min(560px, 92vw);
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border);
    border-radius: 14px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    box-shadow: 0 18px 44px rgba(6, 21, 34, 0.13), 0 2px 6px rgba(6, 21, 34, 0.05);
    transition: opacity 0.22s var(--bwz-ease-ui), transform 0.22s var(--bwz-ease-ui);
}

.bwz-mega--two {
    grid-template-columns: repeat(2, minmax(212px, 1fr));
    gap: 2px 6px;
}

/* Invisible bridge across the gap between link and panel, so the pointer can travel
   down without the panel closing under it. */
.bwz-mega::before {
    content: "";
    position: absolute;
    inset: -10px 0 auto 0;
    height: 10px;
}

.bwz-nav__item:hover .bwz-mega,
.bwz-nav__item:focus-within .bwz-mega {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.bwz-mega__item {
    position: relative;
    padding: 10px 14px;
    border-radius: 9px;
    color: var(--bwz-base);
    transition: background 0.2s var(--bwz-ease-ui), color 0.2s var(--bwz-ease-ui);
}

/* A cyan rule that grows from the left edge, rather than a full tint block — it reads
   as a pointer to the item without repainting a third of the panel. */
.bwz-mega__item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 2px;
    background: var(--bwz-cyan);
    transform: translateY(-50%);
    transition: height 0.2s var(--bwz-ease-ui);
}

.bwz-mega__item:hover,
.bwz-mega__item:focus-visible {
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
}

.bwz-mega__item:hover::before,
.bwz-mega__item:focus-visible::before {
    height: 18px;
}

.bwz-mega__title {
    display: block;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.005em;
    white-space: nowrap;
}

.bwz-mega__desc {
    display: block;
    color: var(--bwz-faint);
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 3px;
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .bwz-mega { transition: opacity 0.01ms; transform: none; }
    .bwz-nav__item:hover .bwz-mega,
    .bwz-nav__item:focus-within .bwz-mega { transform: none; }
    .bwz-nav__caret { transition: none; }
}


.bwz-mobilebar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bwz-mobilebar__storeicon {
    display: none;
    width: 22px;
    height: 22px;
}

.bwz-burger {
    width: 46px;
    height: 46px;
    border: 1px solid #cfe3ec;
    background: var(--bwz-white);
    border-radius: 12px;
    color: var(--bwz-base);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mobile menu — full-screen white panel
   -------------------------------------------------------------------------- */

.bwz-mobilemenu {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--bwz-white);
    padding: 26px clamp(20px, 6vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity 0.3s ease, transform 0.35s var(--bwz-ease-ui);
    overflow-y: auto;
}

.bwz-mobilemenu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.bwz-mobilemenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bwz-mobilemenu__mark {
    display: block;
    width: 158px;
    height: 26.5px;
    overflow: hidden;
}

.bwz-mobilemenu__link {
    padding: 16px 0;
    font-family: var(--bwz-font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--bwz-base);
    border-bottom: 1px solid #e2ecf1;
}

.bwz-mobilemenu__group {
    padding: 16px 0;
    border-bottom: 1px solid #e2ecf1;
}

.bwz-mobilemenu__grouptitle {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--bwz-base);
}

.bwz-mobilemenu__sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 14px;
}

.bwz-mobilemenu__sub a {
    color: var(--bwz-body);
    font-size: 14.5px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.bwz-mobilemenu__cta {
    margin-top: auto;
    text-align: center;
    justify-content: center;
    padding: 18px;
    border-radius: 14px;
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   Footer — dark panel with dot grid and flow curve
   -------------------------------------------------------------------------- */

.bwz-footer {
    position: relative;
    overflow: hidden;
    background: var(--bwz-grad-dark-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: clamp(56px, 7vh, 84px) clamp(24px, 5vw, 80px) 34px;
}

.bwz-footer__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bwz-footer__grid {
    position: relative;
    max-width: var(--bwz-max);
    margin: 0 auto;
    display: grid;
    /* Brand column is wider than the link columns; auto-fit gave all five the same
       width and squeezed the description into a narrow ribbon. */
    grid-template-columns: 1.5fr repeat(3, 1fr) 1.25fr;
    gap: 44px 30px;
}

.bwz-footer__mark {
    display: block;
    width: 176px;
    height: 29.5px;
    overflow: hidden;
    margin-bottom: 14px;
    filter: brightness(0) invert(1);
}

.bwz-footer__label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7fc9e4;
    margin-bottom: 14px;
}

.bwz-footer__text {
    color: #9fbfd0;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0;
}

.bwz-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bwz-footer__links a {
    color: #cfe6f0;
    font-size: 14.5px;
}

.bwz-footer__links a:hover {
    color: var(--bwz-cyan);
}

.bwz-footer__bottom {
    position: relative;
    max-width: var(--bwz-max);
    margin: 25px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    font-size: 13px;
    color: #9fbfd0;
}

.bwz-footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.bwz-footer__bottom a {
    color: #9fbfd0;
}

.bwz-footer__bottom a:hover {
    color: var(--bwz-cyan);
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes bwzDash {
    to {
        stroke-dashoffset: -240;
    }
}

@keyframes bwzDraw {
    from {
        stroke-dashoffset: 420;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes bwzRise {
    from {
        transform: translateY(110%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes bwzFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bwzPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.09);
    }
}

@keyframes bwzSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes bwzBreathe {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.55;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 0.9;
    }
}

@keyframes bwzCore {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-5px);
    }
}

@keyframes bwzNodeRing {
    0% {
        box-shadow: 0 0 0 0 rgba(18, 187, 232, 0.55), 0 10px 28px rgba(18, 187, 232, 0.32);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(18, 187, 232, 0), 0 10px 28px rgba(18, 187, 232, 0.32);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(18, 187, 232, 0), 0 10px 28px rgba(18, 187, 232, 0.32);
    }
}

@keyframes bwzMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* --------------------------------------------------------------------------
   Entrance reveals — CSS scroll-driven, not a JS state machine.
   Browsers without scroll-timeline support show content immediately, which is
   the correct fallback. Do not reintroduce an IntersectionObserver here.
   -------------------------------------------------------------------------- */

@keyframes bwzReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-in] {
            animation: bwzReveal 0.7s var(--bwz-ease-standard) both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    [data-desktop] {
        display: none !important;
    }
}

@media (min-width: 1081px) {
    .bwz-mobilebar {
        display: none;
    }
}

@media (max-width: 900px) {
    /* Pins release, sticky releases, tracks stack, rail hides. Never trap scroll. */
    [data-pin] {
        height: auto !important;
    }

    [data-pinned] {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    [data-track] {
        transform: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    [data-track] > * {
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }

    [data-sticky] {
        position: static !important;
    }

    .bwz-rail {
        display: none !important;
    }

    .bwz-brand__mark {
        --lw: 158px !important;
    }
}

@media (max-width: 560px) {
    .bwz-brand__mark {
        --lw: 138px !important;
    }

    .bwz-brand__tagline {
        display: none;
    }
}

@media (max-height: 660px) and (min-width: 901px) {
    [data-pinned] {
        padding: 48px 0 16px !important;
    }

    [data-pinned] h2 {
        font-size: 26px !important;
    }

    [data-pinned] [data-lastrow] {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .bwz-rail {
        display: none;
    }
}

/* ==========================================================================
   Scene 1 — Hero
   ========================================================================== */

.bwz-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(125% 95% at 78% 18%, #eaf9fd 0%, #f7fafc 58%, #ffffff 100%);
}

.bwz-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(41, 68, 84, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 68, 84, 0.12) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
    opacity: 0.8;
}

.bwz-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.bwz-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--bwz-max);
    margin: 0 auto;
    padding: 116px clamp(24px, 5vw, 80px) 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(40px, 5vw, 70px);
    align-items: center;
}

/* Copy lifts 60px and fades as the hero exits. */
.bwz-hero__copy {
    transform: translateY(calc(var(--hp, 0) * -60px));
    opacity: calc(1 - var(--hp, 0) * 0.85);
}

.bwz-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(18, 187, 232, 0.32);
    border-radius: 999px;
    margin-bottom: 26px;
    color: var(--bwz-cyan-deep);
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity: 0;
    animation: bwzFade 0.8s 0.3s forwards;
}

.bwz-hero__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bwz-cyan);
    box-shadow: 0 0 10px var(--bwz-cyan);
    animation: bwzPulse 2.4s ease-in-out infinite;
}

.bwz-hero__line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
}

.bwz-hero__line > span {
    display: block;
    animation: bwzRise 0.95s var(--bwz-ease-standard) both;
}

.bwz-hero__accent {
    position: relative;
    white-space: nowrap;
    background-image: linear-gradient(100deg, var(--bwz-mint) 0%, var(--bwz-cyan) 45%, var(--bwz-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bwz-hero__underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 4px;
    background: var(--bwz-grad-flow);
    box-shadow: 0 0 26px rgba(18, 187, 232, 0.75);
    transform-origin: left;
    animation: bwzFade 0.6s 1.5s both;
}

.bwz-hero__body {
    max-width: 560px;
    margin: 0 0 36px;
    opacity: 0;
    animation: bwzFade 1s 1.1s forwards;
}

.bwz-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    opacity: 0;
    animation: bwzFade 1s 1.3s forwards;
}

/* ------------------------------------------------------------ hero visual */

.bwz-hero__visual {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    opacity: calc(1 - var(--hp, 0) * 0.55);
}

.bwz-hero__orbit {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    /* Nodes parallax against the cursor; core scales as the hero exits. */
    transform: translate(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 8px)) scale(calc(1 + var(--hp, 0) * 0.1));
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bwz-hero__orbit > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bwz-hero__spoke {
    stroke-width: 1;
    opacity: 0.28;
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), stroke-width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bwz-hero__spoke.is-active {
    stroke-width: 2.4;
    opacity: 0.95;
}

.bwz-hero__packets {
    animation: bwzDash 3.2s linear infinite;
}

.bwz-hero__flow {
    stroke: var(--bwz-mint);
    stroke-width: 1.6;
    opacity: 0.4;
    transition: opacity 0.6s ease, stroke-width 0.6s ease;
}

.bwz-hero__flow.is-active {
    stroke: #ffffff;
    stroke-width: 3;
    opacity: 0.95;
}

.bwz-hero__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36%;
    height: 36%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 224, 192, 0.45) 0%, rgba(18, 187, 232, 0.22) 45%, transparent 72%);
    pointer-events: none;
    animation: bwzBreathe 6s ease-in-out infinite;
}

.bwz-hero__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(18, 187, 232, 0.5);
    pointer-events: none;
    animation: bwzSpin 26s linear infinite;
}

.bwz-hero__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    height: 24%;
    transform: translate(-50%, -50%);
    border-radius: 22%;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border-cyan);
    box-shadow: 0 10px 34px rgba(18, 187, 232, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
    animation: bwzCore 7s ease-in-out infinite;
}

.bwz-hero__core img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bwz-hero__node {
    position: absolute;
    width: 22%;
    min-width: 76px;
    height: 34px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bwz-white);
    border: 1px solid #dce9ef;
    box-shadow: 0 2px 8px rgba(6, 21, 34, 0.05);
    color: #294454;
    font-family: var(--bwz-font-body);
    font-size: clamp(11.5px, 0.95vw, 13px);
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
        border-color 0.6s ease, box-shadow 0.6s ease;
}

.bwz-hero__node.is-active {
    border-color: var(--bwz-cyan);
    box-shadow: 0 10px 28px rgba(18, 187, 232, 0.32);
    animation: bwzNodeRing 2.2s ease-out infinite;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.07);
}

.bwz-hero__caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 108px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border-cyan);
    box-shadow: 0 12px 30px rgba(6, 21, 34, 0.08);
}

.bwz-hero__caption > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bwz-hero__captionname {
    font-family: var(--bwz-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--bwz-base);
    line-height: 1.25;
}

.bwz-hero__captionbody {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--bwz-faint);
}

.bwz-hero__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* 44px minimum touch target, an 8px pill inside it. */
.bwz-hero__dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.bwz-hero__dot > span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c7dae3;
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.5s ease;
}

.bwz-hero__dot.is-active > span {
    width: 26px;
    background: var(--bwz-cyan);
}

.bwz-hero__mobilecard {
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border-cyan);
    box-shadow: 0 18px 40px rgba(6, 21, 34, 0.08);
}

.bwz-hero__mobilehead {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bwz-hero__mobilehead img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: 0 0 auto;
}

.bwz-hero__mobilehead > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bwz-hero__mobilename {
    font-family: var(--bwz-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--bwz-base);
}

.bwz-hero__mobilebody {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bwz-body);
}

.bwz-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #5b7e93;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: calc(1 - var(--hp, 0) * 2);
}

.bwz-hero__scroll > span {
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, var(--bwz-cyan), transparent);
}

@media (max-width: 760px) {
    .bwz-hero__orbit {
        display: none;
    }

    .bwz-hero__mobilecard {
        display: flex;
    }
}

/* ==========================================================================
   Scene 2 — The Business Challenge
   ========================================================================== */

.bwz-challenge {
    position: relative;
    background: var(--bwz-soft-cyan);
    padding: var(--bwz-section-pad);
}

.bwz-challenge__head {
    max-width: 780px;
    margin-bottom: 60px;
}

.bwz-challenge__net {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bwz-challenge__frame {
    position: absolute;
    inset: -14px;
    border-radius: 22px;
    border: 1px solid rgba(18, 187, 232, calc(var(--p2, 1) * 0.35));
    background: rgba(18, 187, 232, calc(var(--p2, 1) * 0.04));
    pointer-events: none;
}

/* Cards scatter up to 30px and 6deg, then settle as --p2 goes 0→1. */
.bwz-challenge__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 20px;
    border-radius: 14px;
    background: var(--bwz-white);
    border: 1px solid #cfe3ec;
    box-shadow: 0 6px 20px rgba(6, 21, 34, 0.04);
    --bwz-offset-x: 20px;
    --bwz-offset-y: -26px;
    --bwz-tilt: -4deg;
    transform: translate(
            calc((1 - var(--p2, 1)) * var(--bwz-offset-x)),
            calc((1 - var(--p2, 1)) * var(--bwz-offset-y))
        )
        rotate(calc((1 - var(--p2, 1)) * var(--bwz-tilt)));
    transition: transform 0.1s linear, border-color 0.3s var(--bwz-ease-ui), box-shadow 0.3s var(--bwz-ease-ui);
}

.bwz-challenge__card:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.bwz-challenge__card[data-col="1"],
.bwz-challenge__card[data-col="3"] {
    --bwz-offset-x: -20px;
    --bwz-tilt: 4deg;
}

.bwz-challenge__card[data-row="1"] {
    --bwz-offset-y: 26px;
}

.bwz-challenge__figure {
    display: block;
    height: 84px;
    border-radius: 10px;
    background: linear-gradient(160deg, #ffffff 0%, #f2fafd 100%);
    border: 1px solid #dcedf4;
    overflow: hidden;
}

.bwz-diagram {
    width: 100%;
    height: 100%;
    display: block;
}

.bwz-challenge__title {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--bwz-base);
}

.bwz-challenge__sub {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--bwz-faint);
}

.bwz-challenge__drop {
    position: absolute;
    left: 50%;
    bottom: -17px;
    width: 2px;
    height: 17px;
    margin-left: -1px;
    background: linear-gradient(180deg, var(--bwz-cyan), rgba(18, 187, 232, 0.15));
    opacity: var(--p2, 1);
    transition: opacity 0.4s ease;
}

.bwz-challenge__joint {
    position: absolute;
    left: 50%;
    bottom: -21px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--bwz-white);
    border: 2px solid var(--bwz-cyan);
    opacity: var(--p2, 1);
    transition: opacity 0.4s ease;
}

.bwz-challenge__card[data-row="1"] .bwz-challenge__drop {
    bottom: auto;
    top: -17px;
    background: linear-gradient(0deg, var(--bwz-cyan), rgba(18, 187, 232, 0.15));
}

.bwz-challenge__card[data-row="1"] .bwz-challenge__joint {
    bottom: auto;
    top: -21px;
}

/* Connector spine — sits inside the card grid, spanning all four columns. */
.bwz-spine {
    position: relative;
    grid-column: 1 / -1;
    height: 62px;
    margin: 4px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* One drop line per column, split above and below the flow line. */
.bwz-spine__drop {
    position: relative;
    justify-self: center;
    width: 2px;
    align-self: stretch;
}

.bwz-spine__drop::before,
.bwz-spine__drop::after {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    opacity: var(--p2, 1);
    transition: opacity 0.5s ease;
}

.bwz-spine__drop::before {
    top: 0;
    bottom: 50%;
    background: linear-gradient(0deg, var(--bwz-cyan), rgba(18, 187, 232, 0.2));
}

.bwz-spine__drop::after {
    top: 50%;
    bottom: 0;
    background: linear-gradient(180deg, var(--bwz-cyan), rgba(18, 187, 232, 0.2));
}

.bwz-spine__track,
.bwz-spine__fill,
.bwz-spine__dash {
    position: absolute;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    left: calc((100% - 48px) / 8);
}

.bwz-spine__track {
    right: calc((100% - 48px) / 8);
    background: #ddebf1;
}

/* Fills as the cards settle. */
.bwz-spine__fill {
    width: calc(var(--p2, 1) * (100% - (100% - 48px) / 4));
    background: var(--bwz-grad-flow);
    box-shadow: 0 0 16px rgba(18, 187, 232, 0.5);
}

.bwz-spine__dash {
    right: calc((100% - 48px) / 8);
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 6px, transparent 6px 26px);
    opacity: var(--p2, 1);
    animation: bwzDash 2.4s linear infinite;
}

/* 44px circle; overflow hidden and object-fit keep the square logo inside it. */
.bwz-spine__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: var(--bwz-white);
    border: 2px solid var(--bwz-cyan);
    box-shadow: 0 0 0 calc(var(--p2, 1) * 8px) rgba(18, 187, 232, 0.12);
    overflow: hidden;
    transition: box-shadow 0.5s ease;
}

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

.bwz-challenge__close {
    margin: 56px 0 0;
    max-width: 620px;
    font-family: var(--bwz-font-display);
    font-size: clamp(19px, 2vw, 27px);
    line-height: 1.34;
    color: var(--bwz-base);
    opacity: var(--p2, 1);
    transition: opacity 0.5s ease;
}

.bwz-challenge__close span {
    background-image: var(--bwz-grad-flow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.bwz-divider {
    position: relative;
    background: var(--bwz-soft-cyan);
    line-height: 0;
}

.bwz-divider svg {
    display: block;
    width: 100%;
    height: clamp(56px, 7vw, 110px);
}

@media (max-width: 900px) {
    .bwz-challenge__net {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Offsets halve so nothing overflows horizontally. */
    .bwz-challenge__card {
        --bwz-offset-x: 10px;
        --bwz-offset-y: -13px;
    }

    .bwz-challenge__card[data-col="1"],
    .bwz-challenge__card[data-col="3"] {
        --bwz-offset-x: -10px;
    }

    .bwz-challenge__card[data-row="1"] {
        --bwz-offset-y: 13px;
    }

    /* Below 900px the grid is two columns, so the four-column spine and the
       drop stalks no longer line up with anything — the design hides them. */
    .bwz-challenge__drop,
    .bwz-challenge__joint,
    .bwz-spine {
        display: none;
    }
}

/* ==========================================================================
   Scene 10 — Final CTA
   ========================================================================== */

.bwz-cta {
    position: relative;
    background: var(--bwz-grad-section-light);
    padding: clamp(100px, 13vh, 170px) clamp(24px, 5vw, 80px) clamp(70px, 8vh, 100px);
    overflow: hidden;
}

.bwz-cta__paths {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    opacity: 0.55;
}

.bwz-cta__dash {
    animation: bwzDash 4s linear infinite;
}

.bwz-cta__inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.bwz-cta__title {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(30px, 4.2vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--bwz-base);
    margin: 0 0 22px;
    text-wrap: pretty;
}

.bwz-cta__body {
    margin: 0 auto 38px;
    max-width: 620px;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--bwz-body);
}

.bwz-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 26px;
}

.bwz-cta__actions .bwz-btn {
    padding: 18px 32px;
    font-size: 16px;
}

.bwz-cta__email {
    color: var(--bwz-cyan-deep);
    font-size: 15px;
}

/* ==========================================================================
   Scene 3 — Solutions Flow
   ========================================================================== */

.bwz-solutions {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-solutions__grid {
    max-width: var(--bwz-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.bwz-solutions__aside {
    position: sticky;
    top: 130px;
}

.bwz-solutions__lead {
    font-size: 16px;
    line-height: 1.62;
    color: #294454;
    max-width: 420px;
    margin: 0 0 28px;
}

.bwz-btn--dark {
    background: var(--bwz-grad-dark-deep);
    color: #fff;
    padding: 15px 26px;
    font-size: 15px;
    transition: background 0.3s ease, transform 0.24s var(--bwz-ease-ui), box-shadow 0.24s var(--bwz-ease-ui);
}

.bwz-btn--dark:hover {
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
}

.bwz-solutions__stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bwz-chapter {
    padding: 30px;
    border-radius: 18px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.bwz-chapter:hover {
    box-shadow: 0 20px 50px rgba(6, 21, 34, 0.09);
    border-color: var(--bwz-cyan);
}

.bwz-chapter__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.bwz-chapter__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--bwz-border-cyan);
    display: grid;
    place-items: center;
}

.bwz-chapter__glyph {
    width: 24px;
    height: 24px;
}

.bwz-chapter__num {
    font-family: var(--bwz-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--bwz-cyan-deep);
}

.bwz-chapter__title {
    font-family: var(--bwz-font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0;
}

.bwz-chapter__body {
    margin: 0 0 20px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #294454;
    max-width: 560px;
}

/* Shared chrome for the six dashboard mockups. */
.bwz-mockup {
    height: 216px;
    border-radius: 12px;
    background: var(--bwz-white);
    border: 1px solid #dce9ef;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .bwz-solutions__aside {
        position: static;
    }
}

/* The ISP/network chapter runs on the dark surface. */
.bwz-mockup--dark {
    background: var(--bwz-grad-dark-deep);
    border-color: var(--bwz-surface);
}

/* ==========================================================================
   Scene 4 — Product Universe (pinned horizontal journey)
   ========================================================================== */

.bwz-products {
    position: relative;
    height: 300vh;
    background: var(--bwz-grad-section-dark);
}

.bwz-products__pinned {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 84px 0 28px;
}

.bwz-products__head {
    flex: 0 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
    max-width: var(--bwz-max);
    margin: 0 auto 16px;
    width: 100%;
}

.bwz-products__eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6bd8f0;
    margin-bottom: 14px;
}

.bwz-products__title {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(26px, 2.9vw, 38px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--bwz-white);
    margin: 0;
}

/* 300% wide, translating -66.6667% across 200vh of travel. */
.bwz-products__track {
    flex: 1;
    min-height: 0;
    display: flex;
    width: 300%;
    transform: translateX(calc(var(--p4, 0) * -66.6667%));
    transition: transform 0.12s linear;
}

.bwz-panel {
    width: 33.3333%;
    min-height: 0;
    padding: 0 clamp(24px, 5vw, 80px);
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: clamp(20px, 3vw, 44px);
    align-items: stretch;
}

.bwz-panel a[href]:hover {
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
}

.bwz-products__progress {
    margin: 26px auto 0;
    width: min(320px, 60vw);
    height: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.bwz-products__progress span {
    display: block;
    width: calc(33.3333% + var(--p4, 0) * 66.6667%);
    height: 100%;
    background: var(--bwz-grad-flow);
}

@media (max-width: 900px) {
    .bwz-products__pinned {
        padding: clamp(70px, 9vh, 110px) 0 40px;
    }

    .bwz-products__track {
        gap: 40px;
    }

    .bwz-panel {
        align-items: start;
    }

    .bwz-products__progress {
        display: none;
    }
}

@keyframes bwzBlink {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

@keyframes bwzGrow {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.62);
    }
}

@keyframes bwzScan {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(400%);
    }
}

@keyframes bwzFlick {
    0%,
    44%,
    52%,
    100% {
        opacity: 1;
    }
    47%,
    49% {
        opacity: 0.18;
    }
}

@keyframes bwzSlide {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);
    }
}

@keyframes bwzWobble {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2.5px) rotate(-1.6deg);
    }
}

@keyframes bwzOrbit {
    0%,
    100% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(4px);
    }
}

/* ==========================================================================
   Scene 5 — Full portfolio (15 products, filterable)
   ========================================================================== */

.bwz-portfolio {
    background: var(--bwz-page);
    padding: var(--bwz-section-pad);
}

.bwz-portfolio__lead {
    margin: 0 0 44px;
    max-width: 640px;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--bwz-body);
}

.bwz-portfolio__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
}

/* 44px minimum touch target. */
.bwz-pill {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid #d7e6ec;
    background: var(--bwz-white);
    color: #294454;
    font-family: var(--bwz-font-body);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.bwz-pill span {
    margin-left: 8px;
    opacity: 0.7;
    font-size: 12.5px;
}

.bwz-pill:hover {
    border-color: var(--bwz-cyan);
}

.bwz-pill.is-active {
    background: var(--bwz-grad-dark-deep);
    border-color: transparent;
    color: var(--bwz-on-cyan);
}

.bwz-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 14px;
}

.bwz-product {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 14px;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-product:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.bwz-product__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bwz-product__num {
    font-family: var(--bwz-font-display);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bwz-faint);
}

.bwz-product__name {
    font-family: var(--bwz-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0;
}

.bwz-product__body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bwz-body);
}

/* Product family colours — background / border / text. */
.bwz-tag {
    margin-left: auto;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    border: 1px solid;
}

.bwz-tag--isp {
    background: #eaf9fd;
    border-color: #bfe6f4;
    color: #0a6e8c;
}

.bwz-tag--business {
    background: #f1fbf8;
    border-color: #c4ede2;
    color: #0b7a69;
}

.bwz-tag--infrastructure {
    background: #eff5fe;
    border-color: #c9dcfa;
    color: #2b5fb8;
}

.bwz-tag--security {
    background: #f7f9fa;
    border-color: #dde7ec;
    color: #3f5a68;
}

.bwz-tag--power {
    background: #fff9ef;
    border-color: #f2dfbe;
    color: #8a5a16;
}

.bwz-tag--ai-iot {
    background: #f4f2fd;
    border-color: #dad4f5;
    color: #5445a8;
}

/* ==========================================================================
   Scene 6 — How Bluwebz Works
   ========================================================================== */

.bwz-process {
    background: var(--bwz-soft-cyan);
    padding: var(--bwz-section-pad);
}

.bwz-process__rail {
    position: relative;
    margin-bottom: 34px;
    height: 2px;
    background: var(--bwz-border-cyan);
}

.bwz-process__rail svg {
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 12px;
    width: 100%;
    overflow: visible;
}

.bwz-process__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p5, 1) * 100%);
    background: var(--bwz-grad-flow);
    box-shadow: 0 0 14px rgba(18, 187, 232, 0.7);
}

.bwz-process__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}

.bwz-step__num {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 13px;
    color: var(--bwz-cyan-deep);
    margin-bottom: 10px;
}

.bwz-step__title {
    font-family: var(--bwz-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 10px;
}

.bwz-step__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #294454;
}

.bwz-step__panel {
    margin-top: 16px;
    border-radius: 12px;
    background: var(--bwz-white);
    border: 1px solid #dce9ef;
    overflow: hidden;
}

/* ==========================================================================
   Scene 7 — Industries
   ========================================================================== */

.bwz-industries {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-industries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 34px;
    align-items: start;
}

.bwz-industries__chips {
    position: relative;
}

.bwz-industries__constellation {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    opacity: 0.5;
    pointer-events: none;
}

.bwz-industries__list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.bwz-chip {
    padding: 11px 17px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--bwz-border);
    background: var(--bwz-neutral);
    color: #294454;
    font-family: var(--bwz-font-body);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.bwz-chip:hover {
    border-color: var(--bwz-cyan);
}

.bwz-chip.is-active {
    background: var(--bwz-grad-dark-deep);
    border-color: transparent;
    color: var(--bwz-white);
}

.bwz-industry {
    padding: clamp(28px, 3.2vw, 44px);
    border-radius: 18px;
    background: var(--bwz-grad-primary-panel);
    min-height: 300px;
}

.bwz-industry__name {
    font-family: var(--bwz-font-display);
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 600;
    color: var(--bwz-on-cyan);
    margin: 0 0 22px;
}

.bwz-industry__label {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bwz-soft-cyan);
    margin-bottom: 8px;
}

.bwz-industry__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: #f2fbfe;
}

.bwz-industry__text--strong {
    color: var(--bwz-on-cyan);
    font-weight: 500;
}

.bwz-industry__stack {
    width: 100%;
    height: auto;
}

.bwz-industry__flow {
    animation: bwzDash 3s linear infinite;
}

/* ==========================================================================
   Scene 8 — Intelligence, connectivity and energy
   ========================================================================== */

.bwz-triad {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
    overflow: hidden;
}

.bwz-triad__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

/* The side cards slide in ±60px and the centre card 40px until all three align. */
.bwz-triad__card {
    padding: 26px;
    border-radius: 18px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
    transition: transform 0.15s linear, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-triad__card:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.bwz-triad__card[data-slot="0"] {
    transform: translateX(calc((1 - var(--p7, 1)) * -60px));
}

.bwz-triad__card[data-slot="1"] {
    transform: translateY(calc((1 - var(--p7, 1)) * 40px));
}

.bwz-triad__card[data-slot="2"] {
    transform: translateX(calc((1 - var(--p7, 1)) * 60px));
}

.bwz-triad__diagram {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
}

.bwz-triad__title {
    font-family: var(--bwz-font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 10px;
}

.bwz-triad__body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #294454;
}

.bwz-triad__close {
    margin: 44px 0 0;
    max-width: 720px;
    font-family: var(--bwz-font-display);
    font-size: clamp(18px, 1.9vw, 25px);
    line-height: 1.36;
    color: var(--bwz-base);
}

.bwz-triad__close span {
    background-image: var(--bwz-grad-flow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* ==========================================================================
   Scene 9 — Experience & Trust
   ========================================================================== */

.bwz-experience {
    background: var(--bwz-neutral);
    padding: var(--bwz-section-pad);
}

.bwz-experience__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 60px;
}

.bwz-trust {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--bwz-border);
    border-radius: 14px;
}

.bwz-trust__title {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--bwz-base);
    margin-bottom: 8px;
}

.bwz-trust__body {
    font-size: 14.5px;
    color: #294454;
    line-height: 1.55;
}

.bwz-experience__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #294454;
    margin-bottom: 22px;
}

.bwz-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.bwz-marquee__lane {
    display: flex;
    width: max-content;
    animation: bwzMarquee 46s linear infinite;
}

.bwz-marquee:hover .bwz-marquee__lane {
    animation-play-state: paused;
}

.bwz-marquee__set {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    padding-right: 12px;
}

.bwz-client {
    flex: 0 0 176px;
    width: 176px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--bwz-border);
    border-radius: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-client:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 12px 28px rgba(6, 21, 34, 0.07);
}

/* Deliberately empty until a logo file and written permission exist. */
.bwz-client__slot {
    display: block;
    width: 100%;
    height: 62px;
    border-radius: 8px;
    background: repeating-linear-gradient(135deg, #f5f8fa, #f5f8fa 8px, #eef4f7 8px, #eef4f7 16px);
    border: 1px dashed #d7e6ec;
}

.bwz-client__name {
    display: block;
    text-align: center;
    font-family: var(--bwz-font-display);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bwz-body);
}

@media (prefers-reduced-motion: reduce) {
    .bwz-marquee__lane {
        animation: none;
    }
}

/* ==========================================================================
   Inner pages — shared chrome
   ========================================================================== */

.bwz-pagehero {
    position: relative;
    background: radial-gradient(120% 90% at 78% 10%, #eaf9fd 0%, #f7fafc 60%, #ffffff 100%);
    padding: clamp(150px, 18vh, 220px) clamp(24px, 5vw, 80px) clamp(60px, 8vh, 90px);
    overflow: hidden;
}

.bwz-pagehero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(41, 68, 84, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 68, 84, 0.1) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(70% 70% at 40% 40%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000 0%, transparent 80%);
    opacity: 0.7;
}

.bwz-pagehero__inner {
    position: relative;
}

.bwz-pagehero__title {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--bwz-base);
    margin: 18px 0 0;
    max-width: 860px;
    text-wrap: pretty;
}

.bwz-pagehero__intro {
    margin: 22px 0 0;
    max-width: 640px;
}

.bwz-pagehero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.bwz-listing {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-listing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

/* Solutions listing */
.bwz-capability {
    padding: 30px;
    border-radius: 18px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-capability:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 20px 50px rgba(6, 21, 34, 0.09);
}

.bwz-capability__family {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
    margin-bottom: 12px;
}

.bwz-capability__title {
    font-family: var(--bwz-font-display);
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 12px;
}

.bwz-capability__title a {
    color: inherit;
}

.bwz-capability__title a:hover {
    color: var(--bwz-cyan-deep);
}

.bwz-capability__body,
.bwz-capability__use {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: #294454;
}

.bwz-capability__use {
    color: var(--bwz-faint);
    font-size: 14px;
}

.bwz-capability__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bwz-capability__link {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--bwz-border-cyan);
    background: #fff;
    color: var(--bwz-cyan-deep);
    font-size: 12.5px;
    transition: background 0.24s var(--bwz-ease-ui), border-color 0.24s var(--bwz-ease-ui);
}

.bwz-capability__link:hover {
    background: var(--bwz-soft-cyan);
    border-color: var(--bwz-cyan);
}

.bwz-capability__link.is-plain {
    color: var(--bwz-faint);
    border-color: var(--bwz-border);
    background: transparent;
}

/* Product listing */
.bwz-productcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border-radius: 18px;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-productcard:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 20px 50px rgba(6, 21, 34, 0.09);
}

.bwz-productcard__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bwz-productcard__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bwz-soft-cyan);
    border: 1px solid var(--bwz-border-cyan);
    display: grid;
    place-items: center;
}

.bwz-productcard__icon svg {
    width: 22px;
    height: 22px;
}

.bwz-productcard__family {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-productcard__name {
    font-family: var(--bwz-font-display);
    font-size: 23px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0;
}

.bwz-productcard__name a {
    color: inherit;
}

.bwz-productcard__name a:hover {
    color: var(--bwz-cyan-deep);
}

.bwz-productcard__sub {
    margin: 0;
    font-size: 14.5px;
    color: var(--bwz-cyan-deep);
}

.bwz-productcard__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #294454;
}

.bwz-arrowlink {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--bwz-cyan-deep);
}

.bwz-arrowlink span {
    transition: transform 0.24s var(--bwz-ease-ui);
}

.bwz-arrowlink:hover span {
    transform: translateX(4px);
}

/* Stats strip */
/* Tucks 34px under the page hero. The hero is positioned, so this needs its own
   stacking position — otherwise the hero's background paints over the stat labels. */
.bwz-stats {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 0 clamp(24px, 5vw, 80px);
    margin-top: -34px;
}

.bwz-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 26px;
    border-radius: 18px;
    background: var(--bwz-grad-dark-deep);
    box-shadow: 0 20px 50px rgba(6, 21, 34, 0.09);
}

.bwz-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bwz-stat__key {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7fc9e4;
}

.bwz-stat__value {
    font-family: var(--bwz-font-display);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

/* Before / after */
.bwz-compare {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-compare__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}

.bwz-compare__side {
    padding: 30px;
    border-radius: 18px;
}

.bwz-compare__side--before {
    border: 1px dashed #c4d6de;
    background: var(--bwz-neutral);
}

.bwz-compare__side--after {
    border: 1px solid var(--bwz-border-cyan);
    background: var(--bwz-soft-cyan);
}

.bwz-compare__title {
    font-family: var(--bwz-font-display);
    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 600;
    color: var(--bwz-base);
    margin: 12px 0;
}

.bwz-compare__lead {
    margin: 12px 0 16px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #294454;
}

.bwz-compare__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14.5px;
    color: var(--bwz-body);
}

.bwz-compare__arrow svg {
    width: 60px;
    height: 24px;
}

/* Modules / capabilities */
.bwz-modules {
    background: var(--bwz-page);
    padding: var(--bwz-section-pad);
}

.bwz-modules__grid {
    display: grid;
    /* Fixed aside, flexible list — auto-fit gave the six capability cards the same
       width as the short intro column and left the list in one thin stack. */
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
}

.bwz-modules__aside {
    position: sticky;
    top: 130px;
}

.bwz-modules__note {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bwz-body);
}

.bwz-modules__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.bwz-techchip {
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bwz-border);
    font-size: 12.5px;
    color: #294454;
}

.bwz-modules__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bwz-modules__stack {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--bwz-border);
}

.bwz-modules__stacklabel {
    display: block;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bwz-muted);
}

.bwz-module {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--bwz-border);
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui),
                transform .3s var(--bwz-ease-ui);
}

/* Numbered so six items read as a set rather than six loose paragraphs. */
.bwz-module__num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--bwz-soft-cyan);
    font-family: var(--bwz-font-display);
    font-weight: 700;
    font-size: 11.5px;
    color: var(--bwz-cyan-deep);
    transition: background .3s var(--bwz-ease-ui), color .3s var(--bwz-ease-ui);
}

.bwz-module:hover .bwz-module__num {
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
}

.bwz-module:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
    transform: translateY(-3px);
}

.bwz-module__title {
    font-family: var(--bwz-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 8px;
}

.bwz-module__body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #294454;
}

/* Implementation rail */
.bwz-implementation {
    background: var(--bwz-soft-cyan);
    padding: var(--bwz-section-pad);
}

.bwz-implementation__note {
    margin: 0;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #294454;
}

/* Product flow rail */
.bwz-flow {
    background: var(--bwz-white);
    padding: clamp(60px, 8vh, 90px) clamp(24px, 5vw, 80px);
}

.bwz-flow__rail {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 26px;
    flex-wrap: wrap;
}

.bwz-flow__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.bwz-flow__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--bwz-cyan);
}

.bwz-flow__dot.is-end {
    background: var(--bwz-mint);
    border-color: var(--bwz-mint);
}

.bwz-flow__label {
    font-size: 13.5px;
    color: #294454;
    white-space: nowrap;
}

.bwz-flow__link {
    flex: 1 1 40px;
    height: 2.5px;
    min-width: 30px;
    margin-bottom: 26px;
    background: repeating-linear-gradient(90deg, var(--bwz-cyan) 0 9px, transparent 9px 20px);
}

/* Audience / related */
.bwz-audience {
    background: var(--bwz-page);
    padding: var(--bwz-section-pad);
}

.bwz-audience__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
}

.bwz-audience__list {
    margin: 18px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: #294454;
}

.bwz-related {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.bwz-related__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--bwz-border);
}

.bwz-related__name {
    font-family: var(--bwz-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--bwz-base);
}

.bwz-related__desc {
    font-size: 14px;
    color: var(--bwz-body);
}

@media (max-width: 900px) {
    .bwz-compare__grid {
        grid-template-columns: 1fr;
    }

    .bwz-compare__arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .bwz-modules__aside {
        position: static;
    }

    .bwz-stats {
        margin-top: 0;
        padding-top: 30px;
    }
}

/* ==========================================================================
   Inner pages — Contact, About, FAQ, Case study, Hosting, Domains
   ========================================================================== */

.bwz-pagehero--tight {
    padding-bottom: clamp(40px, 5vh, 60px);
}

/* Contact ------------------------------------------------------------------ */

.bwz-supportmap {
    background: var(--bwz-page);
    padding: 0 clamp(24px, 5vw, 80px) clamp(60px, 8vh, 90px);
}

.bwz-supportmap__panel {
    border-radius: 20px;
    background: #0b2235;
    border: 1px solid rgba(18, 187, 232, 0.2);
    padding: clamp(20px, 3vw, 34px);
}

.bwz-supportmap__panel svg {
    width: 100%;
    height: auto;
}

.bwz-supportmap__label {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9fbfd0;
    margin-bottom: 18px;
}

.bwz-supportmap__pulse {
    animation: bwzPulse 3s ease-in-out infinite;
    transform-origin: 450px 170px;
}

.bwz-contact {
    background: var(--bwz-white);
    padding: clamp(70px, 9vh, 110px) clamp(24px, 5vw, 80px);
}

.bwz-contact__grid {
    display: grid;
    /* Form wider than the rail, and first in the DOM — the conversion action leads
       instead of sitting behind a column of addresses. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 60px);
    align-items: start;
}

.bwz-offices {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.bwz-office {
    padding: 22px;
    border-radius: 14px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
}

.bwz-office__name {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--bwz-base);
    margin-bottom: 8px;
}

.bwz-office__address {
    font-size: 15px;
    line-height: 1.6;
    color: #294454;
}

.bwz-office__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15.5px;
}

/* Form: 48px minimum field height, validation server-side. */
.bwz-form {
    padding: clamp(22px, 3vw, 34px);
    border-radius: 18px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bwz-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    color: #294454;
}

.bwz-field input[type="text"],
.bwz-field input[type="email"],
.bwz-field input[type="tel"],
.bwz-field select,
.bwz-field textarea {
    min-height: 48px;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid #d7e0e4;
    background: #fff;
    font-family: var(--bwz-font-body);
    font-size: 15.5px;
    color: var(--bwz-base);
}

.bwz-field textarea {
    resize: vertical;
}

.bwz-field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.bwz-field--check input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.bwz-form__submit {
    min-height: 52px;
    justify-content: center;
    font-size: 16px;
}

.bwz-form__success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bwz-soft-cyan);
    border: 1px solid var(--bwz-border-cyan);
    font-size: 15px;
    color: var(--bwz-base);
}

.bwz-form__success svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

/* The connected check draws over 600ms. */
.bwz-form__check {
    stroke-dasharray: 300;
    animation: bwzDraw 0.6s ease forwards;
}

.bwz-form__errors {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff5f5;
    border: 1px solid #f3d0d0;
    color: #8a2c2c;
    font-size: 14px;
}

.bwz-form__errors ul {
    margin: 0;
    padding-left: 18px;
}

/* About -------------------------------------------------------------------- */

.bwz-vision {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-vision__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.bwz-vision__card {
    padding: clamp(28px, 3.4vw, 46px);
    border-radius: 18px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
}

.bwz-vision__card--primary {
    background: var(--bwz-grad-primary-panel);
    border-color: transparent;
}

.bwz-vision__text {
    margin: 16px 0 0;
    font-size: 16.5px;
    line-height: 1.62;
    color: #294454;
}

.bwz-vision__card--primary .bwz-vision__text {
    color: #f2fbfe;
}

.bwz-timeline {
    background: var(--bwz-page);
    padding: var(--bwz-section-pad);
}

.bwz-timeline__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-left: 34px;
}

.bwz-timeline__list::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--bwz-border-cyan);
}

.bwz-timeline__stop {
    position: relative;
}

.bwz-timeline__marker {
    position: absolute;
    left: -34px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--bwz-cyan);
}

.bwz-timeline__year {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
    margin-bottom: 8px;
}

.bwz-timeline__title {
    font-family: var(--bwz-font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 8px;
}

.bwz-timeline__body {
    margin: 0;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #294454;
}

.bwz-values {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.bwz-value {
    padding: 24px;
    border-radius: 14px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
}

.bwz-value__title {
    display: block;
    font-family: var(--bwz-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--bwz-base);
    margin-bottom: 8px;
}

.bwz-value__body {
    font-size: 14.5px;
    line-height: 1.55;
    color: #294454;
}

/* FAQ ---------------------------------------------------------------------- */

.bwz-faq {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-faq__group + .bwz-faq__group {
    margin-top: 46px;
}

.bwz-faq__grouptitle {
    font-family: var(--bwz-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 16px;
}

.bwz-faq__item {
    border: 1px solid var(--bwz-border);
    border-radius: 14px;
    background: var(--bwz-neutral);
    margin-bottom: 10px;
    overflow: hidden;
}

.bwz-faq__item[open] {
    border-color: var(--bwz-border-cyan);
    background: var(--bwz-soft-cyan);
}

.bwz-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    min-height: 44px;
    cursor: pointer;
    font-family: var(--bwz-font-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--bwz-base);
    list-style: none;
}

.bwz-faq__question::-webkit-details-marker {
    display: none;
}

.bwz-faq__sign {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.bwz-faq__sign::before,
.bwz-faq__sign::after {
    content: "";
    position: absolute;
    background: var(--bwz-cyan);
    transition: transform 0.24s var(--bwz-ease-ui);
}

.bwz-faq__sign::before {
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
}

.bwz-faq__sign::after {
    left: 6px;
    top: 0;
    width: 2px;
    height: 14px;
}

.bwz-faq__item[open] .bwz-faq__sign::after {
    transform: scaleY(0);
}

.bwz-faq__answer {
    padding: 0 22px 20px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #294454;
}

/* Case study --------------------------------------------------------------- */

.bwz-case {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-case__list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.bwz-case__block {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 26px;
    border-radius: 16px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
}

.bwz-case__num {
    font-family: var(--bwz-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--bwz-cyan-deep);
}

.bwz-case__title {
    font-family: var(--bwz-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0 0 8px;
}

.bwz-case__brief {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bwz-faint);
}

.bwz-case__slot {
    padding: 22px;
    border-radius: 12px;
    border: 1px dashed #c4d6de;
    background: #fff;
    color: var(--bwz-muted);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

/* Hosting and Domains ------------------------------------------------------- */

.bwz-domainsearch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    max-width: 620px;
}

.bwz-domainsearch input {
    flex: 1 1 260px;
    min-height: 52px;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1px solid #d7e0e4;
    background: #fff;
    font-family: var(--bwz-font-body);
    font-size: 15.5px;
    color: var(--bwz-base);
}

.bwz-plans {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.bwz-plan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px;
    border-radius: 18px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
}

.bwz-plan--featured {
    background: var(--bwz-grad-dark-deep);
    border-color: transparent;
    color: #fff;
}

.bwz-plan__tag {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-plan--featured .bwz-plan__tag {
    color: #7fc9e4;
}

.bwz-plan__name {
    font-family: var(--bwz-font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--bwz-base);
    margin: 0;
}

.bwz-plan--featured .bwz-plan__name {
    color: #fff;
}

.bwz-plan__body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #294454;
}

.bwz-plan--featured .bwz-plan__body {
    color: #cfe6f0;
}

.bwz-plan__offer {
    font-size: 13.5px;
    color: var(--bwz-cyan-deep);
}

.bwz-plan--featured .bwz-plan__offer {
    color: var(--bwz-mint);
}

.bwz-plan__price {
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--bwz-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--bwz-base);
}

.bwz-plan--featured .bwz-plan__price {
    color: #fff;
}

.bwz-plan .bwz-btn {
    justify-content: center;
}

.bwz-hostfeatures,
.bwz-transfer {
    background: var(--bwz-page);
    padding: var(--bwz-section-pad);
}

.bwz-tlds {
    background: var(--bwz-white);
    padding: var(--bwz-section-pad);
}

.bwz-tlds__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.bwz-tld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border-radius: 14px;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-tld:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.bwz-tld__ext {
    font-family: var(--bwz-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--bwz-base);
}

.bwz-tld__note {
    font-size: 14px;
    color: #294454;
}

.bwz-tld__price {
    font-size: 13px;
    color: var(--bwz-cyan-deep);
}

@media (max-width: 900px) {
    .bwz-case__block {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ==========================================================================
   Blog — archive and post
   ========================================================================== */

.bwz-posts {
    background: var(--bwz-white);
    padding: clamp(70px, 9vh, 110px) clamp(24px, 5vw, 80px);
}

.bwz-postgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.bwz-postcard {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bwz-neutral);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-postcard:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.bwz-postcard__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

/* Labelled placeholder, in the same language as the other awaiting-content slots. */
.bwz-postcard__slot {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #e6edf0 0 12px, #f1f5f7 12px 24px);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #7c8f9a;
    text-align: center;
    padding: 10px;
}

.bwz-postcard__body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bwz-postcard__cat {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-postcard__title {
    font-family: var(--bwz-font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.bwz-postcard__title a {
    color: var(--bwz-base);
}

.bwz-postcard__title a:hover {
    color: var(--bwz-cyan-deep);
}

.bwz-postcard__excerpt {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #294454;
}

.bwz-postcard__date {
    font-size: 13px;
    color: var(--bwz-muted);
}

.bwz-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.bwz-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bwz-pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--bwz-border);
    background: #fff;
    color: #294454;
    font-size: 14.5px;
}

.bwz-pagination .active .page-link {
    background: var(--bwz-grad-dark-deep);
    border-color: transparent;
    color: var(--bwz-on-cyan);
}

/* Post ---------------------------------------------------------------------- */

.bwz-post__cat {
    display: inline-block;
}

.bwz-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    font-size: 14px;
    color: var(--bwz-muted);
}

.bwz-post__hero {
    margin: 0;
    padding: 0 clamp(24px, 5vw, 80px);
    background: var(--bwz-white);
}

.bwz-post__hero img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
}

.bwz-post__body {
    background: var(--bwz-white);
    padding: clamp(50px, 7vh, 80px) clamp(24px, 5vw, 80px) clamp(70px, 9vh, 110px);
}

/* ~70-character reading measure. */
.bwz-measure {
    max-width: 70ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.72;
    color: #294454;
}

.bwz-measure > * + * {
    margin-top: 1.1em;
}

.bwz-measure h2,
.bwz-measure h3 {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    color: var(--bwz-base);
    line-height: 1.25;
    margin-top: 1.8em;
}

.bwz-measure h2 {
    font-size: clamp(22px, 2.2vw, 28px);
}

.bwz-measure h3 {
    font-size: clamp(19px, 1.9vw, 23px);
}

.bwz-measure img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.bwz-measure a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bwz-measure ul,
.bwz-measure ol {
    padding-left: 22px;
}

.bwz-measure li + li {
    margin-top: 0.5em;
}

/* Pull quote: cyan wash, cyan left border. */
.bwz-measure blockquote {
    margin: 1.6em 0;
    padding: 22px 26px;
    border-radius: 14px;
    background: var(--bwz-soft-cyan);
    border-left: 3px solid var(--bwz-cyan);
    font-family: var(--bwz-font-display);
    font-size: 19px;
    line-height: 1.5;
    color: var(--bwz-base);
}

.bwz-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--bwz-border);
}

/* ==========================================================================
   Shop listing — the ecommerce archive in the Bluwebz design language
   ========================================================================== */

.bwz-shop {
    background: var(--bwz-white);
    padding: clamp(50px, 7vh, 80px) clamp(24px, 5vw, 80px) clamp(70px, 9vh, 110px);
}

/* Two columns: a filter rail and the product column. The filters used to sit in a row
   above the grid, where seven parents wrapped into a pill wall and pushed the products
   below the fold. */
.bwz-shop__layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}

.bwz-shop__main {
    min-width: 0;
}

.bwz-shopfilter {
    position: sticky;
    top: 104px;
    padding: 18px;
    border: 1px solid var(--bwz-border);
    border-radius: 16px;
    background: var(--bwz-white);
}

/* Desktop: the disclosure is always open and its summary is a plain heading. */
.bwz-shopfilter__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bwz-muted);
    list-style: none;
    cursor: default;
}

.bwz-shopfilter__summary::-webkit-details-marker { display: none; }

.bwz-shopfilter__chevron { display: none; width: 10px; height: 6px; }

.bwz-shopfilter__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bwz-shopfilter__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: #294454;
    text-decoration: none;
    transition: background .2s var(--bwz-ease-ui), color .2s var(--bwz-ease-ui);
}

.bwz-shopfilter__item:hover {
    background: var(--bwz-neutral);
    color: var(--bwz-cyan-deep);
}

.bwz-shopfilter__item.is-active {
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
    font-weight: 600;
}

.bwz-shopfilter__count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--bwz-muted);
}

/* Children of the open branch, held on a rule so the nesting is visible. */
.bwz-shopfilter__children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 6px 12px;
    padding-left: 10px;
    border-left: 2px solid var(--bwz-border-cyan);
}

.bwz-shopfilter__child {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--bwz-body);
    text-decoration: none;
    transition: background .2s var(--bwz-ease-ui), color .2s var(--bwz-ease-ui);
}

.bwz-shopfilter__child:hover { background: var(--bwz-neutral); color: var(--bwz-cyan-deep); }
.bwz-shopfilter__child.is-active { color: var(--bwz-cyan-deep); font-weight: 600; }

.bwz-shop__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bwz-border);
}

.bwz-shop__count {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--bwz-base);
}

.bwz-shop__sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bwz-shop__sortlabel {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bwz-muted);
}

.bwz-shop__sort select {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #d7e6ec;
    background: var(--bwz-white);
    font-family: var(--bwz-font-body);
    font-size: 14px;
    color: #294454;
    cursor: pointer;
}

.bwz-shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.bwz-shopcard {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bwz-shopcard:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.bwz-shopcard__media {
    display: block;
    aspect-ratio: 1;
    background: var(--bwz-neutral);
    overflow: hidden;
}

.bwz-shopcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--bwz-ease-ui);
}

/* No scale above 1.01 on the card itself; the image may move a little more. */
.bwz-shopcard:hover .bwz-shopcard__media img {
    transform: scale(1.03);
}

.bwz-shopcard__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    flex: 1;
}

.bwz-shopcard__brand {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-shopcard__name {
    font-family: var(--bwz-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.bwz-shopcard__name a {
    color: var(--bwz-base);
}

.bwz-shopcard__name a:hover {
    color: var(--bwz-cyan-deep);
}

.bwz-shopcard__foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bwz-shopcard__price {
    font-family: var(--bwz-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--bwz-base);
}

.bwz-shop__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: clamp(50px, 8vh, 90px) 30px;
    border-radius: 18px;
    border: 1px dashed #c4d6de;
    background: var(--bwz-neutral);
}

.bwz-shop__empty p {
    margin: 0;
    max-width: 480px;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--bwz-body);
}

/* ==========================================================================
   Product detail — Bluwebz tuning over the ecommerce plugin's markup

   Restyles only. No markup or class changes, so every ecommerce JS hook
   (variation switching, quantity, add-to-cart) keeps working.
   ========================================================================== */

.content-product-right__title {
    font-family: var(--bwz-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bwz-base);
}

.content-product-right__brand,
.content-product-right__brand a {
    font-family: var(--bwz-font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

/* Price uses the display face and the heading colour, not Orisa's near-black. */
.content-product-right__price {
    font-family: var(--bwz-font-display);
    font-weight: 700;
    color: var(--bwz-base);
}

.content-product-right__excerpt,
.content-product-right__excerpt-text,
.content-product-right__excerpt-text-content {
    font-family: var(--bwz-font-body);
    color: var(--bwz-body);
    line-height: 1.62;
}

.content-product-right__read-more {
    color: var(--bwz-cyan-deep);
    font-weight: 600;
}

.content-product-right__option-label {
    font-family: var(--bwz-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #294454;
}

/* In-stock badge picks up the mint/cyan wash instead of the stock green. */
.content-product-right__badge {
    background: var(--bwz-soft-cyan) !important;
    border: 1px solid var(--bwz-border-cyan);
    color: var(--bwz-cyan-deep) !important;
    font-family: var(--bwz-font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Size / colour swatches: cyan selection, 44px touch target. */
.attribute-swatch-item,
.product-filter-item label {
    border-radius: 10px;
    border-color: #d7e6ec;
    color: #294454;
    transition: border-color 0.24s var(--bwz-ease-ui), background 0.24s var(--bwz-ease-ui);
}

.attribute-swatch-item:hover,
.product-filter-item label:hover {
    border-color: var(--bwz-cyan);
}

.attribute-swatch-item.active,
.product-filter-item input:checked + label {
    border-color: var(--bwz-cyan);
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
}

/* Quantity stepper as a pill, matching the form controls elsewhere. */
.content-product-right__qty {
    border-radius: 999px;
    border: 1px solid #d7e6ec;
    min-height: 52px;
    overflow: hidden;
}

.content-product-right__qty-btn {
    color: var(--bwz-cyan-deep);
    min-width: 44px;
    min-height: 44px;
    transition: background 0.24s var(--bwz-ease-ui);
}

.content-product-right__qty-btn:hover {
    background: var(--bwz-soft-cyan);
}

.content-product-right__qty-val {
    font-family: var(--bwz-font-body);
    font-weight: 600;
    color: var(--bwz-base);
}

/* Buttons follow the design: solid cyan primary, outlined secondary, 999px radius. */
.content-product-right__btn,
.at-btn.content-product-right__btn {
    font-family: var(--bwz-font-body);
    font-weight: 600;
    font-size: 15.5px;
    border-radius: 999px;
    min-height: 52px;
    transition: transform 0.24s var(--bwz-ease-ui), box-shadow 0.24s var(--bwz-ease-ui),
        background 0.24s var(--bwz-ease-ui), border-color 0.24s var(--bwz-ease-ui);
}

.content-product-right__btn--primary,
.at-btn.content-product-right__btn--primary {
    background: var(--bwz-cyan) !important;
    border-color: var(--bwz-cyan) !important;
    color: var(--bwz-on-cyan) !important;
}

.content-product-right__btn--primary:hover,
.at-btn.content-product-right__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(18, 187, 232, 0.4);
}

.content-product-right__btn--outline,
.at-btn.content-product-right__btn--outline {
    background: transparent !important;
    border: 1px solid #c4dae4 !important;
    color: var(--bwz-base) !important;
}

.content-product-right__btn--outline:hover,
.at-btn.content-product-right__btn--outline:hover {
    border-color: var(--bwz-cyan) !important;
    background: rgba(18, 187, 232, 0.08) !important;
}

.content-product-right__btn:active {
    transform: translateY(0);
    transition-duration: 0.09s;
}

/* Meta, benefits and tabs */
.content-product-right__meta,
.content-product-right__meta-item,
.content-product-right__benefits,
.content-product-right__shipping {
    font-family: var(--bwz-font-body);
    font-size: 14px;
    color: var(--bwz-body);
}

.content-product-right__meta-item a,
.content-product-right__benefits a {
    color: var(--bwz-cyan-deep);
}

.content-product-right__tab-nav .nav-link,
.content-product-right__tab-nav a {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    color: var(--bwz-muted);
    border: 0;
}

.content-product-right__tab-nav .nav-link.active,
.content-product-right__tab-nav a.active {
    color: var(--bwz-base);
    border-bottom: 2px solid var(--bwz-cyan);
    background: transparent;
}

.content-product-right__tab-content {
    font-family: var(--bwz-font-body);
    color: var(--bwz-body);
    line-height: 1.72;
}

/* Gallery images share the card radius used across the site. */
.content-product-left img,
.product-gallery img {
    border-radius: 16px;
}

.bwz-productmeta {
    background: var(--bwz-page);
    padding: clamp(50px, 7vh, 80px) clamp(24px, 5vw, 80px);
}

.bwz-productmeta__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
}

.bwz-productmeta__title {
    font-size: clamp(22px, 2.2vw, 30px);
    margin-bottom: 20px;
}

.bwz-productmeta__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bwz-productmeta__list > div {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bwz-border);
}

.bwz-productmeta__list dt {
    flex: 0 0 130px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
    padding-top: 2px;
}

.bwz-productmeta__list dd {
    margin: 0;
    font-size: 15px;
    color: #294454;
}

.bwz-productmeta__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 18px;
    background: var(--bwz-soft-cyan);
    border: 1px solid var(--bwz-border-cyan);
}

.bwz-productmeta__cta p {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    color: #294454;
}

.bwz-related-products {
    background: var(--bwz-white);
    padding: clamp(50px, 7vh, 80px) clamp(24px, 5vw, 80px) clamp(70px, 9vh, 110px);
}

/* ==========================================================================
   Floating cart — appears only once the cart has something in it
   ========================================================================== */

.bwz-floatcart {
    position: fixed;
    right: clamp(14px, 2.4vw, 28px);
    bottom: clamp(18px, 3vh, 32px);
    z-index: 120;

    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px 12px 14px;
    border-radius: 999px;
    background: var(--bwz-cyan);
    color: var(--bwz-on-cyan);
    box-shadow: 0 16px 40px rgba(18, 187, 232, 0.42);

    /* Hidden until there is something in the cart. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.3s var(--bwz-ease-ui), transform 0.35s var(--bwz-ease-standard),
        visibility 0.3s, box-shadow 0.24s var(--bwz-ease-ui);
}

.bwz-floatcart.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.bwz-floatcart:hover {
    color: var(--bwz-on-cyan);
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(18, 187, 232, 0.5);
}

.bwz-floatcart:active {
    transform: translateY(0);
    transition-duration: 0.09s;
}

.bwz-floatcart__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.bwz-floatcart__icon svg {
    width: 21px;
    height: 21px;
}

/* Count badge sits on the deep base so it reads against the cyan. */
.bwz-floatcart__count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bwz-base);
    color: var(--bwz-on-cyan);
    font-family: var(--bwz-font-body);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
}

.bwz-floatcart__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.bwz-floatcart__title {
    font-family: var(--bwz-font-display);
    font-size: 15px;
    font-weight: 600;
}

.bwz-floatcart__sub {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

/* On small screens it collapses to the icon so it never covers content. */
@media (max-width: 560px) {
    .bwz-floatcart {
        padding: 12px;
        gap: 0;
    }

    .bwz-floatcart__label {
        display: none;
    }
}

/* The flow rail is on the left, so the cart never collides with it. */
@media (prefers-reduced-motion: reduce) {
    .bwz-floatcart {
        transition: none;
    }
}

/* ==========================================================================
   Cart — Bluwebz tuning over the ecommerce plugin's markup

   Restyles only: every data-bb-toggle hook (quantity, delete, coupon, checkout)
   is untouched, so the cart's JS behaviour is unchanged.
   ========================================================================== */

[data-bb-toggle="cart-content"] {
    background: var(--bwz-page);
}

[data-bb-toggle="cart-content"] h2 {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--bwz-base);
}

/* Line items ---------------------------------------------------------------- */

.cart-list__items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-item {
    padding: 20px;
    border-radius: 16px;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cart-item:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, 0.08);
}

.cart-item__img-wrap img {
    border-radius: 12px;
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.cart-item__title,
.cart-item__title a {
    font-family: var(--bwz-font-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--bwz-base);
}

.cart-item__title a:hover {
    color: var(--bwz-cyan-deep);
}

.cart-item__meta {
    font-size: 13px;
    color: var(--bwz-faint);
    margin: 4px 0 0;
}

.cart-item__price {
    font-family: var(--bwz-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--bwz-cyan-deep);
    margin: 6px 0 0;
}

/* Quantity stepper matches the product page. */
.cart-item__qty {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d7e6ec;
    overflow: hidden;
    min-height: 44px;
}

.cart-item-qty-minus,
.cart-item-qty-plus {
    min-width: 40px;
    min-height: 42px;
    border: 0;
    background: transparent;
    color: var(--bwz-cyan-deep);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.24s var(--bwz-ease-ui);
}

.cart-item-qty-minus:hover,
.cart-item-qty-plus:hover {
    background: var(--bwz-soft-cyan);
}

.cart-item-qty-val {
    width: 46px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--bwz-font-body);
    font-weight: 600;
    color: var(--bwz-base);
}

.cart-item-delete {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--bwz-border);
    background: var(--bwz-white);
    color: var(--bwz-muted);
    transition: border-color 0.24s var(--bwz-ease-ui), color 0.24s var(--bwz-ease-ui),
        background 0.24s var(--bwz-ease-ui);
}

.cart-item-delete:hover {
    border-color: #e6b3b3;
    background: #fff6f6;
    color: #b1493f;
}

/* Summary panel -------------------------------------------------------------- */

.cart-summary {
    padding: clamp(24px, 3vw, 32px);
    border-radius: 18px;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border-cyan);
    box-shadow: 0 20px 50px rgba(6, 21, 34, 0.06);
    position: sticky;
    top: 130px;
}

.cart-summary__title {
    font-family: var(--bwz-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--bwz-base);
    margin-bottom: 18px;
}

.cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
}

.cart-summary__label {
    font-size: 14.5px;
    color: var(--bwz-body);
}

.cart-summary__value {
    font-family: var(--bwz-font-body);
    font-weight: 600;
    color: var(--bwz-base);
}

.cart-summary__divider {
    height: 1px;
    background: var(--bwz-border);
    margin: 8px 0;
    border: 0;
}

.cart-summary__total .cart-summary__label,
.cart-summary__total .cart-summary__value {
    font-family: var(--bwz-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--bwz-base);
}

.cart-summary__discount .cart-summary__value {
    color: var(--bwz-cyan-deep);
}

/* Coupon field uses the same control treatment as the contact form. */
.cart-summary__coupon-input {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #d7e0e4;
    background: #fff;
    font-family: var(--bwz-font-body);
    font-size: 15px;
    color: var(--bwz-base);
}

.at-btn.cart-summary__coupon-btn {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    background: transparent !important;
    border: 1px solid #c4dae4 !important;
    color: var(--bwz-base) !important;
    font-weight: 600;
    transition: border-color 0.24s var(--bwz-ease-ui), background 0.24s var(--bwz-ease-ui);
}

.at-btn.cart-summary__coupon-btn:hover {
    border-color: var(--bwz-cyan) !important;
    background: rgba(18, 187, 232, 0.08) !important;
}

.cart-summary__coupon-applied {
    font-size: 13.5px;
    color: var(--bwz-cyan-deep);
}

/* Checkout: the primary action on the page. */
.at-btn.cart-summary__checkout-btn {
    min-height: 54px;
    border-radius: 999px;
    background: var(--bwz-cyan) !important;
    border-color: var(--bwz-cyan) !important;
    color: var(--bwz-on-cyan) !important;
    font-family: var(--bwz-font-body);
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.24s var(--bwz-ease-ui), box-shadow 0.24s var(--bwz-ease-ui);
}

.at-btn.cart-summary__checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(18, 187, 232, 0.4);
}

.at-btn.cart-summary__checkout-btn:active {
    transform: translateY(0);
    transition-duration: 0.09s;
}

.cart-summary__delivery,
.cart-summary__tax {
    font-size: 13.5px;
    color: var(--bwz-muted);
}

@media (max-width: 900px) {
    .cart-summary {
        position: static;
    }
}

/* ==========================================================================
   Checkout — Bluwebz tuning over the ecommerce plugin's markup

   The checkout runs on its own focused layout (no site header), which is the
   right pattern — so this restyles the plugin's own classes. CSS only: no
   payment, shipping or validation behaviour is touched.
   ========================================================================== */

.form-checkout,
.checkout-content-wrap {
    font-family: var(--bwz-font-body);
    color: var(--bwz-body);
}

.checkout-logo img {
    max-width: 176px;
    height: auto;
}

/* Section headings */
.checkout-shipping-information-title,
.checkout-payment-title,
.checkout-section > h3,
.checkout-section > h4,
.checkout-order-info > h3 {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: clamp(19px, 2vw, 23px);
    letter-spacing: -0.012em;
    color: var(--bwz-base);
}

/* Fields ------------------------------------------------------------------- */

.form-checkout .form-control,
.form-checkout .form-select,
.checkout-content-wrap .form-control,
.checkout-content-wrap .form-select,
.checkout-content-wrap textarea {
    min-height: 48px;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid #d7e0e4;
    background: #fff;
    font-family: var(--bwz-font-body);
    font-size: 15.5px;
    color: var(--bwz-base);
    transition: border-color 0.24s var(--bwz-ease-ui), box-shadow 0.24s var(--bwz-ease-ui);
}

.form-checkout .form-control:focus,
.form-checkout .form-select:focus,
.checkout-content-wrap .form-control:focus,
.checkout-content-wrap textarea:focus {
    border-color: var(--bwz-cyan);
    box-shadow: 0 0 0 3px rgba(18, 187, 232, 0.16);
    outline: none;
}

.checkout-content-wrap .form-label,
.form-checkout .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #294454;
}

.checkout-content-wrap .form-text {
    color: var(--bwz-muted);
    font-size: 13px;
}

/* Shipping and payment options as selectable cards -------------------------- */

.checkout-section--shipping-method .form-check,
.checkout-section--payment .form-check,
.payment-method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    margin: 0 0 10px;
    border-radius: 12px;
    border: 1px solid var(--bwz-border);
    background: var(--bwz-white);
    min-height: 56px;
    transition: border-color 0.24s var(--bwz-ease-ui), background 0.24s var(--bwz-ease-ui),
        box-shadow 0.24s var(--bwz-ease-ui);
}

.checkout-section--shipping-method .form-check:hover,
.checkout-section--payment .form-check:hover,
.payment-method-item:hover {
    border-color: var(--bwz-cyan);
}

.checkout-section--shipping-method .form-check:has(input:checked),
.checkout-section--payment .form-check:has(input:checked),
.payment-method-item:has(input:checked) {
    border-color: var(--bwz-cyan);
    background: var(--bwz-soft-cyan);
    box-shadow: 0 6px 20px rgba(18, 187, 232, 0.12);
}

.checkout-content-wrap .form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    border-color: #c4dae4;
    flex: 0 0 auto;
}

.checkout-content-wrap .form-check-input:checked {
    background-color: var(--bwz-cyan);
    border-color: var(--bwz-cyan);
}

.checkout-content-wrap .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(18, 187, 232, 0.16);
    border-color: var(--bwz-cyan);
}

.checkout-content-wrap .form-check-label {
    font-size: 15px;
    color: var(--bwz-base);
    cursor: pointer;
}

/* Order summary ------------------------------------------------------------- */

.checkout-summary-block,
.checkout-order-info {
    border-radius: 18px;
    background: var(--bwz-white) !important;
    border: 1px solid var(--bwz-border-cyan);
    box-shadow: 0 20px 50px rgba(6, 21, 34, 0.06);
    padding: clamp(20px, 2.6vw, 28px);
}

.checkout-product-img-wrapper img {
    border-radius: 12px;
}

.checkout-products-block {
    font-size: 14.5px;
    color: #294454;
}

.checkout-quantity {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d7e6ec;
    overflow: hidden;
    min-height: 40px;
}

.checkout-quantity button {
    min-width: 34px;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--bwz-cyan-deep);
    transition: background 0.24s var(--bwz-ease-ui);
}

.checkout-quantity button:hover {
    background: var(--bwz-soft-cyan);
}

.checkout-order-info strong,
.checkout-summary-block strong {
    font-family: var(--bwz-font-display);
    color: var(--bwz-base);
}

/* Coupon */
.checkout-discount-section a,
.coupon-wrapper a {
    color: var(--bwz-cyan-deep);
    font-weight: 600;
}

.coupon-code {
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid #d7e0e4;
}

.coupon-error-msg {
    color: #b1493f;
    font-size: 13.5px;
}

/* Primary action ------------------------------------------------------------ */

.payment-checkout-btn,
.payment-checkout-btn-step,
.checkout-btn-responsive {
    min-height: 54px;
    padding: 14px 34px;
    border-radius: 999px !important;
    background: var(--bwz-cyan) !important;
    border-color: var(--bwz-cyan) !important;
    color: var(--bwz-on-cyan) !important;
    font-family: var(--bwz-font-body);
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.24s var(--bwz-ease-ui), box-shadow 0.24s var(--bwz-ease-ui);
}

.payment-checkout-btn:hover,
.payment-checkout-btn-step:hover,
.checkout-btn-responsive:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(18, 187, 232, 0.4);
}

.payment-checkout-btn:active,
.payment-checkout-btn-step:active {
    transform: translateY(0);
    transition-duration: 0.09s;
}

/* Back to cart / login links */
.checkout-content-wrap a:not(.payment-checkout-btn):not(.btn),
.checkout-login-prompt a {
    color: var(--bwz-cyan-deep);
    font-weight: 600;
}

.checkout-content-wrap a:not(.payment-checkout-btn):not(.btn):hover {
    color: var(--bwz-cyan);
}

/* ==========================================================================
   Wide-screen container

   Widens Bootstrap's .container on large displays. This affects the pages that
   use Bootstrap's grid — the shop, product, cart and checkout — not the Bluwebz
   sections, which use .bwz-shell at the design's 1440px max width.
   ========================================================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* The quantity input is taller than its wrapper in the plugin markup, so it gets
   clipped by the pill's overflow. Size it to the control and drop the spinners. */
/* Two things to beat here: Orisa's `input[type="number"] { height: 56px }` — which
   outranks a single class — and an inline `width:40px` on the element itself, which
   only !important can override. */
.content-product-right__qty input.content-product-right__qty-val,
.content-product-right__qty input.qty-val {
    height: 44px;
    width: 54px !important;
    /* It is a flex child, so it needs to be told not to shrink below that width. */
    flex: 0 0 54px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.content-product-right__qty-val::-webkit-outer-spin-button,
.content-product-right__qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Product breadcrumb — micro-label type, sits above the product detail. */
/* Same wash and masked grid as the page hero on the products listing, so the product
   page opens on the site's signature background rather than flat white. */
.bwz-crumbs {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 90% at 78% 10%, #eaf9fd 0%, #f7fafc 60%, #ffffff 100%);
    padding: 104px clamp(24px, 5vw, 80px) 0;
}

.bwz-crumbs__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(41, 68, 84, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 68, 84, 0.1) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(70% 70% at 40% 40%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000 0%, transparent 80%);
    opacity: 0.7;
    pointer-events: none;
}

.bwz-crumbs .bwz-shell {
    position: relative;
}

.bwz-crumbs .bwz-shell {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bwz-border);
}

.bwz-crumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-crumbs__link:hover {
    color: var(--bwz-cyan);
}

.bwz-crumbs__arrow {
    transition: transform 0.24s var(--bwz-ease-ui);
}

.bwz-crumbs__link:hover .bwz-crumbs__arrow {
    transform: translateX(-4px);
}

.bwz-crumbs__sep {
    color: #c4d6de;
}

.bwz-crumbs__current {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bwz-muted);
}

@media (max-width: 560px) {
    .bwz-crumbs__current {
        display: none;
    }
}

/* The product detail section carries Orisa's pt-150 utility (150px on desktop), which
   left a large gap under the breadcrumb. Scoped to this section so the utility class
   keeps its meaning anywhere else it is used. */
.sec-1-shop-details.pt-150 {
    padding-top: 30px;
}

/* Service-area bullet lists on the Services page. */
.bwz-servicelist {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 15px;
    line-height: 1.55;
    color: #294454;
}

/* Jump links in the Company page hero. */
.bwz-jumplinks {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 30px;
}

.bwz-jumplinks .bwz-pill {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #294454;
}

.bwz-jumplinks .bwz-pill:hover {
    border-color: var(--bwz-cyan);
    color: var(--bwz-cyan-deep);
}

/* Anchored sections must clear the fixed header when jumped to. */
#about, #story, #services, #why {
    scroll-margin-top: 110px;
}

/* ─── Company profile download + BASIS membership ─────────────────────────
   Footer only. Both were briefly shown on the Company hero and the homepage
   trust scene as well; the variant hooks are kept so either can be restored
   without rewriting the components. */

.bwz-profiledl {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: border-color .25s var(--bwz-ease-ui), background .25s var(--bwz-ease-ui), transform .25s var(--bwz-ease-ui);
}

.bwz-profiledl__icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bwz-cyan);
    color: #fff;
}

.bwz-profiledl__icon svg { width: 19px; height: 19px; }

.bwz-profiledl__text { display: flex; flex-direction: column; gap: 2px; }

.bwz-profiledl__label {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.01em;
    color: var(--bwz-base);
}

.bwz-profiledl__meta {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bwz-muted);
}

/* Footer variant: sits on the dark panel, so the palette inverts. */
.bwz-profiledl--link { gap: 10px; }
.bwz-profiledl--link .bwz-profiledl__icon { flex-basis: 32px; width: 32px; height: 32px; }
.bwz-profiledl--link .bwz-profiledl__icon svg { width: 16px; height: 16px; }
.bwz-profiledl--link .bwz-profiledl__label { color: #dce9f0; font-size: 13.5px; }
.bwz-profiledl--link .bwz-profiledl__meta { color: #7fa6bc; }
.bwz-profiledl--link:hover .bwz-profiledl__label { color: #fff; }

.bwz-basis {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    transition: border-color .25s var(--bwz-ease-ui), transform .25s var(--bwz-ease-ui);
}

.bwz-basis__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 46px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--bwz-base);
}

.bwz-basis__mark img {
    display: block;
    max-width: 68px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Text lockup shown until the official artwork is uploaded. */
.bwz-basis__wordmark {
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--bwz-soft-cyan);
}

.bwz-basis__text { display: flex; flex-direction: column; gap: 2px; }

.bwz-basis__label {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.01em;
    color: var(--bwz-base);
}

.bwz-basis__name {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--bwz-muted);
}

.bwz-basis--inline { gap: 11px; }
.bwz-basis--inline .bwz-basis__mark { background: rgba(255, 255, 255, .08); height: 34px; }
.bwz-basis--inline .bwz-basis__label { color: #dce9f0; font-size: 13.5px; }
.bwz-basis--inline .bwz-basis__name { color: #7fa6bc; }
.bwz-basis--inline:hover .bwz-basis__label { color: #fff; }

/* The full association name is too long for a narrow footer column. */
@media (max-width: 560px) {
    .bwz-basis__name { display: none; }
}

/* Caveat under scenes whose mock dashboards carry invented figures. */
.bwz-samplenote {
    margin-top: 26px;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--bwz-muted);
}

.bwz-products__head .bwz-samplenote { margin-top: 14px; color: #7fa6bc; }

/* ─── Company page: at-a-glance, promise, service coverage ────────────────
   All three come straight from the company profile (pages 1, 3 and 4). */

.bwz-glance { padding: 0 clamp(24px, 5vw, 80px) 10px; }

.bwz-glance__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bwz-glance__item {
    padding: 26px 24px;
    border: 1px solid var(--bwz-border);
    border-radius: 18px;
    background: #fff;
}

.bwz-glance__figure {
    display: block;
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--bwz-cyan-deep);
}

.bwz-glance__label {
    display: block;
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--bwz-body);
}

.bwz-promise {
    max-width: 860px;
    margin: 34px auto 0;
    padding: 28px 32px;
    border-left: 3px solid var(--bwz-cyan);
    border-radius: 0 16px 16px 0;
    background: var(--bwz-soft-cyan);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--bwz-base);
}

.bwz-promise__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-coverage {
    margin-top: 52px;
    padding-top: 34px;
    border-top: 1px solid var(--bwz-border);
}

.bwz-coverage__label {
    display: block;
    margin-bottom: 18px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bwz-muted);
}

.bwz-coverage__list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bwz-coverage__chip {
    padding: 8px 16px;
    border: 1px solid var(--bwz-border-cyan);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--bwz-base);
}

@media (max-width: 900px) {
    .bwz-glance__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .bwz-glance__grid { grid-template-columns: 1fr; }
    .bwz-promise { padding: 22px 20px; }
}

/* Quote path for hardware that is priced per site rather than off a shelf. */
.bwz-quotebox {
    margin-bottom: 26px;
    padding: 22px 24px;
    border: 1px solid var(--bwz-border-cyan);
    border-radius: 16px;
    background: var(--bwz-soft-cyan);
}

.bwz-quotebox__text {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bwz-base);
}

.bwz-quotebox__call {
    display: inline-block;
    margin-left: 16px;
    font-size: 13.5px;
    color: var(--bwz-cyan-deep);
}

/* "Pricing on request" is longer than a figure — let it wrap rather than clip. */
/* "Pricing on request" is a label, not a figure — at price weight and size it wrapped
   to two lines and crowded the View link, so it gets its own quieter treatment. */
.bwz-shopcard__price--request {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--bwz-muted);
    white-space: nowrap;
}

/* Portfolio cards that link to a product page. The card itself is the anchor, so it needs
   its own text colour and a lift on hover; the "View X" line is the affordance. */
.bwz-product--linked {
    text-decoration: none;
    color: inherit;
}

.bwz-product--linked:hover {
    transform: translateY(-3px);
}

.bwz-product__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .01em;
    color: var(--bwz-cyan-deep);
    opacity: .82;
    transition: opacity .25s var(--bwz-ease-ui), gap .25s var(--bwz-ease-ui);
}

.bwz-product--linked:hover .bwz-product__more {
    opacity: 1;
    gap: 10px;
}

/* Keyboard users get the same visible target as the hover state. */
.bwz-product--linked:focus-visible {
    outline: 2px solid var(--bwz-cyan);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .bwz-product--linked:hover { transform: none; }
}

/* ─── Footer credentials row ──────────────────────────────────────────────
   Blended into the footer rather than boxed: the same hairline rule and rhythm
   the copyright bar uses, so membership and the profile read as part of the
   footer instead of a card dropped into it. */

.bwz-footcred {
    position: relative;
    max-width: var(--bwz-max);
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
}

.bwz-footcred__cell {
    display: flex;
    align-items: center;
    min-width: 0;
}

@media (max-width: 720px) {
    .bwz-footcred {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

/* ─── Solution pages: "How the work runs" infographic ─────────────────────
   A numbered spine with flowing connectors. Scoped to bwz-runflow because the
   bwz-process/bwz-step classes belong to the homepage process scene. */

.bwz-runflow {
    display: grid;
    grid-template-columns: repeat(var(--bwz-runflow-count, 4), 1fr);
    gap: 0 20px;
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.bwz-runflow__item {
    display: grid;
    grid-template-rows: 44px 1fr;
    gap: 22px;
}

/* Marker row — the node sits centred, the connector reaches the next node's centre. */
.bwz-runflow__marker {
    position: relative;
    display: grid;
    place-items: center;
    height: 44px;
}

.bwz-runflow__node {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bwz-white);
}

.bwz-runflow__ring {
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
    overflow: visible;
}

.bwz-runflow__ring circle {
    fill: none;
    stroke: var(--bwz-border-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    /* 2πr at r=21 ≈ 132; the dash is drawn in on hover from a closed gap. */
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    transition: stroke-dashoffset .5s var(--bwz-ease-standard), stroke .3s var(--bwz-ease-ui);
}

.bwz-runflow__item:hover .bwz-runflow__ring circle,
.bwz-runflow__item:focus-within .bwz-runflow__ring circle {
    stroke: var(--bwz-cyan);
    stroke-dashoffset: 0;
}

/* A second, static ring keeps the node visible before the drawn one animates. The pale
   border-cyan barely registered against the soft-cyan section background. */
.bwz-runflow__node::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--bwz-cyan);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(18, 187, 232, .10);
    transition: box-shadow .3s var(--bwz-ease-ui);
}

.bwz-runflow__item:hover .bwz-runflow__node::before,
.bwz-runflow__item:focus-within .bwz-runflow__node::before {
    box-shadow: 0 0 0 8px rgba(18, 187, 232, .16);
}

.bwz-runflow__num {
    position: relative;
    font-family: var(--bwz-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -.01em;
    color: var(--bwz-cyan-deep);
}

/* Connector — dashes drifting toward the next stage, matching the brand's
   "connected flow" motif used on the homepage and CTA. */
.bwz-runflow__link {
    position: absolute;
    top: 50%;
    left: calc(50% + 30px);
    width: calc(100% - 60px + 20px);
    height: 2px;
    transform: translateY(-50%);
    background-image: linear-gradient(90deg, var(--bwz-cyan) 0 8px, transparent 8px 18px);
    background-size: 18px 2px;
    background-repeat: repeat-x;
    opacity: .85;
    animation: bwz-runflow-drift 1.1s linear infinite;
}

@keyframes bwz-runflow-drift {
    to { background-position: 18px 0; }
}

.bwz-runflow__card {
    position: relative;
    overflow: hidden;
    padding: 24px 22px 22px;
    border: 1px solid var(--bwz-white);
    border-radius: 14px;
    background: var(--bwz-white);
    box-shadow: 0 2px 10px rgba(6, 21, 34, .04);
    transition: transform .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui),
                border-color .3s var(--bwz-ease-ui);
}

.bwz-runflow__item:hover .bwz-runflow__card,
.bwz-runflow__item:focus-within .bwz-runflow__card {
    transform: translateY(-4px);
    border-color: var(--bwz-border-cyan);
    box-shadow: 0 18px 40px rgba(6, 21, 34, .09);
}

/* Gradient cap: reads as this stage's own segment of the flow. */
.bwz-runflow__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bwz-grad-flow);
    opacity: .5;
    transition: opacity .3s var(--bwz-ease-ui);
}

.bwz-runflow__item:hover .bwz-runflow__card::before,
.bwz-runflow__item:focus-within .bwz-runflow__card::before {
    opacity: 1;
}

.bwz-runflow__title {
    margin: 0 0 9px;
    font-family: var(--bwz-font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--bwz-base);
}

.bwz-runflow__body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: #294454;
}

/* Below 900px the spine turns vertical: the node column runs down the left and the
   connector becomes the segment between one card and the next. */
@media (max-width: 900px) {
    .bwz-runflow {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bwz-runflow__item {
        grid-template-rows: none;
        grid-template-columns: 44px 1fr;
        gap: 0 18px;
        padding-bottom: 22px;
    }

    .bwz-runflow__marker {
        height: auto;
        align-items: start;
    }

    .bwz-runflow__link {
        top: 44px;
        bottom: -22px;
        left: 50%;
        width: 2px;
        height: auto;
        transform: translateX(-50%);
        background-image: linear-gradient(180deg, var(--bwz-cyan) 0 8px, transparent 8px 18px);
        background-size: 2px 18px;
        background-repeat: repeat-y;
        animation-name: bwz-runflow-drift-y;
    }

    @keyframes bwz-runflow-drift-y {
        to { background-position: 0 18px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-runflow__link { animation: none; }
    .bwz-runflow__card,
    .bwz-runflow__ring circle { transition: none; }
    .bwz-runflow__item:hover .bwz-runflow__card { transform: none; }
}

/* Below 1024px the rail becomes a collapsible panel above the grid: a sticky sidebar
   at tablet width would eat a third of the row. */
@media (max-width: 1024px) {
    .bwz-shop__layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bwz-shopfilter {
        position: static;
        padding: 4px 16px;
    }

    .bwz-shopfilter__summary {
        margin: 0;
        padding: 14px 0;
        cursor: pointer;
    }

    .bwz-shopfilter__chevron {
        display: block;
        transition: transform .25s var(--bwz-ease-ui);
    }

    .bwz-shopfilter[open] .bwz-shopfilter__chevron { transform: rotate(180deg); }

    /* Two columns of filters reads better than one long list at tablet width. */
    .bwz-shopfilter__body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px 10px;
        padding-bottom: 14px;
    }

    .bwz-shopfilter__children { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .bwz-shopfilter__body { grid-template-columns: 1fr; }
    .bwz-shop__toolbar { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-shopfilter__item,
    .bwz-shopfilter__child,
    .bwz-shopfilter__chevron { transition: none; }
}

/* ─── Blog: lead article and card foot ────────────────────────────────────
   The archive was a uniform card grid; the newest piece now leads at full
   width so the page has a focal point. */

.bwz-leadpost {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    margin-bottom: 34px;
    border: 1px solid var(--bwz-border);
    border-radius: 20px;
    background: var(--bwz-white);
    overflow: hidden;
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui);
}

.bwz-leadpost:hover {
    border-color: var(--bwz-border-cyan);
    box-shadow: 0 20px 48px rgba(6, 21, 34, .08);
}

.bwz-leadpost__media {
    position: relative;
    display: block;
    min-height: 320px;
    background: var(--bwz-neutral);
    overflow: hidden;
}

.bwz-leadpost__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--bwz-ease-standard);
}

.bwz-leadpost:hover .bwz-leadpost__media img {
    transform: scale(1.03);
}

.bwz-leadpost__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(26px, 3vw, 44px);
}

.bwz-leadpost__flag {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bwz-soft-cyan);
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-leadpost__title {
    margin: 0;
    font-family: var(--bwz-font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.18;
    letter-spacing: -.02em;
}

.bwz-leadpost__title a {
    color: var(--bwz-base);
    text-decoration: none;
}

.bwz-leadpost__title a:hover { color: var(--bwz-cyan-deep); }

.bwz-leadpost__excerpt {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--bwz-body);
}

.bwz-leadpost__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bwz-muted);
}

/* Card foot — date and a read affordance on one baseline. */
.bwz-postcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}

.bwz-postcard__more {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s var(--bwz-ease-ui), transform .25s var(--bwz-ease-ui);
}

.bwz-postcard:hover .bwz-postcard__more,
.bwz-postcard:focus-within .bwz-postcard__more {
    opacity: 1;
    transform: translateX(0);
}

/* Topic pills sit under the hero intro. */
.bwz-pagehero__inner .bwz-jumplinks { margin-top: 26px; }

@media (max-width: 860px) {
    .bwz-leadpost { grid-template-columns: 1fr; }
    .bwz-leadpost__media { min-height: 220px; }
    /* Touch has no hover, so the read affordance must always be visible. */
    .bwz-postcard__more { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-leadpost,
    .bwz-leadpost__media img,
    .bwz-postcard__more { transition: none; }
    .bwz-leadpost:hover .bwz-leadpost__media img { transform: none; }
    .bwz-postcard__more { opacity: 1; transform: none; }
}

/* ─── Careers, galleries, team and 404 ────────────────────────────────────
   All four reuse the site's page hero, card and empty-state language. */

/* Careers — roles as rows: a job listing is scanned for title, location and pay. */
.bwz-roles { padding: var(--bwz-section-pad); background: var(--bwz-white); }

.bwz-roles__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.bwz-roles__list { display: grid; gap: 12px; }

.bwz-role {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid var(--bwz-border);
    border-radius: 14px;
    background: var(--bwz-white);
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui),
                transform .3s var(--bwz-ease-ui);
}

.bwz-role:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 16px 38px rgba(6, 21, 34, .08);
    transform: translateY(-2px);
}

.bwz-role__title {
    margin: 0 0 6px;
    font-family: var(--bwz-font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.bwz-role__title a { color: var(--bwz-base); text-decoration: none; }
.bwz-role__title a:hover { color: var(--bwz-cyan-deep); }

.bwz-role__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bwz-body); }

.bwz-role__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.bwz-role__meta--hero { margin-top: 22px; }

.bwz-role__chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--bwz-border);
    background: var(--bwz-white);
    font-size: 12.5px;
    color: #294454;
    white-space: nowrap;
}

.bwz-role__chip--salary {
    border-color: var(--bwz-border-cyan);
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
}

.bwz-role__link { white-space: nowrap; }

.bwz-backlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
    text-decoration: none;
}

.bwz-backlink:hover { color: var(--bwz-base); }

.bwz-applycta { padding: var(--bwz-section-pad); background: var(--bwz-soft-cyan); }

.bwz-applycta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

.bwz-applycta__body { margin: 12px 0 0; max-width: 520px; font-size: 15.5px; line-height: 1.65; color: var(--bwz-body); }
.bwz-applycta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* Galleries — albums, featured ones spanning two columns. */
.bwz-gallerygrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.bwz-album {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bwz-border);
    border-radius: 16px;
    background: var(--bwz-white);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui),
                transform .3s var(--bwz-ease-ui);
}

.bwz-album:hover {
    border-color: var(--bwz-border-cyan);
    box-shadow: 0 18px 44px rgba(6, 21, 34, .09);
    transform: translateY(-3px);
}

.bwz-album--featured { grid-column: span 2; }

.bwz-album__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--bwz-neutral);
    overflow: hidden;
}

.bwz-album__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--bwz-ease-standard); }
.bwz-album:hover .bwz-album__media img { transform: scale(1.04); }

.bwz-album__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }

.bwz-album__flag {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--bwz-soft-cyan);
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bwz-cyan-deep);
}

.bwz-album__title { font-family: var(--bwz-font-display); font-weight: 600; font-size: 17px; color: var(--bwz-base); }
.bwz-album__desc { font-size: 14px; line-height: 1.55; color: var(--bwz-body); }

.bwz-album__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.bwz-album__count { font-size: 12.5px; color: var(--bwz-muted); }

/* Photo grid inside an album. */
.bwz-photogrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.bwz-photo { margin: 0; }

.bwz-photo a {
    display: block;
    aspect-ratio: 1;
    border-radius: 12px;
    background: var(--bwz-neutral);
    overflow: hidden;
}

.bwz-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--bwz-ease-standard); }
.bwz-photo a:hover img { transform: scale(1.05); }
.bwz-photo__caption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--bwz-muted); }

/* Team */
.bwz-teamgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.bwz-member {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bwz-border);
    border-radius: 16px;
    background: var(--bwz-white);
    overflow: hidden;
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui),
                transform .3s var(--bwz-ease-ui);
}

.bwz-member:hover {
    border-color: var(--bwz-border-cyan);
    box-shadow: 0 18px 44px rgba(6, 21, 34, .09);
    transform: translateY(-3px);
}

.bwz-member__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    background: var(--bwz-soft-cyan);
    overflow: hidden;
}

.bwz-member__media img { width: 100%; height: 100%; object-fit: cover; }

/* Initials stand in for a missing photo rather than a stock silhouette. */
.bwz-member__initials {
    font-family: var(--bwz-font-display);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: .02em;
    color: var(--bwz-cyan-deep);
}

.bwz-member__body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; }

.bwz-member__name { margin: 0; font-family: var(--bwz-font-display); font-size: 17px; font-weight: 600; }
.bwz-member__name a { color: var(--bwz-base); text-decoration: none; }
.bwz-member__name a:hover { color: var(--bwz-cyan-deep); }
.bwz-member__role { font-size: 13.5px; color: var(--bwz-cyan-deep); font-weight: 500; }
.bwz-member__role--hero { display: inline-block; margin-bottom: 14px; font-size: 15px; }
.bwz-member__location { font-size: 12.5px; color: var(--bwz-muted); }

.bwz-memberhero { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 54px); align-items: start; }

.bwz-memberhero__photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background: var(--bwz-soft-cyan);
    overflow: hidden;
}

.bwz-memberhero__photo img { width: 100%; height: 100%; object-fit: cover; }

.bwz-memberdetails { display: grid; gap: 10px; margin: 22px 0 0; }
.bwz-memberdetails > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.bwz-memberdetails dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bwz-muted); }
.bwz-memberdetails dd { margin: 0; font-size: 14.5px; color: var(--bwz-base); }
.bwz-memberdetails dd a { color: var(--bwz-cyan-deep); }

/* 404 */
.bwz-notfound {
    position: relative;
    padding: clamp(90px, 12vh, 150px) clamp(24px, 5vw, 80px);
    background: var(--bwz-grad-section-light);
    overflow: hidden;
}

.bwz-notfound__inner { max-width: 760px; }

/* Oversized, low-contrast numeral — decoration, not information. Anchored to the
   section's right margin rather than the text column, where it sat on top of the
   heading and made it hard to read. */
.bwz-notfound__code {
    position: absolute;
    top: 60px;
    right: clamp(10px, 4vw, 80px);
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(140px, 22vw, 260px);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--bwz-border-cyan);
    opacity: .42;
    pointer-events: none;
    user-select: none;
}

/* Below the two-column threshold the text runs full width, so the numeral would
   overlap it again — it is decorative, so it goes. */
@media (max-width: 980px) {
    .bwz-notfound__code { display: none; }
}

.bwz-notfound__title {
    margin: 14px 0 16px;
    font-family: var(--bwz-font-display);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--bwz-base);
}

.bwz-notfound__intro { max-width: 560px; }
.bwz-notfound__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.bwz-notfound__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 40px;
}

.bwz-notfound__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--bwz-border);
    border-radius: 12px;
    background: var(--bwz-white);
    text-decoration: none;
    transition: border-color .25s var(--bwz-ease-ui), transform .25s var(--bwz-ease-ui);
}

.bwz-notfound__link:hover { border-color: var(--bwz-cyan); transform: translateY(-2px); }
.bwz-notfound__linkname { grid-column: 1; font-family: var(--bwz-font-display); font-weight: 600; font-size: 15px; color: var(--bwz-base); }
.bwz-notfound__linkdesc { grid-column: 1; font-size: 12.5px; color: var(--bwz-muted); }
.bwz-notfound__link .bwz-arrowlink { grid-row: 1 / 3; grid-column: 2; }
.bwz-notfound__help { margin-top: 30px; font-size: 14px; color: var(--bwz-muted); }

@media (max-width: 900px) {
    .bwz-modules__grid { grid-template-columns: 1fr; }
    .bwz-modules__aside { position: static; }
    .bwz-modules__list { grid-template-columns: 1fr; }
    .bwz-role { grid-template-columns: 1fr; gap: 14px; }
    .bwz-album--featured { grid-column: auto; }
    .bwz-memberhero { grid-template-columns: 1fr; }
    .bwz-memberhero__photo { max-width: 220px; }
    .bwz-applycta__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-role, .bwz-album, .bwz-member, .bwz-module,
    .bwz-notfound__link, .bwz-album__media img, .bwz-photo img { transition: none; }
    .bwz-role:hover, .bwz-album:hover, .bwz-member:hover,
    .bwz-module:hover, .bwz-notfound__link:hover { transform: none; }
    .bwz-album:hover .bwz-album__media img, .bwz-photo a:hover img { transform: none; }
}

/* Inline icons — decorative, inherit currentColor, sized to their context. */
.bwz-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.bwz-role { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.bwz-role__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
    transition: background .3s var(--bwz-ease-ui), color .3s var(--bwz-ease-ui);
}

.bwz-role:hover .bwz-role__icon { background: var(--bwz-cyan); color: var(--bwz-on-cyan); }

.bwz-role__chip { display: inline-flex; align-items: center; gap: 7px; }
.bwz-role__chip .bwz-icon { width: 14px; height: 14px; opacity: .7; }

.bwz-album__count,
.bwz-member__location { display: inline-flex; align-items: center; gap: 6px; }
.bwz-album__count .bwz-icon,
.bwz-member__location .bwz-icon { width: 14px; height: 14px; opacity: .65; }

.bwz-notfound__link { grid-template-columns: auto minmax(0, 1fr) auto; }

.bwz-notfound__linkicon {
    grid-row: 1 / 3;
    grid-column: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
    transition: background .25s var(--bwz-ease-ui), color .25s var(--bwz-ease-ui);
}

.bwz-notfound__link:hover .bwz-notfound__linkicon { background: var(--bwz-cyan); color: var(--bwz-on-cyan); }
.bwz-notfound__linkname { grid-column: 2; }
.bwz-notfound__linkdesc { grid-column: 2; }
.bwz-notfound__link .bwz-arrowlink { grid-row: 1 / 3; grid-column: 3; }

@media (max-width: 900px) {
    /* Icon keeps its column; title and meta stack beneath it. */
    .bwz-role { grid-template-columns: auto minmax(0, 1fr); }
    .bwz-role__meta,
    .bwz-role__link { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-role__icon, .bwz-notfound__linkicon { transition: none; }
}

/* ─── Footer: sitemap columns ─────────────────────────────────────────────
   The footer carried four columns (brand, two offices, contact) and a bottom
   nav of homepage anchors. It now maps the site: brand, Solutions, Company,
   Explore, and contact with both offices. */

.bwz-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }

.bwz-footer__tagline {
    display: block;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bwz-cyan);
}

.bwz-footer__intro { margin-top: 16px; max-width: 300px; font-size: 14px; color: #7fa6bc; }

/* A single action in the footer, matching the header's CTA. */
.bwz-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: #dce9f0;
    text-decoration: none;
    transition: border-color .25s var(--bwz-ease-ui), background .25s var(--bwz-ease-ui), color .25s var(--bwz-ease-ui);
}

.bwz-footer__cta:hover {
    border-color: var(--bwz-cyan);
    background: rgba(18, 187, 232, .12);
    color: #fff;
}

.bwz-footer__col { min-width: 0; }

.bwz-footer__links a {
    text-decoration: none;
    transition: color .2s var(--bwz-ease-ui), transform .2s var(--bwz-ease-ui);
}

.bwz-footer__links a:hover { transform: translateX(2px); }

.bwz-footer__offices {
    display: grid;
    gap: 18px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.bwz-footer__office-city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 13px;
    color: #dce9f0;
}

.bwz-footer__office-city .bwz-icon { width: 14px; height: 14px; color: var(--bwz-cyan); }
.bwz-footer__office .bwz-footer__text { font-size: 13.5px; color: #7fa6bc; }

.bwz-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.bwz-footer__bottom nav a { color: #9fbfd0; text-decoration: none; transition: color .2s var(--bwz-ease-ui); }
.bwz-footer__bottom nav a:hover { color: var(--bwz-cyan); }

@media (max-width: 1180px) {
    /* Brand spans the top row; the four link columns sit beneath it in pairs. */
    .bwz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bwz-footer__brand { grid-column: 1 / -1; }
    .bwz-footer__intro { max-width: 420px; }
}

@media (max-width: 620px) {
    .bwz-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .bwz-footer__bottom { flex-direction: column; align-items: flex-start; }
    .bwz-footer__bottom nav { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-footer__cta, .bwz-footer__links a { transition: none; }
    .bwz-footer__links a:hover { transform: none; }
}

/* ─── Contact: quick actions, info rail ───────────────────────────────────
   Direct contact leads the page, the form follows, and the support-connection
   panel closes it — it used to sit between the hero and the form and pushed
   the fields below the fold. */

.bwz-quickcontact { padding: 0 clamp(24px, 5vw, 80px); margin-top: -10px; }

.bwz-quickcontact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.bwz-quickcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    border: 1px solid var(--bwz-border);
    border-radius: 16px;
    background: var(--bwz-white);
    text-decoration: none;
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui),
                transform .3s var(--bwz-ease-ui);
}

.bwz-quickcard:hover {
    border-color: var(--bwz-cyan);
    box-shadow: 0 18px 40px rgba(6, 21, 34, .08);
    transform: translateY(-3px);
}

.bwz-quickcard__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
    transition: background .3s var(--bwz-ease-ui), color .3s var(--bwz-ease-ui);
}

.bwz-quickcard:hover .bwz-quickcard__icon { background: var(--bwz-cyan); color: var(--bwz-on-cyan); }
.bwz-quickcard__icon .bwz-icon { width: 20px; height: 20px; }

.bwz-quickcard__label {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bwz-muted);
}

.bwz-quickcard__value {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--bwz-base);
    word-break: break-word;
}

.bwz-quickcard__note { font-size: 13px; color: var(--bwz-body); }

.bwz-contact__rail { position: sticky; top: 120px; display: grid; gap: 26px; }

.bwz-nextsteps {
    padding: 24px;
    border: 1px solid var(--bwz-border-cyan);
    border-radius: 16px;
    background: var(--bwz-soft-cyan);
}

.bwz-nextsteps__label { color: var(--bwz-cyan-deep); margin-bottom: 16px; }
.bwz-nextsteps__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.bwz-nextsteps__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }

.bwz-nextsteps__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bwz-white);
    border: 1px solid var(--bwz-border-cyan);
    font-family: var(--bwz-font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--bwz-cyan-deep);
}

.bwz-nextsteps__title {
    display: block;
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--bwz-base);
}

.bwz-nextsteps__body { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--bwz-body); }

/* The support panel now closes the page. */
.bwz-supportmap { padding-bottom: clamp(60px, 8vh, 100px); }

@media (max-width: 940px) {
    .bwz-contact__grid { grid-template-columns: 1fr; }
    .bwz-contact__rail { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .bwz-quickcard, .bwz-quickcard__icon { transition: none; }
    .bwz-quickcard:hover { transform: none; }
}

/* ─── Legal documents ─────────────────────────────────────────────────────
   Policy pages rendered raw page content with no shell at all. They now get a
   reading measure and a sticky table of contents built from their own headings. */

.bwz-legal { padding: clamp(50px, 6vh, 80px) clamp(24px, 5vw, 80px) clamp(70px, 8vh, 110px); }

.bwz-legal__updated {
    display: inline-block;
    margin-top: 20px;
    padding: 6px 14px;
    border: 1px solid var(--bwz-border-cyan);
    border-radius: 999px;
    background: var(--bwz-white);
    font-size: 12.5px;
    color: var(--bwz-cyan-deep);
}

.bwz-legal__grid {
    display: grid;
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(30px, 5vw, 64px);
}

.bwz-legal__toc { position: sticky; top: 120px; }
.bwz-legal__toclabel { margin-bottom: 14px; }

.bwz-legal__toc nav { display: flex; flex-direction: column; gap: 2px; }

.bwz-legal__toc a {
    padding: 8px 12px;
    border-left: 2px solid var(--bwz-border);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--bwz-body);
    text-decoration: none;
    transition: border-color .2s var(--bwz-ease-ui), background .2s var(--bwz-ease-ui), color .2s var(--bwz-ease-ui);
}

.bwz-legal__toc a:hover {
    border-left-color: var(--bwz-cyan);
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
}

/* Reuses .bwz-measure so long text reads the same as a blog post, but left-aligned in
   its grid column rather than centred in the viewport. */
.bwz-legal__body { margin-inline: 0; max-width: 72ch; }
.bwz-legal__body > :first-child { margin-top: 0; }

/* Anchored headings must clear the sticky header when jumped to. */
.bwz-legal__body h2 { scroll-margin-top: 110px; }

@media (max-width: 940px) {
    .bwz-legal__grid { grid-template-columns: 1fr; }

    .bwz-legal__toc {
        position: static;
        padding: 18px;
        border: 1px solid var(--bwz-border);
        border-radius: 14px;
        background: var(--bwz-white);
    }

    /* Two columns of links rather than one long list before the document starts. */
    .bwz-legal__toc nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
}

@media (max-width: 560px) {
    .bwz-legal__toc nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .bwz-legal__toc a { transition: none; } }

/* ─── Company page: advantages and growth ─────────────────────────────────
   Six advantages that were bare text in boxes, and four growth areas that
   were plain rows. */

/* Why Bluwebz — six statements that were bare text in boxes. */
.bwz-advantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.bwz-advantage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--bwz-border);
    border-radius: 14px;
    background: var(--bwz-white);
    transition: border-color .3s var(--bwz-ease-ui), box-shadow .3s var(--bwz-ease-ui);
}

.bwz-advantage:hover {
    border-color: var(--bwz-border-cyan);
    box-shadow: 0 14px 34px rgba(6, 21, 34, .07);
}

.bwz-advantage__check {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
}

.bwz-advantage__check svg { width: 16px; height: 16px; }
.bwz-advantage__body { font-size: 15px; line-height: 1.6; color: var(--bwz-base); }

/* Growth direction — plain rows become icon cards. */
.bwz-growth {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.bwz-growth__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border: 1px solid var(--bwz-border);
    border-radius: 16px;
    background: var(--bwz-white);
    transition: border-color .3s var(--bwz-ease-ui), transform .3s var(--bwz-ease-ui);
}

.bwz-growth__item:hover { border-color: var(--bwz-cyan); transform: translateY(-3px); }

.bwz-growth__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--bwz-soft-cyan);
    color: var(--bwz-cyan-deep);
}

.bwz-growth__name {
    font-family: var(--bwz-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--bwz-base);
}

.bwz-growth__desc { font-size: 13.5px; line-height: 1.55; color: var(--bwz-body); }



@media (prefers-reduced-motion: reduce) {
    .bwz-advantage, .bwz-growth__item { transition: none; }
    .bwz-growth__item:hover { transform: none; }
}


/* ==========================================================================
   Narrow mobile resilience — 320px phones and compact menu states
   ========================================================================== */

@media (max-width: 560px) {
    :root {
        --bwz-section-pad: clamp(64px, 9vh, 90px) 20px;
    }

    .bwz-header {
        height: 76px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px);
        border-bottom-color: rgba(11, 34, 53, 0.08);
    }

    .bwz-header__inner {
        padding-inline: 12px;
        gap: 8px;
    }

    .bwz-brand__mark {
        --lw: 138px !important;
    }

    .bwz-mobilebar {
        gap: 8px;
    }

    .bwz-mobilebar__store {
        width: 44px;
        height: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        justify-content: center;
        padding: 0;
        border-radius: 12px;
    }

    .bwz-mobilebar__storelabel {
        display: none;
    }

    .bwz-mobilebar__storeicon {
        display: block;
    }

    .bwz-burger {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .bwz-mobilemenu {
        padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
        visibility: hidden;
    }

    .bwz-mobilemenu.is-open {
        visibility: visible;
    }

    .bwz-mobilemenu__link,
    .bwz-mobilemenu__grouptitle {
        font-size: 22px;
    }

    .bwz-mobilemenu__sub {
        grid-template-columns: 1fr;
        gap: 2px;
        margin-top: 10px;
    }

    .bwz-hero__inner,
    .bwz-solutions__grid,
    .bwz-industries__grid,
    .bwz-triad__grid,
    .bwz-experience__grid,
    .bwz-listing__grid,
    .bwz-audience__grid,
    .bwz-vision__grid,
    .bwz-plans__grid,
    .bwz-postgrid,
    .bwz-productmeta__grid,
    .bwz-gallerygrid,
    .bwz-advantages {
        grid-template-columns: minmax(0, 1fr);
    }

    .bwz-contact__grid > *,
    .bwz-contact__rail,
    .bwz-form,
    .bwz-field {
        min-width: 0;
        max-width: 100%;
    }

    .bwz-field input[type="text"],
    .bwz-field input[type="email"],
    .bwz-field input[type="tel"],
    .bwz-field select,
    .bwz-field textarea {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    .bwz-capability,
    .bwz-vision__card,
    .bwz-form {
        padding: 22px;
    }

    .bwz-pagehero__actions .bwz-btn,
    .bwz-cta__actions .bwz-btn {
        justify-content: center;
    }
}