/* ============================================================
   DARK THEME OVERRIDE — HEADER + HERO ONLY
   Applies the corporate dark template look (navy #051121,
   sky #00aeef, crimson #bf1e2e) over the existing v4 markup.
   Scoped so the rest of the page is untouched.
   ============================================================ */

:root{
  --tpl-navy:#051121;
  --tpl-navy-light:#0c233c;
  --tpl-dark:#02070f;
  --tpl-blue:#00aeef;
  --tpl-blue-dark:#008ec4;
  --tpl-red:#bf1e2e;
  --tpl-red-dark:#9c1421;
}

/* ---- DARK ZONE: a self-contained dark band wrapping nav + hero.
   It carries its own dark background so the rest of the (light)
   page below is completely unaffected. ---- */
.dark-zone{
  position:relative;
  isolation:isolate;
  background:linear-gradient(to top right,#02070f 0%,#051121 55%,#0a1b30 100%);
  overflow:hidden;
}
.dz-bg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.dz-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:50px 50px;
  opacity:.5;
}
.dz-bg .blob{
  position:absolute; border-radius:50%;
  filter:blur(110px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.dz-bg .blob.blue{
  top:-160px; left:-160px; width:640px; height:640px;
  background:radial-gradient(circle at 30% 30%,rgba(0,174,239,.20),rgba(79,70,229,.05) 70%);
  animation:tplFloat 15s ease-in-out infinite, tplPulse 8s ease-in-out infinite;
}
.dz-bg .blob.red{
  bottom:-220px; right:-220px; width:740px; height:740px;
  background:radial-gradient(circle at 70% 70%,rgba(191,30,46,.15),rgba(251,113,133,.05) 70%);
  filter:blur(130px);
  animation:tplFloat 18s ease-in-out infinite 2s, tplPulse 8s ease-in-out infinite;
}
.dz-bg .blob.emerald{
  top:40%; left:30%; width:440px; height:440px;
  background:rgba(16,185,129,.05);
  filter:blur(140px);
  animation:tplFloat 15s ease-in-out infinite;
}
/* Nav + hero sit above the nebula layer */
.dark-zone > .v4-nav,
.dark-zone > .v4-hero{ position:relative; z-index:1; }
@keyframes tplFloat{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); }
  50%    { transform:translateY(-30px) translateX(15px) scale(1.1); }
}
@keyframes tplPulse{
  0%,100%{ opacity:.4; }
  50%    { opacity:.85; }
}

/* The hero must be see-through so the dark zone shows behind it */
.v4-hero{ background:transparent !important; }
/* Kill the original light radial wash inside the hero */
.v4-hero > div[style*="radial-gradient"]{ display:none !important; }

/* ============================================================
   NAVIGATION — dark glass
   ============================================================ */
