/*==================================================
    GERMAINE — ALUMNI REGISTRATION PAGE
    Namespace: .alu-*
    Palette: White / Navy (#123A92) / Pink (#EC4899).
    Self-contained: own travelling-light custom property,
    reuses the sitewide .gwf-wrap image frame (see
    global-refinements.css) for every featured image.
    Reuses .sp-reveal (school-page.css/js) for scroll-in.
==================================================*/

:root{
    --alu-navy:#123A92;
    --alu-navy-2:#1B4FB8;
    --alu-navy-soft:rgba(18,58,146,.66);
    --alu-navy-mut:rgba(18,58,146,.56);
    --alu-pink:#EC4899;
    --alu-pink-2:#F472B6;
    --alu-line:rgba(18,58,146,.1);
    --alu-tint:#F6F8FC;
    --alu-ease:.35s cubic-bezier(.25,.8,.25,1);
    --alu-radius-card:26px;
    --alu-radius-btn:999px;
    --alu-sec-pad:96px;
}

@property --alu-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes aluTravel{ to{ --alu-a:360deg; } }
@keyframes aluFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-9px); }
}
@keyframes aluOrb{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(24px,-18px) scale(1.06); }
}

.alu-wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
.alu-section{ padding:var(--alu-sec-pad) 0; position:relative; }
.alu-section-tint{ background:var(--alu-tint); }

.alu-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--alu-pink); background:rgba(236,72,153,.08);
    border:1px solid rgba(236,72,153,.18); padding:8px 18px 8px 14px; border-radius:999px;
    margin-bottom:20px;
}
.alu-head{ max-width:680px; margin:0 0 48px; }
.alu-head.alu-center{ margin-left:auto; margin-right:auto; text-align:center; }
.alu-head h2{
    font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.01em;
    font-size:clamp(1.8rem,3.2vw,2.5rem); color:var(--alu-navy); line-height:1.2; margin:0 0 14px;
}
.alu-head p{ font-size:1.02rem; line-height:1.8; color:var(--alu-navy-mut); margin:0; }
.alu-pink-text{ color:var(--alu-pink); }

