/* ============================================================
   Homepage 2026 - client-specified overrides

   These values were given explicitly by the client and take precedence over
   anything derived in dist/css/homepage-b.css. They live in their own file,
   enqueued after it, so a regeneration of the section CSS cannot silently
   revert them.
   ============================================================ */

/* The 2026 design is drawn on a ~1499px content column; the theme caps
   [class^="hp-"] .wrapper at 1230px, which renders every section ~18% small. */
body.hp-2026 [class^="hp-"] .wrapper {
    max-width: 1498px;
}

/* ============================================================
   Desktop values.

   Gated at min-width:993px to follow the site's own breakpoint convention:
   across style.css, child-theme.css and alex-css.css the dominant pairing is
   max-width:992px (375 uses) with min-width:993px (100 uses), and max-width:576px
   (583 uses) for mobile. Below 993px each section's own responsive CSS in
   homepage-b.css takes over, which is what these fixed px values would otherwise
   suppress - a 74px hero title does not fit a 375px screen.
   ============================================================ */
@media only screen and (min-width: 993px) {
    /* ---------- hero-b ---------- */
    .hp-hero-b .hp-hero-b__title {
        /* Client review 14 Sep, point 10: "Behavioral Intelligence" has to stay on
           one line. At 74px it measures 759.1px and 51.7% of the 1468 head gave it
           759.0 - short by a tenth of a pixel, which is why it broke after the
           first word here and not on the client's Mac. The export's own title box
           is 761 (node 2177:1980, 761x253 = the same three lines), and the next
           break point is "for Cyber & Operational" at 778.7, so 52.4% / 769px sits
           in the middle of that window and survives a font that renders a little
           wider or narrower. */
        flex: 0 1 52.4%;
        margin: 0;
        color: #001A36;
        font-size: 74px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .hp-hero-b .hp-hero-b__aside p {
        margin: 0;
        color: #001A36;
        font-size: 30px;
        line-height: 1.5;
    }

    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        display: inline-block;
        margin-top: 35px;
        padding: 14px 21px;
        background: transparent;
        border: 1px solid #001A36;
        border-radius: 60px;
        color: #001A36;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        text-decoration: none;
        transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    }

    .hp-hero-b__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding-bottom: 60px;
    }

    /* ---------- pillars ---------- */
    .hp-pillars {
        background: #F1F6FF;
        padding: 55px 0;
    }

    /* ---------- testimonials-b ---------- */
    /* Larger logo band than the derived value. Redeclared on the section itself so
       it wins over the custom property set in homepage-b.css. */
    .hp-testimonials-b {
        --hp-tb-logo: clamp(65px, 2.09vw, 101px);
    }

    /* ---------- agents ---------- */
    .hp-agents {
        background-color: #F1F6FF;
        padding: clamp(42px, 7.2vw, 135px) 0 clamp(34px, 6.12vw, 110px);
    }

    .hp-agents .wrapper>h2 {
        margin: 0 0 clamp(30px, 3.91vw, 70px);
        font-size: clamp(26px, 2.35vw, 44px);
        font-weight: 700;
        line-height: 1.25;
        color: #001A36;
        text-align: center;
    }

    .hp-agents__cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .67%;
        margin-top: clamp(20px, 2.47vw, 50px);
    }

    .hp-agents__col {
        padding-left: 7.5%;
        overflow-wrap: break-word;
    }

    .hp-agents .hp-agents__col h3 {
        margin: 0 0 23px;
        font-size: 20px;
        font-weight: 700;
        line-height: 22px;
        color: #0061FA;
    }

    .hp-agents .hp-agents__col-txt {
        max-width: 500px;
    }
    .hp-agents .hp-agents__col-txt p {
        margin: 0 0 8px;
        font-size: 16px;
        line-height: 1.5;
        color: #001A36;
    }

    .hp-agents {
        background-color: #F1F6FF;
        padding: clamp(42px, 7.2vw, 135px) 0 clamp(34px, 6.12vw, 60px);
    }

    /* ---------- ecosystems ---------- */
    .hp-ecosystems .hp-ecosystems__card {
        position: relative;
        background-color: #fff;
        border-radius: 24px 24px 0 0;
        padding: 80px 6.5% 0;
    }

    .hp-ecosystems .hp-ecosystems__txt {
        max-width: 520px;
    }

    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 44px;
        font-weight: 700;
        line-height: 1.3;
        color: #001A36;
        margin: 0 0 90px;
    }

    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 26px;
        line-height: 1.3;
        color: #001A36;
        margin: 0;
    }

    .hp-ecosystems .hp-ecosystems__media {
        position: relative;
        width: 78.3%;
        max-width: 804px;
        margin: -20px -80px 0 0;
    }

    .hp-ecosystems .hp-ecosystems__intro {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 105px;
    }

    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 31px;
        font-weight: 400;
        line-height: 1.3;
        color: #0061FA;
        margin: 0 0 30px;
    }

    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 20px;
        line-height: 22px;
        color: #001A36;
        margin: 0;
    }

    .hp-ecosystems .hp-ecosystems__panel {
        position: relative;
        display: none;
        grid-template-columns: 21% 28.5% 1fr;
        column-gap: 2.6%;
        padding: 32px 0 16px;
    }

    .hp-ecosystems .hp-ecosystems__bar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 90px;
        min-height: 92px;
    }

    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 16px;
        line-height: 22px;
        color: #001A36;
        margin: 0;
    }

    .hp-ecosystems .hp-ecosystems__toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: 0;
        border: 0;
        background: none;
        font-size: 15px;
        line-height: 22px;
        color: #698CAE;
        text-align: left;
        font-weight: 300;
    }

    /* ---------- testimonials-b ---------- */
    .hp-testimonials-b .hp-testimonials-b__title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        color: #001A36;
        font-size: clamp(26px, 2.3vw, 44px);
        line-height: 1.3636;
        font-weight: 700;
        letter-spacing: 0;
        overflow-wrap: break-word;
        max-width: 770px;
    }

    .hp-testimonials-b__nav-group {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.57vw, 30px);
    }

    /* ---------- page gutters ----------
       Without this the content column touches the viewport edges at widths just
       above the 1498px cap (at a 1536px viewport there are only ~19px left over),
       and again inside the 64.06vw band. 15px of breathing room on every width. */
    body.hp-2026 [class^="hp-"] .wrapper {
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Testimonial card logo on tablet and mobile. The desktop value above starts at
   65px; this ramps from 45px at 375 up to the same 65px at 992, so the two
   sides meet without a step at the 992/993 boundary. */
@media only screen and (max-width: 992px) {
    .hp-testimonials-b {
        --hp-tb-logo: clamp(45px, 12vw, 65px);
    }
}

/* ---------- pillars: divider strip ----------
   Figma "Rectangle 34625973": 1499x40, radius 20, 1px #698CAE border at 30%.
   It sits at the very bottom of the pillars section, so only its top edge shows -
   the white logos section that follows paints over the rest. Desktop only. */
@media only screen and (min-width: 993px) {
    .hp-pillars {
        position: relative;
    }
    .hp-pillars::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -33px;
        transform: translateX(-50%);
        width: 1498px;
        max-width: calc(100% - 30px);
        height: 40px;
        border: 1px solid rgba(105, 140, 174, .3);
        border-radius: 20px;
        pointer-events: none;
        background: rgba(105, 140, 174, .3);
    }
}

