/* =========================================================
   THE GLOBAL KNOWLEDGE CENTRE
   Brand colours: #DFBB81 (gold)  ·  #222338 (navy)
   ========================================================= */

:root{
  /* --- BRAND --- */
  --navy:#222338;
  --navy-soft:#2E3050;
  --navy-deep:#171827;
  --gold:#DFBB81;
  --gold-soft:#EBD3AC;
  --gold-text:#8F6B33;        /* darker gold, readable on cream */

  /* --- NEUTRALS --- */
  --cream:#F7F2EA;
  --cream-2:#EFE6D8;
  --ink:#222338;
  --muted:#5E6070;

  --line:rgba(34,35,56,0.12);
  --line-on-dark:rgba(247,242,234,0.16);

  --radius:2px;
  --wrap:1180px;
  --nav-h:78px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--navy);
  line-height:1.2;
}

a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:var(--cream); padding:12px 18px;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- Eyebrow label ---------- */
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-text);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-weight:700;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
  display:inline-block;
  flex-shrink:0;
}
.eyebrow.on-dark{color:var(--gold);}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  padding:13px 24px;
  border-radius:var(--radius);
  display:inline-block;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy); color:var(--cream);}
.btn-primary:hover{background:var(--gold); color:var(--navy);}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:var(--cream); color:var(--navy);}
.btn-ghost-dark{border-color:var(--navy); color:var(--navy);}
.btn-ghost-dark:hover{background:var(--navy); color:var(--cream);}
.btn-ghost-light{border-color:rgba(247,242,234,0.5); color:var(--cream);}
.btn-ghost-light:hover{border-color:var(--gold); color:var(--gold);}
.btn-outline-navy{border-color:var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:var(--cream);}

/* =========================================================
   HEADER
   ========================================================= */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,242,234,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(34,35,56,0.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
  gap:20px;
}

.logo{
  font-family:'Fraunces', serif;
  font-size:18px;
  color:var(--navy);
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
/* ---------- Logo mark ----------
   logo.png is a transparent PNG, so the emblem sits on a navy
   badge. Gold on navy is high contrast; gold directly on the
   cream header would wash out. */
.logo .mark{
  width:42px; height:42px;
  background:var(--navy);
  border:1px solid var(--navy);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace;
  font-size:9.5px;
  font-weight:700;
  color:var(--gold);
  flex-shrink:0;
  overflow:hidden;
  position:relative;
  transition:transform .4s ease, box-shadow .3s ease;
}
.logo .mark img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  padding:5px;
}
.logo .mark.has-image .mark-fallback{display:none;}
.logo:hover .mark{
  transform:rotate(-4deg) scale(1.05);
  box-shadow:0 6px 18px rgba(34,35,56,0.28);
}

.navlinks{display:flex; gap:32px; font-size:13.5px; font-weight:500;}
/* Padding is generous so these stay tappable on iPad landscape,
   which gets the full desktop nav. The underline is pulled back up
   so it still sits tight under the text. */
.navlinks a{position:relative; padding:13px 0;}
.navlinks a::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.navlinks a:hover::after,
.navlinks a.active::after{transform:scaleX(1);}

.nav-cta-mobile{display:none;}

