/*==================================================
    GERMAINE — HIRE OUR GRADUATES
    PREMIUM VISUAL ELEVATION LAYER (additive only)
    Loads AFTER graduate-hire.css.
    No structure, content, IDs, or JS-bound classes
    are touched — this file only re-skins existing
    selectors that already exist on the page.
    Light glassmorphism palette: pink / electric blue /
    lavender / white, matching graduate-hire.css.
==================================================*/

.ghire{
    --e-blue:#102A5C;
    --e-pink:#EC4899;
    --e-lav:#EC4899;
}

/* travelling-light angle driver (safe to redeclare) */
@property --gh-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

@keyframes ghOrbit{
    0%,100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(26px,-20px) scale(1.06); }
    66%{ transform:translate(-20px,16px) scale(.96); }
}
@keyframes ghDrift{
    0%{ background-position:0% 0%, 100% 100%, 50% 0%; }
    100%{ background-position:18% 10%, 82% 88%, 55% 6%; }
}
@keyframes ghDot{
    0%,100%{ transform:translateY(0) scale(1); opacity:.7; }
    50%{ transform:translateY(-16px) scale(1.3); opacity:.25; }
}
@keyframes ghSheen{
    0%{ transform:translateX(-120%) skewX(-12deg); }
    100%{ transform:translateX(220%) skewX(-12deg); }
}
@keyframes ghPulseGlow{
    0%,100%{ box-shadow:0 10px 35px rgba(16, 42, 92, .1), 0 0 0 rgba(16, 42, 92, 0); }
    50%{ box-shadow:0 10px 35px rgba(16, 42, 92, .1), 0 0 26px rgba(16, 42, 92, .3); }
}
@keyframes ghRayDrift{
    0%,100%{ opacity:.35; transform:translateX(0); }
    50%{ opacity:.6; transform:translateX(24px); }
}

/*========== AMBIENT PAGE ATMOSPHERE — mesh, blurred orbs, light rays, particles ==========*/
.ghire{ position:relative; }
.ghire::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(460px 460px at 8% 12%, rgba(16, 42, 92, .16), transparent 60%),
        radial-gradient(520px 520px at 92% 28%, rgba(236, 72, 153, .14), transparent 62%),
        radial-gradient(420px 420px at 30% 88%, rgba(236, 72, 153, .12), transparent 60%);
    filter:blur(6px);
    animation:ghDrift 30s ease-in-out infinite alternate;
}
/* faint diagonal light rays */
.ghire::after{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background:
        linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 48%, transparent 56%),
        linear-gradient(115deg, transparent 60%, rgba(16, 42, 92, .08) 68%, transparent 78%);
    background-size:200% 200%, 200% 200%;
    animation:ghRayDrift 22s ease-in-out infinite;
}
.ghire section{ position:relative; z-index:1; }

/* tiny ambient floating particles near section headings */
.gh-head{ position:relative; }
.gh-head::before{
    content:"";
    position:absolute; width:5px; height:5px; border-radius:50%;
    top:-14px; left:6px;
    background:var(--e-blue);
    box-shadow:0 0 10px var(--e-blue), 0 0 20px rgba(16, 42, 92, .5);
    animation:ghDot 5.5s ease-in-out infinite;
}
.gh-head.left::before{ left:0; }

