/* ===========================
   Hero Banner
   Ported from the Figma "Design Compiler" handoff (Hero Banner.dc.html +
   Handover Spec.dc.html). Everything is namespaced under .ss-hero so it can
   never collide with Bootstrap 5.3, header.css or index.css.

   Layout strategy is mobile-first:
     base            flow / stacked, one panel at a time, pills scroll row
     >= 768px        stacked, 2-column stat grid, 6 pills
     >= 1024px       the 1440 design canvas turns on (absolute positioning,
                     600px band, sliding 300% track), fluid between 1024-1439
     >= 1440px       type + geometry freeze at the design values; the video
                     well and the globe bleed into the extra width
   =========================== */

/* ---------------------------
   Tokens + root
   --------------------------- */
.ss-hero {
    /* palette */
    --ss-brand: #0070C0;
    --ss-brand-hover: #005a9e;
    --ss-ink: #111111;
    --ss-copy: #333333;
    --ss-muted: #525252;
    --ss-surface: #ffffff;
    --ss-pill-ring: #D4E6F6;
    --ss-dot-track: #D9E2EA;
    --ss-card-ring: #CFCFCF;
    --ss-icon-tint: #E8F0FE;
    --ss-ghost-hover: #F0F7FF;

    /* fluid metrics - redeclared at each breakpoint */
    --ss-pad: 20px;
    --ss-h1: 30px;
    --ss-h1-lh: 1.333;
    --ss-lede: 20px;
    --ss-lede-lh: 1.5;
    --ss-body: 16px;
    --ss-body-lh: 26px;
    --ss-stat: 30px;
    --ss-stat-lh: 1.2;
    --ss-card-pad-y: 16px;
    --ss-card-pad-x: 18px;
    --ss-grid-gap: 12px;
    --ss-sub: 12px;
    --ss-sub-lh: 17px;

    /* driven by hero-banner.js */
    --ss-shift: 0%;
    --ss-dot-shift: 0px;

    position: relative;
    z-index: 0;
    overflow: hidden;
    background: var(--ss-surface);
    padding: 0;
}

/* header.css applies `* { font-family: Roboto }` directly to every element, so
   setting the family on the root alone would never reach the descendants. */
.ss-hero,
.ss-hero * {
    font-family: 'Roboto', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Local resets. All of them use :where() so they add no specificity of their
   own - otherwise `.ss-hero p` (0,1,1) would out-rank every `.ss-hero__*`
   class below (0,1,0) and silently win. They still beat the bare element
   selectors in index.css / Bootstrap's reboot, which is the whole point:
     index.css  img { transform: translateZ(0); backface-visibility: hidden }
     index.css  p  { font-size: 16px; line-height: 24px }
     index.css  h1..h6 { margin-bottom: .5rem; font-weight: 500; line-height: 1.2 }
     bootstrap  h1 { font-size: calc(1.375rem + 1.5vw) }
     bootstrap  a  { color: #0d6efd; text-decoration: underline } */
.ss-hero :where(img) {
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.ss-hero :where(h1, h2, p) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.ss-hero :where(a) {
    text-decoration: none;
    color: inherit;
}

.ss-hero :where(button) {
    font: inherit;
    color: inherit;
}

.ss-hero__live {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ss-hero__em {
    color: var(--ss-brand);
}

/* ---------------------------
   Background layers
   --------------------------- */
.ss-hero__glow {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 520px at 96% 34%, rgba(0, 112, 192, 0.11) 0%, rgba(0, 112, 192, 0) 62%),
        radial-gradient(660px 460px at 4% 96%, rgba(0, 112, 192, 0.13) 0%, rgba(0, 112, 192, 0) 58%),
        radial-gradient(900px 620px at 50% 118%, rgba(0, 93, 233, 0.07) 0%, rgba(0, 112, 192, 0) 60%);
}

.ss-hero__swoosh {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 58%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* ---------------------------
   Track + panels (base = stacked, one panel visible)
   --------------------------- */
/* Below 1024 all three panels are stacked in the SAME grid cell and swapped with
   `visibility`, never with `display`. Display-swapping would make the band as
   tall as whichever panel happened to be showing, so the unattended 9s rotation
   would resize the section - and shove every section below it - three times a
   cycle. Stacking makes the track measure the tallest panel once and hold it.
   The inactive panels are already `inert` + `aria-hidden` (set by hero-banner.js),
   and `visibility: hidden` keeps them out of the tab order and off AT too. */
.ss-hero__track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.ss-hero__panel {
    grid-area: 1 / 1;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    padding: 32px 0 24px;
    visibility: hidden;
}

.ss-hero__panel.is-active {
    visibility: visible;
    animation: ssPanelIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ss-hero__inner {
    display: contents;
}

.ss-hero__col {
    order: 1;
    position: relative;
    z-index: 3;
    padding: 0 var(--ss-pad);
}

.ss-hero__pills {
    order: 2;
    position: relative;
    z-index: 4;
}

/* The track is frozen to its tallest panel (panel 3, six stat cards) so rotation
   cannot reflow the page. That leaves panels 1 and 2 with slack underneath. Let the
   visual absorb it instead of shipping a band of dead white: flex-grow claims the
   leftover, `min-height` keeps the designed floor when there is none to claim. */
.ss-hero__visual {
    order: 3;
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 200px;
    margin-top: 26px;
    overflow: hidden;
    background: #EEF4FA;
}

/* ---------------------------
   Type
   --------------------------- */
.ss-hero__lede {
    font-size: var(--ss-lede);
    font-weight: 400;
    line-height: var(--ss-lede-lh);
    color: var(--ss-ink);
    text-wrap: pretty;
}

.ss-hero__headline {
    margin-top: 8px;
    font-size: var(--ss-h1);
    font-weight: 700;
    line-height: var(--ss-h1-lh);
    letter-spacing: -0.4px;
    color: var(--ss-ink);
    text-wrap: pretty;
}

.ss-hero__col--b .ss-hero__headline,
.ss-hero__col--c .ss-hero__headline {
    margin-top: 0;
}

.ss-hero__copy {
    margin-top: 16px;
    font-size: var(--ss-body);
    font-weight: 400;
    line-height: var(--ss-body-lh);
    color: var(--ss-copy);
    text-wrap: pretty;
}

.ss-hero__copy--muted {
    color: var(--ss-muted);
}

.ss-hero__caption {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--ss-muted);
    text-wrap: pretty;
}

.ss-hero__eyebrow {
    display: block;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ss-brand);
}

/* ---------------------------
   CTAs
   --------------------------- */
.ss-hero__ctas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
}

.ss-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px 28px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.ss-hero__cta--solid {
    background: var(--ss-brand);
    color: var(--ss-surface);
    box-shadow: 0 2px 10px rgba(0, 112, 192, 0.22);
}

.ss-hero__cta--solid:hover,
.ss-hero__cta--solid:focus {
    background: var(--ss-brand-hover);
    color: var(--ss-surface);
}

.ss-hero__cta--ghost {
    background: transparent;
    color: var(--ss-brand);
    box-shadow: inset 0 0 0 1px var(--ss-brand);
}

.ss-hero__cta--ghost:hover,
.ss-hero__cta--ghost:focus {
    background: var(--ss-ghost-hover);
    color: var(--ss-brand);
}

.ss-hero__cta:focus-visible {
    outline: 2px solid var(--ss-brand);
    outline-offset: 3px;
}

.ss-hero__cta-note {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ss-muted);
}

/* ---------------------------
   Panel 1 - video well
   --------------------------- */
.ss-hero__video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    background: transparent;
}

