/* ============================================================
   St. Therese Mapinga Secondary School — styles.css
   Complete rebuild · clean · no duplicates
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --maroon-900:#1a0803; --maroon-800:#2b0b02; --maroon-700:#351006;
  --maroon-600:#4a1809; --maroon-500:#5e1f0c;
  --orange-600:#d95c00; --orange-500:#f26a0a; --orange-400:#ff8a33; --orange-100:#fff0e2;
  --cream-50:#fdfaf7; --cream-100:#fbf7f2; --cream-200:#f4ece3; --cream-300:#e8ddd1;
  --ink-900:#1a120d; --ink-700:#3a2b23; --ink-500:#6b5950; --ink-300:#a8968c; --white:#fff;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:80px;--s-10:96px;--s-11:120px;
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:20px;--r-pill:999px;
  --sh-soft:0 1px 2px rgba(26,18,13,.04),0 4px 14px rgba(53,16,6,.06);
  --sh-lift:0 16px 40px rgba(53,16,6,.12);
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-display:"Playfair Display",Georgia,serif;
  --t-xs:12px;--t-sm:14px;--t-md:16px;--t-lg:18px;--t-xl:20px;--t-2xl:24px;--t-3xl:30px;--t-4xl:38px;--t-5xl:48px;--t-6xl:60px;
  --container:1200px; --gutter:32px;
}
/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--t-md);line-height:1.65;color:var(--ink-700);background:var(--cream-50);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto;object-fit:cover;object-position:center}
a{color:inherit;text-decoration:none;transition:color .18s ease}
a:hover{color:var(--orange-500)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--orange-500);color:#fff}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{color:var(--ink-900);font-weight:600;line-height:1.15;letter-spacing:-.02em}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5vw,var(--t-6xl));line-height:1.05;letter-spacing:-.03em}
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,var(--t-4xl));line-height:1.12;letter-spacing:-.025em}
h3{font-size:var(--t-xl);font-weight:600}
h4{font-size:var(--t-lg);font-weight:600}
p{color:var(--ink-700)}
.kicker{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-500)}
.lead{font-size:var(--t-lg);line-height:1.7;color:var(--ink-500)}

/* ---------- LAYOUT ---------- */
.container{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.section{padding:var(--s-10) 0}
.section-sm{padding:var(--s-8) 0}
.section-heading{max-width:720px;margin:0 auto var(--s-7);text-align:center}
.section-heading h2{margin:var(--s-3) 0 var(--s-4)}
.section-heading p{color:var(--ink-500);font-size:var(--t-lg);line-height:1.7}

/* ---------- BUTTONS ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:14px 26px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;line-height:1;border:1px solid transparent;transition:all .18s ease;white-space:nowrap}
.button:hover{transform:translateY(-1px);box-shadow:var(--sh-soft)}
.button.primary{background:#c81e1e;color:#fff}
.button.primary:hover{background:#a51818}
.button.orange{background:var(--orange-500);color:#fff}
.button.orange:hover{background:var(--orange-600)}
.button.dark,.button.brown{background:var(--maroon-700);color:#fff}
.button.dark:hover,.button.brown:hover{background:var(--maroon-600)}
.button.ghost,.button.outline{border-color:var(--cream-300);background:transparent;color:var(--ink-900)}
.button.ghost:hover,.button.outline:hover{border-color:var(--maroon-700);background:var(--maroon-700);color:#fff}
.button.light,.button.outline-light{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(8px)}
.button.light:hover,.button.outline-light:hover{background:#fff;color:var(--maroon-700);border-color:#fff}
.button.glass{border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.10);color:#fff;backdrop-filter:blur(8px)}
.button.glass:hover{background:#fff;color:var(--maroon-700)}
.button i{font-style:normal;transition:transform .18s ease}
.button:hover i{transform:translateX(3px)}
.button.lg{padding:16px 30px;font-size:var(--t-md)}
.button b{font-weight:700}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--maroon-800);color:rgba(255,255,255,.85);font-size:var(--t-xs)}
.topbar-inner{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-2) 0}
.topbar a{color:rgba(255,255,255,.85)}
.topbar a:hover{color:#fff}
.contacts,.portals{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.portals .sep,.portals span.sep{color:rgba(255,255,255,.25)}
.top-admin-login{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);font-weight:600;background:rgba(255,255,255,.06)}
.top-admin-login:hover{background:var(--orange-500);border-color:var(--orange-500);color:#fff}
.topbar .social{display:flex;align-items:center;gap:var(--s-2);margin-left:var(--s-2)}
.topbar .social a{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);color:#fff}
.topbar .social a:hover{background:#fff;color:var(--maroon-700)}
.topbar .social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---------- HEADER ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cream-200)}
.nav-wrap{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.brand{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex-shrink:0}
.brand-mark{width:60px;height:60px;flex:0 0 60px;border-radius:50%;background:var(--cream-100) center/cover no-repeat;border:2px solid var(--orange-400);box-shadow:0 4px 12px rgba(53,16,6,.12);overflow:hidden}
.brand-text{min-width:0}
.brand-text strong{display:block;font-size:17px;font-weight:700;color:var(--ink-900);letter-spacing:-.01em;line-height:1.15}
.brand-text b{display:block;font-size:11px;font-weight:600;color:var(--orange-500);letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.brand-text em{display:block;font-family:var(--font-display);font-style:italic;font-size:12px;color:var(--ink-500);margin-top:4px;line-height:1.3}
.menu-button{display:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--maroon-700);color:#fff;font-size:20px;place-items:center}

/* ---------- NAV ---------- */
.nav{display:flex;align-items:center;gap:var(--s-5)}
.nav > a,.nav-item > a{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-700);letter-spacing:.01em;padding:32px 0 12px;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;cursor:pointer;white-space:nowrap}
.nav > a:hover,.nav > a.active,.nav-item > a:hover,.nav-item > a.active{color:var(--orange-500);border-color:var(--orange-500)}
.nav-item{position:relative}
.nav-item .caret{display:inline-block;margin-left:6px;font-size:8px;transform:translateY(-2px);transition:transform .25s ease;opacity:.65;pointer-events:none}
.nav-item.open .caret{transform:translateY(-1px) rotate(180deg);opacity:1}
.nav-item .nav-menu{position:absolute;top:calc(100% - 4px);left:-20px;min-width:280px;padding:10px 0;background:#fff;border:1px solid rgba(232,221,209,.9);border-radius:14px;box-shadow:0 24px 48px rgba(53,16,6,.14),0 4px 12px rgba(53,16,6,.06);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,visibility .2s ease,transform .22s ease;pointer-events:none;z-index:200}
.nav-item.open > .nav-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-item .nav-menu::before{content:"";position:absolute;top:-7px;left:32px;width:12px;height:12px;background:#fff;border-top:1px solid rgba(232,221,209,.9);border-left:1px solid rgba(232,221,209,.9);transform:rotate(45deg);border-radius:2px 0 0 0}
.nav-item .nav-menu a{display:block;padding:11px 22px;font-size:14px;font-weight:500;line-height:1.4;color:var(--ink-700);text-transform:none;letter-spacing:0;border:0;white-space:nowrap;transition:background .15s ease,color .15s ease,padding-left .18s ease}
.nav-item .nav-menu a:hover{background:var(--cream-100);color:var(--orange-500);padding-left:26px}
.nav-item .nav-menu a:first-child{border-radius:10px 10px 0 0}
.nav-item .nav-menu a:last-child{border-radius:0 0 10px 10px}

/* ---------- HERO SLIDER ---------- */
.hero-slider{position:relative;width:100%;height:min(88vh,780px);min-height:580px;overflow:hidden;background:#1a0803;color:#fff;isolation:isolate}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 1.2s;z-index:1}
.hero-slide.active{opacity:1;visibility:visible;z-index:2}
.hero-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:#1a0803;transform:scale(1.08);transition:transform 8s cubic-bezier(.25,.8,.25,1);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-slide.active .hero-slide-bg{transform:scale(1)}
.hero-slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,4,0,.94) 0%,rgba(25,8,1,.86) 32%,rgba(35,10,2,.55) 58%,rgba(35,10,2,.15) 82%,transparent 100%),linear-gradient(180deg,rgba(15,4,0,.25) 0%,transparent 30%,transparent 70%,rgba(15,4,0,.35) 100%);pointer-events:none;z-index:1}
.hero-slide-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.hero-slide-content{max-width:680px;padding:80px 0;transform:translateY(16px);opacity:0;transition:opacity 1s ease .3s,transform 1s ease .3s}
.hero-slide.active .hero-slide-content{opacity:1;transform:translateY(0)}
.hero-slide-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-400);margin-bottom:22px;position:relative;padding-left:34px}
.hero-slide-kicker::before{content:"";position:absolute;left:0;top:50%;width:24px;height:2px;background:var(--orange-400);transform:translateY(-50%)}
.hero-slide h1{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5.2vw,72px);line-height:1.02;letter-spacing:-.035em;color:#fff;margin:0 0 22px;max-width:15ch;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.hero-slide h1 em{color:var(--orange-400);font-style:italic}
.hero-slide p{font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:rgba(255,255,255,.9);max-width:54ch;margin:0 0 34px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-slide-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.hero-slide-actions .button{padding:16px 28px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;border-radius:6px}
.hero-slide-actions .button.primary{background:#c81e1e;color:#fff;border:1px solid #c81e1e}
.hero-slide-actions .button.primary:hover{background:#a51818}
.hero-slide-actions .button.outline-light{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(8px)}
.hero-slide-actions .button.outline-light:hover{background:#fff;color:var(--maroon-700)}
.hero-slide-stats{display:flex;gap:52px;flex-wrap:wrap}
.hero-slide-stats div{min-width:84px}
.hero-slide-stats strong{display:block;font-size:clamp(28px,2.6vw,42px);font-weight:800;color:var(--orange-400);letter-spacing:-.03em;line-height:1;margin-bottom:8px}
.hero-slide-stats span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;font-size:20px;z-index:10;cursor:pointer;backdrop-filter:blur(10px);transition:all .25s ease;opacity:.85}
.hero-nav:hover{background:var(--orange-500);border-color:var(--orange-500);opacity:1}
.hero-prev{left:32px}
.hero-next{right:32px}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08);z-index:10;overflow:hidden}
.hero-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange-500),var(--orange-400))}
.hero-progress span.running{animation:heroProgressBar 7s linear forwards}
@keyframes heroProgressBar{from{width:0}to{width:100%}}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{background:var(--cream-50);padding:var(--s-10) 0 var(--s-8);text-align:center;border-bottom:1px solid var(--cream-200)}
.page-hero h1{max-width:20ch;margin:var(--s-3) auto var(--s-4)}
.page-hero .lead{max-width:62ch;margin:0 auto}