/* Between 992 and 1535 the theme already narrows the navbar to 80vw
   (style.css:10079). Match it for the homepage wrappers so the section content
   lines up with the navbar's own edges across that band. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    body.hp-2026 [class^="hp-"] .wrapper {
        max-width: 80vw;
    }
}

/* ---------- 992-1535 band ----------
   The site scales hp- sections fluidly in vw across this band (style.css has 263
   vw declarations in exactly this media block: h1 3.23vw, h2 2vw, p 1.2vw ...).
   These are the desktop values above restated the same way, against the 80vw
   wrapper: px / 1498 * 80. Values already using clamp() or % are left alone.
   ---------------------------------------------------------------- */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-hero-b .hp-hero-b__title {
        font-size: 3.952vw;
    }
    /* Deliberately under the proportional 1.602vw (= the 30px used from 1536 up):
       at laptop widths that extra step is what lets the subtitle wrap cleanly. */
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 1.502vw;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        margin-top: 1.869vw;
        padding: 0.748vw 1.121vw;
        font-size: 0.854vw;
        line-height: 1.068vw;
    }
    .hp-hero-b__head {
        padding-bottom: 3.204vw;
    }
    .hp-pillars {
        padding: 2.937vw 0;
    }
    .hp-agents .hp-agents__col h3 {
        margin: 0 0 1.228vw;
        font-size: 1.068vw;
        line-height: 1.175vw;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: 26.702vw;
    }
    .hp-agents .hp-agents__col-txt p {
        margin: 0 0 0.427vw;
        font-size: 0.854vw;
    }
    .hp-ecosystems .hp-ecosystems__txt {
        max-width: 27.770vw;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 2.350vw;
        margin: 0 0 4.806vw;
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 1.189vw;
    }
    .hp-ecosystems .hp-ecosystems__media {
        max-width: 43.116vw;
        margin: -1.068vw -4.272vw 0 0;
    }
    .hp-ecosystems .hp-ecosystems__intro {
        gap: 2.136vw;
        padding-bottom: 5.607vw;
    }
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 1.656vw;
        margin: 0 0 1.602vw;
    }
    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 1.068vw;
        line-height: 1.175vw;
    }
    .hp-ecosystems .hp-ecosystems__panel {
        padding: 1.709vw 0 0.854vw;
    }
    .hp-ecosystems .hp-ecosystems__bar {
        gap: 4.806vw;
        min-height: 4.913vw;
    }
    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 0.961vw;
        line-height: 1.175vw;
    }
    .hp-ecosystems .hp-ecosystems__toggle {
        gap: 0.374vw;
        font-size: 0.801vw;
        line-height: 1.175vw;
    }
    .hp-testimonials-b .hp-testimonials-b__title {
        max-width: 41.121vw;
    }
    body.hp-2026 [class^="hp-"] .wrapper {
        padding-left: 0.801vw;
        padding-right: 0.801vw;
    }
}

/* The pillars divider strip, restated in vw for the band. Width tracks the
   wrapper exactly (1498px at >=1536 is the same as 80vw here), the rest is
   px / 1498 * 80. The 1px border stays a hairline - in vw it would round away. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-pillars::after {
        width: 80vw;
        height: 2.136vw;
        bottom: -1.762vw;
        border-radius: 1.068vw;
    }
}

/* ============================================================
   Mobile, from the 375px Figma export (Mobile_A.png), measured 1:1.
   Fixed px throughout - the site uses px in every mobile block
   (97% of declarations) and reserves vw for the 992-1535 band only.
   ============================================================ */