.ss-hero__video--back {
    display: none;
}

/* ---------------------------
   Panel 1 - skill pills
   --------------------------- */
.ss-hero__pills {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
    padding: 6px var(--ss-pad) 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.ss-hero__pill {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 19px;
    background: var(--ss-surface);
    box-shadow: inset 0 0 0 1px var(--ss-pill-ring), 0 3px 12px rgba(0, 40, 70, 0.14);
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    color: var(--ss-brand);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s linear, color 0.2s linear;
}

.ss-hero__pill:hover {
    box-shadow: inset 0 0 0 1px var(--ss-brand), 0 4px 14px rgba(0, 112, 192, 0.18);
    color: var(--ss-brand-hover);
}

/* A focused pill is always fully legible even if its loop has it mid-fade. */
.ss-hero__pill:focus-visible {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    outline: 2px solid var(--ss-brand);
    outline-offset: 3px;
}

.ss-hero__pill-arrow {
    margin-left: 7px;
    opacity: 0.5;
}

/* ---------------------------
   Panel 2 - photo + dashboard card
   --------------------------- */
.ss-hero__photo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('./images/hero/hero2-photo.png');
    background-image: image-set(url('./images/hero/hero2-photo.webp') type('image/webp'),
            url('./images/hero/hero2-photo.png') type('image/png'));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.ss-hero__dashboard {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 56%;
    max-width: 354px;
    aspect-ratio: 354 / 197;
    border-radius: 12px;
    background-image: url('./images/hero/dashboard.png');
    background-image: image-set(url('./images/hero/dashboard.webp') type('image/webp'),
            url('./images/hero/dashboard.png') type('image/png'));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 7px 6.4px rgba(0, 0, 0, 0.25);
}

/* ---------------------------
   Panel 3 - globe
   --------------------------- */
.ss-hero__globe {
    display: none;
    position: absolute;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
    background-image: url('./images/hero/globe.png');
    background-image: image-set(url('./images/hero/globe.webp') type('image/webp'),
            url('./images/hero/globe.png') type('image/png'));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Panel 2 and panel 3 art is deferred until after first paint; hero-banner.js
   drops .ss-hero--lazy once the page has loaded (or the moment the visitor
   advances to one of those panels). */
.ss-hero--lazy .ss-hero__photo,
.ss-hero--lazy .ss-hero__dashboard,
.ss-hero--lazy .ss-hero__globe {
    background-image: none;
}

/* ---------------------------
   Panel 3 - "Used for" rotator
   --------------------------- */
.ss-hero__uc {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 26px;
    margin-top: 24px;
}

.ss-hero__uc-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--ss-muted);
    white-space: nowrap;
}

