:root{--navy:#071a2d;--navy2:#0c2942;--gold:#c8a45d;--cream:#f5f1e8;--paper:#fffdf8;--ink:#142131;--muted:#657180;--line:#dfe3e6;--white:#fff;--shadow:0 18px 50px rgba(7,26,45,.12);--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65}a{color:inherit;text-decoration:none}.container{width:min(1180px,92%);margin:auto}.topbar{background:#041321;color:#cdd7df;font-size:.78rem}.topbar-inner{display:flex;justify-content:space-between;padding:8px 0}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,253,248,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,33,49,.08)}.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--navy);color:var(--gold);font-weight:700;border-radius:50%;font-size:.85rem}.brand strong,.brand small{display:block;line-height:1.1}.brand strong{font-family:var(--serif);font-size:1rem}.brand small{color:var(--gold);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}.main-nav{display:flex;align-items:center;gap:25px;font-size:.86rem;font-weight:600}.main-nav a{transition:.2s}.main-nav a:hover{color:var(--gold)}.nav-cta{padding:11px 18px;border:1px solid var(--navy);background:var(--navy);color:white!important}.menu-toggle{display:none;border:0;background:none;font-size:1.5rem}.hero{height:calc(100vh - 112px);min-height:620px;position:relative;display:flex;align-items:center;color:white;overflow:hidden}.hero-bg{position:absolute;inset:0;background-image:url('../images/hero-campus.jpg');background-size:cover;background-position:center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,18,32,.88),rgba(3,18,32,.45),rgba(3,18,32,.12))}.hero-content{position:relative;z-index:1;max-width:850px}.eyebrow{display:inline-block;color:var(--gold);text-transform:uppercase;letter-spacing:.19em;font-weight:700;font-size:.7rem;margin-bottom:15px}.hero h1,.page-hero h1{font:600 clamp(3rem,7vw,6.8rem)/1.03 var(--serif);margin:0 0 25px;letter-spacing:-.035em}.hero h1 em,.page-hero h1 em,h2 em{font-style:italic;color:#e0c78e}.hero p{max-width:650px;font-size:1.15rem;color:#e7edf1}.hero-actions{display:flex;gap:13px;margin-top:30px}.btn{display:inline-block;padding:13px 22px;border:1px solid transparent;font-weight:700;font-size:.82rem;cursor:pointer}.btn-primary{background:var(--gold);color:var(--navy)}.btn-ghost,.btn-outline{color:white;border-color:rgba(255,255,255,.55)}.btn-dark{background:var(--navy);color:white}.scroll-note{position:absolute;bottom:30px;right:4%;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#dce4ea}.section{padding:105px 0}.light{background:var(--cream)}.dark{background:var(--navy);color:white}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.split h2,h2{font:600 clamp(2.2rem,4vw,4rem)/1.08 var(--serif);letter-spacing:-.025em;margin:0 0 20px}.lead{font-size:1.2rem;color:#3e4c5a}.text-link{display:inline-block;margin-top:18px;font-weight:700;border-bottom:1px solid var(--gold);padding-bottom:4px}.image-story{display:grid;grid-template-columns:1.15fr .85fr;min-height:600px}.image-story.reverse{grid-template-columns:.85fr 1.15fr}.story-image{min-height:600px}.story-copy{padding:90px 8vw;display:flex;flex-direction:column;justify-content:center;background:var(--navy);color:white}.story-copy h2{font-size:3.5rem}.stat-row{display:flex;gap:35px;margin-top:35px}.stat-row strong{display:block;font:600 2.2rem var(--serif);color:var(--gold)}.stat-row span{font-size:.75rem;color:#bdc9d1}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}.section-head>p{max-width:430px;color:var(--muted)}.card-grid{display:grid;gap:18px}.four{grid-template-columns:repeat(4,1fr)}.feature-card{min-height:360px;padding:28px;display:flex;flex-direction:column;justify-content:end;position:relative;color:white;overflow:hidden;background-size:cover;background-position:center}.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(3,18,32,.88))}.feature-card>*{position:relative}.feature-card span{color:var(--gold);font-size:.7rem}.feature-card h3{font:600 1.65rem var(--serif);margin:7px 0}.feature-card p{font-size:.84rem;color:#d8e0e5;margin:0}.photo{background-size:cover;background-position:center;background-color:#dce1e3;position:relative}.gallery-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:250px 250px;gap:12px}.gallery-grid .lab{grid-row:span 2}.gallery-grid .students{grid-column:span 2}.quote-section{padding:110px 0;background:var(--cream)}.narrow{max-width:900px}.quote-mark{font:6rem var(--serif);color:var(--gold);line-height:.5}.quote-section blockquote{font:600 clamp(2rem,4vw,3.4rem)/1.2 var(--serif);margin:20px 0}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.news-grid article .photo{height:270px;margin-bottom:20px}.news-grid h2,.news-grid h3{font:600 1.5rem/1.2 var(--serif);margin:8px 0}.date{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);font-weight:700}.admissions-banner{background:var(--gold);padding:85px 0;color:var(--navy)}.admissions-banner .eyebrow{color:var(--navy)}.page-hero{min-height:570px;display:flex;align-items:end;padding:90px 0;color:white;background-position:center}.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,18,32,.85),rgba(3,18,32,.1));z-index:0}.page-hero>*{position:relative;z-index:1}.page-hero p{max-width:650px;font-size:1.1rem}.principles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#d9d3c6}.principles>div{background:var(--paper);padding:32px}.principles b,.pathways span{color:var(--gold);font-size:.75rem}.principles h3{font:600 1.45rem var(--serif)}.pathways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.pathways article{padding:40px;border:1px solid var(--line);min-height:250px}.pathways h3{font:600 1.7rem var(--serif)}.subject-list{display:flex;flex-wrap:wrap;gap:10px}.subject-list span,.house-list b{border:1px solid var(--line);padding:10px 15px;background:white;font-size:.82rem}.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.life-grid .photo{height:310px;padding:25px;display:flex;align-items:end;color:white}.life-grid h3{font:600 1.8rem var(--serif);margin:0;text-shadow:0 2px 15px #000}.house-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.timeline>div{background:white;padding:35px}.timeline b{color:var(--gold)}.gallery-wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}.gallery-wall .photo:nth-child(3n){grid-row:span 2}.alumni-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.alumni-grid article{padding:35px;border:1px solid var(--line)}.avatar{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold);font:600 1.4rem var(--serif);margin-bottom:20px}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}.contact-form{display:grid;gap:18px}.contact-form label{font-size:.8rem;font-weight:700}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;padding:14px;border:1px solid var(--line);margin-top:6px;background:white;font:inherit}.contact-note{margin-top:35px;padding:22px;background:var(--cream)}.footer{background:#041321;color:#d3dce2;padding:70px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px}.footer h4{color:white}.footer-grid>a,.footer-grid div>a{display:block;margin:8px 0;color:#b9c4cc;font-size:.88rem}.footer-brand{margin-bottom:20px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;font-size:.72rem;color:#87949e}
.hero-bg,.campus-aerial{background-image:url('../images/hero-campus.jpg')}.classroom{background-image:url('../images/classroom-learning.jpg')}.science,.lab,.news-science{background-image:url('../images/science-lab.jpg')}.sports,.news-sports{background-image:url('../images/sports-action.jpg')}.arts,.news-arts{background-image:url('../images/performing-arts.jpg')}.library{background-image:url('../images/library-reading.jpg')}.students{background-image:url('../images/student-life.jpg')}.leadership{background-image:url('../images/leadership-team.jpg')}.boarding{background-image:url('../images/boarding-life.jpg')}.trip{background-image:url('../images/educational-trip.jpg')}.community{background-image:url('../images/community-service.jpg')}.graduation{background-image:url('../images/graduation.jpg')}.about-hero{background-image:url('../images/campus-entrance.jpg')}.academics-hero{background-image:url('../images/classroom-learning.jpg')}.student-hero{background-image:url('../images/student-life.jpg')}.admissions-hero{background-image:url('../images/campus-entrance.jpg')}.news-hero{background-image:url('../images/student-life.jpg')}.gallery-hero{background-image:url('../images/campus-aerial.jpg')}.alumni-hero{background-image:url('../images/graduation.jpg')}.contact-hero{background-image:url('../images/campus-entrance.jpg')}
@media(max-width:900px){.main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--paper);padding:25px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}.main-nav.open{display:flex}.menu-toggle{display:block}.split,.image-story,.image-story.reverse,.contact-grid{grid-template-columns:1fr}.story-copy{padding:70px 6vw}.four,.principles,.pathways,.timeline,.news-grid,.life-grid,.alumni-grid{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-wall{grid-template-columns:1fr 1fr}.hero{min-height:650px}.footer-grid{grid-template-columns:1fr 1fr}.section-head{align-items:start;flex-direction:column}.image-story .story-image{min-height:400px}}
@media(max-width:600px){.topbar-inner span:last-child{display:none}.four,.principles,.pathways,.timeline,.news-grid,.life-grid,.alumni-grid,.gallery-wall,.footer-grid{grid-template-columns:1fr}.hero h1,.page-hero h1{font-size:3.3rem}.hero p{font-size:1rem}.section{padding:75px 0}.gallery-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,230px)}.gallery-grid .lab,.gallery-grid .students{grid-row:auto;grid-column:auto}.stat-row{gap:15px;flex-wrap:wrap}.story-copy h2{font-size:2.7rem}}

