/* ============================================================
   Programme page — Clean Energy Science & Engineering
   Consolidated, responsive, academic UI layer
   ============================================================ */

   :root {
    --graphite:#181B1F;
    --graphite2:#22262B;
    --bone:#F3EFE6;
    --card:#F7F4ED;
    --wash-warm:#F1E7D7;
    --wash-cool:#E7ECEE;
    --amber:#F15C28;
    --amber-deep:#C8431A;
    --blue:#1668A8;
    --green:#5C7A3A;
    --rule:#CFC8B8;
    --rule-dk:#34383D;
    --ink2:#585C61;
    --ink3:#3A3E43;
    --sans:'IBM Plex Sans',sans-serif;
    --serif:'Spectral',Georgia,'Times New Roman',serif;
    --maxw:1140px;
    --radius:5px;
    --motion-ease:cubic-bezier(.22,1,.36,1);
    --motion-slow:900ms;
    --motion-med:700ms;
    --motion-fast:420ms;
    --hero-img:url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=80');
  }
  
  html,
  body{
    width:100%;
    overflow-x:hidden;
  }
  
  body{
    font-family:var(--sans);
  }
  
  a{
    color:inherit;
    text-decoration:none;
  }
  
  img,
  video{
    display:block;
    max-width:100%;
  }
  
  button,
  .btn,
  a[class*="btn"],
  .sub-nav-cta{
    border-radius:var(--radius);
    font-family:var(--sans);
  }
  
  .programme-page{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--bone);
  }
  
  .wrap{
    width:min(var(--maxw), calc(100% - 80px));
    margin:0 auto;
  }
  
  .display,
  .sec-h2,
  .editorial-lead,
  .ed-point strong,
  .area-title,
  .arch-t,
  .track h4,
  .project-card .pv,
  .cred-stat,
  .cred-title,
  .research-metrics .rmv,
  .af-body h3,
  .af-stats .s .sv,
  .sr-stat,
  .innovation-card h3,
  .capability h3,
  .career-band h3,
  .pathbox .pt,
  .pathbox .pmeta,
  .subpage-title,
  .apply-title{
    font-family:var(--serif);
  }
  
  .body-p,
  .lede,
  .sec-lead,
  .sec-body{
    color:var(--ink3);
    line-height:1.75;
  }
  
  .body-p{
    max-width:70ch;
    margin:0 0 16px;
    font-size:15px;
  }
  
  .lede,
  .sec-lead{
    max-width:66ch;
    font-size:16px;
  }
  
  .sec-h2{
    font-size:clamp(27px, 3vw, 42px);
    font-weight:500;
    line-height:1.12;
    letter-spacing:-.5px;
    color:var(--graphite);
    margin:0 0 14px;
  }
  
  .sec-h2 em{
    font-style:italic;
    font-weight:400;
    color:var(--amber-deep);
  }
  
  .sec-h2.light,
  .lede.light{
    color:#fff;
  }
  
  .lede.light{
    color:rgba(255,255,255,.66);
  }
  
  

  
  /* ============================================================
   Programme Hero
   Clean Energy Science & Engineering identity
   ============================================================ */

.phero {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  background: var(--graphite);
  color: var(--bone);
  overflow: hidden;
}

.phero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=80");
  background-size: cover;
  background-position: center;
  filter: saturate(.72) contrast(1.04);
}

.phero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(18,21,25,.56),
      rgba(18,21,25,.78) 58%,
      rgba(18,21,25,.96)
    ),
    linear-gradient(
      90deg,
      rgba(18,21,25,.72),
      rgba(18,21,25,.18) 76%
    );
}

.phero .wrap {
  padding-top: 96px;
  padding-bottom: 82px;
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: 20px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9DA1A6;
}

.crumb a {
  color: inherit;
  text-decoration: none;
}

.crumb a:hover {
  color: var(--amber);
}

.crumb .sep {
  color: #5C6066;
}

.crumb .cur {
  color: var(--amber);
}

.hero-eyebrow {
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--amber);
}