@media only screen and (max-width: 992px) {

    /* --- hero --- */
    .hp-hero-b .hp-hero-b__title {
        font-size: 32px;
        line-height: 38px;
    }
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 20px;
        line-height: 26px;
        font-weight: 300;
    }
    .hp-hero-b__aside {
        padding-top: 26px;          /* title -> paragraph */
        max-width: 100%;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        display: block;
        width: 100%;
        margin-top: 44px;           /* paragraph -> button */
        padding: 12px 20px;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
    }
    .hp-hero-b__head {
        padding-bottom: 43px;       /* button -> panel */
    }
    .hp-hero-b__visual {
        aspect-ratio: 335 / 219;    /* measured off the export */
        border-radius: 12px;
    }

    /* --- pillars: the export stacks title, badge, button, then the columns --- */
    .hp-pillars .hp-pillars__row {
        display: flex;
        flex-direction: column;
        column-gap: 0;
        row-gap: 0;
    }
    .hp-pillars .hp-pillars__badge {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 21px;
    }
    .hp-pillars .hp-pillars__cols {
        order: 3;                   /* after the button */
        display: block;
        width: 100%;
    }
    .hp-pillars .hp-pillars__col {
        border-left: 0;
        border-top: 1px solid #C8D6E7;
        padding: 24px 0 0;
        margin-top: 24px;
    }
    .hp-pillars .hp-pillars__col:first-child {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
    .hp-pillars .btn {
        order: 2;
        display: block;
        width: 100%;
        margin: 0 0 32px;
        text-align: center;
    }
    /* the tab strip scrolls sideways instead of wrapping */
    .hp-pillars .hp-pillars__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        margin-bottom: 24px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .hp-pillars .hp-pillars__tabs::-webkit-scrollbar {
        display: none;
    }

    /* --- agents: the export centres both text blocks --- */
    .hp-agents .hp-agents__col {
        padding-left: 0;
        text-align: center;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: 100%;
    }

    /* --- ecosystems: the product shot sits above the copy --- */
    .hp-ecosystems .hp-ecosystems__intro {
        flex-direction: column;
    }
    .hp-ecosystems .hp-ecosystems__media {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px;
    }
    .hp-ecosystems .hp-ecosystems__txt {
        max-width: 100%;
    }

    /* --- cta: the mascot only exists in the mobile design --- */
    .hp-cta-assets .hp-cta-assets__mascot {
        display: block;
        width: 70%;
        margin: 30px auto 0;
        position: relative;
        z-index: 1;
        max-width: 250px;
    }
    .hp-cta-assets .hp-cta-assets__mascot img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* The 1920 export places "Aduard_Character" (2177:3146) at x1400-1696, y5381-5824
   while the footer starts at y5729: the mascot's right edge sits 13px inside the
   1498 content column, and its bottom hangs 95px OVER the footer. In flow it cannot
   do that - a downward shift only makes the section taller and carries the footer
   with it - so it leaves the flow and anchors to .wrapper, whose bottom edge is the
   section's own 165px of padding above the footer line: 165 + 95 = 260.
   right:0 lands on the wrapper's content edge, which is the same 1498 column. */
@media only screen and (min-width: 993px) {
    .hp-cta-assets {
        overflow: visible;      /* the overhang would otherwise be clipped away */
    }
    .hp-cta-assets .hp-cta-assets__mascot {
        display: block;
        position: absolute;
        /* right resolves against .wrapper's padding box, not its content box, so
           the 15px gutter is already outside it: 13px is the export's own inset of
           the character from the column edge (1696 against 1709). */
        right: 13px;
        /* The overhang has to be measured from the FOOTER line, but the containing
           block is .wrapper, whose bottom sits one section padding-bottom above it.
           That padding is clamp(86px, 16.189vw - 77.51px, 165px) in homepage-b.css
           and already saturates at 165 from 1536 up, so restating it here covers the
           whole desktop range in one declaration - a fixed -260px was only correct
           at the 165px end and overhung by 48px at 1200. */
        bottom: calc(-1 * (clamp(86px, 16.189vw - 77.51px, 165px) + 95px));
        z-index: 1;
        max-width: 296px;
        margin: 0;
    }
}

/* 992-1535 the column stops being capped at 1498 and becomes 80vw, so the mascot has
   to shrink with it like every other value in this file: px / 1498 * 80. Fixed 296px
   left it at full size inside a column already down to 64% at 1200. The image needs
   its own width:100% here - the rule that gives it one lives in the <=992 block, so
   on desktop it would otherwise keep drawing at its natural 296px and overflow. */
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-cta-assets .hp-cta-assets__mascot {
        width: 15.808vw;                                    /* 296 */
        right: 0.694vw;                                     /* 13 */
        bottom: calc(-1 * (clamp(86px, 16.189vw - 77.51px, 165px) + 5.073vw));  /* 95 */
    }
    .hp-cta-assets .hp-cta-assets__mascot img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* The reordering above needs real flex parents: the panel is display:block and the
   intro is block on mobile, so `order` was inert. `display: contents` dissolves the
   badge/columns wrapper so the button can sit between them, as the export shows. */
@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__panel {
        display: flex;
        flex-direction: column;
    }
    .hp-pillars .hp-pillars__title { order: 0; }
    .hp-pillars .hp-pillars__row  { display: contents; }
    .hp-pillars .hp-pillars__badge { order: 1; }
    .hp-pillars .btn               { order: 2; }
    .hp-pillars .hp-pillars__cols  { order: 3; }

    .hp-ecosystems .hp-ecosystems__intro {
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 992px) {
    /* Figma comment #88 (Amram, mobile frame): "need a bolder weight (Simbold)".
       Roboto 600 is requested in extras/setup.php for this. */
    .hp-pillars .btn.btn-white {
        display: flex;
        justify-content: center;
        font-weight: 600;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__tabs {
        gap: 6px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__col {
        border-left: 0;
        border-top: 1px solid #C8D6E7;
        padding: 24px 15px 0;
        margin-top: 24px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__badge {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__panel {
        display: flex;
        flex-direction: column;
        border: 1px solid #C8D6E7;
        padding: 16px 14px 13px;
        border-radius: 15px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-logos-b .wrapper > h2 {
        margin: 0 auto 50px;
        font-size: 20px;
        line-height: 30px;
        max-width: 50%;
        display: block;
        text-align: center;
    }
}

@media only screen and (max-width: 576px) {
    .hp-logos-b .wrapper > h2 {
        margin: 0 auto 50px;
        font-size: 18px;
        line-height: 26px;
    }
}

/* The mobile export uses a different Agents panel - one continuous panel with the
   avatars rearranged, not the desktop's two halves split by a divider. Swap it as a
   background so the markup stays unchanged; the panel is decorative.

   22 Sep: Amram's "Creative cards" replaces the first export. Same 335:198 frame, but
   drawn at 1340x792 - four times the slot - so it stops being soft on a 2x or 3x phone,
   which the original 335x198 file could not avoid. It carries its own 3px corner
   rounding; the 12px radius below clips further in, so the two never compete. New
   filename rather than overwriting the old one: the URL is what busts the CDN. */
@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__visual {
        aspect-ratio: 335 / 198;
        border-radius: 12px;
        overflow: hidden;
        background: url(../../img/homepage/agents-visual-mobile-cards.png) no-repeat center / cover;
    }
    .hp-agents .hp-agents__visual img,
    .hp-agents .hp-agents__visual picture {
        display: none;
    }
}


/* the bar sits under the panel on desktop, above it on mobile */
.hp-ecosystems .hp-ecosystems__item {
    display: flex;
    flex-direction: column;
}
.hp-ecosystems .hp-ecosystems__bar        { order: 1; }

/* desktop keeps the button on the bar line */

@media only screen and (max-width: 992px) {
    /* mobile: label on top, then heading, tagline, button, text, tags */
    .hp-ecosystems .hp-ecosystems__bar        { order: 0; }
}


/* Mobile only: the export puts the "/0.N LABEL" bar above its panel; on desktop it
   stays below, so this is scoped and cannot reach the desktop layout. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__item {
        display: flex;
        flex-direction: column;
    }
    .hp-ecosystems .hp-ecosystems__bar   { order: 0; }
    .hp-ecosystems .hp-ecosystems__panel { order: 1; }
}

@media only screen and (max-width: 576px) {
    .hp-hero-b {
        padding: 96px 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-hero-b {
        padding: 112px 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__tab {
        /* Figma comment (Amram): "these tabs are a bit too big" - 10px 16px (42px
           tall pill) -> 8px 14px (36px). --hp-pill-extra is the widening that makes
           one set of pills span gutter to gutter (section-pillars.php). */
        padding: 8px calc(14px + var(--hp-pill-extra, 0px) / 2);
        font-size: 14px;
        line-height: 20px;
        border-radius: 8px;
        text-transform: capitalize;
        border: 1px solid #698CAE;
        /* Figma comment #85 (Amram): "kerning is too big. use 0." - replaces the
           1.8px / 1.4px that homepage-b.css sets for <=992 / <=576 */
        letter-spacing: 0;
    }
}

/* The tab strip scrolls sideways when the pills do not fit, as in the export where
   the row is cut off mid-pill at both edges. It runs full-bleed past the wrapper's
   gutters so a pill can sit under the screen edge, and the scrollbar is hidden. */
@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* The three pills fill the 15px gutters exactly (section-pillars.php widens
           them), so normally nothing scrolls. Should more tabs be added than fit, a
           swipe comes to rest with a pill on the 15px gutter the navbar logo sits on
           (mandatory snap, scroll-padding). The 15px matches the wrapper gutter set
           further down. */
        scroll-snap-type: x mandatory;
        scroll-padding-left: 15px;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .hp-pillars .hp-pillars__tabs::-webkit-scrollbar {
        display: none;
    }
    .hp-pillars .hp-pillars__tabs li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .hp-pillars .hp-pillars__tab {
        white-space: nowrap;
    }
}

@media only screen and (max-width: 576px) {
    .hp-agents .wrapper > h2 {
        margin-bottom: 24px;
        font-size: 32px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-agents .hp-agents__col h3 {
        margin-bottom: 12px;
        font-size: 16px;
    }
}

@media only screen and (max-width: 992px) {
  .hp-agents__cols {
    margin-top: 26px;
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
}

@media only screen and (max-width: 576px) {
    .hp-agents__cols {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 35px;
        margin-top: 22px;
        padding: 0 20px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__col {
        padding-left: 0;
        text-align: center;
        border-bottom: 1px solid #C8D6E7;
        padding: 0 0 35px;
    }
}
@media only screen and (max-width: 992px) {
.hp-agents .hp-agents__col:last-child {
    border-bottom: none;
    padding: 0;
}
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems {
        padding: 0 0 48px;
        background: #fff;
    }
}
@media only screen and (max-width: 992px) {
.hp-ecosystems .hp-ecosystems__item.is-open::before {
width: 100%;
}
}

/* The relocated Learn more button (see the JS in section-ecosystems.php) sits under
   the tagline on mobile and spans the panel width, as in the export. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__panel .hp-ecosystems__more {
        display: block;
        margin: 0 0 20px;
    }
    .hp-ecosystems .hp-ecosystems__panel .hp-ecosystems__more .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        min-height: 0;
        padding: 24px 0 20px 15px;
        background: #fff;
        border-bottom: 1px solid #AFC4D8;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        padding: 24px 0 20px 15px;
        background: #fff;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__panel {
        order: 1;
        padding: 29px 30px 35px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__bar {
        order: 0;
        padding: 24px 0 20px 15px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 10px 22px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 10px 20px;
    }
}

/* shevro-right.svg inlined as a data URI - one less request, and it cannot 404.
   Sized 9x13 as drawn; the gap matches the button's own letter spacing. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white::after {
        content: "";
        /* homepage-b.css kills this pseudo-element (display:none) to drop the theme's
           default .btn.btn-white arrow, so the chevron has to switch it back on. */
        display: inline-block;
        /* the same theme rule positions its arrow absolutely at -7px/-7px, so the
           chevron has to be put back into the button's flow as well. */
        position: static;
        align-self: center;
        vertical-align: middle;
        flex: 0 0 auto;
        width: 9px;
        height: 13px;
        margin-left: 10px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='13' viewBox='0 0 9 13' fill='none'%3E%3Cpath d='M1 11.4648L7.27929 6.2321L0.999999 0.999355' stroke='%23001A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        color: #0061FA;
        margin: 0 0 32px;
    }
}

/* The accordion scrolls the opened item under the fixed header; scroll anchoring would
   fight that by re-adjusting scrollY when the previous item collapses. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__list,
    .hp-ecosystems .hp-ecosystems__item {
        overflow-anchor: none;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__list {
        padding: 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__list {
        padding: 0 0;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 20px;
        line-height: 34px;
        margin: 0 0 22px;
        max-width: 75%;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__media {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* ---------- testimonials-b, mobile ----------
   Measured off Mobile_A.png at 375: card x20-322 (303 wide), the next card at
   x339 (a 16px gap), both arrow circles 48 across with 16 between them and their
   right edge on the same 20px gutter as the card. Neither edge of the strip is
   faded in the export - the first card is flush with the heading, so a left ramp
   would dim exactly the card the design draws solid. */
@media only screen and (max-width: 992px) {
    /* The section's script hands the arrows to Swiper's navigation module but
       never shows the group; the rule that does starts at 993. */
    .hp-testimonials-b .hp-testimonials-b__nav-group {
        display: flex;
    }
}

@media only screen and (max-width: 576px) {
    .hp-testimonials-b {
        --hp-tb-card: min(80.8vw, 360px);
        --hp-tb-gap: 16px;
        --hp-tb-arrow: 48px;
        --hp-tb-fade: none;
    }
    .hp-testimonials-b .wrapper {
        padding: 0 20px;
    }
    /* Measured off the export by glyph: cap height 14px, x-height 11px and a
       23px baseline pitch - Roboto's 0.7109 / 0.5283 em put that at 20px on a
       23px line. The shared clamp() bottoms out at 26px, which is its desktop
       floor rather than a mobile value. */
    .hp-testimonials-b .hp-testimonials-b__title {
        font-size: 20px;
        line-height: 23px;
        /* The export breaks after "analysts." and again after "&", which is a
           natural wrap only inside a capped column: "Recognized by analysts.
           Appreciated" measures 331.35px at this size and the full gutter-to-
           gutter box is 335, so it would otherwise fit. 80% of that box is 268px
           - wide enough for the 253.49px middle line, narrow enough to push
           "Appreciated" down - and it lands the longest line's ink on x271,
           where the export draws it. */
        max-width: 80%;
    }
    .hp-testimonials-b .hp-testimonials-b__nav-group {
        justify-content: flex-end;
        gap: 16px;
        margin-top: 18px;
    }
    .hp-testimonials-b .hp-testimonials-b__head {
        padding-bottom: 32px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__card {
        border-radius: 16px 16px 0 0;
        padding: 32px 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-cta-assets .hp-cta-assets__txt h2 {
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 1.1667;
    }
}

@media only screen and (max-width: 992px) {
    .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;
        width: 100%;
        max-width: 375px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-cta-assets {
        padding: 120px 0 0;
        background-image: radial-gradient(circle 38px at 24.29% 8.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 81.66% 11.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 55.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 7.09% 15.25%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 6.3px at 16.55% 78.78%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 6.3px at 61.7% 96.03%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 6.3px at 5.3% 63.50%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 5.3px at 87.24% 5.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);
        margin: 0 0 -50px;
    }
}

/* ---------- client review 14 Sep, points 1-2 ----------
   The three pillar columns fall out of line whenever one heading fits on a single
   line and its neighbours wrap: at 1300 the middle column's body copy started 18px
   above the other two. Equal-length headings would fix it only for one width and
   one font, so instead each column becomes a subgrid of the row it already sits in
   - every h3 then shares one grid row and every paragraph shares the next, and they
   line up at any width whatever the wraps do.
   row-gap goes to 0 because the h3 keeps its own margin-bottom, which is the same
   number; leaving both would double the space. The grid holds three items in three
   tracks here and never wraps, so the gap has no other job at this breakpoint.
   The badge is dropped to the bottom of the row, which is the bottom of the text -
   the client asked for exactly that. */
@media only screen and (min-width: 993px) {
    .hp-pillars .hp-pillars__cols {
        grid-template-rows: auto auto;
        row-gap: 0;
    }
    .hp-pillars .hp-pillars__col {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
    .hp-pillars .hp-pillars__badge {
        align-self: flex-end;
    }
}

/* ---------- client review 14 Sep, points 5-6 ----------
   5) The panel tagline read as a second headline rather than a subhead: 20px
      against a 31px heading. One step down to 18px keeps it clear of the 16px
      body copy, so the three levels stay distinct.
   6) 90px between the section heading and its paragraph is what the export draws,
      and the client knows it - it still reads as a hole, so it comes down to 56px.
   Both restated in vw for 993-1535, where the column is 80vw: px / 1498 * 80. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 18px;
        line-height: 24px;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        margin-bottom: 56px;
    }
}

@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 0.961vw;         /* 18 */
        line-height: 1.282vw;       /* 24 */
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        margin-bottom: 2.991vw;     /* 56 */
    }
}

/* ---------- client review 14 Sep, point 7 ----------
   Measured off the export's open row (Frame 1437255506, 1308 wide):
       col 1  x0   w267      gap 47
       body   x314 w337      gap 47
       pills  x698 w610
   so the columns are 20.413% / 25.765% / the rest with a 3.593% gutter - ours ran
   a 2.6% gutter, which is the "missing spacing between the columns".
   The open row's bar is set further down the file - it is a percentage of the same
   box, so the two stay related wherever its width is tuned. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__panel {
        grid-template-columns: 20.413% 25.765% 1fr;
        column-gap: 3.593%;
    }
}

/* ---------- Figma comment #47 (Amram, 14 Sep) ----------
   "also - no need for hover effect" on the row's CTA. The base rule repaints it
   #0061FA on hover; this holds it at its resting colours instead. The transition
   is dropped too, so nothing animates towards a state that no longer changes.
   :focus-visible is deliberately left alone - that is the keyboard ring, not a
   hover effect, and removing it would make the control unusable without a mouse. */
.hp-ecosystems .hp-ecosystems__more .btn.btn-white,
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:hover,
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:active {
    color: #001A36;
    background-color: transparent;
    border-color: #001B38;
    transition: none;
}

/* ---------- Figma comment #48 (Amram, 14 Sep) ----------
   The row grows first and the content arrives after. The height travel is driven from
   JS (display cannot be animated, and the open height is only knowable once the panel
   is laid out); this is the other half - the contents are held transparent while the
   row is still moving, and fade in when .is-growing comes off. Both breakpoints, since
   the designer asked for the interaction itself rather than a desktop detail. */
.hp-ecosystems .hp-ecosystems__panel > * {
    transition: opacity 0.2s ease;
}
.hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__panel > * {
    opacity: 0;
}

/* prefers-reduced-motion override removed 24 Sep: the client wants the product-row animation to play regardless of the OS setting */

/* The bar owns two step changes that used to ride along un-animated beside the panel
   travel: its own min-height (92 -> 0 when the row opens) and the CTA switching from
   display:none to block. The first now transitions on the same stride as the height;
   the second cannot be transitioned at all, so the button is faded with the rest of
   the content instead and its display flip happens while it is already invisible. */
.hp-ecosystems .hp-ecosystems__more {
    transition: opacity 0.2s ease;
}
.hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__more {
    opacity: 0;
}

/* prefers-reduced-motion override removed 24 Sep: the client wants the product-row animation to play regardless of the OS setting */

.hp-ecosystems .hp-ecosystems__panel p {
    font-weight: 300;
}

/* ---------- a visual slot can now be a still, a video or a Lottie ----------
   hero-b already listed every element it might receive; agents and ecosystems only
   ever styled <img>, so a video or a player dropped into them would ignore the box
   it is supposed to fill. Same rules, same elements.
   On mobile the agents panel paints its own artwork as a background and hides the
   picture; anything else in that slot has to disappear with it, or it would sit on
   top of the mobile asset. */
.hp-agents__visual video,
.hp-agents__visual lottie-player,
.hp-agents__visual dotlottie-player,
.hp-agents__visual iframe,
.hp-agents__visual canvas {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.hp-ecosystems .hp-ecosystems__media video,
.hp-ecosystems .hp-ecosystems__media lottie-player,
.hp-ecosystems .hp-ecosystems__media dotlottie-player,
.hp-ecosystems .hp-ecosystems__media iframe,
.hp-ecosystems .hp-ecosystems__media canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__visual video,
    .hp-agents .hp-agents__visual lottie-player,
    .hp-agents .hp-agents__visual dotlottie-player,
    .hp-agents .hp-agents__visual iframe,
    .hp-agents .hp-agents__visual canvas {
        display: none;
    }
}


/* ------------------------------------------------------------------------- *
 * Client feedback, 16 Sep - Lara.
 * ------------------------------------------------------------------------- */

/* "the menu background and hero background are different"
   The navbar paints itself white on every page (child-theme.css). This hero sits
   directly under the fixed navbar, so the white bar reads as a separate strip on
   top of the hero's #F1F6FF. Matching it to the hero makes the two one surface.
   Only the unscrolled state is touched - once the page scrolls past the hero the
   navbar keeps the site-wide translucent white, as on every other page, and the
   .is-scrolled / .is-active rules that carry !important stay in charge there.
   .hp-2026 is the body hook this layout already sets (extras/setup.php), so no
   other template can pick the rule up. */
.hp-2026 .upstream-partial_navbar:not(.is-scrolled) {
    background-color: #F1F6FF;
}

/* "still not aligned in the center as in the Figma" - agents columns */
.hp-agents .hp-agents__col h3 {
    margin: 0 0 21px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #0061FA;
    text-align: center;
}
.hp-agents .hp-agents__col-txt {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

/* "spacing is still off, not as in the Figma" - ecosystems intro */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 26px;
        line-height: 1.4;
        color: #001A36;
        margin: 0;
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 44px;
        font-weight: 700;
        line-height: 1.3;
        color: #001A36;
        margin: 0 0 48px;
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__media {
        position: relative;
        width: 94.3%;
        max-width: 837px;
        margin: -65px -116px 0 0;
    }
}

/* The three blocks above are plain px and sit last in the file, so on their own
   they would shadow the 993-1535 band where the column is 80vw and every value is
   restated as px / 1498 * 80. The band is exactly the width the client reviews at,
   so it is restated here: the new artwork box converted, and the typography the
   band already carried re-emitted unchanged so the px block cannot bury it. */
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 2.350vw;         /* 44 */
        margin: 0 0 2.563vw;        /* 48 */
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 1.189vw;
    }
    .hp-ecosystems .hp-ecosystems__media {
        max-width: 44.700vw;        /* 837 */
        margin: -3.471vw -6.195vw 0 0;  /* -65 / -116 */
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__intro {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__intro {
        gap: 2.136vw;               /* 40 */
        padding-bottom: 2.136vw;    /* 40 */
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__card {
        position: relative;
        background-color: #fff;
        border-radius: 24px 24px 0 0;
        padding: 130px 6.5% 0;
    }
}

/* The blocks above are px and sit last in the file, so in the 993-1535 band they
   would shadow the vw restatements further up. Everything they touch is repeated
   here on the band's own scale: px / 1498 * 80, the vw values the band already
   carried where the number did not change, converted where it did. */
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-agents .hp-agents__col h3 {
        margin: 0 0 1.228vw;        /* 23 */
        font-size: 1.068vw;         /* 20 */
        line-height: 1.175vw;       /* 22 */
        text-align: center;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: 26.702vw;        /* 500 */
        text-align: center;
        margin: 0 auto;
    }
    .hp-ecosystems .hp-ecosystems__card {
        padding: 6.942vw 6.5% 0;    /* 130 */
    }
}

/* The open row's bar, widened past the panel's first column (20.413%) so the CTA
   clears the column edge. Percentages of the same box, so it holds at every width
   and needs no vw counterpart. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        width: 18.413%;
        gap: 0;
        justify-content: space-between;
    }
}

/* The open row's own label repeats the panel heading sitting directly above it, so it
   goes once the row is open. Now that the bar carries the full headline rather than a
   three-letter code, an invisible button left in the flow is not free: at 18.4% of the
   row the label wrapped to two lines and squeezed the CTA from 121px down to 76px. It
   is therefore taken out of the flow - the bar is already position: relative - and the
   CTA is pinned to the same right edge the old layout gave it.
   opacity rather than visibility keeps the control in the accessibility tree, so the
   row still reports its expanded state. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__toggle {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 0;
        /* Review 24 Sep ("everything inside jerks"): while it fades out the label must
           stay where it was. Pinned to top:0 it jumped up, and as a shrink-to-fit
           absolute box it wrapped onto two lines in the same frame. Centred on the
           bar like the in-flow label, and kept on one line. */
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
    }
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        justify-content: flex-end;
    }
}

/* The section corrects the scroll itself while a row opens, so that the row being read
   stays put as the list changes height. The browser's own scroll anchoring is doing the
   same job in the same frames, and the two corrections land on top of each other - which
   is what reads as a stutter in the travel. Below 992 this was already switched off for
   the same reason; it belongs at every width now that the rows follow the scroll. */
.hp-ecosystems .hp-ecosystems__list,
.hp-ecosystems .hp-ecosystems__item {
    overflow-anchor: none;
}

/* The card carried a solid #0061FA behind its artwork. It is never seen once the
   artwork paints - the animation covers the box exactly, and the mobile PNG has no
   alpha - so all it did was flash blue while the animation loaded, and stand as a
   solid blue panel on any browser where the player fails. The section's own
   background shows instead. */
.hp-agents .hp-agents__visual {
    background-color: transparent;
}

/* Client review 17 Sep: the "/0.1" counters come off the product rows. Hidden rather
   than cut from the template so the markup, and the numbering if it is ever wanted
   back, survive; the toggle is a flex row, so the span leaves no gap behind it. */
.hp-ecosystems .hp-ecosystems__num {
    display: none;
}

/* Client review 21 Sep: the agents columns go back to the left on phones, "so that it
   fits the whole page". Centring was asked for on 16 Sep from a desktop screenshot and
   was written without a breakpoint, so it reached mobile too - where a centred, capped
   column leaves ragged margins on both sides. Desktop keeps the centring. */
@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__col,
    .hp-agents .hp-agents__col h3,
    .hp-agents .hp-agents__col-txt {
        text-align: left;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Client review 22 Sep: "The Burger menu on mobile is white and is not seen on the gray
   bg, can we turn it to blue please?"

   The icon is not a glyph or a bordered span - it is an SVG carried as a data URI in the
   button's background-image, so its colour is a character in the stylesheet, not a CSS
   colour property. child-theme.css already paints the site's burger in the brand blue;
   style.css then repaints it white for every page whose navbar has not been scrolled yet
   (body:not(.search) #wrapper-navbar .upstream-partial_navbar:not(.is-scrolled) ...,
   max-width: 991px). That blanket rule was written for headers sitting on a dark hero.
   This page keeps a light #F1F6FF bar at the top, so the white bars disappear into it.

   Restating the child theme's own blue SVG under a selector one class heavier than the
   white one switches it back for this page alone - the same result as deleting the white
   rule, without changing the burger on the twenty-odd templates that still rely on it.
   Geometry is the child theme's (20x14), so the icon is identical to the scrolled state.

   The band is the white rule's own 991px rather than this file's usual 992px: the point
   is to shadow that one declaration, and at 992px the burger is display:none anyway.
   The open menu is untouched - it swaps in icon-close-text.svg with !important. */
@media only screen and (max-width: 991px) {
    body.hp-2026:not(.search) #wrapper-navbar .upstream-partial_navbar:not(.is-scrolled) .upstream-partial_navbar__hamburger {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 2V0H0V2H20ZM20 6V8H0V6H20ZM20 12V14H0V12H20Z' fill='%230061FA'/%3E %3C/svg%3E ");
    }
}

/* 22 Sep: the mascot was cut off at the footer line for logged-out visitors only.

   WP Rocket's Lazy Rendering marks below-the-fold sections `data-wpr-lazyrender="1"`
   and prints `[data-wpr-lazyrender]{content-visibility:auto}` inline. It does this for
   anonymous traffic only, which is why the page looked right while logged into wp-admin.
   `content-visibility: auto` implies `contain: layout style paint`, and paint containment
   clips descendants to the padding box - so the 77-95px the mascot deliberately hangs
   over the footer was clipped away, exactly at the section boundary.

   The section cannot carry paint containment: it is the one section on the page whose
   content is meant to leave its box (see the min-width 993px block above). The rest of
   the page is unaffected - the footer has nothing outside its box, and the testimonials
   track is already clipped by its own overflow, so their lazy rendering is left alone.

   `content-visibility: visible` is the initial value; the attribute in the selector both
   documents the cause and keeps the rule inert on installs where the feature is off. */
.hp-cta-assets[data-wpr-lazyrender] {
    content-visibility: visible;
}

/* Stage 2, item 4: on mobile the open row showed its title twice - the grey label in
   the bar and the blue heading of the panel directly under it. Desktop already hides
   the open row's label, but that rule lives in a min-width 993px block and takes the
   toggle out with position:absolute, which cannot be reused here: on mobile the bar
   sits ABOVE the panel, and pulling its content out of flow would not collapse it.

   Instead the open bar is folded to nothing. Its height, padding and min-height go to
   0, so the travel animation in section-ecosystems.php - which measures the bar either
   side of the class flip - folds and unfolds it on the same clock as the panel, with
   no jump. Its bottom border stays, transparent, so the fold keeps the 1px it always
   had and the row's own top border remains the only visible divider. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        height: 0;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        border-bottom-color: transparent;
    }
}

/* Stage 2, item 10: "Subtitle scaling - can we change this section to a max of 3
   lines?" The subtitle ran to four lines at every desktop width: its column is
   flex 0 0 37.09% of the hero head and its font is 30px (1.502vw in the band), and
   because both scale with the viewport the text wraps identically from 993px up.

   Measured at 1920 on a clone of the paragraph: three lines need 589px, i.e. 40.12%
   of the 1468px head. 43% is used - 631px - which leaves about 7% for fonts that
   render a little wider on another OS (the hero title once broke over 0.1px). The
   extra width comes out of the space between title and subtitle, 154px -> 68px at
   1920; the title keeps its 52.4% and its three lines. The client-set font sizes are
   untouched. Mobile is a single column where 3 lines would mean a ~14px font, so it
   is left as is. */
@media only screen and (min-width: 993px) {
    .hp-hero-b .hp-hero-b__aside {
        flex: 0 0 43%;
    }
}

/* Stage 2 follow-up (24 Sep) - subtitle: "change the font to Roboto light and line
   height to 44, add <br> before Unify (4 lines is ok), use the space up to where the
   video ends, and move it further from the H1".
   The <br> is in the ACF text itself (homepage_new_0_text), so the editor sees it.
   The column still ends flush with the video (it is the last flex item of the head,
   whose width is the video's). It is narrowed from 43% to 41% so it starts further
   right: at 1920 that is 602px, and the gap to the end of "Behavioral Intelligence"
   grows 77px -> 107px (60 -> 82 at 1440). 41% is set by the longest line that must
   not wrap, "Empower cyber and operational teams with" = 569px in Roboto 300 at 30px,
   which leaves ~5% for fonts that render wider on another OS. The sentence after the
   <br> (654px) cannot fit one line at any width that also moves the column right, so
   it breaks; text-wrap: pretty keeps "scale." from being left alone on the last line
   ("...automation / at scale."). Browsers without text-wrap: pretty ignore it.
   Line height 44px is the 1536+ value; the 992-1535 band restates it in vw like the
   font size there (1.502vw * 44/30). Mobile already uses weight 300. */
@media only screen and (min-width: 993px) {
    .hp-hero-b .hp-hero-b__aside {
        flex: 0 0 41%;
    }
    .hp-hero-b .hp-hero-b__aside p {
        font-weight: 300;
        line-height: 44px;
        text-wrap: pretty;
    }
}
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-hero-b .hp-hero-b__aside p {
        line-height: 2.203vw;
    }
}