.leaders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 28px}.leader-card{border:0;background:none;text-align:center;cursor:pointer;padding:0;font:inherit;color:inherit}.leader-photo{display:block;width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 auto 18px;border:7px solid var(--cream);box-shadow:var(--shadow)}.leader-photo img{width:100%;height:100%;object-fit:cover;display:block}.leader-card strong{display:block;font:600 1.45rem var(--serif);margin-bottom:4px}.leader-card>span:last-child{font-size:.78rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.1em}.leader-card:hover .leader-photo{transform:scale(1.03);transition:.2s}.leader-modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:25px}.leader-modal.open{display:flex}.leader-modal-backdrop{position:absolute;inset:0;background:rgba(3,18,32,.82);backdrop-filter:blur(5px)}.leader-modal-card{position:relative;z-index:1;background:var(--paper);width:min(760px,94vw);padding:35px;display:grid;grid-template-columns:260px 1fr;gap:35px;align-items:center;box-shadow:0 30px 90px rgba(0,0,0,.3)}.leader-modal-card img{width:260px;height:260px;border-radius:50%;object-fit:cover}.leader-modal-card h2{margin-bottom:8px}.leader-modal-card p{font-size:1.05rem;color:var(--muted)}.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:2rem;cursor:pointer;color:var(--ink)}.empty-state{padding:45px;background:var(--cream);text-align:center;color:var(--muted)}
@media(max-width:900px){.leaders-grid{grid-template-columns:repeat(2,1fr)}.leader-modal-card{grid-template-columns:1fr;text-align:center;justify-items:center}.leader-modal-card img{width:210px;height:210px}}@media(max-width:600px){.leaders-grid{grid-template-columns:1fr 1fr;gap:30px 12px}.leader-photo{width:140px;height:140px}.leader-card strong{font-size:1.1rem}.leader-modal-card{padding:30px 20px}.leader-modal-card img{width:180px;height:180px}}

