/* ==================================================================
   PROGRAM PAGE — "the console"
   A different KIND of page from the magazine document that preceded it:
   a product/documentation layout. A rail pinned to the left carries the
   program's identity, its contents and the way in; the pane on the right
   holds the detail in dense, scannable blocks.

   No serif, no display flourishes, no full-bleed photography. Manrope
   throughout, tabular figures, badges, hairline tables — the register of
   a spec sheet rather than a brochure.
   ================================================================== */

#home-glydi{
  --c-bg:#FAF9F7;          /* the shell behind the panes */
  --c-pane:#FFFFFF;
  --c-ink:#111110;
  --c-body:#54504A;
  --c-muted:#8B867E;
  --c-line:rgba(17,17,16,.12);
  --c-line-hi:rgba(17,17,16,.24);
  --c-accent:#F46718;
  --c-accent-dk:#B8480A;
  --c-accent-wash:#FFF2EA;
  --c-nav:72px;
  --c-rail:clamp(230px, 19vw, 292px);
  --c-gap:clamp(10px, 1.1vw, 18px);
  --c-idx:34px;            /* the number column */
  --c-run:clamp(14px, 1.5vw, 22px);  /* index -> text gap */
}

html:has(#home-glydi .px),
html:has(#home-glydi .px) body,
html:has(#home-glydi .px) #root{ background:var(--c-bg) !important; }

#home-glydi .px{
  display:block !important;
  width:auto !important; max-width:none !important;
  margin:0 !important;
  padding:var(--c-nav) 0 0 !important;
  background:var(--c-bg) !important;
  color:var(--c-body);
  font-family:var(--font-body);
}
#home-glydi .px > *{ margin-bottom:0 !important; }

/* ==================================================================
   THE SHELL — rail + pane
   ================================================================== */
#home-glydi .px-shell{
  display:grid;
  grid-template-columns:var(--c-rail) minmax(0, 1fr);
  gap:var(--c-gap);
  align-items:start;
  /* the shared site measure: the rail starts where every other page starts */
  width:min(var(--page-max, 1560px), 100%);
  margin-inline:auto;
  padding:var(--c-gap) var(--page-edge);
}

/* ---- the rail ---- */
#home-glydi .px-rail{
  position:sticky;
  top:calc(var(--c-nav) + var(--c-gap));
  max-height:calc(100svh - var(--c-nav) - var(--c-gap) * 2);
  overflow:auto;
  background:var(--c-pane);
  border:1px solid var(--c-line);
  padding:clamp(18px, 1.6vw, 26px);
  scrollbar-width:thin;
}
#home-glydi .px-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 14px !important;
  padding:5px 10px;
  background:var(--c-accent-wash);
  font-size:9.5px !important; font-weight:800 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--c-accent-dk) !important;
}
#home-glydi .px-rail h1{
  margin:0 0 8px !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important; font-style:normal !important;
  font-size:clamp(21px, 1.9vw, 27px) !important;
  line-height:1.12 !important; letter-spacing:-.03em !important;
  color:var(--c-ink) !important;
}
#home-glydi .px-rail h1 em{ font-style:normal; color:var(--c-accent-dk); }
#home-glydi .px .px-rail-sub{
  margin:0 0 clamp(16px, 1.8vw, 22px) !important;
  font-size:13px !important; line-height:1.55 !important;
  color:var(--c-body) !important;
}

/* the spec block: the numbers, as a table */
#home-glydi .px-spec{
  border-top:1px solid var(--c-line);
  margin-bottom:clamp(16px, 1.8vw, 22px);
}
#home-glydi .px-spec div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--c-line);
}
#home-glydi .px .px-spec span{
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-muted);
}
#home-glydi .px .px-spec b{
  font-size:14px; font-weight:800; letter-spacing:-.01em;
  color:var(--c-ink);
  font-variant-numeric:tabular-nums lining-nums;
}

/* contents */
#home-glydi .px-toc{ border-top:1px solid var(--c-line); padding-top:12px; }
#home-glydi .px-toc p{
  margin:0 0 8px !important;
  font-size:9.5px !important; font-weight:800 !important;
  letter-spacing:.2em !important; text-transform:uppercase !important;
  color:var(--c-muted) !important;
}
#home-glydi .px-toc a{
  display:flex; align-items:baseline; gap:10px;
  padding:7px 0 7px 10px;
  border-left:2px solid transparent;
  font-size:13px; font-weight:600;
  color:var(--c-body);
  text-decoration:none;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
