/* ==========================================================================
   ICanLearnProgram International — LAYOUT & COMPONENTS

   Colours, fonts and spacing all come from theme.css. If you want to
   restyle the site, edit theme.css first — you will rarely need this file.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--on-light);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--ink); }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: 10px 18px; border-radius: 0 0 12px 12px; font-weight: 700;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------- paper grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------- page scaffold */
.wrap {
  width: 100%; max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.band { position: relative; padding-block: var(--section-pad); }
.band--ink        { background: var(--ink); color: var(--on-dark); }
.band--ink-deep   { background: var(--ink-deep); color: var(--on-dark); }
.band--parchment  { background: var(--parchment); }
.band--parchment2 { background: var(--parchment-2); }

/* Grid children default to min-width:auto, which lets a wide child (a form
   field, a row of tags) push a column past its share and force the whole page
   sideways. Every layout grid on the page opts out of that. */
.launch > *, .duo > *, .boards > *, .paths > *, .steps > *,
.founder > *, .people > *, .enrol > *, .foot-grid > *,
.field-grid > *, .mosaic > *, .playtime > * { min-width: 0; }

/* soft gold light sources on the dark bands */
.band--ink::before, .band--ink-deep::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 0%, rgba(201,162,39,0.13), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(232,135,58,0.10), transparent 70%);
}
.band > .wrap { position: relative; z-index: 1; }

/* ------------------------------------------------------------ type bits */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 22px;
}
.band--ink .eyebrow, .band--ink-deep .eyebrow { color: var(--gold-bright); }
.eyebrow::before {
  content: ''; width: 34px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.h-xl { font-size: clamp(2.6rem, 7.2vw, 5.1rem); }
.h-lg { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.h-sm { font-size: clamp(1.15rem, 1.7vw, 1.35rem); letter-spacing: -0.01em; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62; color: var(--on-light-mute);
  max-width: 62ch;
}
.band--ink .lede, .band--ink-deep .lede { color: var(--on-dark-mute); }

.gold { color: var(--gold); }
.band--ink .gold, .band--ink-deep .gold { color: var(--gold-bright); }

/* hand-drawn gold underline under a hero word */
.mark {
  position: relative; white-space: nowrap;
  font-style: italic; font-variation-settings: 'SOFT' 80, 'WONK' 1;
}
.mark::after {
  content: ''; position: absolute; left: -1%; right: -1%; bottom: 0.04em;
  height: 0.2em; z-index: -1; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--acc-robotics));
  opacity: 0.9;
  transform: scaleX(0); transform-origin: left;
  animation: markIn 1s var(--ease-out) 0.75s forwards;
}
@keyframes markIn { to { transform: scaleX(1); } }

.section-head { max-width: 780px; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head .lede { margin-top: 20px; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 99px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast), background var(--t-fast),
              color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn--gold {
  background: linear-gradient(140deg, var(--gold-bright), var(--gold));
  color: #201705; box-shadow: 0 12px 30px rgba(201,162,39,0.32);
}
.btn--gold:hover { box-shadow: 0 20px 44px rgba(201,162,39,0.44); }

.btn--outline-dark { border-color: var(--hairline-dark); color: var(--on-dark); }
.btn--outline-dark:hover { border-color: var(--gold); background: rgba(201,162,39,0.1); }

.btn--outline-light { border-color: rgba(36,28,20,0.28); color: var(--on-light); }
.btn--outline-light:hover { border-color: var(--on-light); background: rgba(36,28,20,0.05); }

.btn--ink { background: var(--ink); color: var(--on-dark); box-shadow: var(--shadow-card); }
.btn--ink:hover { box-shadow: var(--shadow-lift); }

.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn .arw { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--gold); padding-bottom: 2px;
  transition: gap var(--t-fast) var(--ease-out), color var(--t-fast);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ============================================================ HEADER */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 8, 5, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(201,162,39,0.2);
  color: var(--on-dark);
  transition: background var(--t-mid), border-color var(--t-mid);
}
.site-head__in {
  display: flex; align-items: center; gap: 18px;
  min-height: 76px; padding-block: 12px;
}

