/* ==========================================================
   SIT — Annual Report 2026
   Desktop artboard 1920 px · mobile artboard 390 px.
   `--u` is one artboard pixel, so every number below is the
   measurement taken straight off the design file.
   ========================================================== */

:root{
  --u: calc(min(100vw, 1920px) / 1920);

  --red:      #da291c;   /* headings                */
  --red-btn:  #ee3124;   /* buttons / hero headline */
  --ink:      #221f20;
  --pink:     #fbe9e7;
  --navy:     #2b2e34;

  --gutter: calc(140 * var(--u));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }

.container{
  width:calc(1640 * var(--u));
  margin-inline:auto;
}

/* ---------- pill buttons ------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:calc(57 * var(--u));
  padding:0 calc(34 * var(--u));
  min-width:calc(220 * var(--u));
  border:1px solid #707070;
  border-radius:999px;
  background:#fff;
  color:var(--red-btn);
  font-size:calc(25 * var(--u));
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--hero{ height:calc(49 * var(--u)); min-width:calc(279 * var(--u)); font-size:calc(25 * var(--u)); }

/* ---------- header ------------------------------------------------- */
.site-header{
  position:relative;
  z-index:30;
  height:calc(150 * var(--u));
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(135 * var(--u)) 0 calc(112 * var(--u));
}
/* the logo file carries transparent padding — the canvas is set wider
   than the visible mark and pulled back with a negative margin */
.site-header__logo{ width:calc(226 * var(--u)); margin-left:calc(-14 * var(--u)); }

