/* ============================================================
   Anoo's International Beauty School — landing page
   Design tokens taken from the approved layout
   ============================================================ */

:root{
  --purple:      #662D91;
  --purple-dk:   #4E2270;
  --purple-lt:   #F3EDF9;
  --ink:         #231F20;
  --ink-2:       #414042;
  --gray:        #6D6E71;
  --gray-lt:     #9A9C9F;
  --line:        #E6E7E8;
  --bg:          #F9F9F9;
  --card:        #F1F2F2;
  --white:       #FFFFFF;

  --shell:       1280px;
  --gutter:      clamp(20px, 4vw, 43px);
  --radius:      18px;
  --radius-lg:   28px;

  --ff-body:     'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --ff-display:  'Aboreto', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-condense: 'Bebas Neue', 'Oswald', Impact, sans-serif;

  --header-h:    92px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body); font-weight:400; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* The revised layout runs one continuous wave field behind the whole page;
   sections sit on top of it as opaque panels. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--bg) url("../img/page-bg.webp") repeat-y center top;
  background-size:100% auto;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:500; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--purple); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--purple); outline-offset:3px; border-radius:6px;
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- shared type ---------- */
/* the layout sets every section label at 18.3px against its 1366px width */
.eyebrow{
  font-size:clamp(1.02rem, 1.55vw, 1.32rem); font-weight:300; letter-spacing:.13em;
  text-transform:uppercase; color:var(--purple); margin-bottom:16px;
}
.section-title.center,.section-lead.center{ text-align:center; }
.section-lead.center{ margin-inline:auto; }
/* an inline-block label has to be centred by its own margins, not by text-align */
.eyebrow.center{ display:block; width:fit-content; margin-inline:auto; text-align:center; }

/* the little sparkles that frame section labels in the layout */
.eyebrow.sparkled{ position:relative; display:inline-block; width:fit-content; padding:6px 0; }
.eyebrow.sparkled::before,.eyebrow.sparkled::after{
  content:""; position:absolute; width:13px; height:13px; background:var(--purple);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity:.85;
}
/* needs to beat both .eyebrow.center and .eyebrow.sparkled above */
.eyebrow.sparkled.center{ display:block; margin-inline:auto; }
.eyebrow.sparkled::before{ left:-26px; top:-10px; }
.eyebrow.sparkled::after{ right:-24px; bottom:-8px; width:9px; height:9px; opacity:.6; }

.section-title{
  font-size:clamp(1.6rem, 3.2vw, 2.5rem); font-weight:300; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:14px;
}
.section-lead{ color:var(--gray); font-weight:300; max-width:62ch; }
.display{
  font-family:var(--ff-display); font-weight:400; letter-spacing:.01em;
  font-size:clamp(1.9rem, 4vw, 3rem); color:var(--ink); text-transform:lowercase;
}

.section{ padding:clamp(26px, 3vw, 42px) 0; }

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--purple); color:#fff; font-weight:500; font-size:.95rem;
  padding:16px 30px; border-radius:999px; border:0; cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 10px 24px -12px rgba(102,45,145,.75);
}
.btn-primary:hover{ background:var(--purple-dk); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(102,45,145,.8); }
.btn-primary.lg{ padding:18px 44px; font-size:1rem; }
/* icon-only pill, as the hero controls appear in the layout */
.btn-primary.btn-icon{ padding:16px 34px; }
.btn-primary.btn-icon svg{ width:26px; height:26px; }
.btn-primary svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.95rem; font-weight:300; color:var(--ink); padding:12px 4px;
}
.circle-arrow{
  width:34px; height:34px; border:1px solid var(--gray-lt); border-radius:50%;
  display:grid; place-items:center; transition:.25s var(--ease);
}
.circle-arrow svg{ width:14px; height:14px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-ghost:hover .circle-arrow{ background:var(--purple); border-color:var(--purple); transform:translateX(3px); }
.btn-ghost:hover .circle-arrow svg{ stroke:#fff; }

.btn-pill{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--ink); color:#fff; font-size:.9rem; font-weight:400;
  padding:15px 16px 15px 26px; border-radius:999px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.btn-pill:hover{ background:var(--purple); transform:translateY(-2px); }
.btn-pill svg{
  width:34px; height:34px; padding:8px; flex:none; border-radius:50%; background:rgba(255,255,255,.14);
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--bg);
  border-bottom:1px solid transparent; transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck{ box-shadow:0 6px 30px -18px rgba(0,0,0,.4); border-color:var(--line); }
.header-inner{ display:flex; align-items:center; gap:28px; min-height:var(--header-h); }
.brand img{ width:clamp(140px, 16vw, 200px); }
.main-nav{ display:flex; gap:clamp(16px, 2.2vw, 34px); margin-inline:auto; }
.main-nav a{
  position:relative; font-size:.94rem; font-weight:300; color:var(--ink); padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--purple);
  transition:width .28s var(--ease);
}
.main-nav a:hover::after,.main-nav a.is-active::after{ width:100%; }
.header-phone{
  font-size:.95rem; font-weight:400; color:var(--ink); white-space:nowrap;
  transition:color .2s var(--ease);
}
.header-phone:hover{ color:var(--purple); }
.header-cta span{ white-space:nowrap; letter-spacing:.05em; font-size:.82rem; }

.nav-toggle{ display:none; width:44px; height:44px; padding:10px; flex-direction:column; justify-content:space-between; }
.nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* Dimmer behind the mobile drawer. Created by main.js, so it only ever exists
   when the menu is scriptable; desktop never shows it. */
.nav-backdrop{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
/* Hero geometry mirrors the layout: the white model panel starts at 625.8/1366 */
.hero{
  display:grid; grid-template-columns:45.8% 54.2%; align-items:stretch;
  background:var(--bg); position:relative; overflow:hidden;
}
.hero-left{
  position:relative; z-index:1; display:flex; align-items:center;
  padding:clamp(48px,6vw,86px) clamp(16px,2vw,28px) clamp(60px,6.5vw,96px);
  padding-left:max(var(--gutter), calc((100vw - var(--shell))/2 + var(--gutter)));
  min-height:min(76vh, 700px);
}

.hero-copy{ position:relative; z-index:1; max-width:560px; }
/* sizes are the layout's, expressed against its 1366px design width */
.hero-title{
  font-family:var(--ff-display); font-weight:400; text-transform:lowercase;
  color:var(--ink); display:grid; gap:0;
}
.ht-lg{ font-size:clamp(1.9rem, 5.3vw, 4.5rem); line-height:1.02; }
.ht-lg.accent{ color:var(--purple); }
.ht-sm{ font-size:clamp(1.35rem, 3.95vw, 3.35rem); line-height:1.2; }

.hero-offer{
  position:relative; display:flex; align-items:baseline;
  gap:clamp(8px,1vw,16px); flex-wrap:wrap; margin-top:clamp(14px,1.9vw,26px);
}
/* sparkles framing the discount figure */
.star.os1{ width:28px; height:28px; left:22%;  top:-20%; opacity:.5;  }
.star.os2{ width:23px; height:23px; left:69%;  top:-26%; opacity:.45; }
.star.os3{ width:19px; height:19px; left:30%;  top:82%;  opacity:.42; }
.star.os4{ width:16px; height:16px; left:59%;  top:88%;  opacity:.38; }
.w-upto,.w-off{
  font-family:var(--ff-condense); font-size:clamp(1.1rem,2.23vw,1.9rem);
  letter-spacing:.03em; color:var(--ink); line-height:1;
}
.w-num{
  font-weight:700; font-size:clamp(2.9rem, 6.07vw, 5.19rem); color:var(--purple);
  line-height:.95; letter-spacing:-.02em;
}
/* two rows of dot-marked course names, as set in the layout */
.hero-courses{ margin-top:clamp(14px,1.8vw,24px); display:grid; gap:3px; }
.hero-courses ul{ display:flex; flex-wrap:wrap; column-gap:clamp(8px,1.1vw,15px); row-gap:3px; }
.hero-courses li{
  position:relative; padding-left:11px;
  font-family:var(--ff-display); text-transform:lowercase;
  font-size:clamp(.72rem,.95vw,.82rem); letter-spacing:.01em; color:var(--ink);
}
.hero-courses li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:4px; height:4px; border-radius:50%; background:var(--ink);
}
.hero-courses .br{ flex-basis:100%; }

.hero-actions{ display:flex; align-items:center; gap:clamp(14px,2.5vw,28px); flex-wrap:wrap; margin-top:34px; }

/* transparent, so the ribbon artwork carries across the full hero */
.hero-right{
  position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center;
  background:transparent; padding-bottom:clamp(34px,4vw,62px);
}
.hero-model{
  width:min(100%, 690px); height:auto; object-fit:contain; align-self:flex-end;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.14));
}
.hero-badge{
  position:absolute; top:clamp(28px,7vw,86px); right:clamp(14px,4vw,58px);
  width:clamp(96px,10.6vw,140px); aspect-ratio:1;
}
.hero-badge svg{ position:absolute; inset:0; width:100%; height:100%; }
/* sized against the layout, in viewBox units: caption ~10% of the badge diameter,
   the wordmark ~19% */