/* Stage 2, item 11 - Amram: "make sure the tags are blocked and not only in 1-2 rows."
   A two-column grid was tried on 23 Sep and rejected: "revert the tags to look as
   before, just make sure the 1st one is contained within a specific width".
   The tags are back to the free flex-wrap of homepage-b.css. Only PQD (the first
   row) is capped: up to 1440 its column is narrow enough to break 2+2+2, but from
   ~1536 the column is 596px and the tags ran 2+3+1. 480px holds its widest pair
   (444px) and pushes the third tag of the middle line down (the three need 545px).
   Below 1440 the column is already narrower than the cap, so nothing changes there. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__item:first-child .hp-ecosystems__tags {
        max-width: 480px;
    }
}

/* Stage 2, item 3 - the softer half of the animation (the travel itself is in
   section-ecosystems.php). The contents used to blink in over 0.2s the moment the
   travel stopped, and the row label hid and reappeared in a single frame. Now the
   contents rise 8px as they fade in over 0.35s, and the label cross-fades. */
/* Review 24 Sep ("even lighter, as on Wix"): the contents of an opening row now start
   to rise while the row is still growing (JS removes .is-growing a third of the way
   in), over 0.45s from 12px; a closing row's contents fade out over 0.2s instead of
   vanishing on the first frame - a transition takes the timing of the state it goes
   to, so the shorter one sits on .is-growing. */