.burger{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  width:calc(44 * var(--u));
  height:calc(36 * var(--u));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.burger span{
  display:block;
  height:calc(5 * var(--u));
  border-radius:999px;
  background:#575757;
}

/* ---------- hero ---------------------------------------------------- */
.hero{
  position:relative;
  aspect-ratio:1920 / 1341;
  overflow:hidden;
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__inner{
  position:relative;
  z-index:2;
  padding:calc(225 * var(--u)) 0 0 calc(145 * var(--u));
}
.hero__title{
  margin:0;
  font-size:calc(80 * var(--u));
  font-weight:700;
  line-height:1.05;
  color:var(--red-btn);
}
.hero__title span{ color:var(--ink); }
.hero .btn--hero{ margin-top:calc(26 * var(--u)); }

/* ---------- purpose in practice -------------------------------------- */
.purpose{
  position:relative;
  aspect-ratio:1920 / 1553;
  overflow:hidden;
  background:#2f3440;
}
.purpose__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.purpose__inner{
  position:relative;
  z-index:2;
  width:calc(640 * var(--u));
  margin-inline:auto;
  padding-top:calc(596 * var(--u));
  text-align:center;
}
.purpose__title{
  margin:0;
  font-size:calc(44 * var(--u));
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
}
.purpose__title em{
  font-style:normal;
  font-size:calc(62 * var(--u));
  font-weight:800;
  color:#e2231a;
}
.purpose__text{
  margin-top:calc(30 * var(--u));
  font-size:calc(22 * var(--u));
  font-weight:700;
  line-height:1.68;
}

/* ---------- chairman / president messages ---------------------------- */
.message{
  position:relative;
  overflow:hidden;
}
.message__bg{ width:100%; height:auto; }
.message__body{
  position:absolute;
  top:calc(180 * var(--u));
  width:calc(832 * var(--u));
}
.message--chairman .message__body{ left:calc(900 * var(--u)); }
.message--president .message__body{ left:calc(280 * var(--u)); }

.message__title{
  margin:0;
  font-size:calc(50 * var(--u));
  font-weight:800;
  color:var(--red);
  line-height:1.1;
}
.message__title span{ color:#000; }
.message__quote{
  margin-top:calc(52 * var(--u));
  font-size:calc(24 * var(--u));
  font-weight:700;
  line-height:1.375;
}
.message__by{
  margin-top:calc(36 * var(--u));
  font-size:calc(21 * var(--u));
  line-height:1.19;
}
.message__by b{ font-weight:700; }
.message .btn{ margin-top:calc(36 * var(--u)); }

.message__portrait{ display:none; }

/* The black wedges that separate the two message sections. Both files are
   1276.5 wide out of the 1920 artboard, so each has to hang off the edge its
   own shape is thick at — curve-black-up tapers to the left, curve-black-down
   tapers to the right. Anchoring both to the same side leaves a hard vertical
   cut in the middle of the page. */
.wedge{
  display:block;
  width:calc(1276.5 * var(--u));
  position:absolute;
  bottom:-6px;
  z-index:3;
}
.message--chairman .wedge{ right:0; }
.message--president .wedge{ left:0; }

/* ---------- SIT at a Glance ------------------------------------------ */
.glance{
  position:relative;
  background:linear-gradient(to bottom left,#fff 0%,#f3f3f3 44%,#d5d5d5 100%);
  padding-top:calc(115 * var(--u));
  overflow:hidden;
}
.glance__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:calc(820 * var(--u)) 1fr;
}
.glance__title{
  margin:0;
  font-size:calc(65 * var(--u));
  font-weight:800;
  line-height:1;
}
.glance__title span{ color:var(--red); }

.glance__3d{
  position:absolute;
  left: calc(-206 * var(--u));
  top: calc(200 * var(--u));
  width: calc(1009 * var(--u));
  z-index:5;
  pointer-events:none;
}

.clusters__title{
  margin:0 0 calc(60 * var(--u));
  font-size:calc(50 * var(--u));
  font-weight:800;
  line-height:1;
}
.clusters__title span{ color:var(--red); }

.clusters{
  display:grid;
  grid-template-columns:calc(419 * var(--u)) 1fr;
  column-gap:calc(55 * var(--u));
  row-gap:calc(32 * var(--u));
  align-items:start;
}
.cluster{
  display:flex;
  align-items:flex-start;
  gap:calc(9 * var(--u));
}
.cluster img{ flex:0 0 auto; width:calc(var(--iw,63) * var(--u)); }
.cluster b{
  display:block;
  font-size:calc(18 * var(--u));
  font-weight:700;
  line-height:1.333;
}
.cluster span{
  display:block;
  font-size:calc(18 * var(--u));
  line-height:1.333;
}
/* the third cluster sits alone on its row in the left column */
.cluster--wide{ grid-column:1; }

.counts{
  display:grid;
  grid-template-columns:calc(240 * var(--u)) calc(325 * var(--u)) 1fr;
  margin-top:calc(72 * var(--u));
}
.counts__item{
  display:flex;
  gap:calc(16 * var(--u));
}
.counts__item + .counts__item{
  border-left:1px solid #9a9a9a;
  padding-left:calc(20 * var(--u));
}
.counts__num{
  font-size:calc(40 * var(--u));
  color:var(--red);
  line-height:1;
}
.counts__label{
  font-size:calc(18 * var(--u));
  font-weight:700;
  line-height:1.333;
}

/* red postgraduate band --------------------------------------------- */
/* curve-red-big fills red BELOW its curve and curve-red fills red ABOVE
   its curve, so overlapping the two gives the band both soft edges */
.postgrad{
  position:relative;
  z-index:1;
  color:#fff;
}
.postgrad__curve{ width:100%; margin-top:45px;}
.postgrad__tail{
  position:relative;
  /* curve-red.svg only paints red ABOVE its curve — everything below it is
     transparent, so this box has to carry the next section's pink itself,
     otherwise the grey of .glance shows through as a band. */
  background:var(--pink);
  margin-top:calc(-20 * var(--u));
  z-index:-1;
}
.postgrad__tail img{ width:100%; }

.postgrad__inner{
  position:absolute;
  z-index:3;
  top:calc(140 * var(--u));
  left:calc(963 * var(--u));
  right:calc(140 * var(--u));
}
.postgrad__title{
  margin:0 0 calc(40 * var(--u));
  font-size:calc(40 * var(--u));
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
}
.postgrad__counts{ display:flex; }
.postgrad__counts .counts__label{ width:calc(150 * var(--u)); }
.postgrad__counts .counts__item + .counts__item{ border-left-color:rgba(255,255,255,.6); }
.postgrad__counts .counts__num{ color:#fff; }
.postgrad__note{
  margin-top:calc(34 * var(--u));
  font-size:calc(18 * var(--u));
}

/* ---------- pink band: students, global, achievements ---------------- */
.students{
  position:relative;
  background:var(--pink);
  margin-top:calc(-2 * var(--u));
  padding-bottom:calc(120 * var(--u));
  overflow:hidden;
}
.section-title{
  margin:0;
  font-size:calc(50 * var(--u));
  font-weight:800;
  color:var(--red);
  line-height:1.1;
}

.popstats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(20 * var(--u));
  margin-top:calc(70 * var(--u));
}
.popstat{ display:flex; align-items:flex-start; gap:calc(24 * var(--u)); }
.popstat img{ flex:0 0 auto; width:calc(121 * var(--u)); }
.popstat__num{
  font-size:calc(60 * var(--u));
  font-weight:700;
  line-height:1;
}
.popstat__label{
  font-size:calc(33 * var(--u));
  line-height:1.24;
}
.popstat__label--inline{ display:inline; }

.footnote{
  margin-top:calc(58 * var(--u));
  font-size:calc(22 * var(--u));
  line-height:1.6;
}
.footnote p + p{ margin-top:calc(22 * var(--u)); }

/* two-up blocks -------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:calc(779 * var(--u)) 1fr;
  gap:calc(86 * var(--u));
  align-items:start;
  margin-top:calc(130 * var(--u));
}
.split--reverse{ grid-template-columns:1fr calc(779 * var(--u)); }
.split--reverse .split__media{ order:2; }

.bullets{ margin-top:calc(40 * var(--u)); }
.bullet{
  display:flex;
  align-items:flex-start;   /* stop flex stretching the arrow out of shape */
  gap:calc(20 * var(--u));
  font-size:calc(22 * var(--u));
  line-height:1.5;
}
.bullet + .bullet{ margin-top:calc(30 * var(--u)); }
/* natural size of the source file — it already includes room for the 8-unit
   stroke, so the arrow must not be cropped to its path geometry */
.bullet img{ flex:0 0 auto; width:calc(23.2 * var(--u)); margin-top:calc(5 * var(--u)); }
.bullet b{ font-weight:700; }

.students .btn{ margin-top:calc(44 * var(--u)); }
.students__wedge{
  position:absolute;
  right:0;
  bottom:calc(-9 * var(--u));
  width:calc(1276.5 * var(--u));
}

/* ---------- building a sustainable future ---------------------------- */
/* The sky and the campus are ONE photograph in the design — splitting them
   into a CSS gradient plus a cropped image left a visible seam and lost the
   clouds. The copy sits over the sky of the same picture. */
.sustainable{
  position:relative;
  aspect-ratio:1920 / 1080;
  overflow:hidden;
  text-align:center;
}
.sustainable__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.sustainable .container{
  position:relative;
  z-index:2;
  padding-top:calc(121 * var(--u));
}
.sustainable__text{
  margin-top:calc(34 * var(--u));
  font-size:calc(28 * var(--u));
  line-height:1.5;
}
.sustainable__text a{ font-weight:700; font-style:italic; text-decoration:underline; }

/* the navy/red divider rides up over the last 80px of the photo */
.pano__edge{ position:relative; margin-top:calc(-80 * var(--u)); }
.pano__edge picture{ display:block; }
.pano__edge img{ width:100%; height:auto; }

/* ---------- purpose in practice carousel ----------------------------- */
.carousel{
  padding:calc(90 * var(--u)) 0 calc(60 * var(--u));
  text-align:center;
}
.carousel__viewport{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(40 * var(--u));
  margin-top:calc(70 * var(--u));
}
.carousel__slide{
  display:grid;
  grid-template-columns:calc(720 * var(--u)) calc(720 * var(--u));
  gap:calc(80 * var(--u));
  align-items:start;
  text-align:left;
}
.carousel__slide[hidden]{ display:none; }
.carousel__slide > img{
  width:100%;
  border-radius:calc(16 * var(--u));
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.25);
}
.carousel__heading{
  margin:0 0 calc(26 * var(--u));
  font-size:calc(26 * var(--u));
  font-weight:700;
}
.carousel__copy{
  font-size:calc(24 * var(--u));
  line-height:1.5;
}
.carousel__slide .btn{ margin-top:calc(40 * var(--u)); }

.carousel__nav{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  width:calc(64 * var(--u));
  flex:0 0 auto;
}
.carousel__nav img{ width:100%; height:auto; }

.backtotop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(6 * var(--u));
  margin:calc(60 * var(--u)) auto calc(90 * var(--u));
  width:max-content;
  color:var(--red-btn);
  font-size:calc(26 * var(--u));
  text-decoration:none;
}
.backtotop img{ width:calc(32 * var(--u)); }