/* ---------- WELCOME ---------- */
.welcome{background:#fff;padding:var(--s-10) 0}
.welcome-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
.welcome h2{margin:var(--s-3) 0 var(--s-4)}
.welcome p{color:var(--ink-500);font-size:var(--t-lg);line-height:1.75;margin-bottom:var(--s-5)}
.welcome-photo{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-200);box-shadow:var(--sh-lift)}

/* ---------- PILLARS ---------- */
.pillars{background:var(--cream-100);padding:var(--s-10) 0}
.pillars-head{text-align:center;margin-bottom:var(--s-8)}
.pillars-head .divider{display:inline-flex;align-items:center;gap:var(--s-3);color:var(--orange-500);font-size:20px;margin-bottom:var(--s-3)}
.pillars-head .divider span{width:48px;height:1px;background:var(--orange-400)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);max-width:1080px;margin:0 auto}
.pillar-card{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:var(--s-7) var(--s-6);text-align:center;transition:all .22s ease}
.pillar-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--orange-400)}
.pillar-icon{width:64px;height:64px;margin:0 auto var(--s-5);border-radius:50%;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;font-size:26px}
.pillar-card h3{font-family:var(--font-body);font-size:var(--t-lg);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s-3)}
.pillar-card p{color:var(--ink-500);font-size:var(--t-sm);line-height:1.65;margin:0}

/* ---------- ACADEMIC HIGHLIGHT ---------- */
.academic-hl{background:var(--maroon-700);color:#fff;padding:var(--s-10) 0}
.academic-hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.academic-hl h2{color:#fff;margin:var(--s-3) 0 var(--s-4)}
.academic-hl .kicker{color:var(--orange-400)}
.academic-hl p{color:rgba(255,255,255,.8);font-size:var(--t-lg);line-height:1.75;margin-bottom:var(--s-5)}
.academic-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-6)}
.academic-stats div{padding:var(--s-5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md)}
.academic-stats strong{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--t-4xl);color:var(--orange-400);line-height:1;letter-spacing:-.02em}
.academic-stats span{display:block;margin-top:var(--s-2);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.academic-photo{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--maroon-800);box-shadow:var(--sh-lift)}

/* ---------- LIFE ---------- */
.life{background:var(--cream-50);padding:var(--s-10) 0}
.life-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.life-card{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--maroon-700);display:block;transition:all .25s ease}
.life-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.life-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.life-card:hover img{transform:scale(1.05)}
.life-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,5,1,.88));pointer-events:none}
.life-label{position:absolute;left:var(--s-5);right:var(--s-5);bottom:var(--s-5);z-index:2;color:#fff}
.life-label span{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-400);margin-bottom:4px}
.life-label strong{display:block;font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;line-height:1.2}

/* ---------- NEWS ---------- */
.news{background:#fff;padding:var(--s-10) 0}
.news-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-5);margin-bottom:var(--s-7);flex-wrap:wrap}
.news-head h2{margin:var(--s-3) 0 0}
.news-head a{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-500)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.news-card{display:flex;flex-direction:column;background:var(--cream-50);border:1px solid var(--cream-200);border-radius:var(--r-md);overflow:hidden;transition:all .22s ease}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--orange-400)}
.news-photo{aspect-ratio:16/10;background:var(--cream-200);overflow:hidden}
.news-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news-card:hover .news-photo img{transform:scale(1.04)}
.news-body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.news-date{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-500)}
.news-card h3{font-family:var(--font-body);font-size:var(--t-lg);font-weight:700;line-height:1.35;color:var(--ink-900)}
.news-card p{font-size:var(--t-sm);color:var(--ink-500);line-height:1.6;margin:0;flex:1}
.news-card .more{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon-700);margin-top:var(--s-3)}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--maroon-700);color:#fff;padding:var(--s-10) 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,10,.2),transparent 70%)}
.cta-band-inner{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s-8);align-items:center}
.cta-band h2{color:#fff;font-size:clamp(30px,4vw,var(--t-5xl));margin:var(--s-3) 0 var(--s-4)}
.cta-band .kicker{color:var(--orange-400)}
.cta-band p{color:rgba(255,255,255,.8);font-size:var(--t-lg);line-height:1.7;margin-bottom:var(--s-5);max-width:58ch}
.cta-band .actions{display:flex;gap:var(--s-3);flex-wrap:wrap}
.cta-badge{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);backdrop-filter:blur(8px)}
.cta-badge strong{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:700;color:#fff;line-height:1}
.cta-badge span{font-size:var(--t-sm);color:rgba(255,255,255,.75);line-height:1.5}

/* ---------- FOOTER ---------- */
.footer{background:var(--maroon-900);color:rgba(255,255,255,.75);font-size:var(--t-sm)}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr 1.3fr;gap:var(--s-7);padding:var(--s-9) 0 var(--s-7)}
.footer h3{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-400);margin-bottom:var(--s-4)}
.footer p{color:rgba(255,255,255,.6);font-size:var(--t-sm);line-height:1.7;margin-bottom:var(--s-3)}
.footer a{display:block;color:rgba(255,255,255,.75);padding:5px 0;font-size:var(--t-sm)}
.footer a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.footer-brand .brand-mark{width:48px;height:48px;flex-basis:48px}
.footer-brand strong{display:block;font-size:var(--t-md);font-weight:700;color:#fff}
.footer-brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-400);margin-top:3px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:var(--s-4) 0}
.footer-bottom .container{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-xs);color:rgba(255,255,255,.5)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  :root{--gutter:24px}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 20px;border-top:1px solid var(--cream-200);box-shadow:0 20px 40px rgba(53,16,6,.12);max-height:calc(100vh - 88px);overflow-y:auto}
  .nav.open{display:flex}
  .menu-button{display:grid}
  .nav > a,.nav-item > a{padding:14px 8px;border-bottom:1px solid var(--cream-200);border-left:0;border-right:0;border-top:0;font-size:15px;display:flex;justify-content:space-between;align-items:center;width:100%}
  .nav-item{display:block;width:100%;position:static}
  .nav-item .nav-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;background:transparent;border:0;border-left:2px solid var(--orange-500);border-radius:0;box-shadow:none;margin:0 0 8px 16px;padding:4px 0;display:none;pointer-events:auto}
  .nav-item.open > .nav-menu{display:block}
  .nav-item .nav-menu::before{display:none}
  .nav-item .nav-menu a{padding:10px 16px;font-size:13px;white-space:normal}
  .nav-item .nav-menu a:hover{padding-left:20px;background:transparent}
  .welcome-grid,.academic-hl-grid,.cta-band-inner{grid-template-columns:1fr;gap:var(--s-6)}
  .pillar-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .life-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
}
@media(max-width:640px){
  :root{--gutter:20px}
  .topbar .portals,.topbar .contacts a:not(:first-child){display:none}
  .topbar-inner{justify-content:center}
  .brand-text em{display:none}
  .brand-text strong{font-size:15px}
  .brand-text b{font-size:10px}
  .brand-mark{width:48px;height:48px;flex-basis:48px}
  .hero-slider{height:auto;min-height:0}
  .hero-slide{position:relative;inset:auto;display:none}
  .hero-slide.active{display:block;visibility:visible;opacity:1}
  .hero-slide-inner{min-height:540px}
  .hero-slide-content{padding:56px 0 72px;max-width:100%}
  .hero-slide-shade{background:linear-gradient(180deg,rgba(15,4,0,.4) 0%,rgba(15,4,0,.7) 40%,rgba(15,4,0,.94) 100%)}
  .hero-slide h1{font-size:clamp(30px,9vw,40px);max-width:100%}
  .hero-slide p{font-size:15px;margin-bottom:26px}
  .hero-slide-actions{flex-direction:column;margin-bottom:36px}
  .hero-slide-actions .button{width:100%;justify-content:center}
  .hero-slide-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .hero-slide-stats strong{font-size:26px}
  .hero-slide-stats span{font-size:9px;letter-spacing:.12em}
  .hero-nav{display:none}
  .page-hero{padding:56px 0 40px}
  .life-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding:48px 0 32px}
  .footer-bottom .container{flex-direction:column;gap:6px}
  .academic-stats{grid-template-columns:1fr 1fr}
  .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide,.hero-slide-bg,.hero-slide-content{transition:none}
  .hero-progress{display:none}
}
/* ============================================================
   PREMIUM PAGE STYLES (inner pages)
   ============================================================ */

