/* Redesign 44 — complete stylesheet for the 'product' route (all design-system + page style blocks, in cascade order). */

/* R75 canonical propagation — approved R7 Track A system */
    body { margin: 0; font-family: var(--bm-font-body); background: var(--bm-canvas); }
    /* Rev 10 link boundary: zero-specificity unclassed-only content-link rule; classed/component
       links own their states; text-decoration comes from the DS :where(a) rule. */
    :where(#bx-main .shell-main) a:where(:not([class])) { color: var(--bm-blue); }
    :where(#bx-main .shell-main) a:where(:not([class]):hover) { color: var(--bm-blue-hover); }
    :where(#bx-main .shell-main) a:where(:not([class]):active) { color: var(--bm-blue-active); }
    a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; border-radius: 8px; }
    /* Rev 18.4-R1 — product breadcrumb sized and styled to match every other route's crumb.
       The DS renders the product-title band's breadcrumb into `.bm-hero__crumb` but ships NO rules
       for that class, so it inherited the band's type scale and read far larger than the crumbs
       elsewhere. Same caption size and same quiet treatment as `.bx-crumb`, in the light-surface
       palette because this band is the white→pale gradient rather than a dark art field.
       (The old pre-Hero `.bm-crumbbar` rules were dead here — the band owns the breadcrumb.) */
    #bx-main .bm-hero__crumb { font: var(--bm-caption); text-transform: none; letter-spacing: normal; color: var(--bm-muted); margin-bottom: 8px; }
    #bx-main .bm-hero__crumb a { color: var(--bm-muted); text-decoration: none; }
    #bx-main .bm-hero__crumb a:hover { color: var(--bm-blue); }
    #bx-main .bm-hero__crumb [aria-current="page"] { color: var(--bm-ink); }

    .w { max-width: 1200px; margin: 0 auto; padding-left: clamp(18px,4vw,48px); padding-right: clamp(18px,4vw,48px); box-sizing: border-box; display: flex; flex-direction: column; width: 100%; }
    .w-lg { padding-top: clamp(48px,6vw,84px); padding-bottom: clamp(48px,6vw,84px); gap: 30px; }
    .w-std { padding-top: clamp(40px,5.2vw,68px); padding-bottom: clamp(40px,5.2vw,68px); gap: 26px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: var(--bm-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bm-blue); }
    .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--bm-blue); flex: none; }
    .h2s { font: var(--bm-heading-2); font-family: var(--bm-font-display); color: var(--bm-navy); margin: 0; letter-spacing: -0.025em; text-wrap: pretty; }
    .lede { font: var(--bm-body-md); color: var(--bm-body); margin: 0; max-width: 64ch; text-wrap: pretty; }
    .head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
    #bx-main .link { font: var(--bm-button); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--bm-blue); }
    #bx-main .link:hover { color: var(--bm-blue-hover); }
    .link .fwd { display: inline-flex; flex: none; transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
    .link:hover .fwd { transform: translateX(3px); }
    .bx-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; width: fit-content; max-width: 100%; }
    .bx-pair > a { white-space: nowrap; }
    @media (max-width: 479px) { .bx-pair { grid-template-columns: 1fr; width: min(100%, 320px); } }
    .btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 9999px; font: var(--bm-button); box-sizing: border-box; transition: background 220ms cubic-bezier(0.2,0.8,0.2,1); cursor: pointer; border: none; }
    #bx-main .btn-light, #bx-main .btn-light:visited { background: #fff; color: var(--bm-navy); } #bx-main .btn-light:hover { background: #DCE9FF; color: var(--bm-navy); }
    #bx-main .btn-outline-light, #bx-main .btn-outline-light:visited { background: transparent; border: 1.5px solid #fff; color: #fff; } #bx-main .btn-outline-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
    #bx-main .btn-yellow, #bx-main .btn-yellow:visited { background: var(--bm-yellow); color: var(--bm-navy); } #bx-main .btn-yellow:hover { background: var(--bm-yellow-hover); color: var(--bm-navy); }
    .shell { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
    .shell-side { display: none; }
    .shell-main { display: flex; flex-direction: column; min-width: 0; }
    @media (min-width: 1200px) {
      .shell { grid-template-columns: clamp(300px,21.5vw,312px) minmax(0,1fr); position: relative; align-items: start; }
      .shell-side { display: flex; flex-direction: column; position: sticky; top: var(--bm-header-visible-h, 76px); align-self: start; height: calc(100dvh - var(--bm-header-visible-h, 76px)); overflow: hidden; background: #fff; border-right: 1px solid var(--bm-border-soft); box-shadow: 6px 0 18px rgba(0,0,71,0.04); }
      /* R81: bound the sidebar mount to the sticky rail box so the quote zone scrolls internally and the CTA stays pinned at short heights */
      .shell-side > * { flex: 1 1 auto; min-height: 0; min-width: 0; height: 100%; }
    }
    .chain { display: flex; flex-direction: column; gap: 0; }
    .chain-stage { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; align-items: start; }
    .chain-node { width: 92px; height: 92px; border-radius: 26px; border: 2px solid #B8CDF8; background: transparent; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; }
    .chain-icon { width: 70px; height: 70px; border-radius: 18px; background: #fff; border: 1px solid var(--bm-border); display: flex; align-items: center; justify-content: center; color: var(--bm-blue); box-sizing: border-box; }
    .chain-node.active { border-color: var(--bm-yellow-hover, #F2F28C); }
    .chain-node.active .chain-icon { background: var(--bm-yellow); border-color: var(--bm-yellow); color: var(--bm-navy); }
    .chain-kicker { font: var(--bm-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bm-muted); }
    .chain-title { font: var(--bm-heading-4); color: var(--bm-ink); margin: 0; }
    .chain-copy { font: var(--bm-body-sm); color: var(--bm-body); margin: 2px 0 0; max-width: 38ch; }
    .chain-conn { display: flex; }
    .chain-conn-v { width: 3px; height: 26px; margin: 4px 0 4px 44.5px; border-radius: 3px; background: var(--bm-blue); opacity: 0.35; }
    .chain-conn-h { display: none; }
    @media (min-width: 880px) {
      .chain { flex-direction: row; align-items: flex-start; }
      .chain-stage { flex: 1 1 0; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; min-width: 0; }
      .chain-copy { margin: 0 auto; }
      .chain-conn { flex: 0 0 34px; align-self: flex-start; margin-top: 44.5px; }
      .chain-conn-v { display: none; }
      .chain-conn-h { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--bm-blue); opacity: 0.35; }
      .chain-title { min-height: 1.35em; }
      .chain-copy { min-height: 4.6em; }
    }
    @media (min-width: 640px) and (max-width: 879px) {
      .chain { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); grid-auto-rows: auto; align-items: start; }
      .chain-stage { grid-template-columns: 96px minmax(0,1fr); }
      .chain-stage:nth-of-type(1) { grid-column: 1; grid-row: 1; }
      .chain-conn:nth-of-type(2) { grid-column: 2; grid-row: 1; align-self: start; margin-top: 44.5px; }
      .chain-conn:nth-of-type(2) .chain-conn-h { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--bm-blue); opacity: 0.35; }
      .chain-conn:nth-of-type(2) .chain-conn-v { display: none; }
      .chain-stage:nth-of-type(3) { grid-column: 3; grid-row: 1; }
      .chain-conn:nth-of-type(4) { grid-column: 3; grid-row: 2; }
      .chain-conn:nth-of-type(4) .chain-conn-v { margin-left: 44.5px; }
      .chain-stage:nth-of-type(5) { grid-column: 3; grid-row: 3; }
      .chain-conn:nth-of-type(6) { grid-column: 2; grid-row: 3; align-self: start; margin-top: 44.5px; }
      .chain-conn:nth-of-type(6) .chain-conn-h { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--bm-blue); opacity: 0.35; }
      .chain-conn:nth-of-type(6) .chain-conn-v { display: none; }
      .chain-stage:nth-of-type(7) { grid-column: 1; grid-row: 3; }
    }
    .aud { display: grid; grid-template-columns: 1fr; gap: 0 52px; }
    .aud-row { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--bm-border-soft); align-items: start; }
    .aud-num { font: 700 28px/1.15 var(--bm-font-display); letter-spacing: -0.02em; color: var(--bm-blue-border); }
    .aud-title { font: var(--bm-title-lg); color: var(--bm-ink); }
    .aud-copy { font: var(--bm-body-sm); color: var(--bm-body); margin-top: 3px; }
    @media (min-width: 700px) { .aud { grid-template-columns: repeat(2, minmax(0,1fr)); } .aud-row:nth-child(-n+2) { border-top: 0; } }
    /* R75 BalancedProductGrid + approved commerce card */
    .pgrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 22px; align-items: stretch; }
    /* Rev 17 P0.4: page-position ProductCard behavior deleted — no card re-arranges itself by grid position.
       One authoritative card contract: every card, including an orphan/full-span last card, keeps the same
       stacked composition, left-aligned metadata, and stepper-row + full-width Add action mode. */
    .pgrid > .pcell { grid-column: span 2; }
    @media (max-width: 999px) {
      .pgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .pgrid > .pcell { grid-column: span 1; display: flex; flex-direction: column; }
    }
    @media (max-width: 619px) {
      .pgrid { grid-template-columns: 1fr; }
      .pgrid > .pcell { grid-column: auto; display: flex; flex-direction: column; }
    }
    #bx-main .pc-name, #bx-main .pc-name:visited { font: var(--bm-title-md); color: var(--bm-ink); margin: 10px 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
    #bx-main a.pc-name:hover { color: var(--bm-blue); }
    /* QuantityStepper: DS component (Rev 10) mounted via x-import — no page-local stepper CSS */
    .svc-gear { padding-bottom: 0 !important; }
    .cta-bridge { padding-top: clamp(28px, 12px + 3.6vw, 68px); }
    
    .panel { background: #fff; border: 1px solid var(--bm-border); border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,71,0.06); }
    /* Rev 18.8 — relative lift, matching the other routes. Currently unused on this page (no
       .panel.lift in the markup), corrected so it cannot reintroduce the fixed-px seam if used. */
    @media (min-width: 768px) {
      /* THE OVERLAP IS REMOVED, not retuned. Twice reported, and tuning the number could never fix
         it: whenever the card is pulled above the hero's bottom edge, the strip beside its rounded
         top corners is navy (still hero) while a few px lower the same strip is pale blue (section)
         — a two-tone step notched into both sides of the card. The step's position depends on the
         overlap, so every value just moved the notch. Card top now meets the section top, so the
         hero-to-body transition is ONE clean full-width line and the card sits with symmetric space
         inside the pale band. This also ends the fixed-px-vs-vw-padding class of bug here for good.
         .lift keeps only its stacking context, so no markup changes. */
      .lift { position: relative; z-index: 2; }
    }
    .catv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,246px),1fr)); gap: 22px; align-items: stretch; }
    @media (min-width: 1000px) { .catv-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
    #bx-main .catv, #bx-main .catv:visited { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bm-border); border-radius: 22px; padding: 16px; box-sizing: border-box; color: inherit; transition: border-color 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 220ms cubic-bezier(0.2,0.8,0.2,1), transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
    #bx-main .catv:hover { border-color: var(--bm-blue-border); box-shadow: 0 8px 24px rgba(0,0,71,0.06); transform: translateY(-3px); color: inherit; }
    #bx-main .catv:active { transform: none; }
    .catv-well { height: 140px; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; }
    .catv-well img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 240ms cubic-bezier(0.2,0.8,0.2,1); }
    .catv:hover .catv-well img { transform: scale(1.03); }
    .catv-title { font: var(--bm-title-lg); color: var(--bm-ink); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
    .catv-copy { font: var(--bm-body-sm); color: var(--bm-body); margin: 4px 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.4em; text-wrap: pretty; }
    .catv-foot { margin-top: auto; width: 100%; min-height: 50px; border-radius: 14px; background: var(--bm-blue-mist, #F1F5FC); border: 1px solid transparent; color: var(--bm-blue); font: var(--bm-button); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; box-sizing: border-box; transition: background 200ms cubic-bezier(0.2,0.8,0.2,1), border-color 200ms cubic-bezier(0.2,0.8,0.2,1); }
    .catv-foot .fwd { display: inline-flex; flex: none; transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
    .catv:hover .catv-foot { background: var(--bm-blue-soft); border-color: var(--bm-blue-border); }
    .catv:hover .catv-foot .fwd { transform: translateX(3px); }
    .cats-bal { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 22px; }
    .cats-bal > .catv { grid-column: span 2; }
    .cats-bal > .catv:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
    .cats-bal > .catv:last-child:nth-child(3n+2) { grid-column: span 3; }
    .cats-bal > .catv:last-child:nth-child(3n+1) { grid-column: span 6; flex-direction: row; align-items: center; gap: 18px; }
    .cats-bal > .catv:last-child:nth-child(3n+1) .catv-well { width: 132px; height: 110px; flex: none; }
    .cats-bal > .catv:last-child:nth-child(3n+1) .catv-title, .cats-bal > .catv:last-child:nth-child(3n+1) .catv-copy { min-height: 0; }
    .cats-bal > .catv:last-child:nth-child(3n+1) .catv-foot { margin-top: 0; width: auto; flex: none; }
    @media (max-width: 999px) {
      .cats-bal { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .cats-bal > .catv, .cats-bal > .catv:nth-last-child(2):nth-child(3n+1), .cats-bal > .catv:last-child:nth-child(3n+2) { grid-column: span 1; flex-direction: column; }
      .cats-bal > .catv:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }
    @media (max-width: 619px) { .cats-bal { grid-template-columns: 1fr; } .cats-bal > .catv, .cats-bal > .catv:last-child:nth-child(odd) { grid-column: auto; } }
    #bx-main .btn-blue, #bx-main .btn-blue:visited { background: var(--bm-blue); color: #fff; } #bx-main .btn-blue:hover { background: var(--bm-blue-hover); color: #fff; }
    #bx-main .btn-outline, #bx-main .btn-outline:visited { background: #fff; border: 1.5px solid var(--bm-navy); color: var(--bm-navy); } #bx-main .btn-outline:hover { background: var(--bm-blue-soft); color: var(--bm-navy); }
    
    .pd { display: grid; grid-template-columns: 11fr 9fr; gap: clamp(28px,4vw,48px); align-items: start; }
    @media (max-width: 1179px) { .pd { grid-template-columns: minmax(0,1fr); gap: 26px; } .pd > * { min-width: 0; } }
    /* Rev 14: product media is the shared DS ProductGallery (exact [p.img, ...p.gallery]; 4:3 well;
       keyboard rail; failure fallback) — the hand-rolled stage + zoom lightbox are removed. */

    /* ---------------------------------------------------------------------------------------
       TEMPORARY UPSTREAM BRIDGE — design-system defect DS-185-01 (gallery thumbnail clipping).
       DELETE THIS BLOCK the moment the design system ships the fix and the package is re-bound.
       Deletion trigger and full diagnosis: round87-evidence/DS-185-DEFECT-REPORT.md

       Revision 18.5 rebuilt the thumbnail well as 68x56 border-box with 5px padding and
       overflow:hidden, and sized the image with `max-height:100%`. The well is a grid container
       whose single row track is sized BY that image, so the percentage resolves circularly and
       computes as `none`; the image falls back to its intrinsic square, capped only by
       max-width. Measured: a 56px-tall image inside a 46px content box, ~10px of every product
       photo clipped off the bottom — precisely the stand feet and screen legs the 18.5
       correction was written to reveal. It is the same circular-percentage failure the design
       system already fixed twice (Rev 17.1 main well, Rev 17.2 lightbox bound).

       This bridge does NOT try to override the percentage. The design system sets the image's
       `max-width`/`max-height` as an INLINE style, which beats any stylesheet rule short of
       `!important` — and `!important` is prohibited system-wide. Restating those bounds in CSS
       is therefore a dead end; an earlier attempt at it only moved the clipping from 10px off
       the bottom to 5px off the top and 5px off the bottom.

       Instead it makes the percentage RESOLVABLE. The well is `display:grid` with no explicit
       template, so its single implicit row is auto-sized by the image — which is exactly why
       `max-height:100%` is circular. Declaring definite `1fr` tracks pins the row to the well's
       56x44 content box, so the design system's own inline `max-height:100%` resolves to 44px
       and the whole image renders inside the well. `min-width/min-height:0` defeats the grid
       item's automatic minimum size so it can actually shrink to that bound.

       Geometry, colour, radius, border and selected state are untouched. */
    .bm-pg-thumb { grid-template-rows: 1fr; grid-template-columns: 1fr; }
    .bm-pg-thumb > img { min-width: 0; min-height: 0; }
    /* --------------------------------------------------------------------------------------- */
    .pd-buy { background: var(--bm-surface-blue); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
    .pd-price { font: 600 30px/1.1 var(--bm-font-display); color: var(--bm-navy); letter-spacing: -0.02em; }
    .pd-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    /* QuantityStepper (detail): DS component (Rev 10) mounted via x-import — density="default" */
    .pd-add { flex: 1; min-width: 200px; height: 50px; padding: 0 26px; border-radius: 9999px; background: var(--bm-blue); color: #fff; border: none; font: var(--bm-button); cursor: pointer; transition: background 220ms cubic-bezier(0.2,0.8,0.2,1); }
    .pd-add:hover { background: var(--bm-blue-hover); }
    .tabbar { display: flex; gap: 8px; border-bottom: 1px solid var(--bm-border-soft); flex-wrap: wrap; }
    .tab { height: 48px; padding: 0 20px; border: none; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font: var(--bm-title-md); color: var(--bm-muted); transition: color 180ms, border-color 180ms; border-radius: 8px 8px 0 0; }
    .tab:hover { color: var(--bm-navy); background: var(--bm-blue-mist, #F1F5FC); }
    .tab[aria-selected="true"] { color: var(--bm-blue); border-bottom-color: var(--bm-blue); }
    .tab:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: -3px; }
    .tabpanel { padding: 26px 4px 0; outline: none; }
    .acc { display: none; }
    @media (max-width: 599px) { .tabbar, .tabpanel { display: none !important; } .acc { display: block; } }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
    /* Rev 18.4-R1 — product price a step lighter than navy, so the product NAME stays the focal
       point of the card/row. The DS sets the price inline in priceRow(), so this needs !important;
       the selector matches that one inline font/colour pair and nothing else. */
    #bx-main span[style*="--bm-navy"][style*="/1.2"] { color: var(--bm-body) !important; }
    /* Rev 18.4-R1 — quantity stepper as ONE pill: single rounded outline around [− n +], light
       dividers between the three segments, and 48px tall to match the Add to quote button beside
       it. The DS QuantityStepper draws a separate ring around each glyph and stands 44px, so the
       per-glyph rings are removed here and the group becomes the affordance. Targets are matched by
       role + aria-label, and scoped to product surfaces so the compact rail stepper is untouched.
       Hit targets stay 46×48. No overflow clipping, so focus rings remain fully visible. */
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"],
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] {
      height: 48px; box-sizing: border-box; background: #fff;
      border: 1px solid var(--bm-border); border-radius: 9999px;
      /* Hug the three segments. Inside a card cell the group is a stretching flex item, which
         left a large empty rounded area on the + side of the pill. Left-aligned to the card's
         content edge so it lines up with the price, the title and the Add to quote button below
         it, instead of sitting centred on its own. */
      width: fit-content; flex: 0 0 auto;
      align-self: flex-start; margin-left: 0; margin-right: auto;
    }
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > button,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > button {
      height: 100% !important; width: 46px !important;
    }
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > button > span,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > button > span {
      width: 100% !important; height: 100% !important;
      border: 0 !important; background: transparent !important; border-radius: 0 !important;
    }
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > button:first-of-type > span,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > button:first-of-type > span {
      border-radius: 9999px 0 0 9999px !important;
    }
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > button:last-of-type > span,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > button:last-of-type > span {
      border-radius: 0 9999px 9999px 0 !important;
    }
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > .bm-qs-input,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > .bm-qs-input {
      height: 100% !important; width: 46px !important; margin: 0 !important;
      border-radius: 0 !important; border-top: 0 !important; border-bottom: 0 !important;
      border-left: 1px solid var(--bm-border-soft) !important;
      border-right: 1px solid var(--bm-border-soft) !important;
    }
    /* Hover feedback on the two end segments, matching the pale-blue action family. */
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > button:not(:disabled):hover > span,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > button:not(:disabled):hover > span {
      background: var(--bm-blue-soft) !important;
    }
    #bx-main .bx-list-item [role="group"][aria-label^="Quantity for"] > button > span,
    #bx-main .pcell [role="group"][aria-label^="Quantity for"] > button > span {
      font-size: 18px !important; color: var(--bm-navy) !important;
    }
    /* Rev 18.4-R1 — same one-pill stepper on the product detail buy box. It lives in .pd-controls
       rather than a card cell, so it needs its own selector; height is 50px here to match .pd-add
       beside it (the card grids pair with a 48px action). */
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] {
      height: 50px; box-sizing: border-box; background: #fff;
      border: 1px solid var(--bm-border); border-radius: 9999px;
      width: fit-content; flex: 0 0 auto;
    }
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] > button {
      height: 100% !important; width: 46px !important;
    }
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] > button > span {
      width: 100% !important; height: 100% !important;
      border: 0 !important; background: transparent !important; border-radius: 0 !important;
      font-size: 18px !important; color: var(--bm-navy) !important;
    }
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] > button:first-of-type > span {
      border-radius: 9999px 0 0 9999px !important;
    }
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] > button:last-of-type > span {
      border-radius: 0 9999px 9999px 0 !important;
    }
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] > button:not(:disabled):hover > span {
      background: var(--bm-blue-soft) !important;
    }
    #bx-main .pd-controls [role="group"][aria-label^="Quantity for"] > .bm-qs-input {
      height: 100% !important; width: 46px !important; margin: 0 !important;
      border-radius: 0 !important; border-top: 0 !important; border-bottom: 0 !important;
      border-left: 1px solid var(--bm-border-soft) !important;
      border-right: 1px solid var(--bm-border-soft) !important;
    }
    /* Rev 18.4-R1 — HERO FIELD NO LONGER CROPPED. The Rev08F hero families are full-bleed
       background FIELDS: every file declares sc-camel-preserve-aspect-ratio="none" and paints the navy→cobalt
       surface itself, i.e. they are authored to stretch to whatever band they are given. The DS
       stylesheet nonetheless sets object-fit: cover on .bm-hero__art, which scales the field to
       COVER the band and clips whatever does not fit — so the artwork was cut off at the bottom
       (and the sides at some ratios) on every route that uses a hero family.
       object-fit: fill matches the SVG's own declaration: the whole field is shown, nothing is
       clipped, and because these are vector fields drawn for arbitrary band ratios there is no
       photographic distortion to worry about. */
    /* removed (Rev 18.8): the DS now ships object-fit:fill on .bm-hero__art. */

