/* ============================================================
   HUNTMYDEGREE — one stylesheet.
   Four colours, two typefaces, zero decoration.
   Supersedes the former base + #premium + #warm blocks in
   index.html, which are disabled with media="not all" pending
   approval and should be deleted outright once this is signed off.
   ============================================================ */
:root{
  --ink:#1D1D1B;
  --ink-2:#55554F;
  --ink-3:#66665F;
  --line:#E4E4DE;
  --line-2:#F0F0EE;
  --tint:#F0F0EE;
  --paper:#FFFFFF;
  --paper-2:#FAFAF8;
  --brand:#00674A;
  --brand-2:#004D37;
  --brand-soft:#E0EDE8;
  --accent:#FFD84D;
  --accent-soft:#FFFBEC;
  --photo:#6B6459;
  --ok:#00674A;      --ok-s:#E0EDE8;
  --warn:#6B5200;    --warn-s:#FFD84D;
  --danger:#8A2A2A;  --danger-s:#F7EDED;
  --info:#1D1D1B;    --info-s:#F0F0EE;
  --maxw:1200px;
  /* aliases kept alive for inline styles still in index.html that referenced
     the old sheets' tokens. Flattened to the new system rather than removed,
     so no inline rule silently resolves to nothing. */
  --cream:#F0F0EE; --cream-2:#FAFAF8;
  --radius:0; --radius-sm:0; --radius-lg:0;
  --shadow:none; --shadow-lg:none;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px;
}
h1,h2,h3,h4,h5{
  font-family:'Barlow Condensed',Impact,sans-serif;
  text-transform:uppercase;letter-spacing:1px;line-height:1.05;font-weight:700;
}
h1{font-size:44px}
h2{font-size:34px;font-weight:600}
h3{font-size:24px}
h4{font-size:21px}
h5{font-size:18px}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
input,select,textarea{font-family:inherit;font-size:16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:'Barlow Condensed',sans-serif}

/* ---- decoration removed. This was the "AI look". ---- */
.doodle,.aurora,.grain,.spark,.dd-float,.dd-underline,.dd-spark,.dd-arrow,
.dd-wiggle,.cat-doodle,.head-doodle,.gobj-wrap,.gobj-float,.w-scene,
.wave-sep,.pop-card,.pop-chip,.cat-rings,.s-ill,.cat-ill,.s-arrow,
.sc-drift,.sc-tw,.sc-spin,.sc-float,.sc-bob,.scroll-cue,.sec-ill,
.disc,.adv-people,.demo-note{display:none !important}
/* Motion is opt-in twice over: only when JS has run (so a failed observer can
   never leave a section invisible) and only when the reader hasn't asked for
   less. Short, single-axis, no float or drift. */
.reveal,.stagger>*{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .has-js .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .45s ease-out,transform .45s ease-out}
  .has-js .reveal.in{opacity:1;transform:none}
  .has-js .stagger>*{opacity:0;transform:translateY(10px)}
  .has-js .stagger.in>*{animation:rise .4s ease-out forwards}
  .has-js .stagger.in>:nth-child(2){animation-delay:.06s}
  .has-js .stagger.in>:nth-child(3){animation-delay:.12s}
  .has-js .stagger.in>:nth-child(4){animation-delay:.18s}
  .has-js .stagger.in>:nth-child(5){animation-delay:.24s}
}
@keyframes rise{to{opacity:1;transform:none}}

/* hover feedback — lift and edge, never scale or rotate */
.card,.uni-card,.sch-card,.guide-card{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.card:hover,.uni-card:hover,.sch-card:hover,.guide-card:hover{
  transform:translateY(-3px);box-shadow:0 6px 0 -2px var(--tint)}
.link-arrow{transition:gap .16s ease,border-color .16s ease}
.btn{transition:background .14s ease,color .14s ease,transform .14s ease}
.btn:active{transform:translateY(1px)}

/* ============ UTILITY STRIP + NAV ============ */
.util{background:var(--accent)}
.util .wrap{height:36px;display:flex;align-items:center;justify-content:flex-end;gap:26px}
.util a{font-size:13px;font-weight:600;color:var(--ink)}

header.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:80px;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-size:29px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink);line-height:1}
.logo .mark{width:34px;height:34px;border-radius:0;background:var(--brand);display:grid;place-items:center;
  color:var(--accent);font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;line-height:1}
