/* ============================================================
   Homepage 2026 redesign - section styles
   Loaded on the front page only (see extras/setup.php)
   ============================================================ */


/* ---------- page container ----------
   The 2026 design is drawn on a 1499px content column. The theme caps
   [class^="hp-"] .wrapper at 1230px, so every section would render ~18% small.
   Widen it to the design's column, on this page only.
   The 992-1535px band keeps the theme's 64.06vw so sections scale with it. */
body.hp-2026 [class^="hp-"] .wrapper {
    max-width: 1498px;
}

/* ---------- hero-b ---------- */
/* Hero B
   Reference: 1920 design frame, 1499px content column. The theme's homepage
   wrapper is 1495px from 1536px up, so every value below is the design's own,
   1:1 - no scale factor. Between 992px and 1535px the wrapper is 64.06vw, so
   the same values are restated in vw (px / 1495 * 64.06) and the section
   tracks the wrapper instead of jumping. */
.hp-hero-b {
    background: #F1F6FF;
    padding: 167px 0 71px; /* 97px of fixed navbar + the design's 70px gap */
    overflow: hidden;
}
.hp-hero-b__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 68px;
}
.hp-hero-b .hp-hero-b__title {
    flex: 0 1 51%;
    /* flex items default to min-width:auto, so one long unbroken token in the
       title would push the whole aside column out of the section - and the
       section clips it. Cap the shrink floor and let the token wrap instead. */
    min-width: 0;
    margin: 0;
    color: #001A36;
    font-size: 73.5px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: break-word;
}
.hp-hero-b__aside {
    flex: 0 0 37.09%;
    min-width: 0;
    padding-top: 20px;
}
.hp-hero-b .hp-hero-b__aside p {
    margin: 0;
    color: #001A36;
    font-size: 29.5px;
    line-height: 44px;
    overflow-wrap: break-word;
}
.hp-hero-b .hp-hero-b__aside .btn.btn-white {
    display: inline-block;
    max-width: 100%;
    margin-top: 37px;
    padding: 11.5px 21.5px;
    background: transparent;
    border: 1px solid #001A36;
    border-radius: 60px;
    color: #001A36;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: break-word;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.hp-hero-b .hp-hero-b__aside .btn.btn-white::after {
    display: none;
}
.hp-hero-b .hp-hero-b__aside .btn.btn-white:hover,
.hp-hero-b .hp-hero-b__aside .btn.btn-white:focus {
    background: #0061FA;
    border-color: #0061FA;
    color: #fff;
}
/* child-theme.css:16998 `.btn:hover, .btn:focus { outline:none !important;
   box-shadow:none !important }` and :17016 `a, a:focus { outline:none !important }`
   both blank the focus ring. An !important author declaration is only beatable by
   another !important one, so specificity alone cannot restore it here. Dark ink,
   offset clear of the button, so it reads against both the #F1F6FF ground and the
   blue the button turns while focused. */
.hp-hero-b .hp-hero-b__aside .btn.btn-white:focus-visible {
    outline: 2px solid #001A36 !important;
    outline-offset: 3px;
}
.hp-hero-b__visual {
    position: relative;
    aspect-ratio: 1499 / 654;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0038D6;
}
.hp-hero-b__visual img,
.hp-hero-b__visual svg,
.hp-hero-b__visual video,
.hp-hero-b__visual canvas,
.hp-hero-b__visual iframe,
.hp-hero-b__visual lottie-player,
.hp-hero-b__visual dotlottie-player {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* the theme scales the homepage wrapper to 64.06vw in this range, so the section scales with it */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-hero-b {
        padding: 8.092vw 0 3.042vw; /* 5.05vw navbar + the 3.042vw gap */
    }
    .hp-hero-b__head {
        padding-bottom: 2.914vw;
    }
    .hp-hero-b .hp-hero-b__title {
        font-size: 3.149vw;
    }
    .hp-hero-b__aside {
        padding-top: 0.857vw;
    }
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 1.264vw;
        line-height: 1.885vw;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        margin-top: 1.585vw;
        padding: max(7px, 0.493vw) max(14px, 0.921vw);
        font-size: max(11px, 0.686vw);
    }
    .hp-hero-b__visual {
        border-radius: 0.857vw;
    }
}

@media only screen and (max-width: 992px) {
    .hp-hero-b {
        padding: 112px 0 46px;
    }
    .hp-hero-b .wrapper {
        max-width: 100%;
        padding: 0 20px;
    }
    .hp-hero-b__head {
        display: block;
        padding-bottom: 40px;
    }
    .hp-hero-b .hp-hero-b__title {
        max-width: 100%;
        font-size: clamp(32px, 4.65vw, 46px);
        line-height: 1.15;
    }
    .hp-hero-b__aside {
        max-width: 560px;
        padding-top: 22px;
    }
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 18px;
        line-height: 1.5;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        margin-top: 24px;
        padding: 11px 21px;
        font-size: 14px;
        line-height: 1.5;
    }
    .hp-hero-b__visual {
        border-radius: 12px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-hero-b {
        padding: 96px 0 34px;
    }
    .hp-hero-b__head {
        padding-bottom: 28px;
    }
    .hp-hero-b .hp-hero-b__title {
        font-size: 32px;
    }
    .hp-hero-b__aside {
        max-width: 100%;
        padding-top: 18px;
    }
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 16px;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        margin-top: 20px;
    }
    .hp-hero-b__visual {
        border-radius: 8px;
    }
}

/* ---------- pillars ----------
   Re-derived 1:1 from the 1920px design export, then re-measured against it.
   Content starts at x=210 in the 1920 frame and the badge/columns row runs to
   x=1695, so the row the design draws is 1485px wide; the theme's real desktop
   container is 1495px, so every value below is the design's own number, unscaled.
   The row rhythm in the export is a single 66px: badge -> divider, divider ->
   divider gutter, and divider -> text indent are all 66px.
   Checked against the export at 1920: section height 608, tab pill 218x58, tab
   label ink 153 ("INTELLIGENCE" 136), h2 ink top y=149 and ink width 814, badge
   top y=218, first divider 339 from the container edge, divider rule 250 tall,
   text indent 66, paragraph line pitch 22, button 177x47 at y=508.
   The design's grid pitch is 404 (338 track + 66 gap) because its row is 1485
   inside a wider frame; filling the theme's 1495 container puts the pitch at
   407.3, which walks the third divider 7px right of the export. That is the
   whole of the residual: the alternative is pinning 338px tracks, which would
   cost auto-fit its ability to reflow. */
.hp-pillars {
    /* export: 35.6px of clear ground above the tab pill, 608px total section height */
    background: #F1F6FF;
    padding: 36px 0 54px;
}

/* tab strip */
.hp-pillars .hp-pillars__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 39px;
    list-style: none;
    margin: 0 0 49px;
    padding: 0;
}
.hp-pillars .hp-pillars__tabs li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hp-pillars .hp-pillars__tab {
    display: block;
    margin: 0;
    padding: 19px 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    color: #001A36;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .25s ease, color .25s ease;
}
.hp-pillars .hp-pillars__tab:hover {
    color: #0061FA;
}
/* child-theme.css:17017 kills every outline on a/button with `outline: none !important`,
   which no amount of specificity can beat - draw the keyboard ring with box-shadow. */
.hp-pillars .hp-pillars__tab:focus-visible {
    box-shadow: 0 0 0 2px #F1F6FF, 0 0 0 4px #0061FA;
}
/* aria-selected is the single source of truth for the selected tab. */
.hp-pillars .hp-pillars__tab[aria-selected="true"],
.hp-pillars .hp-pillars__tab[aria-selected="true"]:hover {
    background: #001A36;
    color: #fff;
}

/* panels */
.hp-pillars .hp-pillars__panel[hidden] {
    display: none;
}
.hp-pillars .hp-pillars__panel:focus {
    outline: none;
}
/* a div is not caught by the blanket a/button outline reset, so this one works */
.hp-pillars .hp-pillars__panel:focus-visible {
    outline: 2px solid #0061FA;
    outline-offset: 6px;
}

/* `[class^="hp-"] h2` is (0,1,1) and sets 32px/600 - the section class in front of
   h2 makes this (0,2,1) so it wins without !important. Roboto ships no 600 here,
   so 600 would render as 700; the export measures as 500. */
.hp-pillars h2.hp-pillars__title {
    margin: 0 0 41px;
    color: #001A36;
    font-size: 26px;
    font-weight: 500;
    line-height: 34px;
}

/* badge + columns row.
   Flex (not grid) so a panel without a badge gives the columns the full width. */
.hp-pillars .hp-pillars__row {
    /* the export's gap is 66px against a 273px badge; the asset is 275px wide, so
       64px puts the first divider exactly where the design puts it (x=339). */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    column-gap: 64px;
    row-gap: 32px;
}
.hp-pillars .hp-pillars__badge {
    /* the asset is 275x251 - render it at its native width, never a percentage */
    flex: 0 0 275px;
    max-width: 100%;
    align-self: flex-start;
    line-height: 0;
}
.hp-pillars .hp-pillars__badge picture {
    display: block;
}
.hp-pillars .hp-pillars__badge img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.hp-pillars .hp-pillars__cols {
    /* basis 0 so the columns simply take the rest of the row; a px basis makes the
       row wrap once the theme narrows .wrapper to 64.06vw. */
    flex: 1 1 0%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    column-gap: 66px;
    row-gap: 30px;
}
.hp-pillars .hp-pillars__col {
    /* 1px rule + 65px = the export's 66px indent from divider to text */
    min-width: 0;
    border-left: 1px solid #C8D6E7;
    padding: 35px 0 0 65px;
}
.hp-pillars .hp-pillars__cols .hp-pillars__col h3 {
    margin: 0 0 30px;
    color: #0061FA;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    overflow-wrap: break-word;
}
.hp-pillars .hp-pillars__cols .hp-pillars__col p {
    margin: 0;
    color: #001A36;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
    overflow-wrap: break-word;
}
/* auto-fit collapses to one full-width track when the repeater carries a single
   item, which set a 1495px measure - about 230 characters a line. Cap the lone
   column near the design's own track. With two or three columns the track is
   always narrower than this, so the rule is inert there. */