/* Editorial two-column content */
.p-content{padding:var(--s-10) 0}
.p-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:start}
.p-grid h2{margin:var(--s-3) 0 var(--s-4)}
.p-grid p{color:var(--ink-500);font-size:var(--t-md);line-height:1.9;margin-bottom:var(--s-4)}
.p-grid ul{margin:var(--s-5) 0}
.p-grid ul li{
  padding:var(--s-3) 0 var(--s-3) var(--s-6);
  position:relative;font-size:var(--t-sm);
  color:var(--ink-700);border-bottom:1px solid var(--cream-200);
}
.p-grid ul li:last-child{border-bottom:0}
.p-grid ul li::before{content:"—";position:absolute;left:0;color:var(--orange-500);font-weight:700}
.p-side{position:sticky;top:120px;display:grid;gap:var(--s-4)}
.p-side-photo{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-200);box-shadow:var(--sh-lift)}
.p-side-photo img{width:100%;height:100%;object-fit:cover}
.p-side-card{padding:var(--s-6);background:var(--cream-50);border:1px solid var(--cream-300);border-radius:var(--r-md)}
.p-side-card h3{font-size:var(--t-md);font-weight:700;margin-bottom:var(--s-3);color:var(--ink-900)}
.p-side-card a{display:block;color:var(--orange-500);font-weight:600;font-size:var(--t-sm);margin-top:6px}

.p-pull{
  padding:var(--s-6) var(--s-6) var(--s-6) var(--s-7);
  background:var(--cream-50);
  border-left:4px solid var(--orange-500);
  border-radius:0 var(--r-md) var(--r-md) 0;
  margin:var(--s-6) 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--t-2xl);
  line-height:1.4;
  color:var(--maroon-700);
  letter-spacing:-.02em;
}
.p-pull-author{
  display:block;margin-top:var(--s-4);
  font-family:var(--font-body);font-style:normal;
  font-size:var(--t-sm);font-weight:700;color:var(--ink-900);
}
.p-cards{padding:var(--s-10) 0;background:var(--cream-100)}
.p-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-7)}
.p-card{
  padding:var(--s-6);
  background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-md);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--orange-400)}
.p-card i{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:var(--r-sm);background:var(--orange-100);
  color:var(--orange-600);font-size:24px;font-style:normal;
  margin-bottom:var(--s-4);
}
.p-card h3{font-size:var(--t-lg);font-weight:700;margin-bottom:var(--s-2);color:var(--ink-900)}
.p-card p{font-size:var(--t-sm);color:var(--ink-500);line-height:1.7;margin:0}

.p-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;
  padding:var(--s-10) 0;
}
.p-feature.reverse{grid-template-columns:1fr 1fr}
.p-feature.reverse > *:first-child{order:2}
.p-feature h2{margin:var(--s-3) 0 var(--s-4)}
.p-feature p{color:var(--ink-500);font-size:var(--t-md);line-height:1.85;margin-bottom:var(--s-4)}
.p-feature-photo{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-200);box-shadow:var(--sh-lift)}
.p-feature-photo img{width:100%;height:100%;object-fit:cover}

@media(max-width:980px){
  .p-grid,.p-feature{grid-template-columns:1fr;gap:var(--s-6)}
  .p-side{position:static}
  .p-cards-grid{grid-template-columns:1fr 1fr}
  .p-side-photo{aspect-ratio:16/10}
}
@media(max-width:640px){
  .p-cards-grid{grid-template-columns:1fr}
  .p-pull{font-size:18px;padding:22px 20px 22px 24px}
}
/* ============================================================
   PREMIUM PAGE STYLES (inner pages)
   ============================================================ */

/* Editorial two-column content */
.p-content{padding:var(--s-10) 0}
.p-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:start}
.p-grid h2{margin:var(--s-3) 0 var(--s-4)}
.p-grid p{color:var(--ink-500);font-size:var(--t-md);line-height:1.9;margin-bottom:var(--s-4)}
.p-grid ul{margin:var(--s-5) 0}
.p-grid ul li{
  padding:var(--s-3) 0 var(--s-3) var(--s-6);
  position:relative;font-size:var(--t-sm);
  color:var(--ink-700);border-bottom:1px solid var(--cream-200);
}
.p-grid ul li:last-child{border-bottom:0}
.p-grid ul li::before{content:"—";position:absolute;left:0;color:var(--orange-500);font-weight:700}
.p-side{position:sticky;top:120px;display:grid;gap:var(--s-4)}
.p-side-photo{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-200);box-shadow:var(--sh-lift)}
.p-side-photo img{width:100%;height:100%;object-fit:cover}
.p-side-card{padding:var(--s-6);background:var(--cream-50);border:1px solid var(--cream-300);border-radius:var(--r-md)}
.p-side-card h3{font-size:var(--t-md);font-weight:700;margin-bottom:var(--s-3);color:var(--ink-900)}
.p-side-card a{display:block;color:var(--orange-500);font-weight:600;font-size:var(--t-sm);margin-top:6px}

.p-pull{
  padding:var(--s-6) var(--s-6) var(--s-6) var(--s-7);
  background:var(--cream-50);
  border-left:4px solid var(--orange-500);
  border-radius:0 var(--r-md) var(--r-md) 0;
  margin:var(--s-6) 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--t-2xl);
  line-height:1.4;
  color:var(--maroon-700);
  letter-spacing:-.02em;
}
.p-pull-author{
  display:block;margin-top:var(--s-4);
  font-family:var(--font-body);font-style:normal;
  font-size:var(--t-sm);font-weight:700;color:var(--ink-900);
}
.p-cards{padding:var(--s-10) 0;background:var(--cream-100)}
.p-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-7)}
.p-card{
  padding:var(--s-6);
  background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-md);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--orange-400)}
.p-card i{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:var(--r-sm);background:var(--orange-100);
  color:var(--orange-600);font-size:24px;font-style:normal;
  margin-bottom:var(--s-4);
}
.p-card h3{font-size:var(--t-lg);font-weight:700;margin-bottom:var(--s-2);color:var(--ink-900)}
.p-card p{font-size:var(--t-sm);color:var(--ink-500);line-height:1.7;margin:0}

.p-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;
  padding:var(--s-10) 0;
}
.p-feature.reverse{grid-template-columns:1fr 1fr}
.p-feature.reverse > *:first-child{order:2}
.p-feature h2{margin:var(--s-3) 0 var(--s-4)}
.p-feature p{color:var(--ink-500);font-size:var(--t-md);line-height:1.85;margin-bottom:var(--s-4)}
.p-feature-photo{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-200);box-shadow:var(--sh-lift)}
.p-feature-photo img{width:100%;height:100%;object-fit:cover}