.hp-ecosystems .hp-ecosystems__panel > *,
.hp-ecosystems .hp-ecosystems__more {
    transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .7, .3, 1);
    /* Review 24 Sep: "I still see the text move slightly left and right". Measured
       frame by frame the text does not move at all (to 0.05px); what moves is its
       rendering. While it fades the browser draws it on its own layer with greyscale
       smoothing, and the moment the fade ends it drops back to ClearType's sub-pixel
       smoothing, which shifts the glyph edges sideways by a fraction of a pixel. Keeping
       these blocks on their own layer all the time means one rendering throughout. */
    will-change: opacity, transform;
}
.hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__panel > *,
.hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__more {
    transform: translateY(12px);
    transition: opacity .2s ease-in, transform .2s ease-in;
}
@media only screen and (min-width: 993px) {
    /* button.* matches homepage-b.css's own `color` transition, which would win on
       specificity otherwise; the colour fade is kept alongside the new opacity one */
    .hp-ecosystems button.hp-ecosystems__toggle {
        transition: color .2s ease, opacity .3s ease-out;
    }
}
/* prefers-reduced-motion override removed 24 Sep: the client wants the product-row animation to play regardless of the OS setting */

/* Stage 2, item 14 - "All CTA buttons on the page - should behave the same - turn blue
   when hovering on them." Hero and CTA-section buttons already went #0061FA with white
   text; the two "Learn more" buttons did not: Pillars turned dark navy (#001A36), and
   the product-row CTA had no hover at all (switched off on 14 Sep per Figma comment
   #47 - this request from the client supersedes it). Both now take the hero's hover
   exactly: #0061FA fill and border, white label, same 0.25s ease. The Pillars chevron
   already turns white on hover. Keyboard focus rings are untouched. */