.ss-hero__uc-list {
    display: grid;
    flex-grow: 1;
    height: 26px;
    align-items: center;
    min-width: 0;
}

.ss-hero__uc-item {
    grid-area: 1 / 1;
    align-self: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ss-brand);
    white-space: nowrap;
    opacity: 0;
    animation: ssUcCycle 16s ease-in-out infinite;
}

.ss-hero__uc-item:nth-child(1) { animation-delay: 0s; }
.ss-hero__uc-item:nth-child(2) { animation-delay: -3.2s; }
.ss-hero__uc-item:nth-child(3) { animation-delay: -6.4s; }
.ss-hero__uc-item:nth-child(4) { animation-delay: -9.6s; }
.ss-hero__uc-item:nth-child(5) { animation-delay: -12.8s; }

/* ---------------------------
   Panel 3 - stat cards
   --------------------------- */
.ss-hero__stats {
    order: 2;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--ss-grid-gap);
    row-gap: var(--ss-grid-gap);
    margin-top: 26px;
    padding: 0 var(--ss-pad);
}

.ss-hero__cell-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.ss-hero__face {
    box-sizing: border-box;
    padding: var(--ss-card-pad-y) var(--ss-card-pad-x);
    border-radius: 14px;
    background: var(--ss-surface);
    box-shadow: inset 0 0 0 1px var(--ss-card-ring), 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform-origin: center;
}

/* below 768 the cards do not flip - front faces only, in flow */
.ss-hero__face--back {
    display: none;
}

.ss-hero__face-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-hero__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ss-icon-tint);
    color: var(--ss-brand);
    flex-shrink: 0;
    line-height: 0;
}

.ss-hero__chip svg {
    display: block;
    flex-shrink: 0;
}

.ss-hero__family {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ss-brand);
    white-space: nowrap;
}

.ss-hero__stat {
    margin-top: 12px;
    font-size: var(--ss-stat);
    font-weight: 700;
    line-height: var(--ss-stat-lh);
    letter-spacing: -0.4px;
    color: var(--ss-brand);
    font-variant-numeric: tabular-nums;
}

.ss-hero__sub {
    margin-top: 5px;
    font-size: var(--ss-sub);
    font-weight: 400;
    line-height: var(--ss-sub-lh);
    color: var(--ss-muted);
}

/* ---------------------------
   Controls
   --------------------------- */
.ss-hero__controls {
    position: relative;
    z-index: 5;
    padding: 4px var(--ss-pad) 28px;
}

.ss-hero__dots {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: -webkit-max-content;
    width: max-content;
}

.ss-hero__dot {
    width: 40px;
    height: 16px;
    padding: 6px 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: block;
}

.ss-hero__dot-bar {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--ss-dot-track);
}

.ss-hero__dot:focus-visible {
    outline: 2px solid var(--ss-brand);
    outline-offset: 3px;
}

.ss-hero__toggle {
    margin-left: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ss-dot-track);
    background: var(--ss-surface);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-muted);
    font-size: 8px;
    line-height: 1;
    letter-spacing: 1px;
    transition: border-color 0.2s linear, color 0.2s linear;
}

/* `.ss-hero__toggle` carries `display: flex`, and an author declaration beats
   the UA's `[hidden] { display: none }` - so `hidden` needs help to work.
   hero-banner.js hides the control under prefers-reduced-motion, where rotation
   never runs and the button would otherwise be a no-op. */
.ss-hero__toggle[hidden] {
    display: none;
}

.ss-hero__toggle:hover {
    border-color: var(--ss-brand);
    color: var(--ss-brand);
}

.ss-hero__toggle:focus-visible {
    outline: 2px solid var(--ss-brand);
    outline-offset: 2px;
}

.ss-hero__glyph-pause {
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.ss-hero__glyph-pause i {
    display: block;
    width: 2px;
    height: 8px;
    background: currentColor;
}

.ss-hero__glyph-play {
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-left: 1px;
}

.ss-hero__toggle[data-state="playing"] .ss-hero__glyph-play,
.ss-hero__toggle[data-state="paused"] .ss-hero__glyph-pause {
    display: none;
}

.ss-hero__progress {
    position: absolute;
    left: 0;
    top: 9px;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(0, 112, 192, 0.26);
    pointer-events: none;
    transform: translateX(var(--ss-dot-shift, 0px));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ss-hero__progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: var(--ss-brand);
    transform-origin: left center;
    transform: scaleX(0);
}

/* ===========================
   Keyframes (only the four that the reference build actually uses)
   =========================== */
@keyframes ssChipSolid {
    0% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 14px, 0) scale(0.9);
        filter: blur(6px);
    }

    12% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    40% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    52% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, -12px, 0) scale(1.04);
        filter: blur(5px);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, -12px, 0) scale(1.04);
        filter: blur(5px);
    }
}