.v4-brand,
.v4-nav-links,
.btn-ghost-nav{
  background:rgba(5,17,33,.7) !important;
  backdrop-filter:blur(25px) !important;
  -webkit-backdrop-filter:blur(25px) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.35) !important;
}
.v4-brand-logo{ background:rgba(255,255,255,.06) !important; }
.v4-brand-txt strong{ color:#fff !important; }
.v4-brand-txt span{ color:rgba(255,255,255,.55) !important; }

.v4-nav-links a{ color:rgba(255,255,255,.72) !important; }
.v4-nav-links a:hover{
  color:#fff !important;
  background:rgba(0,174,239,.18) !important;
}

.btn-ghost-nav{ color:#fff !important; }
.btn-ghost-nav:hover{
  border-color:var(--tpl-blue) !important;
  color:var(--tpl-blue) !important;
}

.btn-primary-nav{
  background:var(--tpl-red) !important;
  box-shadow:0 6px 24px rgba(191,30,46,.45) !important;
}
.btn-primary-nav::before{ background:var(--tpl-blue) !important; }
.btn-primary-nav:hover{ box-shadow:0 14px 34px rgba(0,174,239,.35) !important; }

/* ============================================================
   HERO TEXT — light on dark + glow
   ============================================================ */
.v4-eyebrow{ color:rgba(255,255,255,.7) !important; }
.v4-eyebrow-dot{
  background:var(--tpl-blue) !important;
  box-shadow:0 0 0 5px rgba(0,174,239,.22) !important;
}

.v4-hero-title{
  color:#fff !important;
  text-shadow:0 0 30px rgba(0,174,239,.25);
}
.v4-hero-title em{ color:var(--tpl-blue) !important; }
.v4-hero-title .underlined::after{ background:var(--tpl-blue) !important; opacity:.35; }
.v4-cursor{ background:var(--tpl-red) !important; }

.v4-hero-sub{ color:rgba(255,255,255,.72) !important; }

/* Hero CTA buttons */
.v4-btn-primary{
  background:var(--tpl-red) !important;
  box-shadow:0 6px 24px rgba(191,30,46,.4) !important;
}
.v4-btn-primary::before{ background:var(--tpl-blue) !important; }
.v4-btn-primary:hover{ box-shadow:0 14px 34px rgba(0,174,239,.35) !important; }

.v4-btn-ghost{
  color:#fff !important;
  border-color:rgba(255,255,255,.25) !important;
}
.v4-btn-ghost:hover{ border-color:var(--tpl-blue) !important; color:var(--tpl-blue) !important; }

/* Trust row */
.v4-hero-trust{ border-top-color:rgba(255,255,255,.12) !important; }
.v4-av{ border-color:var(--tpl-navy) !important; }
.v4-av:nth-child(1){ background:var(--tpl-blue) !important; }
.v4-av:nth-child(3){ background:var(--tpl-red) !important; }
.v4-av:nth-child(4){ background:var(--tpl-blue) !important; color:#fff !important; }
.v4-trust-txt strong{ color:#fff !important; }
.v4-trust-txt span{ color:rgba(255,255,255,.55) !important; }

/* ============================================================
   HERO RIGHT — image card, corner badge, live card
   ============================================================ */
.v4-hero-img{
  box-shadow:0 30px 70px rgba(0,0,0,.55) !important;
  border:1px solid rgba(255,255,255,.06);
}
.v4-hero-img-ov{
  background:linear-gradient(180deg,rgba(5,17,33,.25) 0%,rgba(5,17,33,.85) 100%) !important;
}
.v4-hero-tag{ background:var(--tpl-red) !important; }
.v4-hero-corner{
  background:var(--tpl-navy-light) !important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.5) !important;
}
.v4-hero-corner strong{ color:var(--tpl-blue) !important; }

.v4-live-card{
  background:rgba(5,17,33,.72) !important;
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.5) !important;
}
.v4-live-hdr{ color:rgba(255,255,255,.55) !important; }
.v4-live-row{ border-top-color:rgba(255,255,255,.08) !important; }
.v4-live-row span{ color:rgba(255,255,255,.6) !important; }
.v4-live-row strong{ color:#fff !important; }

/* Scroll progress recoloured to template accents */
.scroll-progress{ background:linear-gradient(90deg,var(--tpl-blue),var(--tpl-red)) !important; }

/* Loader matches deep navy base */
.v4-loader{ background:var(--tpl-navy) !important; }
.v4-loader-bar i{ background:var(--tpl-blue) !important; }

/* ---- Responsive: keep blobs from overflowing on small screens ---- */
@media (max-width:768px){
  .dz-bg .blob.blue{ width:380px; height:380px; }
  .dz-bg .blob.red{ width:420px; height:420px; }
}

/* ============================================================
   ANIMATION LAYERS (canvas network, topo lines, tiles, marks)
   ============================================================ */

/* Interactive cyber-grid canvas — fills the dark zone, behind content */
#dz-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}

/* Animated topographic SVG lines */
.dz-topo{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.55;
  pointer-events:none;
  animation:dzTopoDrift 24s ease-in-out infinite alternate;
}
@keyframes dzTopoDrift{
  0%  { transform:translateX(0) translateY(0); }
  100%{ transform:translateX(-40px) translateY(20px); }
}

/* Blueprint crosshair markers + mono labels */
.dz-mark{ position:absolute; width:24px; height:24px; pointer-events:none; }
.dz-mark-tl{ top:25%; left:48px; border-left:1px solid rgba(255,255,255,.15); border-top:1px solid rgba(255,255,255,.15); }
.dz-mark-br{ bottom:25%; right:48px; border-right:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.dz-label{
  position:absolute;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:8px; letter-spacing:.08em; color:rgba(255,255,255,.4);
  pointer-events:none;
}
.dz-label-tl{ top:25%; left:48px; transform:translate(28px,6px); }
.dz-label-br{ bottom:25%; right:48px; transform:translate(-8px,-30px); text-align:right; }

/* Floating parallax glass tiles */
.dz-tiles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.dz-tile{
  position:absolute;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:rgba(5,17,33,.6);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  opacity:.92;
}
#dz-tile-1{ top:128px; right:33%; }
#dz-tile-2{ bottom:160px; left:80px; }
.dz-tile-ic{
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.dz-tile-ic-blue{ background:rgba(0,174,239,.12); color:#00aeef; }
.dz-tile-ic-red{ background:rgba(191,30,46,.12); color:#bf1e2e; }
.dz-tile-txt{ display:flex; flex-direction:column; line-height:1.25; }
.dz-tile-txt em{ font-style:normal; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); }
.dz-tile-txt strong{ font-size:12px; font-weight:700; color:#f1f5f9; }

/* Hide decorative layers on smaller screens for clarity/perf */
@media (max-width:1024px){
  .dz-tiles{ display:none; }
}
@media (max-width:768px){
  .dz-topo{ opacity:.3; }
  .dz-mark,.dz-label{ display:none; }
}

/* Hide the original (light-tuned) hero canvas; the dz-canvas replaces it */
#hero-net{ display:none !important; }

/* ============================================================
   CORRECTIONS BUNDLE
   ============================================================ */

/* --- #2 Hero image: Ken Burns auto slideshow --- */
#v4-hero-slideshow{ position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden; }
#v4-hero-slideshow .v4-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1.6s ease;
}
#v4-hero-slideshow .v4-slide.is-active{
  opacity:1;
  animation:kenburns 8s ease-out forwards;
  z-index:1;
}
@keyframes kenburns{
  0%  { transform:scale(1.05) translate(0,0); }
  100%{ transform:scale(1.18) translate(-1.5%,-1.5%); }
}
/* overlay + caption sit above slides */
.v4-hero-img-ov{ z-index:2 !important; }
.v4-hero-overlay{ z-index:3 !important; }

/* --- #4 Stats: four big counting numbers, no left label --- */
.v4-stats-4{ grid-template-columns:repeat(4,1fr) !important; text-align:center; }
.v4-stats-4 .v4-stat strong{ font-size:clamp(42px,5vw,68px); }
.v4-stats-4 .v4-stat span{ font-size:13px; }
@media (max-width:900px){ .v4-stats-4{ grid-template-columns:1fr 1fr !important; } }

/* --- #5 Services header centered --- */
.v4-sec-hdr-center{
  display:block !important;
  text-align:center;
  max-width:760px;
  margin-left:auto; margin-right:auto;
}
.v4-sec-hdr-center .sub{ margin-left:auto; margin-right:auto; }

/* --- #6 Completed-program cards with image --- */
.v4-track-card{ padding:0 !important; overflow:hidden; display:flex; flex-direction:column; }
.v4-track-img{
  width:100%; height:150px;
  background-size:cover; background-position:center;
  background-color:var(--navy);
}
.v4-track-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.v4-track-card h4{ min-height:auto; }

/* --- #7 Our Clients marquee label readable --- */
.v4-marquee{ padding-left:0 !important; }
.v4-marquee-lbl{
  position:relative;
  z-index:5 !important;
  background:var(--navy);
  padding:20px 22px 20px 28px !important;
  align-self:stretch;
  display:flex; align-items:center;
  box-shadow:18px 0 24px -8px var(--navy);
}
/* keep the left fade behind the label, not over it */
.v4-marquee::before{ z-index:1 !important; }

/* --- #9 Per-campus contact details --- */
.v4-meta-contact{ display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.v4-meta-row{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.v4-meta-contact a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
  transition:color .2s;
}
.v4-meta-contact a:hover{ color:var(--blue); }
.v4-meta-contact i{ font-size:11px; color:var(--blue); }

/* ============================================================
   #12 HOVER FIXES — keep text visible on hover everywhere
   ============================================================ */
/* Primary buttons fill with navy on hover via ::before; ensure text/icon stay white above it */
.btn-primary-nav,
.btn-primary-nav:hover,
.v4-btn-primary,
.v4-btn-primary:hover{ color:#fff !important; }
.btn-primary-nav > *,
.v4-btn-primary > *{ position:relative; z-index:2; }

/* Dark-theme ghost nav button: was turning text to blue but bg stayed dark — keep readable */
.btn-ghost-nav:hover{ color:#fff !important; background:rgba(0,174,239,.15) !important; }

/* Hero ghost button stays light on hover */
.v4-btn-ghost:hover{ color:#fff !important; }

/* Nav links: ensure hover text never matches its hover bg */
.v4-nav-links a:hover{ color:#fff !important; }

/* Filter buttons (courses) — make active/hover legible regardless of theme */
.v4-filter-btn:hover{ color:#fff !important; }

/* --- #1 Typewriter: reserve width so layout doesn't jump --- */
#dz-typewriter{ display:inline-block; min-width:5ch; }
.v4-hero-title .line:last-child{ white-space:nowrap; }

.v4-btn-primary > *{ z-index:2 !important; }
/* the bare text node sits at the button's own stacking level (above z-0 overlay) */

/* #12 definitive: labels are now wrapped in <span>, so lift all children
   above the ::before fill overlay; keep text white on hover. */
.btn-primary-nav,
.v4-btn-primary{ isolation:isolate; }
.btn-primary-nav::before,
.v4-btn-primary::before{ z-index:0; }
.btn-primary-nav > *,
.v4-btn-primary > *{ position:relative; z-index:1; color:#fff !important; }

/* ============================================================
   FOLLOW-UP CORRECTIONS
   ============================================================ */

/* --- A. What We Offer: center the service cards' content --- */
/* Center the parent navy box itself (inline margin:0 0 was pinning it left). */
#services .v4-services-box{
  max-width:1280px;
  margin-left:auto !important;
  margin-right:auto !important;
}
#services .v4-svc{ text-align:center; }
#services .v4-svc-icon{ margin-left:auto; margin-right:auto; }
/* Grid was capped at 1280px and floating left inside the wider navy box,
   leaving empty space on the right. Let it fill the box evenly. */
#services .v4-services-grid{
  max-width:none !important;
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* Center the header block inside the full-width box too */
#services .v4-sec-hdr-center{ margin-left:auto !important; margin-right:auto !important; max-width:1040px; }
/* Heading on one line, paragraph on two lines (desktop) */
#services .v4-sec-hdr-center h2{ font-size:clamp(28px,3.4vw,44px); }
#services .v4-sec-hdr-center .sub{ max-width:720px; }
@media (max-width:860px){
  #services .v4-sec-hdr-center h2{ font-size:clamp(26px,6.5vw,38px); }
  #services .v4-sec-hdr-center .sub{ max-width:100%; }
}

/* --- B. Stats: BIG numbers with counting animation. Force size on both the
   <strong> wrapper AND the inner .v4-count span so nothing shrinks it. --- */
.v4-stats-4 .v4-stat strong,
.v4-stats-4 .v4-stat strong .v4-count,
.v4-stats .v4-stat strong .v4-count{
  font-size:clamp(52px,5.5vw,76px) !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  color:#ffffff !important;
}
.v4-stats-4 .v4-stat strong{
  white-space:nowrap;
  display:block;
}
.v4-stats-4 .v4-stat strong .v4-count{
  display:inline-block;
  font-family:var(--f-head);
  text-shadow:0 0 26px rgba(0,174,239,.4);
}
.v4-stats-4 .v4-stat span{ font-size:14px !important; color:rgba(255,255,255,.6) !important; margin-top:14px !important; }

/* --- C. Hero blueprint markers: remove --- */
.dz-mark, .dz-label{ display:none !important; }

/* --- D. Footer logo: remove blue background box --- */
.v4-footer-mark{ background:transparent !important; }

/* Completed-program card: icon fallback when no image_url in DB */
.v4-track-img-icon{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy),#1a3a5c) !important;
  color:var(--sky); font-size:34px;
}
/* --- Load more courses button --- */
.v4-course-more{ text-align:center; margin-top:44px; }
.v4-loadmore-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.01em;
  padding:14px 30px; border-radius:999px; transition:all .25s ease;
  box-shadow:0 6px 20px rgba(26,159,212,.28);
}
.v4-loadmore-btn:hover{ background:var(--navy); transform:translateY(-2px); box-shadow:0 10px 26px rgba(10,37,64,.32); }
.v4-loadmore-btn:active{ transform:translateY(0); }

/* --- Course card icon headers (category colour + dot pattern) --- */
.v4-course-thumb{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a3a5c,#0a2540); }
.v4-course-thumb::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px);
  background-size:16px 16px; opacity:.55;
}
.v4-course-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.10), transparent 45%);
}
.v4-course-ic{ position:relative; z-index:2; color:rgba(255,255,255,.94); font-size:44px;
  transition:transform .45s var(--ease-pop); text-shadow:0 6px 18px rgba(0,0,0,.28); }
.v4-course-card:hover .v4-course-ic{ transform:scale(1.12) translateY(-2px); }
/* category colours */
.v4-course-thumb.cat-it        { background:linear-gradient(135deg,#1a9fd4,#0a2540); }
.v4-course-thumb.cat-ai        { background:linear-gradient(135deg,#7c3aed,#312e81); }
.v4-course-thumb.cat-business  { background:linear-gradient(135deg,#12507e,#0a2540); }
.v4-course-thumb.cat-safety    { background:linear-gradient(135deg,#c1391e,#7a1410); }
.v4-course-thumb.cat-marketing { background:linear-gradient(135deg,#0d9488,#064e46); }
.v4-course-thumb.cat-training  { background:linear-gradient(135deg,#2d7a4a,#14532d); }

/* --- Course card photo (when a course image is set) --- */
.v4-course-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .5s var(--ease-out); }
.v4-course-card:hover .v4-course-photo{ transform:scale(1.06); }
.v4-course-thumb-ov{ z-index:2; }
.v4-course-tag, .v4-course-chips{ z-index:3; }

/* --- Submit button loading state --- */
.v4-form-submit.is-loading{ opacity:.7; cursor:progress; }
.v4-form-submit.is-loading svg{ animation:v4pulse 1s ease-in-out infinite; }
@keyframes v4pulse{ 0%,100%{ transform:translateX(0); opacity:.6; } 50%{ transform:translateX(3px); opacity:1; } }