/* Tenor Sans is missing a proper Ë/ë glyph (renders blank or malformed) —
   substitute a system font for just that character, everything else stays Tenor Sans. */
@font-face{
  font-family:'Tenor Sans';
  src:local('Segoe UI'), local('Arial'), local('Helvetica Neue'), local('Helvetica');
  unicode-range:U+00CB, U+00EB;
  font-weight:400;
  font-style:normal;
}

/* ==================== RESET & BASE ==================== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
:root{
  --dark:#000000;
  --dark-2:#050505;
  --dark-3:#0a0a0a;
  --cream:#ffffff;
  --text-muted:#bfbfbf;
  --accent:#ffffff;
  --accent-light:#ffffff;
  --border-soft: rgba(255,255,255,.15);
  --radius:2px;
  --ff-head: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition: .4s cubic-bezier(.65,0,.35,1);
}

/* ---- Appearance themes (cycled via header button, see script.js) ---- */
:root[data-theme="white"]{
  --dark:#ffffff; --dark-2:#f5f5f5; --dark-3:#ececec;
  --cream:#000000; --text-muted:#404040;
  --accent:#c9a06b; --accent-light:#8f6a34;
  --border-soft: rgba(0,0,0,.12);
}
/* The homepage hero has its own hardcoded dark photo backdrop + white text/stars
   that don't come from the theme variables, so they need explicit flips here too:
   white background + black text/stars for the white theme. */