.hp-pillars .hp-pillars__col:only-child {
    max-width: 560px;
}

/* learn more */
.hp-pillars .btn.btn-white {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 19px;
    margin-top: 39px;
    padding: 12px 25px 12px 40px;
    background: transparent;
    border: 1.5px solid #001A36;
    border-radius: 60px;
    color: #001A36;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}
.hp-pillars .btn.btn-white::after {
    content: '';
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 9px;
    height: 15px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.5 1.5L7.5 7.5L1.5 13.5' stroke='%23001A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hp-pillars .btn.btn-white:hover {
    background: #001A36;
    color: #fff;
}
.hp-pillars .btn.btn-white:hover::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.5 1.5L7.5 7.5L1.5 13.5' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* `.btn:focus` in child-theme.css carries BOTH `outline: none !important` and
   `box-shadow: none !important`, so the ring goes on a pseudo-element instead. */
.hp-pillars .btn.btn-white:focus-visible::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border: 2px solid #0061FA;
    border-radius: inherit;
    pointer-events: none;
}

/* The theme narrows [class^="hp-"] .wrapper to 64.06vw here (983px at 1535px,
   636px at 992px), so every desktop value is restated as px/1495*64.06 vw and the
   section stays the same drawing at a smaller size. Every geometric value tracks
   the container exactly - measured ratio 0.6577 at 1535 across padding, gaps,
   badge and tracks. Type additionally carries a px floor so it stays legible at
   the bottom of the band instead of collapsing to ~7px. The floors sit at roughly
   the proportional size at 1535, so several of them (11px type, 15px body
   leading) already bind at the top of the band and hold type ~4% above a pure
   scale; that is deliberate, and costs ~19px of section height at 1535. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-pillars {
        padding: 1.54vw 0 2.31vw;
    }
    .hp-pillars .hp-pillars__tabs {
        gap: 0.26vw 1.67vw;
        margin-bottom: 2.1vw;
    }
    .hp-pillars .hp-pillars__tab {
        padding: 0.81vw 1.29vw;
        border-radius: 0.34vw;
        font-size: max(11px, 0.69vw);
        line-height: max(13px, 0.86vw);
        letter-spacing: 0.12vw;
    }
    .hp-pillars h2.hp-pillars__title {
        margin-bottom: 1.76vw;
        font-size: max(17px, 1.11vw);
        line-height: max(22px, 1.46vw);
    }
    .hp-pillars .hp-pillars__row {
        column-gap: 2.74vw;
        row-gap: 1.37vw;
    }
    .hp-pillars .hp-pillars__badge {
        flex: 0 0 11.78vw;
    }
    .hp-pillars .hp-pillars__badge img {
        border-radius: 0.34vw;
    }
    .hp-pillars .hp-pillars__cols {
        /* the track minimum has to scale too, or auto-fit drops to two columns */
        grid-template-columns: repeat(auto-fit, minmax(min(9.86vw, 100%), 1fr));
        column-gap: 2.83vw;
        row-gap: 1.29vw;
    }
    .hp-pillars .hp-pillars__col {
        padding: 1.5vw 0 0 2.79vw;
    }
    .hp-pillars .hp-pillars__col:only-child {
        max-width: 24vw;
    }
    .hp-pillars .hp-pillars__cols .hp-pillars__col h3 {
        margin-bottom: 1.29vw;
        font-size: max(13px, 0.86vw);
        line-height: max(18px, 1.16vw);
    }
    .hp-pillars .hp-pillars__cols .hp-pillars__col p {
        font-size: max(11px, 0.69vw);
        line-height: max(15px, 0.94vw);
    }
    .hp-pillars .btn.btn-white {
        gap: 0.81vw;
        margin-top: 1.67vw;
        padding: 0.51vw 1.07vw 0.51vw 1.71vw;
        font-size: max(11px, 0.69vw);
        line-height: max(13px, 0.86vw);
    }
    .hp-pillars .btn.btn-white::after {
        width: max(6px, 0.39vw);
        height: max(10px, 0.64vw);
    }
}

/* 991.98 rather than 991: the theme's own mobile rules stop at 991px while its vw
   band starts at 992px, so a fractional width in (991, 992) matches neither of the
   theme's blocks and the wrapper would fall back to its 1495px base. This block
   covers that gap and restates the wrapper, so the section stays correct there. */
@media only screen and (max-width: 992px) {
    .hp-pillars {
        padding: 44px 0 60px;
    }
    .hp-pillars .wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    .hp-pillars .hp-pillars__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0 10px;
        margin-bottom: 30px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hp-pillars .hp-pillars__tabs::-webkit-scrollbar {
        display: none;
    }
    .hp-pillars .hp-pillars__tab {
        padding: 13px 20px;
        font-size: 13px;
        letter-spacing: 1.8px;
    }
    .hp-pillars h2.hp-pillars__title {
        margin-bottom: 28px;
        font-size: 22px;
        line-height: 30px;
    }
    /* The badge stays beside the columns here. Stacking it at the 992 -> 991 step
       doubled the row (247px -> 444px) on top of the container's own 635 -> 951
       widening, so the section was adding ~200px of jump to the theme's. */
    .hp-pillars .hp-pillars__row {
        column-gap: 26px;
        row-gap: 28px;
    }
    .hp-pillars .hp-pillars__badge {
        flex: 0 0 230px;
        max-width: 100%;
    }
    .hp-pillars .hp-pillars__cols {
        /* 180px, not 230px: beside the badge at 991 the columns get
           951 - 230 - 26 = 695px, and 3x180 + 2x26 = 592 still fits, so the
           three-column layout carries across the 991/992 boundary unchanged.
           Below 888 the badge stacks again and the min goes back to 230. */
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        column-gap: 26px;
        row-gap: 28px;
    }
    .hp-pillars .hp-pillars__col {
        padding: 0 0 0 22px;
    }
    .hp-pillars .hp-pillars__cols .hp-pillars__col h3 {
        margin-bottom: 18px;
        font-size: 18px;
        line-height: 25px;
    }
    .hp-pillars .hp-pillars__cols .hp-pillars__col p {
        font-size: 15px;
        line-height: 23px;
    }
    .hp-pillars .btn.btn-white {
        gap: 14px;
        margin-top: 30px;
        padding: 10px 20px 10px 26px;
        font-size: 15px;
    }
}

/* The badge sits beside the columns exactly while the design's three-column row
   still fits there: the columns need 3x180 + 2x26 = 592px, and they get
   viewport - 40 - 230 - 26, so 592px runs out at 888. Below that the badge goes
   back above the columns and the layout is the authored mobile stack. */
@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__row {
        flex-direction: column;
        column-gap: 0;
    }
    .hp-pillars .hp-pillars__badge {
        flex: 0 0 auto;
        width: 230px;
    }
    .hp-pillars .hp-pillars__cols {
        flex: 0 0 auto;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    }
}

@media only screen and (max-width: 576px) {
    .hp-pillars {
        padding: 34px 0 46px;
    }
    .hp-pillars .hp-pillars__tabs {
        gap: 0 6px;
        margin-bottom: 24px;
    }
    .hp-pillars .hp-pillars__tab {
        padding: 11px 15px;
        font-size: 12px;
        letter-spacing: 1.4px;
    }
    .hp-pillars h2.hp-pillars__title {
        margin-bottom: 24px;
        font-size: 20px;
        line-height: 28px;
    }
    .hp-pillars .hp-pillars__row {
        row-gap: 24px;
    }
    .hp-pillars .hp-pillars__badge {
        width: 200px;
    }
    .hp-pillars .hp-pillars__cols {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }
    .hp-pillars .hp-pillars__col {
        border-left: 0;
        border-top: 1px solid #C8D6E7;
        padding: 20px 0 0;
    }
    .hp-pillars .hp-pillars__cols .hp-pillars__col h3 {
        margin-bottom: 14px;
        font-size: 17px;
        line-height: 24px;
    }
    .hp-pillars .btn.btn-white {
        margin-top: 26px;
    }
}

/* ---------- agents ---------- */
/* Base = the design's own numbers at 1:1. The 2026 design column is 1499px and the theme's
   homepage .wrapper is 1495px at >=1536, so nothing in this block is scaled down.
   The panel asset is 1499x386 with the 10px centre seam and the 15px corner radius baked in,
   so the section reproduces it at native size. */
.hp-agents {
    background-color: #F1F6FF;
    padding: 137px 0 114px;
}
.hp-agents .wrapper > h2 {
    margin: 0 0 73px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.227;
    color: #001A36;
    text-align: center;
    overflow-wrap: break-word;
}
.hp-agents__visual {
    aspect-ratio: 1499 / 386;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
    background-color: #0061FA;
}
.hp-agents__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 0.667% = the 10px seam in the artwork, as a share of the 1499px column, so the two text
   columns keep tracking the panel halves at every container width. */
.hp-agents__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.667%;
    margin-top: 46px;
}
/* 6.6% of the column = the design's 49px inset from each panel half. */
.hp-agents__col {
    padding-left: 6.6%;
    overflow-wrap: break-word;
}
.hp-agents .hp-agents__col h3 {
    margin: 0 0 21px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #0061FA;
}
/* The design's measure. Measured by sweeping the value in 0.5px steps: the design's line
   breaks are reproduced in both columns for [497, 502.5) and nowhere else. 500 is the
   middle of that window, so ~3px of slack on either side. */