.bm-qs{display:inline-flex;align-items:center;width:fit-content;flex:0 0 auto;box-sizing:border-box}.bm-qs--discs{gap:0}.bm-qs--segmented{border:1px solid var(--bm-border);border-radius:9999px;background:#fff;overflow:hidden}.bm-qs--segmented .bm-qs__btn{border-radius:0}.bm-qs--segmented .bm-qs__btn:hover:not(:disabled){background:var(--bm-surface-blue)}.bm-qs__btn:focus-visible{outline:2px solid var(--bm-blue);outline-offset:-2px}

:root { --bm-header-h: 76px; --bm-header-visible-h: 76px; }
    body { margin: 0; padding-top: var(--bm-header-h); }
    [id] { scroll-margin-top: calc(var(--bm-header-h) + 16px); }
    /* R4.27 (owner-directed): catalog search in the header bar, in the slot the phone number used to occupy.
       The DS Header has no search slot, so the website adapter overlays the shared SiteSearch on the bar,
       aligned to the actions group (measured, re-measured on resize), and follows the bar's hide-on-scroll.
       Below 768px (where the phone link was already hidden) it becomes a 44px search button that opens a
       full-width search row under the bar. */
    /* The DS phone link is removed from the bar (owner). Its display/padding are inline (React-owned), so the
       page rule takes it out of flow and sight instead of fighting display — no !important. */
    .bxh-bar a[href="tel:8454997499"].bxh-hide-md { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; margin: 0; }
    .bxh-search-slot { position: fixed; top: 14px; z-index: 201; height: 48px; display: flex; align-items: center; transition: opacity var(--bm-duration-base, 220ms) var(--bm-ease, ease), transform var(--bm-duration-base, 220ms) var(--bm-ease, ease); }
    .bxh-search-slot[data-hidden="true"] { opacity: 0; transform: translateY(-90px); pointer-events: none; }
    .bxh-search-btn { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid var(--bm-border); border-radius: 12px; cursor: pointer; color: var(--bm-navy); padding: 0; box-sizing: border-box; }
    .bxh-search-btn:hover { background: var(--bm-blue-mist, #F1F5FC); }
    .bxh-search-btn:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
    .bxh-search-sheet { position: fixed; top: var(--bm-header-visible-h, 76px); left: 0; right: 0; z-index: 199; background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--bm-border-soft); padding: 10px clamp(18px,3vw,40px) 14px; box-sizing: border-box; box-shadow: 0 12px 32px rgba(0,0,71,0.10); }
    @media (prefers-reduced-motion: reduce) { .bxh-search-slot { transition: none; } }

body { margin: 0; }
    /* Rev 12 rail scroll contract (contract-rail.html): the rail shell owns height; the nav yields
       (flex 0 1 auto, own scroll); the quote module is a min-height:0 flex column; ONLY the quote
       row list scrolls; the Review CTA is a non-scrolling sibling. No page-level clones, no
       competing overflow ancestors, no !important overflow workarounds, no trapped wheel. */
    .bxr { display: flex; flex-direction: column; height: 100%; min-height: 0; box-sizing: border-box; background: #fff; }
    .bxr-nav { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 24px 20px 12px 20px; box-sizing: border-box; display: flex; flex-direction: column; }
    .bxr-cap { font: var(--bm-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bm-muted); padding: 0 12px 12px; flex: none; }
    .bxr-back { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--bm-blue); font: var(--bm-body-sm); font-weight: 700; text-decoration: none; transition: background 160ms; flex: none; }
    .bxr-back:hover { background: var(--bm-blue-mist, #F1F5FC); color: var(--bm-blue); }
    /* Rev 14: the redundant scope-heading path (.bxr-level/levelLabel/hasLevel) is REMOVED. */
    /* Rev 09/12 link boundary: row colours/current state come from the DS .bm-rail-link classed
       states (tokens/base.css — pale-blue current surface + 3px inset cobalt indicator, never
       yellow); local rules are layout-only. Light inset dividers between actionable rows. */
    .bxr-sep { border-top: 1px solid var(--bm-border-soft); margin: 0 12px; flex: none; }
    .bxr-item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; border-radius: 14px; font: var(--bm-title-md); transition: background 180ms cubic-bezier(0.2,0.8,0.2,1), color 180ms cubic-bezier(0.2,0.8,0.2,1); }
    .bxr-item[aria-current="true"] { color: var(--bm-blue); box-shadow: inset 3px 0 0 var(--bm-blue); }
    .bxr-plate { width: 34px; height: 34px; border-radius: 10px; background: var(--bm-blue-soft); border: 1px solid var(--bm-blue-border); display: grid; place-items: center; flex: none; color: var(--bm-blue); }
    .bxr-plate svg { width: 18px; height: 18px; display: block; }
    .bxq-mod { margin-top: auto; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--bm-border-soft); background: #fff; }
    /* Owner request (Sept 2026): the quote module anchors to the BOTTOM of the rail — heading and items sit
       directly above the Review quote CTA and grow upward as items are added, instead of hanging from the top. */
    .bxq-head { display: flex; align-items: center; gap: 4px; padding: 10px 14px 2px 14px; flex: none; margin-top: auto; }
    .bxq-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 0 10px; background: transparent; border: none; border-radius: 12px; cursor: pointer; text-align: left; transition: background 180ms cubic-bezier(0.2,0.8,0.2,1); }
    .bxq-toggle:hover { background: var(--bm-blue-mist, #F1F5FC); }
    .bxq-title { font: 700 14px/1.3 var(--bm-font-body); color: var(--bm-navy); }
    .bxq-chev { font-size: 10px; color: var(--bm-muted); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); display: inline-block; }
    .bxq-preview { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 0 20px; box-sizing: border-box; }
    /* Only this list scrolls; wheel at its boundaries resumes page scroll (no overscroll trap). */
    .bxq-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
    .bxq-list { display: flex; flex-direction: column; }
    .bxq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 9px 4px 9px 12px; border-top: 1px solid var(--bm-border-soft); }
    .bxq-list > .bxq-row:first-child { border-top: 0; }
    .bxq-thumb { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: none; }
    .bxq-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
    .bxq-name { font: 600 14px/1.3 var(--bm-font-body); color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
    /* Rev 18.3: the P6 overlay-anchor bridge is DELETED. QuotePreviewRow now ships `productHref`, so the
       shared component owns the combined thumbnail+title anchor, its no-underline blue hover/focus band,
       the pure-white image well and the controls-outside-the-link structure. No page-level override. */
    /* Rev 18.4-R1 — the rail deliberately shows NO price. Per-unit prices live on the product
       cards, the product page and the Request Quote review; in a 300px rail they crowded the row
       and forced the controls to wrap. Removing them also retires the wrap/gap workarounds the
       price line needed, so the row returns to the DS geometry: name, then stepper + remove. */
    /* removed (Rev 18.8): QuotePreviewRow's remove control now owns its destructive hover,
       so the page no longer needs !important to reach past the component's inline styles. */

    /* Rev 17.3 row detail link: thumbnail + name are one 44px-tall focusable target. Colour/hover/current
       states come from the shared .bm-rail-link contract in tokens/base.css — no local link restyling. */
    .bxq-detail { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 120px; min-height: 44px; padding: 2px 4px 2px 0; border-radius: 10px; text-decoration: none; }
    .bxq-detail:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
    /* QuantityStepper: DS component (Rev 10) per row; stepper + remove clustered right. */
    .bxq-ctl { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; flex-shrink: 0; margin-left: auto; }
    .bxq-x { width: 44px; height: 44px; margin: 0; border-radius: 12px; background: transparent; border: none; color: var(--bm-muted); display: grid; place-items: center; line-height: 0; padding: 0; cursor: pointer; align-self: center; transition: background 180ms cubic-bezier(0.2,0.8,0.2,1), color 180ms cubic-bezier(0.2,0.8,0.2,1); }
    .bxq-x:hover { background: #FFF1F1; color: #B42318; }
    .bxq-x:active { background: #FFE4E4; color: #B42318; }
    .bxq-x:focus-visible { background: #FFF1F1; color: #B42318; outline: 3px solid var(--bm-blue); outline-offset: -3px; }
    .bxq-x svg { width: 12px; height: 12px; flex: none; pointer-events: none; display: block; }
    .bxq-close { flex: none; }
    .bxq-close:hover { background: var(--bm-blue-mist, #F1F5FC); color: var(--bm-navy); }
    .bxq-close:active { background: var(--bm-blue-soft); color: var(--bm-navy); }
    .bxq-close:focus-visible { background: var(--bm-blue-mist, #F1F5FC); color: var(--bm-navy); outline: 3px solid var(--bm-blue); outline-offset: -3px; }
    .bxr-cta-region { flex: none; background: #fff; padding: 12px 20px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
    /* Rev 09 link boundary: CTA colours/states come from the DS .bm-rail-cta (tokens/base.css). */
    .bxr-cta { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 18px; border-radius: 9999px; border: 1.5px solid transparent; font: var(--bm-button); box-sizing: border-box; transition: background 220ms cubic-bezier(0.2,0.8,0.2,1), border-color 220ms cubic-bezier(0.2,0.8,0.2,1); }
    .bxr-qsum { font: var(--bm-body-sm); color: var(--bm-body); display: flex; align-items: center; gap: 8px; min-height: 24px; }
    .bxr-spacer { flex: 1 1 auto; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) { .bxr * { transition: none !important; } }

body { margin: 0; }
    /* Rev 10 link boundary: content-link colours come from the DS :where(a) rules; no bare a{} rules. Classed header/footer links own their states. */
    .bxf-grid { display: grid; grid-template-columns: minmax(110px, 0.7fr) minmax(130px, 1fr) minmax(130px, 0.9fr) minmax(110px, 0.8fr) minmax(300px, 1.2fr); gap: clamp(20px, 2.4vw, 32px); }
    /* Actions: compact group after the hours, side by side whenever the Contact track is ≥300px. */
    .bxf-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); max-width: 380px; }
    .bxf-contact { container: bxfc / inline-size; }
    /* Rev 07 — tablet/narrow desktop: named areas, no auto-placement. Brand row, balanced
       three-column navigation row, then Contact as a compact full-width row. */
    @media (max-width: 1179px) {
      .bxf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "brand brand brand" "browse services company" "contact contact contact"; row-gap: 36px; }
      .bxf-brand { grid-area: brand; }
      .bxf-browse { grid-area: browse; }
      .bxf-services { grid-area: services; }
      .bxf-company { grid-area: company; }
      .bxf-contact { grid-area: contact; }
    }
    /* Rev 07 — mobile: brand, two-column nav subgrid (Browse tall left; Services + Company right), contact. */
    @media (max-width: 599px) {
      .bxf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "browse services" "browse company" "contact contact"; column-gap: 24px; row-gap: 28px; }
    }
    @media (max-width: 419px) {
      .bxf-grid { grid-template-columns: 1fr; grid-template-areas: "brand" "browse" "services" "company" "contact"; row-gap: 26px; }
    }
    /* Stack equal full width only where two buttons genuinely can't fit; cap so pills don't oversize. */
    @media (max-width: 479px) { .bxf-actions { grid-template-columns: 1fr; max-width: 320px; } }
    /* Rev 08D — the footer stays full width; only its inner container follows the page measure.
       Defaults reproduce the previous centred 1360px container exactly; a page that publishes the
       --bx-footer-* hooks (home) aligns the inner grid to its main content column instead. */
    .bxf-inner { max-width: 1360px; margin: 0 auto; padding: 52px clamp(18px,3vw,48px) 28px; box-sizing: border-box; }
    @media (min-width: 1200px) {
      .bxf-inner {
        max-width: var(--bx-footer-max, 1360px);
        margin-left: var(--bx-footer-ml, auto);
        margin-right: var(--bx-footer-mr, auto);
        padding-left: var(--bx-footer-pl, clamp(18px,3vw,48px));
        padding-right: var(--bx-footer-pr, clamp(18px,3vw,48px));
      }
    }

body { margin: 0; }
    address { font-style: normal; }
    .bxcd { display: flex; flex-direction: column; }
    .bxcd-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    /* footer variant: compact groups, subtle dividers */
    .bxcd-f { gap: 11px; }
    .bxcd-f .bxcd-group + .bxcd-group { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 11px; }
    /* page variant: more air, light dividers */
    .bxcd-p { gap: 18px; }
    .bxcd-p .bxcd-group + .bxcd-group { border-top: 1px solid var(--bm-border-soft); padding-top: 18px; }
    /* hours grids — rows can never wrap internally */
    .bxcd-hours { margin: 0; }
    .bxcd-hours dt, .bxcd-hours dd { margin: 0; white-space: nowrap; }
    .bxcd-hours-f { display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 12px; row-gap: 5px; }
    .bxcd-hours-p { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 16px; row-gap: 6px; max-width: 340px; }
    @media (max-width: 379px) {
      .bxcd-hours-p { grid-template-columns: 1fr; row-gap: 2px; }
      .bxcd-hours-p dd { margin-bottom: 6px; }
    }
    /* Rev 07 — when the footer Contact block spans a full-width row (container ≥ 40rem),
       the three groups form a compact horizontal subgrid instead of one tall column. */
    @container bxfc (min-width: 40rem) {
      .bxcd-f { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: clamp(32px, 8cqw, 88px); row-gap: 12px; align-items: start; }
      .bxcd-f > div:first-child { grid-column: 1 / -1; }
      .bxcd-f .bxcd-group + .bxcd-group { border-top: none; padding-top: 0; }
    }

body { margin: 0; }
    .bxs-input::placeholder { color: var(--bm-muted); }
    .bxs-input:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
    .bxs-opt:hover, .bxs-opt[aria-selected="true"] { background: var(--bm-blue-mist, #F1F5FC); }
    .bxs-opt:focus-visible, .bxs-all:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: -3px; }
    .bxs-all:hover { background: var(--bm-blue-mist, #F1F5FC); }

.bxh-nav-desktop{display:flex}.bxh-burger,.bxh-mobile-quote{display:none !important}.bxh-iconbtn{width:44px;height:44px;place-items:center;line-height:0;background:transparent;border:1px solid var(--bm-border);border-radius:12px;cursor:pointer;color:var(--bm-navy);padding:0;box-sizing:border-box}.bxh-iconbtn svg{display:block}.bxh-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:240;display:flex;align-items:center;gap:10px;background:#fff;color:var(--bm-ink);border:1px solid var(--bm-border);border-radius:16px;padding:5px 5px 5px 14px;box-shadow:0 10px 30px rgba(0,0,71,.16);max-width:min(420px,calc(100vw - 24px));box-sizing:border-box}.bxh-toast__text{overflow:hidden}.bxh-toast__text>span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1199px){.bxh-nav-desktop{display:none !important}.bxh-burger{display:grid !important}}@media(max-width:767px){.bxh-hide-md{display:none !important}}@media(max-width:479px){.bxh-hide-narrow{display:none !important}.bxh-mobile-quote{display:grid !important}}@media(prefers-reduced-motion:reduce){.bxh-bar{transition:none !important}}

.bm-hero{position:relative;overflow:hidden;background:var(--bm-hero-surface)}.bm-hero--field{background:var(--bm-navy)}.bm-hero__inner{position:relative;z-index:1;max-width:var(--bm-container);margin:0 auto;box-sizing:border-box}.bm-hero__copy{display:flex;flex-direction:column;gap:var(--bm-space-4);min-width:0}.bm-hero__eyebrow{font:var(--bm-eyebrow);letter-spacing:var(--bm-eyebrow-ls);text-transform:uppercase;color:var(--bm-blue)}.bm-hero__title{margin:0;text-wrap:pretty;color:var(--bm-navy)}.bm-hero__body{margin:0;text-wrap:pretty;color:var(--bm-body);max-width:var(--bm-hero-body-measure)}.bm-hero__phone{font:var(--bm-title-md);color:var(--bm-blue);text-decoration:none}.bm-hero__field{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}.bm-hero__art{display:block;width:100%;height:100%;object-fit:fill}.bm-hero__scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,71,.78) 0%,rgba(0,0,71,.58) 34%,rgba(0,0,71,.18) 60%,rgba(0,0,71,0) 78%)}@media(max-width:767px){.bm-hero__scrim{background:linear-gradient(180deg,rgba(0,0,71,.72) 0%,rgba(0,0,71,.5) 55%,rgba(0,0,71,.2) 100%)}}.bm-hero__crumb{font:var(--bm-caption);color:var(--bm-muted);line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:0}.bm-hero__crumb a{color:var(--bm-muted);text-decoration:none}.bm-hero__crumb a:hover,.bm-hero__crumb a:focus-visible{color:var(--bm-blue);text-decoration:underline}.bm-hero__crumb [aria-current]{color:var(--bm-ink)}.bm-hero--on-dark .bm-hero__crumb,.bm-hero--on-dark .bm-hero__crumb a{color:var(--bm-on-dark-muted)}.bm-hero--on-dark .bm-hero__crumb a:hover,.bm-hero--on-dark .bm-hero__crumb a:focus-visible{color:#fff}.bm-hero--on-dark .bm-hero__crumb [aria-current]{color:#fff}.bm-hero--center .bm-hero__inner{display:flex;flex-direction:column;justify-content:center}.bm-hero--on-dark .bm-hero__eyebrow{color:var(--bm-yellow)}.bm-hero--on-dark .bm-hero__title{color:#fff}.bm-hero--on-dark .bm-hero__body{color:var(--bm-on-dark-muted)}.bm-hero--on-dark .bm-hero__phone{color:#fff}.bm-hero--s2 .bm-hero__inner{padding:var(--bm-hero-s2-pad-y) var(--bm-hero-pad-x);min-height:var(--bm-hero-s2-min)}.bm-hero--s2 .bm-hero__copy{max-width:var(--bm-hero-copy-measure)}.bm-hero--s2 .bm-hero__title{font:var(--bm-display-lg);letter-spacing:var(--bm-display-lg-ls)}.bm-hero--s2 .bm-hero__body{font:var(--bm-body-lg)}@media(min-width:768px){.bm-hero--s2 .bm-hero__copy{max-width:56%}}.bm-hero--compact .bm-hero__inner{padding:var(--bm-hero-compact-pad-y) var(--bm-hero-pad-x);display:flex;align-items:center;min-height:var(--bm-hero-compact-env-390)}.bm-hero--compact .bm-hero__copy{max-width:var(--bm-hero-copy-measure)}.bm-hero--compact .bm-hero__title{font:var(--bm-heading-1);letter-spacing:var(--bm-heading-1-ls)}.bm-hero--compact .bm-hero__body{font:var(--bm-body-md)}@media(min-width:768px){.bm-hero--compact .bm-hero__inner{min-height:var(--bm-hero-compact-env-768)}.bm-hero--compact .bm-hero__copy{max-width:62%}}@media(min-width:1024px){.bm-hero--compact .bm-hero__inner{min-height:var(--bm-hero-compact-env-1024)}}@media(min-width:1440px){.bm-hero--compact .bm-hero__inner{min-height:var(--bm-hero-compact-env-1440)}}.bm-hero--band .bm-hero__inner{padding:var(--bm-hero-band-pad-y) var(--bm-hero-pad-x);display:flex;flex-direction:column;gap:var(--bm-space-3)}.bm-hero--band .bm-hero__title{font:var(--bm-heading-2)}.bm-hero--band .bm-hero__body{font:var(--bm-body-md)}.bm-hero--product-title{background:linear-gradient(180deg,#FFFFFF 0%,#DCE7F8 100%);border-bottom:1px solid var(--bm-border-soft)}.bm-hero--product-title .bm-hero__inner{padding:clamp(16px,2.2vw,26px) var(--bm-hero-pad-x)}.bm-hero--product-title .bm-hero__copy{gap:10px}.bm-hero--product-title .bm-hero__title{font:var(--bm-heading-1);letter-spacing:var(--bm-heading-1-ls);color:var(--bm-navy);max-width:30ch}.bm-hero__motif{display:flex;align-items:center;gap:8px}.bm-hero__motif-line{width:26px;height:2px;background:var(--bm-blue);border-radius:2px}.bm-hero__motif-dot{width:6px;height:6px;border-radius:50%;background:var(--bm-yellow)}.bm-hero__pill{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:9999px;background:#fff;border:1px solid var(--bm-border-soft);font:var(--bm-caption);font-weight:700;color:var(--bm-blue);width:fit-content}

.bx-cta-close-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4cqw,48px);align-items:center;max-width:1040px;margin:0 auto}@container(max-width:760px){.bx-cta-close-grid{grid-template-columns:1fr;gap:24px}}.bx-cta-close-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}@media(max-width:479px){.bx-cta-close-acts{flex-direction:column;align-items:stretch}.bx-cta-close-acts>*{width:100%}}