:root[data-theme="white"] .hero-intro{ background:#ffffff; }
:root[data-theme="white"] .hero-bg::after{
  background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.52) 55%, rgba(255,255,255,.62) 100%);
  backdrop-filter:blur(4px);
}
:root[data-theme="white"] .hero-mark{ color:#000000; }
:root[data-theme="white"] .tagline-cycle,
:root[data-theme="white"] .tagline-static,
:root[data-theme="white"] .tagline-static-2{ color:#000000; }
:root[data-theme="white"] .hero-orbit-link{
  color:#2a2a2a; border-color:rgba(0,0,0,.5); background:#f0f0f0;
  box-shadow:0 0 0 rgba(0,0,0,0), 0 8px 20px rgba(0,0,0,.18);
}
:root[data-theme="white"] .hero-orbit-icon{ border:1px solid rgba(0,0,0,.25); }
:root[data-theme="colorful"]{
  /* Transparent so every section lets the fixed blurred .mesh-bg (below)
     show through continuously as you scroll, instead of solid color blocks. */
  --dark:transparent; --dark-2:transparent; --dark-3:transparent;
  --cream:#ffffff; --text-muted:#ffe8f0;
  --accent:#ffe14d; --accent-light:#00e5ff;
  --border-soft: rgba(255,255,255,.35);
}
/* The busy animated mesh needs a more solid chip behind the pill text than
   the plain dark background gets away with, or the pills wash out into it. */
:root[data-theme="colorful"] .hero-orbit-link{
  background:rgba(10,6,15,.55); border-color:rgba(255,255,255,.55);
}
/* Big soft blurred mesh of color blobs, fixed behind the whole page. Colors flow
   mint → yellow → pink → lavender → blue (no color sits directly opposite its
   complement, so nothing clashes the way red/green did). The base fill is a
   soft dusty lavender, not stark black/white, so gaps blend in instead of
   creating a hard ring — closer to the soft reference photo. */
.mesh-bg{
  position:fixed; inset:0; z-index:-1;
  opacity:0; transition:opacity .6s ease;
  background:
    radial-gradient(60% 70% at 15% 18%, #8fe8c8, transparent 78%),
    radial-gradient(55% 65% at 48% 10%, #f5e894, transparent 78%),
    radial-gradient(70% 80% at 74% 52%, #ff6fc4, transparent 78%),
    radial-gradient(60% 70% at 58% 82%, #c9a0e8, transparent 78%),
    radial-gradient(55% 65% at 95% 42%, #9ecbf0, transparent 78%),
    #cfd3e6;
  filter:blur(70px) saturate(105%);
}
:root[data-theme="colorful"] .mesh-bg{ opacity:1; animation:meshPlay 18s linear infinite; }
/* Colors slowly cycle through the whole spectrum so the mesh feels alive. */
@keyframes meshPlay{
  0%{ filter:blur(70px) saturate(105%) hue-rotate(0deg); }
  100%{ filter:blur(70px) saturate(105%) hue-rotate(360deg); }
}
/* A few elements need to stay solid/legible even when --dark turns transparent. */
:root[data-theme="colorful"] .preloader-bg{ background:#1a1025; }
:root[data-theme="colorful"] #mobileMenu{ background:rgba(15,10,20,.7); backdrop-filter:blur(14px); }
:root[data-theme="colorful"] .nav-link-academy:is(:hover, :active),
:root[data-theme="colorful"] .nav-link-academy.active{ color:#111; }
/* Hero (homepage) has its own hardcoded dark photo backdrop. Instead of hiding
   the photo, "color" blend-mode paints it with the mesh's hues while keeping
   its own light/dark detail — a duotone photo that still feels like the mesh. */
:root[data-theme="colorful"] .hero-intro{ background:transparent; }
:root[data-theme="colorful"] .hero-bg-img.active{ opacity:.55; }
:root[data-theme="colorful"] .hero-bg::after{
  background:linear-gradient(135deg, #ff3ec4, #8b5cf6 45%, #22b8e0 80%, #f0b93d);
  mix-blend-mode:color;
  opacity:.9;
}
:root[data-theme="colorful"] .tagline-static,
:root[data-theme="colorful"] .tagline-static-2{ color:#ffffff; }
/* Safety net: text-shadow inherits, so this gives every bit of text a soft
   dark halo, keeping it legible no matter which pastel is behind it. */
:root[data-theme="colorful"] body{ text-shadow:0 1px 14px rgba(0,0,0,.4); }
body{
  font-family: var(--ff-body); font-weight:500;
  color: var(--cream);
  background: var(--dark);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
h1,h2,h3,h4{
  font-family: var(--ff-head); font-weight:700; line-height:1.15;
  transition:color .35s ease;
}
/* Extra type selector (main) bumps specificity just enough to win over the
   page-specific color rules (.page-banner h1, .section-head h2, etc.) below,
   so headings visibly brighten whenever the cursor glow passes over them. */
main h1:is(:hover, :active), main h2:is(:hover, :active), main h3:is(:hover, :active), main h4:is(:hover, :active){
  color:#fff;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.eyebrow{
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:.75rem;
  color:var(--cream);
  font-weight:400;
  margin-bottom:.75rem;
}


/* ==================== PRELOADER ==================== */
/* No separate "fake" mark: the real header .logo IS the loading mark. It's pulled
   out to fixed+centered while loading, animates to dock exactly where it already
   naturally sits in the header, then simply reverts to its normal in-flow position —
   one single element throughout, never swapped for a look-alike. */
#preloader{
  position:fixed; inset:0; z-index:9999;
}
/* Hard, instant cutover once the curtain has fully faded — nothing left to hide by then. */
#preloader.gone{ visibility:hidden; pointer-events:none; }
.preloader-bg{
  position:absolute; inset:0; background:var(--dark);
  transition:opacity .6s ease;
}
#preloader.hidden .preloader-bg{ opacity:0; }

/* Gated behind html.js (set by an inline script, see <head>) so that with
   JavaScript disabled — where nothing would ever remove this state — the
   logo just renders normally in place instead of staying stuck centered. */
html.js body:not(.page-entered) .logo{
  position:fixed; z-index:10000;
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:pulse 1.2s ease-in-out infinite;
  transition:top .65s cubic-bezier(.22,1,.36,1), left .65s cubic-bezier(.22,1,.36,1),
             transform .65s cubic-bezier(.22,1,.36,1);
}
html.js body:not(.page-entered) .logo-img{
  height:130px;
  transition:height .65s cubic-bezier(.22,1,.36,1);
}
/* Dock: logo travels from center screen to the exact spot it occupies in the header.
   .nav-wrap is a centered max-width:1400px box with 40px padding, so on screens
   wider than 1400px that spot sits well past 40px from the edge — match that here. */
html.js body.docking:not(.page-entered) .logo{
  top:22px; left:max(40px, calc((100vw - 1400px) / 2 + 40px));
  transform:translate(0,0);
  animation:none;
}
html.js body.docking:not(.page-entered) .logo-img{ height:40px; }
@keyframes pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* Content entrance, synced with preloader curtain lifting */
main{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s ease .2s, transform .8s ease .2s;
}
body.page-entered main{ opacity:1; transform:none; }

/* ==================== BUTTONS ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 2.1rem;
  font-size:.8rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border-radius:var(--radius);
  transition:background .3s ease, color .3s ease, box-shadow .3s ease, transform .18s ease-out;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{ background:#ffffff; color:#000000; }
.btn-primary:is(:hover, :active){
  background:linear-gradient(90deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff);
  color:#fff; box-shadow:0 10px 26px rgba(176,107,255,.35);
}
/* White and colorful themes keep the original tan button — only the default
   black theme swaps to a white button, per user request. */
:root[data-theme="white"] .btn-primary,
:root[data-theme="colorful"] .btn-primary{ background:var(--accent); color:#211c14; }
:root[data-theme="colorful"] .btn-primary:is(:hover, :active){
  background:var(--accent-light); color:#fff; box-shadow:0 10px 26px rgba(143,106,52,.28);
}

/* ==================== BACK TO TOP ==================== */
#backToTop{
  position:fixed; right:24px; bottom:24px;
  width:46px; height:46px;
  background:var(--accent); color:#211c14;
  border-radius:50%; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease; z-index:500;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:is(:hover, :active){ background:var(--accent-light); color:#fff; }

/* ==================== HEADER ==================== */
header{
  position:fixed; top:0; left:0; width:100%;
  z-index:1300; padding:22px 0;
  background:transparent;
  border:1px solid transparent;
  border-radius:0;
  transition: all var(--transition);
}
header.scrolled, header:is(:hover, :active){
  padding:12px 0;
  background:rgba(10,9,8,.32);
  border-color:var(--border-soft);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Scrolling (not just hovering) shrinks it into a detached floating pill. */
header.scrolled{
  top:14px; left:50%; transform:translateX(-50%);
  width:min(94%, 1300px);
  border-radius:999px;
  box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
header.scrolled .nav-wrap{ padding:0 28px; }
.nav-wrap{
  max-width:1400px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:40px; width:auto; display:block; }
.logo-img-black{ display:none; }
:root[data-theme="white"] .logo-img-white{ display:none; }
:root[data-theme="white"] .logo-img-black{ display:block; }

.nav-right{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.nav-quick-link{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center;
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:.55rem 1.2rem; border-radius:999px;
  border:1px solid var(--accent-light); color:var(--cream);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav-quick-link::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .65s ease;
  pointer-events:none;
}
.nav-quick-link:is(:hover, :active)::before{ transform:translateX(120%); }
.nav-quick-link:is(:hover, :active){ transform:translateY(-2px); }
.nav-quick-link:active{ transform:translateY(-2px) scale(.94); }

.nav-link-projects:is(:hover, :active), .nav-link-projects.active{
  background:var(--accent); border-color:var(--accent); color:#211c14;
  box-shadow:0 8px 20px rgba(255,255,255,.35);
}
:root[data-theme="white"] .nav-link-projects:is(:hover, :active), :root[data-theme="white"] .nav-link-projects.active,
:root[data-theme="colorful"] .nav-link-projects:is(:hover, :active), :root[data-theme="colorful"] .nav-link-projects.active{
  box-shadow:0 8px 20px rgba(201,160,107,.35);
}
.nav-link-academy{ border-color:var(--cream); }
.nav-link-academy:is(:hover, :active), .nav-link-academy.active{
  background:var(--cream); border-color:var(--cream); color:var(--dark);
  box-shadow:0 8px 20px rgba(43,38,32,.28);
}

/* ---- Courses subpage header: wider course-platform-style bar ---- */
/* gap keeps the logo and Apply Now separated from the pill row even once
   header.scrolled shrinks the bar down to a narrower floating pill. */
.courses-header .nav-wrap{ max-width:1500px; gap:1.5rem; }
.courses-nav{ display:flex; align-items:center; justify-content:center; gap:.4rem; flex:1; min-width:0; flex-wrap:nowrap; overflow:hidden; }
.nav-text-link{
  font-size:.72rem; color:var(--cream); opacity:.85; white-space:nowrap;
  padding:.45rem .8rem; border-radius:999px; border:1px solid var(--border-soft);
  transition:opacity .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.nav-text-link:is(:hover, :active){ opacity:1; color:var(--accent-light); border-color:var(--accent-light); background:rgba(255,255,255,.06); }
.courses-nav-cta{
  border-radius:999px; padding:.6rem 1.4rem; font-size:.72rem;
}
/* The scrolled bar shrinks to a narrower floating pill (see header.scrolled),
   so the nav pills need to shrink further here too or the ends clip off. */
header.scrolled .courses-nav{ gap:.3rem; }
header.scrolled .nav-text-link{ font-size:.64rem; padding:.38rem .65rem; }
header.scrolled .courses-nav-cta{ padding:.5rem 1.1rem; font-size:.66rem; }
@media (max-width:1650px){
  .courses-nav{ display:none; }
}

.user-signature{
  display:none; height:34px; width:auto; max-width:110px;
  border-radius:8px; flex-shrink:0; object-fit:contain;
}
.user-signature.visible{ display:block; }
.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--accent-light); color:var(--cream);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
}
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle:is(:hover, :active){ background:var(--accent); border-color:var(--accent); color:#211c14; transform:rotate(20deg); }
.theme-toggle:active{ transform:rotate(20deg) scale(.9); }

#hamburger{
  display:flex; flex-direction:column; gap:5px; width:28px;
  position:relative; z-index:1200;
}
#hamburger span{
  display:block; height:2px; width:100%; background:var(--cream); transition:all .35s ease;
}

#hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#hamburger.active span:nth-child(2){ opacity:0; }
#hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==================== MOBILE MENU (full nav overlay, all breakpoints) ==================== */
#mobileMenu{
  position:fixed; inset:0; background:var(--dark); overflow-y:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3rem; z-index:1100; padding:2rem 0;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.65,0,.35,1);
}
#mobileMenu.open{ transform:translateY(0); }
.mobile-links{ text-align:center; }
.mobile-links-courses .mobile-link{ font-size:1.3rem; padding:.3rem 0; }
.mobile-link{
  display:block; font-family:var(--ff-head); font-size:2.2rem; color:var(--cream);
  padding:.5rem 0; letter-spacing:1px;
}
.mobile-link:is(:hover, :active), .mobile-link.active{ color:var(--accent-light); }
.mobile-social{ display:flex; gap:1.5rem; }
.mobile-social a{ color:var(--text-muted); font-size:.8rem; letter-spacing:1px; text-transform:uppercase; }
.mobile-social a:is(:hover, :active){ color:var(--accent-light); }

/* ==================== HERO ==================== */
.hero{
  position:relative; height:100vh; height:100svh; min-height:700px;
  overflow:hidden;
}
@media (max-width:680px){ .hero{ min-height:600px; } }

/* ---- Hero intro (dark, animated mark) ---- */
.hero-intro{
  background:#000;
  display:flex; align-items:center; justify-content:center;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 2s ease, transform 8s ease;
}
.hero-bg-img.active{ opacity:.4; transform:scale(1); }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,.92) 100%);
}
.hero-network{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  pointer-events:none; opacity:.8;
}
.hero-intro-content{
  position:relative; z-index:2; text-align:center; padding:0 20px;
  margin-top:7vh;
  transition:transform .25s ease-out, opacity .25s ease-out;
  will-change:transform, opacity;
}
.academy-hero-intro .hero-intro-content{ margin-top:3vh; }
.hero-mark{
  /* Tenor Sans has no true bold cut, so the site mark uses a genuine heavy
     system sans instead — this is the one place on the site that departs
     from Tenor Sans, to get an actually thick, chunky "2DRE" mark. */
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:800; color:#fff;
  font-size:clamp(2.4rem,6.2vw,5.4rem); letter-spacing:0; line-height:1;
  cursor:pointer; display:inline-block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), text-shadow .35s ease;
}
.academy-hero-intro .hero-mark{
  font-size:clamp(1.7rem,3.8vw,3.1rem); line-height:1.15; cursor:pointer;
}
.academy-more-hint{
  margin-top:.9rem; font-size:.78rem; letter-spacing:.5px;
  color:var(--text-muted); opacity:.8;
}
.academy-more{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.academy-more.open{ max-height:20000px; opacity:1; }
.hero-mark:is(:hover, :active){ transform:scale(1.035); }
.hero-mark:active{ transform:scale(.97); }
.hero-mark-hint{
  position:fixed; left:0; top:0; z-index:9999;
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:#000; background:#fff; padding:.4rem .8rem; border-radius:999px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.hero-mark-hint.visible{ opacity:1; }
.hero-tagline{
  margin-top:1.8rem; font-size:clamp(.85rem,1.5vw,1.1rem); line-height:1.55;
  /* Tenor Sans has no true bold cut — same system-sans swap as the 2DRE mark,
     just a lighter weight here since this is body copy, not the logo. */
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:600;
}
.tagline-line1{ display:flex; justify-content:center; align-items:baseline; gap:.4em; }
.tagline-static{ color:#fff; flex:none; }
.tagline-cycle-wrap{ min-width:12ch; text-align:left; }
.tagline-cycle{
  color:#fff; font-weight:700; display:inline-block;
  transition:opacity .35s ease, transform .35s ease;
}
.tagline-cycle.swap{ opacity:0; transform:translateY(6px); }
.tagline-static-2{ display:block; color:#fff; margin-top:.15rem; }

/* ---- Floating quick-links scattered around the hero mark ---- */
.hero-orbit{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-orbit-link{
  position:absolute; left:0; top:0; pointer-events:auto;
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Tenor Sans', serif;
  font-size:clamp(.64rem,1.15vw,.8rem); letter-spacing:1.2px; text-transform:uppercase; font-weight:600;
  color:var(--cream); white-space:nowrap;
  padding:clamp(.5rem,1.5vw,.7rem) clamp(.8rem,2vw,1.15rem);
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  box-shadow:0 0 0 rgba(0,0,0,0), 0 8px 24px rgba(0,0,0,.35);
  transition:color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
/* True :hover is gated behind (hover:hover) — on touch, a :hover style
   change on a link makes the browser eat the first tap just to simulate
   the hover, so opening it needed two taps. :active is different: it
   tracks the actual press duration (finger down → up), not a simulated
   hover, so holding a pill shows the same look a mouse hover would, and a
   normal quick tap still just navigates on release. */
@media (hover:hover){
  .hero-orbit-link:is(:hover, :active){
    background:var(--accent); border-color:var(--accent); color:#211c14;
    box-shadow:0 8px 20px rgba(255,255,255,.35);
  }
}
.hero-orbit-link:active{
  background:var(--accent); border-color:var(--accent); color:#211c14;
  box-shadow:0 8px 20px rgba(255,255,255,.35);
}
.hero-orbit-icon{
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  background:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-orbit-icon svg{ width:65%; height:65%; }
.hero-orbit-icon img{ width:100%; height:100%; object-fit:cover; }
/* Icon-only pills (course orbit on the Academy page): the name stays
   collapsed to nothing until hover, so only the logo shows at rest. */
.hero-orbit-icons .hero-orbit-link{ padding:.6rem; gap:0; }
.hero-orbit-icons .hero-orbit-label{
  display:inline-block; max-width:0; margin-left:0; opacity:0;
  overflow:hidden; white-space:nowrap;
  transition:max-width .35s ease, margin-left .35s ease, opacity .25s ease;
}
@media (hover:hover){
  .hero-orbit-icons .hero-orbit-link:is(:hover, :active){ padding:.42rem 1.1rem .42rem .42rem; }
  .hero-orbit-icons .hero-orbit-link:is(:hover, :active) .hero-orbit-label{
    max-width:220px; margin-left:.55rem; opacity:1;
  }
}
/* Holding a course pill down (touch) reveals its name the same way a mouse
   hover does — :active tracks the actual press, so a quick tap never
   triggers it and still just opens the course straight away. */
.hero-orbit-icons .hero-orbit-link:active{ padding:.42rem 1.1rem .42rem .42rem; }
.hero-orbit-icons .hero-orbit-link:active .hero-orbit-label{
  max-width:220px; margin-left:.55rem; opacity:1;
}
/* JS (positionOrbitLinks in script.js) sets left/top in px to place each
   pill on the same circle the dot-necklace walks; the pills themselves stay
   static — only the -50%/-50% centering transform, no float/bob. */
.hero-orbit-link:nth-of-type(1){ rotate:-2deg; }
.hero-orbit-link:nth-of-type(2){ rotate:1.5deg; }
.hero-orbit-link:nth-of-type(4){ rotate:-1.5deg; }
.hero-orbit-link:nth-of-type(5){ rotate:2deg; }

/* ---- Phone/narrow: the ring stays a ring (script.js's pathR is already
   proportional to min(width,height), so it shrinks with the screen) —
   just tighten the pills themselves so 5-9 of them fit the smaller
   circumference without touching. ---- */
@media (max-width:680px){
  .hero-orbit-link{
    font-size:.52rem; letter-spacing:.8px;
    padding:.4rem .6rem;
    backdrop-filter:none; background:rgba(20,20,20,.7);
  }
  .hero-orbit-icon{ width:30px; height:30px; }
}
@media (max-width:400px){
  .hero-orbit-icon{ width:26px; height:26px; }
}

/* ==================== PAINT EASTER EGG ==================== */
.paint-modal{
  position:fixed; inset:0; z-index:2000; padding:20px;
  background:rgba(15,13,10,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.paint-modal.open{ opacity:1; visibility:visible; }
.paint-panel{
  position:relative;
  /* Fixed opaque color, not var(--dark) — that variable is intentionally
     transparent in the colorful theme (so the page mesh shows through
     everywhere else), which let the aura glow bleed straight through the
     panel here instead of staying behind it. */
  background:#0a0a0a;
  border-radius:48px 48px 48px 8px; padding:2rem;
  width:min(980px,96%); display:flex; flex-direction:column; gap:1.2rem;
  transform:translateY(24px) scale(.97); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
/* Soft colorful aura behind the panel so it doesn't read as a flat black box
   floating on the overlay — same rainbow family as the border/title. */
.paint-panel::before{
  content:''; position:absolute; inset:-60px; z-index:-1; border-radius:inherit;
  /* Fixed, not animated — stays this exact color arrangement every time,
     instead of drifting through different hues depending on when it's opened. */
  background:conic-gradient(from 0deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff, #ff6ec7);
  filter:blur(70px) saturate(130%); opacity:.35;
}
.paint-modal.open .paint-panel{ transform:translateY(0) scale(1); }
.paint-head{ display:flex; align-items:center; justify-content:space-between; }
.paint-head h3{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--ff-head); font-size:1.9rem; font-weight:600;
  background:linear-gradient(120deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff, #ff6ec7);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:paint-title-flow 6s linear infinite;
}
.paint-pen-icon{ width:22px; height:22px; flex-shrink:0; color:#fff; -webkit-text-fill-color:#fff; }
@keyframes paint-title-flow{ to{ background-position:200% center; } }
.paint-close{ font-size:1.7rem; line-height:1; color:var(--text-muted); transition:color .25s ease, transform .3s ease; }
.paint-close:is(:hover, :active){ color:var(--accent-light); transform:rotate(90deg); }
.paint-canvas-wrap{ position:relative; }
.paint-canvas{
  width:100%; height:min(65vh,560px); background:#fff; border-radius:32px 32px 32px 6px;
  touch-action:none; cursor:crosshair; box-shadow:inset 0 0 0 1px var(--border-soft);
  display:block;
}
/* "Sign here" guide — a dashed line with an X, like a real signature line on
   a document — so the canvas doesn't read as just an empty black box. */
.paint-sign-line{
  position:absolute; left:10%; right:10%; bottom:20%;
  border-bottom:2px dashed rgba(128,128,128,.45);
  pointer-events:none; display:flex; justify-content:flex-start;
}
.paint-sign-line span{
  font-family:var(--ff-head); font-size:1.5rem; font-weight:700;
  color:rgba(128,128,128,.45); transform:translateY(45%); margin-left:.4rem;
}
.paint-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.paint-colors{ display:flex; flex-wrap:wrap; gap:.55rem; }
.paint-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  box-shadow:0 0 0 1px var(--border-soft);
  transition:transform .2s ease, border-color .2s ease; cursor:pointer;
}
.paint-swatch:is(:hover, :active){ transform:scale(1.15); }
.paint-swatch.active{ border-color:var(--cream); transform:scale(1.15); }
.paint-swatch-rainbow{
  width:36px; height:36px;
  background:conic-gradient(from 0deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff, #ff6ec7);
  box-shadow:0 0 0 1px var(--border-soft), 0 0 18px rgba(176,107,255,.5);
  animation:rainbow-hue 3s linear infinite;
}
@keyframes rainbow-hue{ to{ filter:hue-rotate(360deg); } }
.paint-swatch-rainbow.active{ animation-duration:1.1s; }
.paint-clear{
  margin-left:auto; font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  padding:.55rem 1.1rem; border:1px solid var(--accent-light); border-radius:999px; color:var(--cream);
  transition:all .25s ease;
}
.paint-clear:is(:hover, :active){
  background:linear-gradient(90deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff);
  border-color:transparent; color:#fff;
}
.paint-done{
  font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  padding:.55rem 1.3rem; border:1px solid transparent; border-radius:999px;
  /* Fixed colors, not var(--cream)/var(--dark) — --dark is intentionally
     transparent in the colorful theme, which made this text invisible. */
  background:#ffffff; color:#0a0a0a; font-weight:600;
  transition:all .25s ease;
}
.paint-done:is(:hover, :active){ transform:scale(1.04); }
@media (max-width:560px){
  .paint-panel{ padding:1.1rem; border-radius:28px 28px 28px 6px; }
  .paint-canvas{ height:44vh; border-radius:20px 20px 20px 6px; }
  .paint-clear{ margin-left:0; }
}

/* ==================== PAGE BANNER (subpages) ==================== */
.page-banner{
  max-width:1300px; margin:0 auto; padding:9.5rem 40px 3rem;
  border-bottom:1px solid var(--border-soft);
  background:var(--dark);
}
.page-banner-compact{ padding-bottom:2rem; }
.page-banner h1{ font-size:clamp(2.4rem,6vw,4rem); color:var(--cream); }

/* ==================== STATS STRIP ==================== */
.stats-strip{
  background:var(--dark-2); color:var(--cream);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:3.4rem 2rem;
}
.stat{ text-align:center; border-right:1px solid var(--border-soft); }
.stat:last-child{ border-right:none; }
.stat-num{ font-family:var(--ff-head); font-size:2.6rem; color:var(--cream); }
.stat-plus{ font-family:var(--ff-head); font-size:2.6rem; color:var(--cream); }
.stat p{ font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-top:.4rem; }

/* ==================== SECTION HEAD ==================== */
.section-head{ text-align:center; max-width:600px; margin:0 auto 3.4rem; }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.7rem); color:var(--cream); }

/* ==================== ABOUT (minimal) ==================== */
.about-minimal{
  max-width:1100px; margin:0 auto; padding:6rem 40px 4rem;
  background:var(--dark);
}
.about-statement{
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.25; margin-bottom:3rem; color:var(--cream);
}
/* Emphasis is a continuous colorful gradient on every theme — script.js
   applies matching background-clip:text slices to each letter span since a
   gradient can't survive being split into separate elements on its own. */
.about-statement em{ font-style:normal; font-weight:600; }
/* Line-by-line, letter-by-letter reveal: script.js splits each .reveal-line
   (and .section-head h2) into individual .letter spans and staggers their
   delay; this just defines the hidden -> visible animation each letter goes
   through. */
.about-statement .reveal-line{ display:block; }
.about-statement .word, .section-head h2 .word{ display:inline-block; }
.about-statement .letter, .section-head h2 .letter{
  display:inline-block; opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.about-statement.in-view .letter,
.section-head.in-view h2 .letter{ opacity:1; transform:translateY(0); }
.about-columns{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.about-columns p{ color:var(--text-muted); }
.about-media-full{ max-width:1100px; margin:0 auto 6rem; padding:0 40px; }
.about-media-full img{ width:100%; height:52vh; min-height:320px; object-fit:cover; border-radius:24px; filter:saturate(.92); }

/* ==================== ACADEMY HERO ==================== */
.academy-hero{
  max-width:1300px; margin:0 auto; padding:9.5rem 40px 5rem;
  display:grid; grid-template-columns:1.15fr 1fr; gap:3.5rem; align-items:center;
}
.academy-hero-text .about-statement{ margin-bottom:1.4rem; }
.academy-hero-sub{
  color:var(--text-muted); font-size:1.02rem; line-height:1.7; max-width:46ch; margin-bottom:2.2rem;
}
.academy-hero-collage{ position:relative; height:520px; }
.collage-img{
  position:absolute; object-fit:cover; border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); filter:saturate(.95);
}
.collage-1{ top:0; left:0; width:70%; height:280px; z-index:1; }
.collage-2{ top:190px; right:0; width:38%; height:220px; z-index:2; }
.collage-3{ bottom:0; left:10%; width:70%; height:280px; z-index:3; }

/* ==================== COURSES SUBPAGE ==================== */
.courses-intro-section{ max-width:1100px; margin:0 auto; padding:0 40px 2rem; }
.courses-intro{ color:var(--text-muted); font-size:1.02rem; line-height:1.7; max-width:70ch; }
.courses-intro a{ color:var(--accent-light); }

/* ==================== ACADEMY VALUE STATEMENT ==================== */
.academy-value{
  max-width:1200px; margin:0 auto; padding:1rem 40px 5rem;
  display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:center;
}
.academy-value-media{
  border-radius:28px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.4);
  transition:box-shadow .4s ease, transform .4s ease;
}
.academy-value-media:is(:hover, :active){ transform:translateY(-4px); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.academy-value-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.academy-value-media:is(:hover, :active) img{ transform:scale(1.06); }
.academy-value-text .eyebrow{ display:block; }
.academy-value-text .about-statement{ margin-bottom:1.4rem; font-weight:700; text-align:left; }
.academy-value-copy{ color:var(--text-muted); font-size:1.02rem; line-height:1.75; margin-bottom:2.2rem; }
.academy-value-list{ display:flex; flex-direction:column; gap:.9rem; }
.academy-value-list li{ display:flex; align-items:flex-start; gap:.7rem; color:var(--cream); font-size:.95rem; line-height:1.5; }
.academy-value-list li::before{
  content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:.5rem;
  background:linear-gradient(135deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff);
}
@media (max-width:900px){
  .academy-value{ grid-template-columns:1fr; gap:2rem; padding:1rem 20px 4rem; }
  .academy-value-media img{ aspect-ratio:16/10; }
}

/* ==================== WHY INVEST (photo + copy, after the course list) ==================== */
.academy-invest{
  max-width:1200px; margin:0 auto; padding:2rem 40px 6rem;
  display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:center;
}
.academy-invest-media{
  border-radius:28px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.4);
  transition:box-shadow .4s ease, transform .4s ease;
}
.academy-invest-media:is(:hover, :active){ transform:translateY(-4px); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.academy-invest-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.academy-invest-media:is(:hover, :active) img{ transform:scale(1.06); }
.academy-invest-text h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); color:var(--cream); margin:.6rem 0 1.2rem; }
.academy-invest-copy{ color:var(--text-muted); font-size:1.02rem; line-height:1.75; margin-bottom:1.8rem; }
.academy-invest-list{ display:flex; flex-direction:column; gap:.9rem; }
.academy-invest-list li{ display:flex; align-items:flex-start; gap:.7rem; color:var(--cream); font-size:.95rem; line-height:1.5; }
.academy-invest-list li::before{
  content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:.5rem;
  background:linear-gradient(135deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff);
}
@media (max-width:900px){
  .academy-invest{ grid-template-columns:1fr; gap:2rem; padding:1rem 20px 4rem; }
  .academy-invest-media img{ aspect-ratio:16/10; }
}

.courses-list{ max-width:1400px; margin:0 auto; padding:1rem 40px 5rem; }
.course-accordion{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.8rem;
}
.course-item{
  display:flex; flex-direction:column;
  border:1px solid var(--border-soft); border-radius:1rem; background:var(--dark-2);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; scroll-margin-top:7rem; overflow:hidden;
}
.course-item.open{ border-color:var(--accent-light); }
.course-item:is(:hover, :active){ border-color:var(--accent-light); box-shadow:0 20px 40px rgba(0,0,0,.35); transform:translateY(-6px); }

.course-item-copy{ padding:2.2rem 1.8rem 0; text-align:center; }
.course-item-copy h3{ font-size:1.3rem; margin-bottom:.7rem; }
.course-item-tagline{ color:var(--text-muted); font-size:.88rem; line-height:1.6; min-height:2.7em; }
.course-item-price{ font-size:1.15rem; color:var(--cream); margin:1.2rem 0 1rem; }
.course-item-actions{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.course-item-actions .btn{ padding:.7rem 1.3rem; font-size:.72rem; }
.btn-outline{ background:transparent; color:var(--cream); border-color:var(--border-soft); }
.btn-outline:is(:hover, :active){ border-color:var(--accent-light); color:var(--accent-light); }

.course-item-head{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.2rem 1.6rem; cursor:pointer; color:var(--accent-light); font-size:.85rem; letter-spacing:.5px;
}
.course-item-toggle{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--accent-light);
  transition:transform .3s ease, background .3s ease;
}
.course-item-head:is(:hover, :active) .course-item-toggle{ background:var(--accent-light); color:#211c14; transform:translateX(3px); }

/* Book/box mockup pinned to the bottom of each card — icon + our academy branding
   standing in for a real product photo, tilted slightly like a shelved course box. */
.course-item-box{
  position:relative; margin:1.6rem 1.6rem 0; padding:2.2rem 1.4rem 3rem;
  min-height:210px; border-radius:.6rem; overflow:hidden;
  background:linear-gradient(155deg, var(--dark-3) 0%, #000 120%);
  transform:perspective(700px) rotateY(-6deg) rotateX(3deg);
  transition:transform .4s ease;
}
.course-item:is(:hover, :active) .course-item-box{ transform:perspective(700px) rotateY(0) rotateX(0); }
.course-item-box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:14%;
  background:rgba(0,0,0,.45);
}
.course-item-box-badge{
  position:relative; width:60px; height:60px; border-radius:14px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.4);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.course-item:is(:hover, :active) .course-item-box-badge{ transform:scale(1.1) rotate(-6deg); }
.course-item-box-badge svg{ width:70%; height:70%; }
.course-item-box-badge img{ width:100%; height:100%; border-radius:14px; }
.course-item-box-badge.badge-accent{ background:var(--accent); }
.course-item-box-badge.badge-accent svg{ width:60%; height:60%; color:#211c14; stroke:#211c14; }
.course-item-box-tag{
  position:absolute; top:.9rem; right:1rem; font-size:.6rem; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(255,255,255,.55); text-align:right; line-height:1.5;
}
.course-item-box-title{
  position:relative; display:block; font-size:1.2rem; font-weight:600; letter-spacing:.3px;
  color:#fff; max-width:75%; margin-top:1.6rem;
}
.course-item-box-logo{ position:absolute; left:1.2rem; bottom:1rem; height:26px; width:auto; }

/* ==================== SERVICES ==================== */
/* An alternating editorial list (photo / text, flipping sides each row)
   instead of a card grid — keeps everything on one page without it
   reading as a wall of boxes. */
.services{ max-width:1300px; margin:0 auto; padding:7rem 40px; background:var(--dark-2); }
.services-list{ display:flex; flex-direction:column; gap:6.5rem; }
.service-row{ display:flex; align-items:center; gap:4.5rem; }
.service-row:nth-child(even){ flex-direction:row-reverse; }
.service-row-media{
  flex:0 0 44%; aspect-ratio:5/4; border-radius:28px; overflow:hidden;
}
.service-row-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.service-row:is(:hover, :active) .service-row-media img{ transform:scale(1.07); }
.service-row-text{ flex:1; min-width:0; }
.service-row-top{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.3rem; }
.service-row-num{ font-size:.82rem; letter-spacing:2px; color:var(--accent-light); }
.service-row-icon-wrap{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--dark); border:1px solid var(--border-soft);
}
.service-row-icon{ width:22px; height:22px; color:#ffffff; }
:root[data-theme="white"] .service-row-icon,
:root[data-theme="colorful"] .service-row-icon{ color:var(--accent-light); }
.service-row-text h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:.7rem; color:var(--cream); }
.service-row-tagline{ color:var(--text-muted); font-size:1rem; margin-bottom:1.2rem; }
.service-row-highlight{
  color:var(--accent-light); font-style:italic; font-size:.92rem;
  padding-left:1rem; border-left:2px solid var(--accent-light); margin-bottom:1.5rem;
}
.service-row-features{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.7rem; list-style:none; padding:0;
}
.service-row-features li{
  font-size:.76rem; letter-spacing:.3px; color:var(--text-muted);
  padding:.45rem .95rem; border:1px solid var(--border-soft); border-radius:999px;
}
.service-row-link{
  display:inline-block; font-size:.78rem; letter-spacing:.5px; color:var(--accent-light);
  transition:transform .3s ease;
}
.service-row:is(:hover, :active) .service-row-link{ transform:translateX(4px); }

/* ==================== SERVICE DETAIL PAGE ==================== */
.service-detail-body{ max-width:1300px; margin:0 auto; padding:0 40px 6rem; }
.service-detail-icon-wrap{
  width:72px; height:72px; border-radius:50%; margin:0 auto 1.6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--dark-2); border:1px solid var(--border-soft);
}
.service-detail-icon{
  width:34px; height:34px; color:var(--accent-light);
  stroke-dasharray:220; stroke-dashoffset:220;
  animation:drawIcon 1.4s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes drawIcon{ to{ stroke-dashoffset:0; } }
.service-detail-tagline{ color:var(--text-muted); font-size:1.05rem; }
.detail-highlight{
  color:var(--accent-light); font-style:italic; font-size:1rem;
  padding-left:1rem; border-left:2px solid var(--accent-light);
  margin:1.4rem 0;
}
.service-detail-hero .detail-split-media, .service-detail-hero .detail-split-media img{ border-radius:24px; }
.service-feature-list{
  max-width:640px; margin:2.6rem auto; display:grid; gap:1rem;
}
.service-feature-list li{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.3rem; background:var(--dark-2); border:1px solid var(--border-soft);
  color:var(--cream); font-size:.95rem;
  opacity:0; transform:translateX(-24px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.service-feature-list li.in-view{ opacity:1; transform:translateX(0); }
.service-feature-list li::before{
  content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff);
}
.service-detail-body .detail-cta{ justify-content:center; margin-top:3rem; }

/* Own layout/animation for the service-detail feature grid — scoped via the
   extra class so it doesn't touch course-detail.html's plain .service-feature-list. */
.service-feature-grid{
  max-width:900px; grid-template-columns:repeat(2, 1fr); gap:1rem;
}
.service-feature-grid li{
  border-radius:18px;
  transform:translateY(28px) scale(.94);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.service-feature-grid li.in-view{ transform:translateY(0) scale(1); }
.service-feature-grid li:is(:hover, :active){
  border-color:var(--accent-light); box-shadow:0 16px 32px rgba(0,0,0,.35); transform:translateY(-4px);
}
.service-feature-grid li::before{
  content:'✓'; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#000; font-size:.72rem; font-weight:700;
}
.service-gallery-wrap{ margin:3rem auto 0; max-width:900px; }
.service-gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.1rem; }
.service-gallery-item{
  border-radius:18px; overflow:hidden; aspect-ratio:4/3;
  opacity:0; transform:scale(.92);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.service-gallery-item.in-view{ opacity:1; transform:scale(1); }
.service-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.service-gallery-item:is(:hover, :active) img{ transform:scale(1.08); }
.service-detail-hero .btn, .service-detail-body .btn{ border-radius:999px; }

/* ==================== COURSE DETAIL PAGE ==================== */
/* .detail-split's own padding shorthand (defined further down) would
   otherwise win the padding-top cascade and clip this under the fixed
   header, so the selector here needs the extra class to out-specificity it. */
.course-detail-hero.detail-split{ padding-top:11rem; }
.course-detail-eyebrow-row{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.course-detail-icon-sm{ width:38px; height:38px; margin:0; flex-shrink:0; }
.course-detail-icon-sm svg{ width:20px; height:20px; }
.course-detail-icon-sm img{ width:100%; height:100%; border-radius:50%; }
.course-detail-hero .detail-split-media{
  overflow:hidden; border-radius:var(--radius);
  box-shadow:0 25px 60px rgba(0,0,0,.4);
  transition:box-shadow .4s ease, transform .4s ease;
}
.course-detail-hero .detail-split-media:is(:hover, :active){
  transform:translateY(-4px);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.course-detail-hero .detail-split-media img{
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.course-detail-hero .detail-split-media:is(:hover, :active) img{ transform:scale(1.06); }
.course-detail-body{ max-width:1300px; margin:0 auto; padding:3rem 40px 6rem; }
.course-overview{ max-width:640px; margin:0 auto 2.6rem; text-align:center; }
.course-overview .eyebrow{ margin-bottom:.6rem; }
.course-overview h2{ font-size:clamp(1.5rem,3vw,2rem); color:var(--cream); margin-bottom:1rem; }

.course-capabilities{ max-width:1100px; margin:0 auto 3.5rem; }
.course-capabilities h2{ font-size:clamp(1.5rem,3vw,2rem); color:var(--cream); margin-bottom:2rem; }
.capabilities-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:start; }
.capabilities-accordion .capability-card{
  border:1px solid var(--accent-light); background:var(--dark-2); border-radius:.6rem; margin-bottom:.9rem;
  padding:1.3rem 1.5rem;
}
.capabilities-accordion .capability-card:last-child{ margin-bottom:0; }
.capabilities-accordion .capability-card-title{
  font-size:1.02rem; color:var(--cream); margin-bottom:.9rem;
}
.capabilities-accordion p{ color:var(--text-muted); font-size:.92rem; line-height:1.65; }
/* Positioning the img absolutely (instead of letting its own aspect ratio
   set the box's height) means .capabilities-media has no intrinsic height of
   its own, so grid stretch makes it exactly match the accordion column's
   height — the photo always fills the same vertical space as the text,
   whether a course has 3 capability cards or 4. */
.capabilities-media{ position:relative; margin:0; border-radius:.8rem; overflow:hidden; align-self:stretch; min-height:280px; }
.capabilities-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.course-curriculum{ max-width:820px; margin:0 auto 3.5rem; }
.course-curriculum h2{ font-size:clamp(1.5rem,3vw,2rem); color:var(--cream); margin-bottom:2.2rem; }
.curriculum-timeline{ position:relative; }
.curriculum-timeline::before{
  content:''; position:absolute; left:23px; top:8px; bottom:8px; width:1px;
  background:var(--border-soft);
}
.curriculum-item{ position:relative; display:flex; gap:1.6rem; padding-bottom:2.4rem; }
.curriculum-item:last-child{ padding-bottom:0; }
.curriculum-num{
  position:relative; z-index:1; flex-shrink:0; width:48px; height:48px; border-radius:50%;
  background:var(--dark-2); border:1px solid var(--border-soft); color:var(--accent-light);
  display:flex; align-items:center; justify-content:center; font-size:.9rem; letter-spacing:.5px;
}
.curriculum-item-body h3{ font-size:1.08rem; color:var(--cream); margin-bottom:.5rem; }
.curriculum-item-body p{ color:var(--text-muted); font-size:.92rem; line-height:1.6; }

.course-levels{ max-width:1100px; margin:0 auto 3.5rem; }
.course-levels h2{ font-size:clamp(1.5rem,3vw,2rem); color:var(--cream); margin-bottom:2.2rem; }
.levels-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
.level-card{
  display:flex; flex-direction:column;
  border:1px solid var(--border-soft); border-radius:1rem; padding:1.8rem 1.6rem;
  background:var(--dark-2); transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.level-card:is(:hover, :active){ border-color:var(--accent-light); transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.35); }
.level-card.is-standard{ border-color:var(--accent-light); }
.level-card-name{ font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent-light); margin-bottom:.7rem; }
.level-card h3{ font-size:1.2rem; color:var(--cream); margin-bottom:.5rem; }
.level-card-desc{ color:var(--text-muted); font-size:.88rem; line-height:1.6; flex-grow:1; margin-bottom:1.4rem; }
.level-card-price{ font-size:1.3rem; color:var(--cream); margin-bottom:1.2rem; }
@media (max-width:900px){
  .levels-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .capabilities-grid{ grid-template-columns:1fr; }
  .capabilities-media{ order:-1; }
}
.detail-back-btn{ margin-bottom:2rem; }
.service-detail-icon-wrap svg{ width:36px; height:36px; }
.service-detail-icon-wrap img{ width:100%; height:100%; border-radius:50%; }
.course-detail-meta{
  max-width:640px; margin:0 auto 2.6rem; display:flex; justify-content:center; gap:3rem;
  padding:1.4rem 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.course-detail-meta-item{ text-align:center; }
.course-detail-meta-label{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-muted); margin-bottom:.3rem;
}
.course-detail-meta-item span:last-child{ color:var(--cream); font-size:1.05rem; }

/* ==================== PROJECTS TOOLBAR ==================== */
.projects-toolbar{
  max-width:1500px; margin:0 auto; padding:0 40px 2.2rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.4rem;
  border-bottom:1px solid var(--border-soft);
}
.projects-filter{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.projects-count{ font-size:.85rem; color:var(--text-muted); white-space:nowrap; }
.projects-count strong{ color:var(--cream); }
.cat-pills{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-pills .cat-btn{
  padding:.4rem 1rem; font-size:.72rem; text-transform:uppercase; letter-spacing:1px;
  border:1px solid var(--border-soft); color:var(--text-muted); transition:all .25s ease;
}
.cat-pills .cat-btn:is(:hover, :active){ border-color:var(--accent-light); color:var(--accent-light); }
.cat-pills .cat-btn.active{ background:var(--accent); border-color:var(--accent); color:#211c14; }
.view-toggle{ display:flex; gap:1.2rem; }
.view-btn{
  font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);
  padding-bottom:2px; border-bottom:1px solid transparent; transition:all .25s ease;
}
.view-btn:is(:hover, :active){ color:var(--cream); }
.view-btn.active{ color:var(--cream); border-color:var(--accent-light); }

/* ==================== PROJECTS VIEWS ==================== */
.projects-views{ max-width:1500px; margin:0 auto; }
.view-panel{ display:none; }
.view-panel.active-panel{ display:block; }

/* ---- List view ---- */
.projects-split{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
  padding:3rem 40px 5rem;
}
.projects-media{
  position:sticky; top:110px; height:60vh; overflow:hidden;
  background:var(--dark-2); border-radius:var(--radius);
}
.projects-media img{
  width:100%; height:100%; object-fit:cover;
  opacity:1; transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease;
}
.projects-table-head{
  display:grid; grid-template-columns:2fr 1.3fr 1fr;
  padding-bottom:.9rem; border-bottom:1px solid var(--border-soft);
  font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted);
}
.projects-table-head span:last-child{ text-align:right; }
.project-row{
  display:grid; grid-template-columns:2fr 1.3fr 1fr; align-items:center;
  padding:1.15rem 0; border-bottom:1px solid var(--border-soft);
}
.project-row.hide{ display:none; }
.row-link{ display:contents; }
.row-name-wrap{ display:flex; align-items:center; cursor:pointer; }
.row-arrow{
  opacity:0; margin-right:.4rem; transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease; display:inline-block; color:var(--accent-light);
}
.project-row:is(:hover, :active) .row-arrow, .project-row.preview-active .row-arrow{ opacity:1; transform:translateX(0); }
.row-name{ font-size:1.05rem; transition:color .25s ease; }
.project-row:is(:hover, :active) .row-name, .project-row.preview-active .row-name{ color:var(--accent-light); text-decoration:underline; text-underline-offset:4px; }
.row-location, .row-year{ color:var(--text-muted); font-size:.88rem; }
.row-year{ text-align:right; }

/* ---- Grid view ---- */
.projects-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  padding:3rem 0 5rem; perspective:1000px;
}
.project-card{
  position:relative; overflow:hidden; aspect-ratio:4/3; display:block;
}
.project-card.hide{ display:none; }
.project-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .25s ease-out; transform-style:preserve-3d; will-change:transform;
}
.project-card-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem;
  background:linear-gradient(0deg, rgba(20,17,12,.85), transparent);
  display:flex; flex-direction:column; color:#fff;
  transform:translateY(8px); opacity:0; transition:all .3s ease;
}
.project-card:is(:hover, :active) .project-card-caption{ transform:translateY(0); opacity:1; }

/* ---- Map view ---- */
.world-map-wrap{
  position:relative; max-width:1300px; margin:3rem auto 1.2rem; padding:0 40px;
}
.world-map-img{
  width:100%; border-radius:var(--radius); filter:sepia(.35) saturate(.6) brightness(1.04);
  border:1px solid var(--border-soft);
}
.map-pin{
  position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.5rem;
  cursor:pointer;
}
.pin-dot{
  width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,255,255,.35);
  animation:pinPulse 2s ease-in-out infinite;
}
@keyframes pinPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(255,255,255,.35);} 50%{ box-shadow:0 0 0 9px rgba(255,255,255,.15);} }
.pin-label{
  font-size:.78rem; background:var(--dark); color:var(--cream); padding:.35rem .7rem;
  border:1px solid var(--border-soft); white-space:nowrap;
}
.map-popup{
  position:absolute; top:10%; left:50%; transform:translateX(-50%) translateY(-10px);
  width:min(340px, 80vw); background:var(--dark); border:1px solid var(--border-soft);
  box-shadow:0 20px 50px rgba(43,38,32,.25);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.map-popup.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.map-popup-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--border-soft); }
.map-popup-head h4{ font-size:1rem; color:var(--cream); }
.map-popup-close{ font-size:1.3rem; color:var(--text-muted); line-height:1; }
.map-popup-close:is(:hover, :active){ color:var(--cream); }
.map-popup-list{ max-height:280px; overflow-y:auto; }
.map-popup-list li a{
  display:flex; justify-content:space-between; gap:1rem; padding:.8rem 1.2rem;
  border-bottom:1px solid var(--border-soft); font-size:.88rem; color:var(--cream);
}
.map-popup-list li:last-child a{ border-bottom:none; }
.map-popup-list li a:is(:hover, :active){ background:var(--dark-2); color:var(--accent-light); }
.map-popup-list li em{ font-style:normal; color:var(--text-muted); font-size:.78rem; }
.map-hint{ text-align:center; font-size:.8rem; color:var(--text-muted); padding:0 40px 4rem; }

/* ==================== PROCESS ==================== */
.process{ background:var(--dark-2); color:var(--cream); padding:7rem 40px; }
.process-grid{
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem;
}
.step-num{ font-family:var(--ff-head); font-size:2.4rem; color:var(--cream); display:block; margin-bottom:1rem; }
.process-step h3{ color:var(--cream); margin-bottom:.7rem; font-size:1.25rem; }
.process-step p{ color:var(--text-muted); font-size:.9rem; }

/* ==================== TEAM ==================== */
.team{ max-width:1300px; margin:0 auto; padding:5rem 40px 7rem; background:var(--dark); }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.team-card{ text-align:center; }
.team-photo{
  position:relative; overflow:hidden;
  width:100%; aspect-ratio:1/1.1; background-size:cover; background-position:center;
  border-radius:var(--radius); margin-bottom:1.2rem; filter:grayscale(55%);
  transition:filter .4s ease;
}
.team-card:is(:hover, :active) .team-photo{ filter:grayscale(0%); }
/* Color-block reveal: a solid panel covers the photo until the card scrolls
   into view, then wipes upward off it. Colorful per-member hues by default
   (black theme included, per member colors match the colorful theme's mesh);
   the white theme flips to plain black for contrast instead (see override). */
.team-photo::before{
  content:''; position:absolute; inset:0; z-index:2;
  transform-origin:bottom; transform:scaleY(1);
  transition:transform 1.2s cubic-bezier(.65,0,.35,1);
}
.team-card.in-view .team-photo::before{ transform:scaleY(0); }
.team-card:nth-child(1) .team-photo::before{ background:#ff3ec4; }
.team-card:nth-child(2) .team-photo::before{ background:#2fcf8f; }
.team-card:nth-child(3) .team-photo::before{ background:#8b5cf6; }
.team-card:nth-child(4) .team-photo::before{ background:#22b8e0; }
.team-card h3{ font-size:1.2rem; margin-bottom:.2rem; color:var(--cream); }
.team-card span{ color:var(--text-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }

/* ==================== TESTIMONIALS ==================== */
.testimonials{
  background:var(--dark-2); padding:6rem 40px; text-align:center; position:relative;
}
.testimonial-track{
  max-width:700px; margin:0 auto; min-height:150px; position:relative;
  cursor:grab; user-select:none;
}
.testimonial-track:active{ cursor:grabbing; }
.testimonial{
  display:none; opacity:0; transition:opacity .5s ease;
}
.testimonial.active{ display:block; opacity:1; }
.testimonial p{ font-family:var(--ff-head); font-size:1.5rem; font-style:italic; margin-bottom:1.4rem; color:var(--cream); }
.testimonial strong{ color:var(--text-muted); font-size:.85rem; text-transform:uppercase; letter-spacing:1px; }

/* ==================== CTA BANNER ==================== */
.cta-banner{
  background:var(--dark); color:var(--cream); text-align:center; padding:6rem 40px;
  border-top:1px solid rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.4);
}
:root[data-theme="white"] .cta-banner, :root[data-theme="colorful"] .cta-banner{
  border-top:1px solid rgba(201,160,107,.4); border-bottom:1px solid rgba(201,160,107,.4);
}
.cta-banner h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:1rem; color:var(--cream); }
.cta-banner p{ max-width:520px; margin:0 auto 2rem; color:var(--text-muted); }

/* ==================== CONTACT ==================== */
.contact{ max-width:1300px; margin:0 auto; padding:7rem 40px 5rem; background:var(--dark); }
.contact-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; }

/* One unified 3-column x 2-row grid: Email/Phone/Address/Hours + the two
   social cards, all sharing the same look. Each .card-group stacks a label
   ABOVE the card box (not inside it) over the centered icon; value (if any)
   is pinned to the bottom of the card itself. */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1rem; margin-bottom:1.8rem; }
.card-group{ display:flex; flex-direction:column; gap:.6rem; }
.info-card{ min-height:150px; }
.info-card-value{
  position:absolute; bottom:1rem; left:1.1rem; right:1.1rem;
  font-size:.78rem; color:var(--text-muted); text-align:center; line-height:1.4;
  opacity:0; transition:opacity .3s ease, color .25s ease;
}
/* Gradient text on hover — same recipe used on other button/link gradients. */
.info-card:is(:hover, :active) .info-card-value{
  opacity:1;
  background:linear-gradient(90deg, #ff6ec7, #ffb84d, #6bff95, #5ec8ff, #b06bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.social-card{
  position:relative; aspect-ratio:1/1; background:var(--dark-2); border:1px solid var(--border-soft);
  border-radius:16px; padding:1.1rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.social-card-label{
  font-size:.76rem; font-weight:600; color:var(--cream); letter-spacing:.3px; text-align:center;
}
.social-card-icon{
  width:40%; height:40%; color:var(--text-muted);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), color .4s ease, stroke .4s ease, fill .4s ease;
}
.social-card:is(:hover, :active){
  transform:translateY(-6px); border-color:var(--accent-light);
  box-shadow:0 16px 34px rgba(0,0,0,.35);
}
/* Gradient icon on hover via an SVG <linearGradient> (defined once in the
   page) — plain CSS can't gradient-fill an SVG stroke/fill on its own.
   Only "stroke" is touched for outline icons (fill stays none), and only
   "fill" for solid-fill icons like Facebook's, so nothing gets wrongly
   filled in or loses its outline look. */
.social-card:is(:hover, :active) .social-card-icon{ transform:scale(1.15) rotate(-6deg); stroke:url(#iconGrad); }
.contact-cards a[aria-label="Facebook"]:is(:hover, :active) .social-card-icon{ fill:url(#iconGrad); }
:root[data-theme="colorful"] .social-card:is(:hover, :active) .social-card-icon{ stroke:#fff; fill:#fff; }

.contact-form{
  background:var(--dark-2); padding:2.8rem 2.6rem; border:1px solid var(--border-soft);
  position:relative; overflow:hidden;
}
.contact-form::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent) 100%);
  background-size:200% 100%; animation:shimmerBar 5s linear infinite;
}
@keyframes shimmerBar{ to{ background-position:-200% 0; } }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.form-group{ margin-bottom:1.8rem; position:relative; }
.form-group input, .form-group textarea{
  width:100%; padding:1.1rem 0 .55rem; border:none; border-bottom:1px solid var(--border-soft);
  background:transparent; color:var(--cream); font-family:inherit; font-size:1rem;
  transition:border-color .3s ease; resize:vertical;
}
.form-group textarea{ min-height:70px; }
.form-group input::placeholder, .form-group textarea::placeholder{ color:transparent; }
.form-group input:focus, .form-group textarea:focus{ outline:none; }
.form-group label{
  position:absolute; left:0; top:1.1rem; color:var(--text-muted); font-size:1rem;
  pointer-events:none; transition:all .25s cubic-bezier(.4,0,.2,1);
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label{
  top:-.2rem; font-size:.7rem; color:var(--accent-light); text-transform:uppercase; letter-spacing:1px;
}
.form-underline{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent-light); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.form-group input:focus ~ .form-underline,
.form-group textarea:focus ~ .form-underline{ transform:scaleX(1); }
.error-msg{ display:none; color:#e2694c; font-size:.75rem; margin-top:.5rem; }
.form-group.error input, .form-group.error textarea{ border-color:#e2694c; }
.form-group.error .error-msg{ display:block; }
.form-submit{ width:100%; position:relative; margin-top:.4rem; }
.form-submit.loading .btn-text{ opacity:0; }
.form-submit.loading::after{
  content:''; position:absolute; width:18px; height:18px; border:2px solid rgba(33,28,20,.35);
  border-top-color:#211c14; border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.form-success{
  display:none; margin-top:1.2rem; padding:1rem; background:rgba(143,106,52,.1); color:var(--accent-light);
  font-size:.85rem; border-left:3px solid var(--accent-light);
}
.form-success.show{ display:block; animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }

/* ==================== APPLY PAGE (academy course application form) ==================== */
.apply-form-section{ max-width:640px; margin:0 auto; padding:1rem 40px 6rem; }
.apply-back-btn{ display:flex; margin:0 auto 2rem; }
.apply-course-badge{
  display:none; text-align:center; font-size:.78rem; letter-spacing:.5px; text-transform:uppercase;
  color:var(--accent-light); border:1px solid var(--accent-light); border-radius:999px;
  padding:.5rem 1.2rem; width:fit-content; margin:0 auto 1.6rem;
}
.apply-course-badge.show{ display:block; }
.apply-form-intro{ color:var(--text-muted); font-size:1.02rem; line-height:1.7; margin-bottom:2.4rem; text-align:center; }
.form-group-select{ padding-top:.2rem; }
.form-group .form-select-label{
  position:static; display:block; margin-bottom:.5rem; color:var(--text-muted); font-size:.7rem;
  text-transform:uppercase; letter-spacing:1px;
}
.form-group select{
  width:100%; padding:.6rem 0 .55rem; border:none; border-bottom:1px solid var(--border-soft);
  background:transparent; color:var(--cream); font-family:inherit; font-size:1rem;
  border-radius:0; appearance:none; cursor:pointer;
}
.form-group select:focus{ outline:none; }
.form-group select:focus ~ .form-underline{ transform:scaleX(1); }
/* Hardcoded (not theme vars): the colorful theme makes --dark-2 transparent,
   which let the option list fall back to the browser's native white popup
   with white text on top of it — invisible. This must always contrast
   regardless of theme. */
.form-group select option{ background:#111111; color:#ffffff; }

/* ==================== LOCATION MAP (contact page) ==================== */
.location-map{ max-width:1500px; margin:0 auto; padding:0 40px 6rem; }
.location-map-frame{
  border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;
  filter:sepia(.15) saturate(.85);
}
.location-map-frame iframe{ width:100%; height:420px; border:0; display:block; }

/* ==================== FOOTER ==================== */
.site-footer{
  background:var(--dark-2); color:var(--text-muted); padding-top:5rem;
  border-top:1px solid var(--border-soft);
}
.footer-top{
  max-width:1300px; margin:0 auto; padding:0 40px 3.4rem;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem;
}
.footer-brand p{ margin-top:1rem; font-size:.88rem; color:var(--text-muted); max-width:280px; }
.footer-col h4{ color:var(--cream); font-size:.85rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:1.2rem; font-family:var(--ff-body); }
.footer-col ul li{ margin-bottom:.7rem; }
.footer-col ul li a{ font-size:.88rem; color:var(--text-muted); transition:color .25s; }
.footer-col ul li a:is(:hover, :active){ color:var(--accent-light); }
.footer-social{ display:flex; flex-direction:row; gap:.7rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  transition:all .3s ease;
}
.footer-social svg{ width:16px; height:16px; }
.footer-social a:is(:hover, :active){
  border-color:var(--accent-light); color:var(--cream); background:var(--dark);
  transform:translateY(-3px);
}
.footer-bottom{
  border-top:1px solid var(--border-soft); text-align:center;
  padding:1.6rem 40px; font-size:.8rem; color:var(--text-muted);
}

/* ==================== PROJECT DETAIL PAGE ==================== */
/* Photo on the left, all the info on the right — the media stays pinned
   while the text column scrolls, then any extra shots from the project's
   "images" array (see script.js) form a plain grid gallery underneath. */
.detail-split{
  display:grid; grid-template-columns:1.3fr 1fr; gap:3.5rem;
  max-width:1400px; margin:0 auto; padding:4.5rem 40px 3rem; align-items:start;
}
.detail-split-media{ position:sticky; top:110px; }
.detail-split-media img{
  width:100%; border-radius:var(--radius); display:block;
  aspect-ratio:4/3; object-fit:cover;
}
.detail-split-text h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--cream); margin:.6rem 0 1.6rem; }
.detail-info{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;
  padding:1.6rem 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  margin-bottom:2.2rem;
}
.detail-info-item span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:.3rem; }
.detail-info-item p{ color:var(--cream); }
.detail-description{ font-size:1.02rem; line-height:1.7; color:var(--text-muted); margin-bottom:2.6rem; }
.detail-cta{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.detail-back-link{ font-size:.85rem; color:var(--cream); border-bottom:1px solid var(--accent-light); padding-bottom:2px; }
.detail-back-link:is(:hover, :active){ color:var(--accent-light); }
.detail-gallery-wrap{
  max-width:1400px; margin:0 auto; padding:2rem 40px 6rem;
}
.detail-gallery-heading{
  text-align:center; margin:0 0 2.8rem; font-family:'Anton', sans-serif; font-weight:400;
  font-size:clamp(2.4rem,6.5vw,4.6rem); letter-spacing:4px; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px var(--text-muted);
}
.detail-gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3;
}
.detail-gallery img,
.gallery-item img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
  display:block; filter:none;
}
.gallery-item:is(:hover, :active) img{ filter:grayscale(100%); }
.gallery-caption{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:1.1rem; text-align:center; border-radius:var(--radius);
  background:var(--dark); opacity:0; transition:opacity .35s ease;
}
.gallery-item:is(:hover, :active) .gallery-caption{ opacity:1; }
.gallery-caption span{
  color:var(--cream); font-size:1.25rem; font-weight:700; line-height:1.35;
}
:root[data-theme="colorful"] .gallery-caption{ background:var(--accent-light); }
:root[data-theme="colorful"] .gallery-caption span{ color:#081018; }
.gallery-item{ cursor:pointer; }

/* ==================== LIGHTBOX ==================== */
.lightbox{
  display:none; position:fixed; inset:0; z-index:2100;
  background:#fff; flex-direction:column;
}
.lightbox.open{ display:flex; }
.lightbox-close{
  position:absolute; top:1.4rem; right:2rem; z-index:2;
  font-size:2rem; line-height:1; color:#111; background:none; border:none; cursor:pointer;
}
.lightbox-stage{
  flex:1; display:flex; align-items:center; justify-content:flex-start; gap:1rem; padding:4.5rem 4vw;
  overflow-x:auto; scrollbar-width:none;
  cursor:grab; user-select:none;
  /* The drag-to-scroll logic in script.js drives scrollLeft itself via
     pointer events — without this, touch browsers try to handle the swipe
     as their own native scroll gesture at the same time, and the two fight
     each other so the swipe doesn't actually move anything. */
  touch-action:none;
}
.lightbox-stage.dragging{ cursor:grabbing; }
.lightbox-stage.dragging img{ pointer-events:none; }
.lightbox-stage::-webkit-scrollbar{ display:none; }
.lightbox-slide{
  flex:0 0 auto; scroll-snap-align:center; display:flex; align-items:center; justify-content:center;
}
.lightbox-slide img{
  display:block; width:auto; height:auto; max-height:72vh; max-width:80vw;
  object-fit:contain; border-radius:var(--radius);
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.15);
  background:#fff; color:#111; font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .25s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 4px rgba(0,0,0,.25);
}
.lightbox-arrow:is(:hover, :active){ background:#f0f0f0; }
.lightbox-arrow:disabled{ opacity:.25; cursor:default; }
.lightbox-arrow:disabled:is(:hover, :active){ background:#fff; }
.lightbox-prev{ left:1.2rem; }
.lightbox-next{ right:1.2rem; }
@media (max-width:820px){
  .lightbox-arrow{ width:36px; height:36px; font-size:1.3rem; }
  .lightbox-prev{ left:.4rem; }
  .lightbox-next{ right:.4rem; }
  .lightbox-slide img{ max-width:88vw; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1100px){
  .about-columns{ grid-template-columns:1fr; gap:1.4rem; }
  .academy-hero{ grid-template-columns:1fr; padding:8rem 40px 3rem; gap:2.5rem; }
  .academy-hero-collage{ height:380px; }
  .collage-1{ height:220px; }
  .collage-2{ top:140px; height:170px; }
  .collage-3{ height:220px; }
  .service-row{ gap:2.6rem; }
  .process-grid{ grid-template-columns:repeat(2,1fr); gap:3rem; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); gap:2rem 0; }
  .stat{ border-right:none; border-bottom:1px solid var(--border-soft); padding-bottom:1.4rem; }
  .projects-split{ grid-template-columns:1fr; gap:2rem; }
  .projects-media{ position:relative; top:0; height:44vh; }
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-info{ grid-template-columns:1fr; gap:1rem; }
  .detail-split{ grid-template-columns:1fr; gap:2rem; }
  .detail-split-media{ position:relative; top:0; }
  .detail-gallery{ grid-template-columns:repeat(2,1fr); }
  .detail-gallery-wrap{ padding:1.6rem 20px 4rem; }
  .service-feature-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  /* Projects/Academy pills duplicate links already in the hamburger menu and
     were overflowing the header on phones — drop them, keep the hamburger. */
  .nav-quick-link{ display:none; }
  .form-row{ grid-template-columns:1fr; }
  .projects-toolbar{ flex-direction:column; align-items:flex-start; }
  .contact-cards{ grid-template-columns:repeat(2,1fr); }
  /* Overlapping collage needs real width to breathe — stack plainly instead. */
  .academy-hero-collage{ position:static; height:auto; display:flex; flex-direction:column; gap:1rem; }
  .collage-img{ position:static; width:100%; height:220px; }
}
@media (max-width:480px){
  .logo-img{ height:32px; }
  html.js body.docking:not(.page-entered) .logo-img{ height:32px; }
  .nav-right{ gap:.4rem; }
}
@media (max-width:560px){
  .nav-wrap{ padding:0 16px; }
  html.js body.docking:not(.page-entered) .logo{ left:16px; }
  .site-footer{ padding-top:3.4rem; text-align:center; }
  .footer-top{ grid-template-columns:1fr; gap:0; padding:0 20px 1rem; }
  .footer-brand{ padding-bottom:2rem; }
  .footer-col{ padding:1.6rem 0; border-top:1px solid var(--border-soft); }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-social{ align-items:center; }
  .about-minimal{ padding:4rem 20px 3rem; }
  .about-media-full{ padding:0 20px; }
  .services, .team, .contact{ padding:5rem 20px; }
  .projects-toolbar{ padding:0 20px 1.6rem; }
  .projects-split{ padding:2rem 20px 3rem; }
  .projects-grid{ padding:2rem 0 3rem; grid-template-columns:1fr; }
  .world-map-wrap, .map-hint{ padding:0 20px; }
  .team-grid{ grid-template-columns:1fr; }
  .services-list{ gap:3.5rem; }
  .service-row, .service-row:nth-child(even){ flex-direction:column; align-items:stretch; gap:1.6rem; }
  .service-row-media{ flex:none; aspect-ratio:4/3; }
  .process-grid{ grid-template-columns:1fr; }
  .projects-table-head{ font-size:.62rem; }
  .row-name{ font-size:.92rem; }
  .detail-split{ padding:3rem 20px 2rem; }
  .detail-gallery-wrap{ padding:1.2rem 20px 3rem; }
  .detail-gallery{ grid-template-columns:1fr; }
  .location-map{ padding:0 20px 4rem; }
}