.hp-agents .hp-agents__col-txt {
    max-width: 500px;
}
.hp-agents .hp-agents__col-txt p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.4;
    color: #001A36;
}
.hp-agents .hp-agents__col-txt p:last-child {
    margin-bottom: 0;
}

/* The theme narrows [class^="hp-"] .wrapper to 64.06vw here, so every length above is
   restated as px_at_1536 / 1495 * 64.06 and the section scales with its container.
   The max() floors are the values the <=992 block uses, so 991/992 is seamless and the
   type never collapses to the ~10px the raw ratio would give at the bottom of the band. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-agents {
        padding: max(64px, 5.87vw) 0 max(56px, 4.885vw);
    }
    .hp-agents .wrapper > h2 {
        margin-bottom: max(32px, 3.128vw);
        font-size: max(26px, 1.885vw);
    }
    .hp-agents__visual {
        border-radius: max(10px, 0.643vw);
    }
    .hp-agents__cols {
        margin-top: max(26px, 1.971vw);
    }
    .hp-agents .hp-agents__col h3 {
        margin-bottom: max(14px, 0.9vw);
        font-size: max(20px, 0.857vw);
    }
    .hp-agents .hp-agents__col-txt p {
        margin-bottom: max(10px, 0.4285vw);
        font-size: max(16px, 0.686vw);
    }
}

/* Container: the theme's own <=991 rule takes .wrapper to 100% with a 20px gutter, and at
   exactly 992 the 64.06vw band still applies - so this block deliberately does NOT touch
   .wrapper. Every value here equals what the band computes at 992, so nothing steps. */
@media only screen and (max-width: 992px) {
    .hp-agents {
        padding: 64px 0 56px;
    }
    .hp-agents .wrapper > h2 {
        margin-bottom: 32px;
        font-size: 26px;
    }
    .hp-agents__visual {
        border-radius: 10px;
    }
    .hp-agents__cols {
        margin-top: 26px;
    }
    .hp-agents .hp-agents__col h3 {
        margin-bottom: 14px;
        font-size: 20px;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: none;
    }
    .hp-agents .hp-agents__col-txt p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-agents {
        padding: 44px 0 40px;
    }
    .hp-agents .wrapper {
        padding: 0 16px;
    }
    .hp-agents .wrapper > h2 {
        margin-bottom: 24px;
        font-size: 22px;
    }
    /* One column, so the panel no longer has to letterbox down to 88px tall. */
    .hp-agents__visual {
        aspect-ratio: 3 / 1;
    }
    .hp-agents__cols {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 26px;
        margin-top: 22px;
    }
    .hp-agents__col {
        padding-left: 0;
    }
    .hp-agents .hp-agents__col h3 {
        margin-bottom: 12px;
        font-size: 18px;
    }
}

/* ---------- ecosystems ---------- */
/*HP New: AI Ecosystems*/
/* The 2026 export is drawn on a 1499px content column and the page container is
   1498px, so the section reproduces the export 1:1 - no scale factor.
   Measured on the export at 1920: card 210-1708 (1499 wide), first divider y=634,
   closed rows 92px apart, last divider y=1286, section height 1398. */
.hp-ecosystems {
    background-color: #F1F6FF;
    padding: 0 0 111px;
    overflow: hidden;
}
/* The container this section is drawn against. style.css declares .wrapper three times
   - 1230px (no MQ), 64.06vw (992-1535px) and 100% (<=991px) - all at (0,2,0), and the
   page-container rule in this file overrides them at (0,3,1) with no media query, so the
   64.06vw band never actually applies. Restating it here at (0,3,1) makes the section's
   own container explicit instead of dependent on which global rule happens to win:
   wrapper = min(1498px, 100vw), which is what the vw band below is calibrated to. */
body.hp-2026 .hp-ecosystems .wrapper {
    max-width: 1498px;
}
.hp-ecosystems .hp-ecosystems__card {
    position: relative;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    padding: 77px 6.5% 0;
}
.hp-ecosystems .hp-ecosystems__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 100px;
}
.hp-ecosystems .hp-ecosystems__txt {
    width: 39.4%;
}
.hp-ecosystems .hp-ecosystems__txt h2,
.hp-ecosystems .hp-ecosystems__txt p {
    overflow-wrap: anywhere;
}
.hp-ecosystems .hp-ecosystems__txt h2 {
    font-size: 44px;
    font-weight: 700;
    line-height: 60px;
    color: #001A36;
    margin: 0 0 85px;
}
.hp-ecosystems .hp-ecosystems__txt p {
    font-size: 26px;
    line-height: 36px;
    color: #001A36;
    margin: 0;
}
/* 705px is the asset's own pixel width, so the composition renders unscaled. The row is
   laid out space-between, so the negative right margin alone fixes the image: it puts the
   border box at 1000-1705 on the export's 1920 frame, which is where the export has it
   (template match against up_eco_ui.png: exact, zero pixel error). -7.164% of the flex
   row is 93.4px - the card's 97.4px right padding less the export's 4px inset. */
.hp-ecosystems .hp-ecosystems__media {
    position: relative;
    width: 54.2%;
    max-width: 705px;
    margin: -47px -7.164% 0 0;
}
.hp-ecosystems .hp-ecosystems__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}
/* The blue arc and the 40,000,000 stat card are already part of the uploaded composition
   image, so this decorative span stays empty - drawing it again here would double the
   shape and 404 on the asset. */
.hp-ecosystems .hp-ecosystems__shape {
    display: none;
}
.hp-ecosystems .hp-ecosystems__stat {
    position: absolute;
    right: 0;
    top: 146px;
    width: 214px;
    padding: 17px 20px 21px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.72);
    border-radius: 19px;
    box-shadow: 0 17px 54px rgba(0, 27, 56, 0.1);
    backdrop-filter: blur(10px);
}
.hp-ecosystems .hp-ecosystems__stat .hp-ecosystems__stat-icon,
.hp-ecosystems .hp-ecosystems__stat img {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 7px;
    background: no-repeat center / contain;
}
.hp-ecosystems .hp-ecosystems__stat strong {
    display: block;
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
    color: #001A36;
}
.hp-ecosystems .hp-ecosystems__stat span:not(.hp-ecosystems__stat-icon) {
    display: block;
    font-size: 17px;
    line-height: 26px;
    color: #667686;
}
.hp-ecosystems .hp-ecosystems__list {
    position: relative;
    padding: 0 6.5%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.86) 40%, rgba(255, 255, 255, 0) 100%);
}
.hp-ecosystems .hp-ecosystems__item {
    position: relative;
    border-top: 1px solid #AFC4D8;
}
.hp-ecosystems .hp-ecosystems__item:last-child {
    border-bottom: 1px solid #AFC4D8;
}
.hp-ecosystems .hp-ecosystems__item.is-open::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-image: linear-gradient(180deg, rgba(0, 97, 250, 0.04) 0%, rgba(0, 97, 250, 0.02) 50%, rgba(0, 97, 250, 0.04) 100%);
}
/* 91px content + the 1px top border is the export's 92px row pitch (dividers at
   918/1010/1102/1194/1286). 83px gap puts the Learn more button at x=456, where the
   export has it. */
.hp-ecosystems .hp-ecosystems__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 83px;
    min-height: 91px;
}
.hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
    min-height: 0;
    padding-bottom: 32px;
}
.hp-ecosystems .hp-ecosystems__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 24px;
    color: #698CAE;
    text-align: left;
}
.hp-ecosystems button.hp-ecosystems__toggle {
    cursor: pointer;
    transition: color 0.2s ease;
}
.hp-ecosystems button.hp-ecosystems__toggle:hover {
    color: #0061FA;
}
/* child-theme.css blanket-kills every outline, so the keyboard ring has to be a shadow */
.hp-ecosystems button.hp-ecosystems__toggle:focus-visible {
    border-radius: 4px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0061FA;
}
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0061FA;
}
/* Tracks measured off the export: column 2 starts at x=623.7 and the tag column at
   x=1008 on the 1920 frame. The tracks deliberately do not sum to 100% - the export
   leaves the right of the row empty. */
.hp-ecosystems .hp-ecosystems__panel {
    position: relative;
    display: none;
    grid-template-columns: 21% 26.29% 36%;
    column-gap: 3.2%;
    padding: 32px 0 15px;
}
.hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__panel {
    display: grid;
}
.hp-ecosystems .hp-ecosystems__panel > * {
    min-width: 0;
    overflow-wrap: anywhere;
}
.hp-ecosystems .hp-ecosystems__panel h3 {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    color: #0061FA;
    margin: 0 0 32px;
}
.hp-ecosystems .hp-ecosystems__panel p {
    font-size: 16px;
    line-height: 22px;
    color: #001A36;
    margin: 0;
}
/* Roboto is enqueued without an italic face (extras/setup.php asks for weights only), so
   this renders as a synthesised oblique of the upright. 20px/25px/400 are the export's
   own values - they reproduce its line pitch and ink mass exactly - but the synthesised
   oblique sets ~3% wider than real Roboto Italic, leaving line 1 only ~3.5px clear of the
   273.7px track. Adding an italic face to the font request is what restores the margin;
   do not shrink the type to buy it back. Selector must out-specify
   `.hp-ecosystems .hp-ecosystems__panel p` (0,2,1), hence `p.` here. */
.hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    line-height: 25px;
}
.hp-ecosystems .hp-ecosystems__tags {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hp-ecosystems .hp-ecosystems__tags li {
    max-width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 18px;
    color: #698CAE;
    background-color: #E5EEF6;
    border-radius: 6px;
}
.hp-ecosystems .hp-ecosystems__more {
    display: none;
    min-width: 0;
}
.hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__more {
    display: block;
}
/* the label is editorial, so it has to be able to break: without this an unbroken string
   keeps the button at max-content and it runs out past the card (the section's
   overflow:hidden clips it, so it fails silently rather than scrolling the page) */
.hp-ecosystems .hp-ecosystems__more .btn.btn-white {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 3px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #001A36;
    background: transparent;
    border: 1px solid #001B38;
    border-radius: 30px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hp-ecosystems .hp-ecosystems__more .btn.btn-white::after {
    display: none;
}
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:hover {
    color: #fff;
    background-color: #0061FA;
    border-color: #0061FA;
}

/* Below 1498px the container stops being capped and becomes the viewport, so every px
   above is restated as px / 1498 * 100 vw and the section keeps the export's proportions
   exactly. At 1498px the vw values equal the px values, so the band and the block above
   meet with no step - and nothing at all happens at 1535/1536, because the theme's
   64.06vw rule is outbid (see the container note at the top).
   Percentages and the 1px borders are left alone: they already track the container. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-ecosystems {
        padding: 0 0 7.410vw;
    }
    .hp-ecosystems .hp-ecosystems__card {
        border-radius: 1.335vw 1.335vw 0 0;
        padding: 5.140vw 6.5% 0;
    }
    .hp-ecosystems .hp-ecosystems__intro {
        gap: 2.670vw;
        padding-bottom: 6.676vw;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 2.937vw;
        line-height: 4.005vw;
        margin: 0 0 5.674vw;
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 1.736vw;
        line-height: 2.403vw;
    }
    .hp-ecosystems .hp-ecosystems__media {
        margin: -3.138vw -7.164% 0 0;
    }
    .hp-ecosystems .hp-ecosystems__stat {
        top: 9.746vw;
        width: 14.286vw;
        padding: 1.135vw 1.335vw 1.402vw;
        border-radius: 1.268vw;
    }
    .hp-ecosystems .hp-ecosystems__stat .hp-ecosystems__stat-icon,
    .hp-ecosystems .hp-ecosystems__stat img {
        width: 1.736vw;
        height: 1.736vw;
        margin: 0 auto 0.467vw;
    }
    .hp-ecosystems .hp-ecosystems__stat strong {
        font-size: 2.403vw;
        line-height: 3.071vw;
    }
    .hp-ecosystems .hp-ecosystems__stat span:not(.hp-ecosystems__stat-icon) {
        font-size: 1.135vw;
        line-height: 1.736vw;
    }
    .hp-ecosystems .hp-ecosystems__bar {
        gap: 5.541vw;
        min-height: 6.075vw;
    }
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        padding-bottom: 2.136vw;
    }
    .hp-ecosystems .hp-ecosystems__toggle {
        gap: 0.267vw;
        font-size: 1.068vw;
        line-height: 1.602vw;
    }
    .hp-ecosystems .hp-ecosystems__panel {
        padding: 2.136vw 0 1.001vw;
    }
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 2.003vw;
        line-height: 2.670vw;
        margin: 0 0 2.136vw;
    }
    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 1.068vw;
        line-height: 1.469vw;
    }
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 1.335vw;
        line-height: 1.669vw;
    }
    .hp-ecosystems .hp-ecosystems__tags {
        gap: 0.868vw;
    }
    .hp-ecosystems .hp-ecosystems__tags li {
        padding: 0.534vw 1.068vw;
        font-size: 0.935vw;
        line-height: 1.202vw;
        border-radius: 0.401vw;
    }
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 0.200vw 1.602vw;
        font-size: 0.935vw;
        line-height: 1.335vw;
        border-radius: 2.003vw;
    }
}

/* Deliberately overlapping with the band above at exactly 992px rather than abutting it:
   this block is later in the file, so it wins at 992px, and no fractional width can fall
   between the two (a 1/64px viewport such as 991.984375 still matches max-width:992px,
   which an abutting 991.98px bound would miss). */
@media only screen and (max-width: 992px) {
    .hp-ecosystems {
        padding: 0 0 60px;
    }
    /* (0,3,1), same as the container rule at the top of the section, so source order
       wins. The theme's own mobile .wrapper rule stops at 991px, so this is what gives
       the section its full-bleed container over 991-992. */
    body.hp-2026 .hp-ecosystems .wrapper {
        max-width: 100%;
        padding: 0 20px;
    }
    .hp-ecosystems .hp-ecosystems__card {
        border-radius: 20px 20px 0 0;
        padding: 40px 24px 0;
    }
    .hp-ecosystems .hp-ecosystems__intro {
        display: block;
        padding-bottom: 34px;
    }
    .hp-ecosystems .hp-ecosystems__txt {
        width: 100%;
        max-width: none;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 32px;
        line-height: 42px;
        margin: 0 0 30px;
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 17px;
        line-height: 26px;
    }
    .hp-ecosystems .hp-ecosystems__media {
        width: 100%;
        max-width: 100%;
        margin: 30px 0 0;
    }
    .hp-ecosystems .hp-ecosystems__stat {
        top: auto;
        bottom: 10px;
        width: 160px;
        padding: 12px 14px 14px;
        border-radius: 16px;
    }
    .hp-ecosystems .hp-ecosystems__stat .hp-ecosystems__stat-icon,
    .hp-ecosystems .hp-ecosystems__stat img {
        width: 22px;
        height: 22px;
        margin: 0 auto 6px;
    }
    .hp-ecosystems .hp-ecosystems__stat strong {
        font-size: 26px;
        line-height: 34px;
    }
    .hp-ecosystems .hp-ecosystems__stat span:not(.hp-ecosystems__stat-icon) {
        font-size: 15px;
        line-height: 22px;
    }
    .hp-ecosystems .hp-ecosystems__list {
        padding: 0 24px;
    }
    .hp-ecosystems .hp-ecosystems__bar {
        gap: 24px;
        min-height: 64px;
    }
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        min-height: 0;
        padding-bottom: 24px;
    }
    .hp-ecosystems .hp-ecosystems__toggle {
        gap: 6px;
        font-size: 15px;
        line-height: 22px;
    }
    .hp-ecosystems .hp-ecosystems__panel {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 20px;
        padding: 24px 0 10px;
    }
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 24px;
        line-height: 32px;
        margin: 0 0 16px;
    }
    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 16px;
        line-height: 24px;
    }
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 18px;
        line-height: 26px;
    }
    .hp-ecosystems .hp-ecosystems__tags {
        gap: 10px;
    }
    .hp-ecosystems .hp-ecosystems__tags li {
        padding: 7px 14px;
        font-size: 14px;
        line-height: 18px;
        border-radius: 6px;
    }
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 5px 22px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems {
        padding: 0 0 48px;
    }
    .hp-ecosystems .hp-ecosystems__card {
        border-radius: 16px 16px 0 0;
        padding: 32px 16px 0;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 26px;
        line-height: 34px;
        margin: 0 0 22px;
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 16px;
        line-height: 25px;
    }
    .hp-ecosystems .hp-ecosystems__stat {
        position: static;
        width: auto;
        margin-top: 16px;
        background-color: #F4F9FF;
        backdrop-filter: none;
    }
    .hp-ecosystems .hp-ecosystems__list {
        padding: 0 16px;
    }
    .hp-ecosystems .hp-ecosystems__bar {
        flex-wrap: wrap;
        gap: 12px 20px;
        min-height: 0;
        padding: 18px 0;
    }
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        padding: 12px 0 18px;
    }
    .hp-ecosystems .hp-ecosystems__panel {
        padding: 20px 0 8px;
    }
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 22px;
        line-height: 30px;
    }
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 17px;
        line-height: 25px;
    }
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 6px 20px;
    }
}

