/* ============================================================
   SIT — Sustainability Report 2026
   Desktop artboard: 1920 px   ·   Mobile artboard: 390 px
   `--u` is one artboard pixel, so every measurement below is
   written exactly as it appears in the design files.
   ============================================================ */

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

  --red:   #ee3626;
  --ink:   #221f20;
  --panel: #fdeded;
  --grey:  #ebebeb;
  --rule:  rgba(238,54,38,.5);

  --container: calc(1642 * var(--u));
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}

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

.container{
  width:var(--container);
  margin-inline:auto;
}

/* ---------- buttons ------------------------------------------------ */
.btn{
  position:relative;
  isolation:isolate;            /* so the shards below sit under the label */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(318 * var(--u));
  height:calc(57 * var(--u));
  background:var(--red);
  color:#fff;
  font-size:calc(26 * var(--u));
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:0;
  cursor:pointer;
}

/* Hover: the face turns dark and a red shard tilts out from behind it —
   the same lockup as the "Sustainability Report 2026" badge in the hero.
   Negative z-index keeps both layers above the button's own background
   but below its label. */
.btn::before,
.btn::after{
  content:"";
  position:absolute;
  opacity:0;
  transition:opacity .25s ease,transform .25s ease;
}
.btn::before{                   /* red shard */
  z-index:-2;
  inset:0 calc(-9 * var(--u));
  background:var(--red);
}
.btn::after{                    /* dark face */
  z-index:-1;
  inset:0;
  background:var(--ink);
}
.btn:hover::before,
.btn:focus-visible::before{ opacity:1; transform:rotate(-2.6deg); }
.btn:hover::after,
.btn:focus-visible::after{ opacity:1; }
.btn--hero{ width:calc(365 * var(--u)); height:calc(65.4 * var(--u)); }

.btn-row{
  display:flex;
  justify-content:center;
  margin-top:calc(48 * var(--u));
}

/* ---------- header -------------------------------------------------- */
.site-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:30;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:calc(90 * var(--u)) calc(110 * var(--u)) 0 calc(130 * var(--u));
}
/* the logo file carries transparent padding, so the canvas is set a little
   larger than the visible mark and pulled back with negative margins */
.site-header__logo{
  width:calc(367 * var(--u));
  height:auto;
  margin:calc(-21 * var(--u)) 0 0 calc(-26 * var(--u));
}