@media(max-width:980px){
  .p-grid,.p-feature{grid-template-columns:1fr;gap:var(--s-6)}
  .p-side{position:static}
  .p-cards-grid{grid-template-columns:1fr 1fr}
  .p-side-photo{aspect-ratio:16/10}
}
@media(max-width:640px){
  .p-cards-grid{grid-template-columns:1fr}
  .p-pull{font-size:18px;padding:22px 20px 22px 24px}
}
/* ============================================================
   INNER PAGES — full hero + compact content
   ============================================================ */

/* ---- HERO: restore to premium full height ---- */

/* ---- CONTENT: tight, editorial, mature ---- */
.p-content{padding:var(--s-9) 0}
.p-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--s-7);
  align-items:start;
}
.p-grid h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:var(--s-6) 0 var(--s-3);
}
.p-grid h2:first-child{margin-top:0}
.p-grid h2[style]{margin-top:var(--s-6) !important}
.p-grid p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-500);
  margin-bottom:var(--s-3);
  max-width:66ch;
}
.p-grid p strong{color:var(--ink-900)}
.p-grid ul{margin:var(--s-4) 0}
.p-grid ul li{
  padding:var(--s-2) 0 var(--s-2) var(--s-5);
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-700);
  border-bottom:1px solid var(--cream-200);
  position:relative;
}
.p-grid ul li:last-child{border-bottom:0}
.p-grid ul li::before{
  content:"—";
  position:absolute;
  left:0;top:var(--s-2);
  color:var(--orange-500);
  font-weight:700;
}
.p-grid ul li strong{color:var(--ink-900);font-weight:700}

/* Pull quote — compact */
.p-pull{
  padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  background:var(--cream-50);
  border-left:4px solid var(--orange-500);
  border-radius:0 var(--r-md) var(--r-md) 0;
  margin:var(--s-5) 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--t-xl);
  line-height:1.45;
  color:var(--maroon-700);
  letter-spacing:-.015em;
}
.p-pull-author{
  display:block;
  margin-top:var(--s-3);
  font-family:var(--font-body);
  font-style:normal;
  font-size:var(--t-xs);
  font-weight:700;
  color:var(--ink-900);
}
/* Sidebar */
.p-side{position:sticky;top:110px;display:grid;gap:var(--s-3)}
.p-side-photo{
  aspect-ratio:3/4;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--cream-200);
  box-shadow:var(--sh-lift);
}
.p-side-photo img{width:100%;height:100%;object-fit:cover}
.p-side-card{
  padding:var(--s-5);
  background:var(--cream-50);
  border:1px solid var(--cream-300);
  border-radius:var(--r-md);
}
.p-side-card h3{
  font-size:var(--t-md);font-weight:700;
  margin-bottom:var(--s-3);color:var(--ink-900);
}
.p-side-card a{
  display:block;
  color:var(--orange-500);
  font-weight:600;
  font-size:var(--t-sm);
  margin-top:6px;
}
/* Mobile */
@media(max-width:980px){
  .p-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .p-side{position:static}
  .p-side-photo{aspect-ratio:16/10}
  .p-content{padding:var(--s-8) 0}
}
@media(max-width:640px){
  .p-pull{font-size:17px;padding:20px 20px 20px 22px}
}
/* ============================================================
   SECOND SECTION HEIGHT CUT — dropdown pages
   Tighter grid, tighter type, less air. Same content.
   ============================================================ */

.p-content{
  padding:56px 0 !important;
}
.p-grid{
  gap:40px !important;
  grid-template-columns:1.25fr .75fr !important;
}
.p-grid h2{
  font-size:clamp(19px,2vw,24px) !important;
  margin:28px 0 10px !important;
  line-height:1.2 !important;
}
.p-grid h2:first-child{margin-top:0 !important}
.p-grid h2[style]{margin-top:28px !important}

.p-grid p{
  font-size:14px !important;
  line-height:1.65 !important;
  margin-bottom:10px !important;
  max-width:70ch;
}
.p-grid ul{margin:14px 0 !important}
.p-grid ul li{
  padding:6px 0 6px 20px !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
}
.p-pull{
  padding:18px 20px 18px 22px !important;
  margin:20px 0 !important;
  font-size:17px !important;
  line-height:1.4 !important;
}
.p-pull-author{
  margin-top:10px !important;
  font-size:11px !important;
}
.p-side{top:96px !important;gap:14px !important}
.p-side-photo{aspect-ratio:1/1 !important;border-radius:10px !important}
.p-side-card{padding:18px !important}

/* Mobile — same idea */
@media(max-width:980px){
  .p-content{padding:40px 0 !important}
  .p-grid{gap:28px !important}
  .p-grid h2{font-size:18px !important;margin:22px 0 8px !important}
  .p-grid p{font-size:13.5px !important;line-height:1.6 !important}
  .p-grid ul li{padding:5px 0 5px 18px !important;font-size:13px !important}
  .p-side-photo{aspect-ratio:16/10 !important}
  .p-pull{font-size:15px !important;padding:14px 16px 14px 18px !important}
}
/* ============================================================
   SIDEBAR IMAGE — full column height, matches text weight
   ============================================================ */

.p-grid{
  grid-template-columns:1.2fr .8fr !important;
  gap:56px !important;
  align-items:stretch !important;
}
.p-side{
  position:sticky !important;
  top:96px !important;
  display:flex !important;
  flex-direction:column;
  gap:16px !important;
  height:100%;
  align-self:stretch;
}
.p-side-photo{
  flex:1 1 auto !important;
  aspect-ratio:auto !important;
  min-height:520px;
  max-height:100%;
  border-radius:14px !important;
  overflow:hidden;
  background:var(--cream-200);
  box-shadow:0 24px 48px rgba(53,16,6,.12);
  position:relative;
}
.p-side-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* If there's a side card too, it sticks below the image naturally */
.p-side-card{
  padding:20px !important;
  flex:0 0 auto;
}
/* Tablets: stack image below, generous full-width */
@media(max-width:980px){
  .p-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
    align-items:start !important;
}
  .p-side{
    position:static !important;
    height:auto;
}
  .p-side-photo{
    flex:0 0 auto;
    aspect-ratio:16/10 !important;
    min-height:0;
    max-height:none;
}
}
/* Phones: even bigger, edge to edge */
@media(max-width:640px){
  .p-side-photo{
    aspect-ratio:4/3 !important;
    border-radius:10px !important;
}
}
/* ============================================================
   ACADEMIC HIGHLIGHT + similar 2-column sections
   Image must stretch to full column height
   ============================================================ */

.academic-hl-grid{
  align-items:stretch !important;
  gap:56px !important;
}
.academic-hl-grid > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.academic-photo{
  aspect-ratio:auto !important;
  height:100% !important;
  min-height:100%;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--maroon-800);
  box-shadow:var(--sh-lift);
  position:relative;
}
.academic-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Same rule for the welcome 2-col grid */
.welcome-grid{
  align-items:stretch !important;
}
.welcome-grid > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.welcome-photo{
  aspect-ratio:auto !important;
  height:100% !important;
  min-height:100%;
  position:relative;
}
.welcome-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Mobile: restore natural aspect */
@media(max-width:980px){
  .academic-photo,
  .welcome-photo{
    aspect-ratio:16/10 !important;
    height:auto !important;
    min-height:0;
}
  .academic-photo img,
  .welcome-photo img{
    position:static;
    width:100%;
    height:100%;
}
}
/* ============================================================
   UNIVERSAL IMAGE COVER — site-wide, non-negotiable
   Applies to every <img>, every background image container,
   every sidebar photo, every gallery tile, every CMS-uploaded
   or admin-replaced image. No stretch. No letterbox. Cover.
   ============================================================ */