/*==========================
    BUTTONS
==========================*/
.alu-btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:16px 34px; border-radius:var(--alu-radius-btn); font-weight:700; font-size:.96rem;
    text-decoration:none; border:1px solid transparent; cursor:pointer; overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease, filter .35s ease; white-space:nowrap;
}
.alu-btn-primary{
    background:linear-gradient(115deg,var(--alu-pink) 0%,var(--alu-navy) 100%); color:#fff;
    box-shadow:0 16px 38px rgba(236,72,153,.3), 0 8px 20px rgba(18,58,146,.18);
}
.alu-btn-primary::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .6s ease;
}
.alu-btn-primary:hover::before{ transform:translateX(120%); }
.alu-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 48px rgba(236,72,153,.4), 0 10px 26px rgba(18,58,146,.24); }
.alu-btn-outline{
    background:rgba(255,255,255,.7); color:var(--alu-navy); border-color:var(--alu-line);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.alu-btn-outline:hover{ transform:translateY(-3px); border-color:rgba(236,72,153,.35); background:#fff; box-shadow:0 16px 34px rgba(18,58,146,.12); }
.alu-btn i{ font-size:.82rem; position:relative; z-index:1; }
.alu-btn span{ position:relative; z-index:1; }

/*==========================
    AMBIENT FLOATING DECOR
==========================*/
.alu-orbs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.alu-orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.12; animation:aluOrb 22s ease-in-out infinite; }
.alu-orb-pink{ width:420px; height:420px; background:var(--alu-pink); }
.alu-orb-navy{ width:460px; height:460px; background:var(--alu-navy); }

/*==========================
    HERO — structural clone of the Hire Our Graduates hero:
    full-bleed crossfade photo slideshow, floating badge,
    ambient particles, single fully-transparent glass panel
    defined only by an always-on travelling border light.
==========================*/
.alu-hero{
    position:relative; overflow:hidden; isolation:isolate;
    min-height:74vh; display:flex; align-items:flex-end;
    padding:40px 0 72px;
}
.alu-hero-slideshow{ position:absolute; inset:0; z-index:0; }
.alu-hero-slide{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0; animation:aluHeroFade 25s ease-in-out infinite;
}
.alu-hero-slide:nth-child(1){ animation-delay:0s; }
.alu-hero-slide:nth-child(2){ animation-delay:5s; }
.alu-hero-slide:nth-child(3){ animation-delay:10s; }
.alu-hero-slide:nth-child(4){ animation-delay:15s; }
.alu-hero-slide:nth-child(5){ animation-delay:20s; }
@keyframes aluHeroFade{
    0%{ opacity:0; } 4%{ opacity:1; } 20%{ opacity:1; } 24%{ opacity:0; } 100%{ opacity:0; }
}
.alu-hero-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        radial-gradient(680px 460px at 14% 12%, rgba(236,72,153,.18), transparent 62%),
        radial-gradient(680px 460px at 86% 86%, rgba(18,58,146,.5), transparent 62%),
        linear-gradient(180deg, rgba(8,20,45,.55), rgba(8,20,45,.26) 55%, rgba(8,20,45,.62));
}
.alu-hero-float-badge{
    position:absolute; z-index:3; top:26px; right:26px;
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 16px; border-radius:999px;
    background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.32); color:#FFFFFF;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.03em;
}
.alu-hero-float-badge i{ color:var(--alu-pink-2); }
.alu-particle{ position:absolute; z-index:2; border-radius:50%; background:#FFFFFF; opacity:.35; pointer-events:none; }
.alu-particle.p1{ width:5px; height:5px; top:22%; left:12%; animation:aluFloat 9s ease-in-out infinite; }
.alu-particle.p2{ width:7px; height:7px; top:58%; left:78%; animation:aluFloat 11s ease-in-out infinite 1.2s; }
.alu-particle.p3{ width:4px; height:4px; top:42%; left:48%; animation:aluFloat 7s ease-in-out infinite 2s; }

/* fully transparent — defined only by the travelling border light,
   same crystal-transparent treatment used on Hire Our Graduates */
.alu-hero-panel{
    position:relative; isolation:isolate; z-index:3;
    max-width:690px; padding:38px 42px; border-radius:28px;
    background:transparent; border:1px solid rgba(236,72,153,.18);
}
.alu-hero-panel::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--alu-a), transparent 0 68%, var(--alu-pink) 82%, #FFFFFF 88%, var(--alu-navy) 95%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:aluTravel 8s linear infinite;
}
.alu-hero-panel > *{ position:relative; z-index:2; }
.alu-hero-panel .alu-eyebrow{ margin-bottom:14px; }
.alu-hero-panel h1{
    font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.01em;
    font-size:clamp(2.1rem,3.8vw,2.8rem); line-height:1.15; color:#FFFFFF; margin:0 0 16px;
    text-shadow:0 2px 4px rgba(8,20,45,.4), 0 10px 30px rgba(8,20,45,.4);
}
.alu-hero-panel p{
    font-size:1rem; line-height:1.75; color:rgba(255,255,255,.92); margin:0 0 28px; max-width:560px;
    text-shadow:0 1px 3px rgba(8,20,45,.3), 0 6px 20px rgba(8,20,45,.3);
}
.alu-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.alu-hero-chevron{
    position:absolute; z-index:3; left:50%; bottom:24px; transform:translateX(-50%);
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#FFFFFF; font-size:1.05rem; text-decoration:none;
    border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    animation:aluChev 2.2s ease-in-out infinite; transition:background .3s ease, border-color .3s ease;
}
.alu-hero-chevron:hover{ background:var(--alu-pink); border-color:var(--alu-pink); }
@keyframes aluChev{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(7px); }
}
@media(prefers-reduced-motion:reduce){
    .alu-hero-slide, .alu-hero-panel::before, .alu-particle, .alu-hero-chevron{ animation:none !important; }
}
@media(max-width:900px){
    .alu-hero{ min-height:60vh; padding:32px 0 60px; }
    .alu-hero-panel{ padding:30px 26px; max-width:none; }
}
@media(max-width:600px){
    .alu-hero-float-badge{ font-size:.64rem; padding:7px 12px; top:18px; right:18px; }
}

