/* ============================================================
   MOUNT CARMEL SCHOOL — Design System (main.css)
   Minimalist · Forest Green + Gold · high-grade SSC (LKG–10)
   Used by every page.
   ============================================================ */

/* -------------------- TOKENS -------------------- */
:root{
  --green:#1f4d3a;
  --green-d:#163a2b;
  --green-700:#26593f;
  --gold:#b8894a;
  --gold-d:#9c7038;
  --paper:#faf8f4;
  --white:#ffffff;
  --tint:#eef2ec;         /* single pale green tint */
  --ink:#1b1c19;          /* headings */
  --text:#54554e;         /* body */
  --muted:#8b8a80;
  --line:#e7e3d9;         /* hairlines */

  --radius:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1180px;
  --shadow:0 30px 60px -38px rgba(27,28,25,.4);

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* -------------------- RESET -------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Lenis smooth-scroll required styles (do NOT use CSS scroll-behavior with Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{font-family:var(--sans);background:var(--paper);color:var(--text);line-height:1.65;overflow-x:clip;font-weight:400}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
::selection{background:var(--green);color:#fff}
.container{width:min(100% - 44px,var(--container));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* -------------------- TYPOGRAPHY -------------------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.eyebrow{display:inline-block;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.eyebrow--gold{color:var(--gold)}
.section-title{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.06}
.section-head{margin-bottom:64px;max-width:680px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.split{display:flex;justify-content:space-between;align-items:flex-end;max-width:none;gap:24px}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem)}

/* -------------------- BUTTONS -------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;
  font-size:15px;padding:12px 24px;border-radius:100px;cursor:pointer;border:1px solid transparent;letter-spacing:.01em;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn svg{width:16px;height:16px}
.btn--sm{padding:9px 20px;font-size:14px}
.btn--lg{padding:15px 30px}
.btn--solid{background:var(--green);color:#fff}
.btn--solid:hover{background:var(--green-d);transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-d);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--green)}
.link-arrow svg{width:17px;height:17px;color:var(--gold);transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translate(3px,-3px)}

/* -------------------- HEADER / NAV -------------------- */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;transition:background .35s var(--ease),box-shadow .35s;transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.header__inner{width:min(100% - 44px,var(--container));margin-inline:auto;padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;transition:padding .35s var(--ease)}
.header.scrolled{background:rgba(250,248,244,.9);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.header.scrolled .header__inner{padding:12px 0}
.brand{display:flex;align-items:center;gap:11px}
/* school crest — official mark (School-logo package). Pure shapes, no live
   text, so it is safe as an <img> and as the favicon. */
.brand__mark{width:34px;height:34px;flex:none;display:block}
.brand__mark img{width:100%;height:100%;display:block}
.brand__text{display:flex;flex-direction:column;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);line-height:1.05}
.brand__sub{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.22em;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:30px}
.nav a{font-weight:500;font-size:15px;color:var(--text);transition:color .2s;position:relative;padding:2px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--gold);transition:width .3s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}

/* ---------- dropdown menus (About, Academics) ---------- */
.nav__has{position:relative}
.nav__has > a{display:inline-flex;align-items:center;gap:5px}
.nav__caret{width:12px;height:12px;opacity:.45;transition:transform .28s var(--ease)}
.nav__has:hover .nav__caret,.nav__has:focus-within .nav__caret{transform:rotate(180deg);opacity:.8}

.drop{position:absolute;top:calc(100% + 16px);left:-20px;z-index:60;display:flex;gap:6px;
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px;
  box-shadow:0 34px 70px -26px rgba(27,28,25,.4);min-width:300px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s var(--ease),visibility .22s}
/* invisible bridge so the menu survives the gap between link and card */
.drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav__has:hover .drop,.nav__has:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop--wide{min-width:530px}
.drop__col{flex:1;min-width:0}
.drop__title{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:4px 12px 8px}
.drop__col > a{display:block;padding:9px 12px;border-radius:10px;transition:background .18s}
.drop__col > a:hover{background:var(--tint)}
.drop__col > a b{display:block;font-family:var(--serif);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.drop__col > a span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.drop__subjects{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.drop__subjects a{padding:8px 12px;border-radius:9px;font-size:13.5px;color:var(--text);transition:.18s}
.drop__subjects a:hover{background:var(--tint);color:var(--green)}
/* the caret must not underline like a normal nav link */
.nav__has > a::after{display:none}

/* landing from another page: keep the fixed header off the heading */
#story,#heritage,#principal,#management,#journey,#subjects{scroll-margin-top:96px}
.header__cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;opacity:0;visibility:hidden;transition:.35s var(--ease)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--serif);font-size:26px;color:var(--ink)}
.mobile-menu .btn{font-family:var(--sans);font-size:15px;margin-top:8px}

/* ---------- phone: About / Academics fold open ---------- */
.msub{width:100%}
.msub__head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink)}
.msub__head svg{width:20px;height:20px;opacity:.5;transition:transform .3s var(--ease);flex:none}
.msub.is-open .msub__head svg{transform:rotate(180deg);opacity:.9}
.msub__body{display:none;padding:12px 0 6px 2px;border-left:1px solid var(--line);margin:10px 0 0 2px}
.msub.is-open .msub__body{display:block}
.mobile-menu .msub__body a{display:block;font-family:var(--sans);font-size:16px;font-weight:500;
  color:var(--text);padding:9px 0 9px 16px}
.mobile-menu .msub__body a:active{color:var(--green)}

/* -------------------- REVEAL -------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:150px 0 96px}

/* Text-only centred heroes (About, Academics, Calendar). The hero's 96px bottom
   was stacking on the next section's 130px top — 226px of empty page between
   the lede and the first heading. These close that up, and give the lede a
   sentence-width measure instead of a 490px ribbon. */
[data-page="about"] .hero,
[data-page="academics"] .hero,
[data-page="calendar"] .hero{padding:150px 0 40px}
[data-page="about"] .hero__lede,
[data-page="academics"] .hero__lede,
[data-page="calendar"] .hero__lede{max-width:640px}
[data-page="academics"] .acad{padding-top:30px}
.hero__inner{width:min(100% - 44px,var(--container));margin-inline:auto;display:grid;
  grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.badge{display:inline-block;background:var(--white);border:1px solid var(--line);color:var(--gold-d);
  font-weight:600;font-size:13px;padding:7px 15px;border-radius:100px;margin-bottom:26px}
.hero__title{font-size:clamp(2.9rem,6vw,5rem);line-height:1.03;margin-bottom:24px}
.hero__title .ul{position:relative;white-space:nowrap;color:var(--green)}
.hero__title .ul::after{content:"";position:absolute;left:0;right:0;bottom:4%;height:3px;background:var(--gold);border-radius:2px}
.hero__lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--text);max-width:490px;margin-bottom:34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.trust{display:flex;align-items:center;gap:26px}
.trust__item strong{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--ink);line-height:1;font-weight:600}
.trust__item span{font-size:13px;color:var(--muted);font-weight:500}
.trust__divider{width:1px;height:38px;background:var(--line)}

