/* ============================================================
   PGCIAGLOBAL — "Applied Imagination Beyond Cinema"
   Design language: CLEAR & CALM.
   DM Sans, deep green, restrained. Friendly through clarity —
   big readable text, strong contrast, sentence case, no shouting.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* surfaces */
  --bg:            #F1F4F3;
  --bg-raised:     #E7ECEA;
  --bg-card:       #FFFFFF;
  --bg-card-hi:    #F7F9F8;

  /* ink — high contrast on purpose */
  --ink:           #101614;   /* 16.8:1 on white */
  --ink-dim:       #4E5B57;   /*  7.3:1 */
  --ink-faint:     #69756F;   /*  4.9:1 — still passes AA for small text */

  /* accent */
  --accent:        #127A63;
  --accent-hi:     #0E6250;
  --accent-soft:   rgba(18,122,99,.10);
  --ring:          rgba(18,122,99,.18);
  --on-accent:     #FFFFFF;

  /* secondary + numerals */
  --teal:          #1C5D8F;
  --teal-soft:     rgba(28,93,143,.10);
  --warm:          #8A5A00;
  --warm-soft:     rgba(138,90,0,.10);
  --danger:        #B3261E;

  --line:          rgba(16,22,20,.15);
  --line-hi:       rgba(16,22,20,.30);

  --body:  'DM Sans', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --display: var(--body);           /* one family does everything */

  --wrap: 1180px;
  --gutter: 28px;
  --nav-h: 72px;

  --sp-section: clamp(64px, 7vw, 96px);
  --sp-tight:   clamp(48px, 5vw, 68px);
  --sp-head:    clamp(28px, 3.4vw, 42px);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  --shadow:      0 1px 2px rgba(16,22,20,.05), 0 4px 14px rgba(16,22,20,.05);
  --shadow-lift: 0 2px 6px rgba(16,22,20,.07), 0 14px 32px rgba(16,22,20,.10);

  color-scheme: light;
}

/* ---------------- Dark variant (theme toggle) ---------------- */
:root[data-theme="dark"]{
  --bg:            #0C110F;
  --bg-raised:     #121815;
  --bg-card:       #161D1A;
  --bg-card-hi:    #1D2622;

  --ink:           #EEF3F1;
  --ink-dim:       #A5B2AE;
  --ink-faint:     #7D8A85;

  --accent:        #3FBFA0;
  --accent-hi:     #5FD3B7;
  --accent-soft:   rgba(63,191,160,.14);
  --ring:          rgba(63,191,160,.24);
  --on-accent:     #06231C;

  --teal:          #6FB3E8;
  --teal-soft:     rgba(111,179,232,.14);
  --warm:          #E0AE5E;
  --warm-soft:     rgba(224,174,94,.14);
  --danger:        #FF7B72;

  --line:          rgba(238,243,241,.14);
  --line-hi:       rgba(238,243,241,.30);

  --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.28);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.34), 0 14px 32px rgba(0,0,0,.4);

  color-scheme: dark;
}

/* The hero sits on video in both themes, so it stays light-on-dark. */
.hero h1{ color:#FFFFFF; }
.hero-sub{ color:rgba(255,255,255,.88); }
.hero .eyebrow{ color:#FFFFFF; }
.hero .eyebrow::before{ background:#FFFFFF; }

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); -webkit-text-size-adjust:100%; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;              /* comfortable reading, not 15px */
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
::selection{ background:var(--accent); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--body);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.15;
  margin:0;
  text-transform:none;          /* sentence case everywhere */
}

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

/* ============================================================
   3. SCROLL REVEAL
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-reveal].is-visible{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   4. TYPE HELPERS
   ============================================================ */
.eyebrow{
  font-family:var(--body);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--accent);
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}
.eyebrow.teal{ color:var(--teal); }
.eyebrow.teal::before{ background:var(--teal); }

.lede{ color:var(--ink-dim); font-size:18px; }
.body-copy{ color:var(--ink-dim); }