.logo .pk{font-family:'Barlow',sans-serif;font-size:10px;font-weight:700;color:var(--ink);
  background:var(--accent);padding:2px 6px;letter-spacing:.04em;text-transform:none}
nav.main{display:flex;gap:28px;margin-left:auto}
nav.main a{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600;text-transform:uppercase;
  letter-spacing:1px;color:var(--ink);padding-bottom:2px;border-bottom:3px solid transparent}
nav.main a:hover{border-bottom-color:var(--line)}
nav.main a.active{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:24px}
.menu-toggle{display:none;font-size:24px;width:44px;height:44px;margin-left:auto}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  padding:0 20px;height:46px;border-radius:0;white-space:nowrap;transition:background .12s,color .12s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-gold{background:var(--accent);color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-size:18px;
  font-weight:700;text-transform:uppercase;letter-spacing:1px}
.btn-gold:hover{background:#F5C92F;color:var(--ink)}
.btn-glass{display:inline-flex;align-items:center;height:46px;padding:0 20px;border:1px solid #fff;color:#fff;font-weight:600}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.magnetic{transition:none}

/* ============ GENERIC ============ */
.eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-size:17px;font-weight:700;color:var(--brand)}
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.section-head h2{font-size:34px}
.section-head p{color:var(--ink-3);margin-top:8px;font-size:15.5px;text-transform:none;letter-spacing:0}
.section-head h2 em{font-style:normal}
.link-arrow{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--brand);border-bottom:2px solid var(--brand)}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:0}
.badge-ok{background:var(--ok-s);color:var(--ok)}
.badge-warn{background:var(--accent);color:var(--ink)}
.badge-danger{background:var(--danger-s);color:var(--danger)}
.badge-info{background:var(--info-s);color:var(--info)}
.badge-muted{background:var(--tint);color:var(--ink-3)}
/* Yellow is reserved for time-bound or calculated values (see .badge-warn).
   Sector and other descriptive labels stay neutral. */
.badge-gold{background:var(--tint);color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;padding:0 12px;height:34px;
  border-radius:0;border:1px solid var(--line);color:var(--ink);background:#fff}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-muted{background:var(--tint);border-color:var(--tint);color:var(--ink-3)}

.vpill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:0}
.vpill .dot{width:6px;height:6px;border-radius:0}
.v-verified{background:var(--ok-s);color:var(--ok)} .v-verified .dot{background:var(--ok)}
.v-university{background:var(--info-s);color:var(--info)} .v-university .dot{background:var(--info)}
.v-student{background:var(--tint);color:var(--ink-3)} .v-student .dot{background:var(--ink-3)}
.v-estimated{background:var(--accent);color:var(--ink)} .v-estimated .dot{background:var(--ink)}
.v-awaiting{background:var(--tint);color:var(--ink-3)} .v-awaiting .dot{background:var(--ink-3)}
.na{color:var(--ink-3)}
.vcheck{color:var(--brand)}
.verified-note{font-size:12.5px;color:var(--ink-3);text-transform:none;letter-spacing:0}

.crumb{font-size:13.5px;color:var(--ink-3);padding:18px 0}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