/*========== FLOATING LIGHT PARTICLES (subtle, page-wide) ==========*/
.gh-particle{
    position:absolute; border-radius:50%; pointer-events:none; z-index:1;
    animation:ghParticleFloat 12s ease-in-out infinite;
}
@keyframes ghParticleFloat{
    0%,100%{ transform:translateY(0) scale(1); opacity:.35; }
    50%{ transform:translateY(-22px) scale(1.15); opacity:.75; }
}
.gh-hero{ isolation:isolate; }
.gh-hero .gh-particle{ z-index:3; }
.gh-hero .p1{ top:14%; left:8%; width:5px; height:5px; background:#FFFFFF; box-shadow:0 0 10px #FFFFFF; }
.gh-hero .p2{ top:30%; right:14%; width:4px; height:4px; background:var(--g-pink); box-shadow:0 0 10px var(--g-pink); animation-delay:2s; }
.gh-hero .p3{ bottom:22%; left:18%; width:6px; height:6px; background:var(--g-blue); box-shadow:0 0 12px var(--g-blue); animation-delay:4s; }
.gh-stats{ position:relative; }
.gh-stats .gh-particle{ top:-6px; }
.gh-stats .p1{ left:20%; width:4px; height:4px; background:var(--g-pink); box-shadow:0 0 8px var(--g-pink); }
.gh-stats .p2{ right:24%; width:4px; height:4px; background:var(--g-blue); box-shadow:0 0 8px var(--g-blue); animation-delay:3s; }

/*========== CURSOR GLOW — subtle, follows the mouse ==========*/
.gh-cursor-glow{
    position:fixed; top:0; left:0; width:420px; height:420px; z-index:0;
    pointer-events:none; border-radius:50%;
    background:radial-gradient(circle, rgba(236, 72, 153, .10), rgba(16, 42, 92, .07) 45%, transparent 72%);
    transform:translate(-50%,-50%);
    opacity:0; transition:opacity .6s ease;
    will-change:transform;
}
.gh-cursor-glow.active{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .gh-cursor-glow{ display:none; } }
@media (hover:none){ .gh-cursor-glow{ display:none; } }

/*========== TRAVELLING BORDER LIGHT ON EVERY GLASS CARD ==========*/
.gh-glass{ position:relative; isolation:isolate; }
.gh-glass::before{
    content:"";
    position:absolute; inset:0; z-index:2; pointer-events:none;
    border-radius:inherit; padding:1px;
    background:conic-gradient(from var(--gh-a),
        transparent 0 66%, var(--e-pink) 78%, #FFFFFF 85%, var(--e-blue) 92%, var(--e-lav) 98%, transparent 100%);
    -webkit-mask:linear-gradient(#102A5C 0 0) content-box, linear-gradient(#102A5C 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0;
    transition:opacity .5s ease;
    animation:ghTravel 15s linear infinite;
}
.gh-glass:hover::before{ opacity:1; }

/* deepen the existing hover lift with a softer, layered shadow */
.gh-glass:hover{
    box-shadow:0 30px 90px rgba(16, 42, 92, .12), 0 0 34px rgba(16, 42, 92, .2);
}

/*========== HERO PANEL — crystal-transparent, border-light-only card ==========
   Unlike the other .gh-glass cards on this page (which stay frosted and
   only reveal their travelling light on hover), the hero panel has no
   fill at all — the hero slideshow must read perfectly clearly through
   it. Its presence is communicated purely by an always-on animated
   navy/pink perimeter light, like a transparent HUD frame. */
.gh-hero-panel.gh-glass::before{
    opacity:.9;
    animation:ghTravel 8s linear infinite;
}
.gh-hero-panel.gh-glass:hover::before{ opacity:1; }
.gh-hero-panel.gh-glass:hover{
    box-shadow:none;
    transform:none;
    border-color:rgba(236, 72, 153, .3);
}
@media (prefers-reduced-motion: reduce){
    .gh-hero-panel.gh-glass::before{ animation:none; opacity:.7; }
}

/*========== HERO — extra ambient light rings ==========*/
.gh-hero{ position:relative; }
.gh-hero .gh-hero-badge{
    position:relative; overflow:hidden;
    animation:ghPulseGlow 6s ease-in-out infinite;
}
.gh-hero .gh-hero-badge::after{
    content:"";
    position:absolute; inset:0; width:40%;
    background:linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation:ghSheen 7s ease-in-out infinite;
}
.gh-hero-chevron{ animation-duration:2.2s, 3.6s; }

/*========== STATS ==========*/
.gh-stat{ position:relative; }
.gh-stat i{ filter:drop-shadow(0 0 10px rgba(236, 72, 153, .4)); }

/*========== FEATURE / QUALITY IMAGES — light frame + sheen ==========*/
.gh-feature-img{ position:relative; }
.gh-feature-img::after{
    content:"";
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(160deg, rgba(255, 255, 255, .2), transparent 40%);
}
.gh-qic{ position:relative; }
.gh-qic{ box-shadow:0 8px 20px rgba(236, 72, 153, .28), 0 0 0 1px rgba(255, 255, 255, .4) inset; }

/*========== BUTTONS — glass finish + reflection sweep ==========*/
.gh-btn{ position:relative; overflow:hidden; }
.gh-btn::before{
    content:"";
    position:absolute; top:0; bottom:0; width:36%;
    background:linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform:translateX(-160%) skewX(-12deg);
    animation:ghBtnSheen 5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes ghBtnSheen{
    0%, 40%{ transform:translateX(-160%) skewX(-12deg); }
    70%, 100%{ transform:translateX(320%) skewX(-12deg); }
}
.gh-btn:hover::before{ animation-duration:1.1s; }
.gh-btn-glass{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.gh-btn-gold:hover, .gh-btn-glass:hover{
    box-shadow:0 14px 30px rgba(236, 72, 153, .28), 0 0 22px rgba(16, 42, 92, .22);
}

/*========== TESTIMONIALS — quote glow ==========*/
.gh-tst .gh-quote{ filter:drop-shadow(0 0 14px rgba(236, 72, 153, .3)); }
.gh-tst-av{ box-shadow:0 0 0 3px rgba(16, 42, 92, .18), 0 0 18px rgba(236, 72, 153, 0.26); }

/*========== CTA BAND — ambient orbs + travelling edge ==========*/
.gh-cta-inner{ isolation:isolate; }
.gh-cta-inner::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(300px 300px at 10% 90%, rgba(255, 255, 255, .18), transparent 65%),
        radial-gradient(280px 280px at 92% 12%, rgba(255, 255, 255, .14), transparent 62%);
    animation:ghOrbit 20s ease-in-out infinite;
}
.gh-cta-inner{
    outline:1px solid transparent;
}
.gh-cta-inner{ position:relative; }
.gh-cta-inner::before{ border-radius:inherit; }
/* travelling light on the CTA edge, layered above the existing ::after glow */
.gh-cta{ position:relative; }
.gh-cta .gh-cta-inner{ position:relative; }
.gh-cta .gh-cta-inner:after{ z-index:0; }
.gh-cta .gh-cta-inner:before{ z-index:0; }
.gh-cta-inner > *{ position:relative; z-index:2; }

/*========== FAQ — soft open glow ==========*/
.gh-faq-item.open{ box-shadow:0 25px 70px rgba(16, 42, 92, .1), 0 0 30px rgba(16, 42, 92, .2); }
.gh-faq-q{ transition:color .3s ease; }
.gh-faq-item:hover .gh-faq-q{ color:var(--e-pink); }

/*========== CONTACT CARDS ==========*/
.gh-cc i{ filter:drop-shadow(0 0 10px rgba(16, 42, 92, .35)); }

/*========== PARTNER LOGOS — subtle lift glow ==========*/
.gh-logo:hover{ box-shadow:0 14px 30px rgba(16, 42, 92, .1), 0 0 22px rgba(16, 42, 92, .18); }

/*==================================================
    NAVIGATION — page-specific override removed for
    sitewide navigation consistency (Global Navigation
    Consistency pass). This page previously had its own
    custom navy/purple travelling-light nav theme,
    gradient-text active links, glowing logo animation,
    and a uniquely-styled Apply button. It now inherits
    the same shared navigation component (colors, hover,
    active state, dropdowns, Apply button) used by every
    other page, via style.css / nav-refresh.css only.
    Nothing else on this page was changed.
==================================================*/

/*==================================================
    IMAGES — light reflection sweep + gentle hover lift
==================================================*/
.gh-feature{ isolation:isolate; }
.gh-feature-img{ position:relative; overflow:hidden; }
.gh-feature-img::before{
    content:"";
    position:absolute; top:0; bottom:0; width:40%; z-index:2; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform:translateX(-160%) skewX(-14deg);
    transition:transform .9s ease;
}
.gh-feature:hover .gh-feature-img::before{ transform:translateX(320%) skewX(-14deg); }
.gh-logo{ position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease; }
.gh-logo:hover{ transform:translateY(-4px) scale(1.03); }

/*==================================================
    TYPOGRAPHY — refined contrast + subtle heading glow
==================================================*/
.gh-head h2{
    letter-spacing:.2px;
    text-shadow:0 0 24px rgba(16, 42, 92, .1);
}
.gh-hero h1{ letter-spacing:.2px; }
.gh-tst-by strong{ letter-spacing:.2px; }
.gh-eyebrow{ text-shadow:none; }

/*==================================================
    FOOTER — subtle premium touches (scoped to this page)
==================================================*/
body.ghire-page .footer{ position:relative; }
body.ghire-page .footer::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--e-pink), var(--e-blue), var(--e-lav), transparent);
    opacity:.5;
}
body.ghire-page .footer-social a{
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.ghire-page .footer-social a:hover{
    transform:translateY(-3px); box-shadow:0 0 16px rgba(16, 42, 92, .3), 0 0 18px rgba(236, 72, 153, 0.3); border-color:var(--e-blue);
}
body.ghire-page .back-to-top{
    box-shadow:0 10px 26px rgba(236, 72, 153, .3), 0 0 0 1px rgba(255, 255, 255, .4) inset;
}

/*========== MOTION SAFETY ==========*/
@media (prefers-reduced-motion: reduce){
    .ghire::before, .ghire::after, .gh-glass::before, .gh-hero-badge::after,
    .gh-btn::before, .gh-cta-inner::before, .gh-head::before,
    .gh-feature-img::before{ animation:none !important; transition:none !important; }
}

/*========== RESPONSIVE GUARDS ==========*/
@media (max-width:768px){
    .ghire::after{ background-size:160% 160%, 160% 160%; }
    .gh-cursor-glow{ display:none; }
}

/*========== CLICK RIPPLE ==========*/
.gh-ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    background:rgba(255, 255, 255, .6);
    transform:scale(0); opacity:.6;
    animation:ghRippleOut .6s ease-out forwards;
}
@keyframes ghRippleOut{
    to{ transform:scale(2.6); opacity:0; }
}

/*========== BREATHING SECTION HEADINGS ==========*/
@keyframes ghHeadBreathe{
    0%,100%{ text-shadow:0 0 0 rgba(236, 72, 153, 0); }
    50%{ text-shadow:0 0 18px rgba(236, 72, 153, .18); }
}
.gh-head h2{ animation:ghHeadBreathe 7s ease-in-out infinite; }

/*========== GRADIENT WORD HIGHLIGHT ==========*/
@keyframes ghWordShift{
    0%,100%{ filter:hue-rotate(0deg) brightness(1); }
    50%{ filter:hue-rotate(-14deg) brightness(1.12); }
}
.gh-word-glow{
    background:linear-gradient(90deg,#FFFFFF,var(--g-pink) 55%,#EC4899);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:ghWordShift 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
    .gh-btn, .gh-btn-gold, .gh-btn-glass, .gh-btn-neon, .gh-btn::before,
    .gh-head h2, .gh-word-glow{ animation:none !important; }
}