/* ============================================================
   5. BUTTONS / TAGS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px;
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  border-radius:var(--r-sm);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-hi); }
.btn-ghost{ border-color:var(--line-hi); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn-arrow::after{ content:'→'; transition:transform .2s; }
.btn-arrow:hover::after{ transform:translateX(3px); }

/* Hero buttons sit on video — keep the ghost readable there. */
.hero .btn-ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; }

.tag-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:24px; }
.tag{
  font-family:var(--body); font-size:14.5px; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--ink-dim); background:var(--bg-card);
  border:1px solid var(--line); padding:8px 15px; border-radius:999px;
  transition:color .18s, border-color .18s, background .18s;
}
.tag:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

/* ============================================================
   6. LOADER — removed
   A 1.6s blocking countdown is the opposite of "clear and calm".
   The markup stays in the pages; it simply never shows.
   ============================================================ */
#loader{ display:none !important; }

/* ============================================================
   7. NAV
   ============================================================ */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s;
}
header.site-nav.solid{
  background:var(--bg-card);
  border-bottom-color:var(--line);
}

/* Not solid = floating over the video hero, so everything in the bar has to
   be light. main.js keeps .solid on for every page that has no hero, so this
   can never apply to a white bar. */
header.site-nav:not(.solid) .brand{ color:#FFFFFF; }
header.site-nav:not(.solid) .brand small{ color:rgba(255,255,255,.78); }
header.site-nav:not(.solid) .nav-links a{ color:rgba(255,255,255,.86); }
header.site-nav:not(.solid) .nav-links a:hover{ color:#FFFFFF; background:rgba(255,255,255,.16); }
header.site-nav:not(.solid) .nav-links a.active{ color:#FFFFFF; background:rgba(255,255,255,.20); }
header.site-nav:not(.solid) .theme-toggle{ border-color:rgba(255,255,255,.5); }
header.site-nav:not(.solid) .theme-toggle:hover{ border-color:#FFFFFF; background:rgba(255,255,255,.14); }
header.site-nav:not(.solid) .theme-toggle svg{ stroke:#FFFFFF; }
header.site-nav:not(.solid) .nav-toggle span{ background:#FFFFFF; }
/* The mobile drawer is a solid panel even when the bar is transparent. */
@media (max-width:760px){
  header.site-nav:not(.solid) .nav-links a{ color:var(--ink-dim); }
  header.site-nav:not(.solid) .nav-links a.active{ color:var(--accent); background:var(--accent-soft); }
}

.nav-inner{
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; align-items:center; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--body); font-size:19px; font-weight:700;
  letter-spacing:-.02em; line-height:1.15; text-transform:none;
  margin-right:auto; flex-shrink:0;
}
.brand img{
  height:40px; width:auto; border-radius:var(--r-sm);
  object-fit:contain; flex-shrink:0; background:transparent;
  border:none;
}
.brand span{ display:block; }
.brand small{
  display:block;
  font-family:var(--body); font-size:12.5px; font-weight:400;
  letter-spacing:0; text-transform:none;
  color:var(--ink-faint);
  margin-top:1px; line-height:1.3; white-space:nowrap;
}
/* Over the video hero, before the bar goes solid */
.hero ~ header.site-nav:not(.solid) .brand,
header.site-nav:not(.solid) .brand{ color:inherit; }

.nav-links{
  display:flex; align-items:center; gap:2px;
  font-family:var(--body); font-size:15.5px; font-weight:600;
  letter-spacing:0; text-transform:none;
}
.nav-links a{
  position:relative; display:inline-flex; align-items:center;
  padding:9px 13px; border-radius:var(--r-sm);
  color:var(--ink-dim);
  transition:color .18s, background .18s;
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-raised); }
.nav-links a.active{ color:var(--accent); background:var(--accent-soft); }

.nav-cta{
  font-family:var(--body); font-size:15.5px; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--on-accent); background:var(--accent);
  padding:11px 20px; border-radius:var(--r-sm);
  flex-shrink:0; transition:background .18s;
}
.nav-cta:hover{ background:var(--accent-hi); }

.portal-cta{
  font-family:var(--body); font-size:15.5px; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:#fff; background:#f08038;
  padding:11px 20px; border-radius:var(--r-sm);
  flex-shrink:0; transition:background .18s; margin-right:12px;
}
.portal-cta:hover{ background:#e56d20; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; border-radius:2px; }

.theme-toggle{
  position:relative; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--line-hi); background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:border-color .18s, background .18s;
}
.theme-toggle:hover{ border-color:var(--accent); background:var(--accent-soft); }
.theme-toggle svg{
  width:18px; height:18px; position:absolute; fill:none; stroke:var(--ink);
  transition:opacity .25s, transform .3s;
}
.theme-toggle .icon-sun{ opacity:0; transform:rotate(-60deg) scale(.6); }
.theme-toggle .icon-moon{ opacity:1; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ opacity:1; transform:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(60deg) scale(.6); }

/* ============================================================
   8. HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:min(88vh, 760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#0C110F;
  padding-top:calc(var(--nav-h) + 48px);
}
.hero video,.hero .hero-fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.7;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(8,14,12,.94) 4%, rgba(8,14,12,.5) 48%, rgba(8,14,12,.62) 100%),
    linear-gradient(to right, rgba(8,14,12,.78), rgba(8,14,12,.06) 64%);
}
/* Decorative film-set dressing — retired with the cinematic direction. */
.hero-grain,.hero-tc,.scroll-cue{ display:none !important; }

.hero-inner{
  position:relative; z-index:3; width:100%;
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--gutter) clamp(52px,7vh,84px);
}
.hero h1{
  font-size:clamp(34px, 4.6vw, 62px);
  max-width:19ch;
  margin-top:18px;
  line-height:1.1;
}
.hero h1 em{ font-style:normal; color:#7FE3C6; }
:root:not([data-theme="dark"]) .hero h1 em{ color:#7FE3C6; }
.hero-sub{ margin-top:18px; max-width:52ch; font-size:18px; }
.hero-cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   9. MARQUEE
   ============================================================ */
.marquee-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-card); overflow:hidden; padding:16px 0;
}
.marquee-track{ display:flex; width:max-content; animation:scroll-x 50s linear infinite; }
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{
  font-family:var(--body); font-size:15px; font-weight:500;
  letter-spacing:0; text-transform:none;
  color:var(--ink-dim); padding:0 24px; white-space:nowrap;
  display:flex; align-items:center; gap:24px;
}
.marquee-track span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* ============================================================
   10. SECTIONS
   ============================================================ */
section{ position:relative; padding:var(--sp-section) 0; }
.section-tight{ padding:var(--sp-tight) 0; }
.bg-raised{ background:var(--bg-raised); }
.rule{ border:none; border-top:1px solid var(--line); margin:0; }

.section-head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:end; gap:36px; margin-bottom:var(--sp-head);
}
.section-head h2{ font-size:clamp(27px,3.1vw,40px); margin-top:12px; max-width:20ch; }
.section-head .lede{ max-width:46ch; font-size:17px; }

/* ============================================================
   11. PROGRAM CARDS
   ============================================================ */
.program-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px;
}
.program-card{
  position:relative; display:flex; flex-direction:column; gap:0;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.program-card:hover{
  border-color:var(--line-hi); box-shadow:var(--shadow-lift); transform:translateY(-3px);
}
.program-card::before{ content:none; }

.program-thumb{
  position:relative; aspect-ratio:16/10;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:flex-end; padding:14px;
}
/* One consistent scrim so the badge stays legible and the photo stays true —
   no per-card colour wash. */
.program-card--dcs .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/Digital Channels & Storytelling.jpg'); }
.program-card--nac .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/NextGen AI Cinema.png'); }
.program-card--xrc .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/Extended Reality & Games.jpg'); }
.program-card--lbe .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/Location-Based Infotainment.jpg'); }
.program-card--rob .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/Robotics.jpg'); }
.program-card--dav .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/Artificial Intelligence.jpg'); }
.program-card--daa .program-thumb{ background-image:linear-gradient(to top,rgba(10,16,14,.72),rgba(10,16,14,.04) 58%), url('../assets/images/Dance, Acting & Acrobatics.jpg'); }

.thumb-badge,.prog-visual-tag{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.94); color:#101614;
  border:none;
  font-family:var(--body); font-size:13px; font-weight:600;
  letter-spacing:0; text-transform:none;
}
.thumb-badge::before,.prog-visual-tag::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
}