.badge-text{
  font-family:var(--ff-body); font-size:23px; font-weight:400;
  /* the tracking closes up the single space, so widen the word gap explicitly
     or "BE BEAUTIFUL" reads as one word */
  letter-spacing:.11em; word-spacing:.5em; fill:var(--ink);
}
/* The top caption rides the r70 arc, the lower one r87, so the same gap covers
   a wider angle up there and opens up between "BE" and "BOLD". Pulling it in
   makes the two captions read with the same gap. */
.badge-text.badge-top{ word-spacing:.18em; }
.badge-core text{
  font-family:var(--ff-body); font-weight:700; font-size:42px;
  letter-spacing:-.01em; fill:var(--ink);
}
/* Only the ring group turns; "BE YOU" sits outside it and stays put. A single
   rotation means there is no counter-rotation to drift against, so no wobble. */
.badge-ring{
  transform-box:view-box; transform-origin:100px 100px;
  animation:badgeSpin 18s linear infinite;
  will-change:transform;
}
@keyframes badgeSpin{ to{ transform:rotate(360deg); } }

.scroll-cue{ position:absolute; right:clamp(6px,1.4vw,18px); bottom:clamp(96px,12vw,160px); display:grid; justify-items:center; gap:12px; }
.cue-label{
  writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.22em;
  color:var(--gray); text-transform:uppercase;
}
.cue-line{ width:1px; height:44px; background:var(--gray-lt); }
.cue-dot{ width:11px; height:11px; border:1px solid var(--gray-lt); border-radius:50%; animation:cueDrop 2.2s var(--ease) infinite; }
@keyframes cueDrop{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(7px); opacity:.4 } }

/* ============================================================
   STATS
   ============================================================ */