@keyframes ssFaceFront {
    0% { transform: scaleY(1); }
    46% { transform: scaleY(1); }
    50% { transform: scaleY(0); }
    96% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

@keyframes ssFaceBack {
    0% { transform: scaleY(0); }
    50% { transform: scaleY(0); }
    54% { transform: scaleY(1); }
    92% { transform: scaleY(1); }
    96% { transform: scaleY(0); }
    100% { transform: scaleY(0); }
}

@keyframes ssUcCycle {
    0% { opacity: 0; transform: translateY(12px); }
    3% { opacity: 1; transform: translateY(0); }
    18% { opacity: 1; transform: translateY(0); }
    21% { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 0; transform: translateY(-12px); }
}

@keyframes ssPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ===========================
   480 - 767  -  two stat columns, taller visual well
   The whole track is as tall as its tallest panel (panel 3), so halving the
   number of stat rows here keeps the band from being mostly empty on panel 1.
   The well also has to grow: the dashboard card is `56%` wide capped at 354px
   with a 354/197 aspect, so past ~597px it needs more than the base 200px - 14px
   of head-room and `overflow: hidden` would shave its rounded top corners off.
   =========================== */
/* Two stat columns on phones as well. The spec's literal "< 768 single-column"
   predates the fixed-height track: with the band frozen to its tallest panel, six
   stacked cards push it to ~1377px and leave ~660px of dead space under panels 1
   and 2 on a 390px screen. Two columns halves the rows and costs nothing but a
   wrapped eyebrow. Front faces only, per spec - the back faces stay display:none. */
@media screen and (max-width: 767.98px) {
    .ss-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The eyebrow is `white-space: nowrap` at the design size, and "WHAT WE CONCLUDE"
   alone needs ~162px - wider than a column below 480. Let it wrap and ease the
   card metrics so nothing overflows at 320px. */
/* Panel 2 below the desktop layout. `cover` was slicing the blob cutout off at the
   well edges - the subject is a shaped transparent PNG, so any crop reads as damage
   rather than a crop. Fit the whole shape and drop the well's fill so it floats on
   the hero gradient the way it does at >=1024. */
@media screen and (max-width: 1023.98px) {
    .ss-hero__visual--photo {
        background: transparent;
    }

    .ss-hero__photo {
        background-position: center bottom;
        background-size: contain;
    }
}

/* Panel 1 pills below the desktop layout. The spec puts them in a scroll row under
   the CTA, but that reads as a chip list rather than the animated skill cloud the
   hero is selling - so they overlay the video here the same way they do at >=1280.
   The build's absolute coordinates were solved by hand against the subject at 1440
   and do not survive a 390px well, so these are percentage slots re-solved for a
   narrow, tall frame. Delays are the build's, so the stagger rhythm is unchanged. */
@media screen and (max-width: 1023.98px) {
    .ss-hero__pills {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* the video well is the flex-grow item, so it owns everything below the
           text column; this covers its upper reach without touching the CTA */
        height: 58%;
        display: block;
        gap: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
        z-index: 4;
        /* transparent is not absent for hit-testing - without this the box would
           sit over the video and swallow taps meant for the panel */
        pointer-events: none;
    }

    .ss-hero__pill {
        position: absolute;
        display: flex;
        max-width: 74%;
        padding: 7px 13px;
        font-size: 11.5px;
        line-height: 15px;
        overflow: hidden;
        opacity: 0;
        pointer-events: auto;
        animation: ssChipSolid 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }

    .ss-hero__pill[data-slot="1"]  { left: 5%;  top: 12%; }
    .ss-hero__pill[data-slot="2"]  { left: 44%; top: 4%; }
    .ss-hero__pill[data-slot="3"]  { left: 7%;  top: 26%; }
    .ss-hero__pill[data-slot="4"]  { left: 41%; top: 19%; }
    .ss-hero__pill[data-slot="5"]  { left: 3%;  top: 41%; }
    .ss-hero__pill[data-slot="6"]  { left: 46%; top: 33%; }
    .ss-hero__pill[data-slot="7"]  { left: 9%;  top: 55%; }
    .ss-hero__pill[data-slot="8"]  { left: 39%; top: 48%; }
    .ss-hero__pill[data-slot="9"]  { left: 4%;  top: 69%; }
    .ss-hero__pill[data-slot="10"] { left: 45%; top: 62%; }
    .ss-hero__pill[data-slot="11"] { left: 12%; top: 80%; }
    .ss-hero__pill[data-slot="12"] { left: 41%; top: 75%; }
    .ss-hero__pill[data-slot="13"] { left: 25%; top: 2%; }

    .ss-hero__pill[data-slot="1"]  { animation-delay: -6.92s; }
    .ss-hero__pill[data-slot="2"]  { animation-delay: -8.31s; }
    .ss-hero__pill[data-slot="3"]  { animation-delay: -1.38s; }
    .ss-hero__pill[data-slot="4"]  { animation-delay: -15.23s; }
    .ss-hero__pill[data-slot="5"]  { animation-delay: -12.46s; }
    .ss-hero__pill[data-slot="6"]  { animation-delay: -11.08s; }
    .ss-hero__pill[data-slot="7"]  { animation-delay: -9.69s; }
    .ss-hero__pill[data-slot="8"]  { animation-delay: -2.77s; }
    .ss-hero__pill[data-slot="9"]  { animation-delay: -4.15s; }
    .ss-hero__pill[data-slot="10"] { animation-delay: 0s; }
    .ss-hero__pill[data-slot="11"] { animation-delay: -5.54s; }
    .ss-hero__pill[data-slot="12"] { animation-delay: -13.85s; }
    .ss-hero__pill[data-slot="13"] { animation-delay: -16.62s; }

    /* Below 1024 the three panels share one grid cell and swap on `visibility`.
       ssChipSolid sets `visibility: visible` at its 12% and 40% keyframes, and a
       declaration on the element beats an ancestor's inherited `hidden` - so panel 1's
       pills kept cycling into view on top of panels 2 and 3. Stop the animation when
       the panel is not active. `animation-name` rather than the shorthand, so the
       per-slot `animation-delay` stagger below survives. */
    .ss-hero__panel:not(.is-active) .ss-hero__pill {
        animation-name: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* same keyboard escape hatch as desktop: the cycle hides ~48% of the links at
       any instant, so freeze and reveal all 13 the moment focus enters */
    .ss-hero__pills:focus-within .ss-hero__pill {
        animation-play-state: paused !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        pointer-events: auto !important;
    }

    /* the video runs at every width now, so both layers are live below 1024 */
    .ss-hero__video--back {
        display: block;
        filter: blur(16px) saturate(0.7);
        transform: scale(1.1);
        opacity: 0.5;
    }
}

@media screen and (max-width: 479.98px) {
    .ss-hero {
        --ss-stat: 24px;
        --ss-card-pad-y: 14px;
        --ss-card-pad-x: 14px;
        --ss-sub: 11px;
        --ss-sub-lh: 15px;
    }

    .ss-hero__family {
        white-space: normal;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.6px;
    }

    .ss-hero__stat {
        margin-top: 10px;
    }
}

@media screen and (min-width: 560px) and (max-width: 767.98px) {
    .ss-hero__visual {
        height: 240px;
    }
}

/* ===========================
   >= 768px  -  stacked, 2-column stat grid, six pills
   =========================== */
@media screen and (min-width: 768px) {
    .ss-hero {
        --ss-pad: 48px;
        --ss-h1: 38px;
        --ss-h1-lh: 1.318;
        --ss-lede: 26px;
        --ss-lede-lh: 1.385;
        --ss-body: 16px;
        --ss-body-lh: 28px;
        --ss-grid-gap: 20px;
    }

    .ss-hero__panel {
        padding: 44px 0 28px;
    }

    .ss-hero__col {
        max-width: 720px;
    }

    .ss-hero__ctas {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
    }

    .ss-hero__cta {
        min-height: 48px;
        width: auto;
    }

    .ss-hero__cta-note {
        margin-top: 0;
    }

    .ss-hero__visual {
        height: 320px;
        margin-top: 32px;
    }

    /* six pills, wrapped - the absolute cloud is a >=1024 treatment */
    .ss-hero__pills {
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 4px;
    }

    .ss-hero__pill[data-tier="2"] {
        display: none;
    }

    .ss-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 32px;
    }

    .ss-hero__cell {
        height: 176px;
    }

    .ss-hero__cell-inner {
        overflow: hidden;
    }

    .ss-hero__face {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        animation: ssFaceFront 24s ease-in-out infinite;
    }

    .ss-hero__face--back {
        display: flex;
        animation-name: ssFaceBack;
    }

    .ss-hero__cell:nth-child(1) .ss-hero__face { animation-delay: 0s; }
    .ss-hero__cell:nth-child(2) .ss-hero__face { animation-delay: -2s; }
    .ss-hero__cell:nth-child(3) .ss-hero__face { animation-delay: -4s; }
    .ss-hero__cell:nth-child(4) .ss-hero__face { animation-delay: -6s; }
    .ss-hero__cell:nth-child(5) .ss-hero__face { animation-delay: -8s; }
    .ss-hero__cell:nth-child(6) .ss-hero__face { animation-delay: -10s; }
}

/* ===========================
   >= 1024px  -  the 1440 design canvas
   =========================== */
@media screen and (min-width: 1024px) {
    .ss-hero {
        /* 48 -> 96 across 1024 -> 1440 */
        --ss-pad: clamp(48px, calc(48px + (100vw - 1024px) * 0.1153846), 96px);
        /* 38 -> 44 */
        --ss-h1: clamp(38px, calc(38px + (100vw - 1024px) * 0.0144231), 44px);
        --ss-h1-lh: 1.318;
        /* 26 -> 32 */
        --ss-lede: clamp(26px, calc(26px + (100vw - 1024px) * 0.0144231), 32px);
        --ss-lede-lh: 1.375;
        --ss-body: 16px;
        --ss-body-lh: 28px;
        /* 24 -> 34 (spec value at the top of the range) */
        --ss-stat: clamp(24px, calc(24px + (100vw - 1024px) * 0.0240385), 34px);
        --ss-stat-lh: 1.1765;
        --ss-card-pad-y: clamp(12px, calc(12px + (100vw - 1024px) * 0.0144231), 18px);
        --ss-card-pad-x: clamp(14px, calc(14px + (100vw - 1024px) * 0.0144231), 20px);
        --ss-grid-gap: clamp(12px, calc(12px + (100vw - 1024px) * 0.0192308), 20px);
        --ss-sub: clamp(11px, calc(11px + (100vw - 1024px) * 0.0024039), 12px);
        --ss-sub-lh: 1.4;

        height: 600px;
    }

    .ss-hero__glow,
    .ss-hero__swoosh {
        height: 600px;
    }

    .ss-hero__swoosh {
        left: 5px;
        top: 31px;
        bottom: auto;
        width: calc(100% - 5px);
        height: 569px;
    }

    .ss-hero__track {
        position: absolute;
        left: 0;
        top: 0;
        width: 300%;
        height: 600px;
        display: flex;
        transform: translateX(var(--ss-shift, 0%));
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ss-hero__panel,
    .ss-hero__panel.is-active {
        display: block;
        position: relative;
        width: 33.333333%;
        height: 600px;
        flex-shrink: 0;
        padding: 0;
        animation: none;
        visibility: visible;
        transition: visibility 0s linear 0s;
    }

    /* Inactive panels stay painted through the 0.55s slide, then blank out.
       `inert` (set by JS) already removes them from the tab order instantly. */
    .ss-hero__panel[aria-hidden="true"] {
        visibility: hidden;
        transition: visibility 0s linear 0.55s;
    }

    /* Do not burn CPU animating a panel nobody can see. */
    .ss-hero__panel[aria-hidden="true"] * {
        animation-play-state: paused;
    }

    .ss-hero__inner {
        display: block;
        position: relative;
        width: 100%;
        max-width: 1440px;
        height: 100%;
        margin: 0 auto;
    }

    .ss-hero__col {
        position: absolute;
        left: var(--ss-pad);
        max-width: none;
        padding: 0;
    }

    /* 660 / 609 / 536 of the 1440 canvas - exact at >= 1440, fluid below */
    .ss-hero__col--a {
        top: 118px;
        width: clamp(420px, 45.8333%, 660px);
    }

    .ss-hero__col--b {
        top: 106px;
        width: clamp(420px, 42.2917%, 609px);
    }

    .ss-hero__col--c {
        top: 66px;
        width: clamp(420px, 37.2222%, 536px);
    }

    .ss-hero__headline {
        margin-top: 8px;
    }

    .ss-hero__col--b .ss-hero__copy {
        margin-top: 33px;
    }

    .ss-hero__col--b .ss-hero__ctas {
        margin-top: 33px;
    }

    .ss-hero__col--c .ss-hero__copy {
        margin-top: 18px;
    }

    .ss-hero__col--c .ss-hero__ctas {
        margin-top: 30px;
    }

    .ss-hero__col--a .ss-hero__ctas {
        margin-top: 40px;
    }

    .ss-hero__cta--wide {
        width: 218px;
        padding: 0;
    }

    .ss-hero__cta-note {
        margin-top: 0;
        white-space: nowrap;
    }

    /* --- panel 1 video well: 648 -> right edge --- */
    .ss-hero__visual--video {
        position: absolute;
        left: 45%;
        right: 0;
        top: 0;
        width: auto;
        height: 600px;
        margin: 0;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
        background: transparent;
        border-radius: 0;
    }

    .ss-hero__video--back {
        display: block;
        filter: blur(20px) saturate(0.66) hue-rotate(-6deg);
        transform: scale(1.12);
        opacity: 0.62;
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.28) 38%, #000 62%, #000 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.28) 38%, #000 62%, #000 100%);
    }

    .ss-hero__video--front {
        opacity: 0.97;
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.22) 46%, rgba(0, 0, 0, 0.72) 62%, #000 76%, #000 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.22) 46%, rgba(0, 0, 0, 0.72) 62%, #000 76%, #000 100%);
    }

    .ss-hero__video--back,
    .ss-hero__video--front {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* --- panel 2 art --- */
    .ss-hero__visual--photo {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        background: transparent;
        pointer-events: none;
    }

    /* Spec, 1024-1439: "Right-hand visual crops from the right, never scales
       down." So the photo keeps its design pixel size (695 x 597 - exactly the
       48.4722% -> 3.2639% inset of the 1440 canvas, and exactly the 1390x1194
       source aspect) and the band edge clips it, the same way the video well and
       the globe are clipped. A percentage width + `contain` would instead shrink
       the whole image by width, leaving ~172px of bare white under it at 1024
       and stranding the dashboard card off the bottom of the photo. */
    .ss-hero__photo {
        left: 48.4722%;
        top: 1px;
        right: auto;
        bottom: auto;
        width: 695px;
        height: 597px;
        background-position: left top;
        background-size: auto 597px;
    }

    .ss-hero__dashboard {
        left: 48.125%;
        top: 310px;
        right: auto;
        bottom: auto;
        width: 354px;
        max-width: none;
    }

    /* --- panel 3 globe --- */
    .ss-hero__globe {
        display: block;
        left: 44.4444%;
        top: -110px;
        width: 820px;
        height: 820px;
    }

    /* --- panel 3 stat grid --- */
    .ss-hero__stats {
        position: absolute;
        left: 48.6111%;
        right: 2.7778%;
        top: 106px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        padding: 0;
    }

    /* --- panel 1 pill cloud: flowing over the video between 1024 and 1279.
       The hand-solved absolute coordinates only hold at >= 1280, so below that
       the cloud becomes a wrapping column parked 24px clear of the text.  --- */
    .ss-hero__pills {
        position: absolute;
        left: calc(var(--ss-pad) + 45.8333% + 24px);
        right: var(--ss-pad);
        top: 40px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 12px;
        margin: 0;
        padding: 0;
        overflow: visible;
        /* The wrapper is a bare positioning box at z-index 4, above the text
           column at z-index 3 - and at >= 1280 it is stretched over the entire
           panel. Transparent is not the same as absent for hit-testing, so
           without this it would eat every click on the panel-1 CTA and text. */
        pointer-events: none;
    }

    .ss-hero__pill {
        display: flex;
        opacity: 0;
        pointer-events: auto;
        animation: ssChipSolid 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }

    /* ~48% of the 18s loop each pill is `visibility: hidden`, which drops it out
       of the tab order and off the accessibility tree - so at any instant only
       part of the 13 skill links is reachable, and which part keeps changing.
       The moment a keyboard user enters the cloud, freeze it and show all 13.
       These have to be !important: animations out-rank normal declarations. */
    .ss-hero__pills:focus-within .ss-hero__pill {
        animation-play-state: paused !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        pointer-events: auto !important;
    }

    /* the six-pill cut is a 768-1023 rule only */
    .ss-hero__pill[data-tier="2"] {
        display: flex;
    }

    .ss-hero__pill[data-slot="1"] { animation-delay: -6.92s; }
    .ss-hero__pill[data-slot="2"] { animation-delay: -8.31s; }
    .ss-hero__pill[data-slot="3"] { animation-delay: -1.38s; }
    .ss-hero__pill[data-slot="4"] { animation-delay: -15.23s; }
    .ss-hero__pill[data-slot="5"] { animation-delay: -12.46s; }
    .ss-hero__pill[data-slot="6"] { animation-delay: -11.08s; }
    .ss-hero__pill[data-slot="7"] { animation-delay: -9.69s; }
    .ss-hero__pill[data-slot="8"] { animation-delay: -2.77s; }
    .ss-hero__pill[data-slot="9"] { animation-delay: -4.15s; }
    .ss-hero__pill[data-slot="10"] { animation-delay: 0s; }
    .ss-hero__pill[data-slot="11"] { animation-delay: -5.54s; }
    .ss-hero__pill[data-slot="12"] { animation-delay: -13.85s; }
    .ss-hero__pill[data-slot="13"] { animation-delay: -16.62s; }

    /* --- controls --- */
    .ss-hero__controls {
        position: absolute;
        left: 0;
        right: 0;
        top: 556px;
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 var(--ss-pad);
    }
}

/* Between 1024 and 1279 the three stat columns are narrow enough that a nowrap
   family label ("WHAT WE CONCLUDE") would spill out of the card. */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
    .ss-hero__family {
        white-space: normal;
    }
}

/* ===========================
   >= 1280px  -  the hand-solved absolute pill cloud
   =========================== */
@media screen and (min-width: 1280px) {
    .ss-hero__pills {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: block;
        gap: 0;
    }

    .ss-hero__pill {
        position: absolute;
        flex: 0 0 auto;
    }

    .ss-hero__pill[data-slot="1"] { left: 52.5%; top: 536px; }
    .ss-hero__pill[data-slot="2"] { left: 51.3889%; top: 192px; }
    .ss-hero__pill[data-slot="3"] { left: 85.3472%; top: 536px; }
    .ss-hero__pill[data-slot="4"] { left: 63.6111%; top: 192px; }
    .ss-hero__pill[data-slot="5"] { left: 51.3889%; top: 278px; }
    .ss-hero__pill[data-slot="6"] { left: 61.1111%; top: 20px; }
    .ss-hero__pill[data-slot="7"] { left: 86.9444%; top: 364px; }
    .ss-hero__pill[data-slot="8"] { left: 51.3889%; top: 450px; }
    .ss-hero__pill[data-slot="9"] { left: 49.4444%; top: 106px; }
    .ss-hero__pill[data-slot="10"] { left: 53.0556%; top: 36px; }
    .ss-hero__pill[data-slot="11"] { left: 78.4722%; top: 364px; }
    .ss-hero__pill[data-slot="12"] { left: 84.4444%; top: 450px; }
    .ss-hero__pill[data-slot="13"] { left: 52.2222%; top: 364px; }
}

/* ===========================
   >= 1440px  -  band goes full bleed, the 1440 block stays centred
   =========================== */
@media screen and (min-width: 1440px) {
    .ss-hero__visual--video {
        left: calc(50% - 72px);
    }

    .ss-hero__globe {
        left: calc(50% - 80px);
    }
}

/* ===========================
   Reduced motion - everything stops, held at its first visible state.
   (The reference build's blanket `animation-duration: .01ms` rule is a bug:
   it snaps each element back to its base style, which hides all 13 pills,
   empties the "Used for" line and leaves only the back stat faces showing.)
   =========================== */
@media (prefers-reduced-motion: reduce) {
    .ss-hero__track {
        transition: none;
    }

    .ss-hero__panel,
    .ss-hero__panel.is-active {
        animation: none;
    }

    /* `visibility: inherit`, not `visible`: with no animation running the pill
       has no visibility of its own, and a hard `visible` here would punch the
       panel-1 pills back through the `visibility: hidden` of an inactive panel. */
    .ss-hero__pill {
        animation: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
        filter: none;
        pointer-events: auto;
        transition: none;
    }

    .ss-hero__uc-item {
        animation: none;
        opacity: 0;
        transform: none;
    }

    .ss-hero__uc-item:first-child {
        opacity: 1;
    }

    .ss-hero__face {
        animation: none;
    }

    .ss-hero__face--front {
        transform: scaleY(1);
    }

    /* No `visibility: hidden` here. `scaleY(0)` inside `.ss-hero__cell-inner`'s
       `overflow: hidden` already collapses the face to nothing visually, and
       transforms do not touch the accessibility tree - so the six back-face
       statistics stay readable by AT, exactly as they are for everyone else.
       `visibility: hidden` would silently delete them for reduced-motion users
       with no control anywhere on the page to get them back. */
    .ss-hero__face--back {
        animation: none;
        transform: scaleY(0);
    }

    .ss-hero__progress,
    .ss-hero__progress-fill,
    .ss-hero__cta,
    .ss-hero__toggle {
        transition: none;
    }
}

/* ===========================
   Panel 2 - "Watch the film" launcher  (added 2026-08-28)
   The dashboard card doubles as the opener for the Science of Leadership
   film (video-modal.css / video-modal.js). It stays a .ss-hero__dashboard,
   so it inherits the card's position, art and shadow at every breakpoint;
   these rules only turn the div-styling into a real button with a play
   affordance.
   =========================== */
.ss-hero__film {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* the >=1024 .ss-hero__visual--photo wrapper is pointer-events: none so
       the art never swallows clicks - the button has to opt back in */
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-hero__film::after {
    /* a soft scrim so the white play badge reads on the pale dashboard art */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: rgba(9, 30, 51, 0.30);
    transition: background-color 0.2s linear;
}

.ss-hero__film:hover,
.ss-hero__film:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
}

.ss-hero__film:hover::after,
.ss-hero__film:focus-visible::after {
    background: rgba(9, 30, 51, 0.42);
}

.ss-hero__film:focus-visible {
    outline: 2px solid var(--ss-brand);
    outline-offset: 3px;
}

.ss-hero__film-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 112, 192, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background-color 0.16s linear;
}

.ss-hero__film:hover .ss-hero__film-play,
.ss-hero__film:focus-visible .ss-hero__film-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--ss-brand);
}

/* The card is only ~200px wide at narrow phone widths - shrink the badge so
   the art still shows through. */
@media screen and (max-width: 559.98px) {
    .ss-hero__film-play {
        width: 46px;
        height: 46px;
    }

    .ss-hero__film-play svg {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-hero__film,
    .ss-hero__film::after,
    .ss-hero__film-play {
        transition: none;
    }

    .ss-hero__film:hover,
    .ss-hero__film:focus-visible {
        transform: none;
    }

    .ss-hero__film:hover .ss-hero__film-play,
    .ss-hero__film:focus-visible .ss-hero__film-play {
        transform: translate(-50%, -50%);
    }
}