.burger{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin-top:calc(57 * var(--u));
  width:calc(60 * var(--u));
  height:calc(35 * var(--u));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.burger span{
  display:block;
  height:calc(5 * var(--u));
  background:var(--ink);
  border-radius:1px;
}

/* ---------- hero ---------------------------------------------------- */
.hero{
  position:relative;
  aspect-ratio:1920 / 1080;   /* same ratio as hero-desktop.jpg: no cropping */
  overflow:hidden;
  background:linear-gradient(#cfe4f4,#a9cde9);
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.hero__inner{
  position:relative;
  z-index:10;
  height:100%;
  padding-right:calc(92 * var(--u));
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}
.hero__title{
  margin:calc(220 * var(--u)) 0 0;
  font-size:calc(92 * var(--u));
  font-weight:700;
  line-height:1.14;
  white-space:nowrap;   /* the headline stays on one line at every width */
}
.hero__title em{ font-style:normal; color:var(--red); }
/* The badge artwork floats inside its own box — the red slash starts 20.53
   and ends 131.07 of the 151.273-tall viewBox — so the margins below are set
   from the artwork's edges, not the box's, to leave an even gap above and
   below it. */
.hero__badge{
  display:block;
  width:calc(765 * var(--u));
  height:auto;
  margin-top:calc(17 * var(--u));
}
.hero .btn--hero{
  width:calc(365 * var(--u));
  height:calc(65.4 * var(--u));
  margin-top:calc(18.3 * var(--u));
  font-size:calc(26 * var(--u));
}

/* ---------- leadership messages ------------------------------------- */
.messages{ padding-top:calc(120 * var(--u)); }
.messages__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(48 * var(--u));
}
.msg{ display:flex; flex-direction:column; }
.msg__card{
  position:relative;
  aspect-ratio:515 / 649;
  overflow:hidden;
  background:#fff;
  box-shadow:calc(5 * var(--u)) calc(8 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.161);
}
/* campus photo behind the portrait; it already fades to white at the top so
   the heading stays legible */
.msg__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.msg__title{
  position:relative;
  z-index:2;
  margin:0;
  padding:calc(36 * var(--u)) calc(34 * var(--u)) 0;
  font-size:calc(36 * var(--u));
  font-weight:700;
  line-height:1.3;
}
.msg__photo{
  position:absolute;
  left:6.02%;
  bottom: 0;
  width:86.99%;
  height:auto;
}
.msg .btn{ align-self:center; margin-top:calc(54 * var(--u)); }

/* ---------- focus pillars ------------------------------------------- */
.pillars{ padding-top:calc(131 * var(--u)); }

.pillars__heading{
  margin:0;
  text-align:center;
  font-size:calc(80 * var(--u));
  font-weight:700;
  line-height:1.2;
}
.pillars__slant{
  width:calc(908.96 * var(--u));
  margin:calc(14 * var(--u)) auto 0;
}

.pillar{ margin-top:calc(139 * var(--u)); }
.pillar:first-of-type{ margin-top:calc(96 * var(--u)); }

.pillar__head{
  display:flex;
  align-items:center;
  gap:calc(52 * var(--u));
}
.pillar__head::before,
.pillar__head::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}
.pillar__title{
  margin:0;
  font-size:calc(50 * var(--u));
  font-weight:700;
  color:var(--red);
  line-height:1.2;
  white-space:nowrap;
}

.pillar__intro{
  max-width:calc(1480 * var(--u));
  margin:calc(36 * var(--u)) auto 0;
  text-align:center;
  font-size:calc(32 * var(--u));
  line-height:1.3125;
}

/* ---------- stat panel ---------------------------------------------- */
.panel{
  background:var(--panel);
  /* outline in the same red as the column dividers, at a lighter tint so the
     frame reads as a container edge rather than competing with them */
  border:1px solid rgba(238,54,38,.28);
  margin-top:calc(68 * var(--u));
  padding:calc(52 * var(--u)) 0 calc(60 * var(--u));
}
.panel__period{
  margin:0 0 calc(50 * var(--u));
  padding-left:calc(57 * var(--u));
  font-size:calc(32 * var(--u));
  font-weight:700;
  color:var(--red);
  line-height:1.3125;
}

.stats{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,auto);
  row-gap:calc(72 * var(--u));
}
.stats--labelled{ grid-template-rows:auto auto auto; }
.stats--single{ grid-template-rows:auto; }

/* the two vertical hairlines that split the panel into thirds */
.stats__rule{
  position:absolute;
  top:var(--rule-top,0);
  bottom:0;
  width:1px;
  background:var(--rule);
  pointer-events:none;
}
.stats__rule:nth-of-type(1){ left:33.3333%; }
.stats__rule:nth-of-type(2){ left:66.6667%; }

.stat{ padding:0 calc(51 * var(--u)) 0 calc(57 * var(--u)); }
.stat__label,
.stat__desc{
  margin:0;
  font-size:calc(28 * var(--u));
  line-height:1.321;
}
.stat__value{
  margin:0;
  font-size:calc(40 * var(--u));
  font-weight:700;
  color:var(--red);
  line-height:1.35;
}
.stat__value--long{ line-height:1.321; }
.stat__desc b{ font-weight:600; }
.stat__icon{
  float:right;
  width:calc(var(--iw,70) * var(--u));
  height:auto;
  margin:0 0 calc(10 * var(--u)) calc(20 * var(--u));
}
sub,sup{ font-size:.62em; line-height:0; }

/* Period labels that sit inside the stats grid (Social pillar).
   The negative margin trims the grid row-gap down to the 44px the design uses
   between a period label and the first figure underneath it. */
.stats__period{
  margin:0 0 calc(-28 * var(--u));
  padding-left:calc(57 * var(--u));
  font-size:calc(32 * var(--u));
  font-weight:700;
  color:var(--red);
  line-height:1.3125;
}

/* ---------- more information ---------------------------------------- */
.more-info{
  margin-top:calc(142 * var(--u));
  padding-bottom:calc(78 * var(--u));
  text-align:center;
  font-size:calc(28 * var(--u));
  line-height:1.321;
}
.more-info a{ color:var(--red); text-decoration:underline; }