/* Hamburger */
.menu-btn{
  display:none;
  width:42px; height:42px;
  background:none; border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  padding:0;
  position:relative;
}
.menu-btn span{
  display:block; position:absolute; left:11px;
  width:20px; height:1.6px; background:var(--navy);
  transition:transform .28s ease, opacity .2s ease;
}
.menu-btn span:nth-child(1){top:14px;}
.menu-btn span:nth-child(2){top:20px;}
.menu-btn span:nth-child(3){top:26px;}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  /* 74vh + the 78px header sits just inside one screen, so the top of
     the fact strip peeks in and invites a scroll. At 92vh the hero
     overran the viewport and left a large empty gap above the headline. */
  min-height:74vh;
  min-height:74svh;
  display:flex; align-items:flex-end;
  background:var(--navy-deep);
  overflow:hidden;
  /* cancels the generic section padding, which was adding 110px of
     dead space under the buttons */
  padding:0;
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 35%;
  /* slow cinematic drift */
  animation:kenburns 26s ease-out both;
}
@keyframes kenburns{
  from{transform:scale(1.001);}
  to{transform:scale(1.09);}
}
/* The building is brightly lit, so the veil is weighted hard toward
   the bottom where the headline and buttons sit. */
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(23,24,39,0.66) 0%,
    rgba(23,24,39,0.60) 28%,
    rgba(23,24,39,0.84) 62%,
    rgba(23,24,39,0.985) 100%);
}
/* subtle texture so the hero still looks intentional before photos land */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(223,187,129,0.10) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.4;
  pointer-events:none;
}