/* 1. Every content image fills its box */
img{
  object-fit:cover !important;
  object-position:center !important;
  display:block;
  max-width:100%;
}
/* 2. Every media container clips cleanly */
.hero-slide-bg,
.photo-strip-inner,
.welcome-photo,
.academic-photo,
.life-image,
.life-card,
.news-photo,
.article-photo,
.results-photo,
.facility-photo,
.facility-card .facility-photo,
.life-intro-photo,
.boarding-photo,
.gallery-item,
.gallery-story,
.story-photo,
.preview-photo,
.student-photo,
.student-photo-main,
.student-photo-boarding,
.leader-photo,
.p-side-photo,
.about-campus,
.about-campus > img,
.vision-grid aside img,
.leader-card .leader-photo,
.cms-image-target,
[data-cms-img]{
  overflow:hidden !important;
}
/* 3. Force every image inside those containers to fill them */
.hero-slide-bg img,
.photo-strip-inner img,
.welcome-photo img,
.academic-photo img,
.life-image img,
.life-image > img,
.life-card img,
.news-photo img,
.article-photo img,
.results-photo img,
.facility-photo img,
.life-intro-photo img,
.boarding-photo img,
.gallery-item img,
.gallery-story img,
.story-photo img,
.preview-photo img,
.student-photo img,
.student-photo-main img,
.student-photo-boarding img,
.leader-photo img,
.p-side-photo img,
.about-campus > img,
.vision-grid aside img,
.leader-card .leader-photo img,
[data-cms-img] img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}
/* 4. CMS user-replaced images — cover by default; only "contain" overrides */
.cms-has-user-image[data-cms-fit="cover"],
img.cms-has-user-image[data-cms-fit="cover"]{
  object-fit:cover !important;
  object-position:center !important;
}
.cms-has-user-image[data-cms-fit="contain"],
img.cms-has-user-image[data-cms-fit="contain"]{
  object-fit:contain !important;
  object-position:center !important;
}
/* 5. Lightbox — full image visible, no crop */
.lightbox img{
  object-fit:contain !important;
  width:auto !important;
  height:auto !important;
  max-width:min(1200px,90vw);
  max-height:85vh;
}
/* 6. Logo / crest — contain so the badge never crops */
.brand-mark,
.footer-brand .brand-mark,
.mini-crest{
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
/* 7. Background-image containers — cover, centered, high quality */
.hero-slide-bg,
.photo-strip-inner,
.portrait,
.student-photo,
.story-photo,
.preview-photo,
.activity-sports,
.activity-awards,
.activity-science,
.gallery-one,.gallery-two,.gallery-three,
.gallery-four,.gallery-five,.gallery-six,
.hero-building{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
/* 8. Prevent blurry upscaling artifacts */
img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* 9. Fallback for missing images — subtle pattern instead of blank */
img:not([src]),
img[src=""]{
  background:linear-gradient(135deg,var(--cream-200),var(--cream-300));
  min-height:80px;
}
/* ============================================================
   P-GRID CONTENT — editorial, structured, premium
   Replaces the flat "text on text" look with real rhythm
   ============================================================ */

.p-grid > div:first-child{
  display:flex;
  flex-direction:column;
  gap:0;
}
/* Lead paragraph — larger, more inviting than the rest */
.p-grid > div:first-child > p:first-of-type{
  font-size:16px !important;
  line-height:1.7 !important;
  color:var(--ink-700) !important;
  margin-bottom:20px !important;
  padding-bottom:20px;
  border-bottom:1px solid var(--cream-200);
}
/* Section heading — with the small orange rule above */
.p-grid h2{
  position:relative;
  padding-top:18px;
  margin-top:32px !important;
}
.p-grid h2::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:24px;height:2px;
  background:var(--orange-500);
  border-radius:2px;
}
.p-grid h2:first-child{
  margin-top:0 !important;
  padding-top:0;
}
.p-grid h2:first-child::before{display:none}

/* Lists — turn each item into a row card */
.p-grid ul{
  display:grid !important;
  gap:8px !important;
  margin:18px 0 24px !important;
  padding:0 !important;
}
.p-grid ul li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px !important;
  background:var(--cream-50);
  border:1px solid var(--cream-200);
  border-radius:10px;
  font-size:13.5px !important;
  line-height:1.55 !important;
  color:var(--ink-700);
  transition:all .18s ease;
}
.p-grid ul li::before{
  content:"";
  position:static !important;
  left:auto !important;
  top:auto !important;
  flex:0 0 6px;
  width:6px;
  height:6px;
  margin-top:7px;
  border-radius:50%;
  background:var(--orange-500);
  font-weight:normal;
}
.p-grid ul li:hover{
  border-color:var(--orange-400);
  background:#fff;
  transform:translateX(3px);
}
.p-grid ul li strong{
  color:var(--ink-900);
  font-weight:700;
}
/* Pull quote — bigger, quieter, more editorial */
.p-pull{
  position:relative;
  padding:28px 32px !important;
  background:linear-gradient(135deg,#fdfaf7,#f4ece3) !important;
  border-left:5px solid var(--orange-500) !important;
  border-radius:0 14px 14px 0 !important;
  margin:28px 0 !important;
  font-size:20px !important;
  line-height:1.4 !important;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--maroon-700) !important;
  letter-spacing:-.01em;
}
.p-pull::before{
  content:"\201C";
  position:absolute;
  top:-8px;left:14px;
  font-family:Georgia,serif;
  font-size:64px;
  line-height:1;
  color:var(--orange-500);
  opacity:.15;
  font-style:normal;
}
.p-pull-author{
  display:block;
  margin-top:16px !important;
  font-family:var(--font-body) !important;
  font-style:normal !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-900) !important;
  opacity:.7;
}
/* Inline bold text stays clean */
.p-grid p strong{color:var(--ink-900);font-weight:700}

/* If a paragraph directly follows a heading, tighten spacing */
.p-grid h2 + p{margin-top:0 !important}

/* Mobile adjustments */
@media(max-width:980px){
  .p-grid ul li{
    padding:12px 14px !important;
    font-size:13px !important;
}
  .p-pull{
    font-size:17px !important;
    padding:22px 22px !important;
    border-radius:0 12px 12px 0 !important;
}
}
/* ============================================================
   EVENT BUTTON LIST — rounded long buttons + modal
   ============================================================ */

.ev-list{
  display:grid;
  gap:12px;
  margin:22px 0 32px;
}
.ev-btn{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:16px 22px;
  background:linear-gradient(135deg,#fffaf5,#fdf4ec);
  border:1px solid #f0e0d1;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:600;
  color:var(--maroon-700);
  text-align:left;
  cursor:pointer;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 6px rgba(53,16,6,.04);
  position:relative;
  overflow:hidden;
}
.ev-btn::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:0;
  background:var(--orange-500);
  transition:width .3s ease;
  z-index:0;
}
.ev-btn > *{position:relative;z-index:1}
.ev-btn:hover{
  border-color:var(--orange-500);
  background:var(--orange-500);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(242,106,10,.25);
}
.ev-btn:hover .ev-badge{background:#fff;color:var(--orange-500)}
.ev-btn:hover .ev-arrow{color:#fff;transform:translateX(4px)}

.ev-badge{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  flex:0 0 38px;
  border-radius:50%;
  background:var(--orange-100);
  color:var(--orange-600);
  font-size:16px;
  font-weight:700;
  transition:all .22s ease;
}
.ev-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ev-title{
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  color:inherit;
}
.ev-sub{
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink-500);
  transition:color .22s ease;
}
.ev-btn:hover .ev-sub{color:rgba(255,255,255,.85)}
.ev-arrow{
  flex:0 0 auto;
  font-size:18px;
  color:var(--ink-300);
  transition:all .22s ease;
}
/* ---------- MODAL ---------- */
.ev-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(20,5,1,.72);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.ev-modal.open{opacity:1;visibility:visible}
.ev-modal-card{
  width:min(560px,100%);
  max-height:85vh;
  overflow-y:auto;
  padding:36px 36px 32px;
  background:#fff;
  border-radius:22px;
  box-shadow:0 40px 90px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.97);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.ev-modal.open .ev-modal-card{transform:translateY(0) scale(1)}

.ev-modal-close{
  position:absolute;
  top:18px;right:18px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--cream-100);
  color:var(--ink-700);
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
  border:0;
}
.ev-modal-close:hover{background:var(--orange-500);color:#fff}

.ev-modal-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--orange-100);
  color:var(--orange-600);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.ev-modal-badge::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--orange-500);
}
.ev-modal h3{
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ink-900);
  margin:0 0 14px;
}
.ev-modal p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-500);
  margin-bottom:14px;
}
.ev-modal p:last-child{margin-bottom:0}
.ev-modal-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:20px 0;
  padding:16px;
  background:var(--cream-50);
  border-radius:12px;
  border:1px solid var(--cream-200);
}
.ev-modal-meta div{min-width:100px}
.ev-modal-meta strong{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--ink-900);
}
.ev-modal-meta span{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange-500);
  margin-bottom:2px;
}
/* Mobile */
@media(max-width:640px){
  .ev-btn{padding:14px 16px;gap:12px;border-radius:16px}
  .ev-badge{width:34px;height:34px;flex-basis:34px;font-size:14px}
  .ev-title{font-size:14px}
  .ev-sub{font-size:11.5px}
  .ev-modal{padding:12px}
  .ev-modal-card{padding:26px 22px;border-radius:18px}
}
/* ============================================================
   INNER PAGE HERO — split layout, editorial, dark
   ============================================================ */