#home-glydi .px-toc a b{
  font-size:9.5px; font-weight:800; letter-spacing:.1em;
  color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
#home-glydi .px-toc a:hover{ color:var(--c-ink); background:var(--c-accent-wash); }
#home-glydi .px-toc a.is-here{
  border-left-color:var(--c-accent);
  color:var(--c-ink); font-weight:800;
}
#home-glydi .px-toc a.is-here b{ color:var(--c-accent-dk); }

#home-glydi .px-rail-cta{ margin-top:clamp(16px, 1.8vw, 22px); }
#home-glydi .px .px-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:13px 18px !important;
  border:1px solid var(--c-ink) !important;
  border-radius:0 !important;
  background:var(--c-ink) !important;
  color:#FFFFFF !important;
  font-family:var(--font-display) !important;
  font-size:11px !important; font-weight:800 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
#home-glydi .px .px-btn:hover{ background:var(--c-accent) !important; border-color:var(--c-accent) !important; color:var(--c-ink) !important; }
#home-glydi .px .px-btn.ghost{ background:transparent !important; color:var(--c-ink) !important; margin-top:8px; }
#home-glydi .px .px-btn.ghost:hover{ background:var(--c-ink) !important; color:#FFFFFF !important; }
#home-glydi .px .px-fine{
  margin:10px 0 0 !important;
  font-size:10.5px !important; line-height:1.5 !important;
  color:var(--c-muted) !important;
}

/* ==================================================================
   THE PANE
   ================================================================== */
#home-glydi .px-pane{ display:grid; gap:var(--c-gap); }
#home-glydi .px-block{
  background:var(--c-pane);
  border:1px solid var(--c-line);
  padding:clamp(20px, 2vw, 32px);
  scroll-margin-top:calc(var(--c-nav) + var(--c-gap) + 8px);
}
#home-glydi .px-block-head{
  display:grid;
  grid-template-columns:var(--c-idx) minmax(0, 1fr) auto;
  gap:0 var(--c-run);
  align-items:baseline;
  margin-bottom:clamp(18px, 2vw, 26px);
  padding-bottom:clamp(14px, 1.6vw, 20px);
  border-bottom:1px solid var(--c-line);
}
#home-glydi .px-block-head b{
  font-size:10px; font-weight:800; letter-spacing:.14em;
  color:var(--c-accent-dk);
  font-variant-numeric:tabular-nums;
}
#home-glydi .px .px-block-head h2{
  margin:0 !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important; font-style:normal !important;
  font-size:clamp(19px, 1.8vw, 26px) !important;
  line-height:1.15 !important; letter-spacing:-.028em !important;
  color:var(--c-ink) !important;
}
#home-glydi .px .px-block-head span{
  margin-left:auto;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-muted);
  white-space:nowrap;
}
#home-glydi .px .px-intro{
  margin:0 0 clamp(18px, 2vw, 26px) !important;
  margin-left:calc(var(--c-idx) + var(--c-run)) !important;
  max-width:74ch;
  font-size:14.5px !important; line-height:1.7 !important;
  color:var(--c-body) !important;
}

/* ---- data rows ---- */
#home-glydi .px-rows{ border-top:1px solid var(--c-line); }
#home-glydi .px-row{
  display:grid;
  grid-template-columns:var(--c-idx) minmax(0, 1fr) clamp(160px, 20vw, 260px);
  gap:var(--c-run);
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--c-line);
  transition:background .22s ease;
}
#home-glydi .px-row:hover{ background:var(--c-accent-wash); }
#home-glydi .px-row-n{
  font-size:10px; font-weight:800; letter-spacing:.1em;
  color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
#home-glydi .px .px-row h3{
  margin:0 0 3px !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  font-size:15px !important; letter-spacing:-.015em !important;
  color:var(--c-ink) !important;
}
#home-glydi .px .px-row p{
  margin:0 !important;
  font-size:13.5px !important; line-height:1.55 !important;
  color:var(--c-body) !important;
  max-width:62ch;
}
#home-glydi .px-chips{ display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
#home-glydi .px-chips i{
  font-style:normal;
  padding:3px 8px;
  border:1px solid var(--c-line);
  background:var(--c-bg);
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-muted);
  white-space:nowrap;
}