.hero-inner{
  position:relative; z-index:2;
  padding-bottom:72px;
  padding-top:110px;
  width:100%;
}
.hero h1{
  color:var(--cream);
  font-weight:400;
  font-size:clamp(36px, 5.4vw, 74px);
  line-height:1.05;
  max-width:860px;
}
.hero h1 em{font-style:italic; color:var(--gold);}
.hero p.sub{
  color:rgba(247,242,234,0.84);
  font-size:17px;
  max-width:580px;
  margin:22px 0 34px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.hero-loc{
  position:absolute; top:26px; left:0; right:0; z-index:2;
}
.hero-loc .wrap{
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(247,242,234,0.7);
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; width:22px; height:36px;
  border:1px solid rgba(247,242,234,0.4);
  border-radius:12px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; margin-left:-2px;
  width:4px; height:4px; border-radius:50%; background:var(--gold);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{transform:translateY(0); opacity:1;}
  50%{transform:translateY(12px); opacity:.3;}
}

/* ---------- Hero entrance (plays on page load) ---------- */
.hero-anim{
  opacity:0;
  animation:heroIn .95s cubic-bezier(.22,.75,.3,1) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes heroIn{
  from{opacity:0; transform:translateY(26px);}
  to{opacity:1; transform:translateY(0);}
}
/* the scroll cue keeps its centring transform while fading in */
.scroll-cue.hero-anim{animation-name:cueIn;}
@keyframes cueIn{
  from{opacity:0; transform:translate(-50%, 14px);}
  to{opacity:1; transform:translate(-50%, 0);}
}

/* gold letters in the headline warm up after the line lands */
.hero h1 em{
  color:var(--gold);
  animation:goldGlow 1.4s ease-out .8s both;
}
@keyframes goldGlow{
  from{color:var(--cream);}
  to{color:var(--gold);}
}

/* =========================================================
   FACT STRIP
   ========================================================= */
.factstrip{background:var(--navy);}
.factstrip .wrap{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  padding-left:0; padding-right:0;
}
.fact{
  padding:34px 30px;
  border-right:1px solid var(--line-on-dark);
}
.fact:first-child{padding-left:32px;}
.fact:last-child{border-right:none; padding-right:32px;}
.fact .num{
  font-family:'Fraunces', serif;
  color:var(--gold);
  font-size:32px;
  font-weight:500;
  margin-bottom:6px;
  line-height:1;
}
.fact .lbl{color:rgba(247,242,234,0.7); font-size:13px; line-height:1.55;}

/* =========================================================
   SECTIONS
   ========================================================= */
section{padding:110px 0;}
.section-head{max-width:660px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px, 3.4vw, 42px); line-height:1.15;}
.section-head p{color:var(--muted); font-size:16.5px; margin-top:16px;}

/* ---------- Image slots ---------- */
.ph{
  position:relative;
  background:
    linear-gradient(135deg, rgba(34,35,56,0.05) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(135deg, transparent 75%, rgba(34,35,56,0.05) 75%) 0 0/16px 16px,
    var(--cream-2);
  border:1px solid var(--line);
  overflow:hidden;
  min-height:200px;
  display:flex;
  align-items:flex-end;
}
.ph img{
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
  transition:transform 1.1s cubic-bezier(.22,.75,.3,1);
}
.ph.has-image:hover img{transform:scale(1.06);}
/* Matches the photo's own 4:3 shape, so the whole building shows
   with no cropping instead of being squeezed into a tall frame. */
.ph.tall{
  aspect-ratio:4 / 3;
  height:auto;
}
.ph-hint{
  position:relative; z-index:2;
  background:var(--navy);
  color:var(--gold);
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.03em;
  padding:9px 12px;
  line-height:1.6;
  max-width:100%;
}
.ph-hint span{color:rgba(247,242,234,0.75);}
/* hide the hint label as soon as a real image loads */
.ph.has-image .ph-hint{display:none;}
/* on the live domain, a slot with no photo removes itself entirely */
.ph.slot-empty{display:none;}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-text p{color:var(--muted); font-size:16px; margin-bottom:18px;}
.about-text p.lead{
  font-family:'Fraunces', serif;
  color:var(--navy);
  font-size:22px;
  font-weight:400;
  line-height:1.45;
  margin-bottom:24px;
}
.about-text .btn{margin-top:10px;}

/* ---------- Pull quote ---------- */
.pullquote{
  background:var(--navy);
  color:var(--cream);
  padding:130px 0;
  position:relative;
  overflow:hidden;
}
.pullquote::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(223,187,129,0.12) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.5;
}
/* Emblem watermark behind the vision statement */
.quote-crest{
  position:absolute;
  right:-70px;
  top:50%;
  transform:translateY(-50%);
  width:min(470px, 46vw);
  height:auto;
  opacity:.13;
  pointer-events:none;
  z-index:0;
}

.pullquote .wrap{position:relative; z-index:1; max-width:900px;}
.pullquote blockquote{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(25px, 3.6vw, 44px);
  line-height:1.32;
  color:var(--cream);
}
.pullquote blockquote em{color:var(--gold); font-style:italic;}
.pullquote .attrib{
  margin-top:32px;
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(247,242,234,0.6);
}

/* ---------- Mission ---------- */
.mission-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.mission-item{
  background:var(--cream);
  padding:30px 34px;
  display:flex; gap:18px;
  transition:background .25s ease;
}
.mission-item:hover{background:#FFFDF9;}
.mission-item .n{
  font-family:'Space Mono', monospace;
  color:var(--gold-text);
  font-size:13px;
  font-weight:700;
  padding-top:3px;
  flex-shrink:0;
}
.mission-item p{font-size:15px; color:var(--ink);}

/* ---------- Pillars ---------- */
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.pillar-card{
  background:var(--cream);
  border:1px solid var(--line);
  padding:28px 24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(34,35,56,0.12);
  border-color:var(--gold);
}
.pillar-card:nth-child(1){grid-column:1/3;}
.pillar-card:nth-child(2){grid-column:3/5; margin-top:46px;}
.pillar-card:nth-child(3){grid-column:1/2; margin-top:20px;}
.pillar-card:nth-child(4){grid-column:2/4;}
.pillar-card:nth-child(5){grid-column:4/5; margin-top:34px;}
.pillar-card:nth-child(6){grid-column:1/3; margin-top:10px;}
.pillar-card:nth-child(7){grid-column:3/5;}
.pillar-glyph{
  width:46px; height:46px;
  border:1px solid var(--navy);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  margin-bottom:18px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
/* Icons are stroke-only and inherit colour, so they flip to navy
   automatically when the circle fills gold on hover. */
.pillar-glyph svg{
  width:22px; height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pillar-card:hover .pillar-glyph{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
}
.pillar-card h3{font-size:18px; margin-bottom:8px;}
.pillar-card p{color:var(--muted); font-size:14px;}

/* ---------- Programmes ---------- */
.prog-list{border-top:1px solid var(--line);}
.prog-row{
  display:grid;
  grid-template-columns:60px 1.1fr 1fr auto;
  align-items:center;
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .25s ease;
}
.prog-row:hover{padding-left:10px;}
.prog-row .idx{font-family:'Space Mono', monospace; color:var(--gold-text); font-size:12px; font-weight:700;}
.prog-row h3{font-size:19px; font-weight:500;}
.prog-row p{color:var(--muted); font-size:14.5px;}
.prog-row .arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--navy);
  transition:background .22s ease, color .22s ease, transform .3s ease;
  flex-shrink:0;
}
.prog-row:hover .arrow{
  background:var(--navy); color:var(--cream);
  transform:translateX(5px);
}

/* arrow inside text buttons nudges on hover */
.btn-arrow{
  display:inline-block;
  transition:transform .28s ease;
}
.btn:hover .btn-arrow{transform:translateX(5px);}

/* ---------- Campus ---------- */
.campus{background:var(--cream-2);}
.campus-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}
.campus-title{font-size:clamp(28px, 3.4vw, 42px); margin-bottom:14px;}
.campus-intro{color:var(--muted); font-size:16px;}
.campus-feats{display:flex; flex-direction:column; gap:20px; margin-top:28px;}
.campus-feat{display:flex; gap:16px; align-items:flex-start;}
.campus-feat .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-text); margin-top:9px; flex-shrink:0;
}
.campus-feat p{color:var(--ink); font-size:15px;}
.campus-feat b{
  font-family:'Fraunces', serif; font-weight:500; color:var(--navy);
  font-size:16px; display:block; margin-bottom:2px;
}
/* Two stacked full-width photos */
.campus-photos{display:grid; grid-template-columns:1fr; gap:18px;}
.campus-photos .ph{height:265px;}
.campus-photos .ph:last-child{height:225px;}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--gold); padding:80px 0;}
.cta-banner .wrap{
  display:flex; justify-content:space-between; align-items:center;
  gap:40px; flex-wrap:wrap;
}
.cta-banner h2{font-size:clamp(26px, 3vw, 38px); max-width:560px; color:var(--navy);}
.cta-banner .btns{display:flex; gap:14px; flex-wrap:wrap;}

