@charset "UTF-8";
/* ==========================================================================
   BLAZE — FUTURA VISUAL LAYER
   Futuristic 3D + Glass + High-Tech Enterprise re-skin.

   This stylesheet is PURELY PRESENTATIONAL and loads LAST.
   It changes NO markup, NO content, NO section order, NO navigation.
   Every rule re-skins an element that already exists in the templates.

   To disable the entire redesign, remove the single <link> in header.php.

   CONTENTS
     01  Design tokens
     02  Base & typography
     03  Background systems (grid / glow / section rhythm)
     04  Glass primitives
     05  Header — glass navigation
     06  Mega menu
     07  Hero slider
     08  Signature outline headline
     09  Buttons
     10  Dark cinematic bands
     11  Trusted-partner list
     12  Testimonials & client logos
     13  Solution modules (newsolubox / servicebox)
     14  Explore tiles
     15  Latest news
     16  Why Blaze panel
     17  Inner page hero band
     18  Inner page surfaces
     19  Forms, tabs & modal
     20  Footer
     21  Floating discuss tab
     22  Motion & scroll reveal
     23  Responsive
     24  Reduced motion / print
   ========================================================================== */

/* ==========================================================================
   00  TYPOGRAPHY — STOLZL

   One family, one scale, for the whole site.

   The legacy sheets set Oswald, Source Sans 3, Roboto, RobotoMono, Inter,
   Verdana, Georgia and Times across hundreds of rules -- many through the
   `font:` shorthand, which carries family, size and leading in one
   declaration. Rather than edit all of them, the family is reassigned here
   and the sizes are re-stated as roles below.
   ========================================================================== */

/* --- The six cuts the project actually ships ----------------------------
   Stolzl has no DemiBold, no 800 and no italic. Nothing here invents one:
   600-900 is mapped onto the real Bold so a stray `font-weight: 800`
   somewhere in the legacy CSS renders as Bold instead of a synthesised
   faux-bold, and italics are simply not used.
   ---------------------------------------------------------------------- */
@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Book.woff2') format('woff2');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('../fonts/stolzl/Stolzl-Bold.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   00a  THE TYPE SCALE

   Roles, not tags. This site's markup uses h2 through h5 for card titles and
   micro-labels as often as for document headings -- measured, h2 renders at
   eighteen different sizes and h4 at ten -- so a scale keyed only to tag
   names would either leave that untouched or blow the cards apart. Each
   token below names a job; the rules further down map tags and components
   onto those jobs.

   Every step is fluid. The top of each clamp is the desktop size, the bottom
   is the phone size, and the middle term is what carries it between them, so
   there is no jump at a breakpoint.
   ========================================================================== */
:root {
    --bzf-font: 'Stolzl', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Stolzl has no monospaced cut. Code is the one place a different family
       is correct rather than a leftover, so it gets a declared system stack
       instead of inheriting one by accident. */
    --bzf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Display — hero and page-title treatments only */
    --bzf-fs-display: clamp(38px, 5vw, 72px);
    --bzf-fs-display-2: clamp(32px, 3.6vw, 50px);

    /* Document hierarchy */
    --bzf-fs-h1: clamp(36px, 4.4vw, 64px);
    --bzf-fs-h2: clamp(29px, 3.3vw, 46px);
    --bzf-fs-h3: clamp(24px, 2.5vw, 35px);
    --bzf-fs-h4: clamp(21px, 1.95vw, 27px);
    --bzf-fs-h5: clamp(18px, 1.6vw, 22px);
    --bzf-fs-h6: clamp(16px, 1.4vw, 19px);

    /* Cards — a card title is its own role and rarely wants an h-size */
    --bzf-fs-card: clamp(19px, 1.6vw, 24px);

    /* Body */
    --bzf-fs-lead: clamp(16.5px, 1.3vw, 19px);
    --bzf-fs-body: clamp(15.5px, 1.15vw, 17px);
    --bzf-fs-sm: clamp(13.5px, 1vw, 15px);
    --bzf-fs-xs: clamp(12px, .9vw, 13.5px);

    /* Interface */
    --bzf-fs-nav: clamp(14px, 1.02vw, 15px);
    --bzf-fs-btn: clamp(13.5px, 1.02vw, 15px);
    --bzf-fs-label: clamp(12px, .9vw, 13px);

    /* Leading. Display is set tight because Stolzl's caps are large on the
       body; body copy is set open because the same large x-height needs the
       room back to stay comfortable at 16px. */
    --bzf-lh-display: 1.04;
    --bzf-lh-h1: 1.08;
    --bzf-lh-h2: 1.12;
    --bzf-lh-h3: 1.2;
    --bzf-lh-heading: 1.28;
    --bzf-lh-card: 1.3;
    --bzf-lh-body: 1.65;
    --bzf-lh-ui: 1.35;

    /* Tracking. Stolzl is geometric and sets wide, so headings come in and
       body stays at zero; only uppercase runs are opened up. */
    --bzf-ls-display: -.03em;
    --bzf-ls-heading: -.018em;
    --bzf-ls-body: 0;
    --bzf-ls-ui: .05em;
    --bzf-ls-caps: .06em;
    --bzf-ls-label: .1em;

    /* Weights — the names of the cuts that exist */
    --bzf-w-light: 300;
    --bzf-w-book: 350;
    --bzf-w-regular: 400;
    --bzf-w-medium: 500;
    --bzf-w-bold: 700;

    /* Measure. Long-form copy is capped so a line never outruns the eye on a
       wide monitor. */
    /* 62ch of Stolzl's zero measures about 89 average characters, which is the
       top of the comfortable band; 68ch measured 98. */
    --bzf-measure: 62ch;

    /* The grid every section lines up to. These are Bootstrap's own container
       max-widths, restated as a token so the blocks that are not Bootstrap
       containers — the pinned deck, the client rail — can sit on the same
       left and right edges instead of inventing their own. --bzf-content is
       the inner width, gutters removed, which is what those blocks want. */
    --bzf-gutter: 15px;
    --bzf-container: 100%;
    --bzf-content: calc(100% - (var(--bzf-gutter) * 2));
}

@media (min-width: 576px) {
    :root {
        --bzf-container: 540px;
    }
}

@media (min-width: 768px) {
    :root {
        --bzf-container: 720px;
    }
}

@media (min-width: 992px) {
    :root {
        --bzf-container: 960px;
    }
}

@media (min-width: 1200px) {
    :root {
        --bzf-container: 1400px;
    }
}

@media (min-width: 576px) {
    :root {
        --bzf-content: min(calc(100% - (var(--bzf-gutter) * 2)),
                calc(var(--bzf-container) - (var(--bzf-gutter) * 2)));
    }
}

/* ==========================================================================
   00b  ENFORCING THE FAMILY

   The universal selector rather than a list of tags: a list leaves whatever
   it forgot on the legacy font, and a `font:` shorthand in the legacy sheets
   resets the family on any element the list missed. The icon families are
   re-asserted immediately below and win on specificity, which is the whole
   reason `*` is safe here.
   ========================================================================== */
* {
    font-family: var(--bzf-font) !important;
}

/* Icon fonts keep their own family or every glyph turns into a box.
   Pseudo-elements are not matched by `*`, so they inherit from the element,
   which these rules have already corrected. */
.fa, .fas, .far, .fab, .fal,
[class^="fa-"], [class*=" fa-"],
.fa::before, [class^="fa-"]::before, [class*=" fa-"]::before {
    font-family: FontAwesome !important;
}

[class^="bi-"], [class*=" bi-"],
[class^="bi-"]::before, [class*=" bi-"]::before {
    font-family: bootstrap-icons !important;
}

.swiper-button-prev::after,
.swiper-button-next::after,
.swiper-container-cube .swiper-cube-shadow {
    font-family: swiper-icons !important;
}

/* Code is the one deliberate exception. Legacy set it in RobotoMono, which is
   no longer loaded; a declared system mono replaces it rather than letting it
   fall through to whatever the browser picks. */
pre, code, kbd, samp, tt,
pre *, code * {
    font-family: var(--bzf-font-mono) !important;
}

::-webkit-input-placeholder {
    font-family: var(--bzf-font);
}

::placeholder {
    font-family: var(--bzf-font);
}

/* ==========================================================================
   00c  APPLYING THE SCALE

   Bare element selectors on purpose: they replace the framework defaults and
   lose to every component rule, so a section that has designed its own
   heading keeps it. The component corrections that follow in later sections
   are the ones that were measurably out of the system.
   ========================================================================== */
body {
    font-family: var(--bzf-font);
    font-size: var(--bzf-fs-body);
    font-weight: var(--bzf-w-regular);
    line-height: var(--bzf-lh-body);
    letter-spacing: var(--bzf-ls-body);
}

/* Element selectors only. Bootstrap's .h1 .. .h6 classes are not used as
   heading classes here -- .h1 marks the outlined ghost layer inside
   .outlinetxt, whose whole contract is to match its twin -- so sizing them
   from this scale drives the ghost out of register with the solid text. */
h1 {
    font-size: var(--bzf-fs-h1);
    line-height: var(--bzf-lh-h1);
    letter-spacing: var(--bzf-ls-display);
    font-weight: var(--bzf-w-bold);
}

h2 {
    font-size: var(--bzf-fs-h2);
    line-height: var(--bzf-lh-h2);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
}

h3 {
    font-size: var(--bzf-fs-h3);
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-medium);
}

h4 {
    font-size: var(--bzf-fs-h4);
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-medium);
}

h5 {
    font-size: var(--bzf-fs-h5);
    line-height: var(--bzf-lh-heading);
    font-weight: var(--bzf-w-medium);
}

h6 {
    font-size: var(--bzf-fs-h6);
    line-height: var(--bzf-lh-heading);
    font-weight: var(--bzf-w-medium);
}

p,
li,
dd,
figcaption,
blockquote,
address {
    line-height: var(--bzf-lh-body);
}

/* .career p pins a 30px leading on every paragraph inside that wrapper, which
   is 2.3x on a 13px label and 1.6x on 18px copy — and the pages that do not
   use the wrapper get neither. A ratio reads the same everywhere. */
.career p {
    line-height: var(--bzf-lh-body);
    font-size: var(--bzf-fs-body);
}

/* The display treatments carry their own sizes from the legacy sheets. What
   they did not carry was tracking: Stolzl is materially wider than the
   condensed Oswald these were drawn for, so at 72px they set loose. */
body .outlinetxt, body .whitelinetxt, body .turst_txt {
    letter-spacing: var(--bzf-ls-display);
}

/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root {
    /* Brand */
    --bzf-red: #E52521;
    --bzf-red-bright: #FF4A46;
    --bzf-red-deep: #B3140F;
    --bzf-navy-deep: #071D3A;
    --bzf-navy: #0A2342;
    --bzf-navy-lift: #12365F;
    --bzf-navy-ink: #04122A;
    --bzf-white: #FFFFFF;
    --bzf-gray-soft: #F4F7FA;
    --bzf-gray-cool: #DCE5EF;
    --bzf-gray-line: #C9D6E5;

    /* Text */
    --bzf-ink: #071D3A;
    --bzf-ink-soft: #40566F;
    --bzf-ink-mute: #6E8299;
    --bzf-on-dark: #FFFFFF;
    --bzf-on-dark-soft: rgba(233, 240, 249, .74);

    /* Glass — light surfaces */
    --bzf-glass-l-bg: linear-gradient(148deg, rgba(255, 255, 255, .82), rgba(244, 247, 250, .58));
    --bzf-glass-l-brd: rgba(255, 255, 255, .85);
    --bzf-glass-l-ring: rgba(10, 35, 66, .09);
    --bzf-glass-l-hi: inset 0 1px 0 rgba(255, 255, 255, .95);

    /* Glass — navy surfaces */
    --bzf-glass-d-bg: linear-gradient(152deg, rgba(19, 54, 96, .72) 0%, rgba(7, 29, 58, .82) 52%, rgba(4, 18, 42, .9) 100%);
    --bzf-glass-d-brd: rgba(140, 176, 219, .22);
    --bzf-glass-d-hi: inset 0 1px 0 rgba(190, 214, 240, .16);

    /* Light "steel" material — the default surface for cards and slabs.
       Navy --bzf-metal below is now reserved for the few deliberately dark
       components (the statement band, the footer, the dark modal). */
    --bzf-steel: linear-gradient(150deg, #FFFFFF 0%, #F8FBFD 32%, #EFF4F9 68%, #E6EEF6 100%);
    --bzf-steel-brd: rgba(255, 255, 255, .9);

    /* Red-forward accents — red is the primary brand colour, so it carries
       the hairlines, seams, glows and interactive states site-wide. */
    --bzf-red-tint: rgba(229, 37, 33, .07);
    --bzf-red-line: rgba(229, 37, 33, .3);
    --bzf-lift-red: 0 10px 26px rgba(229, 37, 33, .13), 0 26px 58px rgba(229, 37, 33, .1);
    --bzf-seam-red: linear-gradient(90deg, transparent, var(--bzf-red), transparent);

    /* Solid navy material */
    --bzf-metal: linear-gradient(150deg, #17416F 0%, #0A2342 30%, #071D3A 66%, #04122A 100%);
    --bzf-metal-flat: linear-gradient(180deg, #0A2342 0%, #04122A 100%);

    /* Blur */
    --bzf-blur: saturate(150%) blur(18px);
    --bzf-blur-lg: saturate(160%) blur(28px);

    /* Elevation */
    --bzf-lift-1: 0 2px 6px rgba(7, 29, 58, .06), 0 10px 24px rgba(7, 29, 58, .07);
    --bzf-lift-2: 0 4px 12px rgba(7, 29, 58, .09), 0 20px 46px rgba(7, 29, 58, .12);
    --bzf-lift-3: 0 10px 24px rgba(7, 29, 58, .14), 0 36px 88px rgba(7, 29, 58, .2);
    --bzf-lift-dark: 0 14px 32px rgba(4, 18, 42, .34), 0 44px 100px rgba(4, 18, 42, .42);

    /* Red light */
    --bzf-glow-red: 0 0 0 1px rgba(229, 37, 33, .38), 0 0 26px rgba(229, 37, 33, .3);
    --bzf-glow-red-soft: 0 0 34px rgba(229, 37, 33, .22);

    /* Geometry */
    --bzf-r-sm: 10px;
    --bzf-r: 16px;
    --bzf-r-lg: 22px;

    /* Motion */
    --bzf-ease: cubic-bezier(.22, .61, .36, 1);
    --bzf-ease-out: cubic-bezier(.16, 1, .3, 1);
    --bzf-dur: .1s;
    /* the state change reads better a touch quicker than the house duration */
    --bzf-nav-dur: 120ms;
    --bzf-dur-slow: .2s;

    /* Layout */
    --bzf-header-h: 84px;
}

/* ==========================================================================
   02  BASE & TYPOGRAPHY
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

/* The header is fixed, so a fragment left its own target underneath it --
   the browser scrolls the element to the very top of the viewport and the
   bar is sitting there. Every anchorable element keeps the bar's height
   clear above it. scroll-margin only applies when something is scrolled
   into view, so this costs nothing anywhere else. */
[id] {
    scroll-margin-top: calc(var(--bzf-header-h) + var(--bzf-subnav-h, 0px) + 20px);
}

body {
    background: var(--bzf-white);
    color: var(--bzf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* `overflow-x: hidden` turns body into a scroll container, which makes
       every `position: sticky` descendant stick to body instead of the
       viewport — that silently broke the pinned solutions carousel. `clip`
       clips identically without creating a scroll container. The `hidden`
       line stays first as a fallback for browsers that lack `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

body ::selection {
    background: rgba(229, 37, 33, .16);
    color: var(--bzf-navy-deep);
}

/* Restrained technical scrollbar */
body ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

body ::-webkit-scrollbar-track {
    background: var(--bzf-gray-soft);
}

body ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2A5288, #0A2342);
    border-radius: 20px;
    border: 3px solid var(--bzf-gray-soft);
}

body ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--bzf-red), var(--bzf-red-deep));
}

/* Text colour rationalisation — legacy uses pure black / #333 everywhere */
body .text-dark,
body .text-black {
    color: var(--bzf-ink) !important;
}

body .redtxt,
body .blztxtred,
body .primary-color {
    color: var(--bzf-red) !important;
}

body p {
    color: var(--bzf-ink-soft);
}

body .text-white p,
body .text-white {
    color: inherit;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--bzf-ink);
    letter-spacing: -.01em;
}

/* The italic serif eyebrow used across the site */
body .timesitaly {
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--bzf-red);
}

/* Links */
body a {
    transition: color var(--bzf-dur) var(--bzf-ease);
}

/* ==========================================================================
   03  BACKGROUND SYSTEMS
   ========================================================================== */

/* Fine technical grid, used as a wash behind light sections */
.commonbg,
.bg_bc {
    position: relative;
    background: var(--bzf-white) !important;
}

.commonbg::before,
.bg_bc::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(10, 35, 66, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
}

.commonbg>*,
.bg_bc>* {
    position: relative;
    z-index: 1;
}

/* Soft light beams — one warm navy pool, one faint red pool */
.commonbg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(760px 420px at 88% 12%, rgba(229, 37, 33, .13), transparent 68%),
        radial-gradient(900px 520px at 6% 62%, rgba(229, 37, 33, .07), transparent 70%),
        radial-gradient(700px 460px at 50% 100%, rgba(16, 62, 116, .05), transparent 72%);
}

/* ==========================================================================
   04  GLASS PRIMITIVES
   Applied through the legacy class names below — no new markup required.
   ========================================================================== */

/* ==========================================================================
   05  HEADER — GLASS NAVIGATION
   ========================================================================== */
.header.fixedtop {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent;
    transition:
        background var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        backdrop-filter var(--bzf-dur) var(--bzf-ease);

    
  top: 15px;
  
    padding:0px 15px;
}

.header.fixedtop .navbar {
    padding-top: 0rem;
    padding-bottom: 0rem;
    border-radius: 16px;
   background: rgba(255, 255, 255, .72) !important;
    transition:
        background-color var(--bzf-nav-dur) var(--bzf-ease),
        background var(--bzf-nav-dur) var(--bzf-ease),
        box-shadow var(--bzf-nav-dur) var(--bzf-ease),
        -webkit-backdrop-filter var(--bzf-nav-dur) var(--bzf-ease),
        backdrop-filter var(--bzf-nav-dur) var(--bzf-ease);
    -webkit-backdrop-filter:  blur(.375rem);
    
    /* border-bottom: 1px solid rgba(10, 35, 66, .1); */
    /* box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px rgba(7, 29, 58, .1) !important; */
    backdrop-filter: blur(.375rem);
  border-radius: 1rem;
}

/* Scrolled state — frosted glass plate */
.header.fixedtop.fixedHeader {
    /* background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border-bottom: 1px solid rgba(10, 35, 66, .1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px rgba(7, 29, 58, .1) !important; */
    

}

/* .header.fixedtop.fixedHeader .navbar {
    padding-top: .5rem;
    padding-bottom: .5rem;
} */

.header.fixedtop .blaze_logo {
    transition:
        height var(--bzf-dur) var(--bzf-ease),
        filter var(--bzf-dur) var(--bzf-ease),
        opacity var(--bzf-nav-dur) var(--bzf-ease);
    height: 48px;
    width: auto;
}

.header.fixedtop.fixedHeader .blaze_logo {
    height: 40px;
}

/* Top-level links */
.header.fixedtop .navbar-nav>.nav-item>.nav-link,
.header.fixedtop .navbar-nav>.nav-item>span.nav-link {
    color: var(--bzf-ink) !important;
    /* Was .82rem/600 -- 13.1px, and 600 resolves to the Bold cut, so the whole
       navigation was set in Bold below the readable floor for a menu. Medium
       at the interface size, with uppercase tracking. */
    font-size: var(--bzf-fs-nav);
    font-weight: var(--bzf-w-medium);
    line-height: var(--bzf-lh-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .75rem 1.05rem !important;
    position: relative;
    white-space: nowrap;
    transition: color var(--bzf-nav-dur) var(--bzf-ease);
}

/* Red light seam under the active / hovered item */
.header.fixedtop .navbar-nav>.nav-item>.nav-link::after,
.header.fixedtop .navbar-nav>.nav-item>span.nav-link::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: .42rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--bzf-red), transparent);
    box-shadow: 0 0 12px rgba(229, 37, 33, .7);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform var(--bzf-dur) var(--bzf-ease-out);
}

.header.fixedtop .navbar-nav>.nav-item:hover>.nav-link::after,
.header.fixedtop .navbar-nav>.nav-item:focus-within>.nav-link::after,
.header.fixedtop .navbar-nav>.nav-item.show>.nav-link::after {
    transform: scaleX(1);
}

.header.fixedtop .navbar-nav>.nav-item>.nav-link:hover,
.header.fixedtop .navbar-nav>.nav-item>span.nav-link:hover,
.header.fixedtop .navbar-nav>.nav-item.show>.nav-link {
    color: var(--bzf-red) !important;
}

/* Mobile toggler */
.header.fixedtop .navbar-toggler {
    border: 1px solid rgba(10, 35, 66, .18);
    border-radius: var(--bzf-r-sm);
    padding: .45rem .6rem;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    outline: none;
    transition:
        background-color var(--bzf-nav-dur) var(--bzf-ease),
        border-color var(--bzf-nav-dur) var(--bzf-ease);
}

.header.fixedtop .navbar-toggler:focus {
    box-shadow: var(--bzf-glow-red);
}

/* ==========================================================================
   05b  ADAPTIVE HEADER -- DARK SURFACES
   The plate is transparent and sits over whatever section happens to be
   passing behind it. On this site's dark bands -- the WHY BLAZE band, the
   client rail, the Nexus and the footer -- the navy links and the black half
   of the wordmark both disappear into it.

   blaze-futura.js measures which surface is under the bar's own midline and
   puts bzf-nav-dark on the header; everything below is that one state. It is
   the state that is adaptive, not the layout: nothing here moves, resizes or
   repositions anything.

   The dark link colours are held back to >=992 on purpose. Below that the
   links live inside the white collapse sheet, which keeps its own identity
   whatever is behind the bar -- only the plate, the wordmark and the toggler
   change on a phone.
   ========================================================================== */
.header.fixedtop.bzf-nav-dark .navbar {
    /* .52 looked better over a plain dark band, but the Nexus puts a white
       panel behind the bar for most of its height and the plate composited to
       mid-grey there -- white text at 3.5:1. At .68 it is 6.3:1 over white and
       still reads as glass over the dark bands. */
    background: rgba(6, 24, 48, .68) !important;
    -webkit-backdrop-filter: blur(.75rem) saturate(1.15);
    backdrop-filter: blur(.75rem) saturate(1.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 1px rgba(150, 186, 228, .16),
        0 10px 30px rgba(2, 10, 24, .34) !important;
}

/* The two wordmarks are the same artwork at the same size -- the strapline is
   black in one and white in the other -- so one sits exactly on the other and
   the change is a crossfade rather than a swap. The red mark is identical in
   both and never moves. */
.header.fixedtop .navbar-brand {
    position: relative;
    display: inline-block;
}

.header.fixedtop .blaze_logo--dark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

.header.fixedtop.bzf-nav-dark .blaze_logo--dark {
    opacity: 1;
}

.header.fixedtop.bzf-nav-dark .blaze_logo:not(.blaze_logo--dark) {
    opacity: 0;
}

/* The two toggler assets are not the same kind of drawing, so they cannot be
   treated the same way. menu.png is a dark disc with white bars: on a dark
   plate the disc merges into it and the bars still read, so it is left alone
   -- inverting it produced a solid white blob. close.png is a dark X on
   transparency and would disappear, so that one does invert. */
.header.fixedtop.bzf-nav-dark .navbar-toggler {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(170, 200, 235, .34);
}

.header.fixedtop .navbar-toggler-icon {
    transition: filter var(--bzf-nav-dur) var(--bzf-ease);
}

.header.fixedtop.bzf-nav-dark .navbar-toggler-icon.close {
    filter: brightness(0) invert(1);
}

@media (min-width: 992px) {

    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item>.nav-link,
    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item>span.nav-link {
        color: #FFFFFF !important;
    }

    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item>.nav-link:hover,
    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item>span.nav-link:hover,
    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item.show>.nav-link {
        color: var(--bzf-red-bright) !important;
    }

    /* the seam keeps its job, one step brighter so it still reads on navy */
    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item>.nav-link::after,
    .header.fixedtop.bzf-nav-dark .navbar-nav>.nav-item>span.nav-link::after {
        background: linear-gradient(90deg, transparent, var(--bzf-red-bright), transparent);
        box-shadow: 0 0 14px rgba(255, 74, 70, .85);
    }
}

/* ==========================================================================
   06  MEGA MENU — floating glass sheet
   ========================================================================== */
.megamenu .dropdown-menu {
    border: 0 !important;
    background: transparent;
}

/* Legacy left the panel `position: relative`, so it sat inside the navbar's
   flex row and got squeezed to whatever space was left beside the logo.
   Take it out of flow and hang it under the header at full container width.
   `top: 100%` keeps it flush to the bar so the pointer never crosses a gap. */
@media (min-width: 992px) {
    .header.fixedtop .navbar-nav .megamenu {
        position: static;
    }

    .header.fixedtop .navbar-nav .megamenu .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        margin: 0;
        width: min(100%) !important;
        max-width: none;
        height: auto !important;
        max-height: none;
        /* Legacy animated width/height between two custom properties, which
           only resolved while the panel was a flex child. Now that it hangs
           off the header, a fade-and-rise is both simpler and predictable. */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) translateY(-10px);
        transition:
            opacity .3s var(--bzf-ease),
            transform .42s var(--bzf-ease-out),
            visibility .3s var(--bzf-ease);
    }

    .header.fixedtop .navbar-nav .megamenu .dropdown-menu.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}

/* The sheet itself becomes the glass surface.
   Legacy put `filter: drop-shadow(...)` on .dropdown-menu.show — a filter on
   an ancestor creates a new backdrop root, which is why the panel could never
   actually blur what was behind it. Swap the filter for a box-shadow. */
.navbar-expand-lg .navbar-nav .megamenu .dropdown-menu.show {
    filter: none !important;
    background: rgba(244, 247, 251, 1) !important;
    -webkit-backdrop-filter: saturate(170%) blur(30px);
    backdrop-filter: saturate(170%) blur(30px);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--bzf-r-lg);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(10, 35, 66, .06),
        0 34px 80px rgba(7, 29, 58, .22);
}

/* Red light seam across the top edge of the sheet */
.navbar-expand-lg .navbar-nav .megamenu .dropdown-menu.show::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--bzf-red), transparent);
    box-shadow: 0 0 14px rgba(229, 37, 33, .55);
    z-index: 2;
}

/* Content sits transparently on that glass.
   Legacy centred it with left:50% + translateX(-50%) at a fixed width wider
   than the panel, so the first column was clipped by the panel's overflow.
   Let it simply fill the panel; the rise-and-scale entrance is preserved. */
.megamenu .dropdown-menu.show .megacontent,
.megamenu .dropdown-menu .megacontent {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 20px 0px;
    left: 0;
    width: 100%;
    max-width: 100%;
}

/* The panel now owns the entrance animation, so the inner sheet stays put */
.megamenu .dropdown-menu .megacontent,
.megamenu .dropdown-menu.show .megacontent {
    transform: none;
    min-height: 0;
}

.megamenu .dropdown-menu .megacontent::before {
    display: none;
}

/* --- The sheet's three zones --------------------------------------------
   Left is a rail of directions, one of them current. Middle is that
   direction's work and nothing else. Right is what belongs to no direction:
   the standing invitation, and the three overview pages.

   Only the middle swaps, so the rail and the aside never move under the
   pointer -- the panel changes without the sheet redrawing itself.
   ---------------------------------------------------------------------- */
.bzf-mm {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0px;
    align-items: stretch;
}

.bzf-mm--co {
    grid-template-columns: 320px minmax(0, 1fr);
}

.bzf-mm__label {
    position: relative;
    margin: 0 0 12px;
    padding-left: 15px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-ink-mute);
}

/* Anchored to the first line rather than the box: at narrow widths these
   labels wrap, and a marker centred on the box lands between the lines. */
.bzf-mm__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: .43em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 0 3px rgba(229, 37, 33, .13);
}

/* --- left rail ---------------------------------------------------------- */
.bzf-mm__rail {
    min-width: 0;
    padding: 4px 0;
}

.bzf-mm__dirs {
    display: grid;
    gap: 3px;
    margin: 0;
}

.bzf-mm__dir {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__dir:hover,
.bzf-mm__dir:focus-visible,
.bzf-mm__dir.is-active {
    background: #FFFFFF;
    border-color: rgba(10, 35, 66, .07);
    /* box-shadow: 0 8px 22px rgba(7, 29, 58, .08); */
}

/* the card points at the panel it is showing */
.bzf-mm__dir.is-active::after {
    content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) rotate(45deg);
  background: #FFFFFF;
  border-top: 2px solid rgba(10, 35, 66, .07);
  border-right: 2px solid rgba(10, 35, 66, .07);
}

.bzf-mm__dirico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
    background: rgba(10, 35, 66, .05);
    color: var(--bzf-ink-soft);
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__dir:hover .bzf-mm__dirico,
.bzf-mm__dir.is-active .bzf-mm__dirico {
    background: rgba(229, 37, 33, .1);
    color: var(--bzf-red);
}

.bzf-mm__dirtxt {
    min-width: 0;
}

.bzf-mm__dirtxt strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bzf-ink);
}

.bzf-mm__dirtxt small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--bzf-ink-mute);
}

/* --- the white sheet ---------------------------------------------------- */
.bzf-mm__sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 35, 66, .06);
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: 0 14px 34px rgba(7, 29, 58, .07);
}

.bzf-mm--co .bzf-mm__sheet {
    grid-template-columns: minmax(0, 1fr);
}

.bzf-mm__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bzf-mm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.bzf-mm__head .bzf-mm__label {
    margin: 0;
}

.bzf-mm__all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bzf-red) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.bzf-mm__all i {
    transition: transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__all:hover i {
    transform: translateX(3px);
}

.bzf-mm__panel {
    display: none;
}

.bzf-mm__panel.is-active {
    display: block;
}

.bzf-mm__links {
    display: grid;
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    gap: 15px 0px;
    margin: 0;
    /* The middle is the shortest of the three columns whichever direction is
       current, so it is given a floor rather than left to collect the
       difference as a hole between the last link and the rule below it. */
    min-height: 172px;
    align-content: start;
    justify-content: start;
}

.bzf-mm__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bzf-ink) !important;
    text-decoration: none !important;
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__link i {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    color: var(--bzf-red);
    opacity: .7;
    transition: opacity var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__link:hover {
    background: rgba(229, 37, 33, .06);
    color: var(--bzf-red) !important;
}

.bzf-mm__link:hover i {
    opacity: 1;
}

.bzf-mm__new {
    flex: 0 0 auto;
    margin-left: auto;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bzf-red);
    background: rgba(229, 37, 33, .1);
    padding: 2px 6px;
    border-radius: 999px;
}

/* --- the footer strip --------------------------------------------------- */
.bzf-mm__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(10, 35, 66, .08);
}

.bzf-mm__foottxt strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bzf-ink);
}

.bzf-mm__foottxt p {
    margin: 4px 0 0;
    max-width: 46ch;
    font-size: 11.8px;
    line-height: 1.45;
    color: var(--bzf-ink-mute);
}

.bzf-mm__sales {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bzf-ink) !important;
    text-decoration: none !important;
    background: #FFFFFF;
    border: 1px solid rgba(10, 35, 66, .14);
    box-shadow: 0 6px 16px rgba(7, 29, 58, .07);
    transition:
        background var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease),
        transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__sales:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: #FFFFFF !important;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 46%, var(--bzf-red-deep) 100%);
}

/* --- right aside -------------------------------------------------------- */
.bzf-mm__aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px solid rgba(10, 35, 66, .08);
}

/* Not a video, so it is not dressed as one -- no play button, no runtime.
   It is the one picture in the menu and it links where it says it does. */
.bzf-mm__media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 134px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    filter: saturate(.78);
    transition: filter var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__media:hover {
    filter: saturate(1.06);
}

.bzf-mm__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 14, 30, .82) 0%, rgba(4, 14, 30, .12) 58%, transparent 100%);
}

.bzf-mm__media h3,
.bzf-mm__media span {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
    margin: 0;
}

.bzf-mm__media h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.bzf-mm__media span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    opacity: .88;
}

.bzf-mm__media span i {
    transition: transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__media:hover span i {
    transform: translateX(4px);
}

.bzf-mm__more {
    display: grid;
    gap: 2px;
    margin: 0;
}

.bzf-mm__more a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background-color var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__more a:hover {
    background: rgba(229, 37, 33, .06);
}

.bzf-mm__more i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1;
    color: var(--bzf-red);
    opacity: .7;
}

.bzf-mm__more span {
    min-width: 0;
}

.bzf-mm__more strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bzf-ink);
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.bzf-mm__more a:hover strong {
    color: var(--bzf-red);
}

.bzf-mm__more small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--bzf-ink-mute);
}

/* --- Company: where these people are ------------------------------------ */
.bzf-mm__flags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 12px;
    margin: 0 0 4px;
    align-content: start;
}

.bzf-mm__flags li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--bzf-ink);
}

.bzf-mm__flags img {
    flex: 0 0 auto;
    width: 22px;
    height: auto;
}

/* --- The sheet, narrower ------------------------------------------------- */
@media (max-width: 1199.98px) {

    .bzf-mm {
        grid-template-columns: 262px minmax(0, 1fr);
        gap: 16px;
    }

    .bzf-mm--co {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .bzf-mm__sheet {
        grid-template-columns: minmax(0, 1fr) 244px;
        padding: 20px 22px;
    }

    .bzf-mm__aside {
        margin-left: 20px;
        padding-left: 20px;
    }

    .bzf-mm__dirtxt small {
        font-size: 11px;
    }

    .bzf-mm__link {
        font-size: 13px;
        padding: 8px 10px;
        gap: 9px;
    }

    .bzf-mm__media {
        height: 138px;
    }
}

/* --- Inside the mobile collapse ------------------------------------------
   No pointer to hover with, so the rail becomes a stack of cards you tap and
   the panel below answers. The active card keeps its white surface -- it is
   the only thing saying which set of links you are looking at -- but loses the
   sideways notch, which now points at nothing.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .bzf-mm,
    .bzf-mm--co {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bzf-mm__rail {
        padding: 0;
    }

    .bzf-mm__dir.is-active::after {
        display: none;
    }

    .bzf-mm__sheet {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
        border-radius: 14px;
    }

    .bzf-mm__links {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .bzf-mm__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bzf-mm__aside {
        margin: 18px 0 0;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(10, 35, 66, .08);
    }

    .bzf-mm__media {
        height: 130px;
    }

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

    /* The collapse paints every <p> in it with the body ink so mobile links
       stay legible on the white sheet. A label is not body copy. */
    .header.fixedtop .navbar-collapse .bzf-mm__label {
        color: var(--bzf-ink-mute) !important;
    }

    .header.fixedtop .navbar-collapse .bzf-mm__foottxt p {
        color: var(--bzf-ink-mute) !important;
    }
}

@media (max-width: 575.98px) {

    /* Not enough width for the label and the link side by side without the
       label breaking to three lines, so the link takes its own row. */
    .bzf-mm__head {
        flex-wrap: wrap;
        gap: 6px 16px;
    }

    .bzf-mm__head .bzf-mm__label {
        flex: 1 1 100%;
    }

    .bzf-mm__all {
        margin-left: auto;
    }

    .bzf-mm__flags {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Page scrim behind an open mega menu --------------------------------
   Injected once by blaze-futura.js. Sits under the header (z-index 99) so the
   bar and the panel stay sharp while the page behind them blurs. */
.bzf-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 18, 42, .34);
    -webkit-backdrop-filter: saturate(115%) blur(11px);
    backdrop-filter: saturate(115%) blur(11px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .38s var(--bzf-ease),
        visibility .38s var(--bzf-ease);
}

body.bzf-menu-open .bzf-menu-scrim {
    opacity: 1;
    visibility: visible;
}

/* Keep the header above the scrim while a panel is open */
body.bzf-menu-open .header.fixedtop {
    z-index: 120;
}

@media (max-width: 991.98px) {

    /* The mobile panel is a sheet in the collapse, not an overlay */
    .bzf-menu-scrim {
        display: none;
    }
}

/* ==========================================================================
   07  HERO SLIDER
   ========================================================================== */
.slider {
    position: relative;
    background: var(--bzf-white);
}

/* Header now floats over the hero */
.homeslider {
    margin: 0 !important;
}

.homeslider .carousel-inner .carousel-item {
    /* 25% shorter than it was (86vh / 600-820px). The hero was taking most
       of the first screen before anything below it could be seen, and the
       copy inside it was never using that room. Trimmed with it, further
       down, is the vertical rhythm of the slides themselves, so this is a
       proportional reduction and not the same content squeezed into less. */
    height: clamp(490px, 64.5vh, 615px);
    background-color: var(--bzf-gray-soft);
}

/* Slide 1 — the enterprise technology environment */
.homeslider .carousel-item.first_slide {
    background:
        linear-gradient(97deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 30%, rgba(255, 255, 255, .28) 48%, transparent 66%),
        url(../images/futura/hero-enterprise.webp) no-repeat center right / cover !important;
}

/* Slide 3 — blockchain */
.homeslider .carousel-item.second_slide {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .7) 46%, rgba(244, 247, 250, .9) 100%),
        url(../images/futura/tech-blockchain-light.webp) no-repeat center center / cover !important;
}

/* Ambient depth over every slide: grid floor + light pools */
.homeslider .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 520px at 78% 78%, rgba(229, 37, 33, .14), transparent 66%),
        linear-gradient(to right, rgba(10, 35, 66, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .04) 1px, transparent 1px);
    background-size: auto, 96px 96px, 96px 96px;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 55%);
    mask-image: linear-gradient(to top, #000 0%, transparent 55%);
}

.homeslider .carousel-caption {
    z-index: 3;
}

/* Slide 1 headline column.

   The caption's positioning parent is the slide's .container, and that
   container's only child is this absolutely-positioned caption — so it
   collapses to zero height and a percentage `bottom` resolves against
   nothing, stranding the block at the top of the slide behind the header.
   Legacy also pins `top` with !important inside its own breakpoints.

   Rather than out-specify all of that, take the caption out of absolute
   positioning and let the (now full-height) container centre it in normal
   flow. Correct at every viewport height, with no hand-tuned offsets. */
.homeslider .carousel-item.first_slide>.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* clear the floating header so the headline can never collide with it */
    padding-top: var(--bzf-header-h);
}

.slider .carousel-caption.first_slide {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: min(620px, 52%);
    text-align: left;
}

.slider .carousel-caption.first_slide .outlinetxt {
    text-align: left;
    font-size: clamp(38px, 4.4vw, 68px);
    line-height: .96;
}

.slider .carousel-caption.first_slide p {
    text-align: left;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.5;
    color: var(--bzf-ink-soft);
    max-width: 34ch;
    margin-top: 16px;
    padding-left: 18px;
    border-left: 2px solid var(--bzf-red);
}

/* Carousel controls — glass pucks */
.slider .carousel-control-prev,
.slider .carousel-control-next {
    width: 74px;
    opacity: 1;
    z-index: 4;
}

.slider .carousel-control-prev-icon,
.slider .carousel-control-next-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--bzf-lift-1), var(--bzf-glass-l-hi);
    color: var(--bzf-navy);
    font-size: 20px;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.slider .carousel-control-prev:hover .carousel-control-prev-icon,
.slider .carousel-control-next:hover .carousel-control-next-icon {
    background: var(--bzf-red) !important;
    border-color: var(--bzf-red-bright);
    color: #fff;
    box-shadow: var(--bzf-glow-red);
}

.slider .carousel-control-prev-icon i,
.slider .carousel-control-next-icon i {
    color: inherit;
}

.homeslider .carousel-item.mcp-banner .carousel-caption {
    z-index: 3;
}

.slider .mcp-banner .txt h2,
.slider .mcp-banner .txt h4 {
    color: #fff;
}

.slider .mcp-banner .txt p {
    color: rgba(255, 255, 255, .9);
}

.slider .mcp-banner .btns .btn {
    border-radius: var(--bzf-r-sm);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all var(--bzf-dur) var(--bzf-ease);
}

/* Blockchain slide chips become glass */
.blogosec .blsbox>div {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--bzf-lift-1), var(--bzf-glass-l-hi);
    border-radius: 999px;
    padding: 8px 18px;
    color: var(--bzf-navy-deep);
    font-weight: 600;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.blogosec .blsbox>div:hover {
    box-shadow: var(--bzf-lift-2), var(--bzf-glow-red-soft);
    transform: translateY(-3px);
}

/* --- Award laurel (slide 1) ---------------------------------------------
   Laid out like a film-festival laurel: mirrored branches flanking a small
   caption over a rule, with the years as the hero line. */
.bzf-award {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1vw, 14px);
    margin-top: 16px;
}

.bzf-award__laurel {
    flex: 0 0 auto;
    width: clamp(42px, 4.2vw, 58px);
    height: auto;
    display: block;
}

.bzf-award__laurel--r {
    transform: scaleX(-1);
}

.bzf-award__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    padding: 0 4px;
}

.bzf-award__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: var(--bzf-fs-label);
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-navy-deep);
    line-height: 1.25;
}

.bzf-award__eyebrow::before,
.bzf-award__eyebrow::after {
    content: "\2605";
    color: var(--bzf-red);
    font-size: 11px;
    line-height: 1;
}

.bzf-award__rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 37, 33, .6) 18%, rgba(229, 37, 33, .6) 82%, transparent);
}

.bzf-award__years {
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.05;
    color: var(--bzf-red);
}

/* --- Slide 2: MCP — the red plate brought inside the frame --------------
   The wedge was painted on the slide at 48% of the *viewport* while the copy
   was laid out inside a .container capped at 1140px. The two never agreed: at
   1440 the paragraph crossed the diagonal and finished as near-white text on
   white, and the wider the screen the worse it got. On top of that .txt and
   .img were 50% and 55% of the same row — 105%, so the diagram always
   overlapped the copy — and the red reached the top-left corner, where the
   red BLAZE mark in the fixed header vanished into it.

   All three are one mistake: full-bleed paint under container-bound content.
   The plate moves inside the container and becomes the left half of a single
   framed panel. The slant survives as the panel's internal seam, the copy
   gets real padding to sit in, and the header keeps a light ground under it
   at every width. */
.homeslider .carousel-item.mcp-banner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(240, 246, 251, .88) 100%),
        url(../images/futura/tech-cloud-light.webp) no-repeat center center / cover !important;
}

.homeslider .carousel-item.mcp-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(1180px 660px at 76% 56%, rgba(229, 37, 33, .12), transparent 72%),
        linear-gradient(to right, rgba(10, 35, 66, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .04) 1px, transparent 1px);
    background-size: auto, 92px 92px, 92px 92px;
}

/* Bootstrap pins the caption 20% up from the bottom and insets it 15% each
   side; both fight a panel that wants the frame. */
.homeslider .carousel-item.mcp-banner .carousel-caption {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: calc(var(--bzf-header-h) + 22px) 0 44px !important;
    /* .d-md-block in the markup carries display:block !important */
    display: flex !important;
    align-items: center;
    z-index: 3;
}

.homeslider .carousel-item.mcp-banner .carousel-caption>.container {
    width: 100%;
}

/* No panel. A rounded card floating in the middle of the frame turned the
   hero into a wall with a poster on it, and half of that card was flat brand
   red -- a slab doing the job an accent should do. Both halves are drawn
   straight on the slide ground now; the red is a pool of light behind the
   diagram and one rule above the headline. */
.slider .mcp-banner .carousel-caption .d-flex {
    position: relative;
    align-items: center !important;
    gap: clamp(20px, 2.4vw, 44px);
    min-height: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
}

.slider .mcp-banner .txt {
    /* width: 54% !important; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
    text-align: left;
    background: none;
    clip-path: none;
}

.slider .mcp-banner .txt h2 {
    position: relative;
    color: var(--bzf-ink) !important;
    font-size: clamp(32px, 3.4vw, 50px) !important;
    line-height: 1.04 !important;
    margin-bottom: 14px;
    padding-top: 26px;
}

/* the whole red budget of the copy column, above the line it belongs to */
.slider .mcp-banner .txt h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: var(--bzf-red);
}

/* On red this word had to step back to 58% white to stay legible. On the
   light ground it can be the accent it was written as. */
.slider .mcp-banner .txt h2 span {
    color: var(--bzf-red) !important;
}

.slider .mcp-banner .txt h4 {
    color: var(--bzf-ink) !important;
    font-size: clamp(17px, 1.5vw, 22px) !important;
    line-height: 1.3 !important;
    font-weight: 500;
    margin-bottom: 18px !important;
}

.slider .mcp-banner .txt p {
    color: var(--bzf-ink-soft) !important;
    font-size: clamp(14.5px, 1.15vw, 17px) !important;
    line-height: 1.6 !important;
    max-width: 46ch;
    margin-bottom: 28px;
}

.slider .mcp-banner .txt p span {
    color: var(--bzf-ink) !important;
    font-weight: 700;
}

.slider .mcp-banner .btns {
    margin: 0;
}

/* the ground went light, so the button inverts: it is now the solid object */
.slider .mcp-banner .btns .btn {
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 46%, var(--bzf-red-deep) 100%) !important;
    border: 0 !important;
    border-radius: 999px;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 26px !important;
    padding: 12px 28px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 12px 28px rgba(229, 37, 33, .34);
}

.slider .mcp-banner .btns .btn img {
    filter: brightness(0) invert(1);
    height: 20px;
    width: auto;
    margin-right: 10px;
}

.slider .mcp-banner .btns .btn:hover {
    background: var(--bzf-navy-deep) !important;
    color: #fff !important;
    box-shadow: 0 16px 32px rgba(4, 18, 42, .34);
}

.slider .mcp-banner .btns .btn:hover img {
    filter: brightness(0) invert(1);
    transform: none;
}

/* The diagram is the artefact, not the contents of a box: no frame, no
   border, no plate. It is a fixed 720x420 drawing, so the column reserves the
   scaled height and the drawing is scaled to fit rather than reflowed --
   nothing inside it is restyled. */
.slider .mcp-banner .img {
    --bzf-mcp-k: .9;
    position: relative;
    /* width: 46% !important;
    max-width: 46%; */
    height: calc(420px * var(--bzf-mcp-k));
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.slider .mcp-banner .img .diagram {
    flex: 0 0 auto;
    transform: scale(var(--bzf-mcp-k));
    transform-origin: 50% 50%;
}

/* ==========================================================================
   07a-2  THE MCP DIAGRAM IN BRAND COLOUR
   The drawing ships in mint: newstyles.css:913 onward paints it with
   var(--green), which resolves to Bootstrap's #28a745, plus a set of hard
   mint hexes. Nothing here changes the drawing -- only what it is drawn in.

   var(--ring-bg) is never defined anywhere in the sheet, so every declaration
   that used it was invalid and dropped whole. That is why the hub had no ring
   and never pulsed; defining it here brings both back.

   The two keyframe sets carry colour of their own and keyframes cannot be
   scoped, so they are restated under new names and the elements are pointed
   at those rather than the mint originals.

   Scoped to .mcp-banner rather than .slider .mcp-banner: the same drawing
   is carried twice, by the homepage slide and by the MCP page's own hero,
   and only the slide was being reached. On the MCP page the hub had lost
   its ring outright to that undefined var, and the pulsing dot behind it
   was picking up #e62828 by accident -- it lands on :nth-child(2), and
   blaze-css.css paints the second dot of its own unrelated loader red.
   Both are deliberate now. .diagram appears in no other markup.
   ========================================================================== */
.mcp-banner .diagram {
    --green: var(--bzf-red);
    --ring-bg: #FCE7E6;
}

/* the dashed idle wire: present, but never competing with the live pulse */
.mcp-banner .diagram .wire {
    stroke: #EFB9B7;
}

.mcp-banner .diagram .pulse-line {
    stroke: var(--bzf-red);
    filter: drop-shadow(0 0 5px rgba(229, 37, 33, .8));
}

.mcp-banner .diagram .node {
    box-shadow:
        0 0 0 6px #FCE7E6,
        0 0 0 8px var(--bzf-red),
        0 10px 24px rgba(229, 37, 33, .24);
}

.mcp-banner .diagram .window .node {
    box-shadow:
        inset 0 4px 10px rgba(4, 18, 42, .1),
        0 0 0 2px #F0D2D1;
}

.mcp-banner .diagram .dot {
    background: var(--bzf-red);
    animation-name: bzf-mcp-blink;
}

@keyframes bzf-mcp-blink {

    0%,
    100% {
        transform: scale(1.05);
        box-shadow: 0 0 0 0 rgba(229, 37, 33, .55);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 6px rgba(229, 37, 33, 0);
    }
}

.mcp-banner .diagram .hub {
    box-shadow:
        0 0 0 8px #FCE7E6,
        0 0 0 9px #F7C9C7,
        0 12px 30px rgba(229, 37, 33, .16);
    animation-name: bzf-mcp-hub;
}

@keyframes bzf-mcp-hub {

    0%,
    100% {
        box-shadow: 0 0 0 8px #FCE7E6, 0 0 0 9px #F7C9C7, 0 0 0 0 rgba(229, 37, 33, .42);
    }

    70% {
        box-shadow: 0 0 0 8px #FCE7E6, 0 0 0 9px #F7C9C7, 0 0 0 22px rgba(229, 37, 33, 0);
    }
}

.mcp-banner .diagram .hub .h {
    color: var(--bzf-red);
}

.mcp-banner .diagram .hub .s {
    color: var(--bzf-navy-deep);
}

.mcp-banner .diagram .window {
    border-color: var(--bzf-red);
}

/* the three window dots: one live, two spent */
.mcp-banner .diagram .window::before {
    background: var(--bzf-red);
    box-shadow: 14px 0 0 #F7C9C7, 28px 0 0 #F0DDDC;
}

.mcp-banner .diagram .window::after {
    background: var(--bzf-red);
}

/* stroke wins over the presentation attribute in the markup */
.mcp-banner .diagram .cloud {
    stroke: rgba(179, 20, 15, .3);
}

/* ==========================================================================
   07b  DRAFTING TABLE  (slides 3 and 4)
   These two were the only dark slides left once 1 and 2 went light, so the
   hero read as two different sites shuffled together. They are drawn on
   paper now: a near-white ground with the photograph pushed back to a
   watermark and a drafting grid over it.

   The rules the two share: ink is navy and red is the annotation, never a
   field; anything that is a group or a sequence hangs off one hairline with
   red nodes on it; objects are outlined rather than filled; one shadow depth
   for anything that floats; and no brand red under the header logo.
   ========================================================================== */

/* --- Slide 3: expertise left, stack right -------------------------------- */
/* Two zones on one sheet. The left states what BLAZE is and can prove; the
   right states what it builds on. A hairline with a red node at its midpoint
   is the whole separation -- a panel or a fill would box in a composition
   whose whole point is air. */
.homeslider .carousel-item.second_slide {
    background:
        linear-gradient(158deg, rgba(255, 255, 255, .97) 0%, rgba(249, 251, 253, .95) 46%, rgba(240, 244, 249, .97) 100%),
        url(../images/futura/tech-blockchain-light.webp) no-repeat center center / cover !important;
}

/* Grid, glow, and nothing else. The pool sits low and right: at 14% 10% it
   was directly under the red BLAZE mark in the header. */
.homeslider .carousel-item.second_slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(1100px 620px at 82% 76%, rgba(255, 74, 70, .16), transparent 68%),
        radial-gradient(760px 460px at 62% 18%, rgba(229, 37, 33, .07), transparent 70%),
        linear-gradient(to right, rgba(10, 35, 66, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .04) 1px, transparent 1px);
    background-size: auto, auto, 88px 88px, 88px 88px;
}

/* Legacy drops this caption at top:10% with no width of its own, which is
   how the headline ended up under the logo. It takes the whole frame and
   centres its own container-width column instead. */
.slider .second_slide .carousel-caption.leftsidetxt {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(var(--bzf-header-h) + 28px) 0 48px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    z-index: 3;
}

.slider .second_slide .bzf-chain {
    position: relative;
    width: var(--bzf-content);
    max-width: var(--bzf-content);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(38px, 5vw, 82px);
    text-align: left;
}

/* the separation: a hairline that brightens to red where the two meet */
.slider .second_slide .bzf-chain::before {
    content: "";
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: calc(50% - .5px);
    width: 1px;
    background: linear-gradient(180deg,
            transparent,
            rgba(10, 35, 66, .12) 18%,
            rgba(229, 37, 33, .7) 50%,
            rgba(10, 35, 66, .12) 82%,
            transparent);
    pointer-events: none;
}

/* --- left: the claim and what backs it ---------------------------------- */
.slider .second_slide .bzf-chain__lead {
    min-width: 0;
}

.slider .second_slide h2.stbcont {
    /* Two lines, not three. The cap is what "EXPERTISE SINCE 2016" measures
       at in half the container; the 3vw middle term takes it down in step with
       the narrower Bootstrap container below 1200 so it never gains a line. */
    font-size: clamp(26px, 3vw, 44px) !important;
    line-height: 1.04;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--bzf-ink) !important;
    text-align: left !important;
    margin: 0 0 34px !important;
    max-width: none;
    padding: 24px 0 0;
    position: relative;
}

/* the eyebrow this headline never had: a rule, not a word, because the copy
   is not mine to add to */
.slider .second_slide h2.stbcont::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--bzf-red);
}

/* Section labels: the same mark the Nexus uses, so a label reads as a label
   anywhere on the site. */
.slider .second_slide .bzf-chain__label {
    position: relative;
    /* legacy centres every <p> in a caption below md, which stranded the
       marker at the far left of a centred line */
    text-align: left !important;
    margin: 0 0 14px;
    padding-left: 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-ink-mute);
}

.slider .second_slide .bzf-chain__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 0 3px rgba(229, 37, 33, .14);
}

.slider .second_slide .bzf-chain__cred {
    margin-bottom: 30px;
}

/* The enterprise ledger credential: one pill, both marks, one word. */
.slider .second_slide .bzf-chain__plate {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(10, 35, 66, .1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 10px 26px rgba(10, 35, 66, .07);
}

.slider .second_slide .bzf-chain__plate img {
    width: clamp(28px, 2.4vw, 36px);
    height: clamp(28px, 2.4vw, 36px);
    object-fit: contain;
}

.slider .second_slide .bzf-chain__plate span {
    font-size: clamp(14px, 1.15vw, 17px);
    font-weight: 700;
    color: var(--bzf-ink);
    white-space: nowrap;
}

.slider .second_slide .bzf-chain__badges {
    display: flex;
    align-items: center;
    gap: 18px;
}

.slider .second_slide .bzf-chain__badges img {
    height: clamp(58px, 5vw, 76px);
    width: auto;
}

/* --- right: the stack --------------------------------------------------- */
.slider .second_slide .bzf-chain__stack {
    min-width: 0;
}

.slider .second_slide .bzf-chain__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* One chain, one pill. Consistent height whatever is inside it, so the grid
   reads as a set rather than eight separate objects. */
.slider .second_slide .bzf-chip {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: clamp(56px, 4.6vw, 66px);
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(10, 35, 66, .1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 8px 22px rgba(10, 35, 66, .06);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.slider .second_slide .bzf-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 37, 33, .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 14px 30px rgba(10, 35, 66, .1);
}

.slider .second_slide .bzf-chip img {
    flex: 0 0 auto;
    width: clamp(26px, 2.1vw, 32px);
    height: clamp(26px, 2.1vw, 32px);
    object-fit: contain;
}

/* Cadence ships as a wordmark, not a square mark, so the logo slot carries a
   marker rather than an icon invented to sit in it. */
.slider .second_slide .bzf-chip__mark {
    flex: 0 0 auto;
    width: clamp(26px, 2.1vw, 32px);
    height: clamp(26px, 2.1vw, 32px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, var(--bzf-red) 0 30%, transparent 32%),
        rgba(229, 37, 33, .09);
}

.slider .second_slide .bzf-chip span {
    min-width: 0;
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bzf-ink);
}

/* --- Slide 4: the build process ----------------------------------------- */
.homeslider .carousel-item.third_slider {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .96) 0%, rgba(248, 251, 253, .94) 50%, rgba(237, 243, 249, .96) 100%),
        url(../images/futura/tech-ai-light.webp) no-repeat center center / cover !important;
}

.homeslider .carousel-item.third_slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(960px 520px at 74% 76%, rgba(229, 37, 33, .12), transparent 70%),
        linear-gradient(to right, rgba(10, 35, 66, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .045) 1px, transparent 1px);
    background-size: auto, 84px 84px, 84px 84px;
}

.slider .third_slider .leftsidetxt {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(var(--bzf-header-h) + 22px) 0 44px !important;
    justify-content: center !important;
    z-index: 3;
}

/* No console. What is on this slide is a sequence: a person, a hand-off, six
   steps. Everything is drawn straight on the ground, and the only structure
   is a rail, a divider and six nodes. */
.slider .third_slider .brsslidecont {
    width: var(--bzf-content);
    max-width: 1240px;
    height: 100% !important;
    max-height: 100%;
    /* legacy centres the children, so the left column never filled the frame */
    align-items: stretch;
    margin: 0 auto;
    border-radius: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
}

/* Both columns carry height:100%, which resolves to auto inside the
   auto-height caption and defeats the stretch above. */
.slider .third_slider .yhai,
.slider .third_slider .biboxes {
    height: auto !important;
    align-self: stretch;
}

.slider .third_slider .yhai {
    position: relative;
    width: 24%;
    background: none !important;
    align-items: flex-start !important;
    justify-content: center;
    gap: 22px;
    padding: 10px clamp(22px, 2.8vw, 48px) 10px 0 !important;
    box-shadow: none;
}

/* The hand-off. A hairline that brightens to red where the two sides meet is
   the whole divider -- it used to be the edge of a red slab. */
.slider .third_slider .yhai::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    left: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
            transparent,
            rgba(10, 35, 66, .14) 20%,
            rgba(229, 37, 33, .75) 50%,
            rgba(10, 35, 66, .14) 80%,
            transparent);
    pointer-events: none;
}

.slider .third_slider .yhai>h2 {
    color: var(--bzf-red);
    letter-spacing: var(--bzf-ls-label);
    font-size: 12px;
    margin: 0;
}

.slider .third_slider .yhai .baidea {
    flex: 0 0 auto;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 18px;
}

/* Black line art on a transparent ground -- on paper it needs nothing done
   to it. The invert it carried was there to survive the navy. */
.slider .third_slider .yhai .baidea img {
    /* legacy sizes this at 100px, which on paper is a heavy black drawing
       shouting over a 28px line of navy */
    width: clamp(58px, 5vw, 78px);
    filter: none;    
}

.slider .third_slider .yhai .baidea h2.h1 {
    color: var(--bzf-ink) !important;
    text-align: left;
    line-height: 1.08;
}

.slider .third_slider .biboxes {
    flex: 1;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    justify-content: center;
    padding: 34px 0 34px clamp(26px, 3vw, 56px) !important;
}

.slider .third_slider .biboxes>h2 {
    color: var(--bzf-ink);
    letter-spacing: .3em;
    font-size: clamp(18px, 1.8vw, 26px);
    margin: 0;
}

.slider .third_slider .biboxes>h2 .clr21a36f {
    color: var(--bzf-red) !important;
}

/* The brace was a black line drawing faded to 16% and it never lined up with
   the numerals anyway. The drop it was standing in for is drawn properly,
   into the rail the numerals sit on. */
.slider .third_slider .lcbraces {
    height: 30px;
    width: 100%;
    overflow: visible;
    position: relative;
}

.slider .third_slider .lcbraces img {
    display: none;
}

.slider .third_slider .lcbraces::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 1px;
    /* runs past the end of .lcbraces to meet the rail 30px into the list */
    height: 58px;
    background: linear-gradient(180deg, rgba(10, 35, 66, .08), rgba(229, 37, 33, .6));
}

.slider .third_slider .bisubboxes {
    width: 100%;
    margin: 0 !important;
}

.slider .third_slider .bisubboxes ul {
    position: relative;
    display: flex !important;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* The rail, running through the numerals. Six cards became six marks on one
   line: the sequence is the object now, not six objects in a row. */
.slider .third_slider .bisubboxes ul::before {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 37, 33, .42) 8%, rgba(229, 37, 33, .42) 92%, transparent);
}

/* Open cells. No fill, no border, no radius, no shadow. */
.slider .third_slider .bisubboxes ul .bisbox {
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto !important;
    /* clears every legacy nth-child offset in one declaration */
    margin: 30px 0 0 0 !important;
    padding: 30px 10px 0 !important;
    justify-content: flex-start;
    background: none !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* No lift: the numeral is a child of the cell and a transform would carry it
   off the rail. The cell brightens in place instead. */
.slider .third_slider .bisubboxes ul .bisbox:hover {
    transform: none;
    box-shadow: none !important;
}

.slider .third_slider .bisubboxes ul .bisbox:hover img {
    opacity: 1;
}

.slider .third_slider .bisubboxes ul .bisbox:hover h4 {
    color: var(--bzf-red);
}

/* The step marks are navy line art with red accents -- exactly what they were
   drawn for. The invert that carried them on the navy is gone. */
.slider .third_slider .bisbox img {
    width: clamp(40px, 3.5vw, 54px) !important;
    margin: 0 auto 14px !important;
    filter: none;
    opacity: .88;
    transition: opacity var(--bzf-dur) var(--bzf-ease);
}

/* A node on the rail rather than a badge floating above a card. The ring is
   the slide's own ground, which is what keeps the rail from running through
   the numeral. */
.slider .third_slider .bisboxnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    background: linear-gradient(150deg, #FF6E6A 0%, var(--bzf-red) 45%, var(--bzf-red-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        0 6px 16px rgba(229, 37, 33, .32),
        0 0 0 6px rgba(248, 251, 253, .95);
}

.slider .third_slider .bisubboxes ul .bisbox h4 {
    color: var(--bzf-ink);
    font-size: clamp(13px, 1.15vw, 17px);
    line-height: 1.2;
    margin-bottom: 8px;
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.slider .third_slider .bisubboxes ul .bisbox p {
    color: var(--bzf-ink-mute);
    font-size: clamp(11.5px, .95vw, 13.5px);
    line-height: 1.45;
}
/* ==========================================================================
   08  SIGNATURE OUTLINE HEADLINE
   The site's identity mark: a solid word with an offset outlined ghost.
   Kept — restated in the new palette with a cleaner stroke.
   ========================================================================== */
/* Base colour stays Blaze Red so the bare "z" in "Bla-z-e" keeps its accent —
   the surrounding letters carry .text-dark / .text-black and resolve to navy. */
.outlinetxt {
    color: var(--bzf-red);
    font-weight: 800;
    letter-spacing: -.015em;
    /* Stolzl sets wider than the condensed Oswald these headings were sized
       for, so more of them wrap — 1.02 leading was unreadable on two lines. */
    line-height: 1.1;
}

.outlinetxt .h1 {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(229, 37, 33, .55);
    top: 3px;
    left: 3px;
    right: auto;
    /* The ghost is absolutely positioned, so without an explicit width it
       shrink-wraps and breaks its lines somewhere different from the solid
       text underneath — very visible now the wider Stolzl makes headings
       wrap. Matching the parent's width keeps the two in register. */
    width: 100%;
    /* Measured, one ghost was riding at 45px under a 50px twin. Size is part
       of the same contract as the tracking below: anything of its own makes
       the ghost measure differently from the solid twin and wrap at a
       different word. It must inherit. */
    font-size: inherit;
    /* Any tracking of its own makes the ghost measure differently from the
       solid twin and wrap at a different word. It must inherit. */
    letter-spacing: inherit;
    /* Legacy hard-codes text-align:center on the ghost. Wherever the solid
       twin is left-aligned the two drift apart — and once they wrap, each
       ghost line centres itself independently. Inherit instead. */
    text-align: inherit;
    /* Bootstrap's .h1 class carries its own line-height and margin, which
       pushed the outlined ghost off its solid twin. Re-align to the parent. */
    line-height: inherit;
    margin: 0;
    font-weight: inherit;
}

/* Red variant */
.sred .outlinetxt,
.sred .outlinetxt .h1 {
    color: var(--bzf-red);
    -webkit-text-stroke-color: rgba(229, 37, 33, .5);
}

.sred .outlinetxt .h1 {
    color: transparent;
}

/* Navy variants — the old green / voilet / sblue / orange are unified */
.green .outlinetxt,
.voilet .outlinetxt,
.sblue .outlinetxt,
.orange .outlinetxt {
    color: var(--bzf-navy-deep);
}

.green .outlinetxt .h1,
.voilet .outlinetxt .h1,
.sblue .outlinetxt .h1,
.orange .outlinetxt .h1 {
    color: transparent;
    -webkit-text-stroke-color: rgba(10, 35, 66, .42);
}

/* On dark grounds */
.whitelinetxt {
    color: var(--bzf-white);
}

.whitelinetxt .h1 {
    color: transparent;
    -webkit-text-stroke-color: rgba(255, 255, 255, .45);
}

/* --- Justification ------------------------------------------------------
   Nine paragraphs are set justified by the legacy sheets. Justified text with
   no hyphenation needs a wide column to absorb the extra space; below the
   tablet breakpoint these columns are 300-440px and the result is rivers of
   white running down the middle of the copy. They set ragged-right there.
   The desktop columns are wide enough to carry it, so those are left as
   designed.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {

    .servicebox .sertxt p,
    .client_carousel p,
    .tab-content p,
    .text-justify {
        text-align: left !important;
    }
}

/* --- Measure -------------------------------------------------------------
   Typography is not only size. Measured at 1440px these paragraphs ran 115 to
   138 characters to the line -- roughly double a comfortable measure, and the
   reason they read as heavy blocks rather than as copy. Capping the column
   shortens the line and moves nothing else on the page.
   ------------------------------------------------------------------------ */
.mcp .hosting-hero .container>p,
.sec-serv-1 .hd p {
    max-width: var(--bzf-measure);
    margin-left: auto;
    margin-right: auto;
}
.hosting-hero h3{ color:var(--bz-white)}

/* The testimonial hangs off a quote glyph set at its left edge, so it keeps
   its left margin and only the right edge comes in. */
.clientcaros .in-rev .client_desc p {
    max-width: var(--bzf-measure);
}

/* --- Uppercase tracking --------------------------------------------------
   Every selector below is one the legacy sheets set text-transform:uppercase
   on. Measured, their tracking ranged from -.03em to .2em -- caps jammed
   together in some places and drifting apart in others -- because the value
   was set per component, or not at all, and Stolzl's caps set tighter than
   the Oswald these were drawn for. One value across the site.

   The display treatments are deliberately not in this list: .outlinetxt,
   .turst_txt and .footbtxt are caps at 50-72px, where the correction runs the
   other way, and they already carry the display tracking.
   ------------------------------------------------------------------------ */
.initialism,
.text-uppercase,
.b-menu,
.circontact,
.black-bg h4,
.servicebox .sertxt h5,
.customnav.nav-pills .nav-link,
.client_name,
.foot-link a,
.resp-vtabs .resp-tabs-list li,
.team_list h6,
.mapsection .info_content h3,
.serviceboxlist .innerbox p,
.mblink .btn-link,
.newuifrm label,
.sernboxlist .innerbox p,
.newsolubox .whiteshdbox,
.techstackn .servicebox .sertxt h5,
.wbboxshadow h4,
.exblz .servicebox .sertxt p,
.ctflags,
.fullcirc,
.service-box .service-icon .front-content h3,
.service-box .service-content h3,
.bisubboxes ul .bisbox h4,
.carousel-item .ltrconslcbox>h3:nth-child(1),
.serBox .title,
.swiper-slide .items span,
.latest_news h2 span,
.rev_blk .lft h2>span>span,
.ltrconslcbox.one-page .txt h3,
div#one-slide .row .col-md-12 h2 span,
.hero-badge span,
.sec-serv-1 .hd h2,
/* these two carry a more specific legacy tracking, so they need the extra
   weight to be reached at all */
.servicebox .sertxt a h5,
.whitebrdbox form label {
    letter-spacing: var(--bzf-ls-caps);
}

/* --- Card titles take the card role, not the heading role ----------------
   .apply_title is the same component whether it is marked up as h2, h3, h4,
   h5 or h6 -- measured, it renders at six different sizes across the site
   purely because of the tag it happens to sit on. Inside a client card the
   box is 168px wide at 768px, which no heading size fits: "eCommerce" at the
   h2 size measured 186px and broke out of its panel. The card role is sized
   for the box it lives in.
   ------------------------------------------------------------------------ */
.client_desc .apply_title,
.clientcaros .apply_title {
    font-size: var(--bzf-fs-card);
    line-height: var(--bzf-lh-card);
    letter-spacing: var(--bzf-ls-heading);
}

/* --- Fixed-size display headings made fluid ------------------------------
   These carried a hard 50px at every viewport. Measured at 375px the "LETS
   DISCUSS" block overflowed its own panel, which is 85% of an already narrow
   column there. The desktop size is unchanged -- 50px is the top of the clamp
   -- and only the phone end moves.
   ------------------------------------------------------------------------ */
.blaze_soln .outlinetxt {
    font-size: var(--bzf-fs-display-2);
}

/* The transparent variant is the tighter of the two: its panel is 85% of an
   already narrow column, 132px wide at 375px, so its floor has to clear
   "DISCUSS" at that width rather than the display floor. */
.blaze_soln_trans .outlinetxt {
    font-size: clamp(22px, 3.6vw, 50px);
}

.blaze_soln .outlinetxt span,
.blaze_soln_trans .outlinetxt span {
    font-size: inherit;
}

/* ==========================================================================
   09  BUTTONS
   ========================================================================== */
.whiteshdbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(10, 35, 66, .16) !important;
    border-radius: var(--bzf-r-sm) !important;
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-1) !important;
    color: var(--bzf-navy-deep) !important;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-size: 13px;
    padding: 13px 26px;
    overflow: hidden;
    transition: all var(--bzf-dur) var(--bzf-ease) !important;
}

/* Sliding red fill */
.whiteshdbox::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--bzf-red) 0%, var(--bzf-red-deep) 100%);
    transform: translateX(-101%);
    transition: transform var(--bzf-dur) var(--bzf-ease-out);
}

.whiteshdbox:hover,
.whiteshdbox:focus {
    color: #fff !important;
    border-color: var(--bzf-red) !important;
    box-shadow: var(--bzf-glow-red), 0 14px 30px rgba(229, 37, 33, .26) !important;
    transform: translateY(-2px);
}

.whiteshdbox:hover::before,
.whiteshdbox:focus::before {
    transform: translateX(0);
}

.whiteshdbox a,
.newsolubox .whiteshdbox a {
    color: inherit !important;
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.whiteshdbox:hover a,
.newsolubox .whiteshdbox:hover a {
    color: #fff !important;
}

/* Primary variant: solid Blaze Red with white text, per the button
   hierarchy — red is the primary action colour everywhere. */
.newsolubox .whiteshdbox,
.sertxt .whiteshdbox {
    background: linear-gradient(100deg, var(--bzf-red) 0%, var(--bzf-red-deep) 100%) !important;
    border-color: rgba(255, 120, 116, .5) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(229, 37, 33, .34), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.newsolubox .whiteshdbox::before,
.sertxt .whiteshdbox::before {
    background: linear-gradient(100deg, #fff 0%, #F0F4F9 100%);
}

.newsolubox .whiteshdbox:hover,
.sertxt .whiteshdbox:hover {
    color: var(--bzf-red) !important;
}

.newsolubox .whiteshdbox:hover a,
.sertxt .whiteshdbox:hover a {
    color: var(--bzf-red) !important;
}

/* Bootstrap buttons picked up site-wide */
.btn-danger,
.btn-primary {
    background: linear-gradient(100deg, var(--bzf-red) 0%, var(--bzf-red-deep) 100%) !important;
    border-color: transparent !important;
    border-radius: var(--bzf-r-sm) !important;
    box-shadow: 0 10px 26px rgba(229, 37, 33, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: all var(--bzf-dur) var(--bzf-ease);
}

/* The label has to be stated, at rest and on hover. Without it any page
   rule that flips only the colour wins: newstyles.css turns the crm demo
   button red on hover and expects white behind it, but its plain
   `background: #fff` cannot clear the gradient above, which is set with
   !important -- so the gradient kept painting under red text and the label
   all but vanished.

   The invert is the site language, not an exception: .newsolubox and
   .sertxt .whiteshdbox already slide a white fill in and turn their label
   red. Red buttons everywhere now do the same thing. */
.btn-danger,
.btn-primary {
    color: #FFFFFF !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(100deg, #FFFFFF 0%, #F0F4F9 100%) !important;
    border-color: rgba(229, 37, 33, .45) !important;
    color: var(--bzf-red) !important;
    transform: translateY(-2px);
    box-shadow: var(--bzf-glow-red), 0 16px 34px rgba(229, 37, 33, .26) !important;
}

/* labels wrapped in a span or an anchor travel with the button */
.btn-danger:hover a,
.btn-danger:hover span,
.btn-danger:focus a,
.btn-danger:focus span,
.btn-primary:hover a,
.btn-primary:hover span,
.btn-primary:focus a,
.btn-primary:focus span {
    color: var(--bzf-red) !important;
}

/* --- Button typography ---------------------------------------------------
   Measured, eleven buttons arrived from a legacy `font: 20px/40px` shorthand:
   20px of text on 40px of leading, at Regular. A button label is interface
   text, not body copy -- it sets at the UI size, at Medium, on UI leading, so
   the label sits on one line and the button's height comes from its padding
   rather than from its font.
   ------------------------------------------------------------------------ */
.btn {
    font-size: var(--bzf-fs-btn);
    line-height: var(--bzf-lh-ui);
    font-weight: var(--bzf-w-medium);
    letter-spacing: var(--bzf-ls-ui);
}

/* .btns .btn unscoped: the same block appears inside the homepage slider and
   again standalone on /mcp, and only the slider copy was being caught. */
.btns .btn,
.slider .mcp-banner .btns .btn,
section.get-start .btns .btn,
.applynow.top_apply,
.crm_page .sec-serv-1 button,
section.icon-grid-section.crm-features .btn-group .btn {
    font-size: var(--bzf-fs-btn) !important;
    line-height: var(--bzf-lh-ui) !important;
    font-weight: var(--bzf-w-medium) !important;
    letter-spacing: var(--bzf-ls-ui);
}

/* A button label is one line. The row wraps instead when it runs out of
   width -- measured, "View on GitHub" and "Get start" were breaking across two
   lines at 430px and below, two buttons in a 30px-gapped flex row each
   carrying 60px of horizontal padding. */
.btns {
    flex-wrap: wrap;
}

.btns .btn {
    white-space: nowrap;
}

@media (max-width: 575.98px) {

    .mcp-banner .btns,
    section.get-start .btns {
        gap: 12px;
    }

    .btns .btn {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* The MCP page's FAQ rows are buttons by markup and headings by role, so they
   keep a heading size and lose only the 40px leading. */
section.faq .bdy .accordion .card .card-header .btn {
    font-size: var(--bzf-fs-h6) !important;
    line-height: var(--bzf-lh-heading) !important;
    font-weight: var(--bzf-w-medium) !important;
    letter-spacing: var(--bzf-ls-heading);
}

/* ==========================================================================
   10  CINEMATIC STATEMENT BAND
   Red is the primary brand colour, so the page's one full-bleed statement
   block wears it. This is the single largest field of Blaze Red on the site
   and it is what makes the brand read instantly on first scroll.
   ========================================================================== */
#black-bg .black-bg {
    position: relative;
    background:
        linear-gradient(104deg, rgba(7, 29, 58, .95) 0%, var(--bzf-red) 48%, rgba(7, 29, 58, .84) 100%),
        url(../images/futura/band-light.webp) no-repeat center center / cover !important;
    padding: 56px 0 !important;
    overflow: hidden;
    isolation: isolate;
}

/* Thin red seams top and bottom — the ad's LED language */
#black-bg .black-bg::before,
#black-bg .black-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    box-shadow: 0 0 16px rgba(255, 255, 255, .5);
}

#black-bg .black-bg::before {
    top: 0;
}

#black-bg .black-bg::after {
    bottom: 0;
}

#black-bg .black-bg .container {
    position: relative;
    z-index: 2;
}

#black-bg .black-bg p.text-white {
    color: rgba(255, 255, 255, .78) !important;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
}

#black-bg .black-bg .whitelinetxt,
#black-bg .black-bg .whitelinetxt .h1 {
    font-size: clamp(24px, 3.3vw, 46px);
}

/* ==========================================================================
   11  TRUSTED-PARTNER LIST
   ========================================================================== */
.clients .turst_txt {
    font-size: clamp(26px, 2.9vw, 40px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.clients .turst_txt span {
    color: var(--bzf-red);
}

/* The existing composition — a Blaze core with four petals orbiting it — is
   kept exactly. Only the materials change: the core becomes a lit 3D orb and
   the petals become glass. */
.clients .ctflags.icontxts.libox {
    position: relative;
    isolation: isolate;
}

/* Orbital track behind the whole cluster */
.clients .ctflags.icontxts.libox::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 430px;
    height: 430px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(10, 35, 66, .14);
    z-index: 0;
    pointer-events: none;
}

/* The core.
   Sized through --bzf-orb so each breakpoint only has to change one number:
   the disc must stay clear of the four petal labels, whose inner corners sit
   about 149px from the cluster centre at desktop. */
.libox::before {
    --bzf-orb: 250px;
    --bzf-orb-icon: 58px;
    width: var(--bzf-orb) !important;
    height: var(--bzf-orb) !important;
    background:
        url('../images/contact/blazefirered-w.png') no-repeat center / var(--bzf-orb-icon),
        radial-gradient(circle at 34% 28%, #FF6E6A 0%, var(--bzf-red) 38%, var(--bzf-red-deep) 78%, #8E0F0B 100%) !important;
    box-shadow:
        inset 0 6px 22px rgba(255, 255, 255, .34),
        inset 0 -14px 30px rgba(112, 12, 8, .55),
        0 18px 44px rgba(229, 37, 33, .34),
        0 0 0 1px rgba(255, 120, 116, .5),
        /* No spread: a spread radius here bloomed the disc outward far enough
           to cover the neighbouring petal labels. */
        0 0 64px rgba(229, 37, 33, .22) !important;
    /* Sits in FRONT of the petals: their square inward corners otherwise
       chop the disc into a cross. Labels sit well outside its radius. */
    z-index: 4 !important;
}

/* Halo ring that reads outside the petals, so the core is a disc not a cross */
.clients .ctflags.icontxts.libox::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(229, 37, 33, .28);
    box-shadow: 0 0 50px rgba(229, 37, 33, .16), inset 0 0 60px rgba(229, 37, 33, .1);
    z-index: 0;
    pointer-events: none;
}

/* The petals — asymmetric radii preserved, surface swapped for glass */
.libox li {
    /* Deliberately translucent: the lit core sits behind the petals and must
       glow through their inward corners. */
    background: linear-gradient(150deg, rgba(255, 255, 255, .5), rgba(244, 247, 250, .3)) !important;
    -webkit-backdrop-filter: saturate(150%) blur(26px);
    backdrop-filter: saturate(150%) blur(26px);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-2) !important;
    color: var(--bzf-navy-deep);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
    flex-direction: column;
    text-align: center;
    z-index: 3 !important;
    position: relative;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease),
        background var(--bzf-dur) var(--bzf-ease) !important;
}

.libox li img {
    filter: saturate(0) brightness(.34);
    opacity: .9;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.libox li:hover {
    background: linear-gradient(30deg, var(--bzf-red) 0%, var(--bzf-navy-deep) 100%) !important;
    color: #fff;
    border-color: rgba(255, 130, 126, .6);
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 22px 50px rgba(229, 37, 33, .36),
        0 0 46px rgba(229, 37, 33, .28) !important;
}

.libox li:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* ==========================================================================
   12  TESTIMONIALS & CLIENT LOGOS
   ========================================================================== */
.testimonials .item,
.clientcaros .item {
    height: 100%;
}

/* Client logo plates */
.blzbeli {
    position: relative;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-1);
    padding: 22px 18px;
    height: 100%;
    overflow: hidden;
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease);
}

.blzbeli:hover {
    transform: translateY(-5px);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .22), var(--bzf-lift-2);
}

.blzblogo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
}

.blzblogo>img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    filter: saturate(0) contrast(1.05) brightness(.6);
    opacity: .72;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.blzbeli:hover .blzblogo>img {
    filter: none;
    opacity: 1;
}

.blzbflag {
    position: absolute;
    top: -6px;
    right: -4px;
    width: 26px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(7, 29, 58, .22);
    line-height: 0;
}

.blzbtext h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--bzf-navy-deep);
    margin-top: 12px;
    margin-bottom: 2px;
}

.blzbtext p,
.blzbtext a {
    font-size: 12.5px;
    color: var(--bzf-ink-mute);
    word-break: break-word;
}

.blzbtext a:hover {
    color: var(--bzf-red);
}

/* Testimonial cards */
.testimonials .ltrconslcbox,
.clientcaros .ltrconslcbox {
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd) !important;
    border-radius: var(--bzf-r) !important;
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-1) !important;
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease);
}

.testimonials .ltrconslcbox:hover,
.clientcaros .ltrconslcbox:hover {
    transform: translateY(-4px);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .2), var(--bzf-lift-2) !important;
}

/* --- Testimonial blocks ------------------------------------------------- */
.clientcaros .inner>.item.client_carousel,
.testimonials .inner>.item.client_carousel {
    background:
        linear-gradient(104deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 46%, rgba(244, 247, 250, .82) 100%),
        url(../images/futura/band-light.webp) no-repeat center center / cover !important;
    height: auto !important;
    border-radius: var(--bzf-r-lg);
    /* border: 1px solid var(--bzf-glass-l-brd); 
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-2);*/
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease);
}

.clientcaros .inner>.item.client_carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(760px 320px at 96% 8%, rgba(229, 37, 33, .1), transparent 66%);
}

.clientcaros .inner>.item.client_carousel:hover {
    /* transform: translateY(-5px); 
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .26), var(--bzf-lift-3), var(--bzf-lift-red);*/
}

.clientcaros .inner>.item.client_carousel>.row {
    position: relative;
    z-index: 1;
    margin: 0;
    align-items: stretch;
    /* The picture and the quote each own a full-width column, so the card is
       a stack: banner on top, words underneath. Without the column direction
       the two sit side by side at 100% each and the quote is pushed straight
       out of the card, which clips it. */
    flex-direction: column;
    flex-wrap: nowrap;
}

/* In a column the flex basis is a height, not a width — so the Bootstrap
   col-* basis has to be dropped or each column would claim the full card. */
.clientcaros .inner>.item.client_carousel>.row>[class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.clientcaros .inner>.item.client_carousel>.row>.in-rev {
    flex: 1 1 auto;
    min-height: 0;
    padding: 30px;
}

/* Portrait. The files are 740x438 head-and-shoulders shots, so the picture
   keeps its own proportions: a band stretched across the full card width
   would have to crop to about 4.5:1, which takes the face with it.

   It is sized off the viewport, not the card, because the card's height is
   the scarce thing — the quote beneath it has to fit the same screen. */
.clientcaros .whitetrans {
    width: min(100%, 440px);
    aspect-ratio: 740 / 438;
    height: auto;
    margin: 0;
    border-radius: var(--bzf-r);
    overflow: hidden;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(10, 35, 66, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* The picture sits in the card's own margin, level with the quote below it */
.clientcaros .inner>.item.client_carousel>.row>[class*="col-"]:not(.in-rev) {
    padding: 22px 30px 0;
}

/* In the rail the picture is a band the full width of the card. These files
   are 740x438 head-and-shoulders shots and cropping one to the ~3:1 a band
   that wide would need takes the face with it — measured across all nine, at
   2.95:1 two of them lose everything below the eyes. So the photograph is
   shown whole and the band behind it is a blurred, dimmed copy of the same
   picture, which blaze-futura.js hands to the CSS as --bzf-photo.

   The band's height comes from the viewport, not the card: a pinned card has
   to fit one screen and the quote beneath it needs the rest. */
.bzf-clientrail .whitetrans {
    width: 100%;
    /* Measured against the viewport, not against the file. Left at the
       picture's own 5:3 the band stood 296px tall and the card 815px, which
       is taller than the viewport of a 1440x900 or a 1366x768 laptop -- so
       usable() refused to pin and every visitor on one of those screens got
       the fallback instead of the rail. */
    aspect-ratio: auto;
    height: clamp(140px, 24vh, 296px);
    background: var(--bzf-navy-deep);
}

.bzf-clientrail .whitetrans::after {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    background-image: var(--bzf-photo, none);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.3) brightness(.82);
}

/* Beats ".clientcaros .whitetrans img", which sits further down the file and
   would otherwise win the cover/contain argument on source order alone. */
.bzf-clientrail .inner .whitetrans img {
    position: relative;
    z-index: 1;
    object-fit: contain !important;
}

.clientcaros .whitetrans::before {
    display: none;
}

.clientcaros .whitetrans img {
    height: 100%;
    width: 100%;
    object-fit: cover !important;
    object-position: center top;
    filter: saturate(.8) contrast(1.02);
    transition: transform var(--bzf-dur-slow) var(--bzf-ease-out), filter var(--bzf-dur) var(--bzf-ease);
}

.clientcaros .inner>.item.client_carousel:hover .whitetrans img {
    filter: none;
    transform: scale(1.06) !important;
}

/* The small portrait shown below 992px. Its file is 300px wide so it stays
   sharp on a phone; the box is pinned to the 150px it has always rendered at,
   which the intrinsic width used to decide on its own. */
.client_logo_mbl {
    width: 150px;
    height: auto;
}

/* Quote */
.clientcaros .in-rev {
    padding: 34px 40px 34px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Direct child only — the attribution block further down also matches
   ".in-rev .client_desc > p" and must not pick up the quote mark. */
.clientcaros .in-rev>.client_desc>p {
    color: var(--bzf-ink-soft) !important;
    font-size: 15.5px;
    line-height: 1.72;
    position: relative;
    padding-left: 26px;
}

.clientcaros .in-rev>.client_desc>p::before {
    content: "\201C";
    position: absolute;
    left: -3px;    
    font-size: 58px;
    line-height: 1;
    color: var(--bzf-red);
    opacity: .7;
    /* Was Georgia -- the last serif left on the site, for one glyph. Stolzl's
       own quote is geometric and squarer, so it is set a little larger and
       nudged to sit where the serif one did. */
    font-size: 50px;
    font-weight: var(--bzf-w-bold);
    top: -7px;
}

/* Years-with-Blaze module */
.clientcaros .rev_blk {
    margin-top: 30px;
    gap: 24px;
    align-items: stretch;
}

.clientcaros .rev_blk .lft {
    background: linear-gradient(146deg, var(--bzf-navy) 0%, var(--bzf-red-deep) 100%) !important;
    border-radius: var(--bzf-r);
    border: 1px solid rgba(255, 130, 126, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 14px 34px rgba(229, 37, 33, .32),
        0 0 34px rgba(229, 37, 33, .18) !important;
    padding: 20px 24px !important;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

/* The legacy animated border frame is not needed on the new material */
.clientcaros .rev_blk .lft::before,
.clientcaros .rev_blk .lft::after {
    display: none;
}

.clientcaros .rev_blk .lft h4 {
    color: #fff !important;
    font-size: 14px;
    line-height: 1.2;
    gap: 4px;
    font-weight: 600;
    text-align: left;
}

.clientcaros .rev_blk .lft h4 > span > span {
         font-size: 19px;
}

.clientcaros .rev_blk .lft h4 b {
    color: #fff !important;
    font-size: 52px;
    line-height: 1;
    text-shadow: 0 4px 16px rgba(80, 6, 4, .5);
}

/* Legacy printed this "Z" in #333 on the red badge — roughly 2.6:1, which is
   unreadable at 19px. The Z device is carried by the headings elsewhere, so
   here legibility wins. */
.clientcaros .rev_blk .lft h4>span>span>bdi {
    color: #fff !important;
}

.clientcaros .inner>.item.client_carousel:hover .rev_blk .lft {
    border-color: rgba(255, 150, 146, .7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        0 18px 40px rgba(229, 37, 33, .36),
        0 0 46px rgba(229, 37, 33, .3) !important;
}

/* Attribution */
.clientcaros .rev_blk .rft {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clientcaros .rev_blk .rft p.client_name1,
.clientcaros .rev_blk .rft .client_name1 {
    color: var(--bzf-ink) !important;
    font-size: 21px !important;
    font-weight: 700;
    margin-bottom: 4px;
}

.clientcaros .rev_blk .rft .client_desc p {
    color: var(--bzf-ink-mute) !important;
    font-size: 12px !important;
    padding-left: 0 !important;
    line-height: 1.5;
    margin: 0;
}

/* Owl / swiper dots */
.owl-theme .owl-dots .owl-dot span,
.swiper-pagination-bullet {
    background: rgba(10, 35, 66, .2) !important;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.owl-theme .owl-dots .owl-dot.active span,
.swiper-pagination-bullet-active {
    background: var(--bzf-red) !important;
    box-shadow: 0 0 12px rgba(229, 37, 33, .6);
}

/* ==========================================================================
   13  SOLUTION MODULES — the site's main card system
   .newsolubox > .servicebox > .blkbrd + .sertxt + .newsoluicon
   Re-materialised as WHITE glass slabs with a red offset light frame:
   white is the canvas, red is the brand signal, navy is only the type.
   ========================================================================== */
.solutions.newsolu .newsolubox {
    margin-bottom: 64px;
    perspective: 1400px;
}

.newsolubox .outlinetxt,
.newsolubox .outlinetxt .h1 {
    font-size: clamp(26px, 2.6vw, 40px) !important;
}

.newsolubox .outlinetxt+p.timesitaly {
    margin-top: 10px !important;
    color: var(--bzf-ink-mute);
    letter-spacing: var(--bzf-ls-label);
}

/* The slab */
.newsolubox .servicebox {
    position: relative;
    top: 0 !important;
    right: 0 !important;
    border-radius: var(--bzf-r-lg);
    background: var(--bzf-steel);
    /* The red spine is the module's brand signature. It has to be a border,
       not an inset shadow: ::before paints a near-white sheen across the
       whole padding box and would swallow the shadow. */
    border: 1px solid var(--bzf-steel-brd);
    border-left: 9px solid var(--bzf-red) !important;
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-2) !important;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    /* Composed transform: --bzf-lift from :hover, --bzf-rx/ry from pointer tilt */
    transform:
        translateY(var(--bzf-lift, 0px))
        rotateX(var(--bzf-rx, 0deg))
        rotateY(var(--bzf-ry, 0deg));
    transition:
        transform var(--bzf-dur-slow) var(--bzf-ease-out),
        box-shadow var(--bzf-dur-slow) var(--bzf-ease-out);
}

/* While the pointer is inside, follow it closely instead of easing */
.newsolubox .servicebox.is-tilting {
    transition:
        transform .18s linear,
        box-shadow var(--bzf-dur-slow) var(--bzf-ease-out);
}

/* Kill the legacy flat black overlay, replace with a glass sheen */
.newsolubox .servicebox::before {
    background:
        radial-gradient(760px 300px at 92% -14%, rgba(229, 37, 33, .11), transparent 64%),
        linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, transparent 48%) !important;
    opacity: 1;
    z-index: 0;
}

/* Fine grid etched into the surface */
.newsolubox .servicebox::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(10, 35, 66, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
}

/* .blkbrd becomes the offset red light frame behind the slab */
.newsolubox .servicebox .blkbrd {
    border: 1px solid rgba(229, 37, 33, .55) !important;
    border-radius: var(--bzf-r-lg);
    inset: 0;
    width: 100%;
    height: 100%;
    bottom: auto;
    left: 0;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(229, 37, 33, .28), inset 0 0 34px rgba(229, 37, 33, .07);
    transition: opacity var(--bzf-dur-slow) var(--bzf-ease-out), transform var(--bzf-dur-slow) var(--bzf-ease-out);
    transform: scale(.97);
}

.newsolubox .servicebox:hover {
    --bzf-lift: -10px;
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .3),
        var(--bzf-lift-3),
        var(--bzf-lift-red) !important;
}

.newsolubox .servicebox:hover .blkbrd {
    opacity: 1;
    transform: scale(1);
}

/* Content */
.newsolubox .servicebox .sertxt {
    position: relative;
    z-index: 2;
    background: transparent !important;
    /* The generic .servicebox .sertxt glass panel must not apply here — its
       light border would draw a rectangle inside the dark slab. */
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 46px 300px 46px 46px !important;
    align-items: flex-start !important;
    text-align: left;
}

.newsolubox .servicebox .sertxt p {
    color: var(--bzf-ink-soft) !important;
    text-align: left !important;
    font-size: clamp(16px, 1.3vw, 21px) !important;
    line-height: 1.55 !important;
    max-width: 46ch;
}

/* The oversized glyph — now a soft red-lit relief instead of a flat white blob */
.newsolubox .servicebox .newsoluicon {
    z-index: 1;
    opacity: 1 !important;
    color: transparent;
    right: -18px !important;
    background: linear-gradient(150deg, rgba(229, 37, 33, .36) 0%, rgba(229, 37, 33, .17) 58%, rgba(10, 35, 66, .07) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(229, 37, 33, .22));
    transform: translateY(-50%) rotate(-18deg);
    transition: transform var(--bzf-dur-slow) var(--bzf-ease-out), filter var(--bzf-dur-slow) var(--bzf-ease-out);
}

.newsolubox .servicebox:hover .newsoluicon {
    transform: translateY(-50%) rotate(-12deg) scale(1.05);
    filter: drop-shadow(0 0 40px rgba(229, 37, 33, .4));
}

/* Legacy hover turned the panel solid red — replaced by the light frame above */
.newsolubox .servicebox:hover .sertxt {
    background: transparent !important;
}

/* ==========================================================================
   14  EXPLORE TILES  (.exblz)
   ========================================================================== */
.techstackn .newsolubox {
    margin-bottom: 30px;
}

.newsolubox.exblz {
    display: block;
    text-decoration: none;
}

/* Legacy painted these wrappers with flat accent colours (orange, violet,
   sky). The palette is now navy + red, so the wrapper stays clear and the
   glass slab inside carries the surface. */
.newsolubox.orange,
.newsolubox.voilet,
.newsolubox.sblue,
.newsolubox.green,
.newsolubox.sred {
    background-color: transparent !important;
}

.newsolubox.exblz .servicebox {
    min-height: 230px !important;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 44%, var(--bzf-red-deep) 100%);
    border: 1px solid rgba(255, 130, 126, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 12px 30px rgba(229, 37, 33, .3) !important;
}

.newsolubox.exblz .servicebox::before {
    background: none !important;
}

.newsolubox.exblz .servicebox .sertxt {
    padding: 24px !important;
    align-items: center !important;
}

.newsolubox.exblz .servicebox .sertxt p {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: var(--bzf-ls-label);
    text-align: center !important;
    font-size: 17px !important;
}

.newsolubox.exblz .servicebox .newsoluicon {
    color: #fff !important;
    -webkit-text-fill-color: currentColor;
    background: none;
    opacity: .2 !important;
    filter: none;
}

.newsolubox.exblz .servicebox:hover {
    transform: translateY(-8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        0 20px 44px rgba(229, 37, 33, .4),
        0 0 46px rgba(229, 37, 33, .3) !important;
}

.exblz .servicebox:hover .sertxt,
.exblz .servicebox:hover::before {
    background: transparent !important;
}

.newsolubox.exblz .servicebox:hover .newsoluicon {
    color: #fff !important;
    opacity: .34 !important;
}

.newsolubox.exblz .servicebox:hover .sertxt p {
    color: #fff !important;
}

/* Section headline for the explore block */
.techstackn .newsolubox .outlinetxt,
.techstackn .newsolubox .outlinetxt .h1 {
    font-size: clamp(30px, 3.4vw, 52px) !important;
}

/* ==========================================================================
   15  LATEST NEWS
   ========================================================================== */
.l_news {
    position: relative;
    padding: 90px 0;
    background:
       linear-gradient(180deg, rgba(5, 19, 42, 0.85), rgba(5, 19, 42, 0.55)), url(../images/futura/band-architecture.webp) no-repeat center center / cover;
    overflow: hidden;
    isolation: isolate;
}

.l_news::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 12% 0%, rgba(229, 37, 33, .1), transparent 66%),
        radial-gradient(760px 400px at 92% 92%, rgba(28, 84, 152, .06), transparent 68%);
}

.l_news .container {
    position: relative;
    z-index: 2;
}

.l_news .latest_news>h2 {
    color: var(--bzf-ink);
    font-size: clamp(28px, 3.2vw, 46px);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 18px;
}

.l_news .latest_news>h2 span {
    color: var(--bzf-ink);
}

.l_news .latest_news>h2 bdi {
    color: var(--bzf-red);
}

.l_news .latest_news>h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 78px;
    height: 2px;
    background: var(--bzf-red);
    box-shadow: 0 0 16px rgba(229, 37, 33, .7);
}

/* The vertical ticker frame. Legacy drew a white card with a pink border;
   this is a faint navy hairline on the light ground instead. */
.l_news .swiper-container {
    background: transparent;
    border: 1px solid rgba(10, 35, 66, .1) !important;
    border-radius: var(--bzf-r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    padding: 78px 18px 18px !important;
    height: 460px;
}

/* Top fade resolves into the section's own light ground */
.l_news .swiper-container::after {
    background: linear-gradient(to bottom, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, .95) 78%, #F7FAFC 100%) !important;
}

/* Legacy bounced each recycled slide in from scale(0) on a white fill, which
   flashes as a white pill against the navy. The vertical scroll is enough. */
.l_news .swiper-slide.swiper-slide-prev .items {
    animation: none !important;
}

/* White glass news cards */
.l_news .swiper-slide .items {
    height: 100%;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    border-left: 5px solid var(--bzf-red);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    padding: 30px 26px;
    position: relative;
    overflow: hidden;
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease), border-color var(--bzf-dur) var(--bzf-ease);
}

/* Light sweep across the card on hover */
.l_news .swiper-slide .items::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(229, 37, 33, .07), transparent);
    transform: skewX(-18deg);
    transition: left var(--bzf-dur-slow) var(--bzf-ease-out);
    pointer-events: none;
}

.l_news .swiper-slide .items:hover {
    transform: translateY(-8px);
    border-color: rgba(229, 37, 33, .4);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .24),
        var(--bzf-lift-2), var(--bzf-lift-red);
}

.l_news .swiper-slide .items:hover::after {
    left: 115%;
}

.l_news .swiper-slide .items h2 {
    color: var(--bzf-ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px;
}

.l_news .swiper-slide .items p {
    color: var(--bzf-ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
}

/* Category tag becomes a small glass pill with a red LED dot */
.l_news .swiper-slide .items span.blackchain,
.l_news .swiper-slide .items span.ecom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bzf-red-tint);
    border: 1px solid var(--bzf-red-line);
    color: var(--bzf-red);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: var(--bzf-fs-label);
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.l_news .swiper-slide .items span.blackchain::before,
.l_news .swiper-slide .items span.ecom::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 8px rgba(229, 37, 33, .9);
}

/* ==========================================================================
   15b  THE NEXUS — one console  (.bzf-nexus)
   Direction: a single instrument surface. What used to be three sections —
   the news ticker, the Why-BLAZE statement, the Explore tiles — are three
   zones of one panel. Hairlines and the panel edge do every division, so no
   zone owns a background and nothing is a card inside a card inside a card.

   Red is signal rather than surface: the seam, the live dot, the spine that
   lights on hover. The one place it is allowed to be mass is the destination
   bar at the foot, and there it is a single continuous run rather than three
   slabs. Exactly one dark object exists in the section — the call card —
   which is what makes it the thing you reach for without any extra weight.
   ========================================================================== */
.bzf-nexus {
    padding: 78px 0 88px;
}

/* --- the panel -----------------------------------------------------------
   Four layers, all of them background rather than pseudo-elements: the red
   seam the footer also opens with, the glow under it, one light source at the
   top left so the surface has a direction, and the glass itself. They are
   backgrounds because an absolutely positioned seam escaped the panel's
   rounded clip in Chrome and drew itself straight across the viewport — a
   background is clipped by border-radius with no argument. */
.bzf-nexus__panel {
    position: relative;
    border-radius: var(--bzf-r-lg);
    /* Opaque white, not the translucent glass token: the section's ground is
       set elsewhere and has been both a pale band and a dark one. A surface
       that lets the ground through changes character with it, and this one is
       meant to read the same either way. The seam and the corner light are
       layered over that white rather than painted by a pseudo-element —
       an absolutely positioned seam escaped the rounded clip in Chrome and
       drew itself straight across the viewport. */
    background:
        linear-gradient(90deg, transparent, var(--bzf-red) 18%, var(--bzf-red) 82%, transparent) top left / 100% 2px no-repeat,
        linear-gradient(180deg, rgba(229, 37, 33, .26), transparent) top left / 100% 8px no-repeat,
        radial-gradient(720px 340px at 4% -8%, rgba(229, 37, 33, .07), transparent 70%),
        #FFFFFF;
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-3);
    padding: 44px 44px 0;
    overflow: hidden;
    isolation: isolate;
}

.bzf-nexus__top {
    align-items: stretch;
}

/* --- zone 1: the feed ---------------------------------------------------- */
.bzf-nexus__feed {
    position: relative;
    padding-bottom: 44px;
}

.bzf-nexus .latest_news {
    margin-top: 0;
}

.bzf-nexus .latest_news>h2 {
    margin-bottom: 26px;
    padding-bottom: 16px;
}

/* A live dot at the end of the rule. The feed is the only thing on the page
   that keeps moving by itself, and this is the only word-free way to say so
   — the copy is not mine to add to. */
.bzf-nexus .latest_news>h2::before {
    content: "";
    position: absolute;
    left: 86px;
    bottom: -1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 9px 1px rgba(229, 37, 33, .9);
    animation: bzf-nexus-live 2.8s var(--bzf-ease) infinite;
}

@keyframes bzf-nexus-live {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

/* The bordered ticker frame is gone: a box inside the panel was a third
   layer of the same material. The list sits straight on the panel and two
   soft mask edges say where it ends. */
.bzf-nexus .swiper-container {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0 !important;
    height: 486px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 44px), transparent 100%);
}

/* The old top fade was painted to resolve into the page ground; the mask
   above does the same job at both ends and against the panel instead. */
.bzf-nexus .swiper-container::after {
    display: none !important;
}

/* Rows, not cards. A hairline spine that lights red as the pointer crosses
   it is the whole treatment — glass on glass on glass was the problem. */
.bzf-nexus .swiper-slide .items {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-left: 2px solid rgba(10, 35, 66, .13);
    border-radius: 0 var(--bzf-r-sm) var(--bzf-r-sm) 0;
    box-shadow: none;
    /* the row's own lead has to clear the frame's top fade, or the entry
       standing at the head of the ticker loses its heading to it */
    padding: 22px 22px 14px;
    margin-right: 8px;
}

.bzf-nexus .swiper-slide .items:hover {
    transform: none;
    border-color: transparent;
    border-left-color: var(--bzf-red);
    background: linear-gradient(90deg, rgba(229, 37, 33, .06), rgba(229, 37, 33, 0) 64%);
    box-shadow: none;
}

.bzf-nexus .swiper-slide .items h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.bzf-nexus .swiper-slide .items span.blackchain,
.bzf-nexus .swiper-slide .items span.ecom {
    margin-bottom: 10px;
    padding: 4px 11px;
    font-size: var(--bzf-fs-label);
}

/* Three rows share the frame, so a long entry has to give way rather than
   push the next one out of the window. Nothing is removed from the markup. */
.bzf-nexus .swiper-slide .items p {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- zone 2: the statement and the call ---------------------------------- */
.bzf-nexus__why {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 8px;
    padding-bottom: 44px;
}

/* The divider between the two zones. A hairline, not a background: the
   moment either side gets a fill of its own the panel stops being one
   surface. */
@media (min-width: 992px) {
    .bzf-nexus__feed::after {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 44px;
        right: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(10, 35, 66, .15) 16%, rgba(10, 35, 66, .15) 84%, transparent);
    }

    .bzf-nexus__why {
        padding-left: 44px;
    }
}

.bzf-nexus__why h3.apply_title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    color: var(--bzf-ink-mute);
}

.bzf-nexus__why h3.apply_title .blztxt {
    color: var(--bzf-red);
}

.bzf-nexus__why h4.apply_title {
    font-size: clamp(23px, 2.3vw, 31px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--bzf-ink);
    max-width: 15ch;
}

/* The one dark object in the section. Everything else is white glass, so
   this is the thing the eye lands on and the thing the hand goes to — no
   extra size, weight or colour needed to say so. */
.bzf-nexus__call {
    display: block;
    position: relative;
    /* Grows into whatever the statement leaves. The column is as tall as the
       feed beside it, and a card pinned to the foot of it left a hole in the
       middle; filling the space turns the same object into the counterweight
       the composition needs. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* The two small lines hold the top and the foot of the plate and the
       wordmark takes the middle, so the height it grew into is used rather
       than left as air around a centred block. */
    justify-content: space-between;
    min-height: 180px;
    margin-top: 34px;
    padding: 34px 30px;
    border-radius: var(--bzf-r);
    background: var(--bzf-metal);
    box-shadow:
        var(--bzf-glass-d-hi),
        0 0 0 1px rgba(140, 176, 219, .2),
        var(--bzf-lift-2);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    text-decoration: none !important;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

/* The affordance, with no words to add: a red rule under the wordmark that
   runs out across the plate as the pointer arrives. */
.bzf-nexus__call .outlinetxt::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 46px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--bzf-red);
    box-shadow: 0 0 14px rgba(255, 74, 70, .85);
    transition: width var(--bzf-dur) var(--bzf-ease-out);
}

.bzf-nexus__call:hover .outlinetxt::after {
    width: 170px;
}

/* Red light raking across the card from the corner nearest the seam */
.bzf-nexus__call::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(420px 220px at 88% -18%, rgba(229, 37, 33, .34), transparent 66%);
    transition: opacity var(--bzf-dur) var(--bzf-ease);
}

.bzf-nexus__call>* {
    position: relative;
    z-index: 1;
}

.bzf-nexus__call:hover {
    transform: translateY(-4px);
    box-shadow:
        var(--bzf-glass-d-hi),
        0 0 0 1px rgba(229, 37, 33, .42),
        var(--bzf-lift-3),
        var(--bzf-glow-red-soft);
}

.bzf-nexus__call .timesitaly {
    color: rgba(233, 240, 249, .66) !important;
    font-size: 13px;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
}

.bzf-nexus__call .outlinetxt {
    color: var(--bzf-white);
    font-size: clamp(36px, 3.6vw, 50px);
    margin: 0;
    text-shadow: 0 0 40px rgba(229, 37, 33, .5);
}

/* Same reasoning as the Explore label: the outline twin is the same word
   again, and against the dark plate its offset copy reads as a misprint
   rather than as depth — and a screen reader was saying the line twice. */
.bzf-nexus__call .outlinetxt .h1 {
    display: none;
}

.bzf-nexus__call .outlinetxt .blztxtred {
    color: var(--bzf-red-bright) !important;
}

/* --- zone 3: the destinations -------------------------------------------- */
.bzf-nexus__explore {
    position: relative;
    /* Bleeds to the panel edges so the divider is the full width of the
       surface rather than a line floating inside a gutter. */
    margin: 0 -44px;
    padding: 38px 44px 44px;
    border-top: 1px solid rgba(10, 35, 66, .1);
    background: linear-gradient(180deg, rgba(244, 247, 250, .55), rgba(244, 247, 250, 0) 70%);
}

.bzf-nexus__explore-head {
    margin-bottom: 22px;
}

.bzf-nexus__explore-head .outlinetxt,
.bzf-nexus__explore-head .outlinetxt .h1 {
    font-size: clamp(22px, 2.2vw, 32px) !important;
}

.bzf-nexus__explore-head .outlinetxt {
    color: var(--bzf-red);
    margin: 0;
}

.bzf-nexus__explore-head .outlinetxt .h1 {
    display: none;
}

.bzf-nexus__explore-head .outlinetxt {
    letter-spacing: .01em;
}

.bzf-nexus__explore-head .outlinetxt .blztxtred {
    color: var(--bzf-red) !important;
}

/* One bar, three cells. The gradient belongs to the bar, which is why it
   runs continuously across all three instead of restarting at every tile —
   that restart is what made the old row read as three loose slabs. */
.bzf-nexus__strip {
    margin: 0;
    border-radius: var(--bzf-r);
    background: linear-gradient(100deg, var(--bzf-red-deep) 0%, #CE1B17 30%, var(--bzf-red) 68%, #F0403C 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 0 0 1px rgba(179, 20, 15, .34),
        var(--bzf-lift-2),
        var(--bzf-lift-red);
}

.bzf-nexus__strip>[class*="col-"] {
    padding: 0;
}

.bzf-nexus__strip .newsolubox {
    margin: 0;
    height: 100%;
}

/* The cell itself is a window onto the bar: no fill, no border, no shadow of
   its own. Only the seam and, on hover, its own plate. */
.bzf-nexus__strip .newsolubox.exblz .servicebox {
    min-height: 128px !important;
    height: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* No transform or transition of its own: the pointer tilt in
       blaze-futura.js drives --bzf-rx/--bzf-ry through the base rule's
       composed transform, and overriding either here would switch the tilt
       off exactly while the pointer is over the cell. */
}

.bzf-nexus__strip .newsolubox.exblz .servicebox::before,
.bzf-nexus__strip .newsolubox.exblz .servicebox::after {
    display: none !important;
}

@media (min-width: 768px) {
    .bzf-nexus__strip>[class*="col-"]+[class*="col-"] .servicebox {
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22) !important;
    }

    .bzf-nexus__strip>[class*="col-"]:first-child .servicebox {
        border-radius: var(--bzf-r) 0 0 var(--bzf-r) !important;
    }

    .bzf-nexus__strip>[class*="col-"]:last-child .servicebox {
        border-radius: 0 var(--bzf-r) var(--bzf-r) 0 !important;
    }
}

.bzf-nexus__strip .newsolubox.exblz .servicebox .sertxt {
    padding: 34px 32px !important;
    align-items: flex-start !important;
    justify-content: center;
    text-align: left;
}

/* Legacy pins this label absolutely at the centre of the cell, which put it
   hard against the bar's edge the moment the text was left-aligned. Back into
   flow, where the padding above can reach it. */
.bzf-nexus__strip .newsolubox.exblz .servicebox .sertxt p {
    position: static;
    transform: none;
    width: auto;
    white-space: nowrap;
    text-align: left !important;
    font-size: 16px !important;
    letter-spacing: var(--bzf-ls-label);
    margin: 0;
}

/* The glyph becomes a watermark rather than the cell's main event. Both the
   wrapper and the <i> are sized: below 992px newstyles.css puts a 200px
   !important on the icon font itself, which left three glyphs the size of the
   bar sprawling across each other. */
.bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon,
.bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon .fa {
    font-size: 74px !important;
}

.bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon {
    position: absolute;
    top: 50%;
    right: 18px !important;
    left: auto !important;
    line-height: 1;
    opacity: .17 !important;
    transform: translateY(-50%) rotate(-12deg);
    transition: transform var(--bzf-dur) var(--bzf-ease-out), opacity var(--bzf-dur) var(--bzf-ease-out);
}

/* Hover lifts the cell clear of the bar and gives it corners of its own, so
   the break in the seam reads as the interaction rather than as a fault. The
   lift goes through --bzf-lift, which is the variable the base transform
   already composes with the tilt. */
.bzf-nexus__strip .newsolubox.exblz .servicebox:hover {
    --bzf-lift: -6px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 58%, rgba(179, 20, 15, .12)) !important;
    border-radius: var(--bzf-r) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        0 16px 34px rgba(120, 12, 9, .34),
        0 0 40px rgba(255, 122, 118, .3) !important;
}

.bzf-nexus__strip .newsolubox.exblz .servicebox:hover .newsoluicon {
    opacity: .3 !important;
    transform: translateY(-50%) rotate(-6deg) scale(1.06);
}

/* Three narrow cells: the watermark has to give the label room */
@media (min-width: 768px) and (max-width: 991.98px) {

    .bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon,
    .bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon .fa {
        font-size: 54px !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon {
        right: 12px !important;
        opacity: .14 !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox .sertxt {
        padding: 30px 22px !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox .sertxt p {
        font-size: 14px !important;
        letter-spacing: .1em;
    }
}

/* Below the Bootstrap md breakpoint the cells stack, so the seam turns and
   the bar's corners move to the first and last cell in the column. The bar
   is still one object; it is just standing up. */
@media (max-width: 767.98px) {
    .bzf-nexus__strip>[class*="col-"]+[class*="col-"] .servicebox {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    }

    .bzf-nexus__strip>[class*="col-"]:first-child .servicebox {
        border-radius: var(--bzf-r) var(--bzf-r) 0 0 !important;
    }

    .bzf-nexus__strip>[class*="col-"]:last-child .servicebox {
        border-radius: 0 0 var(--bzf-r) var(--bzf-r) !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox {
        min-height: 104px !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox .sertxt {
        padding: 26px 22px !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon,
    .bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon .fa {
        font-size: 52px !important;
    }

    .bzf-nexus__strip .newsolubox.exblz .servicebox .newsoluicon {
        right: 16px !important;
    }
}

/* ==========================================================================
   16  WHY BLAZE PANEL
   ========================================================================== */
.bwbhref {
    position: relative;
    padding: 20px 0 70px;
}

.client_carousel.ent_solutn {
    border-radius: var(--bzf-r-lg);
    overflow: hidden;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .84) 42%, rgba(255, 255, 255, .4) 100%),
        url(../images/futura/tech-ai-light.webp) no-repeat center right / cover;
    /* Softer than --bzf-lift-dark: this card sits on white, where a 100px
       navy shadow reads as a grey slab rather than a lift. */
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), 0 18px 44px rgba(7, 29, 58, .1);
    border: 1px solid var(--bzf-glass-l-brd);
    position: relative;
}

.client_carousel.ent_solutn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(700px 320px at 8% 20%, rgba(229, 37, 33, .1), transparent 68%);
}

.client_carousel.ent_solutn,
.client_carousel.ent_solutn .carousel-item {
    height: auto !important;
    min-height: 340px;
}

/* Legacy sets overflow:visible here, which let the padded slide spill past
   the rounded card edge. */
.client_carousel.ent_solutn .carousel-inner {
    overflow: hidden !important;
    border-radius: inherit;
    height: auto !important;
}

.client_carousel.ent_solutn .row {
    margin: 0;
    padding: 40px 34px;
    align-items: center;
}

.ent_solutn .client_desc {
    padding: 16px 10px;
}

.ent_solutn .client_desc h3.apply_title {
    color: var(--bzf-ink);
    font-size: clamp(26px, 3vw, 42px);
    letter-spacing: -.02em;
}

.ent_solutn .client_desc h3.apply_title .blztxt {
    color: var(--bzf-red);
}

.ent_solutn .client_desc h4.success_msg {
    color: var(--bzf-ink-soft);
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
    letter-spacing: .02em;
}

/* The "Build with BLAZE" call panel — a floating glass plate */
.ent_solutn .whitetrans.blaze_soln_trans {
    background: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: var(--bzf-blur-lg);
    backdrop-filter: var(--bzf-blur-lg);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--bzf-r);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-2);
    padding: 36px 28px !important;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.ent_solutn .whitetrans.blaze_soln_trans::before {
    display: none;
}

.client_carousel .carousel-item:hover .whitetrans.blaze_soln_trans,
.ent_solutn .whitetrans.blaze_soln_trans:hover {
    background: rgba(255, 255, 255, .78) !important;
    border-color: rgba(229, 37, 33, .4);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .28), var(--bzf-lift-3), var(--bzf-lift-red);
    transform: translateY(-4px);
}

.ent_solutn .whitetrans .outlinetxt {
    color: var(--bzf-red);
}

.ent_solutn .whitetrans .outlinetxt .h1 {
    color: transparent;
    -webkit-text-stroke-color: rgba(229, 37, 33, .5);
}

.ent_solutn .whitetrans .redtxt {
    color: var(--bzf-navy-deep) !important;
}

/* ==========================================================================
   17  INNER PAGE HERO BAND

   One block, twenty-nine pages: every inner page opens with the same
   .innerhead-bg -- eyebrow, headline, sub-link rail, and a per-page
   photograph behind them -- so the band is styled once here and each page
   keeps its own picture and its own words.

   It is dark. The band is the one place on an otherwise white page where the
   brand gets to be loud, and it is also what separates the page from the
   header sitting over it. Three layers do it: .igbg carries the ground,
   the page's own <img> is screened over that as a ghost, and .igbg::after
   grades the whole thing red at the left where the type sits and navy across
   to the right where the picture is left to show.
   ========================================================================== */
.innerhead-bg {
    padding: calc(var(--bzf-header-h) + 74px) 0 80px !important;
    min-height: 420px !important;
    position: relative;
    isolation: isolate;
    background: var(--bzf-navy-deep);
}

.innerhead-bg .igbg {
    background:
        linear-gradient(180deg, rgba(4, 16, 34, .55) 0%, rgba(4, 16, 34, .72) 100%),
        /* url(../images/futura/band-light.webp) no-repeat center center / cover, */
        var(--bzf-navy-deep) !important;
}

/* The per-page photograph, dark-graded rather than ghosted. Screening it
   onto the ground blew its light areas to white and dropped everything else
   into the navy, which left a smear where the picture should be; graded
   normally and simply darkened, the subject keeps its edges and most of its
   colour, and still sits behind the type rather than competing with it. */
.innerhead-bg .igbg img {
    opacity: .82;
    mix-blend-mode: normal;
    filter: grayscale(.22) brightness(.88) contrast(1.03) saturate(.95);
}

/* The photograph is an <img> stacked above .igbg's own background, so the
   grade that keeps the headline legible has to sit above it too. It is
   heaviest at the left, where every band puts its type, and thinnest at the
   right, where every one of these photographs puts its subject. */
.innerhead-bg .igbg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(98deg,
            rgba(92, 11, 13, .90) 0%,
            rgba(58, 14, 28, .88) 15%,
            rgba(11, 31, 60, .86) 38%,
            rgba(9, 27, 54, .46) 64%,
            rgba(9, 27, 54, .26) 100%);
}

/* Red LED seam along the bottom edge of the band */
.innerhead-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, transparent, rgba(255, 74, 70, .95), transparent);
    box-shadow: 0 0 18px rgba(229, 37, 33, .55);
}

/* Faint technical grid over the band -- light lines now that the ground it
   is drawn on is dark */
.innerhead-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(190, 214, 240, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(190, 214, 240, .07) 1px, transparent 1px);
    background-size: 74px 74px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000, transparent 76%);
    mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000, transparent 76%);
}

.innerhead-bg .text-black,
.innerhead-bg .text-black .h1 {
    color: #FFFFFF !important;
    -webkit-text-stroke-color: rgba(255, 106, 102, .55) !important;
    font-size: clamp(34px, 5.2vw, 72px) !important;
}

/* the ghost twin behind the headline stays an outline */
.innerhead-bg .text-black .h1 {
    color: transparent !important;
}

/* Neither of the other two <p>s on the band: .careersublinks is the rail and
   owns its separators, .timesitaly is the red eyebrow -- and :not() carries
   its argument's weight, so this rule was quietly outranking the eyebrow's
   own colour and painting it white. */
.innerhead-bg p:not(.careersublinks):not(.timesitaly) {
    color: rgba(233, 240, 249, .82) !important;
}

.innerhead-bg .timesitaly {
    color: var(--bzf-red-bright) !important;
}

/* the standfirst under the headline, live on /msp and commented out on eight
   other bands that would otherwise have inherited it */
.innerhead-bg h4 {
    margin-top: 10px;
    font-size: var(--bzf-fs-body) !important;
    font-weight: var(--bzf-w-medium);
    line-height: var(--bzf-lh-body);
    color: rgba(233, 240, 249, .82) !important;
}

/* ==========================================================================
   18  INNER PAGE SURFACES
   ========================================================================== */
.shadowtop {
    position: relative;
}

/* Generic content card used across service / solution pages */
.sernboxlist .innerbox,
.new_servc .innerbox,
.innerbox {
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    border-top: 4px solid var(--bzf-red);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease);
}

.sernboxlist .innerbox:hover,
.new_servc .innerbox:hover,
.innerbox:hover {
    transform: translateY(-5px);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .2),
        var(--bzf-lift-2), var(--bzf-lift-red);
}

/* Value tiles (.wbboxshadow) came as #333 charcoal with white type and a
   white curtain on hover. Inverted: white glass at rest with a red spine,
   and the curtain becomes Blaze Red so the hover is the brand moment. */
.wbboxshadow {
    background: var(--bzf-glass-l-bg) !important;
    border: 1px solid var(--bzf-glass-l-brd);
    border-left: 6px solid var(--bzf-red);
    border-radius: var(--bzf-r);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1) !important;
    transition: box-shadow var(--bzf-dur) var(--bzf-ease), transform var(--bzf-dur) var(--bzf-ease);
}

.wbboxshadow::before,
.wbboxshadow::after {
    background: linear-gradient(160deg, var(--bzf-red-bright), var(--bzf-red-deep)) !important;
}

.wbboxshadow p {
    color: var(--bzf-ink-soft);
}

.wbboxshadow h4 {
    color: var(--bzf-red);
}

.wbboxshadow h4 .text-white {
    color: var(--bzf-ink) !important;
}

.wbboxshadow:hover {
    transform: translateY(-4px);
    box-shadow: var(--bzf-lift-2), var(--bzf-lift-red) !important;
}

.wbboxshadow:hover p,
.wbboxshadow:hover h4,
.wbboxshadow:hover h4 .text-white {
    color: #fff !important;
}

/* Team / logo tiles */
.team_box,
.teamlogo,
.blclogobrd,
.logolists li,
.sc-box {
    border-radius: var(--bzf-r-sm);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-1);
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease);
}

.team_box:hover,
.teamlogo:hover,
.blclogobrd:hover,
.logolists li:hover,
.sc-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .22), var(--bzf-lift-2);
}

/* Career / sub-navigation strip becomes a glass rail */
.careersublinks {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-1);
    border-radius: 999px;
    padding: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.careersublinks a {
    border-radius: 999px;
    padding: 10px 20px !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bzf-ink-soft);
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.careersublinks a:hover {
    color: var(--bzf-red);
    background: rgba(229, 37, 33, .08);
}

.careersublinks a.active {
    color: #fff !important;
    background: linear-gradient(100deg, var(--bzf-red), var(--bzf-red-deep));
    box-shadow: 0 8px 20px rgba(229, 37, 33, .3);
}

/* The band is dark, so the rail is the one light object on it -- which is
   what makes it read as the control it is rather than as more banner. Its
   edge and shadow are cut for a dark ground. */
/* The band's heading is an inline-block and this rail was an inline-flex
   immediately after it, so the two shared a line with one word-space between
   them -- a 72px headline with a pill jammed against its last letter, on every
   inner page. It takes its own line. */
/* Legacy centres the whole band from 991px down. A fit-content block does not
   follow text-align, so without this the rail would be the one thing on the
   band still hard against the left edge. */
@media (max-width: 991.98px) {

    .innerhead-bg .careersublinks {
        margin-left: auto;
        margin-right: auto;
    }
}

.innerhead-bg .careersublinks {
    display: flex;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-top: clamp(18px, 2vw, 28px);
    color: rgba(10, 35, 66, .42);
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 0 0 1px rgba(4, 16, 34, .3),
        0 18px 38px rgba(2, 10, 24, .42);
}

/* Service tiles on the services / solutions listings */
.serviceboxlist .innerbox {
    padding: 24px 18px 28px;
    border-radius: var(--bzf-r);
}

.serviceboxlist .innerbox p {
    color: var(--bzf-navy-deep);
    letter-spacing: .05em;
    font-size: 14.5px;
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.serviceboxlist .innerbox:hover p {
    color: var(--bzf-red);
}

.new_servc {
    filter: saturate(.9);
    transition: transform var(--bzf-dur) var(--bzf-ease), filter var(--bzf-dur) var(--bzf-ease);
}

.serviceboxlist .innerbox:hover .new_servc {
    transform: scale(1.05);
    filter: none;
}

/* Standalone image/text cards (used on most service pages).
   The higher-specificity .newsolubox .servicebox rules above still win on the
   homepage modules. */
.servicebox {
    border-radius: var(--bzf-r);
    overflow: hidden;
    border-left: 5px solid var(--bzf-red);
    box-shadow: 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-1);
    transition: transform var(--bzf-dur) var(--bzf-ease), box-shadow var(--bzf-dur) var(--bzf-ease);
}

/* Legacy laid a flat rgba(0,0,0,.75) sheet over the card image. That scrim is
   what made whole grids of these read as dark navy blocks, so it becomes a
   light wash: the imagery still recedes behind the label, but the card sits
   on the white canvas instead of punching a dark hole in it.
   The higher-specificity .newsolubox / .exblz rules above are unaffected. */
.servicebox::before {
    background: linear-gradient(158deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .76) 50%, rgba(244, 247, 250, .62) 100%) !important;
}

.servicebox .sertxt {
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: var(--bzf-r-sm);
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-1);
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.servicebox .sertxt h5 {
    color: var(--bzf-navy-deep);
    font-weight: 700;
    letter-spacing: .01em;
}

.servicebox:hover {
    /* Legacy nudged the card with top/-15px + right/-15px; the transform
       below replaces it, so zero those out to avoid a double shift. */
    top: 0;
    right: 0;
    transform: translateY(-6px);
    box-shadow: 0 0 0 1px rgba(229, 37, 33, .24), var(--bzf-lift-2), var(--bzf-lift-red);
}

.servicebox:hover .sertxt {
    border-color: rgba(229, 37, 33, .42);
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-2), 0 0 26px rgba(229, 37, 33, .16);
}

.servicebox:hover .sertxt h5 {
    color: var(--bzf-red);
}

/* Pill buttons used across forms, careers and service pages */
.applynow,
.job_apply,
.applynow_reverse {
    cursor: pointer;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: linear-gradient(100deg, var(--bzf-red) 0%, var(--bzf-red-deep) 100%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 10px 24px rgba(229, 37, 33, .3) !important;
    padding: 11px 26px !important;
    font-weight: 600;
    letter-spacing: .05em;
    transition: all var(--bzf-dur) var(--bzf-ease) !important;
}

.applynow:hover,
.applynow:focus,
.job_apply:hover,
.applynow_reverse:hover,
.applynow_reverse:focus {
    background: rgba(255, 255, 255, .9) !important;
    color: var(--bzf-red) !important;
    border-color: rgba(229, 37, 33, .5) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(229, 37, 33, .26), var(--bzf-glow-red) !important;
}

/* Accordions */
.accordion-item {
    border-radius: var(--bzf-r-sm);
    background: var(--bzf-glass-l-bg);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring);
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow var(--bzf-dur) var(--bzf-ease);
}

.accordion-item:hover {
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .2), var(--bzf-lift-1);
}

.accordion-header {
    color: var(--bzf-navy-deep);
    font-weight: 700;
}

/* Marquee client strip */
.marquee-wrapper {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* The card widths still came from the Bootstrap row this strip stopped being.
   blaze-css.css narrows .blzbclibox .col-sm-6.col-md-3 to 50% below 992 and
   to 100% below 576 -- percentages that used to resolve against the viewport
   and now resolve against a width:max-content track measured at 5000px. So on
   a tablet every card became 2500px across and on a phone 5000px: the first
   logo sat 4,900px off screen, the strip travelled 2,500px of a 100,000px
   track, and nineteen of the twenty clients could never come into view at
   all. The section was an empty white band on every phone.

   Absolute units are the only kind a max-content track can honour. */
.marquee-track .blzbclibox>[class*="col-"] {
    flex: 0 0 auto;
    width: clamp(200px, 56vw, 250px);
    max-width: none;
}

/* blaze-futura.js appends a second copy of the row so translateX(-50%) lands
   on a duplicate instead of mid-list. That doubles the distance travelled, so
   the duration doubles with it and the strip moves at exactly the speed it
   moved before -- about 62px a second, a card every four seconds. */
.marquee-track {
    animation-duration: 80s;
}

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

    /* Nothing travels now, so nothing off screen may stay off screen */
    .marquee-wrapper {
        overflow-x: auto;
    }
}

/* Enterprise solution panels */
.enterpraise_soln,
.enterpraise_soln1,
.ltrconslcbox {
    border-radius: var(--bzf-r);
}

/* Sections that used to be navy and are now light still carry legacy
   .text-white in the markup, which would render invisible. Remap it to the
   ink scale wherever the ground beneath it changed. The statement band, the
   footer, the dark modal and the solid-red explore tiles are untouched — the
   type there is still on a dark or red field.

   The inner page hero band was in this list and is no longer: section 17
   turned it dark again, so the nine bands carrying an <h4 class="text-white">
   subtitle need that class to mean what it says. */
.bwbhref .text-white,
.client_carousel.ent_solutn .text-white,
.clientcaros .text-white,
.l_news .text-white,
.newsolubox:not(.exblz) .servicebox .text-white {
    color: var(--bzf-ink) !important;
}

.bwbhref p.text-white,
.client_carousel.ent_solutn p.text-white,
.clientcaros p.text-white,
.l_news p.text-white {
    color: var(--bzf-ink-soft) !important;
}

/* ==========================================================================
   19  FORMS, TABS & MODAL
   ========================================================================== */
.form-control {
    border-radius: var(--bzf-r-sm) !important;
    border: 1px solid rgba(10, 35, 66, .16) !important;
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--bzf-ink) !important;
    padding: 12px 16px;
    box-shadow: var(--bzf-glass-l-hi);
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.form-control:focus {
    border-color: var(--bzf-red) !important;
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 3px rgba(229, 37, 33, .14) !important;
    outline: none;
}

.form-control::placeholder {
    color: var(--bzf-ink-mute);
}

/* Dark themed popup */
.darkthemepop .modal-content {
    background: var(--bzf-glass-d-bg);
    -webkit-backdrop-filter: var(--bzf-blur-lg);
    backdrop-filter: var(--bzf-blur-lg);
    border: 1px solid var(--bzf-glass-d-brd);
    border-radius: var(--bzf-r-lg);
    box-shadow: var(--bzf-glass-d-hi), 0 40px 100px rgba(4, 18, 42, .6);
    color: var(--bzf-white);
}

.darkthemepop .modal-content .form-control {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(170, 200, 235, .22) !important;
    color: #fff !important;
}

.darkthemepop .modal-content .form-control::placeholder {
    color: rgba(233, 240, 249, .5);
}

.darkthemepop .close {
    color: #fff;
    opacity: .7;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.darkthemepop .close:hover {
    opacity: 1;
    color: var(--bzf-red);
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid rgba(10, 35, 66, .12);
}

.nav-tabs .nav-link.active {
    color: var(--bzf-red) !important;
    border-color: transparent transparent var(--bzf-red);
    background: transparent;
}

/* ==========================================================================
   20  FOOTER
   Navy is retained here deliberately: it is the one place the brief asks for
   it, and it anchors the bright page above.
   ========================================================================== */
.footer {
    position: relative;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3;
    background: var(--bzf-seam-red);
    box-shadow: 0 0 18px rgba(229, 37, 33, .55);
}

.footer {
    position: relative;
    background:
        linear-gradient(180deg, rgba(4, 18, 42, .95) 0%, rgba(7, 29, 58, .97) 100%),
        url(../images/futura/band-navy.webp) no-repeat center center / cover !important;
    min-height: auto !important;
    padding-top: 70px;
    overflow: hidden;
    isolation: isolate;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 400px at 50% 0%, rgba(229, 37, 33, .12), transparent 68%),
        linear-gradient(to right, rgba(170, 200, 235, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(170, 200, 235, .045) 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
}

/* Red LED seam along the top edge */
.footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 37, 33, .9), transparent);
    box-shadow: 0 0 18px rgba(229, 37, 33, .55);
}

.footer .container,
.footer .footerlinks {
    position: relative;
    z-index: 2;
}

.footer,
.footer p,
.footer .normal_footer {
    color: var(--bzf-on-dark-soft);
}
/* The footer's one paragraph sits on a dark ground at a soft ink, where
   Regular reads thin. Medium is a real cut of Stolzl, not a synthesised
   weight, so it thickens the stroke without blurring it. */
.footerlogowrap p {
  font-weight: 500;
}

.footer a {
    color: rgba(233, 240, 249, .82);
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.footer a:hover {
    color: var(--bzf-red-bright);
}

.footer .foot-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 5rem;
}

.footer .foot-link a {
    position: relative;
    padding: 6px 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer .foot-link a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--bzf-red);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--bzf-dur) var(--bzf-ease-out);
}

.footer .foot-link a:hover::after {
    transform: scaleX(1);
}

/* Social icons as glass pucks */
.footer .sociallinks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(170, 200, 235, .2);
    color: rgba(233, 240, 249, .88);
    margin-left: 8px;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.footer .sociallinks a:hover {
    background: var(--bzf-red);
    border-color: var(--bzf-red-bright);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(229, 37, 33, .34);
}

.footer .sociallinks a svg {
    fill: currentColor;
    width: 17px;
    height: 17px;
}

.footer .footerlogowrap img {
    /* filter: brightness(0) invert(1); */
    opacity: .95;
    max-height: 54px;
    width: auto;
}

.footer hr {
    background: rgba(170, 200, 235, .16) !important;
    border: 0;
    height: 1px;
}

/* ==========================================================================
   21  FLOATING DISCUSS TAB
   ========================================================================== */
/* This is a primary call to action, so it wears the brand colour. */
.righabs.floatingLD .whiteblack {
    background: linear-gradient(160deg, #142842, var(--bzf-red));
    border: 1px solid rgba(255, 130, 126, .5);
    border-right: 0;
    border-radius: var(--bzf-r) var(--bzf-r) 0 0 ;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), -8px 0 28px rgba(229, 37, 33, .28);
    color: #fff;
    transition: all var(--bzf-dur) var(--bzf-ease);
}

.righabs.floatingLD .whiteblack:hover {
    background:linear-gradient(160deg, #142842 50%, var(--bzf-red));
    border-color: var(--bzf-red-bright);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), -12px 0 40px rgba(229, 37, 33, .46);
}

.righabs.floatingLD .schedule_call {
    color: #fff;
    letter-spacing: var(--bzf-ls-label);
    font-size: 14px;
    font-weight: 400;
}

/* Legacy pins this as a rotated side tab at 50% height with no responsive
   variant, so on a narrow screen its 45px column sits on top of the body copy
   -- measured, it crosses the plan-card text from 768px down. It keeps its
   place at the right edge but unrotates into a corner pill, which is what a
   fixed action on a small screen is everywhere else. Nothing is hidden and
   the destination is unchanged. */
@media (max-width: 991.98px) {

    .righabs.fixedrht.floatingLD {
        top: auto !important;
        bottom: 14px;
        right: 14px !important;
        width: auto;
        transform: none;
        border-radius: 999px;
        box-shadow: none;
    }

    .righabs.fixedrht.floatingLD .whiteblack {
        padding: 11px 18px;
        border-radius: 999px;
        border-right: 1px solid rgba(255, 130, 126, .5);
        box-shadow: 0 10px 26px rgba(4, 18, 42, .34), 0 0 0 1px rgba(229, 37, 33, .3);
    }

    .righabs.fixedrht.floatingLD .wb_con {
        display: flex;
        align-items: center;
    }

    .righabs.fixedrht.floatingLD .wb_con img {
        float: none;
        width: 17px;
        margin-right: 8px;
    }

    .righabs.fixedrht.floatingLD .schedule_call {
        font-size: 12px;
    }
}

/* ==========================================================================
   25  SOLUTIONS — VERTICAL CARD COLUMN  (.bzf-solpin)
   The cards are a plain vertical column and stay one: this section styles the
   card itself and nothing about how it moves. The scroll behaviour lives in
   section 25b, which is generic and attribute-driven, so the design here is
   free of it — and so a card that has not had its turn is the card exactly as
   drawn below, with no transform, filter or opacity of its own.
   ========================================================================== */
.bzf-solpin {
    position: relative;
    padding: 0;
}

/* --- the column ---------------------------------------------------------- */
.bzf-solpin__stage {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* was min(1220px, 100vw - 48px), which put this block 55px wider than
       every .container on the page at 1440 */
    width: var(--bzf-content);
    margin: 0 auto;
    /* The extra below is where the last card rests: it reaches the top, holds
       for about one wheel notch, and the section is done. Long enough to be a
       beat, too short to be a scroll trap. */
    padding: 100px 0 0;
}

/* Image first, content second. The markup keeps its reading order for
   assistive tech; the visual gets the leading half of the card. */
.bzf-solpanel {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    align-items: stretch;
    min-height: 430px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    padding: .625rem;
}

.bzf-solpanel--light {
    background: var(--bzf-white);
    /* box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-3); */
}

.bzf-solpanel--red {
    background: #D9201C;
    /* box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 0 0 1px rgba(179, 20, 15, .3),
        var(--bzf-lift-3), var(--bzf-lift-red); */
}

/* --- panel body --------------------------------------------------------- */
.bzf-solpanel__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 54px 48px;
    min-width: 0;
}

.bzf-solpanel__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 15px;
    /* margin-bottom: 24px; */
}

.bzf-solpanel__icon i {
    font-size: 23px;
    line-height: 1;
}

.bzf-solpanel--light .bzf-solpanel__icon {
    color: var(--bzf-red);
    background: var(--bzf-red-tint);
    box-shadow: inset 0 0 0 1px var(--bzf-red-line);
}

.bzf-solpanel--red .bzf-solpanel__icon {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.bzf-solpanel__body .outlinetxt {
    font-size: clamp(28px, 3vw, 40px) !important;
    margin: 0 !important;
    text-align: left;
}

.bzf-solpanel__body .outlinetxt .h1 {
    font-size: inherit !important;
}

.bzf-solpanel__body .timesitaly {
    margin: 9px 0 0 !important;
    letter-spacing: var(--bzf-ls-label);
    font-size: 13px !important;
    text-align: left !important;
}

.bzf-solpanel__body>p:not(.timesitaly):not(.bzf-solpanel__cta) {
    margin: 20px 0 0;
    font-size: clamp(15.5px, 1.15vw, 18px);
    line-height: 1.6;
    max-width: 46ch;
    text-align: left;
}

.bzf-solpanel__cta {
    margin: 30px 0 0 !important;
}

.bzf-solpanel--light .outlinetxt {
    color: var(--bzf-navy-deep);
}

.bzf-solpanel--light .outlinetxt .h1 {
    -webkit-text-stroke-color: rgba(229, 37, 33, .5);
     display:none;
}

.bzf-solpanel--light .timesitaly {
    color: var(--bzf-ink-mute) !important;
}

.bzf-solpanel--light>.bzf-solpanel__body>p:not(.timesitaly):not(.bzf-solpanel__cta) {
    color: var(--bzf-ink-soft);
}

.bzf-solpanel--red .outlinetxt {
    color: #fff;
}

.bzf-solpanel--red .outlinetxt .h1 {
    color: transparent;
    -webkit-text-stroke-color: rgba(255, 255, 255, .5);
    display:none;
}

.bzf-solpanel--red .timesitaly {
    color: rgba(255, 255, 255, .84) !important;
}

.bzf-solpanel--red>.bzf-solpanel__body>p:not(.timesitaly):not(.bzf-solpanel__cta) {
    color: rgba(255, 255, 255, .93);
}

/* Buttons: solid red on the light panel, a white plate on the red one */
.bzf-solpanel--light .whiteshdbox {
    background: linear-gradient(100deg, var(--bzf-red) 0%, var(--bzf-red-deep) 100%) !important;
    border-color: rgba(255, 120, 116, .5) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(229, 37, 33, .34), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.bzf-solpanel--light .whiteshdbox::before {
    background: linear-gradient(100deg, #fff 0%, #F0F4F9 100%);
}

.bzf-solpanel--light .whiteshdbox:hover,
.bzf-solpanel--light .whiteshdbox:hover a {
    color: var(--bzf-red) !important;
}

.bzf-solpanel--red .whiteshdbox {
    background: #fff !important;
    border-color: rgba(255, 255, 255, .9) !important;
    color: var(--bzf-red) !important;
    box-shadow: 0 10px 26px rgba(120, 12, 9, .3) !important;
}

.bzf-solpanel--red .whiteshdbox a {
    color: var(--bzf-red) !important;
}

.bzf-solpanel--red .whiteshdbox::before {
    background: linear-gradient(100deg, var(--bzf-navy-deep), var(--bzf-navy));
}

.bzf-solpanel--red .whiteshdbox:hover,
.bzf-solpanel--red .whiteshdbox:hover a {
    color: #fff !important;
}

/* --- blob-masked media -------------------------------------------------- */
.bzf-solpanel__media {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    order: -1;
    border-radius: 28px;
    display: flex;
  align-items: center;
  justify-content: center;
}

.bzf-solpanel--light .bzf-solpanel__media {
    background: #f0f7ff;
}

.bzf-solpanel--red .bzf-solpanel__media {
    background:#FF423E;
    order: 2;
}

.bzf-solpanel__shape {
    /* position: absolute; */
    margin: 0;
    overflow: hidden;
    will-change: transform;
}

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

/* The two figures were SVG clip-paths. They are radii now, because a card
   that carries a `filter` makes Chrome drop a `clip-path: url()` reference on
   its descendants and the lower figure stops painting entirely — and the
   focus transition needs that filter. The mirrored corner pair keeps the same
   shape language and costs nothing to composite. */
.bzf-solpanel__shape--a {
     width: 70%;
    z-index: 2;
}

.bzf-solpanel__shape--b {
    bottom: 8%;
    right: 6%;
    width: 60%;
    height: 50%;
    border-radius: 22px clamp(38px, 6vw, 88px) 22px clamp(38px, 6vw, 88px);
    z-index: 1;
}

/* ==========================================================================
   25b  VERTICAL STICKY CARD STACK  ([data-bzf-stack])
   A reusable scroll behaviour, not a design. Any block that marks itself
   data-bzf-stack and its cards data-bzf-stack-card gets it, which is why
   nothing in here names the solutions section.

   The cards never leave normal document flow. Before a scroll, without JS, on
   a screen too short to hold a card, or under reduced motion the section is
   the column the markup already describes: every card present, sharp, full
   size, untransformed. blaze-futura.js adds .bzf-stack-live only once it has
   measured that a card fits, and even then it touches a card only while that
   card is being covered — .bzf-stack-back goes on the outgoing card alone, so
   a card waiting its turn carries no transform, no filter and no opacity of
   its own. Nothing is pre-animated.

   JS writes one number per covered card, --bzf-stack-back (0 still in focus
   .. 1 fully behind), and the CSS derives all four effects from it.
   ========================================================================== */
[data-bzf-stack] {
    /* Where a card comes to rest. JS overwrites this with the measured height
       of the fixed header plus a margin, so a resting card can never slide
       under the bar; the literal is the pre-script fallback. */
    --bzf-stack-top: 92px;
}

[data-bzf-stack].bzf-stack-live [data-bzf-stack-card] {
    position: sticky;
    /* top: var(--bzf-stack-top); */
    top:135px
}

/* The last card needs a moment at the top before the section hands the page
   on. It is the only card whose rest is visible — the others are behind the
   one that replaced them — so it is the only one that gets the room. */
[data-bzf-stack].bzf-stack-live [data-bzf-stack-card]:last-child {
    margin-bottom: clamp(60px, 11vh, 130px);
}

/* The handover. Scaling from the top edge sinks the outgoing card straight
   back behind the one arriving instead of sliding it down away from it, and
   the whole thing is a function of one number, so reversing the scroll
   reverses the animation exactly. */
[data-bzf-stack].bzf-stack-live [data-bzf-stack-card].bzf-stack-back {
    transform-origin: 50% 0;
    transform:
        translate3d(0, calc(var(--bzf-stack-back, 0) * -10px), 0)
        scale(calc(1 - var(--bzf-stack-back, 0) * .06));
    filter: blur(calc(var(--bzf-stack-back, 0) * 8px));
    opacity: calc(1 - var(--bzf-stack-back, 0) * .65);
    /* Only smooths the step between animation frames; scroll drives the rest */
    transition: opacity .1s linear;
    /* Its links are behind another card now */
    pointer-events: none;
}

/* Touch sizing: a lighter hand. A full-width 8px blur is the one effect here
   worth economising on for a phone GPU, and a smaller card needs a smaller
   lift to read as depth rather than as a jolt. */
@media (max-width: 991.98px) {
    [data-bzf-stack].bzf-stack-live [data-bzf-stack-card].bzf-stack-back {
        transform:
            translate3d(0, calc(var(--bzf-stack-back, 0) * -8px), 0)
            scale(calc(1 - var(--bzf-stack-back, 0) * .045));
        filter: blur(calc(var(--bzf-stack-back, 0) * 4px));
    }
}

/* Making the card fit a phone. A stacked card has to be shorter than the
   screen under the bar or its foot ends up somewhere the reader cannot scroll
   to — so on a phone, and only while the stack is actually running, the
   figure band gives up the height the interaction needs. The card is
   otherwise untouched, and where even this is not enough the runtime drops
   the whole thing back to the plain column rather than squeeze further. */
@media (max-width: 767.98px) {
    [data-bzf-stack].bzf-stack-live .bzf-solpanel__media {
        min-height: clamp(132px, 19vh, 200px);
    }

    [data-bzf-stack].bzf-stack-live .bzf-solpanel__body {
        padding: 26px 24px 22px;
    }
}

/* ==========================================================================
   26  CLIENT RAIL  (.bzf-clientrail)
   The testimonials were a plain stacked list. They are now a pinned rail: the
   section holds still in the viewport while vertical scroll walks the cards
   right to left, one card per step, and releases to whatever follows once the
   last card has been seen. blaze-futura.js turns scroll position into a
   single translate on the row and a focus value per card; the CSS owns the
   rest.

   Nothing is pinned by CSS alone. Until <body> gains .bzf-crail-on the rail
   is an ordinary horizontal scroll container, which is also what no-JS and
   reduced-motion visitors get — every card stays reachable either way.
   ========================================================================== */
/* The parent section is already full width, so 100vw only bought five pixels
   of overflow on each side — the width of the scrollbar vw ignores. */
.bzf-clientrail {
    width: 100%;
    max-width: none;
    padding: 8px 0 26px;
    --bzf-crail-h: 100vh;
    /* The attachment is fixed, so the box this paints into is the viewport,
       not the section -- and at "100% auto" the file (1309x1201) covered only
       width / 1.09 of it. Every viewport taller than that, which is every
       phone and every portrait window, ran out of backdrop partway down and
       finished on bare white. "cover" is the same picture at the same
       top-left anchor on a wide screen -- width is the binding constraint
       either way, so nothing changes at 1440x900 -- and on a tall one it
       reaches the bottom. The colour underneath is the file's own edge, for
       the moment before a 1.1MB PNG has arrived. */
    background-attachment: fixed;
    background-color: var(--bzf-navy-deep);
    background-image: url(../images/futura/client-bg.png);
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
}

/* svh does not move when a phone's address bar collapses mid-scroll */
@supports (height: 100svh) {
    .bzf-clientrail {
        --bzf-crail-h: 100svh;
    }
}

.bzf-clientrail .row,
.bzf-clientrail .row>[class*="col-"] {
    margin: 0;
    padding: 0;
    max-width: 100%;
    flex: 0 0 100%;
}

.bzf-clientrail .client_carousel_cover {
    padding: 0;
}

.bzf-clientrail #grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Card one starts on the same line as every .container on the page. Both
       insets match so this row's content box is the container's content box,
       which is what the percentage card widths below resolve against. */
    /* --bzf-lift-3 reaches 52px above a card and 124px below it, and both
       this row and the pinned viewport around it clip what leaves their
       padding box — which is how the shadows were being cut off. The padding
       gives the shadow room and the negative margin hands the same space back
       to the layout, so the bleed costs the card no height. */
    padding: 60px var(--bzf-gutter) 96px;
    margin-top: -48px;
    margin-bottom: -84px;
    padding-left: max(var(--bzf-gutter), calc((100% - var(--bzf-content)) / 2));
    padding-right: max(var(--bzf-gutter), calc((100% - var(--bzf-content)) / 2));
}

.bzf-clientrail #grid::-webkit-scrollbar {
    display: none;
}

.bzf-clientrail #grid>.item {
    flex: 0 0 auto;
    /* width: min(720px, 100%); */
    width: 35rem;
    scroll-snap-align: start;
    margin: 0 !important;
}

/* custom-scripts.js shuffles #grid's children on every load, so the lead
   card is held first with flex order rather than DOM order. */
.bzf-clientrail #grid>.bzf-clients-lead {
    order: -1;
    /* width: min(720px, 100%); */
    width: 35rem;
    background: transparent !important;
  border: none !important;
}

/* The lead card only belongs to the homepage rail */
.bzf-clients-lead {
    display: none;
}

.bzf-clientrail .bzf-clients-lead {
    display: flex;
}

.bzf-clientrail .bzf-clients-lead .bzf-clients-lead__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 44px 38px;
    border-radius: var(--bzf-r-lg);
    /* background: linear-gradient(150deg, var(--bzf-navy-deep) 0%, var(--bzf-navy) 54%, #F0403C 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        var(--bzf-lift-2), var(--bzf-lift-red); */

        backdrop-filter: blur(5rem);
  background-color: hsla(0,0%,100%,.01);
}

/* --- the lead card's backdrop ---------------------------------------------
   The card carries three short lines against a tall panel, so most of it is
   air. This fills that air without competing for it: the lattice is pinned
   behind the type on a negative z-index -- above the panel's own background,
   below every word -- and it is sized and placed so its open middle lands
   where the eye rests rather than where the words are.

   Absolutely positioned, so the flex column above it is laid out exactly as
   it was and the rail measures the same card it measured before. */
.bzf-clients-lead .bzf-clients-lead__inner {
    position: relative;
    overflow: hidden;
}

.bzf-clients-lead__art {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(112%, 480px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    /* The panel behind is red over navy and the drawing is white and red on
       nothing, so screen adds its light rather than laying a grey card over
       the gradient -- which is the difference between a glow and a sticker. */
    mix-blend-mode: screen;
    opacity: .85;
    pointer-events: none;
}

/* One slow turn. Slow enough to be depth rather than motion -- a full
   revolution takes three minutes, so nothing visibly moves while a card is
   being read, and the panel simply never looks quite the same twice. */
.bzf-lead-orbits {
    transform-origin: 50% 50%;
    animation: bzf-lead-turn 180s linear infinite;
}

.bzf-lead-nodes {
    transform-origin: 50% 50%;
    animation: bzf-lead-breathe 14s ease-in-out infinite;
}

@keyframes bzf-lead-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bzf-lead-breathe {

    0%,
    100% {
        opacity: .82;
    }

    50% {
        opacity: 1;
    }
}

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

    .bzf-lead-orbits,
    .bzf-lead-nodes {
        animation: none;
    }
}

.bzf-clients-lead__inner .timesitaly {
    color: rgba(255, 255, 255, .85) !important;
    margin-bottom: 14px;
}

.bzf-clients-lead__inner h3 {
    color: #fff !important;
    font-size: clamp(25px, 2.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.14;
    margin: 0 0 16px;
}

.bzf-clients-lead__inner h3 span {
    white-space: nowrap;
}

.bzf-clients-lead__inner h3 bdi {
    color: var(--bzf-red-deep);
}

.bzf-clients-lead__hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    margin: 0 0 26px !important;
}

.bzf-clients-lead__hint::after {
    content: "";
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, .6);
}

.bzf-clients-lead__inner .whiteshdbox {
    align-self: flex-start;
    background: #fff !important;
    border-color: rgba(255, 255, 255, .9) !important;
    color: var(--bzf-red) !important;
    box-shadow: 0 10px 26px rgba(120, 12, 9, .3) !important;
}

.bzf-clients-lead__inner .whiteshdbox::before {
    background: linear-gradient(100deg, var(--bzf-navy-deep), var(--bzf-navy)) !important;
}

.bzf-clients-lead__inner .whiteshdbox:hover {
    color: #fff !important;
}

/* Inside the rail each testimonial is a self-contained card of equal height */
.bzf-clientrail .inner>.item.client_carousel {
    height: 100%;
    margin: 0 !important;
}

.bzf-clientrail .inner>.item.client_carousel>.row {
    height: 100%;
    flex-wrap: nowrap;
}


.bzf-clientrail .in-rev {
    padding: 22px 30px 28px;
}

/* The picture above spends height the quote used to have, and the pinned card
   has to fit one screen, so the badge gives some of it back. */
.bzf-clientrail .rev_blk {
    margin-top: 20px;
}

.bzf-clientrail .rev_blk .lft {
    padding: 15px !important;
}

.bzf-clientrail .rev_blk .lft h4 b {
    font-size: 38px;
}

.bzf-clientrail .in-rev>.client_desc>p {
    font-size: 14px;
    line-height: 1.58;
}

/* A pinned card is only worth pinning if the whole of it fits the screen it
   is held against, and the band above gives back most of what a short screen
   costs. The rest comes from here: on a laptop the card carries the same
   words in a tighter frame rather than losing the rail altogether. 920px is
   the height below which the roomy card stops fitting once the header has
   taken its share off the top -- measured, not chosen. */
@media (max-height: 920px) {
    .bzf-clientrail .inner>.item.client_carousel>.row>[class*="col-"]:not(.in-rev) {
        padding-top: 14px;
    }

    .bzf-clientrail .in-rev {
        padding: 16px 30px 20px;
    }

    .bzf-clientrail .in-rev>.client_desc {
        margin-bottom: 8px !important;
    }

    .bzf-clientrail .in-rev>.client_desc>p {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .bzf-clientrail .rev_blk {
        margin-top: 12px;
    }

    .bzf-clientrail .rev_blk .lft {
        padding: 11px !important;
    }

    .bzf-clientrail .rev_blk .lft h4 b {
        font-size: 30px;
    }
}

/* A 1366x768 laptop leaves Chrome about 640px of viewport, and only about
   540 of it once the header has taken its share off the top -- which the
   compact card above still misses. This tier buys those pixels back, and a
   little room besides, rather than handing the most common screen on the web
   the fallback. */
@media (max-height: 800px) {
    .bzf-clientrail .whitetrans {
        height: clamp(120px, 20vh, 296px);
    }

    .bzf-clientrail .in-rev {
        padding: 12px 26px 16px;
    }

    .bzf-clientrail .in-rev>.client_desc>p {
        font-size: 13px;
        line-height: 1.46;
    }

    /* Less bleed to hide the shadow in, and the same amount handed back */
    .bzf-clientrail #grid {
        padding-top: 40px;
        padding-bottom: 70px;
        margin-top: -32px;
        margin-bottom: -62px;
    }
}

/* The cheapest height on a short screen is bought sideways. The card is only
   as tall as the longest testimonial makes it, and that one runs to nineteen
   lines at 35rem; carrying the same words across 44rem costs four of them.
   Width only -- nothing is set smaller to gain it. Held above 992px because
   a phone has no width to spare. */
@media (max-height: 800px) and (min-width: 992px) {

    .bzf-clientrail #grid>.item,
    .bzf-clientrail #grid>.bzf-clients-lead {
        width: min(44rem, 88vw);
    }
}

/* --- the pinned rail ------------------------------------------------------
   .bzf-crail-on is added by the script once it has taken control. The row
   stops being a scroll container and becomes a single translated strip, so
   the movement is one composited transform rather than a scroll write.
   ------------------------------------------------------------------------ */
.bzf-crail__track {
    position: relative;
}

.bzf-crail__viewport {
    width: 100%;
}

body.bzf-crail-on .bzf-crail__track {
    /* One screen to read card one, then a step per card after it, and
       nothing beyond that: the track is exactly as long as the pin plus the
       steps, so the section unpins on the same scroll that lands the last
       card. The old 1.18 left 151px of pinned scrolling with nothing to
       move. Shared with TAIL in blaze-futura.js — change both. */
    height: calc(var(--bzf-crail-h, 100vh) + (var(--bzf-crail-n, 1) - 1) * 42vh);
}

body.bzf-crail-on .bzf-crail__pin {
    position: sticky;
    top: 0;
    height: var(--bzf-crail-h, 100vh);
    display: flex;
    flex-direction: column;
    /* Centred while the card fits the space below the bar. `safe` is what
       stops the top of the card being shaved off: when the strip is taller
       than that space -- a long testimonial, a short window, a stale
       measurement -- plain `center` overflows equally at both ends and the
       first thing lost is the card's top edge, under the header. `safe`
       falls back to flex-start in exactly that case, so whatever has to go
       goes off the bottom and the white card always begins below the bar.
       The first declaration is the fallback for engines without `safe`. */
    justify-content: center;
    justify-content: safe center;
    /* The header is fixed and the card is parked, not passing through, so the
       space the bar occupies is not space the card can be centred in. The
       measurement is the bar's own bottom edge, written here by the script;
       the fallback is the bar's declared height plus the same air the script
       adds, so the card clears the header even before -- or without -- the
       script's measurement. */
    padding-top: var(--bzf-crail-top, calc(var(--bzf-header-h, 84px) + 30px));
}

body.bzf-crail-on .bzf-crail__viewport {
    /* Clips the row horizontally. Same padding/negative-margin pair as the
       row itself, so the cards' shadows survive the clip. */
    overflow: hidden;
    padding: 60px 0 96px;
    margin: -60px 0 -96px;
}

body.bzf-crail-on .bzf-clientrail #grid {
    overflow: visible;
    scroll-snap-type: none;
    transform: translate3d(calc(var(--bzf-crail-x, 0px) * -1), 0, 0);
}

/* Focus treatment. --bzf-cf is 1 on the card being read and falls away either
   side of it, so the pair of values below interpolate rather than snap. */
body.bzf-crail-on .bzf-clientrail #grid>.item {
    /* opacity: calc(.55 + var(--bzf-cf, 1) * .45); */
    /* transform: scale(calc(.962 + var(--bzf-cf, 1) * .038)); */
    transition: opacity .12s linear;
}

body.bzf-crail-on .bzf-clientrail #grid>.item:not(.is-active) {
    /* a dimmed card should not answer the pointer and lose its scale to the
       hover rule underneath */
    pointer-events: none;
}

body.bzf-crail-on .bzf-clientrail .inner>.item.client_carousel.is-active {
    /* box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .3),
        var(--bzf-lift-3), var(--bzf-lift-red); */
}

/* --- when the rail cannot run --------------------------------------------
   Reduced motion, no JS able to pin, or a window too short even for the
   compact card: the row stayed a nowrap strip with its scrollbar suppressed,
   so card two sat half past the right edge with its sentences cut mid-word
   and nothing on screen to say it continued -- and a mouse cannot scroll a
   strip that shows no scrollbar. Wrapped, every card is whole and reachable
   by the page's own scroll.

   The class is written by the script, not assumed by the CSS, because the
   geometry the script measures is only true in the strip. */
body.bzf-crail-off .bzf-clientrail #grid {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    scroll-snap-type: none;
    row-gap: 26px;
}

body.bzf-crail-off .bzf-clientrail #grid>.item,
body.bzf-crail-off .bzf-clientrail #grid>.bzf-clients-lead {
    width: min(35rem, 100%);
}

/* --- progress ------------------------------------------------------------ */
.bzf-crail__nav {
    display: none;
    align-items: center;
    gap: 26px;
    width: var(--bzf-content);
    margin: 30px auto 0;
}

body.bzf-crail-on .bzf-crail__nav {
    display: flex;
}

.bzf-crail__rail {
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: rgba(10, 35, 66, .12);
    overflow: hidden;
}

.bzf-crail__fill {
    position: absolute;
    inset: 0;
    transform-origin: 0 50%;
    transform: scaleX(var(--bzf-crail-p, 0));
    background: linear-gradient(90deg, var(--bzf-red-deep), var(--bzf-red), var(--bzf-red-bright));
    box-shadow: 0 0 14px rgba(229, 37, 33, .55);
}

.bzf-crail__dots {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.bzf-crail__dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    padding: 5px 2px;
    cursor: pointer;
    line-height: 0;
}

.bzf-crail__dot span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(10, 35, 66, .2);
    transition: background var(--bzf-dur) var(--bzf-ease), transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-crail__dot:hover span {
    background: rgba(229, 37, 33, .5);
}

.bzf-crail__dot.is-on span {
    background: var(--bzf-red);
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(229, 37, 33, .6);
}

.bzf-crail__dot:focus-visible {
    outline: 2px solid var(--bzf-red);
    outline-offset: 3px;
    border-radius: 50%;
}

.bzf-crail__count {
    flex: 0 0 auto;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--bzf-ink-mute);
}

.bzf-crail__count b {
    color: var(--bzf-red);
}

.bzf-crail__count i {
    font-style: normal;
    opacity: .5;
    margin: 0 4px;
}

/* ==========================================================================
   28  PRICING

   Four cards that have to be compared, a dark band that has to interrupt,
   a table that has to be read across, and four questions. Each is a different
   job, so each is a different surface -- but all four are built from the same
   tokens as the rest of the site, so the page belongs to it.
   ========================================================================== */
.bzf-pricing {
    padding-bottom: 0;
}

.bzf-price__intro {
    width: min(760px, 100%);
    margin: clamp(48px, 6vw, 78px) auto clamp(34px, 4vw, 54px);
    text-align: center;
    font-size: clamp(15px, 1.25vw, 17.5px);
    line-height: 1.72;
    color: var(--bzf-ink-soft);
}

.bzf-price__intro span {
    color: var(--bzf-red);
    font-weight: 700;
}

.bzf-price__h2 {
    margin: clamp(56px, 7vw, 92px) 0 clamp(22px, 2.6vw, 34px);
    font-size: clamp(26px, 3.1vw, 42px) !important;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--bzf-ink) !important;
}

.bzf-price__h2 span {
    color: var(--bzf-red);
}

/* --- The four plans ------------------------------------------------------ */
.bzf-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(16px, 1.8vw, 26px);
    margin: 0;
    padding: 0;
}

/* A column, so the button can be pushed to the floor by margin-top:auto and
   all three land on the same line however much copy sits above them. */
.bzf-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 30px) clamp(26px, 2.4vw, 34px);
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bzf-plan:hover {
    transform: translateY(-5px);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .2),
        var(--bzf-lift-2);
}

/* The recommendation is lifted and ringed rather than made taller: a taller
   middle card would break the row alignment that lets the three be read
   across in the first place. */
.bzf-plan--pick {
    background: var(--bzf-steel);
    border-color: rgba(229, 37, 33, .3);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .3),
        var(--bzf-lift-2),
        var(--bzf-lift-red);
}

.bzf-plan--pick:hover {
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .45),
        var(--bzf-lift-3),
        var(--bzf-lift-red);
}

.bzf-plan__flag {
    position: absolute;
    top: 0;
    left: clamp(22px, 2vw, 30px);
    transform: translateY(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--bzf-fs-label);
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 46%, var(--bzf-red-deep) 100%);
    box-shadow: 0 6px 18px rgba(229, 37, 33, .34);
}

.bzf-plan__no {
    margin: 0 0 10px;
    font-size: var(--bzf-fs-label);
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-red);
}

/* Two lines' worth of space whether the name needs one or two, so the price
   rule below it lands on the same line in every card. With four names of
   uneven length -- "Static Site" beside "WordPress 5-page" -- letting each
   set its own height staggered the prices across the row, which is the one
   thing this layout exists to make comparable. */
.bzf-plan__name {
    margin: 0 0 8px !important;
    min-height: 2.24em;
    font-size: clamp(21px, 1.9vw, 26px) !important;
    line-height: 1.12;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--bzf-ink) !important;
}

.bzf-plan__stack {
    margin: 0 0 20px;
    font-size: var(--bzf-fs-label);
    font-weight: 600;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-ink-mute);
}

.bzf-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: 20px;
    border-top: 1px dashed rgba(10, 35, 66, .16);
}

.bzf-plan__now {
    font-size: clamp(30px, 2.9vw, 40px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--bzf-ink);
}

/* No number to set, so it sets at the weight of a sentence instead of a
   price -- it is an invitation, not a figure. */
.bzf-plan__now--talk {
    font-size: clamp(26px, 2.4vw, 34px);
    letter-spacing: -.01em;
}

.bzf-plan__was {
    position: relative;
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    color: var(--bzf-ink-mute);
}

.bzf-plan__was::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -3px;
    top: 52%;
    height: 2px;
    border-radius: 2px;
    background: var(--bzf-red);
    opacity: .85;
}

.bzf-plan__terms {
    margin: 12px 0 0;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(10, 35, 66, .16);
    font-size: var(--bzf-fs-label);
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-ink-mute);
}

.bzf-plan__blurb {
    margin: 20px 0 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--bzf-ink-soft);
}

.bzf-plan__list {
    margin: 20px 0 clamp(24px, 2.4vw, 32px);
    padding: 0;
    display: grid;
    gap: 10px;
}

.bzf-plan__list li {
    position: relative;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bzf-ink);
}

/* A tick drawn rather than set, so it needs no icon font and never arrives
   late as a box. */
.bzf-plan__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .34em;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--bzf-red);
    border-bottom: 2px solid var(--bzf-red);
    transform: rotate(-45deg);
}

.bzf-plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* auto, so the three buttons land on one line however much copy sits
       above them -- do not trade this for a fixed margin */
    margin-top: auto;
    padding: 15px 22px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--bzf-ink) !important;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(10, 35, 66, .16);
    box-shadow: 0 6px 16px rgba(7, 29, 58, .07);
    transition:
        background var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bzf-plan__cta i {
    font-size: 14px;
    transition: transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-plan__cta:hover {
    color: #FFFFFF !important;
    border-color: transparent;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 46%, var(--bzf-red-deep) 100%);
    box-shadow: var(--bzf-lift-red);
}

.bzf-plan__cta:hover i {
    transform: translateX(4px);
}

.bzf-plan__cta--solid {
    color: #FFFFFF !important;
    border-color: transparent;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 46%, var(--bzf-red-deep) 100%);
    box-shadow: 0 10px 24px rgba(229, 37, 33, .26);
}

.bzf-plan__cta--solid:hover {
    box-shadow: 0 14px 34px rgba(229, 37, 33, .38);
}

/* --- Hosting band -------------------------------------------------------- */
.bzf-hostband {
    position: relative;
    isolation: isolate;
    margin-top: clamp(56px, 7vw, 96px);
    padding: clamp(56px, 6.5vw, 94px) 0;
    background: var(--bzf-metal);
    overflow: hidden;
}

.bzf-hostband::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 460px at 12% 12%, rgba(229, 37, 33, .2), transparent 66%),
        linear-gradient(to right, rgba(150, 186, 228, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150, 186, 228, .06) 1px, transparent 1px);
    background-size: auto, 84px 84px, 84px 84px;
}

/* the same red seam that closes the inner-page hero band */
.bzf-hostband::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--bzf-seam-red);
    box-shadow: 0 0 18px rgba(229, 37, 33, .6);
}

.bzf-hostband__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4.4vw, 68px);
}

.bzf-hostband__label {
    position: relative;
    margin: 0 0 16px;
    padding-left: 16px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-red-bright);
}

.bzf-hostband__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: .43em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 10px rgba(229, 37, 33, .9);
}

.bzf-hostband__head {
    margin: 0 0 18px !important;
    font-size: clamp(28px, 3.6vw, 50px) !important;
    line-height: 1.04;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: #FFFFFF !important;
}

.bzf-hostband__head span {
    color: var(--bzf-red-bright);
}

.bzf-hostband__blurb {
    margin: 0 0 26px;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bzf-on-dark-soft);
}

.bzf-hostband__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: #FFFFFF !important;
    text-decoration: none !important;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 46%, var(--bzf-red-deep) 100%);
    box-shadow: 0 12px 28px rgba(229, 37, 33, .3);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bzf-hostband__cta i {
    transition: transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-hostband__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(229, 37, 33, .42);
}

.bzf-hostband__cta:hover i {
    transform: translateX(4px);
}

.bzf-hostband__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 18px);
    margin: 0;
    padding: 0;
}

.bzf-hostband__tiles li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(120px, 11vw, 148px);
    padding: 20px 22px;
    border-radius: var(--bzf-r-sm);
    background: var(--bzf-glass-d-bg);
    border: 1px solid var(--bzf-glass-d-brd);
    box-shadow: var(--bzf-glass-d-hi);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease);
}

.bzf-hostband__tiles li::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 22px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 10px rgba(229, 37, 33, .9);
}

.bzf-hostband__tiles li:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 37, 33, .42);
}

.bzf-hostband__tiles h3 {
    margin: 0 0 6px !important;
    font-size: clamp(13px, 1.1vw, 15px) !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFFFFF !important;
}

.bzf-hostband__tiles p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bzf-on-dark-soft);
}

/* --- Comparison table ----------------------------------------------------
   The card and the scroller are two elements on purpose: the card holds the
   surface, the radius and the shadow and stays still, so the fade marking
   "there is more to the right" can sit on it without scrolling away with the
   table or being clipped along with the shadow.
   ---------------------------------------------------------------------- */
.bzf-cmp {
    position: relative;
    overflow: hidden;
    border-radius: var(--bzf-r);
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

.bzf-cmp__scroll {
    overflow-x: auto;
    border-radius: inherit;
}

.bzf-cmp__table {
    width: 100%;
    min-width: 640px;
    margin: 0;
    border-collapse: collapse;
}

.bzf-cmp__table thead th {
    padding: 16px 22px;
    background: rgba(229, 37, 33, .07);
    border-bottom: 1px solid rgba(229, 37, 33, .16);
    font-size: var(--bzf-fs-label);
    font-weight: 700;
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: var(--bzf-ink);
    text-align: left;
    white-space: nowrap;
}

.bzf-cmp__table tbody th {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bzf-ink);
    text-align: left;
}

.bzf-cmp__table tbody th,
.bzf-cmp__table tbody td {
    padding: 15px 22px;
    border-bottom: 1px solid rgba(10, 35, 66, .07);
    font-size: 13px;
    line-height: 1.45;
    color: var(--bzf-ink-soft);
    vertical-align: middle;
}

.bzf-cmp__table tbody tr:last-child th,
.bzf-cmp__table tbody tr:last-child td {
    border-bottom: 0;
}

.bzf-cmp__table tbody tr {
    transition: background-color var(--bzf-dur) var(--bzf-ease);
}

.bzf-cmp__table tbody tr:hover {
    background: rgba(229, 37, 33, .04);
}

.bzf-cmp__yes {
    font-size: 17px;
    line-height: 1;
    color: var(--bzf-red);
}

.bzf-cmp__no {
    color: var(--bzf-gray-line);
}

/* Only where the table cannot fit. The scroller measures viewport minus 32px
   of gutter, so 640px of table stops fitting just under 672px of viewport --
   above that a fade would be dimming a last column that is fully visible. */
@media (max-width: 671.98px) {

    .bzf-cmp::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 44px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92));
    }
}

/* --- FAQ ----------------------------------------------------------------- */
.bzf-faqband {
    margin-top: clamp(20px, 3vw, 42px);
    padding-bottom: clamp(64px, 8vw, 110px);
}

.bzf-faq {
    /* width: min(880px, 100%); */
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.bzf-faq__item {
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    overflow: hidden;
    transition: box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bzf-faq__item:hover {
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .2),
        var(--bzf-lift-1);
}

.bzf-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--bzf-ink);
    cursor: pointer;
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.bzf-faq__q:hover,
.bzf-faq__q[aria-expanded="true"] {
    color: var(--bzf-red);
}

/* Two rules crossed: the vertical one rotates away, which turns the plus into
   a cross as the answer opens and back again as it closes. */
.bzf-faq__q::after,
.bzf-faq__q::before {
    content: "";
    position: absolute;
    right: 26px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--bzf-red);
    transition: transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-faq__q {
    position: relative;
    padding-right: 58px;
}

.bzf-faq__q::before {
    transform: rotate(90deg);
}

.bzf-faq__q[aria-expanded="true"]::before {
    transform: rotate(0deg);
}

.bzf-faq__q[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.bzf-faq__q:focus {
    outline: 0;
}

.bzf-faq__q:focus-visible {
    outline: 2px solid var(--bzf-red);
    outline-offset: -3px;
}

.bzf-faq__a {
    padding: 0 24px 22px;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--bzf-ink-soft);
}

/* --- Pricing: responsive -------------------------------------------------- */
/* Four cards on one line need the full container to stay legible: below 1200
   the price and the plan name start setting on two lines each. Two-by-two is
   the next honest step -- an even split, no orphan, and the pair a buyer is
   choosing between still sits side by side. */
@media (max-width: 1199.98px) {

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

@media (max-width: 991.98px) {

    .bzf-hostband__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .bzf-hostband__blurb {
        max-width: none;
    }
}

@media (max-width: 767.98px) {

    /* Not even two fit, so they stack and the recommendation keeps its place
       in the order rather than being promoted to the top. */
    .bzf-plans {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .bzf-plan--pick {
        margin-top: 8px;
    }
}

@media (max-width: 575.98px) {

    .bzf-hostband__tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .bzf-hostband__tiles li {
        min-height: 0;
        padding: 34px 18px 18px;
    }

    .bzf-hostband__tiles li::before {
        left: 18px;
    }

    .bzf-faq__q {
        padding: 17px 50px 17px 18px;
        font-size: 12px;
    }

    .bzf-faq__q::after,
    .bzf-faq__q::before {
        right: 20px;
    }

    .bzf-faq__a {
        padding: 0 18px 18px;
        font-size: 13px;
    }

    .bzf-cmp__table thead th,
    .bzf-cmp__table tbody th,
    .bzf-cmp__table tbody td {
        padding: 13px 16px;
    }
}

/* ==========================================================================
   22  MOTION & SCROLL REVEAL
   Classes below are applied by assets/js/blaze-futura.js. If the script does
   not run, nothing is hidden — the site renders exactly as it would without it.
   ========================================================================== */
.bzf-anim [data-bzf-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity var(--bzf-dur-slow) var(--bzf-ease-out),
        transform var(--bzf-dur-slow) var(--bzf-ease-out);
    will-change: opacity, transform;
}

.bzf-anim [data-bzf-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* --- Entrance motion: replacing the animate.css fades ---------------------
   201 elements across the site carry `animated fadeInDown` / `fadeInUp`.
   animate.css runs those for a full second, eases them linearly, and travels
   translate3d(0, -100%, 0) -- a whole element height, so a 72px headline
   drops in from 80px away. Every one of them also starts the moment the page
   loads, wherever it happens to be on the page, which is the "everything
   fades in at once" the redesign is meant to remove.

   The markup is not touched. The keyframes those class names point at are
   redefined here: a short distance in pixels rather than a percentage of the
   element, a trace of scale so the movement reads as depth rather than a
   slide, and an ease-out that decelerates instead of running at a constant
   speed. The result is the same class doing something considerably quieter.
   ------------------------------------------------------------------------ */
.animated {
    -webkit-animation-duration: .66s;
    animation-duration: .66s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: var(--bzf-ease-out);
    animation-timing-function: var(--bzf-ease-out);
}

@-webkit-keyframes fadeInDown {
    from { opacity: 0; -webkit-transform: translate3d(0, -16px, 0) scale(.988); transform: translate3d(0, -16px, 0) scale(.988); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInDown {
    from { opacity: 0; -webkit-transform: translate3d(0, -16px, 0) scale(.988); transform: translate3d(0, -16px, 0) scale(.988); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@-webkit-keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translate3d(0, 22px, 0) scale(.988); transform: translate3d(0, 22px, 0) scale(.988); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translate3d(0, 22px, 0) scale(.988); transform: translate3d(0, 22px, 0) scale(.988); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@-webkit-keyframes fadeInLeft {
    from { opacity: 0; -webkit-transform: translate3d(-24px, 0, 0); transform: translate3d(-24px, 0, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInLeft {
    from { opacity: 0; -webkit-transform: translate3d(-24px, 0, 0); transform: translate3d(-24px, 0, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@-webkit-keyframes fadeInRight {
    from { opacity: 0; -webkit-transform: translate3d(24px, 0, 0); transform: translate3d(24px, 0, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; -webkit-transform: translate3d(24px, 0, 0); transform: translate3d(24px, 0, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

/* Held until the element is actually on screen. .bzf-anim is only on <body>
   once the script has run and has an element to hold, so if the script never
   runs nothing is ever paused and every entrance plays exactly as it does
   today -- the same contract the reveal system above works under. */
.bzf-anim .animated:not(.is-seen) {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/* Staggered children */
.bzf-anim [data-bzf-reveal][data-bzf-delay="1"] {
    transition-delay: .08s;
}

.bzf-anim [data-bzf-reveal][data-bzf-delay="2"] {
    transition-delay: .16s;
}

.bzf-anim [data-bzf-reveal][data-bzf-delay="3"] {
    transition-delay: .24s;
}

.bzf-anim [data-bzf-reveal][data-bzf-delay="4"] {
    transition-delay: .32s;
}

/* Slow drift for the hero background — cinematic, barely perceptible */
@keyframes bzf-drift {

    0%,
    100% {
        transform: scale(1.04) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(1.08) translate3d(-1.2%, -.8%, 0);
    }
}

/* Pointer-driven parallax hooks (set by JS as custom properties) */
.bzf-parallax {
    transform: translate3d(calc(var(--bzf-px, 0) * 1px), calc(var(--bzf-py, 0) * 1px), 0);
    transition: transform .8s var(--bzf-ease-out);
}

.bzf-mm__foottxt p {
  padding: 0px !important;
}

/* ==========================================================================
   23  RESPONSIVE
   ========================================================================== */
@media (max-width: 1399.98px) {
    .newsolubox .servicebox .sertxt {
        padding: 40px 230px 40px 38px !important;
    }
}

@media (max-width: 1199.98px) {
    :root {
        --bzf-header-h: 78px;
    }

    .header.fixedtop .navbar-nav>.nav-item>.nav-link,
    .header.fixedtop .navbar-nav>.nav-item>span.nav-link {
        padding: .7rem .8rem !important;
        font-size: .78rem;
    }

    .newsolubox .servicebox .sertxt {
        padding: 34px 190px 34px 32px !important;
    }

    .newsolubox .servicebox .newsoluicon {
        font-size: 165px !important;
    }

    /* The petals live in a .col-md-8 (610px usable at 1024). Legacy's
       250px + 60px margins needs 620px, so the cluster broke to one column. */
    .libox li {
        width: 205px !important;
        height: 205px !important;
        margin: 12px !important;
        font-size: 13px !important;
    }

    .libox::before {
        --bzf-orb: 208px;
        --bzf-orb-icon: 48px;
    }

    .clients .ctflags.icontxts.libox::after {
        width: 380px;
        height: 380px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --bzf-header-h: 72px;
    }

    /* Mobile menu panel is a white glass sheet, like the desktop mega panel */
    .header.fixedtop .navbar-collapse {
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: var(--bzf-blur-lg);
        backdrop-filter: var(--bzf-blur-lg);
        border: 1px solid rgba(255, 255, 255, .85);
        border-radius: var(--bzf-r);
        box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(10, 35, 66, .06), 0 26px 60px rgba(7, 29, 58, .18);
        margin-top: 12px;
        padding: 14px;
        max-height: calc(100vh - var(--bzf-header-h) - 30px);
        overflow-y: auto;
    }

    .header.fixedtop .navbar-collapse .nav-link,
    .header.fixedtop .navbar-collapse span.nav-link,
    .header.fixedtop .navbar-collapse h6,
    .header.fixedtop .navbar-collapse p,
    .header.fixedtop .navbar-collapse .ctflags li {
        color: var(--bzf-ink) !important;
    }

    .header.fixedtop .navbar-collapse .nav-link:hover {
        color: var(--bzf-red) !important;
        background: var(--bzf-red-tint);
    }

    .megamenu .dropdown-menu .megacontent {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 4px 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .megamenu .dropdown-menu .megacontent::before {
        display: none;
    }

    .megamenu .dropdown-menu .megacontent h6 {
        color: var(--bzf-red);
    }

    .homeslider .carousel-inner .carousel-item {
        /* was clamp(520px, 72vh, 640px). Not the full quarter the desktop
           frame lost: stacked, slides 2 and 3 are the tallest things on this
           page, and below this the drawing stops being readable. */
        height: clamp(480px, 60vh, 520px);
    }

    .slider .carousel-caption.first_slide {
        width: 78%;
        margin-left: 6%;
    }

    /* Solution slabs stack — glyph moves out of the text column */
    .newsolubox .servicebox .sertxt {
        padding: 32px 30px !important;
    }

    .newsolubox .servicebox .newsoluicon {
        font-size: 150px !important;
        right: -30px !important;
        opacity: .55 !important;
    }

    .newsolubox .servicebox:hover {
        --bzf-lift: -6px;
        --bzf-rx: 0deg;
        --bzf-ry: 0deg;
    }

    .libox::before {
        box-shadow:
            inset 0 4px 16px rgba(255, 255, 255, .3),
            inset 0 -10px 22px rgba(112, 12, 8, .5),
            0 12px 30px rgba(229, 37, 33, .32),
            0 0 0 1px rgba(255, 120, 116, .45) !important;
    }

    .libox li {
        width: 190px !important;
        height: 190px !important;
        margin: 8px !important;
        font-size: 12.5px !important;
    }

    .libox::before {
        --bzf-orb: 105px;
        --bzf-orb-icon: 35px;
    }

    .clients .ctflags.icontxts.libox::after {
        width: 340px;
        height: 340px;
    }

    /* Caption now spans most of the slide, so the centred arrows would sit on
       top of the headline. Dock them under it. */
    .slider .carousel-control-prev,
    .slider .carousel-control-next {
        top: auto;
        bottom: 16px;
        height: 50px;
        align-items: flex-end;
        width: 60px;
    }

    .slider .carousel-control-prev {
        left: 50%;
        transform: translateX(-60px);
    }

    .slider .carousel-control-next {
        right: 50%;
        transform: translateX(60px);
    }

    .l_news {
        padding: 64px 0;
    }

    /* Stacked, the panel gives back its padding and the divider between the
       two zones becomes a horizontal hairline instead of a vertical one. */
    .bzf-nexus {
        padding: 64px 0 70px;
    }

    .bzf-nexus__panel {
        padding: 34px 30px 0;
    }

    .bzf-nexus__feed {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(10, 35, 66, .1);
    }

    .bzf-nexus__why {
        padding-top: 32px;
        padding-bottom: 36px;
    }

    .bzf-nexus__why h4.apply_title {
        max-width: none;
    }

    .bzf-nexus .swiper-container {
        height: 396px;
    }

    .bzf-nexus__explore {
        margin: 0 -30px;
        padding: 32px 30px 34px;
    }

    .innerhead-bg {
        padding: calc(var(--bzf-header-h) + 46px) 0 48px !important;
        min-height: auto !important;
    }
}

/* The intro band keeps stepping down with the screen. On a 360x640 phone the
   pricing and services banners stood 371px tall -- 58% of everything the
   visitor could see before a word of the page began. The headline is already
   at its smallest here, so the height comes out of the padding rather than
   the type: nothing is made harder to read to gain it. */
@media (max-width: 767.98px) {
    .innerhead-bg {
        padding: calc(var(--bzf-header-h) + 38px) 0 40px !important;
    }
}

@media (max-width: 575.98px) {
    .innerhead-bg {
        padding: calc(var(--bzf-header-h) + 28px) 0 32px !important;
    }
}

@media (max-width: 767.98px) {
    .homeslider .carousel-inner .carousel-item {
        /* was clamp(560px, 88vh, 700px), itself up from clamp(480px, 78vh,
           580px) because 580 clipped slide 3's headline off the top of the
           frame once its cards went one per row */
        height: clamp(495px, 70vh, 540px);
    }

    /* Hero image recomposes: the tech environment sits behind a light veil */
    .homeslider .carousel-item.first_slide {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 40%, rgba(255, 255, 255, .74) 66%, rgba(255, 255, 255, .34) 100%),
            url(../images/futura/hero-enterprise.webp) no-repeat 72% center / cover !important;
    }

    .slider .carousel-caption.first_slide {
        width: 88%;
        margin-left: 6%;
    }

    .slider .carousel-caption.first_slide p {
        font-size: 16px;
        max-width: none;
    }


    /* Legacy centres the arrows vertically, which puts them over the headline
       once the caption spans the full width. Dock them to the bottom edge. */
    .slider .carousel-control-prev,
    .slider .carousel-control-next {
        width: 52px;
        top: auto;
        bottom: 14px;
        height: 46px;
        align-items: flex-end;
    }

    .slider .carousel-control-prev {
        left: 50%;
        transform: translateX(-56px);
    }

    .slider .carousel-control-next {
        right: 50%;
        transform: translateX(56px);
    }

    .slider .carousel-control-prev-icon,
    .slider .carousel-control-next-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    #black-bg .black-bg {
        padding: 52px 0 !important;
    }

    /* Lighten the glass on mobile — backdrop-filter is expensive */
    .blzbeli,
    .libox li,
    .innerbox,
    .team_box,
    .teamlogo,
    .blclogobrd,
    .logolists li,
    .sc-box,
    .whiteshdbox,
    .form-control {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .blzbeli,
    .innerbox {
        background: rgba(255, 255, 255, .9);
    }

    /* Blur is off for performance here, so keep the fill light enough for the
       lit core to still read through the petals. */
    .libox li {
        background: rgba(255, 255, 255, .74) !important;
    }

    .clients .ctflags.icontxts.libox::after {
        display: none;
    }

    .newsolubox .servicebox .sertxt {
        padding: 26px 22px !important;
    }

    .newsolubox .servicebox .sertxt p {
        font-size: 15px !important;
    }

    .newsolubox .servicebox .newsoluicon {
        font-size: 120px !important;
        opacity: .4 !important;
    }

    .solutions.newsolu .newsolubox {
        margin-bottom: 40px;
    }

    .l_news .swiper-slide .items {
        padding: 24px 20px;
    }

    .footer .sociallinks a {
        width: 38px;
        height: 38px;
    }

    .careersublinks {
        border-radius: var(--bzf-r);
    }

    .careersublinks a {
        padding: 8px 14px !important;
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .homeslider .carousel-inner .carousel-item {
        /* was clamp(540px, 84vh, 660px), itself up from clamp(460px, 76vh,
           540px) because 540 clipped the foot off every one of the three
           slides below once their content stood up. The three now stand up
           in less room, so the frame can come down with them. */
        /* the floor follows the drawing: at --bzf-mcp-k .47 slide 2 needs
           564px on a 320px screen, and 516 clipped the button off it */
        height: clamp(566px, 70vh, 575px);
    }

    .slider .carousel-caption.first_slide .outlinetxt {
        font-size: 38px;
    }

    .innerhead-bg .text-black,
    .innerhead-bg .text-black .h1 {
        font-size: 32px !important;
    }

    /* Petal cluster: legacy sizing (175px + 20px margins) needs 430px of room
       and only has ~360px, so the labels spilled outside their circles. */
    .libox li {
        width: 152px !important;
        height: 152px !important;
        margin: 6px !important;
        padding: 14px !important;
        font-size: 11px !important;
        line-height: 1.32 !important;
    }

    .libox li img,
    .icontxts li img {
        width: 34px !important;
        margin-bottom: 6px !important;
    }

    .libox::before {
        --bzf-orb: 138px;
        --bzf-orb-icon: 34px;
    }

    .megamenu .dropdown-menu .megacontent {
        padding: 4px 0;
    }
}

/* --- Solution stack & client rail ---------------------------------------- */
@media (max-width: 1199.98px) {

    .bzf-solpanel {
        min-height: 390px;
    }

    .bzf-solpanel__body {
        padding: 42px 36px;
    }

}

@media (max-width: 991.98px) {

    /* One column, and the figure still leads */
    .bzf-solpanel__media {
        order: -1;
    }

    /* Pinning five panels on a short viewport traps the reader, so below the
       desktop breakpoint the carousel is simply a readable column. */
    .bzf-solpin__stage {
        gap: 26px;
        padding: 56px 0;
    }

    .bzf-solpanel {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .bzf-solpanel__media {
        min-height: 300px;
    }
    .bzf-solpanel--red .bzf-solpanel__media {
       order: -1;
    }

    .bzf-solpanel__body {
        padding: 38px 30px 28px;
    }

    .bzf-clientrail #grid>.item {
        width: min(560px, 100%);
    }
}

@media (max-width: 767.98px) {

    .bzf-solpin__stage {
        padding: 44px 0;
    }

    .bzf-solpanel__media {
        min-height: 260px;
    }

    /* The overlap needs room; on the narrowest layout the pair sits flatter */
    .bzf-solpanel__shape--a {
        top: 6%;
        left: 5%;
        width: 60%;
        height: 48%;
    }

    .bzf-solpanel__shape--b {
        bottom: 6%;
        right: 5%;
        width: 62%;
        height: 50%;
    }

    /* Only when the rail has fallen back to a plain scroller — there equal
       heights just stretch the short lead card into a tall empty panel. */
    body:not(.bzf-crail-on) .bzf-clientrail #grid {
        align-items: flex-start;
    }

    /* The phone card is the same card: the banner photograph, not the small
       duplicate avatar the legacy mobile layout showed instead. */
    .bzf-clientrail .whitetrans {
        display: block;
        height: clamp(118px, 17vh, 190px);
    }

    .bzf-clientrail .client_logo_mbl {
        display: none !important;
    }

    /* The shadow bleed nets +24px of layout everywhere else. A phone card
       clears its screen by less than that, so here the negative margins
       cancel the padding exactly: the shadow still bleeds, and the row costs
       no more height than the card inside it. */
    .bzf-clientrail #grid {
        margin-top: -60px;
        margin-bottom: -96px;
    }

    /* newstyles.css puts 30px of padding on the row at this width. On a 350px
       card that left the quote a 200px column to wrap in and ran the tallest
       card to 1362px — far past any phone screen, so the rail could never
       pin. The columns carry the padding instead. */
    .bzf-clientrail .inner>.item.client_carousel>.row {
        padding: 0 !important;
    }

    .bzf-clientrail .inner>.item.client_carousel>.row>[class*="col-"]:not(.in-rev) {
        padding: 12px 12px 0;
    }

    .bzf-clientrail .inner>.item.client_carousel>.row>.in-rev {
        padding: 14px 12px;
    }

    /* Every pixel here buys a line of the longest testimonial, and the longest
       testimonial is what decides whether the section can pin at all. */
    .bzf-clientrail .in-rev>.client_desc>p {
        font-size: 13px;
        line-height: 1.5;
        padding-left: 18px;
    }

    .bzf-clientrail .in-rev>.client_desc>p::before {
        font-size: 44px;
        top: -10px;
    }

    .bzf-clientrail .in-rev>.client_desc {
        margin-bottom: 6px !important;
    }

    .bzf-clientrail .rev_blk {
        margin-top: 10px;
        gap: 8px;
    }

    .bzf-clientrail .rev_blk .lft {
        padding: 10px 14px !important;
    }

    .bzf-clientrail .rev_blk .lft h4 {
        font-size: 13px;
    }

    .bzf-clientrail .rev_blk .lft h4 b {
        font-size: 28px;
    }

    .bzf-clientrail .client_name1 {
        margin-bottom: 2px !important;
    }

    /* one card at a time, filling the container exactly */
    .bzf-clientrail #grid>.item,
    .bzf-clientrail #grid>.bzf-clients-lead {
        width: 100%;
    }

    .bzf-clientrail .in-rev {
        padding: 26px 24px;
    }
}

/* ==========================================================================
   27  HOMEPAGE SLIDE HEADINGS — TAG PARITY
   Slides 3 and 5 used to be <h1>, which put three of them on the homepage.
   They are <h2> now. Slide 5 is covered by the legacy `.yhai .h1` rules it
   already shares; slide 3 was sized by element selector at six breakpoints,
   mirrored below in the original order so nothing moves. Measured before and
   after at 1400/1100/900/700/500 wide and 740/700 tall.
   ========================================================================== */
/* .slider .second_slide h2 already existed at 45px and now catches this
   heading, so the size it had as an h1 is restated at higher specificity. */
.slider .second_slide h2.stbcont {
    font-size: 60px;
}

/* The UA h1 margin (.67em) and the -.01em tracking it resolved to are both
   restated: as an h2 it would otherwise pick up the .5rem heading margin and
   the display tracking. .67em keeps pace with the size at every breakpoint. */
.slider .third_slider .baidea h2.h1 {
    letter-spacing: -.01em;
    margin: .67em 0;
}

@media (max-width: 1199px) {
    .slider .second_slide .leftsidetxt h2.stbcont {
        text-align: center !important;
        font-size: 45px;
    }
}

@media (max-width: 991px) {
    .slider .second_slide .leftsidetxt h2.stbcont {
        font-size: 38px !important;
    }
}

@media (max-height: 768px) {
    .slider .second_slide h2.stbcont {
        font-size: 35px;
        margin: 0 !important;
    }
}

/* On a short screen the frame stops following the viewport (it is on its
   floor) while slide 1's copy keeps growing with the width, so past about
   1500px wide the laurel starts to run out of the bottom of the frame. The
   copy comes down here rather than the frame going back up -- the height is
   the thing being asked for. */
@media (max-height: 760px) {

    .slider .carousel-caption.first_slide .outlinetxt {
        font-size: clamp(36px, 3.6vw, 56px);
    }

    .slider .carousel-caption.first_slide p {
        font-size: clamp(16px, 1.2vw, 19px);
        margin-top: 12px;
    }

    .bzf-award {
        margin-top: 10px;
    }

    .bzf-award__laurel {
        width: clamp(40px, 3.4vw, 48px);
    }

    .bzf-award__years {
        font-size: clamp(16px, 1.5vw, 21px);
    }
}

@media (max-height: 768px) {

    /* newstyles.css:1257 sets this one slide a min-height of
       calc(100vh - 195px), which was in step with the old frame and is 50px
       out of step with the new one -- and a carousel whose slides are
       different heights jumps every time it turns. */
    .homeslider .carousel-inner .third_slider {
        min-height: 0 !important;
    }
}

@media (max-height: 750px) and (min-height: 630px) {
    .slider .second_slide h2.stbcont {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .slider .second_slide .leftsidetxt h2.stbcont {
        font-size: 30px !important;
    }
}

@media (max-width: 575px) {
    .slider .second_slide .leftsidetxt h2.stbcont {
        font-size: 18px !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   07c  HERO SLIDES — RESPONSIVE
   Down here rather than beside the slides themselves: section 23 already
   carries rules for all three, and between two media queries of equal
   specificity the later one wins.
   ========================================================================== */
@media (max-width: 1199.98px) {
    .slider .mcp-banner .img {
        --bzf-mcp-k: .61;
    }

    /* section 23 mirrors legacy and centres this heading from here down,
       which strands the red rule at the far left of a centred line */
    .slider .second_slide .leftsidetxt h2.stbcont {
        text-align: left !important;
    }

    .slider .third_slider .bisubboxes ul {
        gap: 10px;
    }

    .slider .third_slider .bisubboxes ul .bisbox {
        padding: 30px 7px 0 !important;
    }
}

@media (max-width: 991.98px) {

    /* Slide 2 — the halves stack, so the slant and the tuck both go. The
       caption stops centring at the same time: a stacked panel taller than
       the frame would overflow the top as well as the bottom, and the top is
       where the header is. */
    .homeslider .carousel-item.mcp-banner .carousel-caption {
        align-items: flex-start;
        /* the frame reserved 94px above the copy for a 59px header */
        padding: calc(var(--bzf-header-h) + 8px) 0 18px !important;
    }

    /* Stacked, the copy is a column a phone's width and no longer a half of
       a wide slide -- it takes the sizes the phone layout already uses. */
    .slider .mcp-banner .txt h2 {
        font-size: 30px !important;
        margin-bottom: 8px;
        padding-top: 0;
    }

    .slider .mcp-banner .txt h4 {
        font-size: 17px !important;
        margin-bottom: 10px !important;
    }

    .slider .mcp-banner .txt p {
        font-size: 14px !important;
        margin-bottom: 14px;
    }

    .slider .mcp-banner .carousel-caption .d-flex {
        flex-direction: column;
        /* .align-items-center centres both children once the axis turns, and
           a centred drawing under left-set copy has no shared edge */
        align-items: flex-start !important;
        gap: 14px;
        min-height: 0;
    }

    .slider .mcp-banner .txt {
        width: 100% !important;
        max-width: 660px;
        padding: 0 !important;
    }

    /* The drawing carries the whole reduction on this slide: it is the one
       element here with no reading to lose, and the copy beside it stays the
       size it was. */
    .slider .mcp-banner .img {
        --bzf-mcp-k: .38;
    }

    .slider .mcp-banner .img {
        width: 100% !important;
        max-width: 100%;
        /* a flex item will not shrink under its own intrinsic width without
           this, and the diagram is wider than a phone */
        min-width: 0;
        margin-left: 0;
        padding: 0 !important;
    }



    /* Slide 3 — the two zones stack. Stacked, the composition is ~80px
       taller than the frame, so the whole vertical budget comes down with it
       rather than the last row of chips falling off the bottom. */
    .slider .second_slide .carousel-caption.leftsidetxt {
        padding: calc(var(--bzf-header-h) + 8px) 0 16px !important;
    }

    .slider .second_slide .leftsidetxt h2.stbcont {
        font-size: 32px !important;
    }

    .slider .second_slide .bzf-chain {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .slider .second_slide .bzf-chain::before {
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        display: none;
    }

    .slider .second_slide h2.stbcont {
        margin-bottom: 10px !important;
        padding-top: 4px;
    }

    .slider .second_slide .bzf-chain__cred {
        margin-bottom: 10px;
    }

    .slider .second_slide .bzf-chain__label {
        margin-bottom: 6px;
    }

    .slider .second_slide .bzf-chain__badges img {
        height: 48px;
    }

    .slider .second_slide .bzf-chain__grid {
        gap: 8px;
    }

    .slider .second_slide .bzf-chip {
        min-height: 32px;
        gap: 10px;
        padding: 0 13px;
    }

    .slider .second_slide .bzf-chip img,
    .slider .second_slide .bzf-chip__mark {
        width: 24px;
        height: 24px;
    }

    /* Slide 4 — legacy stands the console up at this width, so the red block
       becomes a header bar rather than a column. */
    .slider .third_slider .brsslidecont {
        flex-direction: column;
        height: 100% !important;
    }

    .slider .third_slider .yhai {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        padding: 0 0 16px !important;
        box-shadow: none;
    }

    /* the divider turns with the layout */
    .slider .third_slider .yhai::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, rgba(229, 37, 33, .7), rgba(10, 35, 66, .14) 62%, transparent);
    }

    .slider .third_slider .yhai .baidea {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px;
    }

    .slider .third_slider .yhai .baidea img {
        width: 34px;
    }

    .slider .third_slider .yhai .baidea h2.h1 {
        font-size: 18px !important;
    }

    /* Six steps cannot wrap into a hero this short — three rows of cards is
       160px more than the frame has. They stay one row and the row scrolls,
       which also keeps the rail, the numerals and the sequence intact. */
    .slider .third_slider .bisubboxes {
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 8px;
        /* the step icons load late, and Chrome's scroll anchoring was
           answering the reflow by scrolling this strip away from card one */
        overflow-anchor: none;
        scroll-behavior: auto;
    }

    .slider .third_slider .bisubboxes ul {
        flex-wrap: nowrap;
        /* something upstream centres this list; centred flex items overflow
           both ends of a scroll container and the left half is unreachable */
        justify-content: flex-start;
        gap: 12px;
        width: max-content;
        min-width: 100%;
    }

    .slider .third_slider .bisubboxes ul .bisbox {
        /* A pixel basis, not a percentage: the list is width:max-content so a
           percentage basis has nothing definite to resolve against and the
           cards fall back to their content width — one card, no peek. Under a
           third of the frame, so the next card always shows. */
        flex: 0 0 190px;
        margin-top: 22px !important;
        padding: 24px 10px 0 !important;
    }

    .slider .third_slider .bisboxnum {
        width: 34px;
        height: 34px;
        top: -17px;
        font-size: 15px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .4),
            0 5px 12px rgba(229, 37, 33, .3),
            0 0 0 5px rgba(248, 251, 253, .95);
    }

    .slider .third_slider .biboxes {
        padding: 18px 0 0 !important;
    }
}

@media (max-width: 767.98px) {

    .homeslider .carousel-item.mcp-banner .carousel-caption,
    .slider .second_slide .carousel-caption.leftsidetxt,
    .slider .third_slider .leftsidetxt {
        padding: calc(var(--bzf-header-h) + 6px) 0 18px !important;
    }

    .slider .mcp-banner .txt h2 {
        font-size: 27px !important;
        margin-bottom: 8px;
        padding-top: 8px;
    }

    /* legacy centres the body copy and the button below the md breakpoint,
       which left the two headings hanging off a different edge */
    .slider .mcp-banner .txt p,
    .slider .mcp-banner .btns {
        text-align: left !important;
        justify-content: flex-start;
    }

    .slider .mcp-banner .txt h4 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    .slider .mcp-banner .txt p {
        font-size: 13.5px !important;
        margin-bottom: 16px;
    }

    .slider .mcp-banner .btns .btn {
        font-size: 14px !important;
        padding: 9px 20px !important;
    }

    .slider .mcp-banner .img {
        --bzf-mcp-k: .42;
    }

    /* Slide 3 */
    .slider .second_slide h2.stbcont {
        margin-bottom: 12px !important;
        padding-top: 6px;
    }

    .slider .second_slide .leftsidetxt h2.stbcont {
        font-size: 26px !important;
    }

    .slider .second_slide .bzf-chain {
        gap: 14px;
    }

    .slider .second_slide .bzf-chain__cred {
        margin-bottom: 12px;
    }

    .slider .second_slide .bzf-chain__plate {
        gap: 9px;
        padding: 8px 18px 8px 12px;
    }

    .slider .second_slide .bzf-chain__label {
        margin-bottom: 10px;
        font-size: 10.5px;
        letter-spacing: var(--bzf-ls-label);
    }

    .slider .second_slide .bzf-chain__badges {
        gap: 12px;
    }

    .slider .second_slide .bzf-chain__badges img {
        height: 48px;
    }

    .slider .second_slide .bzf-chain__grid {
        gap: 9px;
    }

    .slider .second_slide .bzf-chip {
        min-height: 38px;
        gap: 9px;
        padding: 0 13px;
    }

    .slider .second_slide .bzf-chip img,
    .slider .second_slide .bzf-chip__mark {
        width: 21px;
        height: 21px;
    }

    .slider .second_slide .bzf-chip span {
        font-size: 12px;
    }

    /* Slide 4 */
    .slider .third_slider .yhai {
        padding: 0 0 13px !important;
    }

    .slider .third_slider .yhai .baidea img {
        width: 28px;
    }

    .slider .third_slider .yhai .baidea h2.h1 {
        font-size: 15px !important;
    }

    .slider .third_slider .biboxes {
        padding: 16px 0 0 !important;
    }

    .slider .third_slider .biboxes>h2 {
        font-size: 15px;
    }

    .slider .third_slider .lcbraces {
        height: 14px;
    }

    .slider .third_slider .lcbraces::after {
        display: none;
    }

    .slider .third_slider .bisubboxes ul {
        gap: 10px;
    }

    .slider .third_slider .bisubboxes ul .bisbox {
        flex: 0 0 182px;
        margin-top: 22px !important;
        padding: 26px 10px 0 !important;
    }

    .slider .third_slider .bisbox img {
        width: 30px !important;
        margin-bottom: 8px !important;
    }

    .slider .third_slider .bisubboxes ul .bisbox h4 {
        font-size: 12px;
    }

    .slider .third_slider .bisubboxes ul .bisbox p {
        font-size: 10.5px;
        line-height: 1.35;
    }

    .slider .third_slider .bisboxnum {
        width: 28px;
        height: 28px;
        top: -14px;
        font-size: 13px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .4),
            0 5px 12px rgba(229, 37, 33, .3),
            0 0 0 4px rgba(248, 251, 253, .95);
    }
}

@media (max-width: 575.98px) {

    .slider .mcp-banner .img {
        --bzf-mcp-k: .33;
    }

    .slider .third_slider .bisubboxes ul .bisbox {
        flex: 0 0 168px;
    }

    .slider .second_slide .bzf-chain__grid {
        gap: 8px;
    }

    .slider .second_slide .bzf-chip {
        min-height: 40px;
        padding: 0 11px;
        gap: 8px;
    }

    .slider .second_slide .bzf-chip img,
    .slider .second_slide .bzf-chip__mark {
        width: 19px;
        height: 19px;
    }

    .slider .second_slide .bzf-chip span {
        font-size: 11px;
    }

    .slider .second_slide .bzf-chain__badges img {
        height: 48px;
    }
}


/* ==========================================================================
   28b  THEME SWITCHER

   A groove with the sun at one end and the moon at the other, and a red pill
   that slides between them behind the icons -- so the icon for the mode you
   are in sits on the brand colour and the other stays quiet on the track.
   Both states are visible at once, which is what makes it read as a switch
   rather than as a button that does something unnamed.

   It is a real <button role="switch">, so it takes focus in menu order, works
   from the keyboard, and is announced with its state.
   ========================================================================== */
.bzf-themeitem {
    display: flex;
    align-items: center;
}

.bzf-theme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: .55rem;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: rgba(10, 35, 66, .04);
    border: 1px solid rgba(10, 35, 66, .12);
    cursor: pointer;
    transition:
        background-color var(--bzf-nav-dur) var(--bzf-ease),
        border-color var(--bzf-nav-dur) var(--bzf-ease);
}

.bzf-theme:hover {
    background: rgba(229, 37, 33, .07);
    border-color: rgba(229, 37, 33, .3);
}

.bzf-theme:focus {
    outline: 0;
}

.bzf-theme:focus-visible {
    outline: 2px solid var(--bzf-red);
    outline-offset: 2px;
}

.bzf-theme__track {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 46px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(10, 35, 66, .09);
}

.bzf-theme__track i {
    position: relative;
    z-index: 1;
    font-size: 11px;
    line-height: 1;
    color: var(--bzf-ink-mute);
    transition: color var(--bzf-nav-dur) var(--bzf-ease);
}

/* Behind the icons, not over them, so whichever mode is current has its glyph
   sitting on the brand colour. */
/* newstyles.css:826 sets `position: relative` on every span inside a navbar
   list item at 0,3,1, which pulled the knob back into the track's flex flow
   and shrank it from 18px to 12px. Matched here at 0,3,0 plus the theme
   attribute so it wins outright. */
.bzf-theme .bzf-theme__track .bzf-theme__knob {
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 52%, var(--bzf-red-deep) 100%);
    box-shadow: 0 2px 8px rgba(229, 37, 33, .45);
    transition: transform .34s var(--bzf-ease-out);
}

.bzf-theme__track i:first-of-type {
    color: #FFFFFF;
}

.bzf-theme .bzf-theme__track .bzf-theme__knob {
    transform: translateX(0);
}

:root[data-bzf-theme="dark"] .bzf-theme .bzf-theme__track .bzf-theme__knob {
    transform: translateX(22px);
}

:root[data-bzf-theme="dark"] .bzf-theme__track i:first-of-type {
    color: var(--bzf-ink-mute);
}

:root[data-bzf-theme="dark"] .bzf-theme__track i:last-of-type {
    color: #FFFFFF;
}

.bzf-theme__label {
    font-size: var(--bzf-fs-nav);
    font-weight: var(--bzf-w-medium);
    line-height: var(--bzf-lh-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bzf-ink);
    transition: color var(--bzf-nav-dur) var(--bzf-ease);
}

/* Over a dark band the plate goes glassy, the same way the links do */
.header.fixedtop.bzf-nav-dark .bzf-theme {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(170, 200, 235, .3);
}

.header.fixedtop.bzf-nav-dark .bzf-theme__track {
    background: rgba(255, 255, 255, .14);
}

.header.fixedtop.bzf-nav-dark .bzf-theme__label {
    color: #FFFFFF;
}

.header.fixedtop.bzf-nav-dark .bzf-theme__track i {
    color: rgba(233, 240, 249, .6);
}

.header.fixedtop.bzf-nav-dark .bzf-theme__track i:first-of-type {
    color: #FFFFFF;
}

:root[data-bzf-theme="dark"] .header.fixedtop.bzf-nav-dark .bzf-theme__track i:first-of-type {
    color: rgba(233, 240, 249, .6);
}

:root[data-bzf-theme="dark"] .header.fixedtop.bzf-nav-dark .bzf-theme__track i:last-of-type {
    color: #FFFFFF;
}

/* In the collapsed menu it is a full-width row at the foot of the list, set
   off by a rule so it reads as a setting rather than another destination. */
@media (max-width: 991.98px) {

    .bzf-themeitem {
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid rgba(10, 35, 66, .1);
    }

    .bzf-theme {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        padding: 9px 14px 9px 9px;
    }

    :root[data-bzf-theme="dark"] .bzf-themeitem {
        border-top-color: rgba(150, 186, 228, .14);
    }
}

/* Dark theme: the plate sits on a dark header, so it takes the dark values
   whether or not a dark band happens to be behind it. */
:root[data-bzf-theme="dark"] .bzf-theme {
    background: rgba(150, 186, 228, .09);
    border-color: rgba(150, 186, 228, .2);
}

:root[data-bzf-theme="dark"] .bzf-theme:hover {
    background: rgba(255, 74, 70, .14);
    border-color: rgba(255, 74, 70, .38);
}

:root[data-bzf-theme="dark"] .bzf-theme__track {
    background: rgba(6, 16, 30, .5);
}

:root[data-bzf-theme="dark"] .bzf-theme__label {
    color: var(--bzf-ink);
}

/* ==========================================================================
   29  THEME — LIGHT (default) AND DARK

   The light theme is the tokens in section 01; nothing about it moves. Dark
   is the same design in a different material, and it is built by re-pointing
   the tokens rather than by re-writing the components: 73 rules read
   --bzf-ink*, 73 read --bzf-glass-l-*, and body and .bg_bc read --bzf-white,
   so redefining those under one attribute flips the greater part of the site
   in one place. What is left after that is the handful of surfaces that were
   written as literal white, and they are corrected below.

   Not an inversion. Dark keeps the Blaze identity: red stays the accent, the
   ground is deep navy rather than black, the glass stays glass, and the
   elevation reads by going deeper instead of lighter.
   ========================================================================== */
:root[data-bzf-theme="dark"] {
    /* Ground and raised surfaces. Navy, not black -- a pure black ground
       makes the red vibrate and kills the sense of depth the design is
       built on. */
    --bzf-white: #0A1626;
    --bzf-gray-soft: #101F33;
    --bzf-gray-cool: #16283F;
    --bzf-gray-line: #263B54;

    /* Text. Not pure white: #E8EFF7 on the ground measures ~15:1 and reads
       softer over long paragraphs. */
    --bzf-ink: #E8EFF7;
    --bzf-ink-soft: #AEC2D6;
    --bzf-ink-mute: #9AAFC6;
    --bzf-navy-deep: #E8EFF7;
    --bzf-navy: #C9D9E8;

    /* Red moves to the bright cut. The same brand red at #E52521 measures
       4.0:1 on this ground, which is under AA for body text; the bright cut
       is 5.4:1 and is already part of the palette. */
    --bzf-red: #FF4A46;
    --bzf-red-tint: rgba(255, 74, 70, .13);
    --bzf-red-line: rgba(255, 74, 70, .34);

    /* Light glass becomes dark glass -- still translucent, still lit from
       the top edge, just built on navy. */
    --bzf-glass-l-bg: linear-gradient(148deg, rgba(30, 52, 80, .76), rgba(17, 33, 54, .62));
    --bzf-glass-l-brd: rgba(150, 186, 228, .15);
    --bzf-glass-l-ring: rgba(150, 186, 228, .13);
    --bzf-glass-l-hi: inset 0 1px 0 rgba(190, 214, 240, .1);

    --bzf-steel: linear-gradient(150deg, #172B42 0%, #13243C 32%, #0F1E33 68%, #0B1828 100%);
    --bzf-steel-brd: rgba(150, 186, 228, .17);

    /* On a light ground a shadow is a soft grey; on a dark one it has to be
       darker than the surface or it reads as a glow. */
    --bzf-lift-1: 0 2px 6px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .34);
    --bzf-lift-2: 0 4px 12px rgba(0, 0, 0, .38), 0 20px 46px rgba(0, 0, 0, .44);
    --bzf-lift-3: 0 10px 24px rgba(0, 0, 0, .46), 0 36px 88px rgba(0, 0, 0, .52);
    --bzf-lift-red: 0 10px 26px rgba(255, 74, 70, .18), 0 26px 58px rgba(255, 74, 70, .12);
}

/* Let the browser paint form controls, scrollbars and the overscroll gutter
   in the right mode. */
:root[data-bzf-theme="dark"] {
    color-scheme: dark;
}

:root[data-bzf-theme="light"] {
    color-scheme: light;
}

/* --- Surfaces that were written as literal white -------------------------
   Everything below reads white in the light theme from a hard-coded value
   rather than a token, which is why each needs a line here. They are the
   glass panels, the plates and the pills -- the places the design puts a
   white card on a white page.
   ------------------------------------------------------------------------ */
:root[data-bzf-theme="dark"] body,
:root[data-bzf-theme="dark"] .bg_bc {
    background: var(--bzf-white) !important;
    color: var(--bzf-ink);
}

/* the header plate */
:root[data-bzf-theme="dark"] .header.fixedtop .navbar {
    background: rgba(10, 22, 38, .72) !important;
    box-shadow:
        inset 0 1px 0 rgba(190, 214, 240, .07),
        0 0 0 1px rgba(150, 186, 228, .12),
        0 10px 30px rgba(0, 0, 0, .4) !important;
}

/* the mega menu: light panel, white sheet, white plates */
:root[data-bzf-theme="dark"] .navbar-expand-lg .navbar-nav .megamenu .dropdown-menu.show {
    background: rgba(13, 26, 44, .95) !important;
    border-color: rgba(150, 186, 228, .14);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(150, 186, 228, .12),
        0 34px 80px rgba(0, 0, 0, .55);
}

:root[data-bzf-theme="dark"] .bzf-mm__sheet {
    background: rgba(20, 37, 60, .9);
    border-color: rgba(150, 186, 228, .12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}

:root[data-bzf-theme="dark"] .bzf-mm__dir:hover,
:root[data-bzf-theme="dark"] .bzf-mm__dir:focus-visible,
:root[data-bzf-theme="dark"] .bzf-mm__dir.is-active {
    background: rgba(30, 52, 80, .95);
    border-color: rgba(150, 186, 228, .16);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
}

:root[data-bzf-theme="dark"] .bzf-mm__dir.is-active::after {
    background: rgba(30, 52, 80, .95);
    border-top-color: rgba(150, 186, 228, .16);
    border-right-color: rgba(150, 186, 228, .16);
}

:root[data-bzf-theme="dark"] .bzf-mm__dirico {
    background: rgba(150, 186, 228, .1);
}

:root[data-bzf-theme="dark"] .bzf-mm__sales,
:root[data-bzf-theme="dark"] .bzf-plan__cta {
    background: rgba(150, 186, 228, .08);
    border-color: rgba(150, 186, 228, .2);
    color: var(--bzf-ink) !important;
}

/* the mobile menu sheet */
:root[data-bzf-theme="dark"] .header.fixedtop .navbar-collapse {
    background: rgba(13, 26, 44, .96);
    border-color: rgba(150, 186, 228, .14);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(150, 186, 228, .12), 0 26px 60px rgba(0, 0, 0, .5);
}

/* the inner-page hero band: a photograph under a white veil */
:root[data-bzf-theme="dark"] .innerhead-bg .igbg {
    background:
        linear-gradient(102deg, rgba(10, 22, 38, .6) 0%, rgba(10, 22, 38, .4) 50%, rgba(14, 29, 49, .4) 100%),
        url(../images/futura/band-light.webp) no-repeat center center / cover !important;
}

:root[data-bzf-theme="dark"] .innerhead-bg .igbg img {
    opacity: .3;
    filter: grayscale(.9) brightness(.55) contrast(1.05);
}

:root[data-bzf-theme="dark"] .innerhead-bg .igbg::after {
    background: linear-gradient(100deg,
            rgba(10, 22, 38, .96) 0%,
            rgba(10, 22, 38, .9) 34%,
            rgba(10, 22, 38, .72) 60%,
            rgba(10, 22, 38, .5) 100%);
}

:root[data-bzf-theme="dark"] .innerhead-bg::before {
    background-image:
        linear-gradient(to right, rgba(150, 186, 228, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150, 186, 228, .06) 1px, transparent 1px);
}

:root[data-bzf-theme="dark"] .careersublinks,
:root[data-bzf-theme="dark"] .innerhead-bg .careersublinks {
    background: rgba(23, 42, 68, .8);
    border-color: rgba(150, 186, 228, .16);
    box-shadow: var(--bzf-glass-l-hi), 0 12px 30px rgba(0, 0, 0, .4);
}

/* pills, plates and chips that were literal white */
:root[data-bzf-theme="dark"] .slider .second_slide .bzf-chip,
:root[data-bzf-theme="dark"] .slider .second_slide .bzf-chain__plate,
:root[data-bzf-theme="dark"] .bzf-faq__item,
:root[data-bzf-theme="dark"] .bzf-cmp {
    background: rgba(23, 42, 68, .8);
    border-color: rgba(150, 186, 228, .14);
}

:root[data-bzf-theme="dark"] .bzf-cmp__table thead th {
    background: rgba(255, 74, 70, .12);
    border-bottom-color: rgba(255, 74, 70, .22);
    color: var(--bzf-ink);
}

:root[data-bzf-theme="dark"] .bzf-cmp__table tbody th,
:root[data-bzf-theme="dark"] .bzf-cmp__table tbody td {
    border-bottom-color: rgba(150, 186, 228, .1);
}

:root[data-bzf-theme="dark"] .bzf-cmp::after {
    background: linear-gradient(90deg, rgba(10, 22, 38, 0), rgba(10, 22, 38, .92));
}

/* the light hero slides */
:root[data-bzf-theme="dark"] .homeslider .carousel-item.second_slide,
:root[data-bzf-theme="dark"] .homeslider .carousel-item.third_slider {
    background-image:
        linear-gradient(158deg, rgba(10, 22, 38, .95) 0%, rgba(13, 26, 44, .93) 46%, rgba(16, 31, 51, .95) 100%),
        var(--bzf-slide-img) !important;
}

:root[data-bzf-theme="dark"] .homeslider .carousel-item.second_slide::before {
    background:
        radial-gradient(1100px 620px at 82% 76%, rgba(255, 74, 70, .16), transparent 68%),
        radial-gradient(760px 460px at 62% 18%, rgba(229, 37, 33, .08), transparent 70%),
        linear-gradient(to right, rgba(150, 186, 228, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150, 186, 228, .05) 1px, transparent 1px);
    background-size: auto, auto, 88px 88px, 88px 88px;
}

/* --- Legacy surfaces -----------------------------------------------------
   Everything below is a component from the original sheets that paints its
   own white and so never saw the token flip. Measured across all twenty
   routes in the dark theme, these were the fifty-six surfaces still coming
   up light -- cards with white text on white.

   They are mapped onto the same dark glass the token layer produces rather
   than each being given a colour of its own, so the dark theme has one
   material and not fifty.
   ------------------------------------------------------------------------ */
:root[data-bzf-theme="dark"] .servicebox,
:root[data-bzf-theme="dark"] .servicebox .sertxt,
:root[data-bzf-theme="dark"] .sc-box,
:root[data-bzf-theme="dark"] .serBox,
:root[data-bzf-theme="dark"] .service-box,
:root[data-bzf-theme="dark"] .service-icon,
:root[data-bzf-theme="dark"] .whitebrdbox,
:root[data-bzf-theme="dark"] .whitetrans,
:root[data-bzf-theme="dark"] .whiteshdbox,
:root[data-bzf-theme="dark"] .ltrconslcbox,
:root[data-bzf-theme="dark"] .code-box,
:root[data-bzf-theme="dark"] .card__content,
:root[data-bzf-theme="dark"] .accordion-header,
:root[data-bzf-theme="dark"] .accordion-content,
:root[data-bzf-theme="dark"] .marketecture-desktop-item__popup_wrapper,
:root[data-bzf-theme="dark"] .shadowtippy,
:root[data-bzf-theme="dark"] .innerbox,
:root[data-bzf-theme="dark"] .team_box,
:root[data-bzf-theme="dark"] .bzf-solpanel__media,
:root[data-bzf-theme="dark"] .l_news .swiper-slide .items,
:root[data-bzf-theme="dark"] .bzf-nexus .swiper-slide .items,
:root[data-bzf-theme="dark"] section.faq .bdy .accordion .card,
:root[data-bzf-theme="dark"] .accordion .card {
    background: var(--bzf-glass-l-bg) !important;
    border-color: rgba(150, 186, 228, .14) !important;
    color: var(--bzf-ink);
}

/* Text that was set to a literal black or near-black inside those surfaces */
:root[data-bzf-theme="dark"] .servicebox .sertxt h5,
:root[data-bzf-theme="dark"] .servicebox .sertxt p,
:root[data-bzf-theme="dark"] .sc-box .txt h4,
:root[data-bzf-theme="dark"] .sc-box .txt p,
:root[data-bzf-theme="dark"] .serBox .title,
:root[data-bzf-theme="dark"] .ltrconslcbox h3,
:root[data-bzf-theme="dark"] .ltrconslcbox p,
:root[data-bzf-theme="dark"] .whitebrdbox h3,
:root[data-bzf-theme="dark"] .whitebrdbox h4,
:root[data-bzf-theme="dark"] .whitebrdbox p,
:root[data-bzf-theme="dark"] .whitetrans h2,
:root[data-bzf-theme="dark"] .whitetrans h3,
:root[data-bzf-theme="dark"] .whitetrans p,
:root[data-bzf-theme="dark"] .accordion-header,
:root[data-bzf-theme="dark"] .accordion-content p,
:root[data-bzf-theme="dark"] .card__content h3,
:root[data-bzf-theme="dark"] .card__content p,
:root[data-bzf-theme="dark"] section.faq .bdy .accordion .card .card-header .btn,
:root[data-bzf-theme="dark"] section.faq .bdy .accordion .card .card-body,
:root[data-bzf-theme="dark"] .code-b-bdy pre {
    color: var(--bzf-ink) !important;
}

:root[data-bzf-theme="dark"] .servicebox .sertxt p,
:root[data-bzf-theme="dark"] .sc-box .txt p,
:root[data-bzf-theme="dark"] .ltrconslcbox p,
:root[data-bzf-theme="dark"] .whitebrdbox p,
:root[data-bzf-theme="dark"] .card__content p {
    color: var(--bzf-ink-soft) !important;
}

/* The remainder, found by re-measuring after the block above: components
   whose legacy rule is more specific than a single class, plus a few panels
   that only appear on one page. */
:root[data-bzf-theme="dark"] .team_list .team_box,
:root[data-bzf-theme="dark"] .hosting-hero .box,
:root[data-bzf-theme="dark"] .d-box .d-box-item a,
:root[data-bzf-theme="dark"] .one-box,
:root[data-bzf-theme="dark"] .sdeain.industriesbox,
:root[data-bzf-theme="dark"] .creative-tab.tabs,
:root[data-bzf-theme="dark"] .creative-tab__right.tab-content,
:root[data-bzf-theme="dark"] .smart-choice,
:root[data-bzf-theme="dark"] .ani_banner,
:root[data-bzf-theme="dark"] .bzf-nexus__panel,
:root[data-bzf-theme="dark"] .engagement-section {
    background: var(--bzf-glass-l-bg) !important;
    border-color: rgba(150, 186, 228, .14) !important;
    color: var(--bzf-ink) !important;
}

:root[data-bzf-theme="dark"] .team_list .team_box h3,
:root[data-bzf-theme="dark"] .team_list .team_box p,
:root[data-bzf-theme="dark"] .hosting-hero .box h3,
:root[data-bzf-theme="dark"] .hosting-hero .box p,
:root[data-bzf-theme="dark"] .one-box .txt h4,
:root[data-bzf-theme="dark"] .one-box .txt p {
    color: var(--bzf-ink) !important;
}

/* Text that the legacy sheets pin to a literal dark hex. Measured in the dark
   theme these came out between 1.07:1 and 2.8:1 against the surface they now
   sit on -- dark on dark, which is not low contrast so much as invisible. */
:root[data-bzf-theme="dark"] .sernboxlist .innerbox,
:root[data-bzf-theme="dark"] .sernboxlist .innerbox p,
:root[data-bzf-theme="dark"] .sernboxlist .innerbox h3,
:root[data-bzf-theme="dark"] .new_servc .innerbox p,
:root[data-bzf-theme="dark"] .hexaprotxt,
:root[data-bzf-theme="dark"] .hexaprotxt p,
:root[data-bzf-theme="dark"] .tabs__caption_title,
:root[data-bzf-theme="dark"] .lets_click,
:root[data-bzf-theme="dark"] .whiteshdbox,
:root[data-bzf-theme="dark"] .whiteshdbox a,
:root[data-bzf-theme="dark"] .whiteshdbox span,
:root[data-bzf-theme="dark"] .team_box h3,
:root[data-bzf-theme="dark"] .team_box h3 span,
:root[data-bzf-theme="dark"] .team_box p,
:root[data-bzf-theme="dark"] .left li,
:root[data-bzf-theme="dark"] .left li a,
:root[data-bzf-theme="dark"] .badges .badge,
:root[data-bzf-theme="dark"] .card__content h5,
:root[data-bzf-theme="dark"] .engagement-title-item,
:root[data-bzf-theme="dark"] .engagement-description-item,
:root[data-bzf-theme="dark"] .contact_mail,
:root[data-bzf-theme="dark"] .contact_mail a,
:root[data-bzf-theme="dark"] .subtitle,
:root[data-bzf-theme="dark"] .d-box-item a,
:root[data-bzf-theme="dark"] .one-box .txt h4,
:root[data-bzf-theme="dark"] .btns .btn span {
    color: var(--bzf-ink) !important;
}

/* A net for the rest: an unclassed link or list item has no styling of its
   own to preserve, so it can safely take the body colour rather than whatever
   literal hex the legacy sheet left on its container. */
:root[data-bzf-theme="dark"] .inner-box li,
:root[data-bzf-theme="dark"] .inner-box li a,
:root[data-bzf-theme="dark"] li > a:not([class]),
:root[data-bzf-theme="dark"] ul:not([class]) li,
:root[data-bzf-theme="dark"] .team_box.w-100 h3,
:root[data-bzf-theme="dark"] .team_box.w-100 h3 span,
:root[data-bzf-theme="dark"] .team_box.w-100 p,
:root[data-bzf-theme="dark"] .team_list p,
:root[data-bzf-theme="dark"] .d-flex .txt h4,
:root[data-bzf-theme="dark"] .d-flex .txt p,
:root[data-bzf-theme="dark"] .col-md-7 > h4 {
    color: var(--bzf-ink) !important;
}

/* engagement cards are a light surface the sweep found late */
:root[data-bzf-theme="dark"] .engagement-card {
    background: var(--bzf-glass-l-bg) !important;
    border-color: rgba(150, 186, 228, .14) !important;
}

:root[data-bzf-theme="dark"] .engagement-title-item,
:root[data-bzf-theme="dark"] .engagement-description-item,
:root[data-bzf-theme="dark"] .bzf-solpanel__cta a,
:root[data-bzf-theme="dark"] .bzf-solpanel__cta button {
    color: var(--bzf-ink) !important;
}

/* Links inside those surfaces keep the accent rather than the body colour */
:root[data-bzf-theme="dark"] .sernboxlist .innerbox:hover h3,
:root[data-bzf-theme="dark"] .contact_mail a:hover,
:root[data-bzf-theme="dark"] .left li a:hover {
    color: var(--bzf-red) !important;
}

/* Carousel dots stay light -- they are markers on the page, not a surface. */

/* Logo plates keep a light ground. A client's mark is usually dark artwork on
   transparency, so inverting the plate would erase half of them -- the panel
   is toned down instead of turned over. */
:root[data-bzf-theme="dark"] .blzblogo,
:root[data-bzf-theme="dark"] .teamlogo,
:root[data-bzf-theme="dark"] .blclogobrd,
:root[data-bzf-theme="dark"] .logolists li {
    background: rgba(233, 240, 249, .93) !important;
    border-color: rgba(150, 186, 228, .18) !important;
}

/* Tables */
:root[data-bzf-theme="dark"] table,
:root[data-bzf-theme="dark"] .table,
:root[data-bzf-theme="dark"] .table tbody tr,
:root[data-bzf-theme="dark"] .table thead th,
:root[data-bzf-theme="dark"] .table td,
:root[data-bzf-theme="dark"] .table th {
    background-color: transparent !important;
    color: var(--bzf-ink);
    border-color: rgba(150, 186, 228, .12) !important;
}

/* Tabs and pill lists */
:root[data-bzf-theme="dark"] .resp-tabs-list li,
:root[data-bzf-theme="dark"] .resp-tab-item,
:root[data-bzf-theme="dark"] .nav-pills .nav-link {
    background: rgba(150, 186, 228, .07) !important;
    color: var(--bzf-ink) !important;
    border-color: rgba(150, 186, 228, .14) !important;
}

:root[data-bzf-theme="dark"] .resp-tab-item.resp-tab-active,
:root[data-bzf-theme="dark"] .nav-pills .nav-link.active {
    background: var(--bzf-red-tint) !important;
    color: var(--bzf-red) !important;
    border-color: var(--bzf-red-line) !important;
}

/* Forms */
:root[data-bzf-theme="dark"] .form-control,
:root[data-bzf-theme="dark"] input[type="text"],
:root[data-bzf-theme="dark"] input[type="email"],
:root[data-bzf-theme="dark"] input[type="tel"],
:root[data-bzf-theme="dark"] input[type="number"],
:root[data-bzf-theme="dark"] input[type="date"],
:root[data-bzf-theme="dark"] select,
:root[data-bzf-theme="dark"] textarea {
    background-color: rgba(6, 16, 30, .55) !important;
    border-color: rgba(150, 186, 228, .2) !important;
    color: var(--bzf-ink) !important;
}

:root[data-bzf-theme="dark"] .form-control:focus,
:root[data-bzf-theme="dark"] textarea:focus,
:root[data-bzf-theme="dark"] select:focus {
    border-color: var(--bzf-red) !important;
    box-shadow: 0 0 0 3px rgba(255, 74, 70, .18) !important;
}

:root[data-bzf-theme="dark"] ::-webkit-input-placeholder {
    color: var(--bzf-ink-mute);
}

:root[data-bzf-theme="dark"] ::placeholder {
    color: var(--bzf-ink-mute);
}

:root[data-bzf-theme="dark"] label,
:root[data-bzf-theme="dark"] .newuifrm label {
    color: var(--bzf-ink-soft) !important;
}

/* Modals */
:root[data-bzf-theme="dark"] .modal-content {
    background: var(--bzf-steel) !important;
    border-color: rgba(150, 186, 228, .16) !important;
    color: var(--bzf-ink);
}

:root[data-bzf-theme="dark"] .modal-content .close {
    color: var(--bzf-ink) !important;
    opacity: .8;
}

/* Sections that paint a light ground of their own */
:root[data-bzf-theme="dark"] .bg-white,
:root[data-bzf-theme="dark"] .bg-light,
:root[data-bzf-theme="dark"] section.bg-none,
:root[data-bzf-theme="dark"] .shadowtop,
:root[data-bzf-theme="dark"] .newsolubox,
:root[data-bzf-theme="dark"] .sec-serv-1,
:root[data-bzf-theme="dark"] .hosting-hero,
:root[data-bzf-theme="dark"] .get-start,
:root[data-bzf-theme="dark"] .faq,
:root[data-bzf-theme="dark"] .bzf-faqband {
    background-color: transparent !important;
}

/* Generic literal-white text that becomes invisible once the ground darkens */
:root[data-bzf-theme="dark"] .text-black,
:root[data-bzf-theme="dark"] .text-dark {
    color: var(--bzf-ink) !important;
}

/* The one dark band on the pricing page is already dark; on a dark ground it
   needs a seam to separate it rather than a colour change. */
:root[data-bzf-theme="dark"] .bzf-hostband {
    box-shadow:
        inset 0 1px 0 rgba(150, 186, 228, .1),
        inset 0 -1px 0 rgba(150, 186, 228, .1);
}

/* ==========================================================================
   24  REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .bzf-anim [data-bzf-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .bzf-parallax {
        transform: none !important;
        transition: none !important;
    }

    /* initReveal bails out before it can hold these, so the belt goes here:
       the entrance never runs and the element is simply present. */
    .animated {
        -webkit-animation: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Nothing sticks and nothing recedes: the cards are the plain column the
       markup already is. The runtime bails out at the same point; this is the
       belt to its braces, and it also covers a preference changed mid-visit. */
    [data-bzf-stack] [data-bzf-stack-card] {
        position: static !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        margin-bottom: 0 !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .newsolubox .servicebox,
    .newsolubox .servicebox:hover {
        --bzf-lift: 0px;
        --bzf-rx: 0deg;
        --bzf-ry: 0deg;
    }

    .blzbeli:hover,
    .innerbox:hover,
    .l_news .swiper-slide .items:hover,
    .whiteshdbox:hover {
        transform: none !important;
    }
}

@media print {

    .header,
    .righabs.floatingLD,
    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
    }

    .footer,
    .l_news,
    #black-bg .black-bg,
    .innerhead-bg .igbg {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Slide 3's headline at phone widths. The tablet size above is later in the
   sheet than the two rules that used to set this, so it has to be restated
   here to stay out of their way. */
@media (max-width: 575.98px) {

    .slider .second_slide .leftsidetxt h2.stbcont {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   30  HERO SLIDES BELOW 992px — CENTRED PRESENTATION

   Down here every slide is a single stacked column: the two-zone
   compositions the desktop layout is built on (copy beside a drawing, a
   claim beside a stack, a person beside a sequence) have already collapsed
   into one column by the time this width is reached. A left-set column in a
   full-width frame leaves the whole right side of the slide empty, so from
   991px down the content is centred in the frame instead.

   The three red accent marks in these slides are pinned to left:0 because
   they mark the start of a left-set line. Centred, they move to the middle
   of the line they mark -- they are still the same mark, still doing the
   same job.

   Section labels are the exception: their marker is a dot beside the words,
   not a rule above them, so the label stays a left-set inline block and the
   block itself is what gets centred. Centring the text would strand the dot.
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- Slide 1 --------------------------------------------------------- */
    .slider .carousel-caption.first_slide {
        width: min(600px, 90%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }

    .slider .carousel-caption.first_slide .outlinetxt {
        text-align: center;
    }

    /* the red rule stops being a margin down the side of the paragraph and
       becomes a mark above it, which is the same thing on a centred line */
    .slider .carousel-caption.first_slide p {
        position: relative;
        text-align: center;
        max-width: 42ch;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-top: 16px;
        border-left: 0;
    }

    .slider .carousel-caption.first_slide p::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 46px;
        height: 2px;
        border-radius: 2px;
        background: var(--bzf-red);
    }

    .bzf-award {
        justify-content: center;
    }

    /* --- Slide 2 --------------------------------------------------------- *
       Inverted: the drawing goes above the copy. Stacked, it is the thing
       that says what this slide is before a word of it has been read, and
       putting it second left it below the fold of the frame on the shorter
       screens. */
    .slider .mcp-banner .carousel-caption .d-flex {
        flex-direction: column-reverse;
        align-items: center !important;
    }

    .slider .mcp-banner .txt {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .slider .mcp-banner .txt h2 {
        display: inline-block;
    }

    .slider .mcp-banner .txt h2::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .slider .mcp-banner .txt h4 {
        text-align: center !important;
    }

    .slider .mcp-banner .txt p {
        text-align: center !important;
        max-width: 56ch;
        margin-left: auto;
        margin-right: auto;
    }

    .slider .mcp-banner .btns {
        justify-content: center !important;
        text-align: center !important;
    }

    .slider .mcp-banner .img {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    /* --- Slide 3 --------------------------------------------------------- */
    .slider .second_slide .carousel-caption.leftsidetxt {
        text-align: center;
    }

    .slider .second_slide .leftsidetxt h2.stbcont {
        text-align: center !important;
        padding-top: 16px;
    }

    .slider .second_slide h2.stbcont::before {
        left: 50%;
        transform: translateX(-50%);
    }

    /* the dot belongs beside the words, so the words stay set and the block
       they sit in is what moves to the middle */
    .slider .second_slide .bzf-chain__label {
        display: inline-block;
    }

    .slider .second_slide .bzf-chain__lead,
    .slider .second_slide .bzf-chain__stack,
    .slider .second_slide .bzf-chain__cred,
    .slider .second_slide .bzf-chain__cert {
        text-align: center;
    }

    .slider .second_slide .bzf-chain__plate {
        margin-left: auto;
        margin-right: auto;
    }

    .slider .second_slide .bzf-chain__badges {
        justify-content: center;
    }

    /* --- Slide 4 --------------------------------------------------------- *
       The step rail keeps flex-start: it is a horizontal scroller, and a
       centred flex row overflows both ends of one, which puts the first
       cards out of reach. Only the header row above it moves. */
    .slider .third_slider .yhai {
        justify-content: center !important;
        gap: clamp(14px, 3vw, 30px);
    }

    .slider .third_slider .yhai::after {
        background: linear-gradient(90deg,
                transparent,
                rgba(10, 35, 66, .14) 18%,
                rgba(229, 37, 33, .7) 50%,
                rgba(10, 35, 66, .14) 82%,
                transparent);
    }

    /* --- Room for the arrows -------------------------------------------- *
       The arrows dock to the bottom centre of the frame at these widths. That
       was clear of a left-set column and is not clear of a centred one -- on
       slide 2 they landed squarely on the only button the slide has. So the
       bottom of the frame becomes theirs: the captions reserve a strip for
       them, and the arrows shrink to fit it.

       The strip is paid for out of the slides' own rhythm below, not by
       giving the frame its height back. */
    .slider .carousel-control-prev,
    .slider .carousel-control-next {
        width: 46px;
        height: 38px;
        bottom: 10px;
    }

    .slider .carousel-control-prev {
        transform: translateX(-50px);
    }

    .slider .carousel-control-next {
        transform: translateX(50px);
    }

    .slider .carousel-control-prev-icon,
    .slider .carousel-control-next-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .homeslider .carousel-item.mcp-banner .carousel-caption,
    .slider .second_slide .carousel-caption.leftsidetxt,
    .slider .third_slider .leftsidetxt {
        padding-bottom: 52px !important;
    }

    /* Slide 1 has 80px of slack under it already, so it only needs the
       caption to stop short of the strip. */
    .homeslider .carousel-item.first_slide>.container {
        padding-bottom: 44px;
    }

    /* --- Paying for it --------------------------------------------------- */
    .slider .mcp-banner .img {
        --bzf-mcp-k: .29;
    }

    .slider .mcp-banner .carousel-caption .d-flex {
        gap: 10px;
    }

    .slider .mcp-banner .txt h4 {
        margin-bottom: 8px !important;
    }

    .slider .second_slide .bzf-chain {
        gap: 8px;
    }

    .slider .second_slide .bzf-chain__cred {
        margin-bottom: 8px;
    }

    .slider .second_slide .bzf-chain__label {
        margin-bottom: 4px;
    }

    .slider .second_slide .bzf-chain__badges img {
        height: 48px;
    }

    .slider .second_slide .bzf-chain__grid {
        gap: 7px;
    }

    .slider .second_slide .bzf-chip {
        min-height: 30px;
    }

    .slider .second_slide .leftsidetxt h2.stbcont {
        margin-bottom: 8px !important;
    }

    .slider .third_slider .yhai {
        padding-bottom: 10px !important;
    }

    .slider .third_slider .biboxes {
        padding-top: 12px !important;
    }

    .slider .third_slider .bisubboxes ul .bisbox {
        margin-top: 20px !important;
        padding-top: 22px !important;
    }
}

/* The same trade, one notch tighter, where the frame is narrower and every
   block below the headline has gained a line. */
@media (max-width: 767.98px) {

    .slider .mcp-banner .img {
        --bzf-mcp-k: .25;
    }

    .slider .second_slide .bzf-chip {
        min-height: 32px;
    }

    .slider .second_slide .bzf-chain__badges img {
        height: 48px;
    }
}

@media (max-width: 575.98px) {

    .slider .mcp-banner .img {
        --bzf-mcp-k: .47;
    }

    .slider .mcp-banner .txt h2 {
        font-size: 24px !important;
    }

    .slider .second_slide .bzf-chip {
        min-height: 30px;
    }

    .slider .second_slide .bzf-chain__grid {
        gap: 6px;
    }
}

/* ==========================================================================
   31  FULL-SCREEN MOBILE MENU

   The panel was a 75%-wide sheet (newstyles.css:1139) pinned inside the
   navbar rather than to the screen -- 554px of a 768px viewport, its links
   in a narrow column at the left and the rest of it empty. Two separate
   causes, and both are fixed here:

   the width came from that 75%, and the position came from the navbar's
   backdrop-filter. A filtered element is the containing block for any fixed
   descendant, so `top:0; left:0; bottom:0; width:100%` -- which the legacy
   sheet already asked for -- was resolving against a 738x58 bar. While the
   menu is open the bar gives that filter up (see body.bzf-nav-open below)
   and the sheet gets the viewport it was written for.

   What it becomes is a full-screen glass panel: the page reads through it,
   heavily blurred, so the menu is clearly a layer over the page rather than
   a replacement for it. The bar itself stays on top, so the wordmark and the
   close control never move between states.

   The slide-in from the left is legacy's and is kept -- nothing here sets
   `left`, so `.collapsing`/`.show` still own it.
   ========================================================================== */
@media (max-width: 991.98px) {

    body.bzf-nav-open {
        overflow: hidden;
    }

    /* the bar stays the top layer, so the wordmark and the close control are
       never behind the sheet they belong to */
    body.bzf-nav-open .header.fixedtop {
        z-index: 130;
    }

    /* A floating call-to-action over an open menu is one offer too many, and
       it was painting above the sheet at z-index 100 */
    body.bzf-nav-open .fixedrht {
        display: none !important;
    }

    /* Handing back the containing block.

       Both of these carry a backdrop-filter and either one is enough to
       become the containing block for the fixed sheet: the navbar always,
       and the header section itself once custom-scripts.js puts .fixedHeader
       on it at scroll (newstyles.css:74). That second one is why the menu
       looked right at the top of the page and collapsed to a 138px strip --
       the height of its own padding -- after scrolling down and opening it. */
    body.bzf-nav-open .header.fixedtop,
    body.bzf-nav-open .header.fixedtop.fixedHeader,
    body.bzf-nav-open .header.fixedtop .navbar,
    body.bzf-nav-open .header.fixedtop.bzf-nav-dark .navbar {
        /* not transitioned: the bar animates its glass, and blur(0px) is
           still a filter -- the sheet would stay pinned to the bar for the
           whole 280ms and then jump to the viewport at the end of it */
        transition: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* the bar's own contents stay above the sheet so the wordmark and the
       close control are where they were a moment ago */
    .header.fixedtop .navbar-brand,
    .header.fixedtop .navbar-toggler {
        position: relative;
        z-index: 3;
    }

    /* The bar decides its wordmark and close icon from whatever section is
       behind it, and it measures the page -- it cannot know the sheet is now
       between the two. Scrolled to a dark band and then opened, it was
       wearing the dark-surface treatment (white wordmark, inverted close) on
       top of a light sheet. While the menu is open the sheet is what is
       behind it, so the light treatment is the correct one.

       Scoped to the light theme: with a dark theme in play the sheet is dark
       and the dark treatment is right again. */
    :root:not([data-bzf-theme="dark"]) body.bzf-nav-open .header.fixedtop.bzf-nav-dark .blaze_logo--dark {
        opacity: 0;
    }

    :root:not([data-bzf-theme="dark"]) body.bzf-nav-open .header.fixedtop.bzf-nav-dark .blaze_logo:not(.blaze_logo--dark) {
        opacity: 1;
    }

    :root:not([data-bzf-theme="dark"]) body.bzf-nav-open .header.fixedtop.bzf-nav-dark .navbar-toggler-icon.close {
        filter: none;
    }

    :root:not([data-bzf-theme="dark"]) body.bzf-nav-open .header.fixedtop.bzf-nav-dark .navbar-toggler {
        background: rgba(255, 255, 255, .7);
        border-color: rgba(10, 35, 66, .18);
    }

    .header.fixedtop .navbar-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: calc(var(--bzf-header-h) + 26px) 22px 40px !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        /* .58 let the page read straight through: headings, the WHY BLAZE
           band and the hero's own arrows were all legible behind the menu
           and colliding with it. The blur alone cannot fix that -- a 30px
           blur softens type without hiding it -- so the ground carries the
           weight and the blur does the rest. */
        background: rgba(246, 250, 253, .94);
        -webkit-backdrop-filter: blur(30px) saturate(165%);
        backdrop-filter: blur(30px) saturate(165%);
        /* The sheet itself does not scroll -- the list inside it does. When
           the sheet was the scroller, opening a mega panel made it 1595px of
           content in an 844px frame, and scrolling ran that content up under
           the bar and off the top of the screen: the bar is transparent while
           the menu is open, so direction cards and headings passed over the
           wordmark and the close control with nothing to hide them. Clipping
           here and scrolling one level in stops the content at the top of the
           padding, which is below the bar. */
        overflow: hidden;
    }

    /* --- The list ------------------------------------------------------- *
       A column the width of a phone, centred, whatever the screen is. This is
       what the 75% sheet never had: the rows and the text inside them are the
       same object, so nothing sits in a narrow strip at one edge. */
    .header.fixedtop .navbar-collapse>.navbar-nav {
        width: 100%;
        max-width: 720px;
        margin: 0 auto !important;
        padding: 0;
        align-items: stretch;
        /* the scroller. 100% is the sheet's content box, so the list begins
           below the bar and ends above the bottom padding */
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Every row the same width. Two of the five hold a mega panel and the
       other three hold a link, and with the list shrinking its items to
       content that made two rows as wide as their panel and three as wide as
       their word -- five different left edges and five different rules. */
    .header.fixedtop .navbar-collapse .navbar-nav>.nav-item {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .header.fixedtop .navbar-collapse .navbar-nav>.nav-item+.nav-item:not(.bzf-themeitem) {
        border-top: 1px solid rgba(10, 35, 66, .09);
    }

    /* newstyles.css:1204 pads these two by id -- (1,0,0) against this rule's
       (0,4,0) -- so the two rows that carry a mega panel were sitting 18px
       to the right of the three that carry a link. The ids join the rule
       rather than the padding being fought with a second !important. */
    #megamneu,
    #megamneu1,
    .header.fixedtop .navbar-collapse .navbar-nav>.nav-item>.nav-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 15px 2px !important;
        font-size: clamp(16px, 4.2vw, 20px) !important;
        font-weight: var(--bzf-w-medium);
        line-height: 1.25;
        letter-spacing: .06em;
        text-transform: uppercase;
        border-radius: var(--bzf-r-sm);
    }

    /* A row that opens a panel has to say so. Legacy hides the caret at these
       widths and puts an underline on the ::after of the plain links instead,
       so this is drawn back on explicitly and only for the two that expand. */
   /* .header.fixedtop .navbar-collapse .navbar-nav>.nav-item>.dropdown-toggle::after {
        content: "" !important;
        display: inline-block !important;
        position: static !important;
        width: 0;
        height: 0;
        margin: 0 !important;
        border-top: .4em solid var(--bzf-red);
        border-right: .34em solid transparent;
        border-bottom: 0;
        border-left: .34em solid transparent;
        background: none !important;
        opacity: .85;
        transition:
            transform var(--bzf-dur) var(--bzf-ease),
            opacity var(--bzf-dur) var(--bzf-ease);
    }

     .header.fixedtop .navbar-collapse .navbar-nav>.nav-item.show>.dropdown-toggle::after {
        transform: rotate(180deg);
        opacity: 1;
        color: var(--bzf-red);
    } */

    /* --- The panels inside ---------------------------------------------- *
       Inline, full width, and indented just enough to read as belonging to
       the row above rather than as another row. */
    .header.fixedtop .navbar-collapse .megamenu .dropdown-menu {
        position: static !important;
        float: none;
        width: 100% !important;
        min-width: 0;
        max-width: none;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .header.fixedtop .navbar-collapse .megamenu .dropdown-menu .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    /* --- Theme switcher -------------------------------------------------- */
    .header.fixedtop .navbar-collapse .bzf-themeitem {
        margin-top: 18px;
        padding-top: 18px;
    }
}

/* Dark theme: the same sheet in the dark material */
@media (max-width: 991.98px) {

    :root[data-bzf-theme="dark"] .header.fixedtop .navbar-collapse {
        background: rgba(9, 20, 36, .95);
        border: 0;
        box-shadow: none;
    }

    :root[data-bzf-theme="dark"] .header.fixedtop .navbar-collapse .navbar-nav>.nav-item+.nav-item:not(.bzf-themeitem) {
        border-top-color: rgba(150, 186, 228, .14);
    }
}

/* ==========================================================================
   32  DARK THEME AND SWITCHER -- OFF

   The dark theme is switched off site-wide. Nothing is deleted: section 29
   and everything else keyed to data-bzf-theme="dark" is intact and inert,
   because the <head> script in header.php now pins the attribute to "light"
   and initTheme() stands down rather than flipping it.

   This block only takes the control out of the two menus. Delete it, and undo
   the marks in header.php and blaze-futura.js, to bring both back.
   ========================================================================== */
.bzf-themeitem {
    display: none !important;
}

/* ==========================================================================
   33  MCP PAGE

   The page was built before the design system and carries its own idiom:
   hairline boxes on white, three solid red slabs, flat bands, 12px type. It
   holds the same content here -- nothing is rewritten, removed or renamed --
   restated in the landing page's material.

   The four things that make the landing page what it is, applied here:
   glass panels on a light ground, red as an accent rather than a fill, one
   full-bleed statement band, and the type scale from section 00a.
   ========================================================================== */

/* --- Shared: section rhythm and headings --------------------------------- */
.mcp section {
    position: relative;
    padding: clamp(56px, 7vw, 104px) 0;
}

.mcp .container {
    position: relative;
    z-index: 2;
}

/* Every section heading on the page is an h2 or h3 with a red <span> inside
   it. That is already the landing page's own headline idiom, so it only
   needs the scale and the colour. */
.mcp .smart-choice .hd h3,
.mcp .versatile .hd .title,
.mcp .icon-grid-section>.container>h2,
.mcp .engagement-section .engagement-title,
.mcp .faq .hd h3,
.mcp .get-start h3 {
    font-size: var(--bzf-fs-h2) !important;
    line-height: var(--bzf-lh-h2);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
    margin: 0 0 14px;
}

.mcp .smart-choice .hd h3 span,
.mcp .versatile .hd .title span,
.mcp .icon-grid-section>.container>h2 span,
.mcp .engagement-section .engagement-title span,
.mcp .get-start h3 span {
    color: var(--bzf-red) !important;
}

/* the eyebrow label: a red dot and a set line, the mark the Nexus and the
   mega menu already use */
.mcp .smart-choice .hd h4,
.mcp .faq .hd h4 {
    position: relative;
    display: inline-block;
    margin: 0 0 14px;
    padding-left: 16px;
    font-size: var(--bzf-fs-label);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-label);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--bzf-ink-mute) !important;
}

.mcp .smart-choice .hd h4::before,
.mcp .faq .hd h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: .43em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 0 3px rgba(229, 37, 33, .14);
}

.mcp .versatile .hd .subtitle,
.mcp .engagement-section .engagement-description,
.mcp .get-start p {
    font-size: var(--bzf-fs-lead);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
    max-width: var(--bzf-measure);
    margin-left: auto;
    margin-right: auto;
}

/* --- Hero ---------------------------------------------------------------- *
   The landing hero is a light environment with a grid floor and two pools of
   red light under it. Same ground here, at a quieter intensity, because this
   one carries a paragraph rather than three words. */
.mcp .mcp-banner {
    padding-top: calc(var(--bzf-header-h) + clamp(22px, 3vw, 46px));
    padding-bottom: clamp(48px, 6vw, 88px);
    background:
        radial-gradient(1200px 620px at 88% 78%, rgba(229, 37, 33, .13), transparent 66%),
        radial-gradient(760px 460px at 12% 8%, rgba(10, 35, 66, .06), transparent 70%),
        linear-gradient(178deg, var(--bzf-white) 0%, var(--bzf-gray-soft) 100%);
    overflow: hidden;
}

.mcp .mcp-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(10, 35, 66, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 35, 66, .045) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 62%);
    mask-image: linear-gradient(to top, #000 0%, transparent 62%);
}

.mcp .mcp-banner .txt {
    max-width: 620px;
}

.mcp .mcp-banner .txt h2 {
    position: relative;
    padding-top: 24px;
    margin: 0 0 12px;
    font-size: var(--bzf-fs-h1) !important;
    line-height: var(--bzf-lh-h1);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
}

/* the rule this headline never had, the same one slide 3 carries */
.mcp .mcp-banner .txt h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--bzf-red);
}

.mcp .mcp-banner .txt h2 span {
    color: var(--bzf-red) !important;
}

.mcp .mcp-banner .txt h4 {
    font-size: var(--bzf-fs-h4) !important;
    line-height: var(--bzf-lh-heading);
    font-weight: var(--bzf-w-medium);
    color: var(--bzf-ink) !important;
    margin: 0 0 18px;
    max-width: 34ch;
}

.mcp .mcp-banner .txt p {
    font-size: var(--bzf-fs-body) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
    max-width: 58ch;
    margin: 0 0 28px;
    padding-left: 18px;
    border-left: 2px solid var(--bzf-red-line);
}

.mcp .mcp-banner .img {
    flex: 0 0 auto;
    margin-left: auto;
}
/* --- Buttons ------------------------------------------------------------- *
   One pair, used by the hero and the closing call: a solid red pill and a
   glass one beside it. Both sections already hold the same two links. */
.mcp .btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.mcp .btns .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: auto;
    min-width: 0;
    padding: 13px 26px !important;
    border-radius: 999px !important;
    font-size: var(--bzf-fs-btn) !important;
    font-weight: var(--bzf-w-medium) !important;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: none;
    border: 1px solid var(--bzf-glass-l-brd) !important;
    background: rgba(255, 255, 255, .8) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    color: var(--bzf-ink) !important;
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-1) !important;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease);
}

.mcp .btns .btn img {
    width: 18px;
    height: auto;
    margin: 0;
}

/* the second link in each pair is the one being asked for */
.mcp .btns .btn:last-child {
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 52%, var(--bzf-red-deep) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: var(--bzf-lift-red) !important;
}

.mcp .btns .btn:last-child span {
    color: #FFFFFF !important;
}

.mcp .btns .btn:hover {
    transform: translateY(-2px);
    border-color: var(--bzf-red-line) !important;
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-2) !important;
}

.mcp .btns .btn:last-child:hover {
    box-shadow: var(--bzf-glow-red-soft), var(--bzf-lift-red) !important;
}

/* --- What we build ------------------------------------------------------- *
   Six hairline boxes become six glass cards on the same grid, with the icon
   in a red-tinted tile rather than loose on the card. */
.mcp .smart-choice {
    background: var(--bzf-white);
}

.mcp .smart-choice .hd {
    text-align: center;
    margin-bottom: clamp(28px, 3.4vw, 46px);
}

.mcp .smart-choice .bdy {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    align-items: stretch;
}

.mcp .smart-choice .sc-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: auto !important;
    margin: 0 !important;
    padding: clamp(22px, 2.2vw, 30px) !important;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease);
}

.mcp .smart-choice .sc-box:hover {
    transform: translateY(-4px);
    border-color: var(--bzf-red-line);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-2);
}

.mcp .smart-choice .sc-box .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 14px;
    background: var(--bzf-red-tint);
    border: 1px solid var(--bzf-red-line);
}

.mcp .smart-choice .sc-box .icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mcp .smart-choice .sc-box .txt h4 {
    font-size: var(--bzf-fs-card) !important;
    line-height: var(--bzf-lh-card);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
    margin: 0 0 8px;
}

.mcp .smart-choice .sc-box .txt p {
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
    margin: 0;
}

/* --- Versatile across stacks --------------------------------------------- *
   The pills are the chips slide 3 uses: glass, hairline, one line each. */
.mcp .versatile {
    background: var(--bzf-gray-soft);
}

.mcp .versatile .hd {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.mcp .versatile .stack-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.mcp .versatile .stack-item {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-1);
    font-size: var(--bzf-fs-sm);
    font-weight: var(--bzf-w-medium);
    letter-spacing: .02em;
    color: var(--bzf-ink) !important;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease);
}

.mcp .versatile .stack-item:hover {
    transform: translateY(-2px);
    border-color: var(--bzf-red-line);
}

.mcp .versatile .badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mcp .versatile .badge {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bzf-red-tint);
    border: 1px solid var(--bzf-red-line);
    font-size: var(--bzf-fs-label);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    text-transform: uppercase;
    color: var(--bzf-red) !important;
}
/* --- Hosting is optional -------------------------------------------------- *
   This is the page's one full-bleed statement, so it takes the landing
   page's statement band exactly: navy into red into navy over the light
   plate, with a lit seam at each edge. */
.mcp .hosting-hero {
    background:
        linear-gradient(104deg, rgba(7, 29, 58, .95) 0%, var(--bzf-red) 48%, rgba(7, 29, 58, .84) 100%),
        url(../images/futura/band-light.webp) no-repeat center center / cover !important;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.mcp .hosting-hero::before,
.mcp .hosting-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    box-shadow: 0 0 16px rgba(255, 255, 255, .5);
}

.mcp .hosting-hero::before {
    top: 0;
}

.mcp .hosting-hero::after {
    bottom: 0;
}

.mcp .hosting-hero h2 {
    font-size: clamp(24px, 3.3vw, 46px) !important;
    line-height: var(--bzf-lh-h2);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    text-transform: uppercase;
    color: #FFFFFF !important;
    margin: 0 0 16px;
}

.mcp .hosting-hero p {
    font-size: var(--bzf-fs-body) !important;
    line-height: var(--bzf-lh-body);
    color: rgba(255, 255, 255, .86) !important;
    max-width: 62ch;
    margin: 0 auto;
}

/* --- Ready connectors ----------------------------------------------------- *
   The render is the section now. It is the same <img> the markup already
   carries -- lifted out of the two-column row and stretched behind the whole
   band rather than re-declared as a background-image, so it stays one
   request and keeps the alt text it was written with.

   Negative z-index is what makes that work without touching the markup: a
   negative child paints above its parent's own background but below
   everything in flow, so the heading and the list sit over the art without
   needing a z-index of their own -- and because .container stays unpositioned,
   the image resolves its edges against the section rather than the 1140px
   column. isolation:isolate keeps that layer from escaping the section.

   The art is silver and red on near-white -- the page's own palette -- so it
   is veiled rather than darkened: near-solid white under the list, thinning
   across to the right where the two figures are, and fading to the page at
   the top and bottom so the band has no seam against the red one above it. */
.mcp .icon-grid-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 7vw, 104px) 0;
    background: var(--bzf-white);
}

/* .container is position:relative site-wide, which would have made it the
   image's containing block and stopped the art at the 1140px column. It is
   the only thing in this section that positions anything, and nothing inside
   it needs it, so it stands down here and the section takes the job. */
.mcp .icon-grid-section > .container {
    position: static;
}

.mcp .icon-grid-section .right {
    position: absolute;
    inset: 0;
    z-index: -2;
    flex: none;
    /* newstyles.css:685 pins this to 50%, and an explicit width beats the
       right offset -- inset alone left the picture half a section wide. */
    width: auto;
    max-width: none;
    margin: 0;
    pointer-events: none;
}

.mcp .icon-grid-section .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 46%;
}

/* The wider the section grows the shallower its slice of a 1568x1003
   drawing, and past this the band is flat enough that a centred crop takes
   the top off both heads. It anchors near the top instead, so the faces and
   the plug stay in frame and the cut lands at the waist -- a crop rather
   than an accident. */
@media (min-width: 1700px) {

    .mcp .icon-grid-section .right img {
        object-position: 66% 22%;
    }
}

.mcp .icon-grid-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            var(--bzf-white) 0%,
            rgba(255, 255, 255, 0) 22%,
            rgba(255, 255, 255, 0) 74%,
            var(--bzf-white) 100%),
        linear-gradient(92deg,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .95) 36%,
            rgba(255, 255, 255, .70) 50%,
            rgba(255, 255, 255, .30) 68%,
            rgba(255, 255, 255, .22) 86%,
            rgba(255, 255, 255, .46) 100%);
}

/* The one heading on this page that is not centred. The right half is a
   photograph of two people now, and a centred line lands across a face. */
.mcp .icon-grid-section>.container>h2 {
    text-align: left;
    max-width: clamp(320px, 48%, 560px);
    margin-bottom: clamp(20px, 2.4vw, 32px);
}

.mcp .icon-grid-section .d-flex {
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

/* The card holds the left half and the art keeps the right, which is the
   reading order the two columns already had -- only now the picture runs to
   the edge of the page instead of stopping at the column. It is opaque
   enough to read against: this is glass over a photograph, not over paper. */
.mcp .icon-grid-section .left {
    flex: 0 1 clamp(320px, 48%, 560px);
    min-width: 0;
    padding: clamp(22px, 2.4vw, 34px);
    border-radius: var(--bzf-r);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-2);
}

.mcp .icon-grid-section .left ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.mcp .icon-grid-section .left li {
    padding: 13px 0;
    font-size: var(--bzf-fs-body) !important;
    line-height: var(--bzf-lh-body);
    font-weight: var(--bzf-w-medium);
    color: var(--bzf-ink) !important;
    border-bottom: 1px solid rgba(10, 35, 66, .08);
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.mcp .icon-grid-section .left li:last-child {
    border-bottom: 0;
}

.mcp .icon-grid-section .left li:hover {
    color: var(--bzf-red) !important;
}

.mcp .icon-grid-section .left>p {
    margin: 0;
    padding-left: 16px;
    position: relative;
    font-size: var(--bzf-fs-sm) !important;
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    text-transform: uppercase;
    color: var(--bzf-red) !important;
}

.mcp .icon-grid-section .left>p::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bzf-red);
    box-shadow: 0 0 0 3px rgba(229, 37, 33, .14);
}

/* --- Engagement models ---------------------------------------------------- *
   Three solid red slabs become three glass cards with a red rule across the
   top. The red is still what marks them; it is no longer the whole card,
   which is what put this section outside the rest of the site. */
.mcp .engagement-section {
    background: var(--bzf-gray-soft);
    text-align: center;
}

.mcp .engagement-section .engagement-description {
    margin-bottom: clamp(26px, 3vw, 42px);
}

.mcp .engagement-section .engagement-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    text-align: left;
}

.mcp .engagement-section .engagement-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: clamp(24px, 2.4vw, 34px);
    border-radius: var(--bzf-r);
    background: rgba(255, 255, 255, .9) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.mcp .engagement-section .engagement-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bzf-red-bright), var(--bzf-red) 46%, transparent);
}

.mcp .engagement-section .engagement-card:hover {
    transform: translateY(-4px);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-2);
}

.mcp .engagement-section .engagement-title-item {
    font-size: var(--bzf-fs-card) !important;
    line-height: var(--bzf-lh-card);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
    margin-bottom: 10px;
}

.mcp .engagement-section .engagement-description-item {
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
}
/* --- Configuration and launch --------------------------------------------- */
.mcp .config-sec {
    background: var(--bzf-white);
}

.mcp .config-sec h4 {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: var(--bzf-fs-h4) !important;
    line-height: var(--bzf-lh-heading);
    font-weight: var(--bzf-w-light);
    letter-spacing: var(--bzf-ls-heading);
    color: var(--bzf-ink-soft) !important;
}

.mcp .config-sec h3 {
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
    margin: 0 0 6px;
}

.mcp .config-sec h3 span {
    color: var(--bzf-red) !important;
}

/* The code panels are the one place on the page where dark is right: they
   are a terminal, and the landing page's console material is what a terminal
   looks like here. */
.mcp .config-sec .code-box {
    height: 100%;
    border-radius: var(--bzf-r-sm);
    overflow: hidden;
    background: linear-gradient(150deg, #17416F 0%, #0A2342 30%, #071D3A 66%, #04122A 100%);
    border: 1px solid rgba(150, 186, 228, .16);
    box-shadow:
        inset 0 1px 0 rgba(190, 214, 240, .12),
        var(--bzf-lift-2);
    transition: box-shadow var(--bzf-dur) var(--bzf-ease);
}

.mcp .config-sec .code-box:hover {
    box-shadow:
        inset 0 1px 0 rgba(190, 214, 240, .12),
        var(--bzf-lift-3);
}

.mcp .config-sec .code-b-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(4, 18, 42, .5);
    border-bottom: 1px solid rgba(150, 186, 228, .14);
}

.mcp .config-sec .code-b-hd p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--bzf-fs-label) !important;
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    text-transform: uppercase;
    color: rgba(233, 240, 249, .8) !important;
}

.mcp .config-sec .code-b-hd p img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.mcp .config-sec .code-b-hd .btns {
    gap: 6px;
}

.mcp .config-sec .code-b-hd .btns a,
.mcp .config-sec .code-b-hd .btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    background: rgba(150, 186, 228, .1);
    border: 1px solid rgba(150, 186, 228, .16);
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease);
}

.mcp .config-sec .code-b-hd .btns a:hover,
.mcp .config-sec .code-b-hd .btns button:hover {
    background: rgba(255, 74, 70, .18);
    border-color: rgba(255, 74, 70, .4);
}

.mcp .config-sec .code-b-hd .btns img {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
    opacity: .82;
}

.mcp .config-sec .code-b-bdy {
    padding: 14px 16px;
    overflow-x: auto;
    /* newstyles.css:646 paints this #2D2D2D, which left a grey slab inside a
       navy panel; the panel's own gradient is the ground now */
    background: transparent;
    border-radius: 0;
}

/* The teaser fade at the foot of each snippet is legacy's and is kept -- it
   was fading to the grey the body used to be. */
.mcp .config-sec .code-b-bdy::after {
    background: linear-gradient(to top, rgba(4, 18, 42, 1) 0%, rgba(4, 18, 42, 0) 100%);
}

.mcp .config-sec .code-b-bdy pre {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(233, 240, 249, .9) !important;
    background: none;
    border: 0;
}

.mcp .config-sec .code-b-bdy .pl-ent {
    color: #8FD3FF;
}

.mcp .config-sec .code-b-bdy .pl-s {
    color: #FF9B98;
}

/* The end of every long line was simply gone. A <pre> does not wrap, and
   legacy's word-break:break-all cannot act on text that never wraps, so
   "http://localhost:3000 lost its closing quote and the Zabbix URL lost half
   its path -- with no scrollbar to go and find them either, because the
   <pre> clipped its own overflow before the panel could scroll it. They wrap
   now, and anywhere, since a path or a package name carries no spaces to
   break at. */
.mcp .config-sec .code-b-bdy pre,
.mcp .config-sec .code-b-bdy pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    overflow: visible;
}

/* Hovering opens the card.

   Lifting the body out of flow is legacy's own idea and it is kept: every
   card is pinned to the same height, so the flex line is still held up by
   the card's neighbour when one of them leaves, and nothing reflows. What
   was stopping it was mine -- .code-box carries overflow:hidden to round its
   corners, which clipped the opened panel back to the card it came from. The
   corners are drawn on the parts instead while the card is open. */
.mcp .config-sec .code-box:hover {
    overflow: visible;
    z-index: 20;
}

.mcp .config-sec .code-box:hover .code-b-hd {
    border-radius: var(--bzf-r-sm) var(--bzf-r-sm) 0 0;
}

.mcp .config-sec .code-box:hover .code-b-bdy {
    left: 0;
    right: 0;
    /* legacy opens this to max-content; the Odoo and WordPress snippets are
       long enough to run off the foot of the section, so past this they
       scroll inside the panel instead */
    max-height: 540px;
    overflow: auto;
    background: linear-gradient(150deg, #17416F 0%, #0A2342 30%, #071D3A 66%, #04122A 100%);
    border: 1px solid rgba(150, 186, 228, .16);
    border-top: 0;
    border-radius: 0 0 var(--bzf-r-sm) var(--bzf-r-sm);
    /* The panel opens over the card beneath it, and both are the same navy,
       so the shadow is doing the work of saying which one is in front --
       legacy's is a 10px spread of pure black, which just darkened the seam
       rather than casting from it. */
    box-shadow:
        0 0 0 1px rgba(150, 186, 228, .26),
        0 28px 56px -16px rgba(2, 10, 24, .72),
        0 10px 22px -10px rgba(2, 10, 24, .6);
}

/* copyCode() swaps the button for "Copied" and legacy widens it with
   width:max-content -- which the 30px square above was overriding, so the
   word broke out of the header in whatever colour it had inherited. */
.mcp .config-sec .code-b-hd .btns {
    flex: 0 0 auto;
}

.mcp .config-sec .code-b-hd .btns button.copied,
.mcp .config-sec .code-b-hd .btns button.copy-error {
    width: auto;
    min-width: 30px;
    padding: 0 10px;
    gap: 5px;
    white-space: nowrap;
    font-size: var(--bzf-fs-xs) !important;
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    text-transform: uppercase;
    color: #E9F0F9 !important;
}

.mcp .config-sec .code-b-hd .btns button.copied {
    background: rgba(58, 208, 130, .16);
    border-color: rgba(58, 208, 130, .42);
}

.mcp .config-sec .code-b-hd .btns button.copy-error {
    background: rgba(255, 74, 70, .18);
    border-color: rgba(255, 74, 70, .45);
}

/* Nothing here has a pointer to open the card with, so the card is already
   open. Legacy only did this below 480px, which left every tablet holding a
   snippet it had no way to finish reading. */
@media (hover: none) {

    .mcp .config-sec .code-b-bdy {
        max-height: none;
        min-height: 0;
    }

    .mcp .config-sec .code-b-bdy::after {
        display: none;
    }
}

/* The launch column is the counterpart: the same panel in the light
   material, so the two columns read as one pair. */
.mcp .config-sec .box {
    margin-top: 18px;
    padding: clamp(20px, 2.2vw, 28px);
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

.mcp .config-sec .inner-box ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.mcp .config-sec .inner-box li {
    padding: 10px 0;
    font-size: var(--bzf-fs-xs) !important;
    line-height: 1.6;
    color: var(--bzf-ink-soft) !important;
    border-bottom: 1px solid rgba(10, 35, 66, .07);
    word-break: break-word;
}

.mcp .config-sec .inner-box li:last-child {
    border-bottom: 0;
}

.mcp .config-sec .box>p {
    margin: 0 0 14px;
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink) !important;
}

.mcp .config-sec .box>p span {
    color: var(--bzf-red) !important;
}

.mcp .config-sec .d-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mcp .config-sec .d-box-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi);
    font-size: var(--bzf-fs-xs);
    font-weight: var(--bzf-w-medium);
    letter-spacing: .03em;
    color: var(--bzf-ink) !important;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.mcp .config-sec .d-box-item a:hover {
    transform: translateY(-3px);
    border-color: var(--bzf-red-line);
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-1);
}

.mcp .config-sec .d-box-item img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mcp .config-sec .col-md-5>p:last-child {
    margin: 16px 0 0;
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
}

/* --- Coming soon ---------------------------------------------------------- *
   The red card, which is the one object on the page that should be filled
   with it. */
.mcp .com-soon {
    background: var(--bzf-white);
}

.mcp .com-soon .cs-box {
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 52px);
    border-radius: var(--bzf-r-lg);
    background: linear-gradient(122deg, var(--bzf-red-deep) 0%, var(--bzf-red) 46%, var(--bzf-red-bright) 100%) !important;
    border: 0;
    box-shadow: var(--bzf-lift-red), var(--bzf-lift-2);
    overflow: hidden;
    position: relative;
}

.mcp .com-soon .cs-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(560px 320px at 88% 20%, rgba(255, 255, 255, .18), transparent 70%),
        linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
}

.mcp .com-soon .cs-box>* {
    position: relative;
    z-index: 1;
}

.mcp .com-soon .cs-box .txt {
    flex: 1 1 auto;
}

.mcp .com-soon .cs-box h4 {
    margin: 0 0 8px;
    font-size: var(--bzf-fs-label) !important;
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78) !important;
}

.mcp .com-soon .cs-box h3 {
    margin: 0 0 10px;
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: #FFFFFF !important;
}

.mcp .com-soon .cs-box p {
    margin: 0;
    max-width: 56ch;
    font-size: var(--bzf-fs-body) !important;
    line-height: var(--bzf-lh-body);
    color: rgba(255, 255, 255, .9) !important;
}

.mcp .com-soon .cs-box .img {
    flex: 0 0 auto;
}

.mcp .com-soon .cs-box .img img {
    width: clamp(96px, 12vw, 150px);
    height: auto;
    display: block;
}
/* --- Frequently asked questions ------------------------------------------- *
   The same rows the pricing page uses. Note the overflow below: legacy sets
   overflow:hidden on .accordion, which clips every row's shadow flush to the
   grid edge and leaves a grey band under each one. */
.mcp .faq {
    background: var(--bzf-gray-soft);
}

.mcp .faq .hd {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.mcp .faq .accordion {
    overflow: visible;
    max-width: 880px;
    margin: 0 auto;
}

.mcp .faq .accordion .card {
    margin-bottom: 12px;
    border-radius: var(--bzf-r-sm) !important;
    background: rgba(255, 255, 255, .9) !important;
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd) !important;
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    overflow: hidden;
    transition: box-shadow var(--bzf-dur) var(--bzf-ease);
}

.mcp .faq .accordion .card:hover {
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-2);
}

.mcp .faq .accordion .card-header {
    padding: 0;
    background: none !important;
    border: 0 !important;
}

.mcp .faq .accordion .card-header h2 {
    margin: 0;
}

.mcp .faq .accordion .card-header .btn {
    width: 100%;
    padding: 18px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-decoration: none;
    font-size: var(--bzf-fs-sm) !important;
    font-weight: var(--bzf-w-bold) !important;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--bzf-ink) !important;
    transition: color var(--bzf-dur) var(--bzf-ease);
    transform: none !important;
}

.mcp .faq .accordion .card-header .btn:hover,
.mcp .faq .accordion .card-header .btn:not(.collapsed) {
    color: var(--bzf-red) !important;
}

/* The chevron is the only thing on the row that says it opens, so it is
   sized to be seen. 22px is still inside the file's own 36px, so it stays
   sharp on a retina screen. */
.mcp .faq .accordion .card-header .btn img {
    width: 22px;
    height: auto;
    flex: 0 0 auto;
    margin-left: 16px;
    opacity: .65;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        opacity var(--bzf-dur) var(--bzf-ease);
}

.mcp .faq .accordion .card-header .btn:not(.collapsed) img {
    transform: rotate(180deg);
    opacity: 1;
}

.mcp .faq .accordion .card-body {
    padding: 0 22px 20px !important;
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
}

.mcp .faq .accordion .card-body a {
    color: var(--bzf-red) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Closing call ---------------------------------------------------------- */
.mcp .get-start {
    text-align: center;
    background:
        radial-gradient(900px 460px at 50% 110%, rgba(229, 37, 33, .1), transparent 68%),
        var(--bzf-white);
}

.mcp .get-start h3 span {
    color: var(--bzf-red) !important;
}

.mcp .get-start p {
    margin-bottom: 26px;
}

.mcp .get-start .btns {
    justify-content: center;
}

/* the closing pair is a <a> and a <button>, so the last-child rule above
   cannot reach the second one */
.mcp .get-start .btns button.btn {
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 52%, var(--bzf-red-deep) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: var(--bzf-lift-red) !important;
}

.mcp .get-start .btns button.btn span {
    color: #FFFFFF !important;
}

.mcp .get-start .btns button.btn img {
    filter: brightness(0) invert(1);
}

.mcp .get-start .btns button.btn:hover {
    box-shadow: var(--bzf-glow-red-soft), var(--bzf-lift-red) !important;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1199.98px) {

    .mcp .smart-choice .bdy {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {

    .mcp .mcp-banner .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 28px;
    }

    .mcp .mcp-banner .txt {
        max-width: 100%;
    }

    .mcp .mcp-banner .img {
        margin-left: 0;
        width: 100%;
    }

    .mcp .icon-grid-section .d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }

    /* newstyles.css:685 puts width:50% on the card. In the row that was
       outranked by flex-basis; stacked, flex-basis is the height and the
       width is left holding half a column. */
    .mcp .icon-grid-section .left {
        flex: 0 0 auto;
        width: auto;
    }

    .mcp .icon-grid-section>.container>h2 {
        max-width: none;
    }

    /* A phone shows a narrow slice of a wide drawing, so what is left of it
       reads as noise rather than as a picture. The veil goes up and the crop
       moves to the middle, where the two plugs are. */
    .mcp .icon-grid-section .right img {
        object-position: 50% 44%;
    }

    /* The card runs the full width here and is opaque, so the art only has
       the margins and the head of the section to show in -- the veil comes
       down accordingly or there would be nothing left to see. */
    .mcp .icon-grid-section::before {
        background:
            linear-gradient(180deg,
                var(--bzf-white) 0%,
                rgba(255, 255, 255, .40) 20%,
                rgba(255, 255, 255, .40) 80%,
                var(--bzf-white) 100%),
            linear-gradient(0deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .26));
    }

    .mcp .engagement-section .engagement-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mcp .com-soon .cs-box {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left;
    }

    .mcp .com-soon .cs-box .img {
        align-self: center;
    }
}

@media (max-width: 767.98px) {

    .mcp .smart-choice .bdy,
    .mcp .engagement-section .engagement-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mcp .config-sec .d-box {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mcp .btns {
        width: 100%;
    }

    .mcp .btns .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* --- Out-specifying the sheet below ---------------------------------------- *
   Three rules in newstyles.css carry an extra element selector or an
   !important, which puts them a hair above everything in section 33. They
   are restated here at the weight it takes to reach them, and nowhere else,
   so the rest of the section stays readable.
   ---------------------------------------------------------------------------- */

/* newstyles.css:602 sizes the illustration at 85x100, which overflowed the
   tile it now sits in */
.mcp section.smart-choice .bdy .sc-box .icon {
    width: 64px;
    height: 64px;
    margin-bottom: 0;
}

.mcp section.smart-choice .bdy .sc-box .icon img {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}

/* newstyles.css:680 puts width:32% on the card. In a flex row that was the
   third; in the grid it is now in, it is a third of a third. */
.mcp .engagement-section .engagement-card {
    width: auto;
    color: var(--bzf-ink);
}

/* newstyles.css:615-622 reach these through .bdy, one element selector above
   section 33 */
.mcp section.faq .bdy .accordion .card {
    margin-bottom: 12px;
    padding: 0;
    border-radius: var(--bzf-r-sm) !important;
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid var(--bzf-glass-l-brd) !important;
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

.mcp section.faq .bdy .accordion .card .card-header .btn {
    /* the size, weight and tracking are set once, in section 09's typography
       pass, which already treats these rows as headings by role -- this only
       gives them the padding the card no longer carries */
    padding: 18px 22px;
    color: var(--bzf-ink);
}

.mcp section.faq .bdy .accordion .card .card-header .btn:hover,
.mcp section.faq .bdy .accordion .card .card-header .btn:not(.collapsed) {
    color: var(--bzf-red);
}

.mcp section.faq .bdy .accordion .card .card-body {
    padding: 0 22px 20px;
    font-size: var(--bzf-fs-sm);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft);
}

/* legacy starts the arrow rotated, so the two states were inverted */
.mcp section.faq .bdy .accordion .card .card-header .btn img {
    transform: rotate(0deg);
}

.mcp section.faq .bdy .accordion .card .card-header .btn:not(.collapsed) img {
    transform: rotate(180deg);
}
/* --- The hero drawing below 992 -------------------------------------------- *
   It is the same fixed 720x420 artwork the homepage slide carries, and here
   it was being left at full size: 720px of drawing in a 390px column, cut
   off at the right edge. Same treatment as the slide -- the column reserves
   the scaled height and the drawing is scaled into it, so nothing inside is
   reflowed.
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .mcp .mcp-banner .img {
        --bzf-mcp-k: .62;
        height: calc(420px * var(--bzf-mcp-k));
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .mcp .mcp-banner .img .diagram {
        flex: 0 0 auto;
        transform: scale(var(--bzf-mcp-k));
        transform-origin: 50% 50%;
    }

    /* Centred, the same way every hero on the site is at this width. The two
       red marks follow the text: the rule over the headline moves to the
       middle of the line it marks, and the one down the side of the
       paragraph becomes a mark above it. */
    .mcp .mcp-banner .txt {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .mcp .mcp-banner .txt h2::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .mcp .mcp-banner .txt h4 {
        max-width: 42ch;
        margin-left: auto;
        margin-right: auto;
    }

    .mcp .mcp-banner .txt p {
        position: relative;
        max-width: 56ch;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-top: 16px;
        border-left: 0;
    }

    .mcp .mcp-banner .txt p::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 46px;
        height: 2px;
        border-radius: 2px;
        background: var(--bzf-red);
    }

    .mcp .mcp-banner .btns {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {

    .mcp .mcp-banner .img {
        --bzf-mcp-k: .5;
    }
}

@media (max-width: 575.98px) {

    .mcp .mcp-banner .img {
        --bzf-mcp-k: .42;
    }

    /* the OS tiles are three across on a phone only because they are three
       words; below this they need the room */
    .mcp .config-sec .d-box {
        gap: 8px;
    }
}

/* ==========================================================================
   34  INNER PAGES — THE SHARED VOCABULARY
   Every service and solution page is assembled from the same dozen legacy
   blocks: a left service rail, a slide-indicator pair, bordered story cards,
   bar-marked lists, icon tiles, logo grids and a closing call. They are
   styled here once, against the class names the markup already carries, so
   every page that uses a block gets the landing page's material without a
   line of markup changing.
   ========================================================================== */

/* --- 34a  Section headings ------------------------------------------------ *
   The inner pages had no heading idiom at all: .apply_title was whatever
   size its tag happened to be, and the red <span>/<strong> inside it was
   inert. Routed to the same scale, weight and red accent the landing page
   uses, and given the 56x3 red rule above it that marks a section start.
   ---------------------------------------------------------------------------- */
.bg_bc h2.apply_title,
.bg_bc h3.apply_title,
.bg_bc h4.apply_title,
.bg_bc h5.apply_title,
.bg_bc h6.apply_title {
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink);
    text-transform: none;
}

.bg_bc .apply_title strong {
    font-weight: inherit;
}

.bg_bc .apply_title span,
.bg_bc .apply_title .redtxt {
    color: var(--bzf-red) !important;
}

/* The section-start rule. Only on headings that open a block -- the ones
   inside the closing call and inside a card carry their own treatment
   further down. */
.bg_bc .tab-content1 .liststyles > h4,
.bg_bc .career > .row h4,
.bg_bc .csicboxes > h4 {
    position: relative;
    width: 100%;
    margin: 0 0 18px;
    padding-top: 20px;
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink);
}

.bg_bc .tab-content1 .liststyles > h4::before,
.bg_bc .career > .row h4::before,
.bg_bc .csicboxes > h4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--bzf-red);
}

/* --- 34b  The service rail  (.sernboxlist) -------------------------------- *
   Fourteen separate white boxes, each with its own shadow and -- once
   section 18 reached them as .innerbox -- its own 4px red cap, stacked with
   no gap. That is fourteen cards where the page needs one. It becomes a
   single glass panel with hairline rows, and the red moves to a bar that
   marks the row you are on.
   ---------------------------------------------------------------------------- */
.sernboxlist {
    padding: 8px;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

/* .sticky-top pins it under the header rather than under the viewport top */
.sernboxlist.sticky-top {
    top: calc(var(--bzf-header-h) + 16px);
    z-index: 5;
}

/* Beats section 18's own .sernboxlist .innerbox by position: same weight,
   later in the file. */
.sernboxlist .innerbox,
.sernboxlist .innerbox:hover {
    padding: 11px 12px 11px 15px;
    border: 0;
    border-radius: var(--bzf-r-sm);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transform: none;
    overflow: visible;
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease);
}

.sernboxlist .innerbox:not(:last-child) {
    border-bottom: 1px solid rgba(10, 35, 66, .07);
}

.sernboxlist .innerbox:hover,
.sernboxlist .innerbox.active {
    background: var(--bzf-red-tint);
}

/* Legacy's red circle wipe becomes the marker bar. */
.sernboxlist .innerbox::before {
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    opacity: 1;
    transform: translateY(-50%);
    transition: height var(--bzf-dur) var(--bzf-ease);
}

.sernboxlist .innerbox:hover::before,
.sernboxlist .innerbox.active::before {
    width: 3px;
    height: 58%;
    border-radius: 3px;
    opacity: 1;
}

.sernboxlist .innerbox p {
    font-size: var(--bzf-fs-xs);
    font-weight: var(--bzf-w-medium);
    letter-spacing: var(--bzf-ls-caps);
    line-height: 1.35;
    color: var(--bzf-ink-soft);
    white-space: normal;
}

/* The white-out was written for the red wipe that is no longer there. */
.sernboxlist .innerbox:hover p,
.sernboxlist .innerbox.active p {
    color: var(--bzf-red);
}

.sernboxlist .innerbox:hover img {
    filter: none;
}

.sernboxlist .innerbox .new_servc {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    opacity: .7;
    transition: opacity var(--bzf-dur) var(--bzf-ease);
}

.sernboxlist .innerbox:hover .new_servc,
.sernboxlist .innerbox.active .new_servc {
    opacity: 1;
}

/* --- 34c  The indicator pair  (.ltrconsl) --------------------------------- *
   A column of claims on the left, the panel they open on the right. It runs
   on six pages and looked different on three of them: plain right-aligned
   text with a #cacaca hairline generically, bordered grey boxes on the
   security and BI pages. One treatment now -- glass rows, the live one
   marked in red -- written at .bg_bc weight so it reaches the two pages that
   had their own.
   ---------------------------------------------------------------------------- */
/* newstyles.css:339 gives the <ol> height:100% and :340 gives every <li>
   flex:1, so the column was slaved to the panel beside it -- three labels
   stretched to share 633px between them, which is where the empty boxes on
   the left came from. They are cards the size of their own text now. */
.bg_bc .ltrconsl .carousel-indicators {
    gap: 10px;
    padding: 0;
    height: auto;
    justify-content: flex-start;
}

.bg_bc .ltrconsl .carousel-indicators li {
    flex: 0 0 auto;
    align-items: flex-start;
    /* newstyles.css:340 sets justify-content:flex-end on these, which is what
       held the labels against the right edge -- text-align alone cannot move
       them, the <li> is a flex container */
    justify-content: flex-start;
    text-align: left;
    position: relative;
    margin: 0;
    padding: 16px 18px 16px 22px;
    border: 1px solid var(--bzf-glass-l-brd);
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring);
    font-size: var(--bzf-fs-h6);
    font-weight: var(--bzf-w-medium);
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    color: var(--bzf-ink-soft);
    opacity: 1;
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease);
}

/* legacy separated them with a hairline; they are separate cards now */
.bg_bc .ltrconsl .carousel-indicators li:not(:last-child) {
    border-bottom: 1px solid var(--bzf-glass-l-brd);
    margin-bottom: 0;
}

.bg_bc .ltrconsl .carousel-indicators li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--bzf-red);
    transform: translateY(-50%);
    opacity: 1;
    transition: height var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .ltrconsl .carousel-indicators li:hover {
    border-color: var(--bzf-red-line);
    color: var(--bzf-ink);
}

.bg_bc .ltrconsl .carousel-indicators li.active {
    padding: 16px 18px 16px 22px;
    background: rgba(255, 255, 255, .94);
    border-color: var(--bzf-red-line);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .16), var(--bzf-lift-1);
    color: var(--bzf-red);
    font-weight: var(--bzf-w-bold);
}

.bg_bc .ltrconsl .carousel-indicators li.active::before {
    height: 62%;
}

.bg_bc .ltrconsl .carousel-indicators li h4 {
    margin: 0;
    font-size: var(--bzf-fs-h6) !important;
    font-weight: inherit;
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    color: inherit !important;
}

.bg_bc .ltrconsl .carousel-indicators li p {
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
    font-weight: var(--bzf-w-regular);
}

/* The panel. Legacy gave it a #ddaaaa border and a flat white fill; the BI
   and security pages painted it #ffeeee. */
.bg_bc .ltrconslcbox,
.bg_bc .security_page .ltrconslcbox,
.security_page .ltrconslcbox,
.bi_page .ltrconslcbox {
    padding: clamp(20px, 2.4vw, 32px);
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}


/* The panel was pinned -- 420px generically and 603px on the infrastructure
   page (newstyles.css:343 and :433) -- with its slide centred in whatever was
   left over. On the shortest slide, one paragraph and a small illustration,
   that is 200px of nothing above the picture and 150px below it. It sizes to
   its slide now. */
.bg_bc .ltrconslcbox {
    min-height: 0;
    gap: clamp(12px, 1.5vw, 20px);
}

/* The illustration was being stretched to the full width of the panel and
   then letterboxed inside 250px of it -- 924px wide to draw a 250px picture,
   and the rest of that band was the gap above the text. */
.bg_bc .ltrconslcbox .img {
    width: auto;
    max-width: min(100%, 340px);
    margin: 0 auto;
}

.bg_bc .ltrconslcbox .img img {
    width: 100%;
    max-height: 180px;
}

.bg_bc .ltrconslcbox .txt {
    width: 100%;
}

.bg_bc .ltrconslcbox h3 {
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    font-weight: var(--bzf-w-medium);
    letter-spacing: 0;
    color: var(--bzf-ink-soft) !important;
}

/* --- 34d  Capability rows  (.sdanddlist, .blogosec) ----------------------- *
   Two flavours of the same idea: a list of things Blaze has shipped. The
   first was a bare 2-up grid on #eee hairlines, the second a row of white
   boxes with a 2px drop shadow. Both become the pill the landing page's
   stack row uses.
   ---------------------------------------------------------------------------- */
.bg_bc .sdanddlist {
    gap: 8px;
}

.bg_bc .sdanddlist .blsbox {
    width: calc(50% - 4px);
    border: 1px solid var(--bzf-glass-l-brd);
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring);
    transition:
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .sdanddlist .blsbox:hover {
    border-color: var(--bzf-red-line);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .16), var(--bzf-lift-1);
}

.bg_bc .sdanddlist .blsbox > div {
    padding: 12px 14px;
    gap: 12px;
    font-size: var(--bzf-fs-sm);
    font-weight: var(--bzf-w-medium);
    letter-spacing: .02em;
    color: var(--bzf-ink);
}

/* the icon gets the red-tinted tile the MCP build cards use */
.bg_bc .sdanddlist .blsbox > div img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin-right: 0;
    padding: 6px;
    border-radius: 8px;
    background: var(--bzf-red-tint);
    box-shadow: inset 0 0 0 1px rgba(229, 37, 33, .14);
    object-fit: contain;
}

.bg_bc .blogosec .blsbox {
    padding: 14px 22px;
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring);
    font-size: var(--bzf-fs-sm);
    font-weight: var(--bzf-w-medium);
    letter-spacing: .02em;
    color: var(--bzf-ink);
}

/* inside the indicator panel legacy strips the box back to bare rows */
.bg_bc .ltrconslcbox .blogosec .blsbox {
    padding: 12px 14px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi);
}

.bg_bc .ltrconslcbox .blogosec .blsbox:not(:last-child) {
    margin-bottom: 10px;
}

/* --- 34e  Story cards  (.team_box.sucstory) ------------------------------- *
   The legacy card drew a second 1px red rectangle inset inside itself and
   hung the heading across it on a white plate -- a fieldset legend. Section
   18 had already given .team_box a glass body underneath, so the page was
   showing both. The inner rectangle goes and the heading becomes the same
   section heading the rest of the page uses.
   ---------------------------------------------------------------------------- */
.bg_bc .sucstory.team_box::before,
.bg_bc .sucstory.team_box::after,
.bg_bc .team_list:hover .sucstory.team_box::before,
.bg_bc .team_list:hover .sucstory.team_box::after {
    display: none;
}

.bg_bc .team_list .sucstory.team_box {
    padding: clamp(24px, 2.6vw, 40px);
    border-radius: var(--bzf-r);
}

.bg_bc .team_list:hover .sucstory.team_box {
    top: 0;
    left: 0;
}

.bg_bc .sucstory h3 {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 20px 0 0;
    background: none;
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
}

.bg_bc .sucstory h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--bzf-red);
}

.bg_bc .sucstory p {
    font-size: var(--bzf-fs-body) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
}

/* The partner logo strip at the foot of the story. */
.bg_bc .blclogo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(10, 35, 66, .08);
}

.bg_bc .blclogo img {
    height: 26px;
    width: auto;
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    box-sizing: content-box;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring);
    transition:
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .blclogo img:hover {
    border-color: var(--bzf-red-line);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .16), var(--bzf-lift-1);
}

/* --- 34f  Bar-marked lists  (.liststyles) --------------------------------- *
   The marker alternated #333 and red down the list, which read as an
   accident rather than a rhythm. One red bar for every item.
   ---------------------------------------------------------------------------- */
.bg_bc .liststyles li {
    padding-left: 18px;
    line-height: var(--bzf-lh-body);
    font-size: var(--bzf-fs-body);
    color: var(--bzf-ink-soft);
    margin-bottom: 8px;
}

.bg_bc .liststyles li::before,
.bg_bc .liststyles li:nth-child(even)::before {
    top: .55em;
    width: 3px;
    height: 14px;
    border-radius: 3px;
    background: var(--bzf-red);
}

.bg_bc .liststyles li b,
.bg_bc .liststyles li strong {
    color: var(--bzf-ink);
    font-weight: var(--bzf-w-bold);
}

.bg_bc .liststyles h6 {
    margin-bottom: 12px;
    font-size: var(--bzf-fs-h6) !important;
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
}

.bg_bc .liststyles p {
    font-size: var(--bzf-fs-body);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft);
}

/* --- 34g  Capability tiles  (.serBox) ------------------------------------- *
   These shipped as a 100px white disc with a two-tone ring that spun on
   hover, tinted orange by default and alternating red/black down the row --
   three colours that are not in the palette and one animation that does not
   appear anywhere else on the site. They become the MCP build card: a glass
   tile with the icon on a red-tinted square.
   ---------------------------------------------------------------------------- */
.bg_bc .serBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(22px, 2.2vw, 30px) 18px;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .serBox:hover {
    transform: translateY(-4px);
    border-color: var(--bzf-red-line);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .18),
        var(--bzf-lift-2);
}

.bg_bc .serBox .service-icon {
    width: 64px;
    height: 64px;
    margin: 0 0 16px;
    border-radius: var(--bzf-r-sm);
    background: var(--bzf-red-tint);
    box-shadow: inset 0 0 0 1px rgba(229, 37, 33, .16);
}

/* the spinning two-tone ring, in three off-palette colours */
.bg_bc .serBox .service-icon::before,
.bg_bc .serBox .service-icon::after,
.bg_bc .serBox:hover .service-icon::before,
.bg_bc .serBox:hover .service-icon::after,
.bg_bc .csicboxes .col-md-3:nth-child(even) .serBox.green .service-icon::before,
.bg_bc .csicboxes .col-md-3:nth-child(even) .serBox.green .service-icon::after {
    display: none;
}

.bg_bc .serBox:hover .service-icon {
    box-shadow: inset 0 0 0 1px rgba(229, 37, 33, .3);
}

.bg_bc .serBox .service-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.bg_bc .serBox .title,
.bg_bc .serBox.green .title,
.bg_bc .csicboxes .col-md-3:nth-child(even) .serBox.green .title {
    margin: 0;
    font-size: var(--bzf-fs-sm) !important;
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    line-height: var(--bzf-lh-heading);
    text-transform: uppercase;
    color: var(--bzf-ink) !important;
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .serBox:hover .title {
    color: var(--bzf-red) !important;
}

.bg_bc .serBox .description {
    margin-top: 10px;
    text-align: center;
    font-size: var(--bzf-fs-sm);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft);
}

/* The tile stays filled. These four icons are white glyphs on transparent --
   they were drawn for the red and black discs legacy put them on -- so a
   tinted tile would have shown four empty squares. */
.bg_bc .serBox .service-icon {
    background: linear-gradient(150deg, var(--bzf-red-bright) 0%, var(--bzf-red) 52%, var(--bzf-red-deep) 100%);
    box-shadow: var(--bzf-lift-red);
}

.bg_bc .serBox:hover .service-icon {
    box-shadow: var(--bzf-glow-red-soft), var(--bzf-lift-red);
}

.bg_bc .serBox .service-icon span {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.bg_bc .serBox .service-icon img {
    max-width: none;
    max-height: none;
}

/* --- 34h  The closing call  (.bwbhref) ------------------------------------ *
   The last block on eleven service pages, and until now the quietest thing
   on them: a photograph bleached to near-white with grey type on it. It is
   the page's one call to action, so it takes the landing page's statement
   band -- navy into Blaze Red over the same plate -- and the invitation
   stays a white glass card lifted off it.
   ---------------------------------------------------------------------------- */
.bwbhref .client_carousel.ent_solutn {
    background:
        linear-gradient(104deg, rgba(7, 29, 58, .95) 0%, rgba(229, 37, 33, .88) 50%, rgba(7, 29, 58, .9) 100%),
        url(../images/futura/band-light.webp) no-repeat center center / cover;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--bzf-lift-2);
}

.bwbhref .client_carousel.ent_solutn::before {
    background: radial-gradient(760px 340px at 12% 16%, rgba(255, 255, 255, .14), transparent 70%);
}

/* the lit seams, same as the homepage band */
.bwbhref .client_carousel.ent_solutn .carousel-inner::before,
.bwbhref .client_carousel.ent_solutn .carousel-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    box-shadow: 0 0 16px rgba(255, 255, 255, .45);
}

.bwbhref .client_carousel.ent_solutn .carousel-inner::before {
    top: 0;
}

.bwbhref .client_carousel.ent_solutn .carousel-inner::after {
    bottom: 0;
}

/* Section 18 remaps .text-white to ink wherever a ground turned light. This
   ground went the other way, so it is remapped back -- at .bwbhref weight so
   it reaches past that rule. */
.bwbhref .client_carousel.ent_solutn .text-white,
.bwbhref .client_desc,
.bwbhref .client_desc .apply_title,
.bwbhref .client_desc .apply_title strong {
    color: #FFFFFF !important;
}

.bwbhref .client_desc p.text-white {
    color: rgba(255, 255, 255, .82) !important;
}

.bwbhref .client_desc .apply_title {
    font-size: var(--bzf-fs-h2) !important;
    line-height: var(--bzf-lh-h2);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
}

.bwbhref .whitetrans.blaze_soln_trans {
    background: rgba(255, 255, 255, .9) !important;
    border-color: rgba(255, 255, 255, .95);
    box-shadow: var(--bzf-glass-l-hi), var(--bzf-lift-3);
}

.bwbhref .client_carousel .carousel-item:hover .whitetrans.blaze_soln_trans,
.bwbhref .whitetrans.blaze_soln_trans:hover {
    background: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 1);
}

/* legacy paints the plate charcoal on hover, which took the red wordmark
   with it */
.bwbhref .blaze_soln_trans:hover p,
.bwbhref .blaze_soln_trans .lets_click {
    color: var(--bzf-ink-soft) !important;
}

.bwbhref .blaze_soln_trans .outlinetxt,
.bwbhref .blaze_soln_trans .outlinetxt .h1 {
    font-size: clamp(26px, 2.6vw, 38px) !important;
}

/* --- 34i  Logo grids  (.logolists) ---------------------------------------- *
   The tech-stack sheets on five pages. Each cell carried three stacked
   shadows, the heaviest of them a 40%-black spread, which is what made the
   grids read as a field of grey chips.
   ---------------------------------------------------------------------------- */
.bg_bc .logolists ul {
    gap: 12px;
    margin: 0;
    padding: 0;
}

.bg_bc .logolists li {
    width: 150px;
    height: 76px;
    margin: 0;
    padding: 14px;
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .logolists li:hover {
    transform: translateY(-3px) !important;
    border-color: var(--bzf-red-line);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .16),
        var(--bzf-lift-2);
}

/* --- 34j  Vertical tab rail  (.resp-vtabs) -------------------------------- *
   The techstack and MSP category rail. Same idiom as the service rail.
   ---------------------------------------------------------------------------- */
.bg_bc .resp-vtabs ul.resp-tabs-list {
    padding: 8px;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

.bg_bc .resp-vtabs .resp-tabs-list li {
    position: relative;
    margin: 0;
    padding: 14px 16px 14px 20px;
    border: 0;
    border-radius: var(--bzf-r-sm);
    background: transparent;
    font-size: var(--bzf-fs-sm);
    font-weight: var(--bzf-w-medium);
    letter-spacing: var(--bzf-ls-caps);
    line-height: var(--bzf-lh-ui);
    color: var(--bzf-ink-soft);
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .resp-vtabs .resp-tabs-list li:not(:last-child) {
    border-bottom: 1px solid rgba(10, 35, 66, .07);
}

.bg_bc .resp-vtabs li.resp-tab-active,
.bg_bc .resp-vtabs .resp-tabs-list li:hover {
    background: var(--bzf-red-tint);
    color: var(--bzf-red);
    border-color: rgba(10, 35, 66, .07);
}

.bg_bc .resp-vtabs .resp-tabs-list li::after {
    left: 0;
    right: auto;
    top: 50%;
    width: 3px;
    height: 0;
    margin: 0;
    border: 0;
    border-radius: 3px;
    background: var(--bzf-red);
    transform: translateY(-50%);
    opacity: 1;
    transition: height var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .resp-vtabs .resp-tabs-list li:hover::after,
.bg_bc .resp-vtabs .resp-tabs-list li.resp-tab-active::after {
    width: 3px;
    height: 58%;
    background: var(--bzf-red);
}

.bg_bc .resp-vtabs .resp-tabs-container {
    border: 0;
    background: none;
}

/* --- 34k  Section openers ------------------------------------------------- *
   An explicit list rather than a blanket rule on h2/h3/h4: the inner pages
   use bare heading tags for card titles as well as for section starts, so
   sizing them by tag would blow up every card on the site. These are the
   headings that actually open a section, and they all now carry the same
   scale and the same 56x3 red rule.
   ---------------------------------------------------------------------------- */
.bg_bc .blaze_soln > h6.apply_title,
.bg_bc .ltrconsl h4,
.bg_bc .latest_news > h2,
.bg_bc .htd > h2,
.bg_bc h3.mt-0.mb-5,
.bg_bc h3.my-5 {
    position: relative;
    margin: 0 0 22px;
    padding-top: 20px;
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3) !important;
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
    text-transform: none;
}

.bg_bc .blaze_soln > h6.apply_title::before,
.bg_bc .ltrconsl h4::before,
.bg_bc .latest_news > h2::before,
.bg_bc .htd > h2::before,
.bg_bc h3.mt-0.mb-5::before,
.bg_bc h3.my-5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--bzf-red);
}

/* the centred ones keep their rule centred with them */
.bg_bc h3.mt-0.mb-5.text-center::before,
.bg_bc h3.my-5.text-center::before {
    left: 50%;
    transform: translateX(-50%);
}

.bg_bc .latest_news > h2 span,
.bg_bc .htd > h2 span,
.bg_bc h3.mt-0.mb-5 span,
.bg_bc h3.my-5 span,
.bg_bc .blaze_soln > h6.apply_title span {
    color: var(--bzf-red) !important;
}

/* --- 34l  The news reel  (.latest_news) ----------------------------------- *
   The same block the homepage runs, in its stripped-down inner-page form:
   a #ddaaaa box with charcoal category chips and a fade to #f9fafb that did
   not match anything around it.
   ---------------------------------------------------------------------------- */
.bg_bc .swiper-container {
    padding: 22px;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

/* the teaser fade, re-pointed at the material actually behind it */
.bg_bc .swiper-container::after {
    background: linear-gradient(to bottom, rgba(248, 251, 253, 0) 0, rgba(249, 251, 253, .96) 100%);
}

.bg_bc .swiper-slide .items {
    padding: 16px 18px;
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring);
    transition:
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .swiper-slide .items:hover {
    border-color: var(--bzf-red-line);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px rgba(229, 37, 33, .16), var(--bzf-lift-1);
}

.bg_bc .swiper-slide .items h2 {
    font-size: var(--bzf-fs-h6) !important;
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
    margin-bottom: 8px;
}

.bg_bc .swiper-slide .items span {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bzf-red-tint);
    box-shadow: inset 0 0 0 1px rgba(229, 37, 33, .18);
    font-size: var(--bzf-fs-label);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-label);
    color: var(--bzf-red);
}

.bg_bc .swiper-slide .items p {
    margin: 10px 0 0;
    font-size: var(--bzf-fs-sm);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft);
}

/* the keyframe that lands the incoming slide painted it #ffeeee */
@keyframes sk-bounce {

    0% {
        transform: scale(0);
        opacity: .5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* the rail reads left-to-right like every other list on the site; legacy
   right-aligned it against a 1px #333 rule that is no longer drawn */
.bg_bc .resp-vtabs .resp-tabs-list li {
    text-align: left;
}

.bg_bc .resp-vtabs .resp-tabs-container {
    padding-left: clamp(16px, 2vw, 32px);
}

/* --- 34m  The stepped panel  (.creative-tab) ------------------------------ *
   The CRM and security pages both drive a panel from a column of steps. The
   inactive steps were red at .3 opacity, which reads as a broken link rather
   than a step you have not opened yet, and the marker was a 3px red bar
   drawn 80px taller than its own row.
   ---------------------------------------------------------------------------- */
.bg_bc .creative-tab .tabs__caption li a {
    display: block;
    position: relative;
    padding: 16px 18px 16px 22px;
    border-radius: var(--bzf-r-sm);
    background: transparent;
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .creative-tab .tabs__caption li a:hover {
    background: rgba(255, 255, 255, .7);
}

.bg_bc .creative-tab .tabs__caption li a.active {
    background: rgba(255, 255, 255, .92);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

/* the over-long bar becomes the row's own marker */
.bg_bc .creative-tab .tabs__caption li a::before,
.bg_bc .crm_page .creative-tab .tabs__caption li a::before,
.crm_page .creative-tab .tabs__caption li a::before {
    left: 0;
    top: 50%;
    height: 58%;
    width: 3px;
    border-radius: 3px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .creative-tab .tabs__caption li a.active::before {
    opacity: 1;
}

/* .3 opacity on red is the same value as light grey, so a step that is not
   open reads as broken. Ink at rest, red when it is the one you are on. */
.bg_bc .creative-tab .tabs__caption_title,
.bg_bc .crm_page .creative-tab .tabs__caption_title {
    margin: 0;
    opacity: 1;
    font-size: var(--bzf-fs-h5) !important;
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-medium);
    color: var(--bzf-ink-soft) !important;
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .creative-tab .tabs__caption li a:hover .tabs__caption_title {
    color: var(--bzf-ink) !important;
}

.bg_bc .creative-tab .tabs__caption li a.active .tabs__caption_title,
.bg_bc .crm_page .creative-tab .tabs__caption li a.active .tabs__caption_title {
    opacity: 1;
    font-size: var(--bzf-fs-h5) !important;
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-red) !important;
}

.bg_bc .creative-tab .tabs__caption_description {
    font-size: var(--bzf-fs-sm) !important;
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft) !important;
}

/* --- 34n  The audit diagram  (.marketecture-sheme-desktop) ---------------- *
   Charcoal #333 header plates, one of them carrying a green gradient left
   over from whatever this was drawn for, over a 37px-offset 100px black
   shadow. It is a console diagram, so it gets the console: the same navy the
   MCP configuration panels use, with the one centre plate in Blaze Red.
   ---------------------------------------------------------------------------- */
.bg_bc .marketecture-desktop-item {
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    overflow: visible;
}

.bg_bc .marketecture-desktop-item__header {
    padding: 14px 18px;
    border-radius: var(--bzf-r) var(--bzf-r) 0 0;
    background: var(--bzf-metal);
    background-color: transparent;
    box-shadow: inset 0 1px 0 rgba(190, 214, 240, .14);
    font-family: var(--bzf-font);
    font-size: var(--bzf-fs-h6);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-heading);
    color: #FFFFFF;
}

.bg_bc .marketecture-sheme-desktop__main .top-header-item,
.bg_bc .marketecture-sheme-desktop__main .top-header-item .marketecture-desktop-item__header {
    border-radius: var(--bzf-r);
}

.bg_bc .marketecture-sheme-desktop__main .main-header-item {
    border-radius: var(--bzf-r);
    background-image: none;
    background-color: transparent;
    background: linear-gradient(122deg, var(--bzf-red-deep) 0%, var(--bzf-red) 48%, var(--bzf-red-bright) 100%);
    box-shadow: var(--bzf-lift-red), var(--bzf-lift-1);
}

.bg_bc .marketecture-sheme-desktop__main .main-header-item .marketecture-desktop-item__header {
    background: none;
    background-color: transparent;
    box-shadow: none;
}

.bg_bc .marketecture-sheme-desktop .border {
    border: 1px solid var(--bzf-red-line) !important;
}

.bg_bc ul.marketecture-desktop-item__body {
    padding-block: 16px;
    padding-inline: 12px;
    border-radius: 0 0 var(--bzf-r) var(--bzf-r);
}

.bg_bc .marketecture-desktop-item li a {
    font-size: var(--bzf-fs-sm);
    font-weight: var(--bzf-w-medium);
    letter-spacing: .02em;
    color: var(--bzf-ink);
}

.bg_bc .marketecture-desktop-item li a:hover {
    background: var(--bzf-red-tint);
    color: var(--bzf-red);
}

.bg_bc .marketecture-desktop-item__popup_wrapper {
    padding: 14px 16px;
    border-radius: var(--bzf-r-sm);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: var(--bzf-glass-l-hi), 0 0 0 1px var(--bzf-glass-l-ring), var(--bzf-lift-2);
}

.bg_bc .marketecture-desktop-item__popup_wrapper > p:first-child {
    font: var(--bzf-w-bold) var(--bzf-fs-sm) / var(--bzf-lh-heading) var(--bzf-font);
    color: var(--bzf-red);
}

.bg_bc .marketecture-desktop-item__popup_wrapper > p:last-child {
    font-size: var(--bzf-fs-xs);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft);
}

/* the one plate that stays red needs its type back */
.bg_bc .marketecture-sheme-desktop__main .main-header-item,
.bg_bc .marketecture-sheme-desktop__main .main-header-item p,
.bg_bc .marketecture-sheme-desktop__main .main-header-item .marketecture-desktop-item__header {
    color: #FFFFFF !important;
}

/* --- 34o  Icon grids  (.icontxts) ----------------------------------------- *
   Thirteen products on the security page and two grids on the MSP page, all
   set as bare icon-over-label with nothing holding them. The tile is drawn
   as a ::before rather than on the item itself, so the flex percentages the
   two pages already tune stay exactly as they are.
   The homepage's own .libox grid is excluded -- it has its own treatment.
   ---------------------------------------------------------------------------- */
.bg_bc .icontxts:not(.libox) > li {
    position: relative;
    z-index: 0;
    padding: 24px 16px 20px;
    margin-bottom: 18px;
    font-size: var(--bzf-fs-xs);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    line-height: var(--bzf-lh-ui);
    color: var(--bzf-ink);
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .icontxts:not(.libox) > li::before {
    content: "";
    position: absolute;
    inset: 0 9px;
    z-index: -1;
    border-radius: var(--bzf-r);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    transition:
        border-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .icontxts:not(.libox) > li:hover {
    color: var(--bzf-red);
}

.bg_bc .icontxts:not(.libox) > li:hover::before {
    border-color: var(--bzf-red-line);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .16),
        var(--bzf-lift-2);
}

.bg_bc .icontxts:not(.libox) > li img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin: 0 0 14px;
}

/* --- 34p  Plain accordion  (.accordion-item) ------------------------------ *
   Section 18 gave the shell its glass; the head and body were still on
   #fdfdfd and #ffeeee.
   ---------------------------------------------------------------------------- */
.bg_bc .accordion {
    margin: clamp(40px, 5vw, 80px) 0 0;
    overflow: visible;
}

.bg_bc .accordion .accordion-item {
    margin-bottom: 10px;
    border: 1px solid var(--bzf-glass-l-brd);
    border-radius: var(--bzf-r-sm);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
    overflow: hidden;
}

.bg_bc .accordion .accordion-item:hover {
    background: var(--bzf-glass-l-bg);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px rgba(229, 37, 33, .16),
        var(--bzf-lift-2);
}

.bg_bc .accordion .accordion-header {
    padding: 18px 22px;
    background: none;
    background-color: transparent;
    font-family: var(--bzf-font);
    font-size: var(--bzf-fs-h6);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-heading);
    color: var(--bzf-ink);
    transition: color var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .accordion .accordion-header:hover,
.bg_bc .accordion .accordion-header.active {
    background-color: transparent;
    color: var(--bzf-red);
}

.bg_bc .accordion .accordion-header::after {
    font-weight: var(--bzf-w-light);
    color: var(--bzf-red);
}

.bg_bc .accordion .accordion-content {
    padding: 0 22px;
    background: transparent;
}

.bg_bc .accordion .accordion-content p {
    font-size: var(--bzf-fs-sm);
    line-height: var(--bzf-lh-body);
    color: var(--bzf-ink-soft);
}

/* the panel behind the step image was a flat #ffeeee wash */
.bg_bc .creative-tab {
    padding: clamp(24px, 3vw, 44px);
    border-radius: var(--bzf-r-lg);
    background: var(--bzf-glass-l-bg);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow:
        var(--bzf-glass-l-hi),
        0 0 0 1px var(--bzf-glass-l-ring),
        var(--bzf-lift-1);
}

.bg_bc .creative-tab__right {
    border-radius: var(--bzf-r);
    background: linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(244, 247, 250, .8) 100%);
    border: 1px solid var(--bzf-glass-l-brd);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px var(--bzf-glass-l-ring);
}

/* --- 34q  Autoscaling load banner  (.ani_banner) -------------------------- */
.bg_bc .ani_banner {
    padding: clamp(24px, 3vw, 46px);
    border-radius: var(--bzf-r-lg);
    background:
        radial-gradient(circle at 28% 20%, rgba(34, 211, 238, .16), transparent 30%),
        linear-gradient(145deg, #090d14 0%, #121821 58%, #090d14 100%);
    -webkit-backdrop-filter: var(--bzf-blur);
    backdrop-filter: var(--bzf-blur);
    border: 1px solid rgba(150, 186, 228, .18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 0 1px rgba(229, 37, 33, .16),
        var(--bzf-lift-1);
    gap: clamp(18px, 3vw, 34px);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.bg_bc .ani_banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.bg_bc .ani_banner .image_section,
.bg_bc .ani_banner .box_section {
    min-height: clamp(320px, 38vw, 500px);
    max-height: none;
    border-radius: var(--bzf-r);
    position: relative;
    overflow: hidden;
}

.bg_bc .ani_banner .box_section {
    width: min(42%, 420px);
    min-width: min(100%, 300px);
    max-width: 42%;
    padding: clamp(18px, 2vw, 26px);
    background:
        radial-gradient(circle at 50% 12%, rgba(229, 37, 33, .15), transparent 36%),
        rgba(6, 11, 18, .78);
    border: 1px solid rgba(150, 186, 228, .18);
    box-shadow: inset 0 1px 0 rgba(190, 214, 240, .12), 0 22px 60px rgba(0, 0, 0, .24);
}

.bg_bc .ani_banner .image_section {
    width: 58%;
    background:
        radial-gradient(circle at 76% 50%, rgba(34, 211, 238, .14), transparent 24%),
        rgba(6, 11, 18, .54);
    border: 1px solid rgba(150, 186, 228, .14);
}

.bg_bc .bzf-load-stage,
.bg_bc .bzf-server-fabric {
    position: absolute;
    inset: 0;
}

.bg_bc .bzf-flow-spine {
    position: absolute;
    top: 50%;
    right: 8%;
    width: 46%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .28), rgba(229, 37, 33, .5));
    transform: translateY(-50%);
}

.bg_bc .bzf-tap-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 18%, rgba(34, 211, 238, .45) 19% 40%, rgba(34, 211, 238, .08) 41% 100%);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .28), 0 0 28px rgba(34, 211, 238, .24);
    animation: bzf-tap-pulse 1.45s ease-out var(--delay) infinite;
}

.bg_bc .bzf-request-dot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 14px rgba(34, 211, 238, .82);
    opacity: 0;
    animation: bzf-request-flow 1.45s cubic-bezier(.2, .85, .2, 1) var(--delay) infinite;
}

.bg_bc .bzf-request-dot[style*="--server: 1"],
.bg_bc .bzf-request-dot[style*="--server: 3"] {
    background: #e52521;
    box-shadow: 0 0 14px rgba(229, 37, 33, .78);
}

.bg_bc .bzf-load-gateway {
    position: absolute;
    top: 50%;
    right: 8%;
    width: clamp(70px, 11vw, 116px);
    aspect-ratio: 1;
    border-radius: 28% 50% 32% 50%;
    border: 1px solid rgba(34, 211, 238, .32);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(229, 37, 33, .12)),
        rgba(12, 21, 32, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 40px rgba(34, 211, 238, calc(.12 + var(--load-ratio, .2) * .35));
    transform: translateY(-50%) rotate(45deg);
}

.bg_bc .bzf-load-gateway::before,
.bg_bc .bzf-load-gateway::after {
    content: "";
    position: absolute;
    inset: 22%;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 34%;
}

.bg_bc .bzf-load-gateway::after {
    inset: 39%;
    background: rgba(34, 211, 238, .8);
    box-shadow: 0 0 22px rgba(34, 211, 238, .8);
}

.bg_bc .bzf-server-fabric {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    align-content: center;
    gap: 14px;
    padding: clamp(20px, 3vw, 34px);
}

.bg_bc .bzf-server-pod {
    min-height: clamp(128px, 14vw, 178px);
    border-radius: 18px 18px 24px 24px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 34%),
        linear-gradient(180deg, rgba(19, 31, 45, .94), rgba(7, 12, 20, .98));
    border: 1px solid rgba(150, 186, 228, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 34px rgba(0, 0, 0, .22);
    animation: bzf-server-arrive .42s cubic-bezier(.2, .85, .2, 1) var(--delay) both;
}

.bg_bc .bzf-server-core {
    position: absolute;
    inset: 18px 18px auto;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(34, 211, 238, .2), rgba(229, 37, 33, .18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.bg_bc .bzf-server-meter {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.bg_bc .bzf-server-meter::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--level);
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #e52521);
    box-shadow: 0 0 14px rgba(34, 211, 238, .48);
}

.bg_bc .bzf-server-lines {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 82px;
    display: grid;
    gap: 10px;
}

.bg_bc .bzf-server-lines i {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: rgba(150, 186, 228, .28);
}

.bg_bc .bzf-server-stream {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, .75);
    animation: bzf-server-stream 1.3s ease-in var(--delay) infinite;
}

@keyframes bzf-tap-pulse {
    0%, 100% { transform: scale(.82); opacity: .56; }
    48% { transform: scale(1.14); opacity: 1; }
}

@keyframes bzf-request-flow {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.65); }
    12% { opacity: .95; }
    84% { opacity: .95; }
    100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
}

@keyframes bzf-server-arrive {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to { opacity: 1; transform: none; }
}

@keyframes bzf-server-stream {
    0% { opacity: 0; transform: translate(-50%, 0); }
    18% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, 150px); }
}

@media (max-width: 767px) {
    .bg_bc .ani_banner {
        flex-direction: column;
    }

    .bg_bc .ani_banner .image_section,
    .bg_bc .ani_banner .box_section {
        width: 100%;
        max-width: 100%;
        min-height: 300px;
    }

    .bg_bc .bzf-server-fabric {
        grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
        padding: 18px;
    }

    .bg_bc .bzf-server-pod {
        min-height: 124px;
    }
}

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

    .bg_bc .bzf-tap-node,
    .bg_bc .bzf-request-dot,
    .bg_bc .bzf-server-pod,
    .bg_bc .bzf-server-stream {
        animation: none;
    }
}

/* --- 34r  The claim slab  (.pw_box) --------------------------------------- */
.bg_bc .pw_box {
    padding: clamp(28px, 3vw, 48px);
    border-radius: var(--bzf-r-lg);
    background: linear-gradient(122deg, var(--bzf-red-deep) 0%, var(--bzf-red) 46%, var(--bzf-red-bright) 100%);
    box-shadow: var(--bzf-lift-red), var(--bzf-lift-1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.bg_bc .pw_box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(460px 260px at 84% 16%, rgba(255, 255, 255, .18), transparent 70%),
        linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
}

.bg_bc .pw_box h2 {
    margin: 0;
    font-size: var(--bzf-fs-h3) !important;
    line-height: var(--bzf-lh-h3);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: #FFFFFF !important;
}

.bg_bc .env_part h4 {
    position: relative;
    margin: 0 0 18px;
    padding-top: 20px;
    font-size: var(--bzf-fs-h4) !important;
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
    font-weight: var(--bzf-w-bold);
    color: var(--bzf-ink) !important;
}

.bg_bc .env_part h4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--bzf-red);
}

/* --- 34s  Below 992 -------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* the rail turns into a horizontal scroller at this width, so the panel
       and the row hairlines both have to turn with it */
    .sernboxlist {
        padding: 6px;
        gap: 4px;
    }

    .sernboxlist .innerbox:not(:last-child) {
        border-bottom: 0;
        border-right: 1px solid rgba(10, 35, 66, .07);
    }

    .sernboxlist .innerbox::before,
    .sernboxlist .innerbox:hover::before,
    .sernboxlist .innerbox.active::before {
        left: 50%;
        top: auto;
        bottom: 0;
        width: 0;
        height: 3px;
        transform: translateX(-50%);
        transition: width var(--bzf-dur) var(--bzf-ease);
    }

    .sernboxlist .innerbox:hover::before,
    .sernboxlist .innerbox.active::before {
        width: 62%;
        height: 3px;
    }

    .sernboxlist.sticky-top {
        top: auto;
    }

    .bg_bc .ltrconsl .carousel-indicators {
        margin-bottom: 20px;
    }

    .bg_bc .icontxts:not(.libox) > li img {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 767.98px) {

    .bg_bc .sdanddlist .blsbox {
        width: 100%;
    }

    .bg_bc .logolists li {
        width: calc(50% - 6px);
        height: 68px;
    }

    .bg_bc .creative-tab {
        flex-direction: column;
        align-items: stretch;
    }

    .bg_bc .resp-vtabs .resp-tabs-container {
        padding-left: 0;
    }
}

/* The card's own heading, not every h3 inside it. The services page nests a
   second h3 in the body of the same card, and an unscoped rule drew the
   section mark twice. */
.bg_bc .sucstory h3::before {
    content: none;
}

.bg_bc .sucstory > h3 {
    position: relative;
}

.bg_bc .sucstory > h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--bzf-red);
}

/* --- 34t  The services listing tiles  (.serviceboxlist) ------------------- *
   Each icon sat inside a 250px black hexagon frame drawn as a background
   image, with a red hexagon swapped in on hover. Seven black hexagons is the
   heaviest thing on a page that is otherwise all white glass, and the icons
   inside them are line art that reads perfectly well on the tile the rest of
   section 34 uses. The frame goes; the red arrives on hover as a tint.
   ---------------------------------------------------------------------------- */
.bg_bc .serviceboxlist .innerbox .new_servc,
.bg_bc .serviceboxlist .innerbox:hover .new_servc,
.bg_bc .serviceboxlist .innerbox:hover .sn1,
.bg_bc .serviceboxlist .innerbox:hover .sn2,
.bg_bc .serviceboxlist .innerbox:hover .sn3 {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    background-image: none;
    background-color: var(--bzf-red-tint);
    border-radius: var(--bzf-r);
    box-shadow: inset 0 0 0 1px rgba(229, 37, 33, .14);
    transition:
        background-color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bg_bc .serviceboxlist .innerbox:hover .new_servc {
    background-color: rgba(229, 37, 33, .12);
    box-shadow: inset 0 0 0 1px rgba(229, 37, 33, .28);
}

.bg_bc .serviceboxlist .innerbox .new_servc img {
    width: 52px;
    height: 52px;
    max-width: 52px;
    object-fit: contain;
}

.bg_bc .serviceboxlist .innerbox {
    width: 220px;
    min-height: 0;
    padding: 26px 18px 24px;
    margin: 0;
}

.bg_bc .serviceboxlist {
    gap: 18px;
}

.bg_bc .serviceboxlist .innerbox p {
    margin-top: 18px;
    font-size: var(--bzf-fs-xs);
    letter-spacing: var(--bzf-ls-caps);
    line-height: var(--bzf-lh-ui);
}

/* Below 992 legacy un-hides the panel's first heading as a section label. It
   arrived as #cf0000 on #ffe5e5, which is the only place on the site a
   heading is set in a red plate. It becomes the eyebrow. */
@media (max-width: 991.98px) {

    .bg_bc .carousel-item .ltrconslcbox > h3:nth-child(1) {
        margin-bottom: 18px;
        padding: 0 0 12px;
        border-bottom: 1px solid rgba(10, 35, 66, .08);
        border-radius: 0;
        background: none;
        font-size: var(--bzf-fs-label) !important;
        font-weight: var(--bzf-w-bold);
        letter-spacing: var(--bzf-ls-label);
        line-height: var(--bzf-lh-ui);
        text-transform: uppercase;
        color: var(--bzf-red) !important;
    }
}

/* The BI and security rails put an <h4> inside each indicator, which the
   section-opener rule above also matches. The row already carries its own
   marker bar, so the heading does not take a second one. */
.bg_bc .ltrconsl .carousel-indicators h4::before {
    content: none;
}

/* The label plate on a service card is absolutely positioned and sized by
   its own text, so on the narrow cards in a 9/3 split it ran past the card
   edge and clipped. It is now bounded by the card. */
.bg_bc .servicebox .sertxt {
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 14px;
    max-width: calc(100% - 28px);
    padding: 16px 18px;
}

.bg_bc .servicebox .sertxt h5 {
    /* Not the h6 step: the narrowest of these cards is 158px wide -- a
       legacy width, unchanged here -- and "HYPERLEDGER" does not fit it at
       19px. This is the label size the other card systems use. */
    font-size: clamp(13px, 1.1vw, 17px);
    line-height: var(--bzf-lh-heading);
    letter-spacing: var(--bzf-ls-heading);
}

.bg_bc .servicebox .sertxt p {
    font-size: var(--bzf-fs-xs);
    margin-top: 6px;
}

/* a card in a 3-wide column is about 110px across, and "HYPERLEDGER" is
   wider than that */
.bg_bc .servicebox .sertxt h5 {
    overflow-wrap: break-word;
    word-break: normal;
}


/* ==========================================================================
   34r  SWITCHERS UNPACKED — STACKED SECTIONS + STICKY SECTION RAIL

   blaze-futura.js turns the two switcher components (.ltrconsl and
   .creative-tab) into plain stacked sections and builds a rail that reaches
   them. The markup it produces is styled here; the legacy rules those
   components brought with them are unwound at the same time, because both
   roots keep their class names and several of their rules would otherwise
   still land on nodes that have moved.
   ========================================================================== */

/* --- the root, now a plain wrapper -------------------------------------- */
/* newstyles.css:737 makes .creative-tab a centred flex row with a card of
   its own -- padding, radius, shadow, a 30px gap. It has one child now and
   the sections inside carry their own surface. */
.bg_bc .bzf-unstacked {
    display: block !important;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    aspect-ratio: auto;
}

.bg_bc .bzf-secs {
    display: grid;
    gap: clamp(30px, 3.8vw, 56px);
}

.bg_bc .bzf-sec {
    /* the rail parks itself over the top of the page, so an anchor has to
       clear the header AND the rail; --bzf-subnav-h is set by the script
       and is 0px whenever the rail is down */
    scroll-margin-top: calc(var(--bzf-header-h) + var(--bzf-subnav-h, 0px) + 24px);
}

/* --- the heading -------------------------------------------------------- */
.bg_bc .bzf-sec__head {
    position: relative;
    padding-left: 18px;
    margin-bottom: clamp(12px, 1.4vw, 18px);
}

.bg_bc .bzf-sec__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: .26em;
    bottom: .26em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bzf-red-bright), var(--bzf-red-deep));
}

/* newstyles.css:749 dims every .tabs__caption_title to opacity .3 and only
   the open one back to 1 — the state that used to mean "not the tab you are
   reading". There is no closed one any more. */
.bg_bc .bzf-sec__title {
    margin: 0 !important;
    font-size: clamp(21px, 2.2vw, 29px) !important;
    line-height: var(--bzf-lh-h3);
    font-weight: var(--bzf-w-bold) !important;
    letter-spacing: var(--bzf-ls-heading);
    color: var(--bzf-ink) !important;
    opacity: 1 !important;
}

/* --- lead and body ------------------------------------------------------ */
/* newstyles.css:750 collapses the description with grid-template-rows: 0fr
   and opens it on .active. Nothing is collapsed now. */
.bg_bc .bzf-sec .tabs__caption_content,
.bg_bc .bzf-sec .tabs__caption_description {
    display: block !important;
    grid-template-rows: none !important;
    overflow: visible !important;
    min-height: 0;
    width: 100%;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    height: auto;
    padding: 0;
}

.bg_bc .bzf-sec__lead > :last-child {
    margin-bottom: 0;
}

.bg_bc .bzf-sec__lead p {
    color: var(--bzf-ink-soft);
    margin-bottom: .9em;
}

/* /one carries a product mark in the label beside the name */
.bg_bc .bzf-sec__lead > img {
    max-width: 132px;
    height: auto;
    margin-bottom: 14px;
}

.bg_bc .bzf-sec__body img {
    max-width: 100%;
    height: auto;
}

/* The .creative-tab panel was a tinted plate behind the screenshot
   (newstyles.css:741). Keep the plate; it is what separates a product shot
   from the page. */
.bg_bc .creative-tab .bzf-sec__body {
    padding: clamp(14px, 1.8vw, 26px);
    border-radius: var(--bzf-r);
    background: linear-gradient(347deg, #FFF5F5 0%, #FFEEEE 58%);
    box-shadow: inset 0 4px 15px 0 rgba(18, 17, 133, .04);
}

.bg_bc .creative-tab .bzf-sec__body img {
    display: block;
    margin: 0 auto;
    max-height: 460px;
    object-fit: contain;
    padding: 0;
}

/* newstyles.css:743 stacks the panes absolutely on top of one another and
   translates the closed ones out of frame. They are siblings in flow now. */
.bg_bc .bzf-sec .tabs__content,
.bg_bc .bzf-sec .tabs__caption_content {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
}

/* --- two columns where there is text beside the media -------------------- */
/* Only sections that kept a lead: on infrastructure and app-development the
   label was a bare word and there is nothing to set beside the picture. */
@media (min-width: 992px) {
    .bg_bc .bzf-sec.has-lead {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
        /* The media spans both text rows, so it is the media that sets the
           height. With two auto rows each item centres inside its own share
           of that height and the heading drifts away from the copy it
           belongs to -- an empty row top and bottom keeps the pair together
           and centres them as one block instead. */
        grid-template-rows: 1fr auto auto 1fr;
        column-gap: clamp(26px, 3vw, 50px);
        align-items: start;
    }

    .bg_bc .bzf-sec.has-lead > .bzf-sec__head {
        grid-column: 1;
        grid-row: 2;
    }

    .bg_bc .bzf-sec.has-lead > .bzf-sec__lead {
        grid-column: 1;
        grid-row: 3;
    }

    .bg_bc .bzf-sec.has-lead > .bzf-sec__body {
        grid-column: 2;
        grid-row: 1 / -1;
        margin: 0;
    }
}

/* ==========================================================================
   34s  THE STICKY SECTION RAIL

   Injected once by blaze-futura.js on any inner page whose switcher was
   unpacked. It rides under the header (z-index 99) and under the mega-menu
   scrim (90), so opening the menu blurs it along with the rest of the page.
   ========================================================================== */
.bzf-subnav {
    position: fixed;
    top: calc(var(--bzf-header-h) + 6px);
    left: 50%;
    z-index: 88;
    width: min(var(--bzf-container, 1140px), calc(100vw - 30px));
    transform: translate(-50%, -180%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--bzf-dur) var(--bzf-ease),
        opacity var(--bzf-dur) var(--bzf-ease);
}

.bzf-subnav.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.bzf-subnav__strip {
    display: flex;
    gap: 6px;
    padding: 7px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    border-radius: 15px;
    /* the page behind this is white, and --bzf-glass-l-bg alone leans on a
       backdrop-filter that not every browser here will run. Give it a solid
       ground first so the rail reads as a bar either way. */
    background:
        var(--bzf-glass-l-bg),
        rgba(255, 255, 255, .94);
    border: 1px solid var(--bzf-gray-line);
    -webkit-backdrop-filter: saturate(140%) var(--bzf-blur);
    backdrop-filter: saturate(140%) var(--bzf-blur);
    box-shadow:
        0 0 0 1px var(--bzf-glass-l-ring),
        inset 0 1px 0 var(--bzf-glass-l-hi),
        var(--bzf-lift-2);
}

.bzf-subnav__strip::-webkit-scrollbar {
    display: none;
}

.bzf-subnav__link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 230px;
    padding: 8px 15px;
    border-radius: 10px;
    font-family: var(--bzf-font);
    font-size: var(--bzf-fs-sm);
    font-weight: var(--bzf-w-medium);
    line-height: var(--bzf-lh-ui);
    letter-spacing: var(--bzf-ls-ui);
    color: var(--bzf-ink-soft);
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        color var(--bzf-dur) var(--bzf-ease),
        background var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease);
}

.bzf-subnav__link:hover,
.bzf-subnav__link:focus-visible {
    color: var(--bzf-ink);
    background: var(--bzf-red-tint);
}

.bzf-subnav__link.is-at {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--bzf-red-bright) 0%, var(--bzf-red) 100%);
    box-shadow: var(--bzf-lift-red);
}

@media (max-width: 991px) {
    .bzf-subnav {
        width: calc(100vw - 24px);
        top: calc(var(--bzf-header-h) + 4px);
    }

    .bzf-subnav__strip {
        padding: 6px;
        border-radius: 13px;
    }

    .bzf-subnav__link {
        max-width: 180px;
        padding: 7px 12px;
        font-size: var(--bzf-fs-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bzf-subnav {
        transition: none;
    }

    .bzf-subnav__strip {
        scroll-behavior: auto;
    }
}

/* --- the card inside a section ------------------------------------------
   .ltrconslcbox used to sit in a col-md-9; as a section it has the full
   content column, and newstyles.css:343 stacks it in a centred column. A
   250px illustration centred over 1370px of card is the same dead space
   the panel had before, moved. Set the picture beside the copy instead,
   and left-align paragraphs that are now full measure. */
@media (min-width: 992px) {
    .bg_bc .bzf-sec.is-split .bzf-sec__body > .ltrconslcbox {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: clamp(24px, 3vw, 46px);
        padding: clamp(20px, 2.4vw, 34px);
    }

    .bg_bc .bzf-sec.is-split .bzf-sec__body > .ltrconslcbox > .img {
        flex: 0 0 clamp(200px, 24%, 300px);
        width: auto;
        max-width: none;
        margin: 0;
    }

    .bg_bc .bzf-sec.is-split .bzf-sec__body > .ltrconslcbox > .img img {
        max-height: 240px;
    }

    .bg_bc .bzf-sec.is-split .bzf-sec__body > .ltrconslcbox > .txt {
        flex: 1 1 auto;
        width: auto;
        text-align: left;
    }

    .bg_bc .bzf-sec.is-split .bzf-sec__body > .ltrconslcbox > .txt p:last-child {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   34t  /one — PRODUCTS IN THE LANDING PAGE'S PANEL

   blaze-futura.js rehouses each product into .bzf-solpanel, the component
   index.php already uses for its solutions, so the layout, the alternation
   and the two grounds come from section 25. What differs is the content: a
   real product mark instead of a glyph, a screenshot or a video instead of
   a render, and body copy that runs to lists rather than a single sentence.
   ========================================================================== */
.bg_bc .bzf-sec--panel {
    scroll-margin-top: calc(var(--bzf-header-h) + var(--bzf-subnav-h, 0px) + 24px);
}

.bzf-solpanel--one {
    /* the reference pins 430px because its copy is three lines; these run
       from one line to a nine-item list */
    min-height: 0;
    align-items: stretch;
}

.bzf-solpanel--one .bzf-solpanel__body {
    padding: clamp(28px, 3.2vw, 52px);
    gap: 0;
}

/* --- the product mark ---------------------------------------------------- */
/* The reference chip holds a Font Awesome glyph and is coloured for it. A
   logo needs its own ground to sit on, and room to breathe inside. */
.bzf-solpanel--one .bzf-solpanel__icon--mark {
    width: 62px;
    height: 62px;
    padding: 9px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--bzf-gray-line);
    box-shadow: var(--bzf-lift-1);
}

.bzf-solpanel--red .bzf-solpanel__icon--mark {
    border-color: rgba(255, 255, 255, .55);
}

.bzf-solpanel--one .bzf-solpanel__icon--mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    box-shadow: none;
    background: none;
}

/* --- name and strapline -------------------------------------------------- */
.bzf-solpanel--one .bzf-sec__title {
    margin: 18px 0 6px !important;
    font-size: clamp(26px, 3vw, 42px) !important;
    line-height: 1.08;
    font-weight: var(--bzf-w-bold) !important;
    letter-spacing: var(--bzf-ls-display);
    text-transform: uppercase;
}

.bzf-solpanel--light .bzf-sec__title {
    color: var(--bzf-navy-deep) !important;
}

.bzf-solpanel--red .bzf-sec__title {
    color: #FFFFFF !important;
}

/* the card's own subtitle, wearing the reference's strapline class */
.bzf-solpanel--one .bzf-solpanel__body .timesitaly {
    margin: 0 0 16px !important;
    font-size: var(--bzf-fs-label) !important;
    font-weight: var(--bzf-w-bold) !important;
    letter-spacing: var(--bzf-ls-caps);
    text-transform: uppercase;
    line-height: 1.35;
}

/* --- body copy ----------------------------------------------------------- */
.bzf-solpanel--one .bzf-solpanel__body p:not(.timesitaly):not(.bzf-solpanel__cta),
.bzf-solpanel--one .bzf-solpanel__body ul {
    margin: 0 0 .85em;
    font-size: var(--bzf-fs-body);
    line-height: var(--bzf-lh-body);
}

.bzf-solpanel--one .bzf-solpanel__body ul {
    padding-left: 20px;
}

.bzf-solpanel--one .bzf-solpanel__body li {
    margin-bottom: 5px;
    list-style: disc;
}

.bzf-solpanel--light .bzf-solpanel__body p:not(.timesitaly):not(.bzf-solpanel__cta),
.bzf-solpanel--light .bzf-solpanel__body li {
    color: var(--bzf-ink-soft);
}

.bzf-solpanel--red .bzf-solpanel__body p:not(.timesitaly):not(.bzf-solpanel__cta),
.bzf-solpanel--red .bzf-solpanel__body li {
    color: rgba(255, 255, 255, .93);
}

/* --- the button ---------------------------------------------------------- */
/* Kept as the anchor the page already had rather than reclassed: it arrives
   carrying .nav-link .btn .btn-danger, and a red button on the red ground
   would be a rectangle you cannot see. */
.bzf-solpanel--one .bzf-solpanel__cta {
    margin: 14px 0 0 !important;
}

.bzf-solpanel--one .bzf-solpanel__cta a {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px !important;
    border-radius: 999px;
    font-family: var(--bzf-font);
    font-size: var(--bzf-fs-btn);
    font-weight: var(--bzf-w-bold);
    letter-spacing: var(--bzf-ls-caps);
    text-transform: uppercase;
    text-decoration: none !important;
    transition:
        background var(--bzf-dur) var(--bzf-ease),
        color var(--bzf-dur) var(--bzf-ease),
        box-shadow var(--bzf-dur) var(--bzf-ease),
        transform var(--bzf-dur) var(--bzf-ease);
}

.bzf-solpanel--light .bzf-solpanel__cta a {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--bzf-red-bright) 0%, var(--bzf-red) 100%) !important;
    border: 0 !important;
    box-shadow: var(--bzf-lift-red);
}

.bzf-solpanel--light .bzf-solpanel__cta a:hover {
    transform: translateY(-2px);
    box-shadow: var(--bzf-lift-red), var(--bzf-glow-red-soft);
}

.bzf-solpanel--red .bzf-solpanel__cta a {
    color: var(--bzf-red-deep) !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-shadow: 0 10px 24px -12px rgba(64, 6, 4, .55);
}

.bzf-solpanel--red .bzf-solpanel__cta a:hover {
    transform: translateY(-2px);
    color: var(--bzf-red-deep) !important;
    box-shadow: 0 16px 30px -12px rgba(64, 6, 4, .6);
}

/* --- the media ----------------------------------------------------------- */
/* The reference figure is 70% wide and its render is cropped to fill. These
   are product screenshots and one video: cropping a UI is how you lose the
   part someone needed to see, so they are contained, not covered. */
.bzf-solpanel--one .bzf-solpanel__media {
    padding: clamp(20px, 2.4vw, 40px);
}

.bzf-solpanel--one .bzf-solpanel__shape--a {
    width: 100%;
    height: auto;
    max-width: 620px;
}

/* several of these carry an inline width tuned for the old card */
.bzf-solpanel--one .bzf-solpanel__shape img,
.bzf-solpanel--one .bzf-solpanel__shape video,
.bzf-solpanel--one .bzf-solpanel__shape ._img {
    width: 100% !important;
    height: auto !important;
    max-height: 440px;
    object-fit: contain;
    border-radius: var(--bzf-r-sm);
}

.bzf-solpanel--one .bzf-solpanel__shape ._img img {
    max-height: 400px;
}

@media (max-width: 991px) {
    .bzf-solpanel--one .bzf-solpanel__media {
        min-height: 0;
        padding: clamp(18px, 4vw, 30px);
    }

    .bzf-solpanel--one .bzf-solpanel__shape img,
    .bzf-solpanel--one .bzf-solpanel__shape video {
        max-height: 320px;
    }

    .bzf-solpanel--one .bzf-solpanel__body {
        padding: clamp(24px, 5vw, 34px);
    }
}

/* The strapline came off the nav label, where newstyles.css:1246 hides it
   below 992px -- correct when it was a caption under a thumbnail, but it is
   body copy in the panel now and would simply go missing on a phone. */
.bzf-solpanel--one .bzf-solpanel__body .hexaprotxt {
    display: block;
    text-align: inherit;
    margin: 0 0 .85em;
}

.bzf-solpanel--one .bzf-solpanel__body .hexaprotxt p {
    font-size: var(--bzf-fs-body);
    line-height: var(--bzf-lh-body);
    margin: 0;
}

.bzf-solpanel--light .bzf-solpanel__body .hexaprotxt p {
    color: var(--bzf-ink-soft);
}

.bzf-solpanel--red .bzf-solpanel__body .hexaprotxt p {
    color: rgba(255, 255, 255, .93);
}

/* --- a mark above the name in the rail ----------------------------------
   Only /one has one: its labels carried a product logo, which the script
   reads before panelise() moves that element into the panel. Everywhere
   else the link stays a single line of text and none of this applies. */
.bzf-subnav__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bzf-subnav__link.has-mark {
    flex-direction: column;
    gap: 5px;
    padding: 7px 13px;
    text-align: center;
    max-width: 132px;
}

.bzf-subnav__mark {
    display: block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 2px;
    object-fit: contain;
    /* the marks are full-colour and the live pill is red under them, so
       each one keeps its own ground rather than fighting the state */
    background: #FFFFFF;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--bzf-glass-l-ring);
}

@media (max-width: 991px) {
    /* The mark alone, so ten products fit a phone rail. The name is clipped
       rather than hidden: the mark is decorative (alt=""), so the text is
       the only accessible name the link has left. */
    .bzf-subnav__link.has-mark {
        max-width: none;
        padding: 6px;
        gap: 0;
    }

    .bzf-subnav__link.has-mark .bzf-subnav__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .bzf-subnav__mark {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   05c  HEADER — THE PILL'S INNER EDGE ON SMALL SCREENS

   Bootstrap zeroes .navbar-expand-lg > .container below its own breakpoint
   (blaze-css.css), on the assumption that the navbar supplies the padding
   instead. This navbar supplies none and is a 16px-radius pill, so the
   wordmark and the toggle ended up flush on the corner radius -- measured
   at 0px from both edges at 390px.

   The inset goes on the two children rather than on the container, because
   the collapse panel is in that container as well and it is meant to run
   the full width of the plate.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* The plate is full bleed below the navbar breakpoint -- viewport less
       the 15px each side -- but .container still stops at its own tier: 720px
       at 768 and up. Between 960 and 991 that left about 120px of empty pill
       at each end with the wordmark stranded in the middle. The contents
       should track the plate they sit on. */
    .header.fixedtop .navbar > .container {
        max-width: none;
    }

    /* margin, not padding: .blaze_logo--dark is absolutely placed at
       left:0 inside this brand, and left:0 resolves against the padding
       box -- so padding would move the in-flow wordmark right and leave
       the dark one behind it, which is exactly the doubled logo this
       produced on the first pass. */
    /* !important matches newstyles.css, which resets .navbar-brand to
       margin: 0 !important below 991 -- without it this rule loses. */
    .header.fixedtop .navbar-brand {
        margin-left: clamp(14px, 4vw, 18px) !important;
    }

    .header.fixedtop .navbar-toggler {
        margin-right: clamp(12px, 3.4vw, 16px);
    }
}

/* ========================================================================
   ACCORDION SYSTEM
   The pricing FAQ establishes the site-wide accordion language: separate
   white rows, a restrained border and shadow, and red only for the active
   question and its plus/minus control.  These selectors adapt that system to
   the legacy Bootstrap, plain-JS and responsive-tab accordions.
   ======================================================================== */
:root {
    --bzf-accordion-border: #d9e0e8;
    --bzf-accordion-active-border: #f1c2c5;
    --bzf-accordion-shadow: 0 10px 22px rgba(16, 40, 70, .08);
}

/* Pricing FAQ: retain its markup, while using the same panel tokens as every
   other accordion on the site. */
/* The .mcp section.faq selectors are the legacy ones this page still
   carries; at (0,5,0) and (0,6,0) they outrank the short forms above, so
   without them listed here the reference page keeps its own 10px/16px/500
   look and the "one system" is four pages plus an exception. */
.bzf-faq__item,
.mcp .faq .accordion .card,
.mcp section.faq .bdy .accordion .card,
.bg_bc .accordion .accordion-item {
    margin-bottom: 10px;
    border: 1px solid var(--bzf-accordion-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--bzf-accordion-shadow) !important;
    overflow: hidden;
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

.bzf-faq__item:hover,
.mcp .faq .accordion .card:hover,
.mcp section.faq .bdy .accordion .card:hover,
.bg_bc .accordion .accordion-item:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 26px rgba(16, 40, 70, .11) !important;
}

.bzf-faq__item:has(.bzf-faq__q[aria-expanded="true"]),
.mcp .faq .accordion .card:has(.collapse.show),
.mcp section.faq .bdy .accordion .card:has(.collapse.show),
.bg_bc .accordion .accordion-item:has(.accordion-header.active) {
    border-color: var(--bzf-accordion-active-border) !important;
}

.bzf-faq__q,
.mcp .faq .accordion .card-header .btn,
.mcp section.faq .bdy .accordion .card .card-header .btn,
.bg_bc .accordion .accordion-header {
    min-height: 64px;
    padding: 19px 24px !important;
    background: transparent !important;
    color: var(--bzf-navy-deep) !important;
    font-family: var(--bzf-font);
    font-size: 13px !important;
    font-weight: var(--bzf-w-bold) !important;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bzf-faq__q,
.mcp .faq .accordion .card-header .btn,
.mcp section.faq .bdy .accordion .card .card-header .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 64px !important;
}

.bg_bc .accordion .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.bzf-faq__q:hover,
.bzf-faq__q[aria-expanded="true"],
.mcp .faq .accordion .card-header .btn:hover,
.mcp .faq .accordion .card-header .btn:not(.collapsed),
.mcp section.faq .bdy .accordion .card .card-header .btn:hover,
.mcp section.faq .bdy .accordion .card .card-header .btn:not(.collapsed),
.bg_bc .accordion .accordion-header:hover,
.bg_bc .accordion .accordion-header.active {
    color: var(--bzf-red) !important;
}

/* Use one simple plus/minus vocabulary everywhere. */
.bzf-faq__q::before,
.bzf-faq__q::after,
.mcp .faq .accordion .card-header .btn::before,
.mcp .faq .accordion .card-header .btn::after,
.mcp section.faq .bdy .accordion .card .card-header .btn::before,
.mcp section.faq .bdy .accordion .card .card-header .btn::after {
    content: "";
    position: absolute;
    right: 24px;
    /* The mark is the only thing on the row that says it opens, and at 14x2
       it read as a hairline beside 13px caps. 20x2.5 is the same shape at a
       size the eye finds without looking for it. */
    width: 20px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--bzf-red);
    transition: transform 220ms ease;
}

.bzf-faq__q::before,
.mcp .faq .accordion .card-header .btn::before,
.mcp section.faq .bdy .accordion .card .card-header .btn::before {
    transform: rotate(90deg);
}

.bzf-faq__q[aria-expanded="true"]::before,
.mcp .faq .accordion .card-header .btn:not(.collapsed)::before,
.mcp section.faq .bdy .accordion .card .card-header .btn:not(.collapsed)::before {
    transform: rotate(0deg);
}

.mcp .faq .accordion .card-header .btn img,
.mcp section.faq .bdy .accordion .card .card-header .btn img {
    display: none;
}

.bg_bc .accordion .accordion-header::after {
    content: "+";
    flex: 0 0 auto;
    margin-left: 20px;
    color: var(--bzf-red);
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.bg_bc .accordion .accordion-header.active::after {
    content: "−";
}

.bzf-faq__q:focus-visible,
.mcp .faq .accordion .card-header .btn:focus-visible,
.bg_bc .accordion .accordion-header:focus-visible {
    outline: 2px solid var(--bzf-red) !important;
    outline-offset: -3px;
}

.bzf-faq__a,
.mcp .faq .accordion .card-body,
.mcp section.faq .bdy .accordion .card .card-body,
.bg_bc .accordion .accordion-content {
    background: transparent !important;
    color: #344d70 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* These two collapse by wrapping the answer in a Bootstrap .collapse, so
   the panel itself can carry its own spacing. */
.bzf-faq__a,
.mcp .faq .accordion .card-body,
.mcp section.faq .bdy .accordion .card .card-body {
    padding: 0 24px 22px !important;
}

/* Security does not. newstyles.css:775 collapses this panel with
   max-height: 0, and padding cannot be squeezed below its own size -- a
   22px bottom padding here holds the closed box 22px open and leaks a
   clipped first line out of all twenty answers. The spacing belongs on the
   paragraph, which is where the legacy sheet had it. */
.bg_bc .accordion .accordion-content {
    padding: 0 24px !important;
}

.bg_bc .accordion .accordion-content p {
    margin: 0;
    padding: 2px 0 22px !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* This variant becomes an accordion only on small screens. */
@media (max-width: 767.98px) {
    .resp-vtabs .resp-tabs-container {
        width: 100%;
        min-height: 0;
        background: transparent;
    }

    .resp-vtabs h2.resp-accordion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        margin: 0 0 10px;
        padding: 17px 20px !important;
        border: 1px solid var(--bzf-accordion-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: var(--bzf-accordion-shadow);
        color: var(--bzf-navy-deep) !important;
        font-family: var(--bzf-font);
        font-size: 13px !important;
        font-weight: var(--bzf-w-bold);
        letter-spacing: .06em;
        line-height: 1.4;
        text-transform: uppercase;
    }

    .resp-vtabs h2.resp-accordion.resp-tab-active {
        border-color: var(--bzf-accordion-active-border) !important;
        color: var(--bzf-red) !important;
    }

    /* The plugin writes the chevron first, so a space-between row put the
       control on the left and the label on the right -- the mirror of every
       other accordion here. Drop the glyph and draw the same plus/minus the
       other three use, on the same side. */
    .resp-vtabs h2.resp-accordion .resp-arrow {
        display: none;
    }

    .resp-vtabs h2.resp-accordion::after {
        content: "+";
        flex: 0 0 auto;
        margin-left: 20px;
        color: var(--bzf-red);
        font-family: Arial, sans-serif;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
    }

    .resp-vtabs h2.resp-accordion.resp-tab-active::after {
        content: "−";
    }

    .resp-vtabs .resp-tab-content {
        margin: -2px 0 12px;
        padding: 0 20px 20px;
        border: 1px solid var(--bzf-accordion-active-border);
        border-top: 0;
        border-radius: 0 0 8px 8px;
        background: #fff;
        box-shadow: var(--bzf-accordion-shadow);
    }
}

/* ==========================================================================
   35  ABOUT — THE YEAR TIMELINE
   The rail's selected year is set 10px larger and bold, and the column it
   sits in was 100px wide with `overflow: hidden` -- so "2023" at 34px Bold
   came within a few pixels of the clip on this machine and lost its last
   digit on any that set type a shade wider. The column is widened to hold
   the largest year the rail can show, with the same amount taken back off
   the panel beside it so the two floats still share one line.
   ========================================================================== */
#timeline #dates,
#timeline #dates li {
    width: 124px;
}

#timeline #issues {
    width: calc(100% - 132px);
}

/* Below 576px the selected year steps down to 25px, so the column does too --
   but by less than it used to, which is what was clipping it there as well. */
@media (max-width: 575px) {

    #timeline #dates,
    #timeline #dates li {
        width: 92px;
    }

    #timeline #issues {
        width: calc(100% - 100px);
    }
}