/* Right-side image */

/* Mobile */
@media(max-width:980px){
}
/* ============================================================
   HERO IMAGE — smaller, balanced, right side
   ============================================================ */





/* Slightly tighter text side to balance */

/* Tablet/mobile */
@media(max-width:980px){
}
@media(max-width:640px){
}
/* ============================================================
   INNER PAGE HERO — full-bleed slideshow, floating text
   ============================================================ */


/* Slide layers */

/* Overlay for text legibility */

/* Container — floats over the slides */






/* Kill any leftover image column styling */

/* Progress bar at bottom */
@keyframes pHeroProgress{from{width:0}to{width:100%}}

/* Mobile */
@media(max-width:980px){
}
@media(max-width:640px){
}
/* ============================================================
   HERO — strong text overlay + designed circle with image
   ============================================================ */

/* 1. Kill the old decorative glow circle */

/* 2. Slide layers stay under everything */

/* 3. Layout — text left, big framed photo on right */


/* 4. Text — bulletproof legibility */




/* 5. Big framed photo — the "circle" redesigned */



/* 6. Small floating badge on the circle — optional flourish */
@keyframes pHeroPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.4)}
}
/* 7. Responsive */
@media(max-width:980px){
}
@media(max-width:640px){
}
/* ============================================================
   HERO — text in glass card, circle uses 3.jpeg everywhere
   ============================================================ */

/* Strengthen the photo-side gradient so the card floats over soft dark */

/* Glass card wrapping all text */

/* Text side stays as-is */

/* Tighter, cleaner typography inside the card */




/* Circular image — refined, no tilt, cleaner shadow */

@keyframes pHeroPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.4)}
}
/* Responsive */
@media(max-width:980px){
}
@media(max-width:640px){
}
/* ============================================================
   HERO CARD — professional, editorial, no glassmorphism cliché
   ============================================================ */




/* Solid white headlines — no italic clutter on em */



/* Circular frame — keep but slightly refined */

@media(max-width:640px){
}
/* ============================================================
   HERO — light blur on the text zone + very light gradient
   Photo stays visible; text becomes readable without heavy tint
   ============================================================ */

/* Remove the previous heavy left-to-right gradient */

/* NEW — blurred backdrop only on the left half */

/* Slides under everything */

/* Container above blur */


/* No card — text sits directly on the blurred zone */

/* Typography — clean, no italics, no flourishes */




/* Circular frame — refined */

/* Mobile — blur the whole hero behind text */
@media(max-width:980px){
}
@media(max-width:640px){
}
/* ============================================================
   INNER PAGE HERO — clean rebuild
   Full-bleed slideshow + soft blur behind text + light gradient
   ============================================================ */

.p-hero{
  position:relative;
  padding:0;
  min-height:540px;
  overflow:hidden;
  background:#1a0803;
  color:#fff;
  isolation:isolate;
}

/* Slide layers */
.p-hero-slides{
  position:absolute;
  inset:0;
  z-index:0;
}
.p-hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1), visibility 1.4s;
  transform:scale(1.04);
}
.p-hero-slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1), visibility 1.4s, transform 8s ease-out;
}

/* Soft blur panel behind the text on the left half */
.p-hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:58%;
  z-index:1;
  pointer-events:none;
  backdrop-filter:blur(22px) saturate(1.05);
  -webkit-backdrop-filter:blur(22px) saturate(1.05);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}

/* Very light gradient — just enough to settle the photo */
.p-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(15,4,0,.42) 0%,
    rgba(20,6,1,.22) 40%,
    rgba(25,7,1,.08) 70%,
    transparent 100%);
}

/* Container */
.p-hero-inner{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:56px;
  align-items:center;
  width:min(1200px, calc(100% - 64px));
  margin:0 auto;
  padding:80px 0 72px;
  min-height:540px;
}

.p-hero-text{
  display:flex;
  flex-direction:column;
  max-width:600px;
}

/* Text — clean, professional, no italics, no card */
.p-hero .kicker{
  color:var(--orange-400);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:20px;
  position:relative;
  padding-left:36px;
}
.p-hero .kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:26px;
  height:2px;
  background:var(--orange-400);
  transform:translateY(-50%);
}

.p-hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(38px, 4.6vw, 62px);
  line-height:1.03;
  letter-spacing:-.032em;
  color:#fff;
  margin:0 0 24px;
  max-width:14ch;
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 4px 22px rgba(0,0,0,.55);
}
.p-hero h1 em{
  color:var(--orange-400);
  font-style:normal;
  font-weight:700;
}

.p-hero p{
  color:rgba(255,255,255,.94);
  font-size:16px;
  line-height:1.7;
  max-width:54ch;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.p-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:44px;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.22);
}
.p-hero-meta div{min-width:100px}
.p-hero-meta strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  color:#fff;
  line-height:1;
  letter-spacing:-.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.p-hero-meta span{
  display:block;
  margin-top:8px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* Circular frame on the right */
.p-hero-frame{
  position:relative;
  aspect-ratio:1/1;
  max-width:400px;
  margin-left:auto;
  border-radius:50%;
  overflow:hidden;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.10),
    0 0 0 7px rgba(242,106,10,.45),
    0 40px 80px rgba(0,0,0,.5);
  isolation:isolate;
}
.p-hero-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.p-hero-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(180deg, transparent 60%, rgba(15,4,0,.4) 100%);
  pointer-events:none;
}

.p-hero-frame-badge{
  position:absolute;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
  padding:8px 16px;
  background:rgba(15,4,0,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  z-index:3;
}
.p-hero-frame-badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange-400);
  margin-right:8px;
  vertical-align:middle;
  animation:pHeroPulse 1.6s ease-in-out infinite;
}
@keyframes pHeroPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.4)}
}

/* Progress bar at the very bottom */
.p-hero-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  z-index:4;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.p-hero-progress span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--orange-500), var(--orange-400));
}
.p-hero-progress span.running{
  animation:pHeroProgress 6s linear forwards;
}
@keyframes pHeroProgress{from{width:0}to{width:100%}}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .p-hero::before{
    width:100%;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    backdrop-filter:blur(18px) saturate(1.05);
    -webkit-backdrop-filter:blur(18px) saturate(1.05);
  }
  .p-hero-inner{
    grid-template-columns:1fr;
    gap:40px;
    padding:64px 0 56px;
    min-height:0;
  }
  .p-hero-text{max-width:100%}
  .p-hero h1{font-size:clamp(30px, 7vw, 44px)}
  .p-hero-frame{
    max-width:320px;
    margin:0 auto;
  }
}

@media(max-width:640px){
  .p-hero-inner{
    padding:52px 0 44px;
    gap:32px;
    width:min(100% - 40px, 1200px);
  }
  .p-hero h1{font-size:clamp(28px, 8vw, 38px)}
  .p-hero p{font-size:15px}
  .p-hero-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:24px;
    padding-top:20px;
  }
  .p-hero-meta strong{font-size:20px}
  .p-hero-frame{max-width:240px}
}

/* ============================================================
   FONT SWAP — Playfair Display → Fraunces
   Only typography changes. Layout, images, colors untouched.
   ============================================================ */

:root{
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
}

/* Fraunces reads best with slightly tighter tracking and
   variable optical sizing tuned for display use */
h1, h2, h3 {
  font-family:"Fraunces", Georgia, serif !important;
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}

h1{
  font-weight:700 !important;
  letter-spacing:-.035em !important;
  line-height:1.02 !important;
}

h2{
  font-weight:700 !important;
  letter-spacing:-.028em !important;
  line-height:1.08 !important;
}

/* Italic accent still uses Fraunces italic */
h1 em, h2 em, h3 em{
  font-family:"Fraunces", Georgia, serif !important;
  font-style:italic !important;
  font-weight:700 !important;
}

/* Display font on the specific headline slots that use it */
.hero-slide h1,
.p-hero h1,
.hero-text h1,
.page-hero h1,
.intro-copy h2,
.section-heading h2,
.news-head h2,
.center-title,
.welcome h2,
.academic-hl h2,
.cta-band h2,
.footer-brand h2,
.footer-brand strong,
.about-hero h1,
.vision-card h3,
.vision-card .vc-num,
.pull-quote,
.p-pull,
.p-hero-meta strong,
.stats-grid strong,
.about-campus figcaption strong {
  font-family:"Fraunces", Georgia, serif !important;
}