.brand-lock {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; min-width: 0; margin-right: auto;
}
.brand-lock__logo {
  width: 50px; height: 50px; flex: none; border-radius: 50%;
  background: var(--ink-deep);
  border: 1px solid rgba(201,162,39,0.4);
  box-shadow: 0 0 0 4px rgba(201,162,39,0.08);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid);
}
.brand-lock:hover .brand-lock__logo {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 0 0 7px rgba(201,162,39,0.14);
}
.brand-lock__name {
  display: block; white-space: nowrap;
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  line-height: 1.15; letter-spacing: -0.01em;
}
.brand-lock__sub {
  display: block; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-bright); font-weight: 700;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 12px; border-radius: 99px; font-size: 14.5px; font-weight: 600;
  text-decoration: none; color: var(--on-dark-mute); white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--on-dark); background: rgba(246,239,223,0.07); }

.nav-toggle {
  display: none; width: 46px; height: 46px; flex: none;
  border-radius: 12px; background: transparent; color: var(--on-dark);
  border: 1px solid rgba(201,162,39,0.3);
}
.nav-toggle span {
  display: block; width: 19px; height: 1.8px; margin: 4px auto;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: block; order: 3; }
  .head-cta { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; gap: 2px;
    align-items: stretch; padding: 20px var(--page-gutter) 30px;
    background: var(--ink-deep);
    border-bottom: 1px solid var(--hairline-dark);
    box-shadow: var(--shadow-dark);
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid), visibility var(--t-mid);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 14px 16px; font-size: 17px; border-radius: var(--radius-sm); }
  .nav .btn { margin-top: 12px; }
}

/* ============================================================== HERO */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(56px, 8vw, 104px) clamp(70px, 9vw, 120px);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 46% at 8% 4%, rgba(201,162,39,0.22), transparent 72%),
    radial-gradient(40% 44% at 92% 12%, rgba(232,135,58,0.16), transparent 72%),
    radial-gradient(60% 50% at 62% 104%, rgba(31,133,119,0.14), transparent 72%);
}
/* faint contour lines, like a map of a route ahead */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' fill='none' stroke='%23c9a227' stroke-opacity='0.13'%3E%3Cpath d='M-40 120C120 40 260 200 420 120s180 40 260 0'/%3E%3Cpath d='M-40 220C120 140 260 300 420 220s180 40 260 0'/%3E%3Cpath d='M-40 320C120 240 260 400 420 320s180 40 260 0'/%3E%3Cpath d='M-40 420C120 340 260 500 420 420s180 40 260 0'/%3E%3Cpath d='M-40 520C120 440 260 600 420 520s180 40 260 0'/%3E%3C/svg%3E");
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.7rem, 6.6vw, 4.75rem); font-weight: 700; }
.hero .lede { margin-top: 26px; font-size: clamp(1.05rem, 1.45vw, 1.22rem); }
.hero .btn-row { margin-top: 36px; }

.hero__note {
  margin-top: 26px; font-size: 13.5px; color: var(--on-dark-mute);
  display: flex; align-items: center; gap: 9px;
}
.pip {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--acc-science);
  box-shadow: 0 0 0 4px rgba(31,133,119,0.22);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31,133,119,0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(31,133,119,0.05); }
}

/* --- overlapping photo cluster --- */
.cluster { position: relative; padding: 22px 0 46px; }
.cluster__main {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(246,239,223,0.14);
  box-shadow: var(--shadow-dark);
  aspect-ratio: 4 / 3.35;
}
.cluster__main img { width: 100%; height: 100%; object-fit: cover; }

.cluster__float {
  position: absolute; overflow: hidden;
  border-radius: var(--radius); border: 4px solid var(--parchment);
  box-shadow: var(--shadow-dark);
}
.cluster__float img { width: 100%; height: 100%; object-fit: cover; }
.cluster__float--a {
  width: 42%; aspect-ratio: 1 / 1.1; left: -7%; bottom: 4%;
  transform: rotate(-5deg);
  animation: floatA 7s ease-in-out infinite alternate;
}
.cluster__float--b {
  width: 31%; aspect-ratio: 1 / 1; right: -5%; top: 2%;
  transform: rotate(6deg);
  animation: floatB 8.5s ease-in-out infinite alternate;
}
@keyframes floatA { to { transform: rotate(-3deg) translateY(-12px); } }
@keyframes floatB { to { transform: rotate(4deg) translateY(10px); } }