.phero h1 {
  max-width: 17ch;
  margin: 0;
  color: #FBF8F1;
  font-family: var(--serif);
  font-size: clamp(38px, 5.3vw, 66px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.7px;
  text-shadow: 0 1px 30px rgba(0,0,0,.25);
}

.phero h1 em {
  font-style: italic;
  font-weight: 400;
  color: #FBF8F1;
}

.phero .sub {
  margin-top: 24px;
  max-width: 60ch;
  color: #DAD5C9;
  font-family: var(--serif);
  font-size: clamp(17px, 1.65vw, 20px);
  font-weight: 300;
  line-height: 1.62;
}

.phero-cta {
  margin-top: 34px;
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  align-items: center;
}

.phero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.phero .btn:hover {
  transform: translateY(-1px);
}

.phero .btn.solid {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

.phero .btn.solid:hover {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  color: #fff;
}

.phero .btn.light {
  background: transparent;
  border-color: rgba(243,239,230,.58);
  color: var(--bone);
}

.phero .btn.light:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--graphite);
}

.hero-note {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: #C9C4B8;
}

/* Responsive hero */
@media (max-width: 900px) {
  .phero {
    min-height: 560px;
  }

  .phero .wrap {
    padding-top: 92px;
    padding-bottom: 72px;
  }

  .phero h1 {
    max-width: 15ch;
  }
}

@media (max-width: 760px) {
  .phero {
    min-height: 620px;
  }

  .phero .wrap {
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .phero h1 {
    font-size: clamp(36px, 11vw, 52px);
    max-width: 13ch;
  }

  .phero .sub {
    font-size: 16px;
    line-height: 1.62;
  }

  .phero-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .phero .btn {
    width: 100%;
  }

  .hero-note {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .phero h1 {
    font-size: 36px;
  }

  .crumb,
  .hero-eyebrow {
    font-size: 10px;
    line-height: 1.5;
  }

  .phero .sub {
    font-size: 15px;
  }
}
  
 
  

 /* ============================================================
   02 Why this programme
   Rationale / editorial overview
   ============================================================ */

.why-programme {
  background: var(--card);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 54px;
  align-items: center;
}

.editorial-lead {
  max-width: 48ch;
  margin: 0 0 18px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 400;
  line-height: 1.42;
}

.editorial-lead em {
  color: var(--amber);
  font-style: italic;
}

.body-p {
  max-width: 68ch;
  margin: 0;
  color: var(--ink3);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
}

.body-p + .body-p {
  margin-top: 15px;
}

.editorial-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.ed-point {
  padding: 14px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bone);
}

.ed-point strong {
  display: block;
  margin-bottom: 4px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

.ed-point span {
  display: block;
  color: var(--ink2);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
}

.editorial-media {
  aspect-ratio: 4 / 5;
}

.media-slot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}

.media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}

.media-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(24,27,31,0),
      rgba(24,27,31,.48)
    );
}