/* Keep body font untouched (Inter everywhere else) */
body, p, a, button, input, select, textarea,
.nav a, .nav-menu a, .brand-text strong, .brand-text b,
.ev-title, .ev-sub, .news-card h3, .life-label strong,
.kicker, .eyebrow, .news-date, .ev-badge {
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* ============================================================
   MOBILE — single column images everywhere
   ============================================================ */

@media(max-width:640px){

  /* ---------- Gallery masonry → single column ---------- */
  .gallery-masonry,
  .gallery-preview,
  .gallery-story-grid,
  .gallery-grid,
  .full-gallery .gallery-story-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .gallery-item,
  .gallery-story,
  .gallery-preview article{
    aspect-ratio:4/3 !important;
    border-radius:12px !important;
  }

  .gallery-item img,
  .gallery-story img,
  .gallery-preview img,
  .story-photo{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Remove any row-span that breaks single column */
  .gallery-item.tall,
  .gallery-story.tall{
    grid-row:auto !important;
    aspect-ratio:4/3 !important;
  }

  /* ---------- Life grid (homepage) → single column ---------- */
  .life-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .life-card,
  .life-image{
    aspect-ratio:4/3 !important;
    height:auto !important;
  }

  /* ---------- News grid → single column ---------- */
  .news-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .news-photo{aspect-ratio:16/10 !important}

  /* ---------- Facility grid → single column ---------- */
  .facility-grid,
  .academic-grid,
  .support-grid,
  .activity-grid,
  .admission-benefits,
  .process-grid,
  .about-values-grid,
  .values-grid,
  .leader-grid,
  .subject-grid,
  .club-grid,
  .carmelite-school-grid,
  .org-branches,
  .vision-grid,
  .vision-cards{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  /* ---------- Sidebar images on content pages ---------- */
  .p-side-photo,
  .p-hero-frame,
  .about-campus > img,
  .article-photo,
  .results-photo,
  .life-intro-photo,
  .boarding-photo,
  .welcome-photo,
  .academic-photo{
    width:100% !important;
    aspect-ratio:4/3 !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 !important;
  }

  /* Slider */
  .student-slider{
    height:auto !important;
    aspect-ratio:4/3 !important;
  }

  /* Preview strip on gallery */
  .preview-photo,
  .story-photo{
    height:auto !important;
    aspect-ratio:4/3 !important;
  }
}

/* Also collapse on tablets when the layout feels cramped */
@media(max-width:520px){
  .gallery-masonry,
  .gallery-preview,
  .gallery-story-grid,
  .gallery-grid{
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   SOCIAL ICONS — colorful brand tiles
   ============================================================ */

.social-block{
  margin-top:28px;
  padding:24px;
  background:var(--cream-50);
  border:1px solid var(--cream-300);
  border-radius:14px;
}
.social-block h3{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-500);
  margin-bottom:16px;
}
.social-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.social-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  aspect-ratio:1;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  overflow:hidden;
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
  box-shadow:0 6px 16px rgba(53,16,6,.12);
}
.social-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 100%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.social-tile:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 16px 32px rgba(53,16,6,.22);
  color:#fff;
}
.social-tile:hover::before{opacity:1}

.social-tile svg{
  width:26px;
  height:26px;
  fill:currentColor;
  stroke:none;
  display:block;
  position:relative;
  z-index:1;
}
.social-tile span{
  position:relative;
  z-index:1;
}

/* Brand colors */
.social-tile.instagram{
  background:linear-gradient(45deg,
    #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-tile.facebook{background:#1877F2}
.social-tile.twitter{background:#000}
.social-tile.youtube{background:#FF0000}
.social-tile.whatsapp{background:#25D366}

/* On dark bg (footer) — tiles stay colorful but sit tighter */
.footer-social-tiles{
  display:flex;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.footer-social-tiles a{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  transition:transform .2s ease;
}
.footer-social-tiles a:hover{transform:translateY(-3px) scale(1.06);color:#fff}
.footer-social-tiles svg{width:18px;height:18px;fill:currentColor}
.footer-social-tiles a.instagram{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888)}
.footer-social-tiles a.facebook{background:#1877F2}
.footer-social-tiles a.twitter{background:#000}
.footer-social-tiles a.youtube{background:#FF0000}
.footer-social-tiles a.whatsapp{background:#25D366}

/* Mobile — 2 columns */
@media(max-width:640px){
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .social-tile{aspect-ratio:auto;padding:18px 10px;gap:10px}
  .social-tile svg{width:28px;height:28px}
}

/* ============================================================
   FORM SOCIAL — inline row below the Send button
   ============================================================ */

.form-social{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--cream-200);
  flex-wrap:wrap;
}
.form-social-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-500);
  flex:0 0 auto;
}
.form-social-tiles{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Reuse .social-tile but shrink for inline use */
.form-social-tiles .social-tile{
  width:42px;
  height:42px;
  aspect-ratio:auto;
  border-radius:12px;
  display:grid;
  place-items:center;
  gap:0;
  font-size:0;
  box-shadow:0 4px 12px rgba(53,16,6,.12);
}
.form-social-tiles .social-tile svg{
  width:20px;
  height:20px;
}
.form-social-tiles .social-tile span{display:none}

.form-social-tiles .social-tile:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 22px rgba(53,16,6,.22);
}

@media(max-width:640px){
  .form-social{flex-direction:column;align-items:flex-start;gap:12px}
  .form-social-tiles .social-tile{width:40px;height:40px}
}

/* ============================================================
   SOCIAL SECTION — standalone, full-width below contact form
   ============================================================ */

.social-section{
  padding:72px 0;
  background:var(--cream-50);
  border-top:1px solid var(--cream-200);
}
.social-section-inner{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;
  align-items:center;
}
.social-section-head .kicker{margin-bottom:14px}
.social-section-head h2{
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,38px);
  line-height:1.15;
  letter-spacing:-.025em;
  color:var(--ink-900);
  margin:0 0 14px;
}
.social-section-head p{
  color:var(--ink-500);
  font-size:15px;
  line-height:1.65;
  max-width:38ch;
  margin:0;
}

/* Cards */
.social-grid-wide{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.social-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:16px;
  color:#fff;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
  box-shadow:0 10px 24px rgba(53,16,6,.15);
  position:relative;
  overflow:hidden;
}
.social-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 100%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.social-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(53,16,6,.28);
  color:#fff;
}
.social-card:hover::before{opacity:1}
.social-card:hover .social-card-arrow{transform:translateX(4px)}

.social-card-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:12px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.social-card-icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
  display:block;
}
.social-card-text{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
}
.social-card-text strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:#fff;
  line-height:1.2;
  margin-bottom:2px;
}
.social-card-text small{
  display:block;
  font-size:11.5px;
  color:rgba(255,255,255,.85);
  font-weight:500;
  line-height:1.3;
}
.social-card-arrow{
  position:relative;
  z-index:1;
  font-size:18px;
  color:rgba(255,255,255,.85);
  transition:transform .22s ease;
}

/* Brand gradients */
.social-card.instagram{
  background:linear-gradient(45deg,
    #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-card.facebook{background:linear-gradient(135deg,#1877F2,#0d5eb8)}
.social-card.twitter{background:linear-gradient(135deg,#1a1a1a,#000)}
.social-card.youtube{background:linear-gradient(135deg,#FF0000,#b30000)}

/* Mobile */
@media(max-width:980px){
  .social-section{padding:52px 0}
  .social-section-inner{grid-template-columns:1fr;gap:32px}
  .social-section-head p{max-width:100%}
}
@media(max-width:640px){
  .social-grid-wide{grid-template-columns:1fr}
  .social-card{padding:16px 18px}
  .social-card-icon{width:40px;height:40px;flex-basis:40px}
  .social-card-icon svg{width:20px;height:20px}
}

/* ============================================================
   SOCIAL SECTION — compact horizontal circular icons
   ============================================================ */

.social-section{
  padding:56px 0;
  background:var(--cream-50);
  border-top:1px solid var(--cream-200);
}

.social-icons-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}

.social-icons-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-500);
}

.social-icons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.social-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
  box-shadow:0 8px 20px rgba(53,16,6,.15);
  position:relative;
  overflow:hidden;
}
.social-icon svg{
  width:24px;
  height:24px;
  fill:currentColor;
  display:block;
  position:relative;
  z-index:1;
}
.social-icon::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 100%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.social-icon:hover{
  transform:translateY(-5px) scale(1.06);
  color:#fff;
}
.social-icon:hover::before{opacity:1}

/* Brand backgrounds */
.social-icon.instagram{
  background:linear-gradient(45deg,
    #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow:0 8px 20px rgba(220,39,67,.3);
}
.social-icon.instagram:hover{
  box-shadow:0 14px 30px rgba(220,39,67,.45);
}
.social-icon.facebook{
  background:#1877F2;
  box-shadow:0 8px 20px rgba(24,119,242,.3);
}
.social-icon.facebook:hover{
  box-shadow:0 14px 30px rgba(24,119,242,.45);
}
.social-icon.twitter{
  background:#000;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.social-icon.twitter:hover{
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.social-icon.youtube{
  background:#FF0000;
  box-shadow:0 8px 20px rgba(255,0,0,.3);
}
.social-icon.youtube:hover{
  box-shadow:0 14px 30px rgba(255,0,0,.5);
}

/* Mobile */
@media(max-width:640px){
  .social-section{padding:40px 0}
  .social-icon{width:48px;height:48px}
  .social-icon svg{width:20px;height:20px}
  .social-icons{gap:12px}
}

/* ============================================================
   LEADER CARDS — cap image size, keep 4 across on desktop
   ============================================================ */

.leader-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:24px !important;
  margin-top:40px !important;
  max-width:1100px !important;
  margin-inline:auto !important;
}

.leader-card{
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--cream-300);
  box-shadow:0 10px 26px rgba(53,16,6,.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex;
  flex-direction:column;
}
.leader-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(53,16,6,.14);
  border-color:var(--orange-400);
}

/* Cap the photo — 3:4 portrait, no more giant squares */
.leader-photo{
  position:relative;
  aspect-ratio:3/4;
  max-height:280px;
  overflow:hidden;
  background:var(--cream-200);
}
.leader-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* Text block — compact */
.leader-body{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.leader-body h3{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  color:var(--ink-900);
  line-height:1.3;
  margin:0;
}
.leader-body strong{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-500);
  margin-bottom:10px;
}
.leader-body p{
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-500);
  margin:0;
}

/* Remove any legacy numbering badges if present */
.leader-photo span{
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--orange-500);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
}

/* Tablet — 2 columns, image capped */
@media(max-width:980px){
  .leader-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:18px !important}
  .leader-photo{aspect-ratio:4/5; max-height:340px}
}

/* Mobile — 1 column, image capped at 3/4 of the screen height */
@media(max-width:640px){
  .leader-grid{grid-template-columns:1fr !important; gap:16px !important}
  .leader-photo{
    aspect-ratio:auto;
    height:auto;
    max-height:75vh;   /* ← 3/4 of screen height */
    min-height:280px;
  }
  .leader-photo img{
    width:100%;
    height:auto;
    max-height:75vh;
    object-fit:cover;
  }
  .leader-body{padding:18px 20px 20px}
  .leader-body h3{font-size:15px}
  .leader-body p{font-size:13px}
}

/* ============================================================
   LEADER MODAL — full-window popup with bio
   ============================================================ */

.leader-card{cursor:pointer}

.lm-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(20,5,1,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.lm-overlay.open{opacity:1;visibility:visible}

.lm-card{
  width:min(1080px, 100%);
  max-height:min(90vh, 900px);
  overflow:hidden;
  background:#fff;
  border-radius:24px;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  transform:translateY(24px) scale(.97);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.lm-overlay.open .lm-card{transform:translateY(0) scale(1)}

/* Left — big photo */
.lm-photo{
  position:relative;
  background:var(--cream-200);
  overflow:hidden;
  min-height:520px;
}
.lm-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* Right — scrollable details */
.lm-body{
  padding:48px 48px 44px;
  overflow-y:auto;
  max-height:min(90vh, 900px);
  display:flex;
  flex-direction:column;
  gap:0;
}
.lm-body::-webkit-scrollbar{width:8px}
.lm-body::-webkit-scrollbar-thumb{background:var(--cream-300);border-radius:4px}

.lm-role{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:var(--orange-100);
  color:var(--orange-600);
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:22px;
  align-self:flex-start;
}
.lm-role::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange-500);
}

.lm-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink-900);
  margin:0 0 18px;
}

.lm-lead{
  font-size:17px;
  line-height:1.6;
  color:var(--ink-700);
  font-weight:500;
  padding-bottom:22px;
  border-bottom:1px solid var(--cream-200);
  margin-bottom:26px;
}

.lm-body h3{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange-500);
  margin:0 0 12px;
}
.lm-body h3:not(:first-child){margin-top:32px}

.lm-body p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-500);
  margin:0 0 14px;
}

