:root {
    /* Set a new primary color (e.g., a shade of purple) using HSL values */
    --bulma-primary-h: 270deg; /* New Hue */
    --bulma-primary-s: 98%; /* New Saturation */
    --bulma-primary-l: 28%; /* New Lightness */
    /* Optional: set the rgb value for rgba usage */
    --bulma-primary-rgb: 71, 1, 140; /* RGB values for the new color */
    --brand-crimson: #e13c05;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
    cursor: none;
}

/*html {
    scroll-behavior: smooth;
}*/

.gradientButton {
    --gs1: #cb2d7a;
    --gs2: #922680;
    background: linear-gradient(to right, var(--gs1) 0%, var(--gs2) 100%);
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 30px;
    border: 1px solid transparent;
    transition: all .5s;
    position: relative;
    width: 155px;
    height: 45px;
    border: 2px solid black;
}

.buttonholder {
    width: 155px;
    height: 45px;
}

.buttonholder:hover .gradientButton {
    --gs1: #000000;
    --gs2: #000000;

}


.buttonholder:hover {
    position: relative;

}

.buttonholder:hover .gradientButton {
    /* margin: 0 auto;*/
    background-color: #1c1f2b50;
    text-align: center;
    border-radius: 10px;
    position: relative;
    translate: 0 0;
    z-index: 3 !important;
    border: 2px solid transparent;
    box-shadow: 0 0 0 8px black inset;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.buttonholder:hover::after, .buttonholder:hover::before {
    content: '';
    position: absolute;
    height: 104%;
    width: 102%;
    background-image: conic-gradient(from var(--angle), #e82d81, #8f2d90, #ffb400, #f44039, #e82d81);
    background-image: conic-gradient(from var(--angle), #ffffff, #096697, #096697, #33d2e8, #42fb14);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 0 !important;
    padding: 3px;
    border-radius: 10px;
    animation: 3s spin linear infinite;
}

.buttonholder:hover::before {
    filter: blur(1.5rem);
    opacity: 0.5;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}

.pinktext {
    color: #e82d81;

}

.pinktext01 {
    color: #8f2d90;
    font-weight: 700;

}

/* .su-hero__h1, .li-hero__h1, .edgy — templates now use .hero-h1 */

#cur, #cur-r {
    mix-blend-mode: difference !important;
}

/* ANIMATIONS */
@keyframes fu {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 8px var(--fire);
    }
    50% {
        box-shadow: 0 0 22px var(--fire), 0 0 40px rgba(255, 61, 0, .35);
    }
}

@keyframes heroZoom {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}

@keyframes lineSweep {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    50% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* UTILITY */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.rv-l {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.rv-l.in {
    opacity: 1;
    transform: none;
}

.rv-r {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.rv-r.in {
    opacity: 1;
    transform: none;
}

.d1 {
    transition-delay: .1s !important;
}

.d2 {
    transition-delay: .2s !important;
}

.d3 {
    transition-delay: .3s !important;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--fire);
}

.kicker::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--fire);
}

/* ══ HERO ══ */
#hero {
    position: relative;
    height: 100svh;
    min-height: 700px;
    background: var(--ink);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/edge/home-hero-bg.jpg');
    background-size: cover;
    background-position: center 30%;
    filter: grayscale(100%) brightness(.35) contrast(1.2);
    transform: scale(1.05);
    animation: heroZoom 8s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, .98) 0%, rgba(10, 10, 10, .3) 50%, transparent 100%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: .4;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 60px 80px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.hero-left {
    max-width: 680px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 61, 0, .4);
    padding: 6px 14px;
    border-radius: 2px;
    margin-bottom: 28px;
    animation: fu 1s .2s both;
}

.hero-tag .hd {
    width: 6px;
    height: 6px;
    background: var(--fire);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero-tag p {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fire);
    font-weight: 500;
}

.hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 10.5vh, 130px);
    /* .92 is tuned for Bebas Neue's compact glyph metrics; the Google Fonts
       link uses font-display:swap, so the fallback sans-serif briefly renders
       in this same box on every load and visibly overlapped between lines at
       the old tighter value. .97 keeps the condensed look once Bebas Neue
       loads while giving the fallback font enough room. */
    line-height: .97;
    color: var(--white);
    letter-spacing: -1px;
    animation: fu 1s .4s both;
    text-transform: uppercase;
}