.stats-wrap{ margin-top:clamp(-110px,-9vw,-70px); position:relative; z-index:5; }
.stats{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(115deg,#FAF8FD 0%,#F7F3FB 55%,#F3EDF9 100%);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,34px) clamp(16px,2vw,26px);
  box-shadow:0 26px 60px -34px rgba(35,31,32,.4);
}
/* ribbon watermark drifting across the panel */
.stats-waves{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  object-fit:cover; object-position:center; opacity:.03;
}
.stats li{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:clamp(12px,1.4vw,20px);
  padding:6px clamp(10px,2vw,26px);
}
.stats li + li{ border-left:1px solid rgba(102,45,145,.22); }
.stat-icon{ width:clamp(36px,3.6vw,48px); height:auto; flex:none; }
.stats strong{ display:block; font-size:clamp(1.3rem,2.4vw,1.85rem); font-weight:400; line-height:1.1; }
.stats span{ display:block; font-size:.68rem; letter-spacing:.11em; color:var(--ink-2); text-transform:uppercase; }

/* ============================================================
   CONSULTATION
   ============================================================ */
.consult{ position:relative; overflow:hidden; }
/* ribbon art runs behind this band in the layout */
.consult-waves{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  object-fit:cover; object-position:center; opacity:.06;
}
.consult > .shell{ position:relative; z-index:1; }
.consult .eyebrow{ margin-bottom:clamp(20px,2.4vw,32px); }
/* the form already reads as a closing block - it needs less room beneath it */
.consult{ padding-bottom:clamp(12px,1.4vw,20px); }
.programs{ padding-top:clamp(16px,1.9vw,26px); }
.consult-form{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px clamp(12px,1.4vw,20px);
}
.field{ display:flex; flex-direction:column; }
/* the layout puts the field name inside the pill, so the label is for assistive tech only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.field input,.field select{
  width:100%; font:inherit; font-weight:300; font-size:.95rem; color:var(--ink);
  background:var(--card); border:1px solid transparent; border-radius:999px;
  padding:16px 20px; transition:border-color .2s var(--ease), background .2s var(--ease);
  min-width:0;
}
.field select{
  appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6E71' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center; background-size:16px;
}
.field input::placeholder{ color:var(--gray); }
.field input:hover,.field select:hover{ background:#EAEBEC; }
.field input:focus,.field select:focus{ outline:none; background:#fff; border-color:var(--purple); }
.field.has-error input,.field.has-error select{ border-color:#C0392B; background:#FDF3F2; }
.err{ min-height:0; font-size:.75rem; color:#C0392B; padding:4px 22px 0; }
.field.has-error .err{ min-height:18px; }

.consult-submit{ grid-column:1 / -1; display:grid; justify-items:center; gap:8px; margin-top:6px; }
.form-status{ font-size:.9rem; font-weight:400; min-height:20px; }
.form-status.ok{ color:#1E7B45; }
.form-status.bad{ color:#C0392B; }

/* ============================================================
   PROGRAMS
   ============================================================ */
.prog-title{ margin:6px 0 0; font-size:clamp(1.35rem,2.45vw,2rem); line-height:1.2; }
.prog-title em{ font-style:normal; color:var(--purple); }
.programs .star-head{ margin-bottom:clamp(28px,3.4vw,46px); }
.star.ps1{ width:19px; height:19px; left:14px;  top:-16px; opacity:.5;  }
.star.ps2{ width:11px; height:11px; left:232px; top:-4px;  opacity:.4;  }
.star.ps3{ width:10px; height:10px; left:146px; top:30px;  opacity:.36; }
.star.ps4{ width:16px; height:16px; left:-16px; top:74px;  opacity:.48; }
.star.ps5{ width:19px; height:19px; right:-26px; top:80px; opacity:.5;  }
.view-all{ margin:22px 0 0; text-align:right; }
.view-all a{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; letter-spacing:.14em; color:var(--purple); font-weight:400;
}
.view-all svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.view-all a:hover svg{ transform:translateX(5px); }
.program-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }

.program-card{
  position:relative;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border-radius:var(--radius);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* the card under the pointer lifts above the other two - a restrained amount, so
   it reads as emphasis rather than a jump */
.program-card:hover{
  transform:scale(1.04); z-index:2;
  box-shadow:0 26px 48px -28px rgba(35,31,32,.5);
}
.pc-media{ aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.program-card:hover .pc-media img{ transform:scale(1.05); }
.pc-body{ display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.4vw,30px); }
.pc-label{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--purple); font-weight:300; }
.pc-body h3{
  font-family:var(--ff-display); font-weight:400; text-transform:lowercase;
  font-size:clamp(1.15rem,1.75vw,1.42rem); line-height:1.24; margin:14px 0 14px;
}
/* the course's one-line promise, sitting between the title and the blurb */
.pc-tag{
  font-size:.88rem; font-weight:500; color:var(--purple);
  line-height:1.4; margin:-6px 0 12px;
}
.pc-body p{ font-weight:200; font-size:.95rem; color:var(--ink-2); }
.pc-link{
  margin-top:auto; padding-top:26px;
  display:inline-flex; align-items:center; gap:10px; color:var(--purple);
  font-size:.72rem; letter-spacing:.14em;
}
.pc-link svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.program-card:hover .pc-link svg{ transform:translateX(6px); }

.specialised{
  display:grid; grid-template-columns:1fr 2fr; gap:clamp(16px,2vw,26px);
  margin-top:clamp(16px,2vw,26px); align-items:stretch;
}
/* This card stands alone in a narrow column, so the 1.13 used across the
   three-up grid is far too much here - it would crowd the gallery beside it. */