/* floating photo cluster */
/* ---- hero banner: the school draws itself BEHIND the words, then comes
   to life in colour. No frame — the lines sit on the page. Home only. ---- */
[data-page="home"] .hero{position:relative;overflow:hidden;padding:150px 0 110px;
  min-height:clamp(600px,82vh,820px);display:flex;align-items:center}
[data-page="home"] .hero__inner{position:relative;z-index:2;grid-template-columns:1fr;
  max-width:min(100% - 44px,var(--container))}
[data-page="home"] .hero__copy{max-width:620px}

.hdraw{position:absolute;inset:0;z-index:0;pointer-events:none}
/* object-position MUST stay centred to match the sketch's xMidYMid slice */
.hdraw__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0}
.hdraw__ink{position:absolute;inset:0}
.hdraw__ink svg{width:100%;height:100%;display:block}
.hdraw .mc-ln{fill:none;stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
/* Only appears with the photo — keeps the headline readable over it.
   Light theme: falls away FAST once past the text, or the cream veils the
   whole photo and it looks bleached. Text ends at ~52% of the width. */
.hdraw__scrim{position:absolute;inset:0;opacity:0;
  background:linear-gradient(100deg,var(--paper) 0%,rgba(250,248,244,.97) 28%,rgba(250,248,244,.74) 45%,
    rgba(250,248,244,.22) 62%,rgba(250,248,244,0) 78%)}

/* The header is transparent until you scroll, so the nav would sit straight on
   the photograph and vanish. This keeps the top strip readable in both themes. */
.hdraw__top{position:absolute;left:0;right:0;top:0;height:190px;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(250,248,244,.86) 38%,rgba(250,248,244,.42) 70%,rgba(250,248,244,0) 100%)}
[data-theme="dark"] .hdraw__top{
  background:linear-gradient(180deg,var(--paper) 0%,rgba(21,23,26,.88) 38%,rgba(21,23,26,.46) 70%,rgba(21,23,26,0) 100%)}