.chip {
  position: absolute; z-index: 3;
  display: flex; align-items: baseline; gap: 8px;
  background: var(--paper); color: var(--on-light);
  padding: 11px 17px; border-radius: 99px;
  box-shadow: var(--shadow-lift);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.chip b {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--acc-robotics); line-height: 1;
}
.chip--one { right: 4%; bottom: 20%; }
.chip--two { left: 26%; top: -4px; }
.chip--two b { color: var(--acc-science); }

@media (max-width: 640px) {
  .cluster__float--a { width: 46%; left: -4%; }
  .cluster__float--b { display: none; }
  .chip--two { display: none; }
  .chip--one { right: 0; bottom: 8%; }
}

/* ------------------------------------------------------------- ticker
   The band is tilted and slightly oversized, which pushes its corners past
   the viewport — the clip wrapper absorbs that so the page never scrolls
   sideways. The padding gives the tilt room to breathe inside the clip, and
   the larger negative margin still lets the band bite into the sections
   above and below it by the same 22px. */
.ticker-clip {
  overflow: hidden;
  position: relative; z-index: 2;
  padding-block: 14px; margin-block: -36px;
}
.ticker {
  position: relative;
  background: linear-gradient(90deg, var(--gold), var(--acc-robotics), var(--gold));
  color: #1c1405; padding: 13px 0;
  border-block: 1px solid rgba(28,20,5,0.18);
  transform: rotate(-0.7deg) scale(1.03);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex; width: max-content; gap: 0;
  animation: roll 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; flex: none; }
.ticker__set span {
  display: flex; align-items: center; gap: 26px;
  padding-right: 26px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.ticker__set span::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(28,20,5,0.5); flex: none;
}
@keyframes roll { to { transform: translateX(-50%); } }

/* ================================================= PATHWAYS LAUNCH */
.launch {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 4.5vw, 66px); align-items: center;
}
@media (max-width: 960px) { .launch { grid-template-columns: 1fr; } }

.pillbadge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(122,92,196,0.16); color: #cbb8ff;
  border: 1px solid rgba(122,92,196,0.5);
  padding: 7px 15px 7px 11px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; margin-bottom: 22px;
}
.pillbadge .pip { background: var(--acc-careers); box-shadow: 0 0 0 4px rgba(122,92,196,0.25); }

.launch__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 3px; }
.launch__list li {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  align-items: start; padding: 13px 0;
  border-top: 1px solid rgba(246,239,223,0.1);
}
.launch__list li:last-child { border-bottom: 1px solid rgba(246,239,223,0.1); }
.launch__list svg { width: 22px; height: 22px; margin-top: 3px; color: var(--gold-bright); }
.launch__list b { display: block; font-size: 16px; }
.launch__list small { color: var(--on-dark-mute); font-size: 14.5px; line-height: 1.5; display: block; }

/* mock browser frame */
.frame {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink-soft); border: 1px solid var(--hairline-dark);
  box-shadow: var(--shadow-dark);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform var(--t-slow) var(--ease-out);
}
.frame:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0.5deg) translateY(-6px); }
.frame__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--hairline-dark);
}
.frame__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,239,223,0.22); }
.frame__url {
  margin-left: 8px; flex: 1; background: rgba(0,0,0,0.4);
  border-radius: 99px; padding: 5px 14px;
  font-size: 12px; color: var(--gold-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame__body { padding: 26px; display: grid; gap: 16px; }
.frame__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.frame__tile {
  border-radius: var(--radius-sm); padding: 15px 14px;
  background: rgba(246,239,223,0.05); border: 1px solid rgba(246,239,223,0.08);
}
.frame__tile b {
  display: block; font-family: var(--font-display);
  font-size: 22px; color: var(--gold-bright); line-height: 1;
}
.frame__tile small { font-size: 11.5px; color: var(--on-dark-mute); letter-spacing: 0.04em; }
.frame__bars { display: grid; gap: 11px; }
.frame__meter {
  height: 9px; border-radius: 99px; background: rgba(246,239,223,0.09); overflow: hidden;
}
.frame__meter i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--acc-robotics));
  transform-origin: left; animation: grow 1.5s var(--ease-out) both;
}
@keyframes grow { from { transform: scaleX(0); } }
.frame__label {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--on-dark-mute); margin-bottom: 6px;
}