/* ---- modules as an expandable stack ---- */
#home-glydi .px-mods{ border-top:1px solid var(--c-line); }
#home-glydi .px-mod{ border-bottom:1px solid var(--c-line); }
#home-glydi .px-mod summary{
  list-style:none; cursor:pointer;
  display:grid;
  grid-template-columns:var(--c-idx) minmax(0,1fr) auto;
  gap:var(--c-run); align-items:center;
  padding:14px 0;
  transition:color .22s ease;
}
#home-glydi .px-mod summary::-webkit-details-marker{ display:none; }
#home-glydi .px-mod summary b{
  font-size:10px; font-weight:800; letter-spacing:.1em;
  color:var(--c-muted); font-variant-numeric:tabular-nums;
}
#home-glydi .px-mod summary strong{
  font-size:15px; font-weight:800; letter-spacing:-.015em;
  color:var(--c-ink);
}
#home-glydi .px-mod summary::after{
  content:"+";
  font-size:16px; font-weight:700; color:var(--c-accent);
  transition:transform .3s cubic-bezier(.22,.72,.24,1);
}
#home-glydi .px-mod[open] summary::after{ transform:rotate(45deg); }
#home-glydi .px-mod[open] summary b{ color:var(--c-accent-dk); }
#home-glydi .px-mod summary:hover strong{ color:var(--c-accent-dk); }
#home-glydi .px-mod ul{ list-style:none; margin:0 0 16px; padding:0 0 0 calc(var(--c-idx) + var(--c-run)); }
#home-glydi .px-mod li{
  position:relative;
  padding:6px 0 6px 16px;
  font-size:13.5px; line-height:1.55;
  color:var(--c-body);
}
#home-glydi .px-mod li::before{
  content:"";
  position:absolute; left:0; top:14px;
  width:6px; height:1px; background:var(--c-accent);
}

/* ---- outcome grid ---- */
#home-glydi .px-grid{
  margin-left:calc(var(--c-idx) + var(--c-run));
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1px;
  background:var(--c-line);
  border:1px solid var(--c-line);
}
#home-glydi .px-grid div{ background:var(--c-pane); padding:clamp(14px, 1.6vw, 20px); }
#home-glydi .px .px-grid strong{
  display:block; margin-bottom:4px;
  font-size:14px; font-weight:800; letter-spacing:-.015em;
  color:var(--c-ink);
}
#home-glydi .px .px-grid p{
  margin:0 !important;
  font-size:13px !important; line-height:1.55 !important;
  color:var(--c-body) !important;
}

/* ---- roles table ---- */
#home-glydi .px-table{ width:100%; border-top:1px solid var(--c-line); }
#home-glydi .px-tr{
  display:grid;
  grid-template-columns:var(--c-idx) minmax(0,1fr) auto;
  gap:var(--c-run); align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--c-line);
  transition:background .22s ease;
}
#home-glydi .px-tr:hover{ background:var(--c-accent-wash); }
#home-glydi .px-tr b:first-child{
  font-size:10px; font-weight:800; color:var(--c-muted); font-variant-numeric:tabular-nums;
}
#home-glydi .px-tr span{ font-size:15px; font-weight:700; color:var(--c-ink); letter-spacing:-.015em; }
#home-glydi .px-tr em{
  font-style:normal;
  font-size:13px; font-weight:800;
  color:var(--c-accent-dk);
  font-variant-numeric:tabular-nums lining-nums;
  min-width:7ch; text-align:right;
}
#home-glydi .px .px-note{
  margin:14px 0 0 !important;
  margin-left:calc(var(--c-idx) + var(--c-run)) !important;
  font-size:11.5px !important; line-height:1.6 !important;
  color:var(--c-muted) !important;
}

/* ---- FAQ ---- */
#home-glydi .px-faq{ border-top:1px solid var(--c-line); margin-left:calc(var(--c-idx) + var(--c-run)); }
#home-glydi .px-faq details{ border-bottom:1px solid var(--c-line); }
#home-glydi .px-faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0;
  font-size:15px; font-weight:800; letter-spacing:-.015em;
  color:var(--c-ink);
}
#home-glydi .px-faq summary::-webkit-details-marker{ display:none; }
#home-glydi .px-faq summary::after{
  content:"+"; font-size:16px; font-weight:700; color:var(--c-accent);
  transition:transform .3s cubic-bezier(.22,.72,.24,1);
}
#home-glydi .px-faq details[open] summary::after{ transform:rotate(45deg); }
#home-glydi .px .px-faq p{
  margin:0 0 16px !important;
  max-width:76ch;
  font-size:13.5px !important; line-height:1.7 !important;
  color:var(--c-body) !important;
}