[data-theme="dark"] .hdraw .mc-ln{stroke:#d8dade;opacity:.92}
[data-theme="dark"] .hdraw__scrim{
  background:linear-gradient(100deg,var(--paper) 0%,rgba(21,23,26,.94) 34%,rgba(21,23,26,.6) 62%,rgba(21,23,26,.15) 100%)}

@media(prefers-reduced-motion:reduce){
  .hdraw .mc-ln{stroke-dashoffset:0}
  .hdraw__photo,.hdraw__scrim{opacity:1}
  .hdraw__ink{opacity:0}
}
@media(max-width:860px){
  [data-page="home"] .hero{padding:112px 0 64px;min-height:auto}
  .hdraw__scrim{background:linear-gradient(180deg,rgba(250,248,244,.92) 0%,rgba(250,248,244,.8) 55%,rgba(250,248,244,.35) 100%)}
  [data-theme="dark"] .hdraw__scrim{background:linear-gradient(180deg,rgba(21,23,26,.92) 0%,rgba(21,23,26,.8) 55%,rgba(21,23,26,.4) 100%)}
}

.cluster{position:relative;height:500px;perspective:1300px}
.cluster__stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out}
.ph-card{position:absolute;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -26px rgba(27,28,25,.4);border:1px solid rgba(255,255,255,.9)}
.ph-card img{width:100%;height:100%;object-fit:cover}
.ph-1{width:240px;height:300px;top:14px;left:44px;z-index:3;animation:floatA 8s ease-in-out infinite}
.ph-2{width:172px;height:210px;top:0;right:26px;z-index:4;animation:floatB 9s ease-in-out infinite}
.ph-3{width:210px;height:150px;bottom:36px;left:0;z-index:5;animation:floatC 7.5s ease-in-out infinite}
.ph-4{width:168px;height:206px;bottom:6px;right:56px;z-index:3;animation:floatA 10s ease-in-out infinite}
.ph-5{width:132px;height:132px;top:198px;left:224px;z-index:6;animation:floatB 8.5s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes floatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ============================================================
   QUIET VALUES STRIP
   ============================================================ */
.strip{background:var(--white);padding:20px 0;overflow:hidden;border-block:1px solid var(--line)}
.strip__track{display:flex;align-items:center;gap:26px;width:max-content;white-space:nowrap;animation:marq 34s linear infinite}
.strip__track span{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.strip__track i{color:var(--gold);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   ABOUT / WELCOME
   ============================================================ */
.about{padding:130px 0}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about__media{position:relative}
.about__photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__badge{position:absolute;bottom:-24px;left:-24px;background:var(--green);color:#fff;border-radius:var(--radius-sm);
  padding:20px 24px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.about__badge strong{font-family:var(--serif);font-size:40px;color:var(--gold);line-height:1}
.about__badge span{font-size:13px;line-height:1.3}
.about__body{color:var(--text);margin:22px 0 28px;max-width:520px}
.about__title{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.18}

/* ============================================================
   ACADEMICS SNAPSHOT
   ============================================================ */
.acad{padding:130px 0;background:var(--tint)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step__img{height:200px;overflow:hidden}
/* these cards are much wider than the photos, so cover trims top+bottom —
   bias to the upper third so the children's faces always survive the crop */
.step__img img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .7s var(--ease)}
.step:hover .step__img img{transform:scale(1.05)}
.step__body{padding:26px 28px 30px}
.step__grade{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);margin-bottom:12px}
.step h3{font-size:1.42rem;margin-bottom:9px}
.step p{color:var(--text);font-size:.96rem}

/* ============================================================
   FEATURES / WHY
   ============================================================ */
.why{padding:130px 0}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat{padding:32px 26px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#ddd7ca}
.feat__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:var(--tint);color:var(--green);margin-bottom:22px}
.feat__icon svg{width:26px;height:26px}
.feat h3{font-size:1.28rem;margin-bottom:10px}
.feat p{color:var(--text);font-size:.96rem}

/* ============================================================
   TOUR TEASER
   ============================================================ */
.tour{padding:130px 0;background:var(--white)}
.tour__inner{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;display:flex;align-items:center}
.tour__bg{position:absolute;inset:0;z-index:0}
.tour__bg img{width:100%;height:100%;object-fit:cover}
.tour__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,35,25,.9),rgba(15,35,25,.55) 55%,rgba(15,35,25,.3))}
.tour__content{position:relative;z-index:2;padding:56px;max-width:520px;color:#fff}
.tour__content .eyebrow{color:var(--gold-b,#e0bd7e)}
.tour__content h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:14px}
.tour__content p{color:rgba(255,255,255,.82);margin-bottom:26px}
.tour__play{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;margin-bottom:24px}
.tour__play svg{width:24px;height:24px;margin-left:3px}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats{padding:90px 0;background:var(--green);color:#fff}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:14%;height:72%;width:1px;background:rgba(255,255,255,.15)}
.stat strong{display:block;font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,3.5rem);line-height:1;color:#fff;font-weight:600}
.stat strong::after{content:"";display:block;width:26px;height:2px;background:var(--gold);margin:14px auto 0}
.stat span{display:block;margin-top:14px;font-weight:500;font-size:14.5px;color:rgba(255,255,255,.78)}

/* ============================================================
   GALLERY PREVIEW
   ============================================================ */
.life{padding:130px 0;background:var(--tint)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;gap:16px}
.g{position:relative;border-radius:14px;overflow:hidden;cursor:pointer}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.g figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-family:var(--serif);font-weight:600;font-size:1.05rem;z-index:2;transform:translateY(6px);opacity:0;transition:.4s var(--ease)}
.g::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,30,24,.62));opacity:0;transition:.4s}
.g:hover img{transform:scale(1.06)}
.g:hover::after{opacity:1}
.g:hover figcaption{transform:none;opacity:1}
.g--tall{grid-row:span 2}
.g--wide{grid-column:span 2}