.media-slot .slot-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  background: rgba(24,27,31,.58);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.media-slot .slot-label {
  position: absolute;
  left: 14px;
  bottom: 13px;
  z-index: 3;
  color: rgba(255,255,255,.78);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.caption {
  margin-top: 12px;
  color: var(--ink2);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
}

/* Responsive */
@media (max-width: 960px) {
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .editorial-media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

@media (max-width: 560px) {
  .editorial-points {
    grid-template-columns: 1fr;
  }
}
  
  
  
  
  
  /* ============================================================
     Credibility / research strength
     ============================================================ */
  
  .cred-masonry{
    columns:3;
    column-gap:16px;
    margin-top:30px;
  }
  
  .cred-card{
    position:relative;
    overflow:hidden;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    margin:0 0 16px;
    padding:22px 22px 24px;
    border:1px solid var(--rule);
    background:var(--bone);
  }
  
  .cred-card.light,
  .cred-card.featured{background:var(--card)}
  .cred-card.dark{background:var(--graphite);border-color:var(--rule-dk);color:var(--bone)}
  .cred-card.amber{background:var(--amber);border-color:var(--amber);color:#fff}
  .cred-card.blue{background:rgba(22,104,168,.10);border-color:rgba(22,104,168,.32)}
  
  .cred-tag{
    margin-bottom:14px;
    color:var(--ink2);
    font-size:10px;
  }
  
  .cred-card.dark .cred-tag{color:#9DA1A6}
  .cred-card.amber .cred-tag{color:rgba(255,255,255,.85)}
  
  .cred-stat{
    color:var(--amber);
    font-size:40px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.5px;
    font-variant-numeric:lining-nums;
  }
  
  .cred-card.blue .cred-stat{color:var(--blue)}
  .cred-card.dark .cred-stat{color:var(--amber)}
  .cred-card.amber .cred-stat{color:#fff}
  
  .cred-stat-sub{
    margin-top:6px;
    color:var(--ink2);
    font-size:12px;
  }
  
  .cred-card.dark .cred-stat-sub{color:#A7A296}
  .cred-card.amber .cred-stat-sub{color:rgba(255,255,255,.85)}
  
  .cred-title{
    margin:12px 0 8px;
    color:var(--graphite);
    font-size:17px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.2px;
  }
  
  .cred-title.lg{font-size:21px}
  .cred-title.xl{font-size:25px}
  .cred-card.dark .cred-title,
  .cred-card.amber .cred-title{color:#FBF8F1}
  
  .cred-body{
    margin:0;
    color:var(--ink2);
    font-size:13px;
    line-height:1.6;
  }
  
  .cred-card.dark .cred-body{color:#B7B2A6}
  .cred-card.amber .cred-body{color:rgba(255,255,255,.9)}
  
  .cred-deco{
    position:absolute;
    right:14px;
    bottom:-6px;
    color:rgba(24,27,31,.05);
    pointer-events:none;
    font-family:var(--serif);
    font-size:64px;
    font-style:italic;
    font-weight:600;
    line-height:1;
  }
  
  .cred-card.dark .cred-deco,
  .cred-card.amber .cred-deco{color:rgba(255,255,255,.08)}
  
  .cred-media,
  .cred-media-wide,
  .cred-video{
    position:relative;
    overflow:hidden;
    margin-bottom:14px;
    border:1px solid var(--rule);
    border-radius:var(--radius);
    background:var(--graphite2);
  }
  
  .cred-media{aspect-ratio:3/2}
  .cred-media-wide{aspect-ratio:3/1}
  .cred-video{aspect-ratio:16/9;border-color:var(--rule-dk)}
  
  .cred-media img,
  .cred-media-wide img,
  .cred-video img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.9) contrast(1.03);
  }
  
  .cred-video .play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .cred-video .play svg{
    width:16px;
    height:16px;
    margin-left:3px;
    fill:var(--graphite);
  }

  .cred-media {
    position: relative;
    overflow: hidden;
  }
  
  .cred-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  /* ============================================================
     Research achievements
     ============================================================ */
  
  .research-metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:26px;
    border-top:1px solid var(--graphite);
  }
  
  .research-metrics .rm{
    padding:26px 24px 4px;
    border-right:1px solid var(--rule);
  }
  
  .research-metrics .rm:last-child{border-right:none}
  
  .research-metrics .rmv{
    color:var(--graphite);
    font-size:clamp(30px,3.4vw,42px);
    font-weight:500;
    line-height:1;
    letter-spacing:-.6px;
    font-variant-numeric:lining-nums;
  }
  
  .research-metrics .rml{
    margin-top:10px;
    color:var(--ink2);
    font-family:var(--sans);
    font-size:12px;
    line-height:1.5;
  }
  
  .ach-list{
    display:flex;
    flex-direction:column;
    gap:26px;
    margin-top:54px;
  }
  
  .ach-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border:1px solid var(--rule);
    background:var(--bone);
  }
  
  .ach-feature .af-img{
    position:relative;
    min-height:320px;
  }
  
  .ach-feature .af-img img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.9) contrast(1.03);
  }
  
  .ach-feature.flip .af-img{order:2}
  .ach-feature.flip .af-body{order:1}
  
  .af-body{
    padding:38px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  
  .af-kicker{
    margin-bottom:12px;
    color:var(--amber-deep);
    font-size:10.5px;
  }
  
  .af-body h3{
    margin:0 0 14px;
    color:var(--graphite);
    font-size:clamp(21px,2.1vw,27px);
    font-weight:500;
    line-height:1.2;
    letter-spacing:-.3px;
  }
  
  .af-body p{
    margin:0;
    color:var(--ink3);
    font-size:14px;
    line-height:1.7;
  }
  
  .af-stats{
    display:flex;
    gap:28px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--rule);
  }
  
  .af-stats .s .sv{
    color:var(--graphite);
    font-size:22px;
    font-weight:600;
    line-height:1;
    font-variant-numeric:lining-nums;
  }
  
  .af-stats .s .sl{
    margin-top:5px;
    color:var(--ink2);
    font-family:var(--sans);
    font-size:11px;
  }
  
  .school-research{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:34px;
  }
  
  .sr-card{
    padding:24px;
    border:1px solid var(--rule);
    background:var(--card);
  }
  
  .sr-school{
    margin-bottom:14px;
    font-size:10.5px;
  }
  
  .sr-card.chem .sr-school{color:var(--blue)}
  .sr-card.mech .sr-school{color:var(--amber-deep)}
  .sr-card.agri .sr-school{color:var(--green)}
  
  .sr-stat{
    color:var(--graphite);
    font-size:34px;
    font-weight:500;
    line-height:1;
    letter-spacing:-.5px;
    font-variant-numeric:lining-nums;
  }
  
  .sr-sub{
    margin-top:7px;
    color:var(--ink2);
    font-family:var(--sans);
    font-size:12px;
  }
  
  .sr-body{
    margin:14px 0 0;
    padding-top:14px;
    border-top:1px solid var(--rule);
    color:var(--ink3);
    font-size:13px;
    line-height:1.6;
  }

  /* read-more CTA inside achievement features */
.af-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  margin-top:24px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--amber-deep);
  transition:color .25s var(--motion-ease);
}
.af-link span{
  position:relative;
  padding-bottom:3px;
}
.af-link span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:0;
  background:currentColor;
  transition:width .3s var(--motion-ease);
}
.af-link svg{
  width:15px;
  height:15px;
  transition:transform .25s var(--motion-ease);
}
.af-link:hover{color:var(--amber)}
.af-link:hover span::after{width:100%}
.af-link:hover svg{transform:translateX(4px)}
  
  /* ============================================================
     Programme innovations
     ============================================================ */
  
  .innovation-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:32px;
  }
  
  .innovation-card{
    display:grid;
    grid-template-columns:82px 1fr;
    gap:18px;
    align-items:start;
    padding:22px;
    border:1px solid var(--rule);
    background:var(--bone);
  }
  
  .innovation-mark{
    width:82px;
    height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--rule);
    background:var(--card);
    color:var(--amber);
    font-family:var(--serif);
    font-size:28px;
    font-style:italic;
  }
  
  .innovation-card h3{
    margin:0 0 8px;
    color:var(--graphite);
    font-size:20px;
    font-weight:600;
    line-height:1.25;
  }
  
  .innovation-card p{
    margin:0;
    color:var(--ink2);
    font-size:13.5px;
    line-height:1.65;
  }
  
  
  
  /* ============================================================
     International pathway / explore / apply
     ============================================================ */
  
  .international-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:46px;
    align-items:start;
  }
  
  .pathbox{
    padding:30px;
    border:1px solid var(--rule-dk);
    background:var(--graphite);
    color:var(--bone);
  }
  
  .pathbox .pk{
    margin-bottom:12px;
    color:var(--amber);
    font-size:11px;
  }
  
  .pathbox .pt{
    color:#FBF8F1;
    font-size:23px;
    font-weight:600;
    line-height:1.25;
  }
  
  .pathbox .pd{
    margin-top:12px;
    color:#A7A296;
    font-size:14px;
    line-height:1.65;
  }
  
  .pathbox .pmeta{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--rule-dk);
    color:#C9C4B8;
    font-size:14px;
    font-style:italic;
  }
  
  .international-list{
    list-style:none;
    margin:20px 0 0;
    padding:0;
    border-top:1px solid var(--rule);
  }
  
  .international-list li{
    display:flex;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--rule);
    color:var(--ink3);
    font-size:14px;
    line-height:1.58;
  }
  
  .international-list li::before{
    content:"→";
    margin-top:-1px;
    color:var(--amber);
    font-family:var(--serif);
  }
  
  .subpage-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:30px;
  }
  
  .subpage-card{
    display:block;
    padding:24px;
    border:1px solid var(--rule);
    background:var(--bone);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  .subpage-card:hover{
    transform:translateY(-3px);
    border-color:var(--graphite);
    box-shadow:var(--shadow);
  }
  
  .subpage-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border:1px solid var(--rule);
    background:var(--card);
  }
  
  .subpage-icon svg{
    width:18px;
    height:18px;
  }
  
  .subpage-title{
    margin-bottom:7px;
    color:var(--graphite);
    font-size:17px;
    font-weight:600;
  }
  
  .subpage-desc{
    margin-bottom:13px;
    color:var(--ink2);
    font-size:12.5px;
    line-height:1.55;
  }
  
  .subpage-link{
    color:var(--amber-deep);
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:700;
  }
  
  .apply-band{
    background:var(--graphite);
    color:var(--bone);
  }
  
  .apply-band .wrap{
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;
    padding:56px 0;
  }
  
  .apply-eyebrow{
    margin-bottom:10px;
    color:var(--amber);
    font-size:11px;
  }
  
  .apply-title{
    margin-bottom:8px;
    color:#FBF8F1;
    font-size:clamp(22px,2.6vw,32px);
    font-weight:500;
    line-height:1.25;
  }
  
  .apply-sub{
    max-width:52ch;
    color:#A7A296;
    font-size:14px;
    line-height:1.6;
  }
  
  .apply-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  
  .apply-actions .btn{
    text-align:center;
  }
  
  
  .u-mt-sm{
    margin-top:14px;
  }
  
  .u-mt-md{
    margin-top:18px;
  }
  
  .note-lead{
    margin-top:18px;
    color:var(--ink2);
    font-size:13.5px;
  }
  
  .cred-stat-word{
    font-size:30px;
  }
  
  /* ============================================================
     Reveal animation
     ============================================================ */
  
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .55s ease, transform .55s ease;
  }
  
  .reveal.in{
    opacity:1;
    transform:none;
  }
  
  @media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
      scroll-behavior:auto !important;
      transition-duration:.001ms !important;
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
    }
    .reveal{opacity:1;transform:none}
  }
  
  /* ============================================================
     Responsive layer
     ============================================================ */
  
  @media(max-width:1200px){
    .wrap{width:min(100% - 64px, var(--maxw))}
    .areas-grid{grid-template-columns:repeat(3,1fr)}
    .subpage-grid{grid-template-columns:repeat(2,1fr)}
  }
  
  @media(max-width:992px){
    .sub-nav{
      top:56px;
      padding:0 24px;
      overflow-x:auto;
      scrollbar-width:none;
    }
  
    .sub-nav::-webkit-scrollbar{display:none}
    .sub-nav-label{display:none}
    .sub-nav-cta{display:none}
  
    .facts-bar{grid-template-columns:repeat(2,1fr)}
    .fact-item:nth-child(2n){border-right:none}
    .fact-item:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  
    .editorial-grid,
    .arch-grid,
    .outcomes-head,
    .international-grid{
      grid-template-columns:1fr;
      gap:34px;
    }
  
    .areas-head{
      grid-template-columns:1fr;
      gap:14px;
    }
  
    .track-grid,
    .research-metrics,
    .school-research,
    .capability-grid{
      grid-template-columns:1fr 1fr;
    }
  
    .innovation-grid{grid-template-columns:1fr}
    .cred-masonry{columns:2}
  
    .ach-feature,
    .ach-feature.flip{
      grid-template-columns:1fr;
    }
  
    .ach-feature.flip .af-img,
    .ach-feature.flip .af-body{
      order:initial;
    }
  
    .career-band{
      grid-template-columns:1fr;
    }
  
    .apply-band .wrap{
      grid-template-columns:1fr;
      gap:26px;
    }
  
    .apply-actions{
      flex-direction:row;
      flex-wrap:wrap;
    }
  
    .programme-nav-toggle{
      display:inline-flex;
    }
  
    .nav{
      flex-wrap:wrap;
    }
  
    .nav:not(.is-open) .nav-link,
    .nav:not(.is-open) .nav-cta,
    .nav:not(.is-open) .nav-social,
    .nav:not(.is-open) .nav-socials{
      display:none !important;
    }
  
    .nav.is-open .nav-link,
    .nav.is-open .nav-cta,
    .nav.is-open .nav-social,
    .nav.is-open .nav-socials{
      display:flex !important;
      width:100%;
      justify-content:flex-start;
      padding:13px 0;
      border-top:1px solid rgba(255,255,255,.10);
    }
  }
  
  @media(max-width:768px){
    .wrap{width:min(100% - 44px, var(--maxw))}
  
    .phero{
      min-height:620px;
    }
  
    .phero .wrap{
      padding:116px 0 58px;
    }
  
    .phero h1{
      font-size:clamp(36px, 12vw, 54px);
      letter-spacing:-1.2px;
    }
  
    .phero-cta,
    .apply-actions{
      flex-direction:column;
      align-items:stretch;
    }
  
    .phero-cta .btn,
    .apply-actions .btn{
      width:100%;
    }
  
    section.band,
    .sec{
      padding:62px 0;
    }
  
    .facts-bar,
    .areas-grid,
    .track-grid,
    .project-strip,
    .research-metrics,
    .school-research,
    .capability-grid,
    .subpage-grid{
      grid-template-columns:1fr;
    }
  
    .fact-item,
    .fact-item:nth-child(2n),
    .fact-item:nth-child(-n+2){
      border-right:none;
      border-bottom:1px solid var(--rule);
    }
  
    .fact-item:last-child{border-bottom:none}
  
    .editorial-points{
      grid-template-columns:1fr;
    }
  
    .arch-row{
      grid-template-columns:1fr;
    }
  
    .arch-label{
      border-left:none;
      border-top:3px solid var(--amber);
    }
  
    .arch-label.blue{border-top-color:var(--blue)}
    .arch-label.green{border-top-color:var(--green)}
  
    .research-metrics .rm{
      border-right:none;
      border-bottom:1px solid var(--rule);
      padding:22px 0;
    }
  
    .research-metrics .rm:last-child{border-bottom:none}
  
    .af-body{
      padding:30px 24px;
    }
  
    .af-stats{
      flex-wrap:wrap;
      gap:18px;
    }
  
    .innovation-card{
      grid-template-columns:1fr;
    }
  
    .innovation-mark{
      width:58px;
      height:58px;
      font-size:23px;
    }
  
    .cred-masonry{columns:1}
  
    .sub-nav-link{
      padding:13px 12px;
      font-size:12px;
    }
  }
  
  @media(max-width:480px){
    .wrap{width:min(100% - 36px, var(--maxw))}
  
    .phero .lede,
    .lede,
    .sec-lead{
      font-size:15px;
    }
  
    .sec-h2{
      font-size:26px;
    }
  
    .area-card{
      min-height:auto;
    }
  
    .ach-feature .af-img{
      min-height:240px;
    }
  
    .pathbox,
    .sr-card,
    .capability,
    .subpage-card{
      padding:22px;
    }
  }