/* ---- the enrol block closes the pane ---- */
#home-glydi .px-enrol{
  background:var(--c-ink) !important;
  border-color:var(--c-ink) !important;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, .8fr);
  gap:clamp(20px, 3vw, 44px);
  align-items:center;
}
#home-glydi .px .px-enrol h2{
  margin:0 !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  font-size:clamp(22px, 2.2vw, 32px) !important;
  line-height:1.12 !important; letter-spacing:-.03em !important;
  color:#FFFFFF !important;
  max-width:20ch;
}
#home-glydi .px .px-enrol h2 em{ font-style:normal; color:var(--c-accent); }
#home-glydi .px .px-enrol > div > p{
  margin:12px 0 0 !important;
  max-width:52ch;
  font-size:13.5px !important; line-height:1.6 !important;
  color:rgba(255,255,255,.72) !important;
}
#home-glydi .px-form{ background:var(--c-pane); padding:clamp(18px, 2vw, 26px); }
#home-glydi .px .px-form h3{
  margin:0 0 6px !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:-.015em !important;
  color:var(--c-ink) !important;
}
#home-glydi .px .px-form p{
  margin:0 0 14px !important;
  font-size:12.5px !important; line-height:1.5 !important;
  color:var(--c-body) !important;
}
#home-glydi .px-form label{
  display:block; margin-bottom:5px;
  font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-muted);
}
#home-glydi .px-form input{
  width:100%; padding:12px 13px;
  border:1px solid var(--c-line-hi); border-radius:0;
  background:var(--c-pane);
  font-family:var(--font-display); font-size:13.5px;
  color:var(--c-ink);
}
#home-glydi .px-form input:focus{ border-color:var(--c-accent); outline:none; }
#home-glydi .px-form .px-btn{ margin-top:12px; }

/* ---- progress rail ---- */
#home-glydi .px-progress{
  position:fixed; top:var(--c-nav); left:0; right:0; z-index:60;
  height:2px; background:var(--c-accent);
  transform:scaleX(0); transform-origin:left center;
  will-change:transform; pointer-events:none;
}

/* ==================================================================
   MOTION
   ================================================================== */
#home-glydi .px .reveal{ opacity:1 !important; transform:none !important; }
#home-glydi .px[data-motion="on"] .reveal{
  opacity:0 !important; transform:translate3d(0,14px,0) !important;
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,.72,.24,1);
}
#home-glydi .px[data-motion="on"] .reveal.in{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){
  #home-glydi .px[data-motion="on"] .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  #home-glydi .px-progress{ display:none; }
}

/* ==================================================================
   RESPONSIVE — the rail becomes a header card
   ================================================================== */
@media (max-width:1024px){
  #home-glydi .px-shell{ grid-template-columns:minmax(0,1fr); }
  #home-glydi .px-rail{ position:static; max-height:none; overflow:visible; }
  #home-glydi .px-toc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 14px; }
  #home-glydi .px-toc p{ grid-column:1 / -1; }
  #home-glydi .px-enrol{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px){
  #home-glydi .px .px-intro,
  #home-glydi .px .px-note{ margin-left:0 !important; }
  #home-glydi .px-grid,
  #home-glydi .px-faq{ margin-left:0; }
}
@media (max-width:620px){
  #home-glydi .px-row{ grid-template-columns:var(--c-idx) minmax(0,1fr); }
  #home-glydi .px-chips{ grid-column:2; justify-content:flex-start; }
  #home-glydi .px-mod ul{ padding-left:calc(var(--c-idx) + var(--c-run)); }
  #home-glydi .px-tr{ grid-template-columns:var(--c-idx) minmax(0,1fr) auto; }
}

/* ==================================================================
   TRACK COLOUR
   The program pages all looked the same, so nothing told a student
   which half of the school they were in. Each page now carries its
   track, and the accent follows:

     .track-ai     ONROL orange   — the AI programs
     .track-cyber  deep indigo    — the security programs

   Only the accent moves. The ground, the panes and the type stay
   identical, so the two tracks read as one school rather than two
   sites, and the pages stay light and legible.
   ================================================================== */

#home-glydi .track-ai{
  --c-accent:#F46718;
  --c-accent-dk:#B8480A;
  --c-accent-wash:#FFF3EB;
  --c-accent-soft:rgba(244,103,24,.28);
}
#home-glydi .track-cyber{
  --c-accent:#3B5BDB;
  --c-accent-dk:#2B44AC;
  --c-accent-wash:#EEF1FE;
  --c-accent-soft:rgba(59,91,219,.26);
}