.hp-pillars .btn.btn-white,
.hp-ecosystems .hp-ecosystems__more .btn.btn-white {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.hp-pillars .btn.btn-white:hover,
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:hover {
    background-color: #0061FA;
    border-color: #0061FA;
    color: #fff;
}

/* Stage 2, item 6 - logo weight. Amram: "check all logos to match the same weight (not
   size)"; Ford Otosan "should be smaller", Cisco "at least double the size. so are all
   the 3:4 ratio's logos (AWS, Salesforce etc')". Every logo was drawn at one height, so a
   wide wordmark (Ford Otosan, ServiceNow) filled ten times the area of a compact mark.
   Each file's ink box was measured and its height set by factor --logo-s: height falls
   off with aspect ratio (ratio^-0.6), is corrected for padding inside the file, and is
   clamped to 0.55-1.45 of the old row height. Relative to Ford Otosan, Cisco and AWS
   are now 2.4-2.6x taller. The row grows to the largest factor (1.45); the section's
   padding gives the same height back, so nothing below moves. Keyed on file name - a
   new logo gets factor 1 until it is measured. */
.hp-logos-b .hp-logos-b__link img[src*="/ford-otosan-2."],
.hp-logos-b .hp-logos-b__link img[src*="/servicenow-header-logo-1."] { --logo-s: .55; }
.hp-logos-b .hp-logos-b__link img[src*="/may-mobility-logo-full-color-horizontal."] { --logo-s: .67; }
.hp-logos-b .hp-logos-b__link img[src*="/Frame-40."],
.hp-logos-b .hp-logos-b__link img[src*="/accenture-3."] { --logo-s: .9; }
.hp-logos-b .hp-logos-b__link img[src*="/gcp-logo."] { --logo-s: .93; }
.hp-logos-b .hp-logos-b__link img[src*="/Mitsui-Sumitomo-Insurance-1."] { --logo-s: .96; }
.hp-logos-b .hp-logos-b__link img[src*="/volvo-1."] { --logo-s: 1.07; }
.hp-logos-b .hp-logos-b__link img[src*="/Frame-42."] { --logo-s: 1.17; }
.hp-logos-b .hp-logos-b__link img[src*="/Frame-43."] { --logo-s: 1.27; }
.hp-logos-b .hp-logos-b__link img[src*="/cisco-logo."] { --logo-s: 1.3; }
.hp-logos-b .hp-logos-b__link img[src*="/Frame-32."] { --logo-s: 1.35; }
.hp-logos-b .hp-logos-b__link img[src*="/Untitled-design-45."],
.hp-logos-b .hp-logos-b__link img[src*="/Frame-50."] { --logo-s: 1.45; }

.hp-logos-b { padding: 108px 0 109px; }
.hp-logos-b .swiper-slide.hp-logos-b__slide { height: 73px; }
.hp-logos-b .hp-logos-b__link img { height: calc(50px * var(--logo-s, 1)); }

@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-logos-b { padding: 7.015vw 0 7.145vw; }
    .hp-logos-b .swiper-slide.hp-logos-b__slide { height: 4.727vw; }
    .hp-logos-b .hp-logos-b__link img { height: calc(3.26vw * var(--logo-s, 1)); }
}
@media only screen and (max-width: 992px) {
    .hp-logos-b { padding: 48px 0 42px; }
    .hp-logos-b .swiper-slide.hp-logos-b__slide { height: 50px; }
    .hp-logos-b .hp-logos-b__link img { height: calc(34px * var(--logo-s, 1)); }
}
@media only screen and (max-width: 576px) {
    .hp-logos-b { padding: 34px 0 27px; }
    .hp-logos-b .swiper-slide.hp-logos-b__slide { height: 41px; }
    .hp-logos-b .hp-logos-b__link img { height: calc(28px * var(--logo-s, 1)); }
}