/* ---------- cta-assets ---------- */
/* "How Did Your Assets Behave Today?" - centred two-line heading, one outline
   button, dotted/glow ground. No mascot.

   THE CONTAINER IS 1498px AT EVERY WIDTH, and it never becomes 64.06vw on this
   page. style.css caps [class^="hp-"] .wrapper at 1230px / 64.06vw (992-1535)
   / 100% (<=991), all at specificity (0,1,1) - but this page also ships
   `body.hp-2026 [class^="hp-"] .wrapper{max-width:1498px}` (homepage-b.css and
   again in homepage-b-overrides.css, which loads last) at (0,3,1) and with NO
   media query, so it wins in all three of the theme's bands. Measured with
   getComputedStyle on the assembled page: max-width is 1498px at 1920, 1536,
   1535, 1200, 992, 991, 768 and 375; the used width is min(viewport, 1498).

   So the container does not step at 1536, and the section must not either. The
   design's content column is 1499px, so at >=1498 this section is the export
   reproduced 1:1 and every value below is a plain px measured off it - no vw,
   no scale factor. Any vw expression keyed to 64.06vw is wrong twice over: it
   tracks a container that does not exist, and it lands ~34% small at 1535,
   where the container has not moved at all (measured: 373px section against
   the export's 542px, 35.5px heading against 54px).

   Measured off the 1920 export (section box y37..y579, height 542) and
   reproduced by this block at 1920 (rendered ink, same measurement):
                                        export     rendered
     section top -> line 1 ink top       170        169
     line 1 ink -> line 2 ink top         63         63   (line-height 1.1667)
     line 1 ink width                    488        488   ("How Did Your Assets")
     line 2 ink box                   347x52     347x52   ("Behave Today?")
     last line box -> button top          42         42
     button outer box                 168x49     168x49   1px border, pill
     button bottom -> section bottom     165        165
     section height                      542        542
*/
.hp-cta-assets {
    position: relative;
    padding: 160px 0 165px;
    background-color: #F1F6FF;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle 38px at 9.29% 27.75%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
        radial-gradient(circle 38px at 73.66% 27.79%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
        radial-gradient(circle 38px at 95.58% 49.19%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
        radial-gradient(circle 38px at 21.52% 64.87%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
        radial-gradient(circle 38px at 58.18% 76.18%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
        radial-gradient(circle 38px at 87.14% 79.45%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
        radial-gradient(circle 11px at 6.88% 74.19%, rgba(197,215,253,.95) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 18px at 61.58% 68.98%, rgba(197,215,253,.27) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 17px at 50.02% 62.43%, rgba(197,215,253,.27) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 13.5px at 78.00% 66.52%, rgba(197,215,253,.36) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 14px at 54.67% 12.37%, rgba(197,215,253,.27) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 8px at 71.13% 7.61%, rgba(197,215,253,.5) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 7.5px at 93.43% 67.85%, rgba(197,215,253,.39) 0, rgba(197,215,253,0) 100%),
        radial-gradient(circle 6.3px at 15.55% 77.78%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 6.3px at 46.09% 25.25%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 6.3px at 38.68% 85.23%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 6.3px at 61.70% 97.03%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 6.3px at 14.40% 50.88%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 6.3px at 56.40% 56.92%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 6.3px at 5.30% 63.50%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
        radial-gradient(circle 5.3px at 85.24% 23.72%, rgba(197,215,253,1) 0 4.4px, rgba(197,215,253,0) 5.3px),
        radial-gradient(circle 4.5px at 63.05% 58.45%, rgba(197,215,253,1) 0 3.6px, rgba(197,215,253,0) 4.5px),
        radial-gradient(circle 3.9px at 29.37% 41.86%, rgba(197,215,253,1) 0 3px, rgba(197,215,253,0) 3.9px),
        radial-gradient(circle 3.6px at 12.34% 60.12%, rgba(197,215,253,1) 0 2.7px, rgba(197,215,253,0) 3.6px),
        radial-gradient(circle 3.5px at 12.13% 12.84%, rgba(197,215,253,1) 0 2.6px, rgba(197,215,253,0) 3.5px),
        radial-gradient(circle 2.2px at 49.83% 40.70%, rgba(197,215,253,1) 0 1.3px, rgba(197,215,253,0) 2.2px),
        radial-gradient(circle 2.2px at 68.67% 75.51%, rgba(197,215,253,1) 0 1.3px, rgba(197,215,253,0) 2.2px),
        radial-gradient(circle 2.2px at 69.41% 78.13%, rgba(197,215,253,1) 0 1.3px, rgba(197,215,253,0) 2.2px);
    overflow: hidden;
}
.hp-cta-assets .wrapper {
    position: relative;
    min-height: 0;
}
.hp-cta-assets .hp-cta-assets__txt {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    /* kills the strut of the line box the inline-block button sits on, so the
       button's 49px box is the only thing between the heading and the bottom
       padding - that is what makes the section land on the export's 542px. */
    line-height: 0;
}
.hp-cta-assets .hp-cta-assets__txt h2 {
    /* The export breaks after "Assets". At 54px Roboto Light the two candidate
       lines measure 496.0px ("How Did Your Assets") and 681.9px
       ("How Did Your Assets Behave"), so any cap in (496, 682) reproduces the
       break; 10.9em = 588.6px sits in the middle of that window, which is the
       widest tolerance against a fallback face. In em, so the same break holds
       unchanged through the 992-1535 ramp and at both mobile sizes (measured:
       two lines, "Assets" last on line 1, at 1920/1536/1200/992/768/375). */
    max-width: 10.9em;
    margin: 0 auto 42px;
    color: #001A36;
    font-size: 54px;
    font-weight: 300;
    line-height: 1.1667;
    letter-spacing: 0;
    overflow-wrap: break-word;
}
.hp-cta-assets .hp-cta-assets__txt h2:last-child {
    margin-bottom: 0;
}
/* 168.0 x 49.0 in the export = 123px of 16px/500 text + 2*21 padding + 2*1
   border wide, 21px line box + 2*13 padding + 2*1 border tall. The button is a
   fixed control: it keeps these numbers at every width, which also keeps the
   tap target at 49px on mobile. */
.hp-cta-assets .hp-cta-assets__txt .btn.btn-white {
    display: inline-block;
    position: relative;
    padding: 13px 21px;
    background: transparent;
    border: 1px solid #001A36;
    border-radius: 60px;
    color: #001A36;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.hp-cta-assets .hp-cta-assets__txt .btn.btn-white::after {
    display: none;
}
.hp-cta-assets .hp-cta-assets__txt .btn.btn-white:hover,
.hp-cta-assets .hp-cta-assets__txt .btn.btn-white:focus-visible {
    background: #0061FA;
    border-color: #0061FA;
    color: #fff;
}
/* The keyboard ring has to be a pseudo-element: child-theme.css kills `outline`
   on every <a> with !important, and does the same to `box-shadow` on `.btn:focus`
   (`.btn:hover, .btn:focus { outline: none !important; box-shadow: none !important }`),
   so neither of the two usual ways of drawing one survives. Verified on the
   assembled page: after Tab, outline computes to `none` while ::before's border
   is 2px #001A36. ::after is the theme's glow, switched off above; nothing in
   the theme touches .btn::before. The ring sits 5px outside the pill, i.e. on
   the #F1F6FF ground, so it stays legible over the blue focus fill. */
.hp-cta-assets .hp-cta-assets__txt .btn.btn-white::before {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border: 2px solid transparent;
    border-radius: 60px;
    pointer-events: none;
}
.hp-cta-assets .hp-cta-assets__txt .btn.btn-white:focus-visible::before {
    border-color: #001A36;
}
.hp-cta-assets__mascot {
    display: none;
}

/* 992-1535. The container is min(viewport, 1498), so it is still the full
   1498px of the export from 1535 down to 1498 and only then starts tracking the
   viewport. Each value therefore holds its 1:1 export figure down to 1498 and
   ramps linearly to the <=991.98px figure at 1010, where the clamp floor takes
   over: value(V) = v_mobile + (v_design - v_mobile) * (V - 1010) / 488.
       padding-top     82 -> 160   78/488 = 15.984vw - 79.44px
       padding-bottom  86 -> 165   79/488 = 16.189vw - 77.51px
       h2 font-size    32 ->  54   22/488 =  4.508vw - 13.53px
       h2 margin-bot   24 ->  42   18/488 =  3.689vw - 13.26px
   Both ends of the band are inside a saturated clamp - the ceiling from 1498 to
   1535, the floor from 992 to 1010 - so neither boundary can move even if
   `vw` and the media query disagree by a scrollbar's width. Measured across
   1535/1536 and 991/992: identical values on both sides of each. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-cta-assets {
        padding: clamp(82px, 15.984vw - 79.44px, 160px) 0 clamp(86px, 16.189vw - 77.51px, 165px);
    }
    /* below 1498 the wrapper is the viewport, and the theme gives it no gutter
       until 991 - keep the same 20px it has below, so nothing can reach the
       edge in 992-1497. The content is centred, so this is invisible at 1535
       where the wrapper is back to its 1498px cap. */
    .hp-cta-assets .wrapper {
        padding: 0 20px;
    }
    .hp-cta-assets .hp-cta-assets__txt h2 {
        margin-bottom: clamp(24px, 3.689vw - 13.26px, 42px);
        font-size: clamp(32px, 4.508vw - 13.53px, 54px);
    }
    /* style.css's own band puts .btn.btn-white on font-size:1.25vw and
       padding:0.83vw 2.5vw at (0,2,0); the base rule above is (0,4,0) and
       already wins - restated so the fixed control size reads as deliberate. */
    .hp-cta-assets .hp-cta-assets__txt .btn.btn-white {
        padding: 13px 21px;
        font-size: 16px;
        line-height: 21px;
        border-radius: 60px;
    }
}

/* <=991.98px: the wrapper is the viewport. 991.98 rather than 991 so the
   fractional widths in [991, 992) - which the theme's own 991/992 pair leaves
   matched by nothing, so .wrapper falls back to a 1498px cap with no gutter -
   are caught here too. */
@media only screen and (max-width: 992px) {
    .hp-cta-assets {
        padding: 82px 0 86px;
        background-image:
            radial-gradient(circle 38px at 9.29% 27.75%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 38px at 73.66% 27.79%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 38px at 21.52% 64.87%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 38px at 87.14% 79.45%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 11px at 6.88% 74.19%, rgba(197,215,253,.95) 0, rgba(197,215,253,0) 100%),
            radial-gradient(circle 14px at 54.67% 12.37%, rgba(197,215,253,.27) 0, rgba(197,215,253,0) 100%),
            radial-gradient(circle 7.5px at 93.43% 67.85%, rgba(197,215,253,.39) 0, rgba(197,215,253,0) 100%),
            radial-gradient(circle 6.3px at 46.09% 25.25%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 6.3px at 15.55% 77.78%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 6.3px at 61.70% 97.03%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 6.3px at 5.30% 63.50%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 5.3px at 85.24% 23.72%, rgba(197,215,253,1) 0 4.4px, rgba(197,215,253,0) 5.3px),
            radial-gradient(circle 4.5px at 63.05% 58.45%, rgba(197,215,253,1) 0 3.6px, rgba(197,215,253,0) 4.5px),
            radial-gradient(circle 3.9px at 29.37% 41.86%, rgba(197,215,253,1) 0 3px, rgba(197,215,253,0) 3.9px),
            radial-gradient(circle 3.6px at 12.34% 60.12%, rgba(197,215,253,1) 0 2.7px, rgba(197,215,253,0) 3.6px);
    }
    .hp-cta-assets .wrapper {
        max-width: 100%;
        padding: 0 20px;
        min-height: 0;
    }
    .hp-cta-assets .hp-cta-assets__txt h2 {
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 1.1667;
    }
    /* style.css's <=991 block turns .btn.btn-white into display:block; the
       button has to stay a shrink-to-fit pill, and it keeps its 16px/49px
       control size all the way down so the tap target never drops below 44px. */
    .hp-cta-assets .hp-cta-assets__txt .btn.btn-white {
        display: inline-block;
        padding: 13px 21px;
        font-size: 16px;
        line-height: 21px;
        border-radius: 60px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-cta-assets {
        padding: 60px 0 66px;
        background-image:
            radial-gradient(circle 38px at 9.29% 27.75%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 38px at 87.14% 79.45%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 38px at 73.66% 20.00%, rgba(197,215,253,1) 0 7px, rgba(216,231,255,1) 7px 17px, rgba(197,215,253,.25) 17px, rgba(197,215,253,0) 100%),
            radial-gradient(circle 11px at 6.88% 74.19%, rgba(197,215,253,.95) 0, rgba(197,215,253,0) 100%),
            radial-gradient(circle 14px at 54.67% 8.00%, rgba(197,215,253,.27) 0, rgba(197,215,253,0) 100%),
            radial-gradient(circle 6.3px at 15.55% 90.00%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 6.3px at 89.00% 46.00%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 6.3px at 61.70% 97.03%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 6.3px at 5.30% 40.00%, rgba(197,215,253,1) 0 5.4px, rgba(197,215,253,0) 6.3px),
            radial-gradient(circle 4.5px at 33.00% 15.00%, rgba(197,215,253,1) 0 3.6px, rgba(197,215,253,0) 4.5px),
            radial-gradient(circle 3.6px at 78.00% 62.00%, rgba(197,215,253,1) 0 2.7px, rgba(197,215,253,0) 3.6px),
            radial-gradient(circle 3.5px at 24.00% 57.00%, rgba(197,215,253,1) 0 2.6px, rgba(197,215,253,0) 3.5px);
    }
    .hp-cta-assets .wrapper {
        padding: 0 16px;
    }
    .hp-cta-assets .hp-cta-assets__txt h2 {
        margin-bottom: 22px;
        font-size: 26px;
        line-height: 1.2;
    }
}

/* ---------- logos-b ---------- */
/* "Trusted by Global Industry Leaders". Full-bleed strip: the track is a direct
   child of the section, so it already spans the viewport - no 100vw and no
   negative margins, and therefore no scrollbar-induced overflow. */
.hp-logos-b {
    background-color: #fff;
    padding: 119px 0 121px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.hp-logos-b .wrapper > h2 {
    margin: 0 0 44px;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    color: #001A36;
    text-align: center;
}

/* The whole falloff is this one positional mask. Its stops are the alpha curve
   measured off the design export (full opacity out to 14% of the viewport
   either side of the centre, clear white from 11.7% out), so a logo fades
   across its own width as it travels - what a per-slide opacity cannot do.
   The plateau is half the viewport wide and every breakpoint caps a logo below
   that, so the hero is never eaten by its own fade. The one place the two nearly
   meet is a 6.9:1 logo on a 375px phone: 190px wide against a 180px plateau, and
   its outermost 5px still render at alpha .95. */
.hp-logos-b__track {
    width: 100%;
    padding: 10px 0; /* room for the focus ring, which the track would clip */
    --hp-logos-b-fade: linear-gradient(to right,
            rgba(0, 0, 0, 0) 11.7%,
            rgba(0, 0, 0, .12) 12.9%,
            rgba(0, 0, 0, .27) 15.1%,
            rgba(0, 0, 0, .41) 17.3%,
            rgba(0, 0, 0, .55) 20.2%,
            rgba(0, 0, 0, .70) 25.6%,
            rgba(0, 0, 0, .88) 31.9%,
            rgba(0, 0, 0, 1) 36%,
            rgba(0, 0, 0, 1) 64%,
            rgba(0, 0, 0, .88) 68.1%,
            rgba(0, 0, 0, .70) 74.4%,
            rgba(0, 0, 0, .55) 79.8%,
            rgba(0, 0, 0, .41) 82.7%,
            rgba(0, 0, 0, .27) 84.9%,
            rgba(0, 0, 0, .12) 87.1%,
            rgba(0, 0, 0, 0) 88.3%);
    -webkit-mask-image: var(--hp-logos-b-fade);
    mask-image: var(--hp-logos-b-fade);
}
.hp-logos-b__track .swiper-wrapper {
    align-items: center;
    box-sizing: border-box;
}
/* style.css paints .swiper-slide-active/-prev/-next #DDEDFF and forces
   height:auto for the older carousels, so this needs the extra class to win. */
.hp-logos-b .swiper-slide.hp-logos-b__slide {
    width: auto;
    flex-shrink: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}
/* Slides are laid out at the *active* size, so the hero never overlaps its
   neighbours - every other logo simply shrinks inward. Swiper puts
   .swiper-slide-active on the centred slide; that class is the only piece of
   state the script owns.
   The shrink is anchored to the bottom of the row, not its middle: in the design
   export the eight quiet logos share a bottom edge with the hero (their ink runs
   to y263 against the hero's y262, and they centre on y244.3 while the hero
   centres on y237). Scaling about 50% 50% lifts them 6.3px off that shared
   edge; 50% 100% lands them on y245 - 0.7px from the export. */
.hp-logos-b__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    filter: grayscale(1);
    transform: scale(.72);
    transform-origin: 50% 100%;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), filter .55s ease;
}
.hp-logos-b__link img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
    object-position: center;
}
.hp-logos-b .swiper-slide-active .hp-logos-b__link {
    filter: none;
    transform: scale(1);
}
/* child-theme.css carries a blanket "a, a:hover, a:focus, a:active { outline:
   none !important }". Without matching !important here the keyboard focus ring
   computes to outline-style:none and never paints, even though :focus-visible
   matches - so the only way to see where the keyboard is would be the strip
   sliding on its own. */
.hp-logos-b__link:focus-visible {
    outline: 2px solid #001A36 !important;
    outline-offset: 6px;
    border-radius: 2px;
}

/* Fewer than two logos: no carousel, no fade - just centre the one we have. */
.hp-logos-b--single .hp-logos-b__track {
    --hp-logos-b-fade: none;
}
.hp-logos-b--single .swiper-wrapper {
    justify-content: center;
}
.hp-logos-b--single .hp-logos-b__link {
    filter: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .hp-logos-b__link {
        transition: none;
    }
}

@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-logos-b {
        padding: 7.75vw 0 7.88vw;
    }
    .hp-logos-b .wrapper > h2 {
        margin: 0 0 2.87vw;
        font-size: 1.955vw;
        line-height: 2.61vw;
    }
    .hp-logos-b .swiper-slide.hp-logos-b__slide {
        height: 3.26vw;
    }
    .hp-logos-b__link img {
        height: 3.26vw;
        max-width: 23.45vw;
    }
}

@media only screen and (max-width: 992px) {
    .hp-logos-b {
        padding: 56px 0 50px;
    }
    .hp-logos-b .wrapper > h2 {
        margin: 0 0 22px;
        font-size: 20px;
        line-height: 30px;
    }
    .hp-logos-b .swiper-slide.hp-logos-b__slide {
        height: 34px;
    }
    .hp-logos-b__link img {
        height: 34px;
        max-width: 240px;
    }
    .hp-logos-b__track {
        --hp-logos-b-fade: linear-gradient(to right,
                rgba(0, 0, 0, 0) 8%,
                rgba(0, 0, 0, .12) 9%,
                rgba(0, 0, 0, .27) 10.8%,
                rgba(0, 0, 0, .41) 12.6%,
                rgba(0, 0, 0, .55) 15%,
                rgba(0, 0, 0, .70) 19.4%,
                rgba(0, 0, 0, .88) 24.6%,
                rgba(0, 0, 0, 1) 28%,
                rgba(0, 0, 0, 1) 72%,
                rgba(0, 0, 0, .88) 75.4%,
                rgba(0, 0, 0, .70) 80.6%,
                rgba(0, 0, 0, .55) 85%,
                rgba(0, 0, 0, .41) 87.4%,
                rgba(0, 0, 0, .27) 89.2%,
                rgba(0, 0, 0, .12) 91%,
                rgba(0, 0, 0, 0) 92%);
    }
}

@media only screen and (max-width: 576px) {
    .hp-logos-b {
        padding: 40px 0 34px;
    }
    .hp-logos-b .wrapper > h2 {
        margin: 0 0 16px;
        font-size: 18px;
        line-height: 26px;
    }
    .hp-logos-b .swiper-slide.hp-logos-b__slide {
        height: 28px;
    }
    .hp-logos-b__link img {
        height: 28px;
        max-width: min(190px, 52vw);
    }
    .hp-logos-b__track {
        --hp-logos-b-fade: linear-gradient(to right,
                rgba(0, 0, 0, 0) 3%,
                rgba(0, 0, 0, .12) 4.2%,
                rgba(0, 0, 0, .27) 6.2%,
                rgba(0, 0, 0, .41) 8.3%,
                rgba(0, 0, 0, .55) 11.1%,
                rgba(0, 0, 0, .70) 16.1%,
                rgba(0, 0, 0, .88) 22.1%,
                rgba(0, 0, 0, 1) 26%,
                rgba(0, 0, 0, 1) 74%,
                rgba(0, 0, 0, .88) 77.9%,
                rgba(0, 0, 0, .70) 83.9%,
                rgba(0, 0, 0, .55) 88.9%,
                rgba(0, 0, 0, .41) 91.7%,
                rgba(0, 0, 0, .27) 93.8%,
                rgba(0, 0, 0, .12) 95.8%,
                rgba(0, 0, 0, 0) 97%);
    }
}

/* ---------- testimonials-b ---------- */
/* "Recognized by analysts." - heading plus two outline arrows inside .wrapper,
   then a full-bleed carousel of white cards underneath.

   The track is a direct child of the section, so it already spans the viewport:
   no 100vw, no negative margins, and therefore no scrollbar-induced overflow.

   One set of custom properties drives the strip and every stop of the edge mask,
   all of them continuous functions of the viewport, so nothing about the card
   geometry steps at a breakpoint. The two media queries below only re-tune what
   is anchored to .wrapper (which the theme itself steps at 992) and the
   small-screen head layout. Every vw factor is the design value / 1920, which is
   the idiom the already-shipped .hp-cta-assets uses - clamp(32px, 2.8125vw,
   54px) for its own 54px heading. */
.hp-testimonials-b {
    /* Card and gap are the design's own share of the frame: a 520px card on a
       546px pitch in a 1920 frame. The 360px floor stops the card getting so
       narrow around 1000-1300px that a long quote doubles the height of the row;
       the 520px ceiling stops it outgrowing the design on an ultrawide monitor. */
    --hp-tb-card: clamp(360px, 27.09vw, 520px);
    --hp-tb-gap: clamp(12px, 1.36vw, 26px);
    --hp-tb-pitch: calc(var(--hp-tb-card) + var(--hp-tb-gap));

    /* THE EDGE FALLOFF IS ONE POSITIONAL MASK ON THE TRACK, not a per-card
       opacity. The export proves it: sampling the card fill along y=605 at 1920,
       the alpha ramps straight through card boundaries - the left-hand card
       reads .07 at x190, .50 at x324 and .93 at x459 while still being one card,
       and the card spanning x1057-1577 is solid until x1448 and then falls to
       .57 by its own right edge. A per-slide opacity can do neither.

       Fitting the 14 quantisation steps of a #FFF card over the #F1F6FF ground:
       alpha 0 at x178.8, 1 at x492.2 (ramp 313.4); 1 until x1437.8, 0 at x1752.3
       (ramp 314.5). Symmetrised about the viewport centre that is
       pad = 472.8 = 0.8659 pitches and ramp = 313.95 = 0.575 pitches - expressed
       in pitches so the opaque plateau stays 1.73 cards wide at every width
       instead of drifting with the viewport.

       --hp-tb-ramp is capped at --hp-tb-pad so the fade always finishes inside
       the viewport; uncapped, a narrow screen would start its left edge at half
       opacity and cut the card off with a hard line. */
    --hp-tb-pad: max(20px, calc(50% - var(--hp-tb-pitch) * 0.8659));
    --hp-tb-ramp: min(var(--hp-tb-pad), calc(var(--hp-tb-pitch) * 0.575));
    --hp-tb-fade: linear-gradient(to right,
            rgba(0, 0, 0, 0) calc(var(--hp-tb-pad) - var(--hp-tb-ramp)),
            rgba(0, 0, 0, 1) var(--hp-tb-pad),
            rgba(0, 0, 0, 1) calc(100% - var(--hp-tb-pad)),
            rgba(0, 0, 0, 0) calc(100% - var(--hp-tb-pad) + var(--hp-tb-ramp)));

    /* Card interior, measured off the export at 1920: side padding 35 (content
       x546 against card x511), top 26 (the 40px logo band starts at y293.75),
       27 from the band to the quote (first quote line ink at y363), bottom 30
       (role box ends y587.4, card at y617.5), radius 20 (fitted against the
       corner's coverage profile - r=20 lands within 0.06px^2, r=24 is far too
       round), min-height 350 (the card is exactly 350.0 tall in the export). */
    --hp-tb-pad-x: clamp(20px, 1.83vw, 35px);
    --hp-tb-pad-t: clamp(20px, 1.36vw, 26px);
    --hp-tb-pad-b: clamp(22px, 1.57vw, 30px);
    --hp-tb-radius: clamp(14px, 1.05vw, 20px);
    --hp-tb-min: clamp(260px, 18.24vw, 350px);
    --hp-tb-logo: clamp(30px, 2.09vw, 40px);
    --hp-tb-logo-gap: clamp(20px, 1.41vw, 27px);
    /* The export wraps its quotes at 421-439px inside a card whose left inset is
       a plain 35px, so the copy is capped rather than filling the 450px content
       box. Inert on any card narrower than about 500px, so it needs no
       breakpoint of its own. */
    --hp-tb-measure: 430px;
    --hp-tb-arrow: clamp(40px, 3.13vw, 60px);

    position: relative;
    z-index: 1;
    /* The design ends the section on the bottom edge of the cards - the 160px of
       air below them in the export belongs to cta-assets' padding-top, which is
       clamp(64px, 8.33vw, 160px) and lands on the card bottom at 1920. */
    padding: clamp(44px, 5.21vw, 100px) 0 0;
    background-color: #F1F6FF;
    background-repeat: no-repeat;
    /* Dot scatter measured off the export: centres (182.5,18.5) d13,
       (229,74) d9, (59.5,37.5) d4, (420.5,38.5) d4, plus two soft glows that the
       leftmost card half-covers. Their cores sample (190,212,252) - this section
       runs a shade deeper than the #C5D7FD the CTA below uses, whose own dots
       sample exactly (197,215,253). The y offsets stay in px so they hold to the
       top edge whatever the section grows to; x stays in % so the scatter
       spreads with the viewport. */
    background-image:
        radial-gradient(circle 6.5px at 9.51% 18.5px, rgba(190, 212, 252, 1) 0 5.2px, rgba(190, 212, 252, 0) 6.5px),
        radial-gradient(circle 4.6px at 11.93% 74px, rgba(190, 212, 252, 1) 0 3.6px, rgba(190, 212, 252, 0) 4.6px),
        radial-gradient(circle 2.2px at 3.10% 37.5px, rgba(190, 212, 252, 1) 0 1.6px, rgba(190, 212, 252, 0) 2.2px),
        radial-gradient(circle 2.2px at 21.90% 38.5px, rgba(190, 212, 252, 1) 0 1.6px, rgba(190, 212, 252, 0) 2.2px),
        radial-gradient(circle 22px at 8.07% 272px, rgba(190, 212, 252, .30) 0, rgba(190, 212, 252, 0) 100%),
        radial-gradient(circle 13px at 20.70% 268px, rgba(190, 212, 252, .22) 0, rgba(190, 212, 252, 0) 100%),
        /* The top wash, sampled every 10px down a column clear of dots and cards:
           228 at y0, 233 at y20, 235 at y40, 237 at y60, 239 at y80, 240 at y100,
           242 at y130, 243 from y160 to y240, back to 241 by y285. */
        linear-gradient(180deg,
            #E4EFFE 0,
            #E9F2FE 20px,
            #EBF3FE 40px,
            #EDF4FE 60px,
            #EFF5FF 80px,
            #F0F6FF 100px,
            #F2F7FF 130px,
            #F3F8FF 165px,
            #F3F8FF 235px,
            #F1F6FF 290px);
    overflow: hidden;
}

/* head: heading left, arrows right, bottom-aligned. In the export the arrow
   circles run y160-219 and the two-line heading block runs y100-220, so they sit
   on the same bottom edge, not on a shared centre. */
.hp-testimonials-b__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 2.09vw, 40px);
    /* 47.5, not 48: the track has to start at y267.5 (section padding 100 +
       heading block 120 + 47.5), which is where the export puts the card top. */
    padding-bottom: clamp(24px, 2.48vw, 47.5px);
}
/* [class^="hp-"] h2 in style.css sets 32px/48px/#000 at (0,1,1) - the doubled
   class here outranks it. */
.hp-testimonials-b .hp-testimonials-b__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #001A36;
    /* 44px: the export's ascender height is 33px and its x-height 23.5px, which
       are Roboto's 0.75em and 0.5283em at 44. Scaled by 44/1920 with a floor, so
       it never steps at the theme's 1536 or 992 boundaries. */
    font-size: clamp(26px, 2.3vw, 44px);
    line-height: 1.3636; /* 60/44 */
    font-weight: 700;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

/* The arrows only appear once the script has claimed them - either Swiper is
   driving the strip or the no-Swiper branch is scrolling the track by hand - and
   only while there is somewhere to go. Hidden by default, so a page whose JS
   never ran shows no dead buttons and keeps the track's own scrollbar instead.
   The inline script sits directly under the markup, so this never flashes. */
.hp-testimonials-b__nav-group {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: clamp(12px, 1.57vw, 30px);
}
.hp-testimonials-b--live .hp-testimonials-b__nav-group {
    display: flex;
}
.hp-testimonials-b .hp-testimonials-b__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hp-tb-arrow);
    height: var(--hp-tb-arrow);
    margin: 0;
    padding: 0;
    background: transparent;
    /* The ring is 1.5px: integrating the ring colour across the widest point of
       the circle in the export gives 1.50 covered pixels on both sides. It is an
       inset shadow rather than a border because Chrome floors a fractional
       border-width to a whole pixel at DPR 1 - a 1.5px border measures 1.00
       covered pixels on screen, this measures 1.52. */
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px #698CAE;
    color: #698CAE;
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease;
}
/* chevron ink is 12 x 17 inside a 60px circle in the export, drawn with a ~2.5px
   round-capped stroke; 0.2 / 0.3 of the circle keeps that ratio at every size */