/* The default primary hover turns gold, which is the banner's own
   colour, so the button disappeared into the background. Here it
   darkens instead and keeps its cream text. */
.cta-banner .btn-primary:hover{
  background:#14152A;
  color:var(--cream);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:var(--navy);
  color:rgba(247,242,234,0.72);
  padding:76px 0 30px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr;
  gap:48px;
  padding-bottom:50px;
  border-bottom:1px solid var(--line-on-dark);
}
.foot-brand .logo{color:var(--cream); align-items:center;}
/* On the navy footer the emblem needs no badge at all */
.foot-brand .mark{
  width:58px; height:58px;
  background:transparent;
  border-color:transparent;
  color:var(--gold);
}
.foot-brand .mark img{padding:0;}
.foot-brand p{
  font-size:14px; max-width:300px; margin-top:16px;
  color:rgba(247,242,234,0.55);
}
.foot-col h4{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:700;
}
.foot-col a{
  display:block; font-size:14px;
  padding:7px 0; margin-bottom:2px;   /* bigger tap area on touch screens */
  color:rgba(247,242,234,0.75);
  transition:color .2s ease;
}
.foot-col a:hover{color:var(--gold);}

.socials{display:flex; gap:12px; margin-top:24px;}
.socials a{
  width:44px; height:44px;   /* minimum comfortable tap target */
  border:1px solid var(--line-on-dark);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.socials svg{width:17px; height:17px; fill:rgba(247,242,234,0.8); transition:fill .22s ease;}
.socials a:hover{background:var(--gold); border-color:var(--gold); transform:translateY(-2px);}
.socials a:hover svg{fill:var(--navy);}

.foot-bottom{
  display:flex; justify-content:space-between; padding-top:26px;
  font-size:12.5px; color:rgba(247,242,234,0.45);
  flex-wrap:wrap; gap:10px;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.22,.75,.3,1),
             transform .75s cubic-bezier(.22,.75,.3,1);
  transition-delay:var(--d, 0s);
}
.reveal.visible{opacity:1; transform:none;}