/* ============================================================
   NEWS
   ============================================================ */
.news{padding:130px 0;background:var(--paper)}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.news-card{border-radius:var(--radius);overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.news-card__img{height:190px;overflow:hidden}
.news-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.news-card:hover .news-card__img img{transform:scale(1.05)}
.news-card__body{padding:24px 26px 28px}
.tag{display:inline-block;font-size:11px;letter-spacing:.12em;font-weight:600;color:var(--gold-d);text-transform:uppercase;margin-bottom:12px}
.news-card h3{font-size:1.24rem;line-height:1.25;margin-bottom:12px}
.news-card time{font-size:13px;color:var(--muted)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.voices{padding:130px 0;background:var(--tint)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--white);border-radius:var(--radius);padding:34px 30px;border:1px solid var(--line);position:relative}
.quote::before{content:"\201C";position:absolute;top:14px;right:24px;font-family:var(--serif);font-size:4rem;color:var(--tint);line-height:1}
.quote p{font-family:var(--serif);font-size:1.18rem;line-height:1.45;color:var(--ink);margin-bottom:22px;position:relative;z-index:1}
.quote footer{display:flex;align-items:center;gap:12px;font-weight:600;font-size:14px;color:var(--muted)}
/* "still being built" notice — demo only, goes away as pages ship */
.soon{position:fixed;left:50%;bottom:30px;z-index:4000;transform:translate(-50%,18px);
  background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13.5px;
  padding:13px 22px;border-radius:100px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease);white-space:nowrap;max-width:92vw}