.lm-body ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.lm-body ul li{
  position:relative;
  padding-left:22px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-700);
}
.lm-body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange-500);
}

.lm-contact{
  margin-top:32px;
  padding:20px 22px;
  background:var(--cream-50);
  border:1px solid var(--cream-200);
  border-radius:14px;
}
.lm-contact div{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--ink-700);
  padding:6px 0;
}
.lm-contact div:not(:last-child){
  border-bottom:1px solid var(--cream-200);
}
.lm-contact svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  stroke:var(--orange-500);
  fill:none;
  stroke-width:2;
}

/* Close button */
.lm-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink-900);
  display:grid;
  place-items:center;
  font-size:20px;
  cursor:pointer;
  border:0;
  z-index:3;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.lm-close:hover{
  background:var(--orange-500);
  color:#fff;
  transform:rotate(90deg);
}

/* Mobile — full screen, stacked */
@media(max-width:900px){
  .lm-overlay{padding:0}
  .lm-card{
    width:100%;
    max-height:100vh;
    border-radius:0;
    grid-template-columns:1fr;
    grid-template-rows:minmax(220px, 38vh) 1fr;
  }
  .lm-photo{min-height:220px}
  .lm-body{
    padding:28px 22px 40px;
    max-height:none;
  }
  .lm-name{font-size:26px}
  .lm-lead{font-size:15px}
  .lm-body p{font-size:14.5px}
  .lm-close{
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    background:rgba(15,4,0,.7);
    color:#fff;
  }
}

/* ============================================================
   FLOATING APPLY BUTTON — top right of hero
   ============================================================ */

.apply-float{
  position:absolute;
  top:32px;
  right:32px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px 14px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#c81e1e,#8b1414);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  text-transform:uppercase;
  box-shadow:
    0 12px 30px rgba(200,30,30,.42),
    0 4px 12px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  overflow:hidden;
  animation:applyFloat 3s ease-in-out infinite;
}
.apply-float::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.apply-float:hover{
  transform:translateY(-3px) scale(1.03);
  color:#fff;
  box-shadow:
    0 20px 45px rgba(200,30,30,.55),
    0 6px 18px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.3);
  animation-play-state:paused;
}
.apply-float:hover::before{
  transform:translateX(120%);
}
.apply-float-icon{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  font-size:13px;
}
.apply-float-arrow{
  font-size:16px;
  transition:transform .25s ease;
}
.apply-float:hover .apply-float-arrow{
  transform:translateX(4px);
}

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

/* ============================================================
   CIRCLE FRAME — fix oval on mobile
   ============================================================ */

/* Ensure perfect circle by enforcing identical width+height */
.p-hero-frame{
  aspect-ratio:1/1 !important;
  width:100%;
  max-width:400px;
  height:auto;
  border-radius:50% !important;
  overflow:hidden;
}

/* Mobile — keep aspect-ratio 1:1, do NOT let it become oval */
@media(max-width:980px){
  .p-hero-frame{
    aspect-ratio:1/1 !important;
    max-width:300px !important;
    width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    border-radius:50% !important;
  }
}

@media(max-width:640px){
  .apply-float{
    top:16px;
    right:16px;
    padding:10px 16px 10px 14px;
    font-size:11px;
    gap:8px;
  }
  .apply-float-icon{
    width:22px;
    height:22px;
    font-size:11px;
  }
  .apply-float-arrow{font-size:14px}

  /* Keep the circle a circle on phones */
  .p-hero-frame{
    aspect-ratio:1/1 !important;
    max-width:220px !important;
    width:100% !important;
    height:auto !important;
    border-radius:50% !important;
    margin:0 auto !important;
  }
}

/* Stop any flex/grid stretching that turns the circle into an oval */
.p-hero-inner > .p-hero-frame,
.p-hero-text + .p-hero-frame{
  align-self:center !important;
  flex-shrink:0;
}