/*==========================
    MILKY-WHITE GLASS CARDS (Why Join / Benefits)
==========================*/
.alu-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.alu-card{
    position:relative; display:flex; flex-direction:column;
    background:rgba(255,255,255,.7);
    border:1px solid rgba(18,58,146,.12);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-radius:var(--alu-radius-card);
    box-shadow:0 14px 40px rgba(18,58,146,.1);
    overflow:hidden; transition:transform .4s ease, box-shadow .4s ease, background .4s ease;
}
.alu-card::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    border-radius:inherit; padding:1.5px; opacity:0;
    background:conic-gradient(from var(--alu-a), transparent 0 70%, var(--alu-pink) 84%, #fff 90%, var(--alu-navy) 96%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    /* Hover-only border effect that used to run its conic-gradient repaint
       continuously on all 10 alumni cards at once regardless of hover state. */
    animation:aluTravel 9s linear infinite; animation-play-state:paused; transition:opacity .4s ease;
}
.alu-card:hover{ transform:translateY(-8px); box-shadow:0 26px 60px rgba(236,72,153,.16); background:rgba(255,255,255,.9); }
.alu-card:hover::after{ opacity:1; animation-duration:5s; animation-play-state:running; }

.alu-card-slideshow{ position:relative; height:170px; overflow:hidden; }
.alu-slide{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
    animation:aluSlideFade 12s ease-in-out infinite;
}
.alu-slide:nth-child(1){ animation-delay:0s; }
.alu-slide:nth-child(2){ animation-delay:3s; }
.alu-slide:nth-child(3){ animation-delay:6s; }
.alu-slide:nth-child(4){ animation-delay:9s; }
@keyframes aluSlideFade{
    0%{ opacity:0; } 4%{ opacity:1; } 21%{ opacity:1; } 25%{ opacity:0; } 100%{ opacity:0; }
}
.alu-card:hover .alu-slide{ animation-play-state:paused; }

.alu-card-body{ position:relative; z-index:1; padding:24px 26px 28px; text-align:center; flex:1; display:flex; flex-direction:column; justify-content:center; }
.alu-card-body h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.2rem; color:var(--alu-navy); margin:0 0 12px; }
.alu-card-body p{ font-size:.9rem; line-height:1.75; color:var(--alu-navy-mut); margin:0; text-align:justify; text-justify:inter-word; }

/* compact variant (Alumni Benefits — 4 up, smaller) */
.alu-cards-compact{ grid-template-columns:repeat(4,1fr); gap:20px; }
.alu-cards-compact .alu-card-slideshow{ height:120px; }
.alu-cards-compact .alu-card-body{ padding:18px 18px 22px; }
.alu-cards-compact .alu-card-body h3{ font-size:1.02rem; margin-bottom:8px; }
.alu-cards-compact .alu-card-body p{ font-size:.82rem; line-height:1.65; }

/*==========================
    ALUMNI COMMUNITY (image + text)
==========================*/
.alu-community-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.alu-community-media{ max-width:460px; margin:0 auto; }
.alu-community-text{ max-width:520px; }
.alu-community-text .alu-head{ margin-bottom:20px; }

/*==========================
    REGISTRATION FORM
==========================*/
.alu-form-panel{
    position:relative; max-width:920px; margin:0 auto;
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
    border:1px solid rgba(255,255,255,.7);
    border-radius:28px;
    box-shadow:0 30px 80px rgba(18,58,146,.14), 0 12px 34px rgba(236,72,153,.1);
    padding:48px 50px;
    overflow:hidden;
}
.alu-form-panel::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--alu-a), transparent 0 74%, var(--alu-pink) 86%, #fff 92%, var(--alu-navy) 98%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    /* Below-the-fold registration form panel — paused until it scrolls
       into view (alumni.js). */
    animation:aluTravel 11s linear infinite; animation-play-state:paused;
}
.alu-form-panel.alu-anim-visible::after{ animation-play-state:running; }
.alu-form-panel > *{ position:relative; z-index:1; }

/* compact variant — small, efficient registration module: essential
   fields only, two-column grid, ~850px container, smaller inputs */