.hero-h1 em {
    color: var(--fire);
    font-style: normal;
}

.hero-sub {
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .7);
    max-width: 440px;
    font-weight: 400;
    animation: fu 1s .6s both;
}

.hero-btns {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 40px;
    animation: fu 1s .8s both;
}

.btn-f {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--fire);
    color: var(--white);
    padding: 16px 36px;
    font-family: 'Syne', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    transition: transform .25s, background .2s;
}

.btn-f::after {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: skewX(-20deg);
    transition: left .6s cubic-bezier(.16, 1, .3, 1);
}

.btn-f:hover::after {
    left: 120%;
}

.btn-f:hover {
    background: #FF5722;
    transform: translateY(-2px);
}

.btn-g {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Syne', sans-serif;
    text-decoration: none;
    transition: color .2s;
}

.btn-g::after {
    content: '';
    width: 32px;
    height: 1px;
    background: currentColor;
    transition: width .3s;
}

.btn-g:hover {
    color: var(--white);
}

.btn-g:hover::after {
    width: 48px;
}

.hero-right {
    animation: fu 1s 1s both;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    padding-bottom: 8px;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 2px solid var(--fire);
    padding-left: 16px;
}

.hero-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: var(--white);
    line-height: 1;
}

.hero-stat-label {
    font-size: 11px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-scroll {
    position: absolute;
    bottom: 80px;
    right: 26px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fu 1s 1.2s both;
}

.hero-scroll p {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mist);
    writing-mode: vertical-rl;
}

.hs-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--fire), transparent);
    animation: scrollDrop 2s ease-in-out infinite;
}

@keyframes scrollDrop {
    0% {
        transform: scaleY(0);
        transform-origin: top
    }
    50% {
        transform: scaleY(1);
        transform-origin: top
    }
    51% {
        transform-origin: bottom
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom
    }
}


/*=========other hero stuff===========*/
/* ══════════════════════════════
   HERO — B2B Cinematic Split
══════════════════════════════ */
#hero {
    position: relative;
    /* Was height:100svh + overflow:hidden — a fixed ceiling that hard-clipped
       any content taller than the viewport (e.g. the CTA button/link were
       getting cut off entirely at common laptop heights like 1366×768).
       height:auto + min-height instead: still fills/exceeds one viewport
       like before when content fits, but grows to fit the content rather
       than clipping it when it doesn't. An earlier #hero rule above sets
       height:100svh — height:auto here is required to actually cancel that
       out, since min-height alone doesn't override a fixed height. */
    height: auto;
    min-height: 100svh;
    background: var(--ink);
    overflow: hidden;
    display: grid;
    grid-template-columns:55fr 45fr;
    padding-top: var(--nav-h);
    align-items: stretch;
}

.hero-l {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 56px 52px 72px 60px;
    position: relative;
    z-index: 4;
    /* Grid items default to min-width:auto — i.e. their content's intrinsic
       minimum width — so unbreakable text (e.g. a single long word in the
       heading) was forcing this 1fr column wider than the viewport on
       narrow screens, pushing the whole page into horizontal overflow.
       Pre-existing, found while testing the .hero-r mobile fix above. */
    min-width: 0;
}

/* Breadcrumb trail */
.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    animation: fu .8s .05s both;
}

.hb-item {
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fire);
    text-decoration: none;
}

.hb-item:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: rgba(255, 61, 0, .35);
    font-size: 9px;
}

.hb-item:last-child {
    color: rgba(255, 255, 255, .6);
}

#hero:not(.hero--home) .hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(60px, 7.5vw, 112px);
    font-size: clamp(52px, 10.5vh, 130px);
    /* See .hero-h1 above — loosened from .88 so the font-display:swap
       fallback font doesn't visibly overlap between forced <br> line breaks. */
    line-height: .95;
    color: var(--white);
    animation: fu 1s .25s both;
    letter-spacing: -.5px;
    text-transform: none;
}

.hero-h1 .accent {
    color: var(--fire);
}

.hero-h1 .outline {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5);
    color: transparent;
}