.hp-testimonials-b .hp-testimonials-b__nav svg {
    display: block;
    width: calc(var(--hp-tb-arrow) * .2);
    height: calc(var(--hp-tb-arrow) * .3);
    overflow: visible;
}
.hp-testimonials-b .hp-testimonials-b__nav:hover {
    background: #001A36;
    box-shadow: inset 0 0 0 1.5px #001A36;
    color: #fff;
}
/* child-theme.css:17017 carries a blanket "button, button:hover, button:focus,
   button:active, a, a:hover ... { outline: none !important }". Without matching
   !important the keyboard ring computes to outline-style:none and never paints. */
.hp-testimonials-b .hp-testimonials-b__nav:focus-visible {
    outline: 2px solid #001A36 !important;
    outline-offset: 3px;
}
/* Not enough cards to move: Swiper locks the strip and flags both buttons. */
.hp-testimonials-b .hp-testimonials-b__nav.swiper-button-lock {
    display: none;
}
/* No loop and sitting on an end. Kept focusable, so aria-disabled, not disabled. */
.hp-testimonials-b .hp-testimonials-b__nav[aria-disabled="true"] {
    opacity: .35;
    cursor: default;
}
.hp-testimonials-b .hp-testimonials-b__nav[aria-disabled="true"]:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #698CAE;
    color: #698CAE;
}