.soon strong{font-weight:600;color:var(--gold)}
.soon.is-up{opacity:1;transform:translate(-50%,0)}
@media(max-width:520px){.soon{white-space:normal;text-align:center;border-radius:14px;font-size:13px}}

.avatar{width:40px;height:40px;border-radius:50%;background-size:cover;background-position:center;flex:none}
.avatar--i{background:var(--tint);color:var(--green);border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:16px;line-height:1}

/* ============================================================
   CTA
   ============================================================ */
.cta{padding:104px 0;background:var(--green);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -10%,rgba(184,137,74,.22),transparent 60%)}
.cta__inner{position:relative;z-index:2;max-width:620px;margin-inline:auto}
.cta h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:16px}
.cta p{font-size:1.1rem;color:rgba(255,255,255,.82);margin-bottom:34px}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- the floating button, on every page ---------- */
.pr-fab{position:fixed;right:26px;bottom:26px;z-index:80;display:flex;align-items:center;gap:0;
  flex-direction:row-reverse;   /* label opens leftwards, away from the screen edge */
  background:var(--white);border:1px solid var(--line);border-radius:100px;padding:6px;
  box-shadow:0 18px 40px -14px rgba(27,28,25,.42);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s var(--ease),visibility .4s,gap .3s var(--ease),padding .3s var(--ease)}
.pr-fab.is-up{opacity:1;visibility:visible;transform:translateY(0)}
.pr-fab__face{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:var(--tint)}
.pr-fab__face img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.pr-fab__label{max-width:0;overflow:hidden;white-space:nowrap;text-align:right;font-family:var(--sans);font-weight:600;
  font-size:13.5px;color:var(--ink);transition:max-width .34s var(--ease),margin .34s var(--ease)}
.pr-fab__label span{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:1px}
.pr-fab:hover{gap:12px;padding-left:20px}
.pr-fab:hover .pr-fab__label{max-width:190px}
/* a soft pulse so it is noticed once, then settles */
.pr-fab__face::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(184,137,74,.55);animation:fabPulse 3.4s ease-out 3}
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(184,137,74,.5)}70%{box-shadow:0 0 0 14px rgba(184,137,74,0)}100%{box-shadow:0 0 0 0 rgba(184,137,74,0)}}
.pr-fab__face{position:relative}
/* not on his own page */
[data-page="principal"] .pr-fab{display:none}
@media(max-width:860px){
  .pr-fab{right:16px;bottom:16px}
  .pr-fab:hover{gap:0;padding-left:6px}
  .pr-fab:hover .pr-fab__label{max-width:0}
}
@media(prefers-reduced-motion:reduce){ .pr-fab__face::after{animation:none} }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding:70px 0 30px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand__text{color:#fff}
.footer .brand__sub{color:rgba(255,255,255,.5)}
.footer__motto{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--gold);margin-top:18px;letter-spacing:-.01em}
.footer__tag{font-family:var(--serif);font-size:1.1rem;color:rgba(255,255,255,.9);max-width:250px;line-height:1.4;margin-top:10px}
.footer h4{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer__grid a,.footer__grid p{display:block;font-size:15px;margin-bottom:11px;font-weight:400;transition:color .2s}
.footer__grid a:hover{color:var(--gold)}
.footer__bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;flex-wrap:wrap;gap:10px}
.footer__social{display:flex;gap:20px}
.footer__social a:hover{color:var(--gold)}

/* ============================================================
   DARK THEME — "carbon matte"  (data-theme="dark" on <html>)
   ============================================================ */