.specialised .program-card:hover{
  transform:scale(1.025);
  box-shadow:0 22px 44px -28px rgba(35,31,32,.45);
}
/* gallery carousel beside the specialised card */
.gallery-slider{
  position:relative; margin:0; border-radius:var(--radius); overflow:hidden;
  background:#111; aspect-ratio:800/613;
}
.gs-label{
  position:absolute; z-index:2; top:clamp(12px,1.6vw,22px); right:clamp(14px,1.8vw,26px);
  font-size:clamp(1.1rem,1.9vw,1.6rem); font-weight:400; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.55); pointer-events:none;
}
.gs-track{ position:absolute; inset:0; }
.gs-track img{
  position:absolute; inset:0; width:100%; height:100%;
  /* bias the crop upward so faces survive when a portrait shot fills a wide frame */
  object-fit:cover; object-position:center 18%;
  opacity:0; transition:opacity .7s var(--ease);
}
.gs-track img.is-active{ opacity:1; }
.gs-dots{
  position:absolute; z-index:2; left:0; right:0; bottom:clamp(12px,1.6vw,20px);
  display:flex; gap:7px; justify-content:center;
}
.gs-dots button{
  width:11px; height:6px; border-radius:99px; background:rgba(255,255,255,.55);
  transition:.3s var(--ease);
}
.gs-dots button.is-active{ width:42px; background:#fff; }

/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
.ach-panel{
  position:relative; background:var(--white); border-radius:var(--radius-lg);
  /* the top padding never drops below the reach of the sparkles above the label */
  padding:clamp(40px,3.4vw,48px) clamp(20px,3vw,46px) clamp(30px,4vw,56px);
}
.ach-panel .star-head{ margin-bottom:clamp(20px,2.6vw,36px); }
/* The layout frames this label with its six-sparkle motif. Sizes are taken from
   it at the design width; the horizontal offsets are percentages so the cluster
   keeps its place against the label as the type scales (.star-head is
   width:fit-content, so 100% is the width of the label itself). */
.ach-panel .star{ transform:translate(-50%,-50%); }
/* three sizes, held to the same ratio against the label as the layout uses */
.star.as1,.star.as4{ width:clamp(22px,2.12vw,29px); height:clamp(22px,2.12vw,29px); opacity:.55; }
.star.as2{ width:clamp(19px,1.84vw,25px); height:clamp(19px,1.84vw,25px); opacity:.5; }
.star.as3,.star.as5,.star.as6{ width:clamp(12px,1.17vw,16px); height:clamp(12px,1.17vw,16px); opacity:.45; }
/* the vertical offsets track the label the same way, so the cluster keeps its
   shape once the type stops scaling */
.star.as1{ left:-13%; top:clamp(-15px,-1.12vw,-12px); }
.star.as2{ left:19%;  top:clamp(38px,3.66vw,50px);    }
.star.as3{ left:41%;  top:clamp(-35px,-2.57vw,-27px); }
.star.as4{ left:93%;  top:clamp(-15px,-1.12vw,-12px); }
.star.as5{ left:122%; top:clamp(38px,3.66vw,50px);    }
.star.as6{ left:126%; top:clamp(-15px,-1.12vw,-12px); }

/* three equal tiles; the one under the pointer grows above the other two */
.ach-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.6vw,40px); align-items:center; }
.ach-list li{ display:flex; justify-content:center; position:relative; }
.ach-list img{
  width:100%; border-radius:var(--radius); object-fit:cover; aspect-ratio:4/3;
  box-shadow:0 18px 40px -26px rgba(35,31,32,.55);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ach-list li:hover{ z-index:2; }
.ach-list li:hover img{
  transform:scale(1.12);
  box-shadow:0 32px 58px -26px rgba(35,31,32,.62);
}

/* ============================================================
   CAREER
   ============================================================ */
.career{ background:var(--white); }

/* one rounded lavender band holding the heading and the four roles */
.career-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#FBF9FD 0%,#F8F5FC 100%);
  border-radius:clamp(20px,2.4vw,34px);
  padding:clamp(18px,2.3vw,30px) clamp(24px,3.4vw,54px);
  display:grid; grid-template-columns:minmax(260px,1fr) 1.45fr;
  gap:clamp(24px,4vw,56px); align-items:center;
}
.career-waves{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%; opacity:.035;
  z-index:0; pointer-events:none;
}
.career-head,.career-panel .roles{ position:relative; z-index:1; }
.career-head .eyebrow{ margin-bottom:10px; }
.career-title{
  /* kept identical to .prog-title so the section headings match */
  font-size:clamp(1.35rem,2.45vw,2rem); line-height:1.2; color:var(--ink);
}
.career-title em{ font-style:normal; color:var(--purple); }

/* scattered four-point sparkles, as in the layout */
.spark{
  position:absolute; z-index:0; background:var(--purple);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  pointer-events:none;
}
.spark.s1{ width:22px; height:22px; left:2%;    top:14%; opacity:.5; }
.spark.s2{ width:11px; height:11px; left:25%;   top:9%;  opacity:.42; }
.spark.s3{ width:9px;  height:9px;  left:33%;   top:30%; opacity:.36; }
.spark.s4{ width:26px; height:26px; left:3.5%;  top:76%; opacity:.5; }
.spark.s5{ width:17px; height:17px; left:37%;   top:78%; opacity:.45; }
.spark.s6{ width:10px; height:10px; left:14%;   top:90%; opacity:.32; }

.roles{ display:grid; grid-template-columns:repeat(4,1fr); }
.roles li{ display:grid; grid-template-rows:auto auto; align-content:start; justify-items:center; gap:9px; text-align:center; padding:0 clamp(6px,1.2vw,16px); }
.roles li + li{ border-left:1px solid rgba(102,45,145,.28); }
/* sized by HEIGHT, not width: the four source icons have different aspect
   ratios, so a fixed width rendered them at four different heights */
.roles img{ height:clamp(46px,4.3vw,58px); width:auto; max-width:100%; }
/* reserve two lines so the single-line label does not ride higher than the rest */
.roles span{
  font-size:clamp(.82rem,1.05vw,.94rem); font-weight:500; color:var(--ink); line-height:1.45;
  /* two lines are reserved for every label; centring settles the single-line one
     between them instead of leaving it riding at the top */
  min-height:2.9em; display:grid; align-content:center;
}

/* ============================================================
   CERTIFICATIONS + FINANCE
   ============================================================ */
.duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); }
.panel{
  background:var(--card); border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; align-items:flex-start;
}
.panel-display{ font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:10px; }
.panel-copy{ font-weight:200; color:var(--ink-2); margin-bottom:26px; max-width:40ch; }
.cert-logos{ display:flex; align-items:center; gap:clamp(20px,4vw,50px); margin-top:auto; padding-top:22px; }
.cert-logos img{ width:clamp(96px,11vw,140px); height:auto; }
.v-divider{ width:1px; align-self:stretch; min-height:80px; background:rgba(102,45,145,.3); }
.finance-logos{ display:flex; align-items:center; gap:clamp(12px,1.8vw,22px); flex-wrap:wrap; margin-top:auto; padding-top:22px; }
.finance-logos img{
  height:clamp(34px,3.6vw,46px); width:auto; object-fit:contain;
  background:#fff; border-radius:12px; padding:7px 12px;
}

/* ============================================================
   OTHER COURSES
   ============================================================ */
.oc-panel{
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(30px,4vw,58px) clamp(20px,3vw,46px) clamp(40px,5vw,64px);
}
.oc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; text-align:left; }
.oc-head .view-all{ margin:0; }
.oc-panel .star-head{ margin-bottom:clamp(20px,2.8vw,38px); }
.star.cs1{ width:14px; height:14px; left:-18px; top:-24px; opacity:.5;  }
.star.cs2{ width:22px; height:22px; left:58px;  top:-40px; opacity:.5;  }
.star.cs3{ width:11px; height:11px; left:120px; top:-20px; opacity:.4;  }
.star.cs4{ width:12px; height:12px; left:26px;  top:28px;  opacity:.38; }

/* three equal cards: image seated at the top, course name beneath it on the left */
.oc-list{ display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:clamp(14px,2.4vw,34px); }
.oc-list li{ position:relative; }
.oc-list li:hover{ z-index:2; }
.oc-list a{
  display:flex; flex-direction:column; height:100%;
  background:#F4F5F7; border-radius:var(--radius); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.oc-img{ display:block; width:100%; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; }
.oc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.oc-name{
  font-family:var(--ff-display); text-transform:lowercase; line-height:1.28;
  font-size:clamp(1.05rem,1.75vw,1.45rem); letter-spacing:.04em; color:var(--purple);
  text-align:left; padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,28px) clamp(26px,3vw,42px);
}
/* All three sit at the same size; only the card under the pointer grows.
   Scaling keeps the grid from reflowing, and the gap absorbs the extra width. */