.hp-testimonials-b__track {
    width: 100%;
    /* Swiper only sets the grab cursor when it decides the device is not a touch
       one; state it here so a desktop pointer always advertises the drag. Swiper
       still writes cursor:grabbing inline while a drag is in flight. */
    cursor: grab;
    -webkit-mask-image: var(--hp-tb-fade);
    mask-image: var(--hp-tb-fade);
}
/* If Swiper never runs - script blocked, an error earlier on the page, a build
   that drops the bundle - swiper.css still leaves the track overflow:hidden and
   the strip becomes a dead row of clipped cards. Until Swiper stamps
   .swiper-initialized, let the track scroll natively so the content is always
   reachable, with snapping so it still rests on a card. */
.hp-testimonials-b__track:not(.swiper-initialized) {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
/* Only hide the scrollbar once the script is live and the arrows are drawn.
   With no JS at all there is nothing else to drive the strip and a desktop mouse
   has no other way in, so the bar has to stay. */
.hp-testimonials-b--live .hp-testimonials-b__track:not(.swiper-initialized) {
    scrollbar-width: none;
}
.hp-testimonials-b--live .hp-testimonials-b__track:not(.swiper-initialized)::-webkit-scrollbar {
    width: 0;
    height: 0;
}
/* THE FADE ONLY BELONGS ON A STRIP THAT CAN MOVE. It sells cards continuing past
   the edge of the screen; against a strip that is standing still it just erases
   its own outer cards and the reader has no way to bring them back. Two cases
   where that happens. watchOverflow has locked a strip that already fits: with
   three testimonials at 1920 the cards sit at 154-674, 700-1220 and 1246-1766,
   and the mask sampled along y=605 inside that motionless first card read .07 at
   x190, .21 at x250 and .50 at x324, while the last card's outer 19px was fully
   transparent. And the no-Swiper fallback, where the track rests at scrollLeft 0
   with its first card sitting under the left ramp. */
.hp-testimonials-b__track.is-static,
.hp-testimonials-b__track:not(.swiper-initialized) {
    -webkit-mask-image: none;
    mask-image: none;
}
.hp-testimonials-b__track:not(.swiper-initialized) .swiper-slide {
    scroll-snap-align: center;
}
/* stretch: every card takes the height of the tallest one in the strip */
.hp-testimonials-b__track .swiper-wrapper {
    align-items: stretch;
    box-sizing: border-box;
}
/* style.css:2442 paints .swiper-slide-active/-prev/-next #DDEDFF at (0,2,0), so
   a single-class rule here loses and blue plates show through behind the cards.
   Three classes take it back. The gap lives in the slide's own padding rather
   than Swiper's spaceBetween, so one custom property drives slide width, card
   width and gap together and the breakpoints need no JS. Swiper still measures
   the slide correctly because the padding is inside offsetWidth. */
.hp-testimonials-b .swiper-slide.hp-testimonials-b__slide {
    box-sizing: border-box;
    display: flex;
    width: calc(var(--hp-tb-card) + var(--hp-tb-gap));
    max-width: 100%;
    height: auto;
    padding: 0 calc(var(--hp-tb-gap) / 2);
    background-color: transparent;
}

.hp-testimonials-b .hp-testimonials-b__card {
    box-sizing: border-box;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: var(--hp-tb-min);
    margin: 0;
    padding: var(--hp-tb-pad-t) var(--hp-tb-pad-x) var(--hp-tb-pad-b);
    background: #fff;
    border-radius: var(--hp-tb-radius);
}

/* Fixed band whether or not there is a logo, so the quotes start on one line
   across the strip - the export lines all four quotes up on y363 behind logos
   that run from 15px (Volvo) to 40px (Renault-Nissan-Mitsubishi) tall. */
.hp-testimonials-b__logo {
    display: flex;
    align-items: center;
    height: var(--hp-tb-logo);
    margin-bottom: var(--hp-tb-logo-gap);
    line-height: 0;
}
/* The live site's webp plugin wraps some attachments in <picture> and leaves
   others as a bare <img>; both have to behave. When it wraps, the <picture> is
   the flex item and a percentage max-height on the <img> inside it has no
   definite parent height to resolve against - a 60x300 logo then renders at its
   full 300px and lands on top of the quote. Hence an absolute cap. */
.hp-testimonials-b__logo picture,
.hp-testimonials-b__logo a {
    display: flex;
    align-items: center;
    max-width: 100%;
    line-height: 0;
}
.hp-testimonials-b__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(190px, 100%);
    max-height: var(--hp-tb-logo);
    object-fit: contain;
    object-position: left center;
}
.hp-testimonials-b__logo a:focus-visible {
    outline: 2px solid #001A36 !important;
    outline-offset: 4px;
    border-radius: 2px;
}

