/* =============================================================================
   CMS banner (the home-page carousel and any banner block).

   Loaded by _PublicLayout only when the page renders a banner (ViewData["CmsUsesBanner"]),
   and by the CMS banner editor and previews. Every rule is scoped to a banner class, so the
   file is safe to include inside the admin shell as well.
   ============================================================================= */
.cms-banner__text,
.cms-banner__btn { font-family: inherit !important; }

/* ---------------------------------------------------------------------------
   CMS banner. Scoped to .cms-banner so it cannot reach unrelated components.
   Per-instance geometry is emitted inline by the view; this is the shared shell.
   --------------------------------------------------------------------------- */
.cms-banner { position: relative; margin: 0 auto; max-width: var(--max); }
.cms-banner--full { max-width: none; }
.cms-banner__viewport { position: relative; width: 100%; }
.cms-banner__slide { position: relative; width: 100%; height: 100%; display: flex; overflow: hidden; }
.cms-banner__slide[hidden] { display: none; }
.cms-banner__bg { position: absolute; inset: 0; }
.cms-banner__bg img { width: 100%; height: 100%; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
.cms-banner__bg[data-fit="cover"] img { object-fit: cover; }
.cms-banner__bg[data-fit="contain"] img { object-fit: contain; }
.cms-banner__bg[data-fit="fill"] img { object-fit: fill; }
.cms-banner__overlay { position: absolute; inset: 0; pointer-events: none; }
.cms-banner__stage { position: relative; width: 100%; margin: 0 auto; }
.cms-banner__el { position: absolute; display: flex; }
.cms-banner__el > * { max-width: 100%; }
/* An image element's <img> carries the source's raw width/height attributes (so the layout
   reserves space before it loads), which otherwise wins over the flex box sizing above and
   renders the image at its native pixel size instead of the authored box. data-fit is only
   present on image elements, so this never touches text, buttons or shapes. */
.cms-banner__el[data-fit] img { width: 100%; height: 100%; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
.cms-banner__el[data-fit="cover"] img { object-fit: cover; }
.cms-banner__el[data-fit="contain"] img { object-fit: contain; }
.cms-banner__el[data-fit="fill"] img { object-fit: fill; }
/* Marks whichever jump-to-slide link points at the slide it's already on - see banner.js. */
.cms-banner__el--nav-current { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 4px; border-radius: var(--radius-md); }
.cms-banner__text { margin: 0; overflow-wrap: anywhere; }
.cms-banner__shape { width: 100%; height: 100%; }
.cms-banner__btn { display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-family: var(--font-sans); font-weight: 600;
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
    min-height: var(--control-min-target); }
.cms-banner__btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.cms-banner__btn--primary:hover { background: var(--btn-primary-bg-hover); }
.cms-banner__btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
    border: 1px solid var(--btn-secondary-border); }
.cms-banner__btn--ghost { color: var(--btn-ghost-fg); border: 1px solid currentColor; }

/* The stretched whole-slide link sits beneath the interactive elements, so buttons
   and image links keep working and no anchor is ever nested inside another. */
.cms-banner__slide-link { position: absolute; inset: 0; z-index: 0; }
.cms-banner__stage, .cms-banner__el { z-index: 1; }

.cms-banner__nav,
.cms-banner__pause { display: none !important; }
.cms-banner__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    border: 0; cursor: pointer;
    border-radius: var(--radius-pill); line-height: 1; place-items: center; }
.cms-banner__nav--prev { left: var(--space-3); }
.cms-banner__nav--next { right: var(--space-3); }
.cms-banner__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
    z-index: 2; display: flex; gap: var(--space-2); }
/* The dot is 12px but the hit area is a full touch target, so the control is easy to
   press without making the visual indicator clumsy. */
.cms-banner__dots button { width: 12px; height: 12px; padding: 0; border-radius: var(--radius-pill);
    border: 1px solid var(--paper); cursor: pointer; position: relative; }
.cms-banner__dots button::after { content: ""; position: absolute; top: 50%; left: 50%;
    width: var(--control-min-target); height: var(--control-min-target); transform: translate(-50%,-50%); }