/* =========================================================
   JIPRA STUDENT LEADERSHIP — CARD GRID
   Keep these rules at the end so they override older
   leadership styles in the stylesheet.
   ========================================================= */
.leadership-page{background:#f7f4ec;min-height:100vh}
.leadership-intro{padding:58px 0 24px;background:#f7f4ec}
.leadership-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}
.leadership-heading h1{font:600 clamp(2rem,4vw,3rem)/1.08 var(--serif);letter-spacing:-.025em;margin:0;color:#101010}
.leadership-heading .eyebrow{color:#151515;margin-bottom:12px}
.leadership-view-all{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:17px 27px;font-size:.88rem;font-weight:600;box-shadow:0 8px 25px rgba(20,33,49,.05);white-space:nowrap}
.leadership-view-all span{font-size:1.1rem}
.leadership-section{padding:20px 0 100px}
.leaders-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.leader-card{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;min-height:365px;padding:30px 18px 28px;border:1px solid #e2e0da;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(20,33,49,.035);text-align:center;cursor:pointer;overflow:hidden;font:inherit;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.leader-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(20,33,49,.10);border-color:#d6d1c5}
.leader-card:focus-visible{outline:3px solid rgba(200,164,93,.55);outline-offset:3px}
.leader-card-accent{position:absolute;left:-8px;top:12px;width:40px;height:105px;opacity:.65;background:repeating-linear-gradient(135deg,transparent 0 13px,#eee9df 13px 19px,transparent 19px 28px);transform:rotate(1deg);pointer-events:none}
.leader-photo-wrap{position:relative;display:block;width:190px;height:190px;margin:0 auto 24px;flex:0 0 auto}
.leader-photo{display:block;width:190px;height:190px;border-radius:50%;overflow:hidden;background:#e7e8e7}
.leader-photo img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center}
.leader-share{position:absolute;right:1px;bottom:-5px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e3aa09;color:#fff;font-size:1.1rem;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,.12);line-height:1;transform:rotate(-35deg);pointer-events:none}
.leader-name{display:block;max-width:100%;font:600 1.12rem/1.25 var(--serif);color:#111;margin:0 0 8px}
.leader-post{display:block;max-width:100%;font-size:.9rem;line-height:1.55;color:#5b5b5b}
.empty-state{padding:45px;background:#fff;text-align:center;color:var(--muted);border:1px solid #e2e0da;border-radius:16px}

/* =========================================================
   Logo inside the brand mark — enlarged, fits cleanly
   ========================================================= */
.brand-mark{
    width:55px;
    height:55px;
    padding:7px;              /* small breathing room inside the ring */
    overflow:hidden;
}
.brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;       /* whole logo visible, never cropped */
    display:block;
    border-radius:50%;
}

/* Modal: the large photograph is intentionally constrained. */
.leader-modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:24px}
.leader-modal.open{display:flex}
.leader-modal-backdrop{position:absolute;inset:0;background:rgba(3,18,32,.82);backdrop-filter:blur(6px)}
.leader-modal-card{position:relative;z-index:1;width:min(720px,92vw);max-height:90vh;padding:34px;background:#fff;display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;align-items:center;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:auto}
.leader-modal-card img{display:block;width:260px;height:260px;max-width:260px;border-radius:50%;object-fit:cover}
.leader-modal-info h2{font:600 clamp(1.8rem,4vw,2.8rem)/1.1 var(--serif);margin:0 0 10px;color:#111}
.leader-modal-info p{margin:0;color:var(--muted);font-size:1rem}
.modal-close{position:absolute;right:13px;top:8px;width:40px;height:40px;border:0;border-radius:50%;background:#f3f1eb;color:#111;font-size:1.8rem;line-height:1;cursor:pointer}

@media(max-width:900px){
    .leaders-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
    .leader-card{min-height:300px;padding:22px 10px 20px;border-radius:14px}
    .leader-photo-wrap,.leader-photo{width:135px;height:135px}
    .leader-photo-wrap{margin-bottom:18px}
    .leader-name{font-size:1rem}
    .leader-post{font-size:.76rem}
    .leader-share{width:32px;height:32px;font-size:.9rem}
    .leader-modal-card{grid-template-columns:1fr;text-align:center;justify-items:center;width:min(520px,92vw)}
}

@media(max-width:600px){
    .leadership-intro{padding:38px 0 18px}
    .leadership-heading{align-items:flex-end;gap:14px}
    .leadership-heading h1{font-size:1.9rem}
    .leadership-heading .eyebrow{font-size:.62rem}
    .leadership-view-all{padding:12px 15px;font-size:.7rem}
    .leadership-view-all span{font-size:.9rem}
    .leadership-section{padding:12px 0 70px}
    .leaders-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
    .leader-card{min-height:0;height:100%;padding:17px 6px 18px;border-radius:13px}
    .leader-card-accent{width:28px;height:70px;top:8px;left:-7px;background:repeating-linear-gradient(135deg,transparent 0 9px,#eee9df 9px 14px,transparent 14px 20px)}
    .leader-photo-wrap,.leader-photo{width:88px;height:88px}
    .leader-photo-wrap{margin-bottom:13px}
    .leader-share{width:25px;height:25px;right:-1px;bottom:-3px;font-size:.72rem}
    .leader-name{font-size:.78rem;line-height:1.22;margin-bottom:5px}
    .leader-post{font-size:.62rem;line-height:1.35}
    .leader-modal{padding:14px}
    .leader-modal-card{padding:34px 18px 25px;width:94vw;border-radius:18px}
    .leader-modal-card img{width:190px;height:190px;max-width:190px}
}


/* =========================
   MOTION LAYER — design unchanged
   ========================= */
@media (prefers-reduced-motion: no-preference){
  body{overflow-x:hidden}
  .hero-bg{animation:stjHeroZoom 16s ease-in-out infinite alternate;transform:scale(1.04)}
  .hero-overlay{animation:stjOverlayIn 1.2s ease both}
  .hero-content{animation:stjRise .9s cubic-bezier(.22,1,.36,1) .15s both}
  .hero-content .eyebrow{animation:stjFade .7s ease .25s both}
  .hero-content h1{animation:stjRise 1s cubic-bezier(.22,1,.36,1) .35s both}
  .hero-content p{animation:stjRise .9s cubic-bezier(.22,1,.36,1) .5s both}
  .hero-actions{animation:stjRise .8s cubic-bezier(.22,1,.36,1) .65s both}
  .scroll-note{animation:stjFloat 2s ease-in-out infinite}
  .site-header,.stj-header{transition:box-shadow .35s ease,background .35s ease}
  .btn,.text-link,.feature-card,.photo,.news-grid article,.leader-card,.gallery-dynamic{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,filter .45s ease,background-size .8s ease}
  .btn:hover{transform:translateY(-3px)}
  .feature-card:hover,.news-grid article:hover{transform:translateY(-7px)}
  .feature-card:hover{box-shadow:0 22px 50px rgba(7,26,45,.22)}
  .photo{overflow:hidden;background-size:cover;will-change:transform}
  .photo:hover{filter:saturate(1.06)}
  .gallery-wall .photo{animation:stjReveal .8s cubic-bezier(.22,1,.36,1) both}
  .gallery-wall .photo:nth-child(1){animation-delay:.04s}.gallery-wall .photo:nth-child(2){animation-delay:.08s}.gallery-wall .photo:nth-child(3){animation-delay:.12s}.gallery-wall .photo:nth-child(4){animation-delay:.16s}.gallery-wall .photo:nth-child(5){animation-delay:.20s}.gallery-wall .photo:nth-child(6){animation-delay:.24s}.gallery-wall .photo:nth-child(7){animation-delay:.28s}.gallery-wall .photo:nth-child(8){animation-delay:.32s}.gallery-wall .photo:nth-child(9){animation-delay:.36s}.gallery-wall .photo:nth-child(10){animation-delay:.40s}.gallery-wall .photo:nth-child(11){animation-delay:.44s}.gallery-wall .photo:nth-child(12){animation-delay:.48s}
  .section,.image-story,.quote-section,.admissions-banner{animation:stjSectionIn .9s ease both;animation-timeline:view();animation-range:entry 5% cover 25%}
  .stat-row strong{transition:transform .35s ease,color .35s ease}.stat-row div:hover strong{transform:translateY(-4px)}
  .gallery-dynamic{border:0;padding:0;width:100%;cursor:zoom-in;background-color:#dce1e3}
  .gallery-dynamic:hover{transform:scale(.985)}
  .gallery-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:25px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
  .gallery-lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
  .gallery-lightbox-backdrop{position:absolute;inset:0;background:rgba(3,18,32,.88);backdrop-filter:blur(10px)}
  .gallery-lightbox-card{position:relative;z-index:1;width:min(1050px,94vw);max-height:92vh;background:var(--paper);box-shadow:0 30px 100px rgba(0,0,0,.35);transform:translateY(25px) scale(.97);transition:transform .4s cubic-bezier(.22,1,.36,1);overflow:auto}
  .gallery-lightbox.open .gallery-lightbox-card{transform:translateY(0) scale(1)}
  .gallery-lightbox-card img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#071a2d}
  .gallery-lightbox-copy{padding:22px 28px}.gallery-lightbox-copy h2{font-size:2rem;margin:0 0 6px}.gallery-lightbox-copy p{margin:0;color:var(--muted)}
  .gallery-lightbox-close{position:absolute;right:12px;top:10px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,253,248,.9);font-size:28px;line-height:1;cursor:pointer;transition:transform .2s ease}.gallery-lightbox-close:hover{transform:rotate(90deg)}
}
@keyframes stjHeroZoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
@keyframes stjOverlayIn{from{opacity:.2}to{opacity:1}}
@keyframes stjRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes stjFade{from{opacity:0}to{opacity:1}}
@keyframes stjFloat{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-7px);opacity:1}}
@keyframes stjReveal{from{opacity:0;transform:translateY(35px) scale(.98)}to{opacity:1;transform:none}}
@keyframes stjSectionIn{from{opacity:.25;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(max-width:600px){.gallery-lightbox{padding:12px}.gallery-lightbox-copy{padding:18px}.gallery-lightbox-copy h2{font-size:1.5rem}}

@media (prefers-reduced-motion: no-preference){.motion-visible{opacity:1;transform:none}}

/* =========================
   ST. JUDE CINEMATIC IMAGE SEQUENCES
   Design/layout intentionally unchanged. Images crossfade every 2 seconds.
   ========================= */
@media (prefers-reduced-motion: no-preference){
  .stj-sequence-host{isolation:isolate;overflow:hidden}
  .stj-slide-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat}
  .stj-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;animation:stjImageSequence 8s linear infinite;will-change:opacity,transform}
  .stj-slide:nth-child(1){animation-delay:0s}
  .stj-slide:nth-child(2){animation-delay:2s}
  .stj-slide:nth-child(3){animation-delay:4s}
  .stj-slide:nth-child(4){animation-delay:6s}
  .stj-sequence-host > *:not(.stj-slide-layer){position:relative;z-index:2}
  .page-hero.stj-sequence-host:before{z-index:1}
  .hero-bg.stj-sequence-host{z-index:0}
  .hero-bg.stj-sequence-host .stj-slide-layer{z-index:0}
  .hero-bg.stj-sequence-host .stj-slide{animation-name:stjImageSequenceHero}
  .feature-card.stj-sequence-host:before{z-index:1}
  .feature-card.stj-sequence-host > *:not(.stj-slide-layer){z-index:2}
  .life-grid .stj-sequence-host > h3{z-index:2}
}
@keyframes stjImageSequence{0%,20%{opacity:1;transform:scale(1)}25%,95%{opacity:0;transform:scale(1.045)}100%{opacity:1;transform:scale(1)}}
@keyframes stjImageSequenceHero{0%,20%{opacity:1;transform:scale(1.04)}25%,95%{opacity:0;transform:scale(1.11)}100%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion: reduce){
  .stj-slide-layer{display:none}
}

/* Exact two-second sequencing: first image is visible immediately, then each
   following image fades/slides in every 2 seconds. */
@media (prefers-reduced-motion: no-preference){
  .stj-slide{opacity:0 !important;animation:none !important;transform:scale(1.045);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)}
  .stj-slide.active{opacity:1 !important;transform:scale(1)}
  .hero-bg .stj-slide{transform:scale(1.08)}
  .hero-bg .stj-slide.active{transform:scale(1.04)}
}


/* =========================================================
   ST. JUDE HERO PHOTO SLIDESHOW
   Layered cross-fade; preserves existing hero content/layout.
   ========================================================= */
.hero-bg { overflow: hidden; }
.stj-hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.stj-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.25s ease-in-out, transform 7s ease-out;
  will-change: opacity, transform;
}
.stj-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.page-hero { isolation: isolate; overflow: hidden; }
.page-hero .stj-hero-slideshow { z-index: 0; }
.page-hero:before { z-index: 1; pointer-events: none; }
.page-hero > * { position: relative; z-index: 2; }
.hero-bg > .stj-hero-slideshow { z-index: 0; }
@media (prefers-reduced-motion: reduce) {
  .stj-hero-slide { transition: none !important; transform: none !important; }
}

/* Keep the slideshow behind the page-hero overlay and its text. */
.page-hero > .stj-hero-slideshow { position: absolute; z-index: 0; }


/* Homepage hero: slideshow is a full-section layer, independent of the old
   static .hero-bg image path. Keep the overlay and copy above it. */
.hero { isolation: isolate; }
.hero > .stj-hero-slideshow { position: absolute; inset: 0; z-index: 0; }
.hero > .hero-bg { z-index: 0; background-image: none !important; }
.hero > .hero-overlay { z-index: 1; }
.hero > .hero-content { position: relative; z-index: 2; }
.hero > .scroll-note { z-index: 2; }