/* Number count-up in the fact strip */
.num.counting{font-variant-numeric:tabular-nums;}

/* Anyone who has asked their device to reduce motion sees the page
   fully rendered and completely still. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .hero-anim{opacity:1; animation:none;}
  .hero-img{animation:none;}
  .hero h1 em{animation:none;}
  .scroll-cue span{animation:none;}
  .btn:hover,
  .pillar-card:hover,
  .logo:hover .mark,
  .prog-row:hover .arrow,
  .btn:hover .btn-arrow,
  .ph.has-image:hover img,
  .socials a:hover{transform:none;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* 1100px catches iPad landscape (1024px), where the woven
   four-column pillar layout squeezed cards down to ~220px. */
@media (max-width:1100px){
  .pillars-grid{grid-template-columns:1fr 1fr;}
  .pillar-card:nth-child(n){grid-column:auto; margin-top:0;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .about-grid, .campus-grid{gap:44px;}
}

@media (max-width:860px){
  .wrap{padding:0 22px;}
  section{padding:80px 0;}
  .pullquote{padding:90px 0;}

  /* --- mobile nav --- */
  .menu-btn{display:block;}
  .nav-cta{display:none;}
  .navlinks{
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:0;
    padding:8px 22px 24px;
    transform:translateY(-120%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:0 20px 40px rgba(34,35,56,0.12);
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .navlinks.open{transform:translateY(0);}
  .navlinks a{
    padding:15px 0;
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .navlinks a::after{display:none;}
  .nav-cta-mobile{
    display:inline-block;
    margin-top:18px;
    text-align:center;
    border-bottom:none !important;
  }

  /* Shorter hero on phones. At 88vh the header plus hero ran past a
     full screen, leaving a long empty stretch above the headline. */
  .hero{min-height:72vh; min-height:72svh;}
  .hero-inner{padding-bottom:52px; padding-top:100px;}
  .hero-loc{top:18px;}
  .hide-sm{display:none;}

  /* emblem watermark sits behind, softer, on small screens */
  .quote-crest{
    right:50%;
    transform:translate(50%, -50%);
    width:min(340px, 78vw);
    opacity:.10;
  }

  .about-grid, .campus-grid, .mission-grid{grid-template-columns:1fr;}
  .about-grid{gap:36px;}
  .ph.tall{height:auto;}   /* keeps the 4:3 shape on phones too */

  .factstrip .wrap{grid-template-columns:1fr;}
  .fact{
    border-right:none;
    border-bottom:1px solid var(--line-on-dark);
    padding:26px 22px;
  }
  .fact:first-child{padding-left:22px;}
  .fact:last-child{border-bottom:none; padding-right:22px;}

  .prog-row{grid-template-columns:44px 1fr auto; gap:16px;}
  .prog-row p{display:none;}
  .prog-row:hover{padding-left:0;}

  .cta-banner .wrap{flex-direction:column; align-items:flex-start;}
  .foot-bottom{flex-direction:column;}
}

@media (max-width:520px){
  /* two pillar columns on a phone left ~110px of text width,
     roughly 15 characters a line. One column reads properly. */
  .pillars-grid{grid-template-columns:1fr; gap:16px;}
  /* Keep the name beside the emblem on phones, just scaled down
     so it still clears the hamburger on a 360px screen. */
  header .logo-text{font-size:13.5px; line-height:1.15;}
  header .logo{gap:9px;}
  header .logo .mark{width:38px; height:38px;}
  .foot-grid{grid-template-columns:1fr; gap:34px;}
  .hero-ctas .btn, .cta-banner .btn{width:100%; text-align:center;}
  .campus-photos .ph,
  .campus-photos .ph:last-child{height:210px;}
  .mission-item{padding:24px 22px;}
}