.cms-banner__pause { position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 2;
    cursor: pointer; border: 0; background: rgba(255,255,255,.85); color: var(--ink);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    min-height: var(--control-min-target); }

.cms-banner__video { position: relative; width: 100%; height: 100%; }
.cms-banner__video img, .cms-banner__video video, .cms-banner__video iframe {
    width: 100%; height: 100%; object-fit: cover; border: 0; }
.cms-banner__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 64px; height: 64px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
    background: rgba(255,255,255,.9); color: var(--ink); font-size: 1.5rem; }

.cms-banner :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .cms-banner__slide { transition: none !important; animation: none !important; } }
@keyframes cmsBannerFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes cmsBannerRiseIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideInLeft { from { opacity: 0; transform: translateX(-40px) } to { opacity: 1; transform: none } }

.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__viewport,
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__viewport {
    overflow: hidden !important;
}

.cms-banner[data-animating] .cms-banner__slide[data-from],
.cms-banner[data-animating] .cms-banner__slide[data-active="true"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cms-banner[data-motion-ready] .cms-banner__slide[data-from],
.cms-banner[data-motion-ready] .cms-banner__slide[data-leaving] {
    pointer-events: none;
    will-change: transform, opacity;
}

.cms-banner[data-motion-ready] .cms-banner__slide[data-from] { z-index: 2; }
.cms-banner[data-motion-ready] .cms-banner__slide[data-leaving] { z-index: 1; }
.cms-banner[data-motion-ready] .cms-banner__slide[data-active="true"] { z-index: 2; }

.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide {
    transition: transform var(--cms-banner-transition, 750ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-from] { transition: none; }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-from="next"] { transform: translate3d(100%, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-from="prev"] { transform: translate3d(-100%, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-active="true"] { transform: translate3d(0, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-leaving="next"] { transform: translate3d(-100%, 0, 0); }
.cms-banner[data-motion-ready][data-transition="slide"] .cms-banner__slide[data-leaving="prev"] { transform: translate3d(100%, 0, 0); }

.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide {
    transition: opacity var(--cms-banner-transition, 600ms) ease;
}
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide[data-from] { transition: none; opacity: 0; }
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide[data-active="true"] { opacity: 1; }
.cms-banner[data-motion-ready][data-transition="fade"] .cms-banner__slide[data-leaving] { opacity: 0; }

/* Banner motion. Everything here is opt-in: the defaults in the editor are "none", and
   a visitor who asks for reduced motion gets the static result regardless.
   data-motion-ready is set by banner.js once it can keep two slides painted; until then
   slides stay in normal flow so a no-JS first paint cannot collapse the viewport. */

/* Entrance presets. Each maps to one named animation the editor can pick; the stylesheet
   owns what the motion actually is, so no CSS ever comes from content. */

/* Element entrance runs only once its slide is the active one. The server marks the first
   slide active, so with JavaScript disabled that slide still animates in and, more
   importantly, still ends up visible. */
.cms-banner__el[data-anim]:not([data-anim=""]) { animation-fill-mode: both; animation-play-state: paused; }
.cms-banner__slide[data-active="true"] .cms-banner__el[data-anim] { animation-play-state: running; }
.cms-banner__el[data-anim="fadeIn"] { animation-name: cmsBannerFadeIn; }
.cms-banner__el[data-anim="riseIn"] { animation-name: cmsBannerRiseIn; }
@media (prefers-reduced-motion: reduce) {
    /* Not just "slower" - no entrance at all, and nothing left mid-animation. */
    .cms-banner__slide[data-active="true"],
    .cms-banner__el[data-anim]:not([data-anim=""]) { animation: none !important; opacity: 1 !important; transform: none !important; }
    .cms-banner[data-motion-ready] .cms-banner__slide { transition: none !important; } }

/* Vertical navigation. The controls move to the right edge and the arrows sit above and
   below, so the affordance matches the direction the carousel actually travels. */
.cms-banner[data-nav="vertical"] .cms-banner__nav { top: auto; left: auto; right: var(--space-3); transform: none; }
.cms-banner[data-nav="vertical"] .cms-banner__nav--prev { top: var(--space-3); }
.cms-banner[data-nav="vertical"] .cms-banner__nav--next { bottom: var(--space-3); }
.cms-banner[data-nav="vertical"] .cms-banner__dots {
    flex-direction: column; left: auto; bottom: auto; right: var(--space-3);
    top: 50%; transform: translateY(-50%);
}
/* Dots clear the arrows when both are shown. */
.cms-banner[data-nav="vertical"] .cms-banner__pause { bottom: var(--space-3); left: var(--space-3); right: auto; }

.cms-banner[data-nav="horizontal"][data-dots-align="start"] .cms-banner__dots { left: var(--space-4); transform: none; }
.cms-banner[data-nav="horizontal"][data-dots-align="end"] .cms-banner__dots { left: auto; right: var(--space-4); transform: none; }
.cms-banner[data-nav="vertical"][data-dots-align="start"] .cms-banner__dots { top: var(--space-6); transform: none; }
.cms-banner[data-nav="vertical"][data-dots-align="end"] .cms-banner__dots { top: auto; bottom: var(--space-6); transform: none; }

/* Indicator styles. Dots stay the compact default; numbers, labels and thumbnails need real
   boxes, so they drop the circular treatment rather than trying to squeeze into it. */
.cms-banner__dots[data-style="numbers"] button,
.cms-banner__dots[data-style="labels"] button,
.cms-banner__dots[data-style="thumbnails"] button {
    width: auto; height: auto; border-radius: var(--radius-md);
    background: rgba(255,255,255,.85); color: var(--ink);
    padding: var(--space-1) var(--space-3); min-height: var(--control-min-target);
    font: 600 .85rem/1 var(--font-sans); overflow: hidden;
}
.cms-banner__dots[data-style="numbers"] button { min-width: var(--control-min-target); }
.cms-banner__dots[data-style="labels"] button { max-width: 180px; white-space: nowrap;
    text-overflow: ellipsis; display: inline-block; }
.cms-banner__dots[data-style="thumbnails"] button { padding: 0; line-height: 0; border: 2px solid transparent; }
.cms-banner__dots[data-style="thumbnails"] button img { width: 64px; height: 40px; object-fit: cover; display: block; }

.cms-banner__dots[data-style="numbers"] button[aria-current="true"],
.cms-banner__dots[data-style="labels"] button[aria-current="true"] { background: var(--ink); color: var(--paper); }
.cms-banner__dots[data-style="thumbnails"] button[aria-current="true"] { border-color: var(--paper); }

/* The oversized invisible hit area only makes sense for the small round dots. */
.cms-banner__dots:not([data-style="dots"]) button::after { display: none; }
@keyframes cmsBannerSlideInRight { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideInUp    { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerSlideInDown  { from { opacity: 0; transform: translateY(-40px) } to { opacity: 1; transform: none } }
@keyframes cmsBannerZoomIn       { from { opacity: 0; transform: scale(.86) } to { opacity: 1; transform: none } }
@keyframes cmsBannerZoomOut      { from { opacity: 0; transform: scale(1.14) } to { opacity: 1; transform: none } }

.cms-banner__el[data-anim="slideInRight"] { animation-name: cmsBannerSlideInRight; }
.cms-banner__el[data-anim="slideInUp"]    { animation-name: cmsBannerSlideInUp; }
.cms-banner__el[data-anim="slideInDown"]  { animation-name: cmsBannerSlideInDown; }
.cms-banner__el[data-anim="zoomIn"]       { animation-name: cmsBannerZoomIn; }
.cms-banner__el[data-anim="zoomOut"]      { animation-name: cmsBannerZoomOut; }
.cms-banner__el[data-anim="slideInLeft"]  { animation-name: cmsBannerSlideInLeft; }

/* Named curves, resolved here so a document never carries a raw cubic-bezier. */
.cms-banner__el[data-ease="ease"]      { animation-timing-function: ease; }
.cms-banner__el[data-ease="linear"]    { animation-timing-function: linear; }
.cms-banner__el[data-ease="easeOut"]   { animation-timing-function: cubic-bezier(.16,.84,.44,1); }
.cms-banner__el[data-ease="easeInOut"] { animation-timing-function: cubic-bezier(.65,.05,.36,1); }
.cms-banner__el[data-ease="back"]      { animation-timing-function: cubic-bezier(.34,1.56,.64,1); }

/* A CMS artwork slide is intentionally left as one image. Text is not duplicated in
   HTML; editors upload the completed creative through the banner module. */
.cms-banner--artwork .cms-banner__bg img { object-fit: cover; }
.cms-banner--artwork .cms-banner__stage { pointer-events: none; }
.cms-banner__nav { display: grid !important; width: 72px; height: 72px; padding: 0; color: #fff; background: transparent; font-size: 3rem; z-index: 4;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.cms-banner__nav svg { width: 48px; height: 48px; display: block; }
.cms-banner__nav[hidden] { display: none !important; }
.cms-banner__nav:hover,
.cms-banner__nav:focus-visible { background: transparent; color: #fff; }
@media (max-width: 640px) {
    .cms-banner__nav { width: 52px; height: 52px; }
    .cms-banner__nav svg { width: 34px; height: 34px; }
}
.cms-banner__dots button { border-color: #fff; background: rgba(255,255,255,.75); }
.cms-banner__dots button[aria-current="true"] { background: var(--color-gold); border-color: var(--color-gold); }
@media (max-width: 820px) {
    .cms-banner--artwork .cms-banner__viewport { min-height: 0 !important; height: auto !important; aspect-ratio: 1.92; } }
/* ---------------------------------------------------------------------------
   Icon-rail navigation (formerly banner-navigation.css)
   --------------------------------------------------------------------------- */
/* Shared by the banner renderer and the CMS navigation preview. */
.banner-icon-rail {
    box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
    padding: 12px 20px; background: transparent;
    color: var(--banner-rail-text, #bfc0f5); border-right: 0;
    overflow-y: auto; scrollbar-width: thin;
}
.banner-icon-rail[hidden], .cms-banner [hidden] { display: none !important; }
.banner-icon-rail button {
    box-sizing: border-box; display: flex; flex: 0 0 auto; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 112px;
    padding: 14px 8px; border: 2px solid transparent; border-radius: 16px;
    color: inherit; background: transparent; font: 400 16px/1.3 "Poppins", sans-serif;
    text-align: center; cursor: pointer; overflow-wrap: anywhere;
    transition: border-color .2s, background-color .2s, color .2s;
}
.banner-icon-rail button svg { display: block; width: 48px; height: 48px; flex: 0 0 auto; }
.banner-icon-rail button:hover { background: #ffffff0d; }
.banner-icon-rail button[aria-current="true"] {
    border-color: var(--banner-rail-accent, #ffbf24); color: #fff; background: #00000018;
}
.banner-icon-rail button[aria-current="true"] svg { color: var(--banner-rail-accent, #ffbf24); }
.banner-icon-rail button:focus-visible { outline: 3px solid var(--banner-rail-accent, #ffbf24); outline-offset: 3px; }
.cms-banner--rail { --banner-rail-width: clamp(150px, 12.3vw, 240px); --banner-rail-gap: 30.4px; --banner-rail-btn: 112px; }
.cms-banner--rail .cms-banner__viewport {
    /* Four rail buttons with the same gap above, between, and below inside 600px. */
    height: 600px !important; min-height: 600px !important; max-height: 600px !important;
    aspect-ratio: auto !important;
}
.cms-banner--rail > .banner-icon-rail {
    position: absolute; inset: 0 auto 0 0; width: var(--banner-rail-width); z-index: 3;
    justify-content: flex-start; padding: var(--banner-rail-gap) 20px; gap: var(--banner-rail-gap);
}
.cms-banner--rail .cms-banner__stage { margin-left: var(--banner-rail-width); width: calc(100% - var(--banner-rail-width)); }
.cms-banner--rail[data-nav="vertical"] .cms-banner__pause { left: auto; right: 64px; }
.cms-banner--rail[data-dots-align="center"] > .banner-icon-rail,
.cms-banner--rail[data-dots-align="end"] > .banner-icon-rail { justify-content: flex-start; }
@media (max-width: 640px) {
    .cms-banner--rail .cms-banner__viewport { height: auto !important; min-height: 280px !important; }
    .cms-banner--rail > .banner-icon-rail { position: relative; width: 100%; flex-direction: row;
        justify-content: start; padding: 12px; gap: 8px; overflow-x: auto; }
    .cms-banner--rail .banner-icon-rail button { width: 112px; min-height: 96px; font-size: 13px; }
    .cms-banner--rail .banner-icon-rail button svg { width: 32px; height: 32px; }
    .cms-banner--rail .cms-banner__stage { width: 100%; margin-left: auto; }
    .cms-banner--rail[data-dots-align] > .banner-icon-rail { justify-content: start; }
    .cms-banner--rail[data-nav="vertical"] .cms-banner__nav--next { top: 64px; bottom: auto; }
    .cms-banner--rail[data-nav="vertical"] .cms-banner__pause { top: 12px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .banner-icon-rail button { transition: none; }
}

/* ---------------------------------------------------------------------------
   Artwork-specific slide (formerly ai-ready-banner.css)
   --------------------------------------------------------------------------- */
/* AI-Ready Solutions, banner 4. Stable CMS element IDs scope this artwork even
   when the slide is reordered. Text, links and desktop boxes stay in the CMS.
   The same rules style the existing editor preview and the public renderer. */
.cms-banner__stage:has([data-el="jvarwul84r"]),
.be-stage:has([data-id="jvarwul84r"]) {
    container-type: inline-size;
    --ai-gold: #ffbf24;
}
.cms-banner:has(.cms-banner__slide[data-active="true"] [data-el="jvarwul84r"]) .cms-banner__viewport {
    height: auto !important; min-height: 0 !important; aspect-ratio: 1896 / 829 !important;
}
:is(.cms-banner__stage:has([data-el="jvarwul84r"]), .be-stage:has([data-id="jvarwul84r"])) :is(.cms-banner__text, .be-el > span, .be-el > h2) {
    font-family: "Poppins", sans-serif !important;
    overflow-wrap: normal;
}
:is([data-el="jvarwul84r"], [data-id="jvarwul84r"], [data-el="6wnhh47u1xv"], [data-id="6wnhh47u1xv"], [data-el="qnk69024ae"], [data-id="qnk69024ae"]) > :is(.cms-banner__text, h2, span) {
    font-size: 4.25cqw !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em;
    white-space: nowrap;
}
:is([data-el="6wnhh47u1xv"], [data-id="6wnhh47u1xv"]) > :is(.cms-banner__text, h2, span) {
    font-weight: 600 !important;
    color: #ffc13b !important;
}
:is([data-el="79vh5mh38mn"], [data-id="79vh5mh38mn"]) > :is(.cms-banner__text, span) {
    font-size: 1.5cqw !important;
    font-weight: 400 !important;
    line-height: 1.38 !important;
    letter-spacing: -.025em;
    color: #dce5f1 !important;
}
:is([data-el="gl0yt7cf51g"], [data-id="gl0yt7cf51g"]) > :is(.cms-banner__text, span) {
    font-size: .82cqw !important;
    font-weight: 400 !important;
    letter-spacing: .3em;
    line-height: 1.4 !important;
    white-space: nowrap;
    color: #dce5f1 !important;
}
:is([data-el="gl0yt7cf51g"], [data-id="gl0yt7cf51g"])::after {
    content: ""; position: absolute; left: 0; top: 155%;
    width: 4cqw; height: 2px; background: linear-gradient(90deg, #ffbd00, #ffe6a0);
}
:is([data-el="rrhet6qoq5r"], [data-id="rrhet6qoq5r"]) > :is(a, span),
:is([data-el="5sogl1wjn27"], [data-id="5sogl1wjn27"]) > :is(a, span) {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between;
    width: 100%; height: 100%; min-height: 44px;
    font-family: "Poppins", sans-serif !important;
    font-size: 1.32cqw !important; font-weight: 500 !important; line-height: 1.2;
    white-space: nowrap; text-decoration: none; transition: filter .18s, box-shadow .18s;
}
/* The site's gold button (theme.css), restated from its tokens because a banner button's own
   colours need !important to beat. The fallbacks serve the admin banner editor, which loads this
   file without theme.css. */
:is([data-el="rrhet6qoq5r"], [data-id="rrhet6qoq5r"]) > :is(a, span) {
    padding: 0 2.7cqw; border: 0; border-radius: 9px;
    background: var(--gradient-gold, linear-gradient(120deg, #f7c53c, #ecb82e)) !important;
    color: var(--color-navy, #0b2857) !important; font-weight: 400 !important; letter-spacing: .01em;
    box-shadow: var(--shadow-gold, 0 8px 18px rgba(236, 184, 46, .25));
}
:is([data-el="rrhet6qoq5r"], [data-id="rrhet6qoq5r"]) > a:hover { box-shadow: var(--shadow-gold-hover, 0 16px 30px -12px rgba(245, 183, 59, .8)); }
:is([data-el="5sogl1wjn27"], [data-id="5sogl1wjn27"]) > :is(a, span) {
    position: relative; padding: 0; border: 0; border-radius: 0;
    background: transparent !important; color: #fff !important; font-size: 1.18cqw !important;
}
:is([data-el="5sogl1wjn27"], [data-id="5sogl1wjn27"]) > :is(a, span)::before {
    content: ""; position: absolute; bottom: 12%; left: 0; width: 80%; height: 2px; background: var(--ai-gold);
}
:is([data-el="rrhet6qoq5r"], [data-id="rrhet6qoq5r"], [data-el="5sogl1wjn27"], [data-id="5sogl1wjn27"]) > :is(a, span)::after {
    content: ""; flex: 0 0 1.5cqw; height: 1cqw; margin-left: 1cqw; background: currentColor;
    clip-path: polygon(0 45%, 88% 45%, 65% 8%, 70% 0, 100% 50%, 70% 100%, 65% 92%, 88% 55%, 0 55%);
}
:is([data-el="rrhet6qoq5r"], [data-el="5sogl1wjn27"]) a:hover { filter: brightness(1.06); }
:is([data-el="rrhet6qoq5r"], [data-el="5sogl1wjn27"]) a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
:is([data-el="kuy6nq3taf"], [data-id="kuy6nq3taf"], [data-el="2hdcwz53jam"], [data-id="2hdcwz53jam"], [data-el="01vjcl8lfl4z"], [data-id="01vjcl8lfl4z"]) {
    box-sizing: border-box; padding-left: 4.7cqw;
    background-repeat: no-repeat; background-position: left center; background-size: 3.5cqw 3.5cqw;
}
:is([data-el="kuy6nq3taf"], [data-id="kuy6nq3taf"]) { background-image: url('/cms-assets/ai-automation.b4125db73aff.svg'); border-right: 1px solid #92a2b782; }
:is([data-el="2hdcwz53jam"], [data-id="2hdcwz53jam"]) { background-image: url('/cms-assets/ai-decisions.e48db0ed7639.svg'); border-right: 1px solid #92a2b782; }
:is([data-el="01vjcl8lfl4z"], [data-id="01vjcl8lfl4z"]) { background-image: url('/cms-assets/ai-innovation.ee4b5eb2c336.svg'); }
:is([data-el="kuy6nq3taf"], [data-id="kuy6nq3taf"], [data-el="2hdcwz53jam"], [data-id="2hdcwz53jam"], [data-el="01vjcl8lfl4z"], [data-id="01vjcl8lfl4z"]) > :is(.cms-banner__text, span) {
    font-size: 1.16cqw !important; line-height: 1.35 !important; font-weight: 400 !important; color: #f3f6fc !important; white-space: pre-line;
}
:is([data-el="j8wrm2pg3xp"], [data-id="j8wrm2pg3xp"], [data-el="kf3amfnptd"], [data-id="kf3amfnptd"]) > :is(.cms-banner__text, span) {
    font-size: .94cqw !important; line-height: 1.8 !important; letter-spacing: .29em; font-weight: 400 !important; color: #d4dfed !important; white-space: pre-line;
}
:is([data-el="j8wrm2pg3xp"], [data-id="j8wrm2pg3xp"], [data-el="kf3amfnptd"], [data-id="kf3amfnptd"])::after {
    content: ""; position: absolute; left: 0; bottom: -1.7cqw; width: 3cqw; height: 2px; background: var(--ai-gold);
}
/* Keep the composition legible when the original wide artwork cannot fit. */
@media (max-width: 900px) {
    .cms-banner__slide:has([data-el="jvarwul84r"]) .cms-banner__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #001122ed, #00112288), linear-gradient(0deg, #001122, transparent); }
    .cms-banner:has([data-el="jvarwul84r"]):has(.cms-banner__slide[data-active="true"] [data-el="jvarwul84r"]) .cms-banner__viewport { height: 650px !important; min-height: 650px !important; }
    .cms-banner__slide:has([data-el="jvarwul84r"]) .cms-banner__bg img { object-position: 67% center; }
    .cms-banner [data-el="gl0yt7cf51g"] { left: 7% !important; top: 6% !important; width: 74% !important; height: auto !important; }
    .cms-banner [data-el="gl0yt7cf51g"] .cms-banner__text { font-size: 10px !important; letter-spacing: .16em; white-space: normal; }
    .cms-banner [data-el="jvarwul84r"] { left: 7% !important; top: 18% !important; width: 87% !important; height: auto !important; }
    .cms-banner [data-el="qnk69024ae"] { left: 7% !important; top: 25% !important; width: 13% !important; height: auto !important; }
    .cms-banner [data-el="6wnhh47u1xv"] { left: 7% !important; top: 32% !important; width: 88% !important; height: auto !important; }
    .cms-banner :is([data-el="jvarwul84r"], [data-el="qnk69024ae"], [data-el="6wnhh47u1xv"]) .cms-banner__text { font-size: clamp(25px, 7.6cqw, 42px) !important; }
    .cms-banner [data-el="79vh5mh38mn"] { left: 7% !important; top: 41% !important; width: 85% !important; height: auto !important; }
    .cms-banner [data-el="79vh5mh38mn"] .cms-banner__text { font-size: 15px !important; line-height: 1.5 !important; }
    .cms-banner [data-el="rrhet6qoq5r"] { left: 7% !important; top: 66% !important; width: 66% !important; height: 48px !important; }
    .cms-banner [data-el="5sogl1wjn27"] { left: 7% !important; top: 75% !important; width: 63% !important; height: 44px !important; }
    .cms-banner [data-el="rrhet6qoq5r"] a { padding: 0 24px; font-size: 16px !important; }
    .cms-banner [data-el="5sogl1wjn27"] a { font-size: 15px !important; }
    .cms-banner :is([data-el="rrhet6qoq5r"], [data-el="5sogl1wjn27"]) a::after { flex-basis: 22px; height: 15px; }
    .cms-banner :is([data-el="j8wrm2pg3xp"], [data-el="kf3amfnptd"]) { display: none !important; }
    .cms-banner :is([data-el="kuy6nq3taf"], [data-el="2hdcwz53jam"], [data-el="01vjcl8lfl4z"]) { top: 86% !important; width: 28% !important; height: 78px !important; padding: 39px 0 0; background-size: 30px; background-position: top center; justify-content: center !important; }
    .cms-banner [data-el="kuy6nq3taf"] { left: 6% !important; }
    .cms-banner [data-el="2hdcwz53jam"] { left: 36% !important; }
    .cms-banner [data-el="01vjcl8lfl4z"] { left: 66% !important; }
    .cms-banner :is([data-el="kuy6nq3taf"], [data-el="2hdcwz53jam"], [data-el="01vjcl8lfl4z"]) .cms-banner__text { font-size: 12px !important; text-align: center !important; }
}
@media (max-width: 360px) {
    .cms-banner:has([data-el="jvarwul84r"]):has(.cms-banner__slide[data-active="true"] [data-el="jvarwul84r"]) .cms-banner__viewport { height: 700px !important; min-height: 700px !important; }
}
@media (prefers-reduced-motion: reduce) {
    :is([data-el="rrhet6qoq5r"], [data-el="5sogl1wjn27"]) a { transition: none; }
}