/* the same tokens for the pages still on the legacy template */
#home-glydi .track-ai.pg-legacy{
  --e-accent:#F46718;
  --e-accent-dk:#B8480A;
}
#home-glydi .track-cyber.pg-legacy{
  --e-accent:#3B5BDB;
  --e-accent-dk:#2B44AC;
}

/* ---- a clearer, friendlier surface for the whole console ---- */
#home-glydi .px{
  --c-bg:#F7F7F9;
  --c-pane:#FFFFFF;
  --c-line:rgba(17,17,16,.10);
  --c-line-hi:rgba(17,17,16,.20);
}

/* the rail reads as the page's identity card, tinted by its track */
#home-glydi .px-rail{
  border-top:3px solid var(--c-accent) !important;
  box-shadow:0 1px 2px rgba(17,17,16,.04), 0 12px 28px -24px rgba(17,17,16,.28);
}
#home-glydi .px-badge{
  background:var(--c-accent-wash) !important;
  color:var(--c-accent-dk) !important;
}
#home-glydi .px-rail h1 em{ color:var(--c-accent-dk) !important; }

/* the spec figures sit on a tinted strip, so the numbers carry weight */
#home-glydi .px-spec{
  background:var(--c-accent-wash);
  border:1px solid var(--c-accent-soft);
  border-radius:2px;
  padding:4px 12px;
}
#home-glydi .px-spec div{ border-bottom-color:var(--c-accent-soft) !important; }
#home-glydi .px-spec div:last-child{ border-bottom:0 !important; }
#home-glydi .px .px-spec b{ color:var(--c-accent-dk) !important; }

/* blocks: a hairline of the track colour at the head keeps the page
   from reading as one long grey sheet */
#home-glydi .px-block{
  box-shadow:0 1px 2px rgba(17,17,16,.03);
}
#home-glydi .px-block-head{ border-bottom:1px solid var(--c-accent-soft) !important; }
#home-glydi .px-block-head b{ color:var(--c-accent-dk) !important; }
#home-glydi .px .px-block-head span{
  padding:4px 10px;
  background:var(--c-accent-wash);
  color:var(--c-accent-dk);
  border-radius:999px;
  font-size:9.5px;
}

/* rows, modules and the table pick the track up on hover */
#home-glydi .px-row:hover,
#home-glydi .px-tr:hover{ background:var(--c-accent-wash) !important; }
#home-glydi .px-mod summary::after,
#home-glydi .px-faq summary::after{ color:var(--c-accent) !important; }
#home-glydi .px-mod[open] summary b{ color:var(--c-accent-dk) !important; }
#home-glydi .px-mod li::before{ background:var(--c-accent) !important; }
#home-glydi .px-tr em{ color:var(--c-accent-dk) !important; }
#home-glydi .px-chips i{
  border-color:var(--c-accent-soft) !important;
  background:var(--c-accent-wash) !important;
  color:var(--c-accent-dk) !important;
}
#home-glydi .px-toc a.is-here{ border-left-color:var(--c-accent) !important; }
#home-glydi .px-toc a.is-here b{ color:var(--c-accent-dk) !important; }
#home-glydi .px-toc a:hover{ background:var(--c-accent-wash) !important; }
#home-glydi .px-progress{ background:var(--c-accent) !important; }

/* the outcome grid gains a tinted top edge per cell */
#home-glydi .px-grid div{ border-top:2px solid transparent; transition:border-color .25s ease, background .25s ease; }
#home-glydi .px-grid div:hover{ border-top-color:var(--c-accent); background:var(--c-accent-wash); }

/* controls */
#home-glydi .px .px-btn:hover{ background:var(--c-accent) !important; border-color:var(--c-accent) !important; color:#FFFFFF !important; }
#home-glydi .track-cyber .px .px-btn:hover{ color:#FFFFFF !important; }
#home-glydi .px-form{ border-top:3px solid var(--c-accent) !important; }
#home-glydi .px-form input:focus{ border-color:var(--c-accent) !important; box-shadow:0 0 0 3px var(--c-accent-wash); }
#home-glydi .px-enrol h2 em{ color:var(--c-accent) !important; }

/* One fix kept from the gradient pass, because it is legibility rather than
   design: the enrol block paints its paragraphs white for the ink ground and
   the same rule was catching the copy inside the form card, which sits on
   white. "Drop your number and the team comes back…" was invisible on all
   five program pages, and had been for a while. */
#home-glydi .px .px-enrol .px-form p{ color:var(--c-body) !important; }
#home-glydi .px .px-enrol .px-form p.px-fine{ color:var(--c-muted) !important; }