/* ============================================== HYBRID SPLIT SECTION */
.duo {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 34px);
}
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

.mode {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper); border: 1px solid var(--hairline-light);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid);
}
.mode:hover { transform: translateY(-7px); box-shadow: var(--shadow-card); }
.mode__pic { aspect-ratio: 16 / 9.6; overflow: hidden; }
.mode__pic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.mode:hover .mode__pic img { transform: scale(1.05); }
.mode__body { padding: clamp(24px, 3vw, 36px); flex: 1; }
.mode__tag {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px; margin-bottom: 16px;
  background: rgba(201,162,39,0.16); color: var(--gold-deep);
}
.mode__body h3 { margin-bottom: 14px; }
.mode__body p { color: var(--on-light-mute); font-size: 16px; }
.tick-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.tick-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 15.5px; line-height: 1.5;
}
.tick-list svg { width: 18px; height: 18px; margin-top: 4px; color: var(--acc-science); }

/* the 10-student rule, called out */
.callout {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 40px);
  align-items: center;
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--shadow-card); overflow: hidden; position: relative;
}
.callout::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 100% at 0% 50%, rgba(232,135,58,0.2), transparent 70%);
}
.callout__num {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4.4rem, 11vw, 8.2rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  padding-right: 6px; margin: 0;
}
.callout__txt { position: relative; z-index: 1; }
.callout__txt h3 { margin-bottom: 10px; }
.callout__txt p { color: var(--on-dark-mute); font-size: 16px; max-width: 60ch; }
@media (max-width: 620px) { .callout { grid-template-columns: 1fr; gap: 6px; } }

/* ==================================================== PATHWAY CARDS */
.paths {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
}
.path {
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: span 4;
  border-radius: var(--radius-lg);
  min-height: 300px; display: flex; align-items: flex-end;
  padding: clamp(22px, 2.4vw, 30px);
  color: #fff; text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid);
}
/* deliberately uneven grid — reads as a composition, not a spreadsheet */
.path:nth-child(1) { grid-column: span 5; min-height: 380px; }
.path:nth-child(2) { grid-column: span 4; }
.path:nth-child(3) { grid-column: span 3; }
.path:nth-child(4) { grid-column: span 3; }
.path:nth-child(5) { grid-column: span 4; }
.path:nth-child(6) { grid-column: span 5; min-height: 340px; }
@media (max-width: 900px) {
  .path, .path:nth-child(n) { grid-column: span 6; min-height: 280px; }
}
@media (max-width: 560px) {
  .path, .path:nth-child(n) { grid-column: span 12; min-height: 260px; }
}

.path img {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
/* The pathway colour tints the photograph… */
.path::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(210deg, var(--path-accent, var(--gold)), transparent 72%);
  opacity: 0.55; mix-blend-mode: multiply;
}
/* …and this scrim guarantees the words on top stay readable, whatever the
   photograph underneath happens to be doing. */
.path::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(12,9,6,0.94) 0%, rgba(12,9,6,0.78) 26%, rgba(12,9,6,0.3) 62%, rgba(12,9,6,0) 88%);
}
.path:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.path:hover img { transform: scale(1.07); }

.path h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.path p {
  margin-top: 10px; font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,0.86); max-width: 34ch;
}
/* After ".path p", and matching the element too, so the label keeps its own
   small-caps size instead of inheriting the description's. */
.path p.path__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 12px;
  color: #fff; max-width: none;
}
.path__kicker::before {
  content: ''; width: 9px; height: 9px; border-radius: 3px; flex: none;
  background: var(--path-accent, var(--gold));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.28);
}

/* ============================================================== STEPS */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 34px); }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 26px; border-top: 2px solid var(--hairline-light); }
.band--ink .step { border-top-color: rgba(246,239,223,0.16); }
.step h3 { font-size: 1.28rem; margin-bottom: 10px; }
.step p { font-size: 15.5px; color: var(--on-light-mute); }
.band--ink .step p { color: var(--on-dark-mute); }
/* Declared after the ".step p" rules above, and matching the element as well
   as the class, so the big outlined numeral is not overruled by body copy. */