/* ---------- footer --------------------------------------------------- */
.linkband{
  background:#e8241c;
  color:#fff;
  padding:calc(50 * var(--u)) 0;
}
.linkband__row{
  display:flex;
  align-items:center;
  gap:calc(40 * var(--u));
  padding-left:calc(620 * var(--u));
}
.linkband__row + .linkband__row{ margin-top:calc(32 * var(--u)); }
.linkband__label{
  width:calc(320 * var(--u));
  font-size:calc(28 * var(--u));
  font-weight:700;
}

.sitefoot{
  background:#3c3c3c;
  color:#fff;
  padding:calc(20 * var(--u)) 0;
}
.sitefoot__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(310 * var(--u));
}
.sitefoot__copy{ font-size:calc(17 * var(--u)); line-height:1.45; }
.sitefoot__social{ display:flex; gap:calc(22 * var(--u)); }
.sitefoot__social a{ display:block; }
.sitefoot__social svg{ width:calc(26 * var(--u)); height:auto; fill:#fff; }

/* ---------- menu overlay --------------------------------------------- */
.menu{
  position:fixed;
  inset:0;
  z-index:100;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease,visibility .3s ease;
}
.menu[data-open="true"]{ visibility:visible; opacity:1; }
.menu__scrim{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.72);
  border:0;
  padding:0;
  cursor:pointer;
}
.menu__bar{
  position:absolute;
  inset:0 0 auto 0;
  height:calc(150 * var(--u));
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(135 * var(--u)) 0 calc(112 * var(--u));
  box-shadow:0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.16);
}
.menu__bar img{ width:calc(226 * var(--u)); margin-left:calc(-14 * var(--u)); }
.menu__close{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  width:calc(40 * var(--u));
  height:calc(40 * var(--u));
  position:relative;
  cursor:pointer;
}
.menu__close::before,
.menu__close::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:calc(3 * var(--u));
  background:#707070;
}
.menu__close::before{ transform:rotate(45deg); }
.menu__close::after{ transform:rotate(-45deg); }