.program-card-content{ display:flex; flex-direction:column; gap:8px; padding:20px 20px 0; }
.program-code{
  font-family:var(--body); font-size:14px; font-weight:600;
  letter-spacing:0; color:var(--accent);
}
.program-card h3{
  font-size:21px; font-weight:700; line-height:1.3;
  letter-spacing:-.02em; text-transform:none;
}
.program-focus{
  font-family:var(--body); font-size:14px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-faint);
}
.program-desc{ color:var(--ink-dim); font-size:15.5px; line-height:1.6; }
.program-more{
  margin-top:auto; padding:16px 20px 20px;
  font-family:var(--body); font-size:15px; font-weight:600;
  letter-spacing:0; color:var(--accent);
  display:inline-flex; align-items:center; gap:7px;
}
.program-more::after{ content:'→'; transition:transform .2s; }
.program-card:hover .program-more::after{ transform:translateX(3px); }

.upcoming-home-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
}
.upcoming-home-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.upcoming-home-card:hover{
  border-color:var(--line-hi); box-shadow:var(--shadow-lift); transform:translateY(-3px);
}
.upcoming-home-thumb{
  position:relative; aspect-ratio:16/10; display:flex; align-items:flex-end; padding:14px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.upcoming-home-thumb::before{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.06) 60%);
}
.upcoming-home-thumb span{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px;
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.94); color:#101614;
  font-family:var(--body); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
}
.upcoming-home-thumb span::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.upcoming-home-thumb--planetary{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/NextGen AI Cinema.png'); }
.upcoming-home-thumb--interspecies{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/Extended Reality & Games.jpg'); }
.upcoming-home-thumb--rasa{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/Digital Channels & Storytelling.jpg'); }
.upcoming-home-thumb--civilisation{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/Location-Based Infotainment.jpg'); }
.upcoming-home-content{ padding:20px; }
.upcoming-home-meta{
  display:inline-block; font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:0;
  color:var(--accent); margin-bottom:10px;
}
.upcoming-home-card h3{
  font-size:21px; line-height:1.3; margin-bottom:10px;
}
.upcoming-home-card p{ color:var(--ink-dim); font-size:15.5px; line-height:1.6; }

.upcoming-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.upcoming-card:hover{
  border-color:var(--line-hi); box-shadow:var(--shadow-lift); transform:translateY(-3px);
}
.upcoming-card-image{
  position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.upcoming-card-image::before{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.06) 60%); }
.upcoming-card-image--planetary{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/NextGen AI Cinema.png'); }
.upcoming-card-image--interspecies{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/Extended Reality & Games.jpg'); }
.upcoming-card-image--rasa{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/Digital Channels & Storytelling.jpg'); }
.upcoming-card-image--civilisation{ background-image:linear-gradient(to top, rgba(10,16,14,.72), rgba(10,16,14,.04) 58%), url('../assets/images/Location-Based Infotainment.jpg'); }
.upcoming-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:0; color:var(--accent); margin:18px 20px 14px; }
.upcoming-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.upcoming-card h3{ font-size:22px; line-height:1.3; margin:0 20px 12px; }
.upcoming-card p{ color:var(--ink-dim); font-size:15.5px; line-height:1.7; margin:0 20px 20px; }

/* The programs page uses .prog-more for the same affordance. */
.prog-actions{ margin-top:22px; }
.prog-more{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-hi);
  font-family:var(--body); font-size:15.5px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ink);
  transition:border-color .18s, background .18s, color .18s;
}
.prog-more::after{ content:'→'; transition:transform .2s; }
.prog-more:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.prog-more:hover::after{ transform:translateX(3px); }

/* ============================================================
   12. MEDIA / CLASSROOM
   ============================================================ */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.media-card{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.media-card:hover{ border-color:var(--line-hi); box-shadow:var(--shadow); }
.media-frame{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0C110F; cursor:pointer; }
.media-frame video,.media-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.media-frame:hover video,.media-frame:hover img{ transform:scale(1.03); }
.play-btn{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.play-btn span{
  width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.94); border:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, background .2s;
}
.play-btn span::after{
  content:''; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #101614; margin-left:3px;
}
.media-frame:hover .play-btn span{ background:#fff; transform:scale(1.06); }
.media-frame.is-playing .play-btn{ display:none; }
.media-meta{ padding:18px 20px 22px; }
.media-meta .eyebrow{ margin-bottom:9px; }
.media-meta h3{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.35; text-transform:none; }
.media-meta p{ margin-top:7px; font-size:15.5px; color:var(--ink-dim); }

/* ============================================================
   13. PEOPLE
   ============================================================ */
.people-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:48px 24px; }
.person{ position:relative; }
.person-photo{
  aspect-ratio:3/3.5; overflow:hidden; border-radius:var(--r-lg);
  background:var(--bg-raised); border:1px solid var(--line);
}
.person-photo img{ width:100%; height:100%; object-fit:cover; }
.person-name{ margin-top:15px; font-size:19px; font-weight:700; letter-spacing:-.02em; text-transform:none; }
.person-role{
  margin-top:5px; font-family:var(--body); font-size:15px;
  line-height:1.55; color:var(--ink-dim); letter-spacing:0;
}

/* ============================================================
   14. STATS
   ============================================================ */
.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px; border:none;
}
.stat{
  padding:22px 20px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-card);
}
.stat:first-child{ border-left:1px solid var(--line); }
.stat .n{
  font-family:var(--body); font-size:34px; font-weight:700;
  line-height:1.1; letter-spacing:-.03em; color:var(--accent);
}
.stat .l{
  margin-top:5px; font-family:var(--body); font-size:15px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-dim);
}

/* ============================================================
   15. SPLIT
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg-raised);
}
.split-media video,.split-media img{ width:100%; height:100%; object-fit:cover; }
.split h2{ font-size:clamp(26px,3vw,38px); margin-top:12px; }
.split .body-copy{ margin-top:18px; font-size:17px; line-height:1.75; max-width:48ch; }

/* ============================================================
   16. QUOTE
   ============================================================ */
.quote-block{ text-align:center; padding:var(--sp-section) 0; }
.quote-block blockquote{
  font-family:var(--body); font-weight:600;
  font-size:clamp(22px,2.7vw,32px);
  text-transform:none; letter-spacing:-.02em;
  max-width:28ch; margin:0 auto; line-height:1.35;
}
.quote-block cite{
  display:block; margin-top:20px; font-style:normal;
  font-family:var(--body); font-size:15.5px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-faint);
}