.oc-list a:hover{ transform:scale(1.07); box-shadow:0 30px 55px -28px rgba(35,31,32,.6); }
.oc-list a:hover .oc-img img{ transform:scale(1.05); }

/* ============================================================
   ALL COURSES  (all-courses.html)
   ============================================================ */
/* flat background on this page - the wave field still runs behind every other
   one, so only the image is dropped and the base colour stays */
.page-courses::before{ background-image:none; }

.page-hero{ position:relative; padding:clamp(34px,5vw,70px) 0 clamp(16px,2.4vw,26px); }
.crumbs{ margin-bottom:clamp(20px,3vw,34px); }
.link-arrow{
  display:inline-flex; align-items:center; gap:16px;
  font-size:clamp(.88rem,1.3vw,1.05rem); font-weight:400; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink); transition:color .25s var(--ease);
}
.link-arrow svg{
  width:26px; height:16px; fill:none; stroke:var(--purple);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.link-arrow:hover{ color:var(--purple); }
/* the same arrow, turned round for "back" */
.link-arrow.back svg{ transform:rotate(180deg); }
.link-arrow.back:hover svg{ transform:rotate(180deg) translateX(6px); }

.head-block{ position:relative; display:inline-block; padding:14px 26px 8px 0; }
.page-title{ font-size:clamp(2.1rem,4.6vw,3.9rem); letter-spacing:.08em; margin-top:2px; text-transform:uppercase; }
.page-title em{ font-style:normal; color:var(--purple); }
.star.hs1{ width:16px; height:16px; left:-14px;  top:-2px;  opacity:.45; }
.star.hs2{ width:11px; height:11px; left:42%;    top:-10px; opacity:.4;  }
.star.hs3{ width:24px; height:24px; right:-18px; top:26px;  opacity:.45; }
.star.hs4{ width:12px; height:12px; left:28%;    bottom:2px; opacity:.38; }
.page-lead{ max-width:58ch; margin-top:14px; color:var(--gray); font-weight:300; }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,2.6vw,32px); }
.filters button{
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  padding:9px 20px; border-radius:999px; font-size:.875rem; font-weight:400;
  color:var(--ink-2); transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.filters button:hover{ border-color:var(--purple); color:var(--purple); }
.filters button.is-active{ background:var(--purple); border-color:var(--purple); color:#fff; }

.courses-section{ padding-top:clamp(18px,2.4vw,32px); }
.courses-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,36px) clamp(14px,2vw,30px);
}
.c-card{
  display:flex; flex-direction:column;
  background:#F0F1F1; border-radius:var(--radius); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.c-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(35,31,32,.5); }
.c-card__media{ display:block; aspect-ratio:274/227; overflow:hidden; }
.c-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.c-card:hover .c-card__media img{ transform:scale(1.07); }
.c-card__title{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  color:var(--purple); letter-spacing:.1em; line-height:1.15;
  font-size:clamp(1.05rem,1.75vw,1.55rem);
  padding:clamp(20px,2.2vw,30px) clamp(14px,1.6vw,22px) clamp(12px,1.4vw,20px);
}
/* the longest name needs to come down a step or it swamps its card */
.c-card__title.is-long{ font-size:clamp(.92rem,1.3vw,1.16rem); }
.c-card__cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  padding:0 clamp(14px,1.6vw,22px) clamp(16px,1.8vw,24px);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);
}
.c-card__cta svg{
  width:20px; height:12px; fill:none; stroke:var(--purple);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.c-card:hover .c-card__cta svg{ transform:translateX(5px); }
.c-card.is-hidden{ display:none; }

.cta-band{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-top:clamp(30px,4vw,54px);
  padding:clamp(26px,3.6vw,46px) clamp(22px,3.4vw,56px);
  border-radius:var(--radius-lg); color:#fff;
  background:linear-gradient(110deg, var(--purple) 0%, #6A45C2 100%);
}
.cta-band h2{
  font-family:var(--ff-display); font-weight:400; letter-spacing:.05em; line-height:1.2;
  font-size:clamp(1.25rem,2.5vw,2rem);
}
.cta-band p{ margin-top:8px; opacity:.85; font-weight:300; }
.cta-band__btn{ background:#fff; color:var(--purple); }
.cta-band__btn:hover{ background:var(--ink); color:#fff; }
.cta-band__btn svg{ background:rgba(102,45,145,.12); }
.cta-band__btn:hover svg{ background:rgba(255,255,255,.16); }

/* ============================================================
   STORIES
   ============================================================ */
/* four-point stars scattered around a centred section label */
.star-head{ position:relative; width:fit-content; margin-inline:auto; }
.star-head.left{ margin-inline:0; }
.star{
  position:absolute; background:var(--purple);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  pointer-events:none;
}
.star.st1{ width:18px; height:18px; left:-56px; top:-40px; opacity:.55; }
.star.st2{ width:11px; height:11px; left:26px;  top:-58px; opacity:.42; }
.star.st3{ width:15px; height:15px; left:104px; top:-46px; opacity:.5;  }
.star.st4{ width:9px;  height:9px;  left:146px; top:-38px; opacity:.38; }
.star.st5{ width:15px; height:15px; left:-10px; top:18px;  opacity:.5;  }
.star.st6{ width:10px; height:10px; left:136px; top:18px;  opacity:.4;  }

/* the label carries the whole heading; the track's own padding opens the rest
   of the gap above the cards */
.stories .star-head{ margin-bottom:clamp(6px,.9vw,12px); }
/* Three equal portrait stills, square-cornered and unshadowed, filling the
   1160px row with the layout's 43.6px between them. Both figures are
   percentages of the row, so the arrangement holds at any width. */
.story-track{
  --story-gap:2.4%;       /* five cards now, so the row needs a tighter gap */
  --story-hover:1.055;    /* the card under the pointer grows past its neighbours */
  display:flex; gap:var(--story-gap); align-items:center; justify-content:center;
  max-width:1160px; margin-inline:auto;
  /* No scroller here on purpose. The cards are a fraction of the row, so all
     three always fit and there is nothing to scroll - and a scroll container
     would clip the outer cards as they grow under the pointer instead of
     letting them out. It becomes a real scroller at the narrow width below,
     where the cards stop fitting. */
  /* a vertical padding percentage resolves against the width, so the room
     above and below the row keeps pace with the cards */
  padding-block:3.4%;
}
.story-track::-webkit-scrollbar{ display:none; }
.story{
  position:relative; flex:0 0 calc((100% - var(--story-gap) * 4) / 5);
  aspect-ratio:61/100; overflow:hidden; scroll-snap-align:center;
  background:#111;
  /* long and eased-out, so the growth reads as a glide rather than a snap */
  transition:transform .55s var(--ease);
}
.story-track .story:hover{ transform:scale(var(--story-hover)); z-index:2; }
.story img{ width:100%; height:100%; object-fit:cover; }
.play{
  position:absolute; inset:auto 0 0 0; margin:auto; bottom:18px;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
  /* the layout shows these stills clean, so the control waits for the pointer */
  opacity:0;
  transition:opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.story:hover .play,.play:focus-visible{ opacity:1; }
/* nothing hovers on a touch screen, so there it has to stay put */
@media (hover:none){ .play{ opacity:1; } }
.play svg{ width:22px; height:22px; fill:var(--purple); margin-left:3px; }
.play:hover{ background:#fff; transform:scale(1.08); }

/* ---------- popup shell ----------
   One overlay serves both the video lightbox and the course sheets. Triggers
   keep a real href, so without JavaScript they still go somewhere sensible;
   the script intercepts the click and shows the content here instead. */
.vmodal{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(16px,4vw,40px);
  background:rgba(22,17,26,.88);
  visibility:hidden; opacity:0;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.vmodal.is-open{ visibility:visible; opacity:1; }
/* the wrapper exists only to swap contents; it must not become a layout box,
   or the frame below stops being centred by the overlay's grid */
.vmodal-inner{ display:contents; }
/* Sized by width alone, with the viewport height folded into the min() as a vh
   equivalent, so the frame never overflows and the ratio never breaks:
   16:9 -> h = w*9/16, so 86vh of height is 152.9vh of width. */
.vmodal-frame{
  position:relative; width:min(92vw, 940px, 152vh); aspect-ratio:16/9;
  background:#000; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
}
.vmodal-frame.portrait{ width:min(86vw, 430px, 48vh); aspect-ratio:9/16; }
.vmodal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vmodal-close{
  position:absolute; top:clamp(10px,2vw,22px); right:clamp(10px,2vw,22px);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.vmodal-close:hover{ background:rgba(255,255,255,.28); transform:rotate(90deg); }
.vmodal-close svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* ---------- course sheet (KNOW MORE) ---------- */
.course-sheet{
  width:min(92vw,720px); max-height:86vh; overflow-y:auto; text-align:left;
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(26px,3.6vw,48px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.cs-kicker{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--purple); font-weight:400; }
.course-sheet h2{
  font-family:var(--ff-display); font-weight:400; text-transform:lowercase;
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; margin:10px 0 6px;
}
.cs-tag{ color:var(--purple); font-weight:500; font-size:1rem; margin-bottom:16px; }
.course-sheet p{ color:var(--ink-2); font-weight:200; margin-bottom:18px; }
.course-sheet dl{ display:grid; gap:14px; margin:0 0 20px; }
.course-sheet dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--purple); font-weight:500; }
.course-sheet dd{ margin:5px 0 0; color:var(--ink-2); font-weight:300; line-height:1.6; }
.cs-points{ display:grid; gap:10px; margin:0 0 20px; }
.cs-points li{ position:relative; padding-left:26px; color:var(--ink-2); font-weight:300; }
.cs-points li::before{
  content:""; position:absolute; left:0; top:.5em; width:11px; height:11px;
  background:var(--purple); opacity:.75;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.cs-close-line{
  font-family:var(--ff-display); text-transform:lowercase; color:var(--ink);
  font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.35;
  border-top:1px solid var(--line); padding-top:18px; margin-bottom:0!important;
}
.course-sheet .btn-primary{ margin-top:22px; }

/* ============================================================
   LOCATIONS
   ============================================================ */
/* The heading is the icon and the words together, sized to their own content
   so the sparkles can be placed as percentages of the pair. */
.loc-head{
  position:relative; width:fit-content; margin-inline:auto;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(7px,1vw,13px); flex-wrap:wrap;
  /* the layout drops the branch cards 53px under the heading, which is also
     what leaves the two lower sparkles somewhere to hang */
  margin-bottom:clamp(38px,3.88vw,53px);
}
.maps-pin{ width:clamp(50px,5.56vw,76px); height:auto; }

/* Six sparkles, from the layout. Sizes and offsets are percentages of the
   heading pair, so the cluster keeps its shape as the type and icon scale.
   (100% across is the pair's width; 100% down is the icon's height, which is
   what sets the row height.) */
.loc-head .star{ transform:translate(-50%,-50%); aspect-ratio:1; opacity:.33; }
.star.ls1,.star.ls4{ width:9.9%; }
.star.ls2{ width:8.5%; }
.star.ls3,.star.ls5,.star.ls6{ width:5.5%; }
.star.ls1{ left:12.5%; top:-19%;    }
.star.ls2{ left:30.3%; top:113.2%;  }
.star.ls3{ left:42.7%; top:-65.5%;  }
.star.ls4{ left:70.3%; top:-19%;    }
.star.ls5{ left:84.6%; top:113.2%;  }
.star.ls6{ left:87.4%; top:-19%;    }


.branch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); }
.branch{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink);
  aspect-ratio:307/159; display:block;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.branch::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(35,31,32,0) 28%, rgba(35,31,32,.86) 100%);
}
.branch img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.branch:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -26px rgba(35,31,32,.7); }
.branch:hover img{ transform:scale(1.07); }
.branch-body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; color:#fff;
}
.branch-name{ font-size:.98rem; font-weight:400; }
.branch-go{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#E4D7F2;
}
.branch-go svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position:relative; overflow:hidden; background:var(--bg);
  /* the top padding used to clear a ribbon sweep across the top; with that
     gone it only has to separate the columns from the section above */
  padding:clamp(44px,5.4vw,74px) 0 0;
  margin-top:clamp(16px,2vw,30px);
}
.footer-inner{ position:relative; z-index:1; }
.footer-mark{ width:min(100%, 290px); height:auto; margin-bottom:20px; }

.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1.25fr 1.15fr;
  gap:clamp(28px,4vw,56px); align-items:start;
}
.footer-about{
  color:var(--gray); font-weight:300; font-size:.92rem; line-height:1.7;
  max-width:40ch; margin-bottom:22px;
}
.footer-contact{ display:flex; flex-wrap:wrap; gap:10px; }
.footer-contact a{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:11px 20px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); font-size:.9rem;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer-contact a:hover{ border-color:var(--purple); color:var(--purple); transform:translateY(-2px); }
.footer-contact svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.footer-col h3{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--purple); font-weight:500; margin-bottom:18px;
}
.footer-col li + li{ margin-top:11px; }
.footer-col a{ color:var(--gray); font-weight:300; font-size:.92rem; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--purple); }