:root[data-theme="dark"]{
  /* The logo's green (#1f4d3a) is hue 155°, saturation 43%. It is far too dark
     to read on carbon, so these keep its EXACT hue and saturation and lift only
     the lightness — the UI green is now the logo green, just brighter. */
  --green:#388a68;      /* logo hue+sat, lightness 38% */
  --green-d:#327c5d;    /* lightness 34% */
  --green-700:#42a47b;  /* lightness 45% */
  --gold:#d8ad63;
  --gold-d:#cf9f52;
  --paper:#15171a;      /* carbon matte background */
  --white:#1c1f23;      /* card surface */
  --tint:#1a201d;       /* faint green-carbon panel */
  --ink:#eef1f4;        /* headings / near-white */
  --text:#c4c9cf;       /* body */
  --muted:#868d95;
  --line:rgba(255,255,255,.09);
  --shadow:0 30px 60px -38px rgba(0,0,0,.75);
}
:root[data-theme="dark"] .footer{background:#0f1113}
:root[data-theme="dark"] .header.scrolled{background:rgba(21,23,26,.85);box-shadow:0 1px 0 var(--line)}
:root[data-theme="dark"] .quote::before{color:rgba(255,255,255,.05)}
:root[data-theme="dark"] .g img,:root[data-theme="dark"] .news-card__img img,:root[data-theme="dark"] .step__img img{filter:saturate(.95) brightness(.94)}

/* theme toggle button */
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;transition:border-color .25s,color .25s}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold-d)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}

/* ============================================================
   ACADEMICS — subject hub cards
   ============================================================ */
.subjects{padding:120px 0}
.subjects--tint{background:var(--tint)}
.subj-group{max-width:var(--container)}
.subj-group + .subj-group{margin-top:52px}
.subj-group__title{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:22px}
.subj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.subj-card{position:relative;display:flex;flex-direction:column;padding:30px 26px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.subj-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.subj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--c)}
.subj-card:hover::before{transform:scaleX(1)}
.subj-card__badge{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--ct);color:var(--c);font-family:var(--serif);font-weight:600;font-size:26px;line-height:1;margin-bottom:20px}
.subj-card h3{font-size:1.3rem;margin-bottom:8px}
.subj-card p{color:var(--text);font-size:.95rem;flex:1;margin-bottom:18px}
.subj-card__go{font-weight:600;font-size:14px;color:var(--c);display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--ease)}
.subj-card:hover .subj-card__go{gap:11px}
@media(max-width:980px){.subj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.subj-grid{grid-template-columns:1fr}.subjects{padding:80px 0}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .header__cta .btn--sm{display:none}
  .hero__inner{grid-template-columns:1fr;gap:26px}
  .cluster{height:420px;max-width:480px}
  .about__grid{grid-template-columns:1fr;gap:56px}
  .about__media{max-width:440px}
  .steps{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:44px 24px}
  .stat:nth-child(2)::after{display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .news__grid,.quotes{grid-template-columns:1fr}
  .tour__content{padding:40px 28px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hero{padding:120px 0 70px}
  .about,.acad,.why,.life,.news,.voices,.tour{padding:80px 0}
  .feat-grid{grid-template-columns:1fr}
  .trust{gap:18px}
  .cluster{height:340px}
  .ph-5{display:none}
  .footer__grid{grid-template-columns:1fr}
}
/* ============================================================
   EDITORIAL ADDITIONS (header CTA, statement, featured quote, news)
   ============================================================ */
.header__link{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.01em;transition:color .2s}
.header__link:hover{color:var(--gold-d)}

/* intro statement band */
.statement{padding:104px 0;text-align:center}
.statement__line{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.16;letter-spacing:-.015em;color:var(--ink);max-width:24ch;margin-inline:auto}
.statement__line span{color:var(--green)}

/* featured split testimonial */
.feature-quote{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px}
.feature-quote__media{min-height:400px;overflow:hidden}
.feature-quote__media img{width:100%;height:100%;object-fit:cover}
.feature-quote__body{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.feature-quote__text{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.3vw,2.05rem);line-height:1.34;
  color:var(--ink);margin-bottom:28px;position:relative;padding-top:26px}
.feature-quote__text::before{content:"\201C";position:absolute;top:-8px;left:-6px;font-family:var(--serif);font-size:4rem;line-height:1;color:var(--gold);opacity:.55}
.feature-quote__body footer{margin-bottom:20px}
.feature-quote__body footer strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink)}
.feature-quote__body footer span{font-size:14px;color:var(--muted)}
.feature-quote__body .eyebrow{margin-bottom:16px}
.feature-quote__text--motto{font-size:clamp(2rem,3.6vw,3.1rem);font-style:italic;letter-spacing:-.01em}
.quotes--two{grid-template-columns:repeat(2,1fr)}

