/* ============================================================
   TYPE — the MAIN pairing, shared with mainmaastricht.com.
   Horizon (headings) is one very wide, bold, capital face, so it
   is set in caps with open tracking and at smaller sizes than the
   old serif; the accent inside a heading is a colour shift in the
   same face, never a second family. Inter carries everything read.
   Loaded last: it has the final word over the older layers.
   ============================================================ */
@font-face{
  font-family:"Horizon";
  src:url("../assets/fonts/Horizon.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- headings ---------- */
.display, .display-mix, .programme .display{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.4rem,3.2vw,2.5rem);
  line-height:1.2; letter-spacing:.01em;
  max-width:22ch;
}
.display i, .display-mix i{
  font-family:var(--display); font-style:normal; font-weight:700;
  letter-spacing:inherit; color:var(--primary);
}

/* the hero line: the largest Horizon on the page */
.hero-head{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.55rem,4.6vw,3.9rem);
  line-height:1.14; letter-spacing:.01em;
  max-width:none;
}

/* the experience console */
.experience-tab{
  font:700 clamp(.9rem,1.5vw,1.25rem)/1 var(--display);
  letter-spacing:.02em;
}
.experience-tab span, .experience-tab small{ font-family:var(--font); }
.experience-copy h3{
  font:700 clamp(1.25rem,2.5vw,2.1rem)/1.18 var(--display);
  text-transform:uppercase; letter-spacing:.01em;
}
.experience-copy h3 i{ font-style:normal; font-weight:700; }
.experience-word{
  font:700 clamp(3.6rem,10vw,8rem)/.8 var(--display);
  letter-spacing:0;
}

/* figures read as headings too */
.stat b, .fact b{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:0;
}
.tl-card h3{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; font-size:clamp(1.1rem,1.8vw,1.4rem); letter-spacing:.02em;
}

/* ---------- body ---------- */
.reveal{ font-weight:300; letter-spacing:-.015em; }
.count b{ font-family:var(--font); font-weight:200; }

@media(max-width:760px){
  .experience-tab{ font-size:.82rem; }
  .experience-word{ font-size:20vw; }
}

/* the nav's link colour out-ranks .cta-sm's own white — keep the pill's label white */
.nav-set .cta-sm, .nav-set .cta-sm:hover{ color:#fff; }

/* ---------- nav: the way back to MAIN ---------- */
.nav-set .nav-main{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.56rem 1.1rem; border-radius:100px;
  border:1px solid rgba(122,108,255,.4); background:rgba(122,108,255,.06);
  font-size:.78rem; font-weight:500; color:var(--tertiary); white-space:nowrap;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.nav-set .nav-main:hover{ border-color:rgba(122,108,255,.8); background:rgba(122,108,255,.14); color:#fff; }
.nav-main b{ font-weight:400; color:var(--primary); }
@media(max-width:920px){
  /* the phone nav hides its links — this one stays, just shorter */
  .nav-set.right{ gap:.5rem; }
  .nav-set .nav-main{ display:inline-flex; padding:.5rem .85rem; font-size:.72rem; }
  .nav-main span{ display:none; }
}
@media(max-width:480px){
  /* logo + two pills have to share a phone's width */
  .nav{ gap:.6rem; }
  .flag{ width:104px; }
  .nav-set .nav-main{ padding:.46rem .7rem; font-size:.68rem; }
  .cta-sm{ padding:.5rem .85rem; font-size:.68rem; }
}