.hero-tagline {
    margin-top: 22px;
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    letter-spacing: -.1px;
    animation: fu .8s .4s both;
}

.hero-sub {
    margin-top: 14px;
    max-width: 420px;
    font-size: 14.5px;
    line-height: 1.78;
    color: rgba(255, 255, 255, .85);
    font-weight: 400;
    animation: fu 1s .55s both;
}

.hero-btns {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 44px;
    animation: fu 1s .7s both;
    flex-wrap: wrap;
}

/* Hero scroll cue */
.hero-scroll {
    position: absolute;
    bottom: 34px;
    left: 60px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fu 1s 1.1s both;
}

.hs-line {
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .12);
    position: relative;
    overflow: hidden;
}

.hs-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fire);
    animation: lineSweep 2.4s ease-in-out infinite;
}

.hero-scroll p {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* Hero right — image + floating cards */
.hero-r {
    position: relative;
    overflow: hidden;
}

.hero-r-img {
    position: absolute;
    inset: 0;
    background: url('/assets/images/edge/teamsports-hero-volleyball.jpg') center 30%/cover;
    filter: grayscale(30%) brightness(.7) contrast(1.2);
    transition: filter .8s;
}

.hero-r::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(8, 8, 8, .88) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(8, 8, 8, .4) 0%, transparent 30%, transparent 70%, rgba(8, 8, 8, .75) 100%);
}

/* Floating benefit chips */
.hero-chips {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.hchip {
    position: absolute;
    background: rgba(10, 10, 10, .84);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    animation: float 6s ease-in-out infinite;
}

.hchip:nth-child(2) {
    animation-delay: -2s;
    animation-duration: 5.2s;
}

.hchip:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 7.5s;
}

.hc-ico {
    width: 34px;
    height: 34px;
    background: var(--fire-lo);
    border: 1px solid var(--fire-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.hc-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mist);
    font-weight: 600;
}

.hc-val {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    margin-top: 2px;
}

.hc1 {
    top: 10%;
    left: 6%;
}

.hc2 {
    top: 47%;
    right: 8%;
}

.hc3 {
    bottom: 18%;
    left: 9%;
}

/* vertical sidebar stripe */
.hero-stripe {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 42px;
    z-index: 6;
    background: rgba(255, 61, 0, .04);
    border-left: 1px solid rgba(255, 61, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-stripe p {
    writing-mode: vertical-rl;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 61, 0, .4);
    font-weight: 700;
}


/* ═══════════════════════════════════════════════
   HERO EXTENSIONS — migrated from scoped SFCs
═══════════════════════════════════════════════ */

/* ── Layout variant overrides ── */
#hero.hero--home {
    display: flex;
    align-items: flex-end;
    padding-top: 0;
}

#hero.hero--orgs {
    grid-template-columns: 1fr 1fr;
}

#hero.hero--lifestyle {
    grid-template-columns: 45fr 55fr;
}

#hero.hero--lifestyle .hero-r-img {
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 40%),
    url('/assets/images/edge/lifestyle-istock-1400838553.jpg') 10% 30%/cover;
    filter: grayscale(50%) brightness(.7) contrast(1.25);
    transform: scale(1.1);
    animation: heroZoom 9s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* ── Orgs hero-r: flex container for flow-cards ── */
#hero.hero--orgs .hero-r {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 48px 80px 20px;
    z-index: 3;
    overflow: visible;
}

/* ── hero-h1 span aliases used by orgs pages ── */
.hero-h1 .fire {
    color: var(--fire);
}

.hero-h1 .stroke {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .4);
    color: transparent;
}

/* ── Flow cards (orgs hero right column) ── */
.flow-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 440px;
    animation: fu 1s .6s both;
}

.flow-card {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, background .3s, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.flow-card:hover {
    border-color: rgba(255, 61, 0, .35);
    background: rgba(255, 61, 0, .05);
    transform: translateX(6px);
}

.flow-card.active {
    background: rgba(255, 61, 0, .12);
    border-color: rgba(255, 61, 0, .45);
}

.flow-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--fire);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.flow-card:hover::before,
.flow-card.active::before {
    transform: scaleY(1);
}