/* editorial news grid */
.news-editorial{display:grid;grid-template-columns:1.25fr 1fr;gap:26px}
.news-feature{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.news-feature:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.news-feature__img{display:block;height:320px;overflow:hidden}
.news-feature__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.news-feature:hover .news-feature__img img{transform:scale(1.05)}
.news-feature__body{padding:30px 34px 34px}
.news-feature h3{font-size:1.7rem;line-height:1.15;margin-bottom:14px}
.news-feature__excerpt{color:var(--text);font-size:1rem;margin-bottom:20px}
.news-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);font-weight:500}
.news-meta span{color:var(--gold-d);font-weight:600}
.news-list{display:flex;flex-direction:column;gap:16px}
.news-item{display:grid;grid-template-columns:132px 1fr;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.news-item__img{display:block;overflow:hidden}
.news-item__img img{width:100%;height:100%;object-fit:cover;min-height:112px;transition:transform .5s var(--ease)}
.news-item:hover .news-item__img img{transform:scale(1.06)}
.news-item__body{padding:16px 18px}
.news-item .tag{margin-bottom:7px}
.news-item h4{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.28;color:var(--ink);margin-bottom:8px}
.news-item time{font-size:12.5px;color:var(--muted)}

@media(max-width:980px){
  .header__cta .header__link{display:none}
  .feature-quote{grid-template-columns:1fr}
  .feature-quote__media{min-height:280px}
  .feature-quote__body{padding:36px 30px}
  .quotes--two{grid-template-columns:1fr}
  .news-editorial{grid-template-columns:1fr}
  .section-head.split{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:520px){
  .statement{padding:72px 0}
  .news-item{grid-template-columns:100px 1fr}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}.cluster__stage{transform:none!important}}

/* ============================================================
   ABOUT / LEADERSHIP
   ============================================================ */
.msg{padding:120px 0}
.msg__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.msg__photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.msg__photo img{width:100%;height:100%;object-fit:cover}
.msg__quote{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.38;color:var(--ink);margin:16px 0 20px}
.msg__body{color:var(--text);margin-bottom:24px}
.msg__body p{margin-bottom:14px}
.msg__sign{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink)}
.msg__role{color:var(--gold-d);font-weight:600;font-size:14px;margin-bottom:16px}
.msg__creds{display:flex;flex-wrap:wrap;gap:8px}
.msg__creds span{background:var(--tint);color:var(--green-d);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:100px}

.team{padding:120px 0;background:var(--tint)}
.chair-card{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:26px;padding:26px}
.chair-card__photo{width:200px;height:200px;border-radius:16px;overflow:hidden;flex:none}
.chair-card__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.chair-card__body h3{font-size:1.5rem;margin:8px 0 10px}
.chair-card__body p{color:var(--text);max-width:62ch}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.team-card{text-align:center;padding:32px 22px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.team-card__ava{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;background:var(--tint);color:var(--green);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:28px;border:1px solid var(--line);overflow:hidden}
.team-card__ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.team-card h3{font-size:1.1rem;margin-bottom:4px}
.team-card .role{color:var(--gold-d);font-weight:600;font-size:13px}
@media(max-width:900px){
  .msg__grid{grid-template-columns:1fr;gap:34px}
  .msg__photo{max-width:380px}
  .chair-card{grid-template-columns:1fr;text-align:center}
  .chair-card__photo{width:180px;height:180px;margin:0 auto}
  .team-grid{grid-template-columns:1fr}
}

html.intro-lock,html.intro-lock body{overflow:hidden}