.menu__panel{
  position:absolute;
  top:calc(150 * var(--u));
  right:0;
  bottom:0;
  width:calc(632 * var(--u));
  background:#000;
  padding:calc(230 * var(--u)) calc(60 * var(--u)) calc(60 * var(--u)) calc(105 * var(--u));
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.menu[data-open="true"] .menu__panel{ transform:none; }
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list a{
  display:block;
  padding:calc(16 * var(--u)) 0;
  color:#fff;
  font-size:calc(20 * var(--u));
  font-weight:700;
  line-height:1.3;
  text-transform:uppercase;
  text-decoration:none;
}
.menu__list a:hover,.menu__list a:focus-visible{ color:var(--red-btn); }

/* ==========================================================
   MOBILE — 390 px artboard
   ========================================================== */
@media (max-width:899.98px){
  :root{
    --u: calc(min(100vw, 560px) / 390);
    --gutter: calc(28 * var(--u));
  }
  .container{ width:calc(334 * var(--u)); }

  /* header ---------------------------------------------------------- */
  .site-header{
    height:calc(62 * var(--u));
    padding:0 calc(26 * var(--u)) 0 calc(24 * var(--u));
  }
  .site-header__logo{ width:calc(100 * var(--u)); margin-left:calc(-6 * var(--u)); }
  .burger{ width:calc(30 * var(--u)); height:calc(22 * var(--u)); }
  .burger span{ height:calc(3 * var(--u)); }

  /* buttons --------------------------------------------------------- */
  .btn{
    height:calc(42 * var(--u));
    min-width:calc(170 * var(--u));
    padding:0 calc(24 * var(--u));
    font-size:calc(17 * var(--u));
  }
  .btn--hero{ height:calc(44 * var(--u)); min-width:calc(234 * var(--u)); font-size:calc(19 * var(--u)); }

  /* hero ------------------------------------------------------------ */
  /* The banner is one composed picture: the two hands have to stay pinned
     to the screen edges and the type has to sit against the top line of the
     holographic panel. Both only hold if the whole hero scales with the
     viewport, so --u is re-based here instead of using the capped root one.
     The photo is framed by aspect-ratio + object-position: cover then scales
     it by height, and 70.1% picks the horizontal window the design uses. */
  .hero{ --u:calc(100vw / 390); aspect-ratio:390 / 604; }
  .hero__img{ object-position:70.1% top; }
  .hero__inner{ padding:calc(46.5 * var(--u)) 0 0 calc(64 * var(--u)); }
  .hero__title{ font-size:calc(38 * var(--u)); line-height:1.3; max-width:calc(250 * var(--u)); }
  .hero .btn--hero{
    margin:calc(24.7 * var(--u)) 0 0 calc(-14 * var(--u));
    height:calc(44 * var(--u));
    min-width:calc(246 * var(--u));
    font-size:calc(19 * var(--u));
  }

  /* purpose --------------------------------------------------------- */
  .purpose{ aspect-ratio:390 / 699; }
  .purpose__img{ object-position:center; }
  .purpose__inner{
    width:calc(276 * var(--u));
    padding-top:calc(100 * var(--u));
  }
  .purpose__title{
    color:#fff;                       /* white over the dark top of the glow */
    font-size:calc(27 * var(--u));
    line-height:calc(46 * var(--u));
    letter-spacing:0;
  }
  .purpose__title em{
    display:block;
    color:#fff;
    font-size:calc(40 * var(--u));
    line-height:calc(45 * var(--u));
  }
  .purpose__text{
    margin-top:calc(99 * var(--u));   /* drops the copy into the bright core */
    font-size:calc(18 * var(--u));
    line-height:calc(22 * var(--u));
  }

  /* messages -------------------------------------------------------- */
  .message{ background:linear-gradient(160deg,#eef3f6,#b9d0de); }
  .message__bg{ display:none; }
  .message__body{
    position:static;
    width:auto;
    padding:calc(46 * var(--u)) calc(28 * var(--u)) 0;
  }
  .message--chairman .message__body,
  .message--president .message__body{ left:auto; }
  .message__title{ font-size:calc(26 * var(--u)); }
  .message__quote{ margin-top:calc(22 * var(--u)); font-size:calc(17 * var(--u)); line-height:1.5; }
  .message__by{ margin-top:calc(20 * var(--u)); font-size:calc(15 * var(--u)); }
  .message .btn{ margin-top:calc(24 * var(--u)); }
  /* The portrait is part of the section background image, so its light-blue
     backdrop and the section backdrop are one and the same gradient — no seam
     where a separate <img> would have met the CSS gradient. The div below only
     reserves the space the portrait occupies. */
  .message__portrait{
    display:block;
    width:calc(275 * var(--u));
    margin:calc(34 * var(--u)) auto 0;
  }
  .message--chairman .message__portrait{ aspect-ratio:450 / 680; }
  .message--president .message__portrait{ aspect-ratio:420 / 640; }
  .message--chairman,
  .message--president{
    padding-bottom:calc(60 * var(--u));
    background-position:center bottom;
    background-size:100% auto;
    background-repeat:no-repeat;
  }
  .message--chairman{ background-image:url(assets/chairman-mobile.jpg); }
  .message--president{ background-image:url(assets/president-mobile.jpg); }
  .wedge{ width:calc(700 * var(--u)); }

  /* glance ---------------------------------------------------------- */
  .glance{ padding-top:calc(46 * var(--u)); text-align:center; }
  .glance__grid{ display:block; }
  .glance__title{ font-size:calc(26 * var(--u)); }
  .glance__3d{
    position:static;
    width:calc(390 * var(--u));
    margin:calc(10 * var(--u)) 0 calc(26 * var(--u)) calc(-28 * var(--u));
    max-width:none;
  }
  .clusters__title{ margin-bottom:calc(26 * var(--u)); font-size:calc(24 * var(--u)); }
  .clusters{ grid-template-columns:1fr; row-gap:calc(22 * var(--u)); text-align:left; }
  .cluster{ gap:calc(18 * var(--u)); padding-left:calc(14 * var(--u)); }
  .cluster img{ width:calc(var(--iw,63) * var(--u) * .78); }
  .cluster b,.cluster span{ font-size:calc(17 * var(--u)); }
  .cluster--wide{ grid-column:auto; }

  .counts{
    grid-template-columns:1fr;
    row-gap:calc(18 * var(--u));
    margin-top:calc(34 * var(--u));
    text-align:left;
  }
  .counts__item{ padding:0 0 0 calc(14 * var(--u)); }
  .counts__item + .counts__item{ border-left:0; padding-left:calc(14 * var(--u)); }
  .counts__num{ font-size:calc(22 * var(--u)); }
  .counts__label{ font-size:calc(17 * var(--u)); }

  .postgrad{
    margin-top:calc(-40 * var(--u));
    padding-top:calc(80 * var(--u));
    padding-bottom: 0;
    text-align:left;
  }
  .postgrad__inner{
    position:static;
    padding:calc(30 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));
    background:var(--red);
    margin-top:calc(-2 * var(--u));
  }
  .postgrad__title{ font-size:calc(22 * var(--u)); margin-bottom:calc(22 * var(--u)); }
  .postgrad__counts{ display:block; }
  .postgrad__counts .counts__item + .counts__item{ border-left:0; margin-top:calc(16 * var(--u)); }
  .postgrad__note{ font-size:calc(12 * var(--u)); font-style:italic; }

  /* students -------------------------------------------------------- */
  .students{ padding-bottom:calc(60 * var(--u)); text-align:center; padding-top: 50px;}
  .glance__3d{ z-index:5; }
  .section-title{ font-size:calc(26 * var(--u)); }
  .popstats{
    grid-template-columns:1fr;
    row-gap:calc(26 * var(--u));
    margin-top:calc(30 * var(--u));
    text-align:left;
  }
  .popstat{ gap:calc(16 * var(--u)); padding-left:calc(20 * var(--u)); }
  .popstat img{ width:calc(66 * var(--u)); }
  .popstat__num{ font-size:calc(34 * var(--u)); }
  .popstat__label{ font-size:calc(19 * var(--u)); }
  .popstat__label--inline{ display:block; }

  .footnote{ margin-top:calc(30 * var(--u)); font-size:calc(11 * var(--u)); text-align:left; }
  .footnote p + p{ margin-top:calc(14 * var(--u)); }

  .split,
  .split--reverse{
    grid-template-columns:1fr;
    gap:calc(26 * var(--u));
    margin-top:calc(46 * var(--u));
  }
  .split--reverse .split__media{ order:0; }
  .split__body{ text-align:left; }
  .split--reverse .split__body{ text-align:center; }
  .split--reverse .bullets{ text-align:left; }
  .bullets{ margin-top:calc(24 * var(--u)); }
  .bullet{ gap:calc(12 * var(--u)); font-size:calc(17 * var(--u)); }
  .bullet + .bullet{ margin-top:calc(20 * var(--u)); }
  .bullet img{ width:calc(18 * var(--u)); }
  .students .btn{ margin-top:calc(26 * var(--u)); }
  .students__wedge{ width:calc(700 * var(--u)); }

  /* sustainable ----------------------------------------------------- */
  .sustainable{ aspect-ratio:390 / 660; }
  .sustainable .container{ padding-top:calc(50 * var(--u)); }
  .sustainable__text{ margin-top:calc(18 * var(--u)); font-size:calc(17 * var(--u)); }
  /* The mobile divider is its own, much flatter curve, drawn at its full
     707.8u width so it keeps the thickness the design has — the part past
     the screen edge is clipped. It butts against the photo rather than
     riding up over it, otherwise its thin right-hand end stops short of
     the photo's bottom edge and lets the photo show through. */
  .pano__edge{ margin-top:0; overflow:hidden; }
  .pano__edge img{ width:calc(707.842 * var(--u)); max-width:none; }

  /* carousel -------------------------------------------------------- */
  .carousel{ padding:calc(40 * var(--u)) 0 calc(20 * var(--u)); }
  /* The navs sit out in the screen gutters beside the photo, while the
     heading and copy run the full container width — so the viewport stops
     being a flex row and the navs are placed against the photo instead. */
  .carousel__viewport{
    display:block;
    width:calc(334 * var(--u));
    margin:calc(26 * var(--u)) auto 0;
  }
  .carousel__slide{ grid-template-columns:1fr; gap:calc(18 * var(--u)); }
  .carousel__slide > img{ width:calc(266 * var(--u)); margin-inline:auto; }
  .carousel__nav{
    position:absolute;
    /* the photo is 266u wide at 3:2, so its centre line is 88.7u down */
    top:calc(88.7 * var(--u));
    transform:translateY(-50%);
    width:calc(26 * var(--u));
  }
  .carousel__nav[data-dir="-1"]{ left:calc(-9 * var(--u)); }
  .carousel__nav[data-dir="1"]{ right:calc(-9 * var(--u)); }
  .carousel__heading{ margin-bottom:calc(16 * var(--u)); font-size:calc(17 * var(--u)); }
  .carousel__copy{ font-size:calc(17 * var(--u)); }
  .carousel__slide .btn{ margin-top:calc(24 * var(--u)); }

  .backtotop{ margin:calc(34 * var(--u)) auto calc(40 * var(--u)); font-size:calc(19 * var(--u)); }
  .backtotop img{ width:calc(22 * var(--u)); }

  /* footer ---------------------------------------------------------- */
  .linkband{ padding:calc(22 * var(--u)) 0; }
  .linkband__row{ gap:calc(18 * var(--u)); padding:0 calc(24 * var(--u)); }
  .linkband__row + .linkband__row{ margin-top:calc(16 * var(--u)); }
  .linkband__label{ width:calc(120 * var(--u)); font-size:calc(17 * var(--u)); font-weight:400; }
  .linkband .btn{ min-width:calc(174 * var(--u)); height:calc(42 * var(--u)); }

  .sitefoot{ padding:calc(18 * var(--u)) 0 calc(24 * var(--u)); }
  .sitefoot__inner{
    flex-direction:column;
    gap:calc(18 * var(--u));
    padding:0 calc(24 * var(--u));
    text-align:center;
  }
  .sitefoot__copy{ font-size:calc(12 * var(--u)); }
  .sitefoot__social{ gap:calc(26 * var(--u)); }
  .sitefoot__social svg{ width:calc(32 * var(--u)); }

  /* menu ------------------------------------------------------------ */
  .menu__bar{
    height:calc(62 * var(--u));
    padding:0 calc(26 * var(--u)) 0 calc(24 * var(--u));
  }
  .menu__bar img{ width:calc(100 * var(--u)); margin-left:calc(-6 * var(--u)); }
  .menu__close{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
  .menu__close::before,.menu__close::after{ height:calc(2 * var(--u)); }
  .menu__panel{
    top:calc(62 * var(--u));
    width:100%;
    padding:calc(76 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u));
  }
  .menu__list a{ padding:calc(13 * var(--u)) 0; font-size:calc(17 * var(--u)); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; scroll-behavior:auto !important; }
}