.flow-card:hover .fc-num,
.flow-card.active .fc-num {
    color: rgba(255, 61, 0, .7);
}

.fc-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    line-height: 1;
    color: rgba(255, 61, 0, .7);
    flex-shrink: 0;
    width: 36px;
    transition: color .3s;
}

.fc-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -.1px;
    margin-bottom: 5px;
}

.fc-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    font-weight: 400;
    line-height: 1.55;
}

/* ── Ambient glow pseudo-elements (LifeStyle, UbiLife, UbiOrgs) ── */
#hero::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -200px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 61, 0, .06) 0%, transparent 70%);
    pointer-events: none;
}

#hero::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 61, 0, .04) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Hero h1 text variants ── */
.hero-h1 .fire {
    color: var(--fire);
}

.hero-h1 .stroke {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5);
    color: transparent;
}

/* ── Tagline / sub emphasis ── */
.hero-tagline strong {
    color: var(--white);
}

/* ── Breadcrumb variants ── */
.hb-item.muted {
    color: rgba(255, 255, 255, .55);
}

.hb-sep {
    color: rgba(255, 61, 0, .3);
    font-size: 10px;
}

/* span-based breadcrumb (ForOrganizations, UbiOrgs) */
.hero-breadcrumb span {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

.hero-breadcrumb .sep {
    color: rgba(255, 61, 0, .5);
}

.hero-breadcrumb .active {
    color: var(--fire);
}

/* ── Orgs/B2B photo background layers ── */
.hero-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/assets/images/edge/lifestyle-hero-couple.jpg') center 40% / cover no-repeat;
    filter: grayscale(100%) brightness(.28) contrast(1.15);
}

.hero-bg-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: linear-gradient(rgba(255, 61, 0, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 61, 0, .03) 1px, transparent 1px);
    background-size: 80px 80px;
}

.hero-bg-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255, 61, 0, .07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* ── UbiLife / LifeStyle floating stat chips ── */
.hf-wrap {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.hf {
    position: absolute;
    background: rgba(10, 10, 10, .82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    animation: float 6s ease-in-out infinite;
}

.hf:nth-child(2) {
    animation-delay: -2.2s;
    animation-duration: 5.4s;
}

.hf:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 7.5s;
}

.hf-ico {
    width: 34px;
    height: 34px;
    background: var(--fire-lo);
    border: 1px solid var(--fire-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.hf-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mist);
    font-weight: 600;
}

.hf-val {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    margin-top: 2px;
}

.hf1 {
    top: 22%;
    left: 5%;
}

.hf2 {
    top: 49%;
    right: 6%;
}

.hf3 {
    bottom: 17%;
    left: 8%;
}

/* ── Responsive — tablet (≤960px) ── */
@media (max-width: 960px) {
    #hero:not(.hero--home) {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100svh;
    }

    /* .hero--home never had a mobile override — it kept the desktop fixed
       height:100svh + overflow:hidden + align-items:flex-end, so a tall
       wrapped heading on narrow viewports overflowed upward past the box's
       top edge, straight into the fixed nav. Let it grow downward instead. */
    #hero.hero--home {
        height: auto;
        min-height: 100svh;
        align-items: flex-start;
        padding-top: calc(var(--nav-h, 76px) + 32px);
    }

    #hero.hero--home .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding: 0 32px 60px;
    }

    #hero.hero--home .hero-right {
        /* Was row + flex-start — the two stat boxes sat inline with each
           other, docked to the left (under hero-content's align-items:
           flex-start), where they could collide with the scroll indicator.
           Stack them and dock the whole block to the right edge instead. */
        flex-direction: column;
        align-items: flex-end;
        align-self: flex-end;
    }

    .hero-l {
        padding: 48px 32px 60px;
    }

    /* On typical phone widths the 52vw value never actually applies — the
       280px floor below it always wins (52vw only exceeds 280px past
       ~538px wide), so every phone got squeezed into the same cramped box
       regardless of how much content the right pane actually holds. 340px
       still wasn't enough room in practice — bumped further. */
    .hero-r {
        height: 52vw;
        min-height: 480px;
    }

    /* Floating photo-overlay chips don't translate well to narrow screens —
       arbitrary top/left/right/bottom percentages either cluster together
       or land on top of each other depending on viewport height. Replace
       with a full-width stack docked to the bottom of the section, each
       chip revealing in sequence as it's scrolled into view (see .hchip,
       .hf and the .in toggle below) instead of floating in place. */
    .hero-chips,
    .hf-wrap {
        position: absolute;
        inset: auto 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px 16px;
        background: linear-gradient(to top, rgba(8, 8, 8, .9) 40%, transparent 100%);
    }

    .hchip,
    .hf {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        animation: none;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    }

    .hchip.in,
    .hf.in {
        opacity: 1;
        transform: none;
    }

    /* UbiOrgs' right pane holds 3 text-heavy .flow-card items, not a photo
       — there's no aspect ratio to preserve, so let it size to its actual
       content instead of being squeezed into the same fixed box as the
       photo+chip layouts on the other two pages. */
    #hero.hero--orgs .hero-r {
        height: auto;
        min-height: 0;
        padding: 32px 32px 0;
    }

    /* The card background/border (.035/.08 alpha) was tuned for a desktop
       backdrop-blur over the page background — on mobile, with less
       surrounding visual context, the cards were nearly indistinguishable
       from the section behind them. Brighten the card chrome and copy. */
    .flow-card {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .18);
    }

    .fc-num {
        color: rgba(255, 61, 0, .9);
    }

    .fc-desc {
        color: rgba(255, 255, 255, .88);
    }

    .hero-stripe {
        display: none;
    }

    /* The cue is absolutely positioned against #hero's bottom edge, but
       #hero stacks .hero-l/.hero-r as separate rows here, each sized to
       its own content — when the heading column is much taller than the
       chips/cards column (the usual case once a heading wraps to 4+ lines),
       #hero's overall height no longer lines up with where .hero-r's
       visible content actually ends, so the cue lands wherever the box
       happens to end instead — inside the chips/cards rather than below
       them. Not worth reconciling the two coordinate systems for a "scroll
       down" decorative hint; just hide it here. */
    #hero:not(.hero--home) .hero-scroll {
        display: none;
    }
}