/* ============================================================
   Figma comments, mobile frame (Amram, 23-24 Sep)
   ============================================================ */

/* "The cards framing should use the same padding as the logo and the menu icon.
   all should be aligned." The navbar puts the logo and the burger on a 15px
   gutter (.container padding 0 15px) up to 991px; the homepage sections used 20px
   (16px in agents and CTA), so every card and text block sat 5px inside the logo
   on the left and 5px short of the burger on the right. All homepage wrappers now
   use the navbar's 15px. From 992 up the navbar and the sections share the desktop
   layout, so this stops at 991. */
@media only screen and (max-width: 991px) {
    body.hp-2026 [class^="hp-"] .wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Comment #82, item 1: "this tab nav bar should be a sticky bar under the main nav
   bar - inner scrolling inside this section and when moving to the next (logos)
   section the tab bar scrolls up and away."
   The strip sticks 68px down - the height of the fixed mobile navbar - and, being a
   child of the section's wrapper, leaves with the end of the section. It needs an
   opaque background so the cards pass under it, and 10px above and below so the
   pills do not touch the navbar or the card (the negative margin keeps the resting
   layout where it was).
   Sticky only works if no ancestor is a scroll container. child-theme.css sets
   `body { overflow-x: hidden }`, which makes body one (overflow-y turns to auto), and
   the strip then scrolled away like static content. `clip` cuts the same sideways
   overflow without creating a scroll container. Scoped to the 2026 homepage; a
   browser without `overflow: clip` (Safari < 16) keeps `hidden` and simply gets a
   strip that does not stick. */
body.hp-2026 {
    overflow-x: clip;
}
@media only screen and (max-width: 991px) {
    .hp-pillars .hp-pillars__tabs {
        position: sticky;
        top: 68px;
        z-index: 5;
        background-color: #F1F6FF;
        margin-top: -10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 18px;   /* was 24px below a 4px padding: 10 + 18 keeps the card where it was */
    }
}

/* "spacing here is a bit too big" - on the card title. 20px/28px (1.4) at <=576 and
   22px/30px above; both down to 1.25. */
@media only screen and (max-width: 992px) {
    .hp-pillars h2.hp-pillars__title {
        line-height: 1.25;
    }
}

/* Figma comment (Amram): "I'm not sure about the transparency for the navbar. it is
   not necessary." Once the page scrolls the navbar gets .is-scrolled, and
   child-theme.css and alex-css.css (with #wrapper-navbar) turn it
   rgba(255,255,255,.97) !important, so the content showed faintly through it. Same
   white, fully opaque, on the 2026 homepage; the id is needed to outrank alex-css. */
body.hp-2026 #wrapper-navbar .upstream-partial_navbar.is-scrolled,
body.hp-2026 #wrapper-navbar .upstream-partial_navbar.is-active {
    background-color: #fff !important;
}

/* Amram, 24 Sep: "desktop should be the same ... please make them both the same", and
   the text may not look thinner than the button's outline. Mobile already had
   SemiBold (Figma #88) and 0 letter spacing on the tabs (#85); desktop now matches -
   600 against the 1px outline, and the tabs lose the 2.7px / 0.12vw tracking that
   homepage-b.css gives them above 992. */
.hp-pillars .btn.btn-white {
    font-weight: 600;
}
.hp-pillars .hp-pillars__tab {
    letter-spacing: 0;
}


/* Client, 28 Sep (mobile): "can we make the whole line clickable and not only the text?"
   The toggle button only wrapped its label (299x22 inside a 360x66 row on a phone), so a
   tap on the row padding or its right side did nothing. An empty ::after of the button is
   stretched over the whole bar (already position:relative, overflow:hidden), so every tap
   on the row lands on the button itself - same click handler, keyboard behaviour and
   aria-expanded. An open row's bar is collapsed to 0 height (item 4 above) and clips it,
   so it never covers the panel, its tags or "Learn more". Desktop is left as it was. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__list button.hp-ecosystems__toggle::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}