.alu-form-panel.alu-form-compact{
    max-width:850px;
    padding:30px 36px;
}
.alu-row-compact{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 20px;
}
.alu-row-compact .alu-field{ margin-bottom:0; }
.alu-row-compact .alu-field label{ left:15px; top:13px; font-size:.84rem; }
.alu-row-compact .alu-field input,
.alu-row-compact .alu-field select{
    min-height:44px; padding:15px 14px 5px; border-radius:12px; font-size:.86rem;
}
.alu-row-compact .alu-field input:focus + label,
.alu-row-compact .alu-field input:not(:placeholder-shown) + label,
.alu-row-compact .alu-field select:focus + label,
.alu-row-compact .alu-field select.has-value + label{
    top:5px; font-size:.6rem;
}
/* Same static-label treatment as the base .alu-field select rule above —
   a compact-row select always shows visible text, so its label must
   rest above the field permanently rather than only on focus/has-value. */
.alu-row-compact .alu-field select + label{
    top:5px; font-size:.6rem;
}
.alu-form-compact .alu-form-submit{ margin-top:22px; }

.alu-form-head{ text-align:center; margin-bottom:36px; }
.alu-form-head h2{ font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--alu-navy); margin:0 0 8px; }
.alu-form-head p{ font-size:.94rem; color:var(--alu-navy-mut); margin:0; }

.alu-form-section-title{
    font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--alu-pink); margin:0 0 16px;
}
.alu-form-section + .alu-form-section{ margin-top:30px; }

.alu-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.alu-row-3{ grid-template-columns:repeat(3,1fr); }

.alu-field{ position:relative; margin-bottom:22px; }
.alu-field label{
    position:absolute; left:18px; top:16px; font-size:.92rem; color:var(--alu-navy-mut);
    pointer-events:none; transition:all .25s ease; background:transparent; padding:0 4px;
}
.alu-field input,
.alu-field select,
.alu-field textarea{
    width:100%; box-sizing:border-box; font-family:inherit; font-size:.94rem; color:var(--alu-navy);
    background:rgba(255,255,255,.65); border:1.5px solid rgba(18,58,146,.14); border-radius:16px;
    padding:22px 18px 10px; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.alu-field textarea{ min-height:110px; resize:vertical; padding-top:24px; }
.alu-field input:focus,
.alu-field select:focus,
.alu-field textarea:focus{
    outline:none; border-color:var(--alu-pink); background:#fff;
    box-shadow:0 0 0 4px rgba(236,72,153,.14), 0 10px 26px rgba(236,72,153,.12);
}
.alu-field input:focus + label,
.alu-field input:not(:placeholder-shown) + label,
.alu-field select:focus + label,
.alu-field select.has-value + label,
.alu-field textarea:focus + label,
.alu-field textarea:not(:placeholder-shown) + label{
    top:6px; font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--alu-pink);
}
/* Unlike text inputs (which use an invisible placeholder=" " so the
   resting label is the only visible text until the user types),
   a <select> always shows its own visible text — either the
   placeholder-style disabled option or a real chosen value. A
   floating label that only moves up via :focus/.has-value therefore
   overlaps the select's own text on first load and after a reset.
   Selects get a permanently static label above the field instead. */
.alu-field select + label{
    top:6px; font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--alu-pink);
}
.alu-field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123A92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; background-size:16px; }

.alu-checkbox{
    display:flex; align-items:flex-start; gap:12px; margin:8px 0 30px;
    font-size:.86rem; line-height:1.55; color:var(--alu-navy-mut);
}
.alu-checkbox input{
    width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--alu-pink); cursor:pointer;
}

/* compact registration-card header — smaller spacing + a small pink
   accent glow beneath the heading, reusing existing .alu-head/.alu-eyebrow
   typography rather than introducing new type styles */
.alu-head.alu-form-head-compact{ margin-bottom:28px; }
.alu-form-head-accent{
    display:block; width:64px; height:3px; margin:14px auto 0;
    border-radius:4px;
    background:linear-gradient(90deg, transparent, var(--alu-pink), transparent);
    box-shadow:0 0 14px 1px rgba(236,72,153,.55);
}

/* "How would you like to stay connected?" — compact pill multi-select,
   built with native checkboxes (no new JS) styled via :checked + label */