.hp-testimonials-b .hp-testimonials-b__quote {
    margin: 0;
    padding: 0;
    max-width: var(--hp-tb-measure);
    border: 0;
    quotes: none;
}
/* [class^="hp-"] p sets 16px/25px/#586373 - the doubled class outranks it.
   Weight 300, not 400: rendering the export's own two quotes in Roboto Light
   reproduces its line breaks and every line width to within 1px
   (415/398/400/378/263 against the export's 416/398/400/379/263, and
   406/401/389/421/418/111 against 407/402/390/421/419/112). At 400 the same copy
   comes out 1.7% wide and breaks in different places. */
.hp-testimonials-b .hp-testimonials-b__quote p {
    margin: 0;
    color: #001A36;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    overflow-wrap: anywhere;
}
.hp-testimonials-b .hp-testimonials-b__quote p + p {
    margin-top: 12px;
}

/* Bottom-anchored: in the export the five-line and six-line quotes both put the
   author name cap-top on y526.5, so the block is pinned to the card floor, not
   flowed after the quote. padding-top is the floor the tallest card keeps - 41px
   between the quote's last line box and the name box in card three. */
.hp-testimonials-b .hp-testimonials-b__author {
    margin-top: auto;
    padding-top: clamp(24px, 2.09vw, 40px);
}
.hp-testimonials-b .hp-testimonials-b__name {
    display: block;
    color: #001A36;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    overflow-wrap: anywhere;
}
.hp-testimonials-b .hp-testimonials-b__role {
    display: block;
    margin-top: 8px;
    color: #667686;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    overflow-wrap: anywhere;
}

/* One testimonial: no carousel, no arrows, no fade - just centre the card. */
.hp-testimonials-b--single .hp-testimonials-b__track {
    --hp-tb-fade: none;
    overflow-x: hidden;
}
.hp-testimonials-b--single .swiper-wrapper {
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .hp-testimonials-b .hp-testimonials-b__nav {
        transition: none;
    }
    /* the JS drops Swiper's own speed to 0 as well */
    .hp-testimonials-b__track:not(.swiper-initialized) {
        scroll-behavior: auto;
    }
}

/* Below 992 the theme takes .wrapper to full width with a 20px gutter, so follow
   it there and nowhere else. 991.98 rather than 992: the theme's own mobile
   block is max-width:991px, and a rule that also claims 992 would leave this one
   section mobile-styled at exactly the width where every other section has
   already switched to the vw scale. The card drops out of the viewport-share
   formula here because 27vw of a phone is unreadably narrow; min(84vw, 360px)
   meets the 360px floor exactly at 991, so the strip still does not step. */
@media only screen and (max-width: 992px) {
    .hp-testimonials-b {
        --hp-tb-card: min(84vw, 360px);
        --hp-tb-pad-t: 22px;
        --hp-tb-pad-b: 26px;
        background-image:
            radial-gradient(circle 6.5px at 9.51% 18.5px, rgba(190, 212, 252, 1) 0 5.2px, rgba(190, 212, 252, 0) 6.5px),
            radial-gradient(circle 4.6px at 14.5% 62px, rgba(190, 212, 252, 1) 0 3.6px, rgba(190, 212, 252, 0) 4.6px),
            radial-gradient(circle 2.2px at 3.10% 37.5px, rgba(190, 212, 252, 1) 0 1.6px, rgba(190, 212, 252, 0) 2.2px),
            radial-gradient(circle 18px at 8.07% 210px, rgba(190, 212, 252, .28) 0, rgba(190, 212, 252, 0) 100%),
            linear-gradient(180deg, #E4EFFE 0, #EDF4FE 42px, #F2F7FF 90px, #F3F8FF 140px, #F1F6FF 205px);
    }
    /* the theme's own mobile .wrapper rule only reaches 991px */
    .hp-testimonials-b .wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    .hp-testimonials-b__logo img {
        max-width: min(160px, 100%);
    }
    .hp-testimonials-b .hp-testimonials-b__name {
        font-size: 18px;
        line-height: 24px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-testimonials-b .wrapper {
        padding: 0 16px;
    }
    /* No room for a 40px circle beside a 26px heading - drop the arrows under it,
       still on the page's left edge and inside thumb reach. */
    .hp-testimonials-b__head {
        display: block;
    }
    .hp-testimonials-b__nav-group {
        margin-top: 20px;
    }
}