/* ============================================================
   17. PARTNERS
   ============================================================ */
.partner-tier{ margin-bottom:44px; }
.partner-tier h3{
  font-family:var(--body); font-size:17px; font-weight:700;
  letter-spacing:-.01em; text-transform:none; color:var(--ink);
  margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:12px;
}
.partner-logo-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.partner-slot{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-md);
  aspect-ratio:3/2; display:flex; align-items:center; justify-content:center;
  padding:22px; min-height:120px; transition:border-color .2s;
}
.partner-slot:hover{ border-color:var(--line-hi); }
.partner-slot img{
  max-width:100%; max-height:64px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.75; transition:opacity .2s, filter .2s;
}
.partner-slot:hover img{ filter:none; opacity:1; }
.partner-slot.placeholder{
  font-family:var(--body); font-size:14.5px; letter-spacing:0;
  color:var(--ink-faint); text-transform:none; text-align:center;
}

/* ============================================================
   18. FORMS
   ============================================================ */
.form-shell{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:var(--body); font-size:15.5px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.field input,.field select,.field textarea{
  background:var(--bg-card);
  border:1.5px solid var(--line);
  color:var(--ink);
  padding:13px 15px;
  font-family:var(--body);
  font-size:16px;                 /* 16px keeps iOS from zooming on focus */
  border-radius:var(--r-sm);
  outline:none; width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.form-note{
  margin-top:12px; font-family:var(--body); font-size:15px;
  color:var(--ink-faint); line-height:1.65;
}
.form-success{
  display:none; border:1.5px solid var(--accent); background:var(--accent-soft);
  border-radius:var(--r-md); padding:20px 22px; margin-top:22px;
  font-family:var(--body); font-size:16px; line-height:1.6; color:var(--ink);
}
.form-success.show{ display:block; }
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234E5B57' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:40px !important;
}

.info-list{ display:flex; flex-direction:column; gap:20px; }
.info-item{ padding-bottom:20px; border-bottom:1px solid var(--line); }
.info-item .eyebrow{ margin-bottom:8px; }
.info-item .val{ font-family:var(--body); font-size:20px; font-weight:700; letter-spacing:-.02em; text-transform:none; }
.info-item .sub{ margin-top:4px; color:var(--ink-dim); font-size:15.5px; }

/* ============================================================
   19. VERIFY PAGE
   ============================================================ */
.verify-shell{ max-width:720px; margin:0 auto; }
.verify-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.verify-form .field{ flex:1; min-width:260px; margin:0; }
.verify-form input[type="text"]{ font-family:var(--mono); letter-spacing:.5px; text-transform:uppercase; }
.verify-result{
  margin-top:26px; padding:24px 26px;
  border:1px solid var(--line); border-left-width:4px;
  border-radius:var(--r-md); background:var(--bg-card);
}
.verify-result:empty{ display:none; }
.verify-result.loading{ border-left-color:var(--line-hi); }
.verify-result.valid{ border-left-color:var(--accent); }
.verify-result.invalid{ border-left-color:var(--danger); }
.verify-head{
  font-family:var(--body); font-size:21px; font-weight:700;
  letter-spacing:-.02em; text-transform:none; margin-bottom:14px;
}
.verify-result.valid .verify-head{ color:var(--accent); }
.verify-result.invalid .verify-head{ color:var(--danger); }
.verify-result p{ color:var(--ink-dim); font-size:16px; }
.verify-fields{ margin:0; display:grid; gap:15px; }
.verify-fields > div{ display:grid; gap:3px; }
.verify-fields dt{
  font-family:var(--body); font-size:14.5px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-faint);
}
.verify-fields dd{ margin:0; font-size:18px; font-weight:600; }