.alu-connect{ margin:22px 0 20px; }
.alu-connect-label{
    display:block; font-size:.82rem; font-weight:700; letter-spacing:.02em;
    color:var(--alu-navy); margin:0 0 12px;
}
.alu-pill-group{ display:flex; flex-wrap:wrap; gap:10px; }
.alu-pill-input{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.alu-pill-choice{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; border-radius:50px; cursor:pointer;
    font-size:.82rem; font-weight:600; color:var(--alu-navy-mut);
    background:rgba(255,255,255,.55);
    border:1.5px solid rgba(18,58,146,.16);
    transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
    user-select:none;
}
.alu-pill-choice:hover{ border-color:var(--alu-pink); color:var(--alu-navy); }
.alu-pill-input:checked + .alu-pill-choice{
    background:linear-gradient(115deg, var(--alu-pink) 0%, var(--alu-pink-2) 100%);
    border-color:var(--alu-pink); color:#fff;
    box-shadow:0 8px 20px rgba(236,72,153,.32);
    transform:translateY(-1px);
}
.alu-pill-input:focus-visible + .alu-pill-choice{
    outline:2px solid var(--alu-pink); outline-offset:2px;
}

.alu-form-submit{ display:flex; justify-content:center; }

@media(max-width:760px){
    .alu-row, .alu-row-3, .alu-row-compact{ grid-template-columns:1fr; }
    .alu-form-panel{ padding:34px 24px; }
    .alu-form-panel.alu-form-compact{ padding:26px 22px; }
}

/*==========================
    ALUMNI ADVANTAGE — Benefits + Statistics merged into one
    compact navy section (per compaction spec: no images, small
    glass cards, minimal typography, ~320-400px total height).
==========================*/
.alu-advantage{
    position:relative; isolation:isolate; overflow:hidden;
    padding:52px 0;
    background:linear-gradient(135deg, var(--alu-navy) 0%, #0B2868 100%);
}
.alu-advantage .alu-head{ margin-bottom:30px; }
.alu-advantage .alu-head h2{ color:#FFFFFF; }
.alu-advantage .alu-head p{ color:rgba(255,255,255,.72); }
.alu-advantage .alu-eyebrow{
    background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:#FFFFFF;
}
.alu-advantage .alu-eyebrow i{ color:var(--alu-pink-2); }

.alu-adv-cards{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
    margin-bottom:28px;
}
.alu-adv-card{
    position:relative; isolation:isolate; overflow:hidden;
    padding:20px 22px; border-radius:16px; text-align:center;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.alu-adv-card::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit; padding:1.4px; opacity:0;
    background:conic-gradient(from var(--alu-a), transparent 0 74%, var(--alu-pink) 88%, #fff 94%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    /* Hover-only border effect, same fix as .alu-card::after above. */
    animation:aluTravel 9s linear infinite; animation-play-state:paused; transition:opacity .3s ease;
}
.alu-adv-card:hover{ transform:translateY(-3px); background:rgba(255,255,255,.09); border-color:rgba(236,72,153,.3); }
.alu-adv-card:hover::after{ opacity:1; animation-play-state:running; }
.alu-adv-card h3{
    position:relative; z-index:1; font-family:'Poppins',sans-serif; font-weight:700;
    font-size:1rem; color:#FFFFFF; margin:0 0 7px;
}
.alu-adv-card p{
    position:relative; z-index:1; font-size:.84rem; line-height:1.6; color:rgba(255,255,255,.7); margin:0;
}

/* stats sit as a lighter frosted panel against the already-navy section */
.alu-advantage .alu-stats{
    background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
    box-shadow:none; padding:24px 10px;
}

@media(max-width:1100px){
    .alu-adv-cards{ grid-template-columns:1fr; gap:12px; }
}

/*==========================
    STATISTICS BAR
==========================*/
.alu-stats-wrap{ padding:0 0 var(--alu-sec-pad); }
.alu-stats{
    position:relative; max-width:1080px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr);
    background:linear-gradient(135deg, var(--alu-navy) 0%, var(--alu-navy-2) 55%, #0F2D73 100%);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-radius:24px; overflow:hidden;
    box-shadow:0 24px 60px rgba(18,58,146,.24);
    padding:30px 10px;
}
.alu-stats::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--alu-a), transparent 0 76%, var(--alu-pink) 88%, #fff 94%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    /* Below-the-fold stats panel — paused until it scrolls into view. */
    animation:aluTravel 10s linear infinite; animation-play-state:paused;
}
.alu-stats.alu-anim-visible::after{ animation-play-state:running; }
.alu-stat{ position:relative; text-align:center; padding:10px 14px; }
.alu-stat + .alu-stat::before{
    content:""; position:absolute; left:0; top:14%; bottom:14%; width:1px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent);
}
.alu-stat h3{ font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.5rem,3vw,2.1rem); color:#fff; margin:0 0 4px; }
.alu-stat p{ font-size:.78rem; font-weight:600; color:rgba(255,255,255,.78); margin:0; letter-spacing:.02em; }

@media(max-width:760px){
    .alu-stats{ grid-template-columns:repeat(2,1fr); row-gap:22px; }
    .alu-stat:nth-child(3)::before{ display:none; }
}

/*==========================
    FINAL CTA
==========================*/
.alu-final{ text-align:center; padding:var(--alu-sec-pad) 0; }
.alu-final-inner{ max-width:720px; margin:0 auto; }
.alu-final h2{
    font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.01em;
    font-size:clamp(1.8rem,3.2vw,2.4rem); color:var(--alu-navy); line-height:1.2; margin:0 0 16px;
}
.alu-final p{ font-size:1rem; line-height:1.8; color:var(--alu-navy-mut); margin:0 0 32px; }
.alu-final-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/*==========================
    ACCESSIBILITY / RESPONSIVE
==========================*/
@media (prefers-reduced-motion: reduce){
    .alu-card, .alu-card::after, .alu-slide,
    .alu-orb, .alu-form-panel::after, .alu-stats::after, .alu-adv-card::after,
    .alu-btn-primary::before{ animation:none !important; transition:none !important; }
    .alu-card:hover, .alu-btn-primary:hover, .alu-btn-outline:hover, .alu-adv-card:hover{ transform:none; }
}

@media(max-width:1100px){
    .alu-cards{ grid-template-columns:repeat(2,1fr); }
    .alu-cards-compact{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
    .alu-hero-cta{ justify-content:center; }
    .alu-community-grid{ grid-template-columns:1fr; }
    .alu-community-text{ max-width:none; text-align:center; margin:0 auto; }
    .alu-community-media{ order:-1; }
}
@media(max-width:760px){
    .alu-wrap{ padding:0 20px; }
    .alu-cards, .alu-cards-compact{ grid-template-columns:1fr; }
    .alu-final-cta{ flex-direction:column; align-items:center; }
    .alu-final-cta .alu-btn{ width:100%; max-width:320px; }
}


/*==================================================
GTI-TASK16 — "How would you like to stay connected?"
An unselected and a selected pill previously looked almost
identical. A selected pill now carries a solid pink fill, a
pink border, a tick, and a visible focus ring for keyboard
users. Only the checked state changed - unselected pills keep
their existing look.
==================================================*/
.alu-pill-input:checked + .alu-pill-choice{
    background:linear-gradient(135deg,#EC4899 0%,#DB2777 100%);
    border-color:#DB2777;
    color:#fff;
    font-weight:700;
    box-shadow:0 6px 16px rgba(236,72,153,.34);
}
.alu-pill-input:checked + .alu-pill-choice::before{
    content:"\2713";
    margin-right:7px;
    font-weight:700;
}
.alu-pill-input:focus-visible + .alu-pill-choice{
    outline:2px solid #DB2777;
    outline-offset:2px;
}
/* Conditionally revealed fields must actually hide. */
.alu-field[hidden]{ display:none !important; }


/* GTI-TASK16-SPECIFICITY
   The base .alu-pill-choice rule sets colour and border with higher
   specificity than the plain checked selector, so a selected pill kept
   navy text on a pink fill (unreadable). Matching that specificity via
   the parent group fixes contrast without touching the unselected look. */
.alu-pill-group .alu-pill-input:checked + .alu-pill-choice{
    color:#FFFFFF;
    border-color:#DB2777;
}