.step p.step__n {
  font-family: var(--font-display); font-weight: 700; font-size: 3.6rem;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  margin-bottom: 14px;
}

/* ==================================================== EXAMS / BOARDS */
.boards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 52px); align-items: start;
}
@media (max-width: 900px) { .boards { grid-template-columns: 1fr; } }

/* three-across variant, used by "Who we plan for" */
.boards--three { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 980px) { .boards--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px) { .boards--three { grid-template-columns: 1fr; } }

.route {
  background: var(--paper); border: 1px solid var(--hairline-light);
  border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-soft); height: 100%;
}
.route__flag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-light-mute);
  margin-bottom: 18px;
}
.route__flag i { width: 26px; height: 3px; border-radius: 99px; background: var(--gold); }
.route h3 { margin-bottom: 14px; }
.route p { color: var(--on-light-mute); font-size: 16px; }
/* Same reason as .path p.path__kicker — declared after ".route p" so the
   label is not resized by the body-copy rule. */
.route p.route__flag { font-size: 11.5px; }

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.tag {
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  padding: 8px 15px; border-radius: 99px;
  background: var(--parchment-2); color: var(--on-light);
  border: 1px solid var(--hairline-light);
}
.tag--gold { background: rgba(201,162,39,0.16); border-color: rgba(201,162,39,0.4); }

.stack-note {
  margin-top: 20px; padding-top: 18px; font-size: 14.5px;
  border-top: 1px dashed var(--hairline-light); color: var(--on-light-mute);
}

/* =========================================================== QUOTES */
.pullquote {
  position: relative; max-width: 900px; margin-inline: auto; text-align: center;
}
.pullquote svg { width: 46px; height: 46px; color: var(--gold); margin-bottom: 22px; }
.pullquote blockquote {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.85rem); line-height: 1.16;
  font-style: italic; font-variation-settings: 'SOFT' 70, 'WONK' 1;
  letter-spacing: -0.02em; text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: 28px; font-style: normal;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-bright);
}

/* ================================================ PLAYTIME EVALUATION */
.playtime {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
@media (max-width: 900px) { .playtime { grid-template-columns: 1fr; } }

.playtime__pic { position: relative; }
.playtime__pic img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 40%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.playtime__pic::before {         /* offset gold outline, as on the founder */
  content: ''; position: absolute; inset: -16px -16px 16px 16px;
  border: 1.5px solid var(--gold); border-radius: var(--radius-lg);
  z-index: -1;
}
@media (max-width: 900px) {
  .playtime__pic::before { inset: -14px 0 14px 14px; }
}

.playtime__body h2 { margin-bottom: 22px; }
.playtime__body p { color: var(--on-light-mute); font-size: 16.5px; }
.playtime__body p + p { margin-top: 1em; }

/* ========================================================== FOUNDER */
.founder {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(34px, 5vw, 72px); align-items: start;
}
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } }

.founder__pic { position: relative; }
.founder__pic img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 32%;
  border-radius: 240px 240px var(--radius) var(--radius);   /* arch */
  border: 1px solid var(--hairline-dark);
  box-shadow: var(--shadow-dark);
}
.founder__pic::before {          /* offset gold arch outline */
  content: ''; position: absolute; inset: 16px -16px -16px 16px;
  border: 1.5px solid var(--gold-deep);
  border-radius: 240px 240px var(--radius) var(--radius);
  z-index: -1;
}
@media (max-width: 900px) {
  /* the offset outline would push the page sideways on a phone */
  .founder__pic::before { inset: 14px 0 -14px 14px; }
}
/* A stage photograph is far wider than a studio portrait, so the arch is
   shortened and the crop centred — otherwise the TEDx sign behind her is
   sliced away by the 4/5 frame. */
.founder__pic--stage img {
  aspect-ratio: 4 / 4.4; object-position: 50% 42%;
  border-radius: 200px 200px var(--radius) var(--radius);
}
.founder__pic--stage::before { border-radius: 200px 200px var(--radius) var(--radius); }

.founder__cap {
  margin-top: 26px; padding-left: 18px;
  border-left: 2px solid var(--gold);
}
.founder__cap b { display: block; font-family: var(--font-display); font-size: 21px; }
.founder__cap span { font-size: 14px; color: var(--on-dark-mute); }