/* ============================================================
   20. CTA BAND
   ============================================================ */
.cta-band{
  border-top:1px solid var(--line); padding:var(--sp-tight) 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(25px,2.9vw,36px); max-width:22ch; margin-top:12px; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   21. FOOTER
   ============================================================ */
footer{ border-top:1px solid var(--line); padding:56px 0 26px; background:var(--bg-card); }
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:36px; border-bottom:1px solid var(--line);
}
.footer-brand .brand{ margin-bottom:14px; margin-right:0; }
.footer-brand p{ color:var(--ink-dim); font-size:15.5px; max-width:36ch; line-height:1.7; }
.footer-policies{ margin-top:24px; }
.footer-policy-button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border:1px solid var(--line-hi); border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent);
  font:600 15.5px var(--body); text-align:left; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.footer-policy-button:hover,
.footer-policy-button:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.footer-policy-icon{
  font-size:20px; font-weight:400; line-height:1;
  transition:transform .18s;
}
.footer-policy-button[aria-expanded="true"] .footer-policy-icon{ transform:rotate(45deg); }
.footer-policy-links{ padding-top:7px; }
.footer-policy-links.is-collapsed{ display:none; }
.footer-policy-links a{
  display:block; padding:3px 0; color:var(--ink-dim); font-size:15px;
  transition:color .18s;
}
.footer-policy-links a:hover{ color:var(--accent); }
.footer-policy-links a[href="privacy-policy.html"]{
  color:var(--accent); font-weight:600; white-space:nowrap;
  text-decoration:none;
}
.footer-col h4{
  font-family:var(--body); font-size:15.5px; font-weight:700;
  letter-spacing:-.01em; text-transform:none; color:var(--ink); margin-bottom:12px;
}
.footer-col a{
  display:block; padding:5px 0; color:var(--ink-dim); font-size:15.5px;
  transition:color .18s;
}
.footer-col a:hover{ color:var(--accent); }