/* ---------- get in touch -------------------------------------------- */
.contact{
  background:var(--grey);
  padding:calc(78 * var(--u)) 0 calc(96 * var(--u));
}
.contact__title{
  margin:0;
  font-size:calc(50 * var(--u));
  font-weight:700;
  color:var(--red);
  line-height:1.2;
}
.contact__text{
  margin:calc(40 * var(--u)) 0 calc(44 * var(--u));
  font-size:calc(28 * var(--u));
  line-height:1.321;
}

/* ---------- 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,.58);
  border:0;
  padding:0;
  cursor:pointer;
}
.menu__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:calc(632 * var(--u));
  background:#000;
  padding:calc(239 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u)) calc(54 * var(--u));
  transform:translateX(100%);
  transition:transform .3s ease;
  overflow-y:auto;
}
.menu[data-open="true"] .menu__panel{ transform:none; }

.menu__close{
  position:absolute;
  top:calc(130 * var(--u));
  right:calc(118 * var(--u));
  width:calc(44 * var(--u));
  height:calc(44 * var(--u));
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.menu__close::before,
.menu__close::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:calc(4 * var(--u));
  background:#fff;
}
.menu__close::before{ transform:rotate(45deg); }
.menu__close::after{ transform:rotate(-45deg); }

.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list a{
  display:block;
  font-family:Avenir,"Avenir Next","IBM Plex Sans",sans-serif;
  font-size:calc(18 * var(--u));
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.2;
  color:#fff;
  text-decoration:none;
  padding:calc(14.7 * var(--u)) 0;
  text-transform:uppercase;
}
.menu__list a:hover,.menu__list a:focus-visible{ color:var(--red); }
.menu__list--sub{ padding-left:calc(24 * var(--u)); }


/* ====================================================================
   MOBILE  —  390 px artboard
   ==================================================================== */