.founder__body h2 { margin-bottom: 24px; }
.founder__body p { color: var(--on-dark-mute); font-size: 16.5px; }
.founder__body p + p { margin-top: 1em; }
.founder__body strong { color: var(--on-dark); font-weight: 700; }

.creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cred {
  font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: 99px;
  border: 1px solid var(--hairline-dark); color: var(--gold-bright);
}

.founder__quote {
  margin-top: 34px; padding: clamp(24px, 3vw, 34px);
  background: rgba(246,239,223,0.05); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); border-left: 4px solid var(--gold);
}
.founder__quote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.34;
  color: var(--on-dark) !important;
}
.founder__quote span {
  display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright);
}

/* ============================================================ PEOPLE */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }
@media (max-width: 880px) { .people { grid-template-columns: 1fr; } }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mosaic figure {
  margin: 0; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.mosaic figure:hover img { transform: scale(1.06); }
.mosaic figure:nth-child(1) { aspect-ratio: 4/5; }
.mosaic figure:nth-child(2) { aspect-ratio: 4/3; align-self: end; }
.mosaic figure:nth-child(3) { aspect-ratio: 4/3; }
.mosaic figure:nth-child(4) { aspect-ratio: 4/5; align-self: start; }

/* =========================================================== ENROL */
.enrol {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 4.5vw, 64px); align-items: start;
}
@media (max-width: 920px) { .enrol { grid-template-columns: 1fr; } }

.form-card {
  background: var(--paper); color: var(--on-light);
  border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--shadow-lift);
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; }
.field label .req { color: var(--acc-arts); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15.5px; color: var(--on-light);
  background: var(--parchment); border: 1.5px solid var(--hairline-light);
  border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(36,28,20,0.28); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--paper);
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,39,0.18);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
  border-color: var(--acc-arts); background: rgba(210,80,63,0.05);
}
.field .err { font-size: 13px; font-weight: 600; color: var(--acc-arts); display: none; }
.field input:user-invalid ~ .err,
.field select:user-invalid ~ .err,
.field textarea:user-invalid ~ .err { display: block; }

.form-foot {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
}
.form-foot small { font-size: 13px; color: var(--on-light-mute); max-width: 38ch; }
.form-status {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600; display: none;
}
.form-status[data-state="sending"] { display: block; background: var(--parchment-2); }
.form-status[data-state="ok"] { display: block; background: rgba(31,133,119,0.14); color: #14574d; }
.form-status[data-state="error"] { display: block; background: rgba(210,80,63,0.12); color: #8f2b1e; }
.hp { position: absolute; left: -9999px; opacity: 0; }

.assure { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.assure li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.assure svg { width: 22px; height: 22px; color: var(--gold-bright); margin-top: 3px; }
.assure b { display: block; font-size: 16px; }
.assure small { color: var(--on-dark-mute); font-size: 14.5px; line-height: 1.5; }

/* =========================================================== FOOTER */
.site-foot { background: var(--ink-deep); color: var(--on-dark); padding-block: clamp(52px, 6vw, 84px) 34px; }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.4vw, 52px);
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-brand img {
  width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid var(--hairline-dark); background: var(--ink-deep);
  margin-bottom: 18px;
}
.foot-brand p { font-size: 15px; color: var(--on-dark-mute); max-width: 34ch; }
.foot-col h4 {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-col a {
  font-size: 15px; color: var(--on-dark-mute); text-decoration: none;
  transition: color var(--t-fast);
}
.foot-col a:hover { color: var(--gold-bright); }

.foot-base {
  margin-top: clamp(38px, 5vw, 60px); padding-top: 24px;
  border-top: 1px solid rgba(246,239,223,0.1);
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(198,185,159,0.72);
}
.foot-base a { color: rgba(198,185,159,0.9); }

/* ==================================================== SCROLL REVEAL */
/* Elements only start hidden when scripting is available, so a visitor without
   JavaScript still sees the whole page. The .js class is set in index.html. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}

/* hero load choreography */
.lift { animation: lift 1s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes lift {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .frame { transform: none; }
  .mark::after { transform: scaleX(1); }
}

@media print {
  .site-head, .ticker-clip, .grain, .form-card { display: none; }
  body { background: #fff; color: #000; }
}