/* 14 branch names read better as wrapped chips than as another tall column */
.footer-branches{ display:flex; flex-wrap:wrap; gap:9px 16px; }
.footer-branches li{ margin:0!important; color:var(--gray); font-weight:300; font-size:.88rem; }
/* Qualified with .footer-col on purpose: the button sits inside that column,
   and a bare ".footer-enroll" loses to ".footer-col a" on specificity - which
   painted the label grey on the dark pill and reset its size. */
.footer-col a.footer-enroll{
  display:inline-flex; align-items:center; gap:12px; margin-top:22px;
  background:var(--ink); color:#fff; font-size:.82rem; font-weight:400; letter-spacing:.05em;
  padding:13px 14px 13px 22px; border-radius:999px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.footer-col a.footer-enroll:hover{ background:var(--purple); color:#fff; transform:translateY(-2px); }
.footer-enroll svg{
  width:30px; height:30px; padding:7px; flex:none; border-radius:50%; background:rgba(255,255,255,.14);
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.footer-base{
  margin-top:clamp(36px,5vw,60px); border-top:1px solid var(--line);
  padding:22px 0 28px; display:flex; flex-wrap:wrap; gap:8px 24px;
  align-items:center; justify-content:space-between;
  color:var(--gray-lt); font-size:.84rem; font-weight:300;
}

/* ============================================================
   FLOATING RAIL
   ============================================================ */
.action-rail{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column; gap:1px;
  border-radius:12px 0 0 12px; overflow:hidden;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.45);
}
.ar-btn{
  width:56px; height:56px; display:grid; place-items:center;
  background:var(--card); transition:.25s var(--ease);
}
.ar-btn svg{ width:23px; height:23px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ar-btn:hover{ background:var(--purple); }
.ar-btn:hover svg{ stroke:#fff; }
.ar-wa{ background:#25D366; }
.ar-wa svg{ stroke:#fff; }
.ar-wa:hover{ background:#1EBE5A; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
/* Uses the standalone `translate` property, not `transform`. They are independent,
   so a component's own :hover transform still applies once revealed - with
   `transform:none` here it silently cancelled every hover scale on a revealed card. */
.reveal{ opacity:0; translate:0 26px; transition:opacity .7s var(--ease), translate .7s var(--ease); }
.reveal.is-in{ opacity:1; translate:0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .branch-grid{ grid-template-columns:repeat(3,1fr); }
  .courses-grid{ grid-template-columns:repeat(3,1fr); }
  .career-panel{ grid-template-columns:1fr; }
  /* the scatter is positioned for the wide composition; it lands on the type when stacked */
  .spark{ display:none; }
}

@media (max-width:980px){
  :root{ --header-h:76px; }

  /* ---- mobile menu: a drawer that slides in from the right ---- */
  /* The header sits above the dimmer so the toggle stays lit and clickable.
     The drawer is a child of the header, so its z-index is judged inside the
     header's own stacking context - that is why the toggle needs one too,
     otherwise the open panel would bury the close cross. */
  .site-header{ z-index:130; }
  .main-nav{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:1;
    width:min(300px, 80vw);
    flex-direction:column; gap:0; align-items:stretch; margin:0;
    background:#fff; border-left:1px solid var(--line);
    box-shadow:-26px 0 54px -32px rgba(0,0,0,.6);
    /* clears the header, which floats over the top of the panel */
    padding:calc(var(--header-h) + 14px) clamp(22px,6vw,30px) 30px;
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%);
    /* visibility keeps the off-screen links out of the tab order */
    visibility:hidden;
    transition:transform .38s var(--ease), visibility .38s var(--ease);
  }
  .main-nav.is-open{ transform:none; visibility:visible; }
  .main-nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .main-nav a:last-child{ border-bottom:0; }
  .main-nav a.is-active{ color:var(--purple); font-weight:400; }
  .main-nav a::after{ display:none; }

  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:110;
    background:rgba(35,31,32,.45);
    opacity:0; visibility:hidden;
    transition:opacity .38s var(--ease), visibility .38s var(--ease);
  }
  .nav-backdrop.is-open{ opacity:1; visibility:visible; }
  /* the page must not scroll behind an open drawer */
  body.nav-open{ overflow:hidden; }

  .nav-toggle{ display:flex; margin-left:auto; position:relative; z-index:2; }
  .header-cta,.header-phone{ display:none; }

  /* ---- stacked hero: the model leads, the copy reads underneath it ---- */
  .hero{ grid-template-columns:1fr; }

  .hero-right{ order:-1; padding:clamp(16px,3.4vw,28px) var(--gutter) 0; }
  .hero-model{
    width:min(52%,380px);
    filter:none;
  }
  /* tucked into the corner the model leaves free, and small enough that it never
     crowds the head */
  .hero-badge{
    top:clamp(10px,2.6vw,24px); right:clamp(12px,3vw,26px);
    width:clamp(92px,13vw,120px);
  }
  /* a vertical cue has nowhere to sit once the panels stack, and the quick-action
     rail already owns the bottom of the screen */
  .scroll-cue{ display:none; }

  /* one centred column under the model, so the headline, the offer, the course
     list and the two buttons all share a single axis.
     The stats card lifts itself into the foot of the hero; with the copy ending
     the hero rather than the model, this bottom padding is what that lift eats
     into - short it and the card lands on the buttons. */
  .hero-left{
    min-height:auto; justify-content:center;
    padding:clamp(20px,4vw,32px) var(--gutter) clamp(122px,22vw,150px);
  }
  .stats-wrap{ margin-top:-84px; }
  .hero-copy{ max-width:600px; margin-inline:auto; text-align:center; }
  .hero-title{ justify-items:center; }
  .hero-offer{ justify-content:center; }
  .hero-courses li{ font-size:.8rem; }
  .hero-courses ul{ justify-content:center; }
  .hero-actions{ justify-content:center; margin-top:clamp(22px,4vw,34px); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:6px 0; }
  /* :nth-of-type, not :nth-child - the watermark <img> is the list's first
     child, so counting children put every divider one cell out of step. */
  .stats li:nth-of-type(odd){ border-left:0; }
  .stats li:nth-of-type(n+3){ border-top:1px solid rgba(102,45,145,.22); padding-top:18px; }

  .consult-form{ grid-template-columns:repeat(3,1fr); }
  .program-grid{ grid-template-columns:repeat(2,1fr); }
  .specialised{ grid-template-columns:1fr; }
  .feature-shot img{ width:min(72%,460px); }
  .duo-grid{ grid-template-columns:1fr; }
  /* Sized by height with width:auto, each chip came out as wide as its logo
     happened to be - three small, ragged boxes packed to the left of a much
     wider panel. Equal cells that fill the row instead. */
  .finance-logos{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; width:100%;
  }
  .finance-logos img{
    width:100%; height:clamp(58px,8vw,76px); padding:10px;
  }
  /* two by two, divided by a cross, the same way the stats panel folds up */
  .roles{ grid-template-columns:repeat(2,1fr); gap:0; }
  .roles li{ padding:26px clamp(6px,1.2vw,16px); }
  .roles li:nth-child(-n+2){ padding-top:0; }
  .roles li:nth-child(odd){ border-left:0; }
  .roles li:nth-child(n+3){ border-top:1px solid rgba(102,45,145,.28); }
  .story-track{ --story-gap:10px; }

  /* brand block spans the top, the three link columns sit under it */
  .footer-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-brand{ grid-column:1 / -1; }
  .footer-about{ max-width:56ch; }
}

@media (max-width:720px){
  /* the offset sparkles would sit outside the viewport at this width */
  .eyebrow.sparkled::before,.eyebrow.sparkled::after{ display:none; }
  /* the panel padding shrinks faster than the label, so pull the leading
     sparkle in far enough to stay on the white */
  .star.as1{ left:-4%; }
  .consult-form{ grid-template-columns:repeat(2,1fr); }
  .branch-grid{ grid-template-columns:repeat(2,1fr); }
  .courses-grid{ grid-template-columns:repeat(2,1fr); }
  .c-card__title{ padding:18px 14px 12px; font-size:clamp(.95rem,3.6vw,1.1rem); letter-spacing:.06em; }
  .c-card__cta{ padding:0 14px 16px; font-size:.7rem; }
  .cta-band{ text-align:center; justify-content:center; }
  .action-rail{ top:auto; bottom:0; right:0; left:0; transform:none;
    flex-direction:row; border-radius:0; justify-content:center; }
  .ar-btn{ flex:1; height:54px; }
  body{ padding-bottom:54px; }
  /* Stacked and equal. A touch screen has no hover, so nothing should sit
     permanently enlarged. */
  .oc-list{ grid-template-columns:1fr; gap:24px; }
  .oc-name{ font-size:clamp(1.15rem,4.6vw,1.5rem); }

  /* Three-up left each tile about a third of the panel - too small to make
     anything out. One near-full-width tile per view instead, swiping like the
     gallery beside the programmes, with a sliver of the next to show it moves.
     The panel's side padding is what holds the tile below the gallery's width,
     so it gives some back here. */
  .ach-panel{ padding-inline:16px; }
  .ach-list{
    display:flex; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .ach-list::-webkit-scrollbar{ display:none; }
  .ach-list li{ flex:0 0 96%; scroll-snap-align:center; }
  /* a scroller clips anything that grows, and there is no pointer here anyway */
  .ach-list li:hover img{ transform:none; box-shadow:0 18px 40px -26px rgba(35,31,32,.55); }
  /* One card per view, with a sliver of the next one to show it swipes. This
     is the width where the cards stop fitting, so this is where the row turns
     into a real scroller. Centring a track that overflows makes the first card
     unreachable in some browsers, so pack from the start here. */
  .story-track{
    justify-content:flex-start;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    /* the scrollbar would sit under the cards and spoil the row */
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .story{ flex-basis:78%; max-width:320px; }

  .footer-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px){
  .program-grid{ grid-template-columns:1fr; }
  .consult-form{ grid-template-columns:1fr; }
  /* Two per row on a phone as well, so the card stays a compact block rather
     than four full-width bands taller than the hero above it. The 2-column
     dividers set at 980px carry through - dropping the one-column override is
     what brings them back. Stacking the icon over the figure hands the whole
     column width to the caption, which is what keeps "PLACEMENT SUPPORT" and
     "STUDENTS TRAINED" on one line at 360px. */
  .stats{ padding:clamp(18px,4vw,26px) clamp(8px,2.4vw,16px); }
  .stats li{
    flex-direction:column; align-items:center; text-align:center;
    gap:8px; padding:12px clamp(6px,2vw,14px);
  }
  .stat-icon{ width:32px; }
  .stats strong{ font-size:1.2rem; }
  .stats span{ font-size:.62rem; letter-spacing:.05em; }
  /* the roles stay two by two down to the narrowest phone, as the stats do */
  .roles li{ padding-inline:clamp(4px,1.6vw,12px); }
  .branch-grid{ grid-template-columns:1fr; }
  /* three across is too narrow for the wider logos here; two, with the widest
     one taking the full row underneath */
  .finance-logos{ grid-template-columns:1fr 1fr; }
  .finance-logos img:last-child{ grid-column:1 / -1; }
  /* a phone-width model, with the badge pulled in tight beside it */
  .hero-model{ width:min(74%,290px); }
  .hero-badge{ width:88px; top:8px; right:var(--gutter); }

  .footer-grid{ grid-template-columns:1fr; }
  .footer-base{ justify-content:center; text-align:center; }
}