/* ── Responsive — mobile (≤600px) ── */
@media (max-width: 600px) {
    .hero-h1 {
        font-size: clamp(52px, 14vw, 80px);
    }

    .hero-l {
        padding: 36px 20px 52px;
    }

    .hero-r {
        height: 60vw;
    }

    .hero-scroll {
        left: 20px;
    }

    .hero-btns {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ── Responsive — short laptop/tablet windows above the 960px mobile
   breakpoint (e.g. 965×768) ──
   .hero-h1 is sized in vh, and #hero.hero--home bottom-anchors its content
   (align-items:flex-end) with no top padding — by design, the hero photo
   shows through behind the transparent nav at scroll-top. That's fine as
   long as the bottom-anchored content block is short enough to clear the
   nav on its own. At shorter viewport heights the 10.5vh heading makes the
   block tall enough to ride up into the nav/logo. Shrink the heading here
   so the block is short enough to clear it without touching the alignment
   model itself. */
@media (min-width: 961px) and (max-height: 900px) {
    .hero--home .hero-h1 {
        font-size: clamp(48px, 8vh, 100px);
    }

    /* Same short-viewport problem, different shape: the B2B cinematic-split
       hero (TeamSports/LifeStyle/UbiOrgs) used height:100svh+overflow:hidden
       and hard-clipped the CTA button/link at common laptop heights like
       1366×768 — #hero now uses min-height so nothing is ever clipped, but
       tighten things up here so the section actually fits in one viewport
       at typical short heights instead of just spilling below the fold. */
    #hero:not(.hero--home) .hero-h1 {
        font-size: clamp(40px, 8vh, 100px);
    }

    #hero:not(.hero--home) .hero-l {
        padding: 36px 52px 40px 60px;
    }

    #hero:not(.hero--home) .hero-breadcrumb {
        margin-bottom: 16px;
    }

    #hero:not(.hero--home) .hero-tagline {
        margin-top: 12px;
    }

    #hero:not(.hero--home) .hero-sub {
        margin-top: 8px;
    }

    #hero:not(.hero--home) .hero-btns {
        margin-top: 20px;
    }
}