.social-links{
  display:flex; align-items:center; gap:10px; margin-top:20px;
}
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:50%;
  transition:color .18s, border-color .18s, background .18s;
}
.social-links a:hover{
  color:var(--accent); border-color:var(--accent); background:var(--accent-soft);
}
.social-links svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.footer-contact-actions{ display:flex; gap:12px; flex-wrap:wrap; padding:24px 0 0; }
.footer-contact-actions .footer-policies{
  margin:0 0 0 auto; min-width:220px;
}
.footer-contact-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-hi);
  font-family:var(--body); font-size:15.5px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ink);
  transition:border-color .18s, background .18s, color .18s;
}
.footer-contact-btn::before{ content:''; width:8px; height:8px; border-radius:50%; }
.footer-contact-btn.call::before{ background:var(--accent); }
.footer-contact-btn.call:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.footer-contact-btn.whatsapp::before{ background:#25D366; }
.footer-contact-btn.whatsapp:hover{ border-color:#25D366; background:rgba(37,211,102,.10); }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:20px; margin-top:20px; border-top:1px solid var(--line);
  flex-wrap:wrap; gap:10px;
  font-family:var(--body); font-size:14.5px; letter-spacing:0;
  text-transform:none; color:var(--ink-faint);
}

/* ============================================================
   22. PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  padding:calc(var(--nav-h) + 56px) 0 var(--sp-tight);
  border-bottom:1px solid var(--line);
  background:var(--bg-card);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; top:-45%; right:-6%;
  width:560px; height:560px;
  background:radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events:none;
}
.page-hero > .wrap{ position:relative; }
.page-hero h1{ font-size:clamp(30px,4vw,50px); margin-top:14px; max-width:20ch; }
.page-hero .lede{ margin-top:16px; max-width:58ch; font-size:18px; }

.policy-page{
  padding:calc(var(--nav-h) + 56px) 0 var(--sp-section);
  background:var(--bg);
}
.policy-page > .wrap{ max-width:860px; }
.policy-page h1{ font-size:clamp(30px,4vw,50px); margin-top:14px; }
.policy-date{ margin-top:12px; color:var(--ink-faint); font-size:15px; }
.policy-content{
  margin-top:36px; padding:32px 36px;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.policy-content p{ color:var(--ink-dim); line-height:1.75; }
.policy-content h2{ margin:30px 0 10px; font-size:22px; }
.policy-content h2:first-child{ margin-top:0; }
.policy-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.policy-footer{ max-width:860px; margin-left:auto; margin-right:auto; }

/* ============================================================
   23. UTILITY
   ============================================================ */
.mt-lg{ margin-top:36px; }
.center{ text-align:center; }

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .brand small{ display:none; }
  .nav-links a{ padding:9px 10px; font-size:14.5px; }
}
@media (max-width:980px){
  .split{ grid-template-columns:1fr; gap:30px; }
  .form-shell{ grid-template-columns:1fr; gap:34px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .section-head{ grid-template-columns:1fr; gap:16px; align-items:start; }
  .section-head .lede{ max-width:62ch; }
}
@media (max-width:760px){
  :root{ --gutter:20px; }
  body{ font-size:16.5px; }
  .nav-links{
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:var(--bg-card); flex-direction:column; justify-content:flex-start;
    padding:26px var(--gutter); gap:4px; font-size:17px;
    transform:translateX(100%); transition:transform .3s ease; z-index:400;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ width:100%; padding:14px 12px; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding-top:calc(var(--nav-h) + 56px); min-height:auto; }
  .field-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
  .footer-contact-actions .footer-policies{ width:100%; margin:0; }
  .policy-content{ padding:24px 20px; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .verify-form{ flex-direction:column; align-items:stretch; }
  .verify-form .btn{ justify-content:center; }
}