.panel{background:#fff;border:1px solid var(--line);border-radius:0;padding:24px;margin:20px 0}
.panel h3{font-size:21px;margin-bottom:14px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:0;display:block;transition:border-color .12s}
.card:hover{border-color:var(--ink)}
.side-card{background:var(--tint);border:none;padding:22px;margin-bottom:22px}
.side-card h4{font-size:19px;margin-bottom:12px}

.empty{text-align:center;padding:56px 24px;color:var(--ink-3)}
.empty .e-ic{display:none}
.kv{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv:last-child{border-bottom:none}
.kv .k,.kv .l{flex-grow:1;color:var(--ink-3)}
.kv .v{font-weight:600;text-align:right}
.field-l{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-3);
  text-transform:none;letter-spacing:0}
.field-l label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field-l input,.field-l select,.field-l textarea{width:100%}
.unit{font-size:12.5px;color:var(--ink-3);font-weight:400}
.rowlabel{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.stat-big{font-size:32px;font-weight:700;font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px}
.mt{margin-top:14px} .ms{margin-top:8px} .full{width:100%}
.hide-sm{display:inline}
@media(max-width:700px){.hide-sm{display:none}}

/* ============ FORMS ============ */
.searchmini,.select,select,textarea,
input:not([type=checkbox],[type=radio],[type=range],[type=submit],[type=button]){
  width:100%;height:46px;padding:0 14px;border:1px solid #8F8B80;border-radius:0;background:#fff;color:var(--ink);font-size:15.5px}
textarea{height:auto;padding:12px 14px;line-height:1.6}
.searchmini:focus,select:focus,input:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-2px}
.fgroup{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.lbl,.fn{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.fopt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:15px}
.fopt input{width:16px;height:16px;accent-color:var(--brand)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.viewtoggle{display:flex;border:1px solid var(--line)}
.viewtoggle button{height:38px;padding:0 14px;font-size:14px;color:var(--ink-3);background:#fff}
.viewtoggle button.on{background:var(--ink);color:#fff}
.count{font-size:14.5px;color:var(--ink-3)}

/* ============ HERO (photograph + solid disc) ============ */
/* The plate is far wider than the photograph's 3:2, so `cover` crops vertically
   and the crop grows with viewport width. Anchoring near the top keeps the
   students' faces in frame at every width instead of their feet. */
.whero-wrap{position:relative;overflow:hidden;
  background:var(--photo) url("../img/hero-students.jpg") 26% 10%/cover no-repeat}
.whero{position:relative;min-height:560px;display:flex;align-items:center;justify-content:flex-end;padding:40px 0}
.hero-plate{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:flex-end}
/* keeps the credit legible over the photograph without tinting the whole frame */
.hero-plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(to top,rgba(29,29,27,.62),rgba(29,29,27,0));pointer-events:none}
.hero-plate .wrap{width:100%;padding-bottom:20px;position:relative;z-index:1}
.hero-plate .cap{max-width:430px;color:#E8E6E0;font-size:12px;line-height:1.5}
/* The disc tracks viewport width rather than stepping at one breakpoint, and the
   headline scales with it, so the circle never crowds the photograph. */
.hero-disc{position:relative;z-index:2;width:min(500px,42vw);height:min(500px,42vw);
  flex-shrink:0;border-radius:50%;
  background:var(--brand);padding:0 68px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;text-align:center}
.hero-disc .kicker{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:var(--accent)}
.hero-disc h1{font-size:clamp(32px,3.6vw,48px);color:#fff;letter-spacing:.5px}
.hero-disc .sub{font-size:15.5px;line-height:1.5;color:#fff}
@media(max-width:980px){
  .whero{justify-content:center;min-height:0;padding:34px 0}
  .hero-disc{width:min(360px,44vw);height:min(360px,44vw);padding:0 30px;gap:11px}
  .hero-disc h1{font-size:clamp(26px,4.4vw,34px)}
  .hero-disc .sub{font-size:13.5px}
  /* the photograph stays; only the credit line steps out of the way */
  .whero{justify-content:flex-end;padding-right:8px}
  .hero-plate .cap{font-size:11px;max-width:220px}
}
/* Below ~760 the disc is small enough that four blocks of copy set its size
   rather than the other way round — which is why it was filling 86% of a phone.
   Dropping the sub-line (the dark band directly below repeats it) lets the
   circle come down to about two thirds, and the photograph reads again. */
@media(max-width:760px){
  .whero{justify-content:center;padding-right:0}
  .hero-plate .cap{display:none}
  .hero-disc{width:min(250px,58vw);height:min(250px,58vw);padding:0 20px;gap:8px}
  .hero-disc .kicker{font-size:clamp(10px,2.8vw,12px);letter-spacing:.5px}
  .hero-disc h1{font-size:clamp(20px,5.5vw,26px);letter-spacing:.3px}
  .hero-disc .sub{display:none}
  .hero-disc .btn{height:36px;padding:0 14px;font-size:13.5px}
}
@media(max-width:360px){
  .hero-disc{padding:0 16px}
}

/* dark search band under the hero */
.hsearch-band{background:var(--ink);padding:22px 0}
.hsearch-band .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hsearch-band .lead{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;color:#fff;flex-shrink:0}
.hsearch{display:flex;align-items:stretch;height:52px;flex-grow:1;min-width:280px;max-width:640px}
.hsearch .ic{display:flex;align-items:center;padding:0 0 0 15px;background:#fff;color:var(--ink-3)}
.hsearch input{flex-grow:1;min-width:0;height:52px;border:none;background:#fff;padding:0 12px;font-size:16px}
.hsearch input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.hsearch button{padding:0 26px;background:var(--accent);color:var(--ink);
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.hsearch button:hover{background:#F5C92F}
.alt{font-size:14.5px;color:#C6C6C0;margin-top:2px}
.alt a{color:#fff;text-decoration:underline}
.herofacts{display:flex;gap:30px;flex-wrap:wrap;margin-left:auto}
.herofacts .f{display:flex;flex-direction:column}
.herofacts .n{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:#fff;line-height:1}
.herofacts .l{font-size:12.5px;color:#C6C6C0;margin-top:3px}
@media(max-width:820px){.herofacts{display:none}}

.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ============ QUICKLINKS (circular tiles) ============ */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media(max-width:1000px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat{background:none !important;border:none;padding:0;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;cursor:pointer;border-radius:0;position:static;color:var(--ink);text-decoration:none}
.cat .cat-ico{width:132px;height:132px;flex-shrink:0;border-radius:50%;background:var(--tint);
  display:grid;place-items:center;color:var(--ink);
  transition:background .2s ease,color .2s ease,transform .2s ease}
.cat .cat-ico svg{width:54px;height:54px}
.cat:hover .cat-ico,.cat:focus-visible .cat-ico{background:var(--brand);color:#fff;transform:translateY(-5px)}
.cat h4{font-size:20px;transition:color .2s ease}
.cat:hover h4{color:var(--brand)}
.cat .n,.cat .k{font-size:14px;color:var(--ink-2);font-family:'Barlow',sans-serif;
  text-transform:none;letter-spacing:0;font-weight:400}
.cat .arr{display:none}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:0;padding:26px 24px;position:relative}
.step .s-n{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--brand);
  letter-spacing:1px;margin-bottom:8px;display:block;position:static;opacity:1}
.step h4{font-size:21px;margin-bottom:8px}
.step p{font-size:15px;color:var(--ink-2)}

/* ============ FIELD ILLUSTRATIONS ============ */
/* Idle motion is slow and small; hover is where the scene actually plays. All of
   it sits behind prefers-reduced-motion. */
.cat .cat-ico svg{width:60px;height:60px;overflow:visible}
.il-gear{transform-origin:26px 26px}
.il-gear-sm{transform-origin:46px 46px}
.il-bar{fill:currentColor;opacity:.16;transform-origin:center bottom}
.il-trend,.il-ecg,.il-type,.il-caret{stroke-linecap:round}
.il-heart{fill:currentColor;fill-opacity:.12;transform-origin:32px 36px}
.il-caret{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .il-gear{animation:spin 22s linear infinite}
  .il-gear-sm{animation:spin-r 22s linear infinite}
  .cat:hover .il-gear{animation-duration:3.2s}
  .cat:hover .il-gear-sm{animation-duration:3.2s}

  .il-brL,.il-brR{transition:transform .3s ease}
  .cat:hover .il-brL{transform:translateX(-3px)}
  .cat:hover .il-brR{transform:translateX(3px)}
  .il-type{stroke-dasharray:14;stroke-dashoffset:14}
  .cat:hover .il-type{animation:type 1.1s steps(6) infinite alternate}
  .cat:hover .il-caret{animation:blink .9s steps(1) infinite}

  .il-heart{animation:beat 2.6s ease-in-out infinite}
  .cat:hover .il-heart{animation-duration:.9s}
  .il-ecg{stroke-dasharray:64;stroke-dashoffset:0}
  .cat:hover .il-ecg{animation:trace 1.5s linear infinite}

  .il-bar{transition:transform .34s cubic-bezier(.2,.8,.3,1)}
  .cat:hover .il-bar1{transform:scaleY(1.28)}
  .cat:hover .il-bar2{transform:scaleY(1.16)}
  .cat:hover .il-bar3{transform:scaleY(1.07)}
  .il-trend{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .5s ease .1s}
  .cat:hover .il-trend{stroke-dashoffset:0}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-r{to{transform:rotate(-360deg)}}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.07)}36%{transform:scale(1)}}
@keyframes trace{from{stroke-dashoffset:64}to{stroke-dashoffset:-64}}
@keyframes type{to{stroke-dashoffset:0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ============ COLOUR BANDS ============ */
.band{padding:64px 0}
.band-tight{padding:40px 0 44px}
.band-head-tight{margin-bottom:22px}
.band-yellow{background:var(--accent)}
.band-tint{background:var(--tint)}
.band-head{max-width:720px;margin-bottom:34px}
.band-head h2{margin:10px 0 0}
.band-head p{margin-top:14px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.band-yellow .band-head p{color:#4A3F10}
.band-yellow .eyebrow{color:var(--ink)}
.band-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
@media(max-width:900px){.band-grid{grid-template-columns:1fr;gap:34px}}

/* ============ CHARTS ============ */
.bc{margin:0}
.bc svg{display:block}
.bc-lbl{font-family:'Barlow',sans-serif;font-size:14px;fill:var(--ink-2)}
.bc-val{font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;fill:var(--ink);
  font-variant-numeric:tabular-nums}
.band-yellow .bc-lbl{fill:#4A3F10}
.bc-bar{fill:var(--ink)}
.bc-fill{fill:var(--brand)}
.bc-track{fill:#DCDCD6}
.band-tint .bc-track{fill:#FFFFFF}
.bc-empty{font-size:15px;color:var(--ink-2)}
.bc-legend{display:flex;gap:22px;margin-bottom:18px;font-size:13.5px;color:var(--ink-2)}
.bc-legend span{display:inline-flex;align-items:center;gap:8px}
.bc-legend .sw{width:13px;height:13px;display:inline-block}
.sw-fill{background:var(--brand)}
.sw-track{background:#FFFFFF;box-shadow:inset 0 0 0 1px #DCDCD6}
.bc-table{margin-top:20px;font-size:14px}
.bc-table summary{cursor:pointer;font-weight:600;color:var(--ink-2);padding:4px 0}
.bc-table summary:hover{color:var(--ink)}
.bc-table table{margin-top:10px;background:#fff}
.band-yellow .bc-table summary{color:#4A3F10}

/* ============ AFFORDABILITY WIDGET ============ */
.afford{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;align-items:start}
@media(max-width:860px){.afford{grid-template-columns:1fr;gap:24px}}
.af-controls{display:flex;flex-direction:column;gap:20px}
.af-row{display:flex;flex-direction:column;gap:7px}
.af-row label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:#4A3F10}
.af-row select{background:#fff;border:1px solid var(--ink);height:44px}
.af-val{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:700;
  line-height:1;letter-spacing:.5px;color:var(--ink)}
.af-scale{display:flex;justify-content:space-between;font-size:12px;color:#4A3F10}
/* 6px of visible track, but ~38px of tappable element: the padding grows the hit
   area and background-clip keeps the paint on the track itself. */
.af-budget input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  box-sizing:content-box;height:6px;padding:16px 0;margin:0;border:none;cursor:pointer;
  background:#E3B91F;background-clip:content-box}
.af-budget input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  background:var(--ink);border:3px solid var(--accent);cursor:grab}
.af-budget input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--ink);
  border:3px solid var(--accent);border-radius:0;cursor:grab}
.af-budget input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.af-out{background:#fff;padding:18px}
.af-count{font-size:15px;color:var(--ink-2)}
.af-count b{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:700;
  color:var(--brand);line-height:1;margin-right:6px;vertical-align:-3px}
.af-sub{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.af-bar{height:6px;background:var(--tint);margin:14px 0 16px}
.af-bar i{display:block;height:6px;background:var(--brand);transition:width .3s ease}
.af-hits{display:grid;gap:1px;background:var(--line)}
.af-hit{display:grid;grid-template-columns:1fr auto;gap:2px 14px;background:#fff;padding:11px 12px;
  align-items:baseline;transition:background .14s ease}
.af-hit:hover{background:var(--brand-soft)}
.af-hit-n{font-weight:600;color:var(--ink)}
.af-hit-c{grid-row:2;font-size:12.5px;color:var(--ink-3)}
.af-hit-f{grid-row:1/3;align-self:center;text-align:right;font-weight:600;color:var(--brand);white-space:nowrap}
.af-hit-f em{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--ink-3)}
.af-more{display:inline-block;margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-size:16px;
  font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--brand);border-bottom:2px solid var(--brand)}
.af-none{font-size:14.5px;color:var(--ink-2)}
.af-note{grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.55;color:#4A3F10;max-width:820px}

/* the fee-period worked example */
.worked{display:flex;flex-direction:column;gap:12px}
.worked-card{background:#fff;padding:22px}
.worked-q{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:700;
  letter-spacing:.5px;line-height:1}
.worked-p{font-size:14px;color:var(--ink-3);margin-top:2px}
.worked-u{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--brand)}
.worked-eq{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.5;color:var(--ink-2)}
.worked-tag{display:inline-block;margin-right:7px;padding:1px 7px;background:var(--tint);
  font-size:11.5px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px}
.worked-vs{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:#4A3F10;text-align:center;padding:2px 0}

/* ============ TABLES / LISTS ============ */
.datatable{width:100%;border-collapse:collapse;font-size:15px}
.datatable thead tr{background:var(--tint)}
.datatable th{text-align:left;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;padding:10px 12px}
.datatable td{padding:11px 12px;border-bottom:1px solid var(--line)}
.datatable .cell-l{color:var(--ink-3)}
.datatable .cell-v{font-weight:600}
.list-row,.deadline-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.list-row:last-child,.deadline-row:last-child{border-bottom:none}
.deadline-row .date-chip{width:52px;flex-shrink:0;background:var(--tint);text-align:center;padding:6px 0}
.deadline-row .date-chip .d{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;line-height:1}
.deadline-row .date-chip .m{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.mini-uni{display:flex;align-items:center;gap:11px}
.mini-uni .ico,.uni-card .ico{width:36px;height:36px;flex-shrink:0;background:var(--tint);display:grid;place-items:center;
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--ink);border-radius:0}

/* ============ UNIVERSITY CARD ============ */
.ucard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ucard:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 8px 0 -3px var(--tint)}
.ucard-head{display:flex;align-items:center;gap:13px;padding:16px 18px;background:var(--brand);
  color:#fff;text-decoration:none;min-height:82px}
.ucard-private .ucard-head{background:var(--ink)}
.ucard-other .ucard-head{background:#4A4A44}
.ucard-mono{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.16);font-family:'Barlow Condensed',sans-serif;font-size:16px;
  font-weight:700;letter-spacing:.5px;color:#fff}
.ucard-private .ucard-mono{background:var(--accent);color:var(--ink)}
.ucard-id{display:flex;flex-direction:column;min-width:0}
.ucard-short{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.05}
.ucard-full{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.35;margin-top:3px}
.ucard-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:13px 18px 0;
  font-size:13px;color:var(--ink-3)}
.ucard-dot{color:var(--line)}
/* tuition needs the most room — it carries a range and its period */
.ucard-facts{margin:13px 0 0;display:grid;grid-template-columns:1.55fr .75fr 1fr;
  border-top:1px solid var(--line-2)}
.ucard-facts>div{padding:12px 10px;border-right:1px solid var(--line-2);min-width:0}
.ucard-facts>div:last-child{border-right:none}
.ucard-facts>div:first-child{padding-left:18px}
.ucard-facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:3px}
.ucard-facts dd{margin:0;font-size:13.5px;font-weight:600;line-height:1.3}
.ucard-facts dd .unit{display:block;font-size:11px;font-weight:400;color:var(--ink-3);margin-top:2px}
.ucard-meta{min-height:34px}
.ucard-soon{display:inline-block;padding:0 6px;background:var(--accent);font-size:11.5px;font-weight:600}
.ucard-foot{margin-top:auto;display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-top:1px solid var(--line-2);background:var(--paper-2)}
.ucard-cmp{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.ucard-cmp input{width:15px;height:15px;accent-color:var(--brand)}

.uni-card{background:#fff;border:1px solid var(--line);border-radius:0;padding:20px;display:flex;flex-direction:column;gap:12px}
.uni-card:hover{border-color:var(--ink)}
.uni-card .top{display:flex;align-items:flex-start;gap:12px}
.uni-card .loc{font-size:13.5px;color:var(--ink-3)}
.uni-card .tags{display:flex;gap:6px;flex-wrap:wrap}
.uni-card .subs{font-size:13.5px;color:var(--ink-2)}
.uni-card .stat-row{display:flex;gap:20px;padding-top:12px;border-top:1px solid var(--line)}
.uni-card .stat-row .st{display:flex;flex-direction:column;gap:2px}
.uni-card .stat-row .l{font-size:11.5px;color:var(--ink-3)}
.uni-card .stat-row .v,.uni-card .stat-row .n{font-weight:600;font-size:14.5px}
.uni-card .actions{display:flex;gap:9px;align-items:center}

/* ============ DIRECTORY ============ */
.dir-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:36px;align-items:start}
@media(max-width:940px){.dir-layout{grid-template-columns:1fr}}
.filters{border:1px solid var(--line);padding:22px;position:sticky;top:96px}
.filters h4,.filters .fn{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;margin:18px 0 9px}
.filters .fn:first-child{margin-top:0}
@media(max-width:940px){.filters{position:static}}

/* ============ PROFILE ============ */
.profile-hero{background:var(--photo);position:relative}
.ph-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;min-height:280px;display:flex;align-items:flex-end}
.ph-top{display:flex;align-items:center;gap:18px;background:var(--brand);padding:26px 30px;flex-wrap:wrap;width:100%}
.ph-logo{width:76px;height:76px;flex-shrink:0;background:#fff;display:grid;place-items:center;border-radius:0;
  font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:var(--ink)}
.ph-top h1{color:#fff;font-size:38px}
.ph-meta{font-size:15px;color:#C3DAD1;text-transform:none;letter-spacing:0}
.ph-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.profile-body{padding:32px 0}
.tabs{display:flex;gap:0;background:var(--tint);flex-wrap:wrap}
.tabs button{padding:15px 22px;font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;color:var(--ink)}
.tabs button.on{background:var(--ink);color:#fff;font-weight:700}
.faq-item{border-bottom:1px solid var(--line);padding:16px 0}
.faq-item .q{font-weight:600;font-size:15.5px}
.campus-band{background:var(--tint);padding:22px}

/* ============ COMPARE ============ */
.cmp-table{width:100%;border-collapse:collapse;font-size:15px}
.cmp-table th,.cmp-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
.cmp-table th{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:15px}
.cmp-best{background:var(--accent-soft);font-weight:600}
.cmp-uni{font-weight:600}

.help-banner{height:260px;background:var(--photo) url("../img/help-desk.jpg") center 38%/cover no-repeat;margin-bottom:8px}
@media(max-width:700px){.help-banner{height:170px}}

/* ============ QUIZ / FIND ============ */
.quiz-wrap{max-width:720px;margin:0 auto;padding:40px 0}
.quiz-progress{height:6px;background:var(--tint);margin-bottom:26px}
.quiz-progress>i,.quiz-progress .b{display:block;height:6px;background:var(--brand)}
.quiz-card{border:1px solid var(--line);padding:30px}
.quiz-step{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--brand)}
.qhint{font-size:13.5px;color:var(--ink-3)}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media(max-width:620px){.opt-grid{grid-template-columns:1fr}}
.opt{border:1px solid var(--line);padding:14px;cursor:pointer;display:flex;align-items:center;gap:10px;background:#fff}
.opt:hover{border-color:var(--ink)}
.opt.on{border-color:var(--brand);background:var(--brand-soft)}
.opt .ck{width:18px;height:18px;border:1px solid var(--ink-3);flex-shrink:0}
.opt.on .ck{background:var(--brand);border-color:var(--brand)}
.quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.matchbar{height:6px;background:var(--tint);margin-top:8px}
.matchbar>i,.matchbar .b{display:block;height:6px;background:var(--brand)}
.rec-reason{font-size:13.5px;color:var(--ink-2)}
.lvl-tile{background:var(--tint);padding:16px;text-align:center}

/* ============ SCHOLARSHIPS / GUIDES ============ */
.sch-card{border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:10px;background:#fff}
.sch-card:hover{border-color:var(--ink)}
.guide-card{border:1px solid var(--line);background:#fff;display:block}
.guide-card .cover{height:158px;background:var(--tint);overflow:hidden}
.guide-card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.guide-card .gc{padding:20px}
.guide-card h4{font-size:20px;margin-top:8px}
.guide-card p{font-size:14.5px;color:var(--ink-2)}

/* ============ CTA BAND / ADVISOR ============ */
.cta-band,.adv-band{background:var(--accent);padding:0;display:flex;gap:0;align-items:stretch;flex-wrap:wrap}
.adv-band>div:first-of-type,.cta-band>div:first-of-type{flex:1 1 440px;padding:52px 44px}
.adv-photo{flex:1 1 380px;min-height:300px;background:var(--photo) url("../img/counselling.jpg") center 40%/cover no-repeat}
@media(max-width:860px){.adv-photo{min-height:220px}}
.adv-band h2,.cta-band h2{color:var(--ink)}
.adv-band h2 em,.cta-band h2 em{font-style:normal}
.adv-band p,.cta-band p{color:var(--ink-2);font-size:16px;max-width:560px;margin-top:12px}
.adv-band .eyebrow,.cta-band .eyebrow{color:var(--ink)}
.adv-band .btn-glass,.cta-band .btn-glass{border-color:var(--ink);color:var(--ink)}

/* ============ COMPARE TRAY / TOAST ============ */
#cmptray{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;
  transform:translateY(110%);transition:transform .2s}
#cmptray.on{transform:none}
.tray-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tray-slots{display:flex;gap:9px;flex-grow:1;flex-wrap:wrap}
.tray-slot{background:#33332F;padding:7px 11px;font-size:13.5px;display:flex;align-items:center;gap:8px}
.tray-slot .x{cursor:pointer;color:#C6C6C0}
.tray-empty{border:1px dashed #55554F;padding:7px 11px;font-size:13.5px;color:#A8A8A2}
#cmptray .btn-ghost{border-color:#fff;color:#fff}
#cmptray .btn-ghost:hover{background:#fff;color:var(--ink)}
#toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);z-index:70;
  background:var(--ink);color:#fff;padding:12px 20px;font-size:14.5px;opacity:0;pointer-events:none;transition:.2s}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ============ FOOTER ============ */
.foot{background:var(--ink);color:#E4E4DE;padding:52px 0 26px;margin-top:64px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
@media(max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot .cols{grid-template-columns:1fr}}
.foot .logo{color:#fff}
.foot .logo .mark{background:var(--accent);color:var(--ink)}
.foot h5{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--accent);margin-bottom:12px}
.foot a{display:block;font-size:14px;color:#E4E4DE;padding:4px 0}
.foot a:hover{color:#fff;text-decoration:underline}
.foot p{font-size:13.5px;color:#A8A8A2;line-height:1.6}
.foot .disc{font-size:12.5px;color:#A8A8A2;margin-top:14px;line-height:1.6}
.foot .fbot{border-top:1px solid #3A3A36;margin-top:34px;padding-top:20px;display:flex;
  justify-content:space-between;gap:16px;font-size:13px;color:#A8A8A2;flex-wrap:wrap}

/* ============ MOBILE MENU ============ */
#mobmenu{display:none;position:sticky;top:80px;z-index:49;background:#fff;border-bottom:1px solid var(--line);padding:8px 24px}
#mobmenu.on{display:block}
#mobmenu a{display:block;padding:13px 0;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;color:var(--ink);border-bottom:1px solid var(--line-2)}
@media(max-width:1000px){
  nav.main,.nav-cta .btn{display:none}
  .menu-toggle{display:grid;place-items:center}
  .nav-inner{height:64px;gap:14px}
  #mobmenu{top:64px}
}

/* ============ BOOT ============ */
.boot-skeleton{padding:80px 24px;text-align:center;color:var(--ink-3)}
#bootError{max-width:640px;margin:80px auto;padding:0 24px}
#bootError h2{margin-bottom:12px}