@media (max-width:899.98px){

  :root{
    --u: calc(min(100vw, 560px) / 390);
    --container: calc(318 * var(--u));
  }

  /* header ---------------------------------------------------------- */
  .site-header{
    padding:calc(26 * var(--u)) calc(40 * var(--u)) 0 calc(36 * var(--u));
    align-items:center;
  }
  .site-header__logo{
    width:calc(142 * var(--u));
    margin:calc(-12 * var(--u)) 0 0 calc(-14 * var(--u));
  }
  .burger{
    margin-top:0;
    width:calc(34 * var(--u));
    height:calc(20 * var(--u));
  }
  .burger span{ height:calc(3 * var(--u)); }

  /* hero ------------------------------------------------------------ */
  .hero{ aspect-ratio:390 / 700; height:auto; }
  .hero__img{
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% top;
  }
  .hero__inner{
    padding:0 calc(36 * var(--u));
    align-items:stretch;
  }
  /* The headline measures 12.995em end to end, so the size that fits on one
     line is set by the narrowest viewport in this band: at 768px the column
     is 664.6px, which caps the type at 35.6u — 34u leaves a little air. The
     design's 36u would overrun by 7px there. */
  .hero__title{
    margin-top:calc(84 * var(--u));
    font-size:calc(34 * var(--u));
    line-height:1.333;
  }
  .hero__badge{
    width:calc(318 * var(--u));
    margin-top:calc(34 * var(--u));
    align-self:flex-end;
  }
  .hero .btn--hero{
    width:calc(200 * var(--u));
    height:calc(46 * var(--u));
    margin-top:calc(37 * var(--u));
    align-self:flex-end;
    font-size:calc(19 * var(--u));
  }

  /* buttons --------------------------------------------------------- */
  .btn{ width:calc(218 * var(--u)); height:calc(54 * var(--u)); }
  .btn-row{ margin-top:calc(46 * var(--u)); }

  /* messages -------------------------------------------------------- */
  .messages{ padding-top:calc(40 * var(--u)); }
  .messages__grid{
    grid-template-columns:1fr;
    gap:calc(82 * var(--u));
  }
  .msg__card{ aspect-ratio:318 / 520; }
  .msg__title{
    padding:calc(30 * var(--u)) calc(34 * var(--u)) 0;
    font-size:calc(34 * var(--u));
    line-height:1.32;
  }
  .msg .btn{ margin-top:calc(18 * var(--u)); }

  /* pillars --------------------------------------------------------- */
  .pillars{ padding-top:calc(90 * var(--u)); }
  .pillars__heading{
    font-size:calc(48 * var(--u));
    padding-inline:calc(36 * var(--u));
  }
  .pillars__slant{ width:calc(302 * var(--u)); margin-top:calc(8 * var(--u)); }

  .pillar{ margin-top:calc(82 * var(--u)); }
  .pillar:first-of-type{ margin-top:calc(64 * var(--u)); }
  .pillar__head{ gap:calc(16 * var(--u)); }
  .pillar__title{
    font-size:calc(28 * var(--u));
    /* keeps the long pillar names breaking onto two lines, as in the design */
    max-width:calc(200 * var(--u));
    text-align:center;
    white-space:normal;
  }
  .pillar__intro{
    max-width:none;
    margin-top:calc(34 * var(--u));
    font-size:calc(17 * var(--u));
    line-height:1.32;
  }

  /* stat panel ------------------------------------------------------ */
  .panel{
    margin-top:calc(44 * var(--u));
    padding:calc(28 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
  }
  .panel__period{
    padding-left:0;
    margin-bottom:calc(18 * var(--u));
    font-size:calc(19 * var(--u));
  }

  .stats{ display:block; }
  .stats__rule{ display:none; }
  .stats__period{
    margin:calc(26 * var(--u)) 0 calc(18 * var(--u));
    padding-left:0;
    font-size:calc(19 * var(--u));
  }
  .stats__period:first-child{ margin-top:0; }
  .stats__period:empty,
  .stats__period--spacer{ display:none; }

  .stat{
    padding:calc(22 * var(--u)) 0;
    border-top:1px solid var(--rule);
    overflow:hidden;            /* contain the floated icon */
  }
  .stat:first-of-type{ border-top:0; padding-top:0; }
  .stats__period:not(.stats__period--spacer) + .stat{ border-top:0; padding-top:0; }

  .stat__label,
  .stat__desc{ font-size:calc(17 * var(--u)); line-height:1.35; }
  .stat__value{ font-size:calc(26 * var(--u)); line-height:1.32; }
  .stat__icon{
    width:calc(var(--iw,70) * var(--u) * .8);
    margin:0 0 calc(8 * var(--u)) calc(14 * var(--u));
  }

  /* more info / contact --------------------------------------------- */
  .more-info{
    margin-top:calc(70 * var(--u));
    padding-bottom:calc(74 * var(--u));
    font-size:calc(17 * var(--u));
  }
  .contact{
    padding:calc(64 * var(--u)) 0 calc(70 * var(--u));
    text-align:center;
  }
  .contact__title{ font-size:calc(34 * var(--u)); }
  .contact__text{
    margin:calc(30 * var(--u)) 0 calc(34 * var(--u));
    font-size:calc(17 * var(--u));
  }
  .contact .btn{ margin-inline:auto; }

  /* menu ------------------------------------------------------------ */
  .menu__panel{
    width:calc(355 * var(--u));
    padding:calc(90 * var(--u)) calc(24 * var(--u)) calc(60 * var(--u)) calc(35 * var(--u));
  }
  .menu__close{
    top:calc(40 * var(--u));
    right:calc(38 * var(--u));
    width:calc(18 * var(--u));
    height:calc(18 * var(--u));
  }
  .menu__close::before,.menu__close::after{ height:calc(3 * var(--u)); }
  .menu__list a{
    font-size:calc(16 * var(--u));
    padding:calc(16.4 * var(--u)) 0;
  }
  .menu__list--sub{ padding-left:calc(23 * var(--u)); }
}

/* Under 768px the column is too narrow for the headline at 34u, so the whole
   hero lockup steps down together: the type to 24u — the largest that still
   fits on one line on a 390px phone — and the badge and button by the same
   2/3, so they do not tower over it. */
@media (max-width:767.98px){
  .hero__title{ font-size:calc(24 * var(--u)); }
  .hero__badge{
    width:calc(212 * var(--u));
    margin-top:calc(22.6 * var(--u));
  }
  .hero .btn--hero{
    width:calc(133 * var(--u));
    height:calc(30.7 * var(--u));
    margin-top:calc(24.7 * var(--u));
    font-size:calc(12.7 * var(--u));
  }
}

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

html{ scroll-behavior:smooth; }