/* ============================================================
   CREADOR FOUNDATION — DESIGN SYSTEM
   Palette + type system per Build Prompt §4–§5.
   Site-wide typography is controlled by the shared type variables.
   ============================================================ */

:root{
  /* Foundation colours */
  --white:#FFFFFF;
  --black:#0E0E0D;
  --grey:#ECEBE8;
  --charcoal:#4A4A4A;

  /* Accent — non-text roles only */
  --gold:#F6D24D;
  --gold-dark:#E3BE33;

  /* Programme identity colours */
  --schola:#35B0FA;
  --multiply:#9933CC;
  --muara:#FF4082;

  /* Type */
  --serif:'Poppins', sans-serif;
  --sans:'Poppins', sans-serif;

  /* Misc */
  --radius:20px;
  --radius-sm:10px;
  --shadow:0 4px 16px rgba(14,14,13,0.06);
  --shadow-hover:0 10px 28px rgba(14,14,13,0.10);
  --max:1140px;
  --maxw:1180px;

  /* Vertical rhythm */
  --section-gap:30px;
  --subsection-gap:30px;
  --grid-gap:30px;

  /* Sticky-header anchor offset */
  --header-h:62px;
  --anchor-buffer:12px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
main[id],
main > [id]{ scroll-margin-top:calc(var(--header-h) + var(--anchor-buffer)); }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--black); margin:0; }
p{ margin:0; }
main, section, .section-inner, .home-hero, .footer-grid,
.story-grid, .contact-grid, .pi-card, .partner-cols{ min-width:0; }
p, a, address, blockquote{ overflow-wrap:anywhere; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
    .reveal,
  .reveal.in,
  .reveal.reveal-complete,
  .reveal-left,
  .reveal-left.in,
  .reveal-right,
  .reveal-right.in{ opacity:1; transform:none; animation:none !important; }
  .prog-impact::after{ transform:scaleX(1) !important; }
  .hero-reveal{ animation:none !important; opacity:1; transform:none; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--black);
  padding:10px 16px; z-index:1000; font-size:0.85rem; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Layout helpers ---------- */
.section-inner{ max-width:var(--max); margin:0 auto; }
section{ padding:var(--section-gap) 32px; }
@media (max-width:900px){
  section{ padding-right:28px; padding-left:28px; }
}
@media (max-width:640px){
  section{ padding-right:22px; padding-left:22px; }
}
.bg-grey{ background:var(--grey); }
.bg-dark{ background:var(--black); color:#fff; }
.divider{ width:100%; max-width:var(--max); height:1px; background:var(--gold-dark); opacity:0.5; margin:0 auto; }

.eyebrow{
  text-transform:uppercase; letter-spacing:2.5px; font-size:0.72rem; color:var(--gold-dark);
  font-weight:700; text-align:center; margin:0 0 6px;
}
h2.section-title{
  font-weight:700; font-size:clamp(1.6rem,3.5vw,2.2rem); color:var(--black);
  text-align:center; margin:0;
}
h2.section-title.left{ text-align:left; border-left:4px solid var(--gold); padding-left:16px; }
h2.section-title + *{ margin-top:var(--subsection-gap); }
h2.section-title + .section-sub,
h2.section-title + .section-heading-note{ margin-top:var(--subsection-gap); }
.section-sub{
  text-align:center; max-width:680px; margin-right:auto; margin-bottom:var(--subsection-gap);
  margin-left:auto; opacity:0.85; line-height:1.75;
}
.section-sub:last-child{ margin-bottom:0; }
.section-heading-note{ display:flex; margin-bottom:var(--subsection-gap); }
/* "See our partners..." style links inside .section-sub — styled as a real,
   professional-looking CTA link instead of plain inherited body text.
   Uses var(--accent), which each programme page already sets in its own
   <style> block (schola.html sets it to --schola, etc.), so the colour is
   automatically correct per programme without hardcoding one brand colour
   into this shared class. */
.section-sub a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--accent, var(--gold-dark));
  position:relative;
  padding-bottom:3px;
}
.section-sub a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 0.3s ease;
}
.section-sub a:hover::after{ transform:scaleX(1); }
.section-sub a .arrow{
  display:inline-block;
  transition:transform 0.25s ease;
}
.section-sub a:hover .arrow{ transform:translateX(4px); }
@keyframes heroFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes revealUp{
  from{ opacity:0; transform:translateY(var(--reveal-start, 100%)); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-reveal{ animation:heroFadeIn 1s ease .1s both; }
.reveal{ opacity:0; transform:translateY(var(--reveal-start, 100%)); }
.reveal.in{
  transform:translateY(0);
  animation:revealUp 1s ease both;
}
.reveal.reveal-complete{ opacity:1; transform:none; animation:none; }
.reveal-delay-1.in{ animation-delay:.1s; }
.reveal-delay-2.in{ animation-delay:.3s; }
.reveal-delay-3.in{ animation-delay:.5s; }
.reveal-delay-4.in{ animation-delay:.7s; }
.prog-card.reveal,
.pi-card.reveal,
.offices-panel.reveal{ --reveal-start:48px; }
.approach-card.reveal,
.team-card.reveal,
.partner-col.reveal,
.badge.reveal,
.ph-image.reveal,
.testi-card.reveal{ --reveal-start:48px; }

/* ---------- Directional reveal (left/right slide-in) ---------- */
@keyframes revealLeft{
  from{ opacity:0; transform:translateX(var(--reveal-start-x, -60px)); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes revealRight{
  from{ opacity:0; transform:translateX(var(--reveal-start-x, 60px)); }
  to{ opacity:1; transform:translateX(0); }
}
.reveal-left{ opacity:0; transform:translateX(var(--reveal-start-x, -60px)); }
.reveal-left.in{ transform:translateX(0); animation:revealLeft 0.8s ease both; }
.reveal-right{ opacity:0; transform:translateX(var(--reveal-start-x, 60px)); }
.reveal-right.in{ transform:translateX(0); animation:revealRight 0.8s ease both; }
@media (max-width:760px){
  .reveal-left, .reveal-right{ --reveal-start-x:32px; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:13px 28px; border-radius:8px; font-size:0.8rem; font-weight:700;
  letter-spacing:0.8px; text-transform:uppercase; transition:all 0.25s ease; text-align:center;
}
.btn-gold{ background:var(--gold); color:var(--black); }
.btn-gold:hover{ background:var(--gold-dark); }
.btn-dark{ background:var(--black); color:#fff; }
.btn-dark:hover{ background:#2a2a28; }
.btn-outline{ border:1.5px solid var(--black); color:var(--black); background:transparent; }
.btn-outline:hover{ background:var(--black); color:#fff; }
.btn-outline-light{ border:1.5px solid #fff; color:#fff; background:transparent; }
.btn-outline-light:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* ---------- Tags / badges ---------- */
.tag{
  display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; border:1px solid var(--black); color:var(--black); background:#fff;
}
.tag-fill{ background:var(--gold); border-color:var(--gold); color:var(--black); }
.tag-to-confirm{ border-color:#C0392B; color:#C0392B; }

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:100; background:var(--black);
  display:flex; align-items:center; justify-content:space-between; padding:14px 48px;
}
.logo-link{ display:flex; align-items:center; }
.logo-link img{ height:34px; width:auto; display:block; }
.site-nav{ display:flex; gap:36px; align-items:center; }
.site-nav a,
.site-nav .nav-label{
    font-family:var(--sans);
    color:#fff;
    font-size:1rem;
    font-weight:600;
    letter-spacing:0.3px;
    text-transform:none;
    position:relative;
    padding-bottom:4px;
    transition:color .3s ease;
}
.site-nav a::after,
.site-nav .nav-label::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width 0.3s ease;
}
.site-nav a:hover::after, .site-nav a.active::after, .site-nav .nav-label.active::after{ width:100%; }
.site-nav a.active, .site-nav .nav-label.active{ color:var(--gold); }
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:none; color:#fff; font-size:1.6rem; line-height:1;
}

/* ---------- Nav dropdowns (desktop hover + click, mobile accordion) ---------- */
.site-nav .nav-item{ position:relative; display:flex; align-items:center; }
.dropdown-toggle{
    font-family:var(--sans);
    color:#fff;
    opacity:.8;
}
.dropdown-toggle:hover{ opacity:1; }
.nav-item.open .dropdown-toggle{ transform:rotate(180deg); opacity:1; }
.nav-dropdown{
  position:absolute; top:100%; left:0; min-width:250px; background:#fff; border-radius:10px;
  box-shadow:0 14px 34px rgba(14,14,13,0.18); padding:10px 0; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.nav-dropdown a{
    display:block;
    font-family:var(--sans);
    color:var(--black);
    font-size:0.95rem;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    padding:11px 22px;
}
.nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover{ background:var(--grey); color:var(--black); }
.nav-dropdown a.active{ color:var(--gold-dark); font-weight:700; }
@media (min-width:1021px){
  .nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}

@media (max-width:1020px){
  :root{ --header-h:72px; }
  header.site-header{ padding:14px 22px; }
  .logo-link img{ height:30px; }
  .nav-toggle{ display:flex; flex:0 0 44px; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--black);
    flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden;
    transition:max-height 0.35s ease;
  }
  .site-nav.open{ max-height:calc(100vh - 72px); overflow-y:auto; overscroll-behavior:contain; }
  .site-nav a,
  .site-nav .nav-label{
      font-family:var(--sans);
      font-size:1rem;
      padding:16px 24px;
      border-top:1px solid rgba(255,255,255,.08);
      width:100%;
      text-transform:none;
  }
  .site-nav .nav-item{ flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.08); }
  .site-nav .nav-item > a, .site-nav .nav-item > .nav-label{ border-top:none; flex:1; }
  .dropdown-toggle{ min-width:56px; min-height:52px; padding:16px 24px; font-size:0.7rem; }
  .nav-dropdown{
    position:static; width:100%; background:rgba(255,255,255,0.04); box-shadow:none; border-radius:0;
    max-height:0; overflow:hidden; opacity:1; visibility:visible; transform:none; padding:0;
    transition:max-height 0.3s ease;
  }
  .nav-item.open .nav-dropdown{ max-height:320px; padding:4px 0 14px; }
  .nav-dropdown a{
      font-family:var(--sans);
      color:#fff;
      font-size:.9rem;
      padding:10px 40px;
  }
  .nav-dropdown a:hover{ background:rgba(255,255,255,0.08); }
  .nav-dropdown a.active{ color:var(--gold); }
}

@media (max-width:480px){
  :root{ --header-h:64px; }
  header.site-header{ padding:10px 16px; }
  .logo-link img{ height:26px; }
  .site-nav.open{ max-height:calc(100vh - 64px); }
}

/* ---------- Page header (sub-pages) ---------- */
.page-header{
  padding:130px 32px 60px; background:var(--black); color:#fff; text-align:left;
  min-height:calc(100vh - 160px);
}
.schola-hero{
  background-color:#0e0e0d;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 68%),
    url(../img/schola/Header\ Image-Schola.png);
  background-position:center 25%;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  color:#fff;
}
.multiply-india-hero{
  background-color:#0e0e0d;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 68%),
    url(../img/Multiply\ India/multiply_india_page.jpg);
  background-position:center 25%;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  color:#fff;
}
.multiply-malaysia-hero{
  background-color:#0e0e0d;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 68%),
    url(../img/Multiply\ Malaysia/Multiply\ Header\ Image.png);
  background-position:center 30%;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  color:#fff;
}
.muara-arts-hero{
  background-color:#0e0e0d;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 68%),
    url(../img/Muara\ Arts/Muara\ Arts\ Banner.png);
  background-position:center 30%;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  color:#fff;
}
.page-header .section-inner{ max-width:var(--max); }
.page-header .tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.page-header .tag-row .tag{ background:transparent; border-color:rgba(255,255,255,0.5); color:#fff; }
.page-header .tag-row .tag.tag-fill{ background:var(--gold); border-color:var(--gold); color:var(--black); }
.page-header h1{
  color:#fff; font-size:clamp(2rem,5vw,3rem); margin:0 0 14px;
}
.page-header p.strap{ font-size:1.05rem; opacity:0.85; max-width:640px; margin:0 0 20px; }
.page-header.short{
  padding:100px 32px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:clamp(380px, 55vh, 620px);
  border-bottom: 3px solid var(--gold);
}
.our-story-hero{
  background-color:#0e0e0d;
  background-image:
    url(../img/OUR\ STORY.png);
  background-position:center 35%;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  filter:grayscale(100%);
  color:#fff;
}
.our-story-hero h1{
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.page-header p.lede{
  font-size:1.05rem; max-width:760px; opacity:0.9; line-height:1.8; margin:0;
}
.schola-hero h1{
  color:#35B0FA;
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.schola-hero-logo{
  width:clamp(140px, 22vw, 260px);
  height:auto;
  display:block;
  margin:0 0 12px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
@media (max-width:640px){
  .schola-hero-logo{
    width:clamp(120px, 48vw, 180px);
  }
}
.schola-hero .tag-row .tag{
  border-color:rgba(255,255,255,0.3);
  color:#eaf6fc;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.schola-hero p.strap, .schola-hero p.lede{
  color:#ffffff;
  display:inline-block;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  padding:5px 12px;
  border-radius:6px;
  text-shadow:0 1px 3px rgba(0,0,0,0.23);
}
.multiply-india-hero h1{
  color:#9933CC;
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.multiply-india-hero-logo{
  width:clamp(140px, 22vw, 260px);
  height:auto;
  display:block;
  margin:0 0 12px;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 2px 6px rgba(0,0,0,0.55))
    drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}

@media (max-width:640px){
  .multiply-india-hero{
    background-size:cover;
    background-position:center 30%;
  }
  .multiply-india-hero-logo{
    width:clamp(120px, 48vw, 180px);
  }
}
.multiply-india-hero .tag-row .tag{
  border-color:rgba(255,255,255,0.3);
  color:#f6ecfc;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.multiply-india-hero p.strap, .multiply-india-hero p.lede{
  color:#ffffff;
  display:inline-block;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  padding:5px 12px;
  border-radius:6px;
  text-shadow:0 1px 3px rgba(0,0,0,0.23);
}
.multiply-malaysia-hero-logo{
  width:clamp(140px, 22vw, 260px);
  height:auto;
  display:block;
  margin:0 0 12px;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 2px 6px rgba(0,0,0,0.55))
    drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}

@media (max-width:640px){
  .multiply-malaysia-hero-logo{
    width:clamp(120px, 48vw, 180px);
  }
}
.multiply-malaysia-hero .tag-row .tag{
  border-color:rgba(255,255,255,0.3);
  color:#f6ecfc;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.multiply-malaysia-hero p.strap, .multiply-malaysia-hero p.lede{
  color:#ffffff;
  display:inline-block;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  padding:5px 12px;
  border-radius:6px;
  text-shadow:0 1px 3px rgba(0,0,0,0.23);
}
.muara-arts-hero-logo{
  width:auto;
  height:auto;
  max-width:160px;
  max-height:100px;
  display:block;
  margin:0 0 16px 14px;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 2px 6px rgba(0,0,0,0.55))
    drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}
.muara-arts-hero .tag-row .tag{
  border-color:rgba(255,255,255,0.3);
  color:#ffeef4;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.muara-arts-hero p.strap, .muara-arts-hero p.lede{
  color:#fff;
  display:inline-block;
  background:rgba(0,0,0,0.2);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  padding:10px 16px;
  border-radius:4px;
  text-shadow:0 1px 3px rgba(0,0,0,0.22);
}
.page-header.short h1{ margin-bottom:16px; }
@media (max-width:900px){
  .page-header.short{ padding:120px 28px 72px; }
  .page-header:not(.short){ padding:110px 28px 50px; min-height:calc(100vh - 170px); }
}
@media (max-width:640px){
  .page-header.short{ padding:90px 22px 56px; }
  .page-header:not(.short){ padding:90px 22px 40px; min-height:calc(100vh - 150px); }
  .page-header p.strap, .page-header p.lede{ font-size:1rem; line-height:1.7; }
  .multiply-india-hero{
    background-size:cover;
    background-position:center 30%;
  }
}

/* ---------- Hero (home full-bleed, video background only) ---------- */
.home-hero{
  position:relative;
  display:grid;
  place-items:center;
  min-height:calc(100svh - 62px);
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:var(--black);
}
.home-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,0.50);
  pointer-events:none;
}
.home-hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.home-hero-media[hidden]{ display:none !important; }
.home-hero-video{
  object-fit:cover;
}
.home-hero-content{
  position:relative;
  z-index:2;
  width:min(1200px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 1.2vw, 16px);   /* was clamp(20px, 3vw, 40px) */
  padding:clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
  text-align:center;
}

.home-hero-logo{
  width:clamp(600px, 62vw, 820px);
  max-width:100%;
  height:auto;
  margin:0;              /* spacing now comes from the parent's gap, not margin-bottom */
  filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.55));   /* white wordmark + subtle black shadow */
}

.home-hero-content p{
  max-width:1050px;
  margin:0;               /* same reason — gap handles it */
  color:var(--white);     /* content colour changed to white per request */
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);  /* slightly larger to match creador.com's tagline height */
  font-weight:500;
  line-height:1.5;
  text-wrap:balance;
  text-shadow:0 2px 6px rgba(0,0,0,0.55);   /* subtle black shadow for legibility */
}

/* Hero content reveal — smaller slide distance than the default (100%)
   since the logo/paragraph are compact elements, not full sections */
.home-hero-content .reveal{
  --reveal-start:28px;
}

@media (max-width:640px){
  .home-hero-content{
    gap:clamp(6px, 2vw, 12px);   /* was clamp(16px, 5vw, 24px) */
    padding:clamp(40px, 10vw, 56px) 22px;
  }
}

/* ---------- Placeholder image blocks ---------- */
.ph-image{
  position:relative; z-index:1; width:100%; border-radius:14px; box-shadow:var(--shadow-hover);
  aspect-ratio:5/4; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(135deg, var(--grey) 0%, #fff 100%);
  border:1.5px dashed rgba(14,14,13,0.25); padding:20px;
}
.ph-image.has-photo{
  display:flex;
  flex-direction:column;
}
.shot-caption{
  padding:10px 14px;
  font-size:0.85rem;
  font-weight:600;
  text-align:center;
  color:var(--black);
  background:#fff;
  border-top:1px solid var(--grey);
}
.ph-image.accent-schola{ border-color:var(--schola); background:linear-gradient(135deg,#eaf7ff 0%,#fff 100%); }
.ph-image.accent-multiply{ border-color:var(--multiply); background:linear-gradient(135deg,#f6ecfc 0%,#fff 100%); }
.ph-image.accent-muara{ border-color:var(--muara); background:linear-gradient(135deg,#ffeef4 0%,#fff 100%); }
.ph-image span{
  font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; font-weight:700; opacity:0.55;
  color:var(--black);
}
.ph-image.square{ aspect-ratio:1/1; }
.ph-image.has-photo{
  aspect-ratio:auto; border-style:solid; border-color:var(--grey); background:#fff; padding:0; overflow:hidden;
}
.ph-image.has-photo img,
.ph-image.has-photo video{
  width:100%; height:auto; object-fit:contain; border-radius:inherit; display:block;
}
.ph-image.wide{ aspect-ratio:16/9; }
.ph-image.photo{ aspect-ratio:4/3; }
.muara-shot-row .ph-image.has-photo img{
  height:100%;
  object-fit:cover;
}

/* Gallery-style hover: image zooms slightly, card lifts, a caption
   label slides up over a gradient scrim — same interaction language
   a real gallery/museum site uses for exhibition thumbnails. */
.muara-shot-row .ph-image.has-photo{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, border-color 0.35s ease;
}
.muara-shot-row .ph-image.has-photo:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover), 0 24px 50px -20px rgba(255,64,130,0.35);
  border-color:var(--muara);
}
.muara-shot-row .ph-image.has-photo img{
  transition:transform 0.6s cubic-bezier(.22,1,.36,1);
}
.muara-shot-row .ph-image.has-photo:hover img{
  transform:scale(1.08);
}
.muara-shot-row .shot-overlay-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 18px 16px;
  background:linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0) 100%);
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.3px;
  transform:translateY(100%);
  opacity:0;
  transition:transform 0.4s cubic-bezier(.22,1,.36,1), opacity 0.4s ease;
}
.muara-shot-row .ph-image.has-photo:hover .shot-overlay-caption{
  transform:translateY(0);
  opacity:1;
}

/* A more considered scroll-reveal for this section specifically —
   a gentle rise-and-settle with a touch of scale, instead of the
   site-wide flat slide-up, so the gallery grid feels art-directed. */
@keyframes muaraGalleryReveal{
  from{ opacity:0; transform:translateY(36px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.muara-shot-row .ph-image.reveal.in{
  animation:muaraGalleryReveal 0.9s cubic-bezier(.22,1,.36,1) both;
}
.ph-image.tall{ aspect-ratio:3/4; }
.ph-image.avatar{ aspect-ratio:1/1; border-radius:12px; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); text-align:center; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
/* Professional tile treatment for each stat — same card language as
   .prog-card / .feature-row elsewhere on the site (border, shadow,
   coloured top accent, hover lift) instead of bare numbers on the page. */
.stat-card{
  background:var(--white);
  border:1px solid var(--grey);
  border-top:4px solid var(--schola);
  border-radius:var(--radius-sm);
  padding:32px 20px;
  box-shadow:var(--shadow);
  transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.stat-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-4px); }
@media (max-width:520px){
  .stat-card{ padding:24px 16px; }
}
.stat-num{ font-weight:800; color:var(--black); font-size:clamp(1.8rem,4vw,2.6rem); font-family:var(--sans); }
.stat-label{ font-size:0.78rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-top:6px; }
.stat-sub{ font-size:1rem; opacity:0.75; margin-top:2px; }
.stat-grid > .stat-schola .stat-num,
.stat-grid > .stat-schola .stat-label,
.stat-grid > .stat-schola .stat-sub{ color:var(--schola); }
.stat-grid > .stat-schola.stat-card{ border-top-color:var(--schola); }
.stat-grid > .stat-multiply .stat-num,
.stat-grid > .stat-multiply .stat-label,
.stat-grid > .stat-multiply .stat-sub{ color:var(--multiply); }
.stat-grid > .stat-multiply.stat-card{ border-top-color:var(--multiply); }
.stat-grid > .stat-muara .stat-num,
.stat-grid > .stat-muara .stat-label,
.stat-grid > .stat-muara .stat-sub{ color:var(--muara); }
.stat-grid > .stat-muara.stat-card{ border-top-color:var(--muara); }
.stat-date{ text-align:center; font-size:0.78rem; opacity:0.6; margin-top:30px; }
.stat-num.small{ font-size:clamp(1.4rem,3vw,2rem); }

/* ---------- Feature-style programme cards ---------- */

  .tabs{
    display:flex; justify-content:center; gap:5px; flex-wrap:wrap; margin:0 0 var(--subsection-gap);
  }

  .tab-btn{
    min-height:44px; padding:10px 20px; border:1.5px solid var(--black); border-radius:999px;
    color:var(--black); font-size:0.78rem; font-weight:700; letter-spacing:0.7px;
    text-transform:uppercase; transition:background .2s ease, color .2s ease, border-color .2s ease;
  }

  .tab-btn:hover, .tab-btn:focus-visible, .tab-btn.active{
    background:var(--black); border-color:var(--black); color:var(--white);
  }

  .tab-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
  }

  .prog-card {
    --programme: var(--gold);
    --programme-shadow: rgba(246, 210, 77, 0.35);

    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    overflow: hidden;

    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 5px solid var(--programme);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;

    box-shadow: var(--shadow), 0 22px 36px -18px var(--programme-shadow);
    color: var(--charcoal);

    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }

  /* Programme colours already defined in :root — the shadow tint below reuses
     the same rgb values already used for each programme's accent elsewhere
     on the page (e.g. .feature-num.accent-*), just at higher opacity. */
  .prog-card.card-schola {
    --programme: var(--schola);
    --programme-shadow: rgba(53, 176, 250, 0.35);
  }

  .prog-card.card-multiply {
    --programme: var(--multiply);
    --programme-shadow: rgba(153, 51, 204, 0.35);
  }

  .prog-card.card-muara {
    --programme: var(--muara);
    --programme-shadow: rgba(255, 64, 130, 0.35);
  }

  @media (hover:hover) and (pointer:fine) {
    .prog-card:hover,
    .prog-card:focus-visible {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover), 0 28px 44px -16px var(--programme-shadow);
    }

    .prog-card:hover .prog-impact::after,
    .prog-card:focus-visible .prog-impact::after {
      filter: brightness(1.1) saturate(1.05);
    }
  }

  .prog-card:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
  }

  /* Upper information area */
  .prog-card-info {
    flex: 1;
    padding: 0 24px 24px;
    text-align: center;
  }

  .prog-category {
    display: inline-block;
    margin-bottom: 28px;
    padding: 7px 20px 8px;

    border-radius: 0 0 9px 9px;
    background: var(--programme);
    color: var(--white);

    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .prog-card h3 {
    margin: 0 0 6px;

    color: var(--black);
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .prog-card p.desc {
    min-height: 1.25em;
    margin: 0 0 10px;

    color: var(--charcoal);
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.65;
  }

  /* Integrated impact widget, visually adapted from a goal/raised component */
  .prog-impact {
    --impact-fill: 80%;
    --impact-delay: 0ms;
    --impact-inline: 12px;

    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    align-content: center;

    min-height: 94px;
    padding: 13px var(--impact-inline) 25px;
    background: var(--grey);
    border-radius: 6px;
  }

  .prog-impact-single {
    grid-template-columns: 1fr;
  }

  .prog-impact div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-width: 0;
    text-align: left;
  }

  .prog-impact div:last-of-type {
    align-items: flex-end;
    text-align: right;
  }

  .prog-impact-single div,
  .prog-impact-single div:last-of-type {
    align-items: center;
    text-align: center;
  }

  .prog-impact strong {
    display: block;

    color: var(--black);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .prog-impact span {
    display: block;
    margin-top: 3px;

    color: var(--charcoal);
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.25;
  }

  /* Decorative rail only: identical on every card and not a progress measure. */
  .prog-impact::before,
  .prog-impact::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: var(--impact-inline);
    height: 6px;
    border-radius: 999px;
  }

  .prog-impact::before {
    right: var(--impact-inline);
    background: rgba(14, 14, 13, 0.12);
  }

  .prog-impact::after {
    bottom: 10px;
    width: var(--impact-fill);
    height: 10px;
    background:
      radial-gradient(
        circle 5px at calc(100% - 5px) 50%,
        var(--programme) 0 98%,
        transparent 100%
      ),
      linear-gradient(
        var(--programme),
        var(--programme)
      ) left center / calc(100% - 5px) 6px no-repeat;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
      transform 1.15s cubic-bezier(0.22, 1, 0.36, 1) var(--impact-delay),
      filter 0.18s ease;
  }

  .prog-impact.impact-in::after {
    transform: scaleX(1);
  }

  /* Image area */
  .prog-card-media {
    position: relative;
    height: 240px;
    margin-top: auto;
    overflow: hidden;
    background: var(--grey);
  }

  .programme-placeholder {
    width: 100%;
    height: 100%;
  }

  .prog-card-media img,
  .prog-card-media video {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
  }

  .prog-card-media .programme-placeholder > img,
  .prog-card-media .programme-placeholder > video {
    position: absolute;
    inset: 0;
  }

  .programme-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    background: linear-gradient(
      135deg,
      var(--grey) 0%,
      var(--white) 100%
    );

    text-align: center;
  }

  .programme-placeholder.accent-multiply {
    background: linear-gradient(
      135deg,
      rgba(153, 51, 204, 0.15),
      var(--white)
    );
  }

  .programme-placeholder.accent-muara {
    background: linear-gradient(
      135deg,
      rgba(255, 64, 130, 0.15),
      var(--white)
    );
  }

  .programme-placeholder span {
    color: var(--black);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.55;
    text-transform: uppercase;
  }

  /* Expanding image overlay */
  .prog-overlay {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 0;
    overflow: hidden;

    background: rgba(14, 14, 13, 0.62);
    opacity: 0;

    transition:
      height 0.5s ease,
      opacity 0.5s ease;
  }

  .prog-card:hover .prog-overlay,
  .prog-card:focus-visible .prog-overlay {
    height: 100%;
    opacity: 1;
  }

  .prog-card:hover .prog-card-media img,
  .prog-card:focus-visible .prog-card-media img,
  .prog-card:hover .prog-card-media video,
  .prog-card:focus-visible .prog-card-media video {
    transform: scale(1.05);
  }

  /* The Schola source bitmap includes side bars, so crop them in CSS. */
  .prog-card.card-schola .prog-card-media > img {
    transform: scale(1.38);
    transform-origin: center top;
  }

  .prog-card.card-schola:hover .prog-card-media > img,
  .prog-card.card-schola:focus-visible .prog-card-media > img {
    transform: scale(1.45);
  }

  @media (max-width: 1100px) {
    .prog-card.card-schola .prog-card-media > img {
      transform: scale(2.15);
    }

    .prog-card.card-schola:hover .prog-card-media > img,
    .prog-card.card-schola:focus-visible .prog-card-media > img {
      transform: scale(2.23);
    }
  }

  /* Read-more button */
  .prog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 9px 11px 9px 18px;
    border: 1.5px solid var(--gold);
    border-radius: 7px;

    color: var(--white);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    transform: translateY(12px);
    transition:
      background 0.25s ease,
      color 0.25s ease,
      transform 0.5s ease;
  }

  .prog-card:hover .prog-read-more,
  .prog-card:focus-visible .prog-read-more {
    transform: translateY(0);
  }

  .prog-read-more:hover {
    background: var(--gold);
    color: var(--black);
  }

  .prog-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background: var(--gold);
    color: var(--white);
    font-size: 1.2rem;
    line-height: 1;
  }

  /* Used by the existing country-filter JavaScript */
  .prog-card.hide {
    display: none;
  }

  /* Tablet */
  @media (max-width: 1100px) {
    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prog-impact strong {
      font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    }
  }

  /* Mobile */
  @media (max-width: 600px) {
    .card-grid {
      grid-template-columns: 1fr;
    }

    .prog-card-info {
      padding-right: 20px;
      padding-left: 20px;
    }

    .prog-impact {
      --impact-inline: 11px;
      min-height: 92px;
      padding-top: 12px;
      padding-bottom: 24px;
    }

    .prog-card-media {
      height: 210px;
    }

    /* Keep the link visible on devices without hover */
    .prog-overlay {
      top: auto;
      bottom: 0;
      height: 72px;
      opacity: 1;
      background: linear-gradient(
        to top,
        rgba(14, 14, 13, 0.8),
        transparent
      );
    }

    .prog-read-more {
      transform: none;
    }
  }

  @media (max-width: 360px) {
    .prog-impact {
      --impact-inline: 9px;
      gap: 8px;
    }

    .prog-impact strong {
      font-size: 1.05rem;
    }

    .prog-impact span {
      font-size: 0.63rem;
    }
  }

  @media (hover:none), (pointer:coarse) {
    .prog-overlay {
      top:auto; bottom:0; height:72px; opacity:1;
      background:linear-gradient(to top, rgba(14,14,13,0.8), transparent);
    }
    .prog-read-more{ transform:none; }
  }

/* ---------- Recognition / media ---------- */
.recognition-bg{ background:var(--grey); }
.recognition-groups{ display:grid; gap:var(--subsection-gap); }
.recognition-group-title{
  margin:0; text-align:center; font-size:clamp(1.25rem,2.5vw,1.6rem); color:var(--black);
}
.recognition-group-title + *{ margin-top:var(--subsection-gap); }
.recognition-group-title + .recognition-group-sub{ margin-top:var(--subsection-gap); }
.recognition-group-sub{
  max-width:680px; margin-right:auto; margin-bottom:var(--subsection-gap); margin-left:auto;
  text-align:center; color:var(--charcoal); line-height:1.75;
}
.badge-row{ display:flex; justify-content:center; gap:var(--grid-gap); flex-wrap:wrap; }
.badge{
  width:220px; border-radius:12px; background:#fff; border:1px solid var(--grey);
  box-shadow:var(--shadow); padding:14px; transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.recognition-bg .badge{ width:min(330px, 100%); padding:0; overflow:hidden; }
@media (max-width:520px){
  .badge{ width:min(220px, 100%); }
}
.badge .ph-image{ border-radius:6px; }

.outlet-marquee{
  width:100%; overflow:hidden; padding:28px 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 180px, #000 calc(100% - 180px), transparent);
  mask-image:linear-gradient(to right, transparent, #000 180px, #000 calc(100% - 180px), transparent);
}
.outlet-marquee:focus-visible{ outline:2px solid var(--gold-dark); outline-offset:6px; border-radius:8px; }
.outlet-track{
  display:flex; width:max-content; animation:outletMarquee 36s linear infinite; will-change:transform;
}
.outlet-marquee:hover .outlet-track,
.outlet-marquee:focus-within .outlet-track{ animation-play-state:paused; }
/* Partner marquees (Malaysia/India on the Partners page) should keep
   scrolling on hover/focus instead of pausing like the "As Seen On" one. */
.outlet-marquee.partner-marquee:hover .outlet-track,
.outlet-marquee.partner-marquee:focus-within .outlet-track{
  animation-play-state:running;
}
.outlet-set{ display:flex; align-items:center; gap:var(--grid-gap); padding-right:var(--grid-gap); }
/* Wider spacing for the plain "As seen on" media-logo marquee only —
   partner-logo marquees (partners.html) keep the tighter default gap. */
.outlet-marquee:not(.partner-marquee) .outlet-set{ gap:44px; padding-right:44px; }
.outlet-logo{
  flex:0 0 220px; width:220px; height:120px; aspect-ratio:auto; padding:26px;
  border-radius:var(--radius); background:linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  border:1px solid rgba(17,17,17,0.07);
  box-shadow:var(--shadow), 0 20px 45px -20px rgba(17,17,17,0.18);
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.outlet-logo:hover{
  transform:translateY(-6px) scale(1.03);
  border-color:var(--gold);
  box-shadow:var(--shadow-hover), 0 28px 60px -22px rgba(17,17,17,0.22);
}
.outlet-logo img{
  width:auto; max-width:150px; height:40px; object-fit:contain;
}
.outlet-logo:hover img{ filter:none; opacity:1; }
.partner-country-block + .partner-country-block{ margin-top:var(--subsection-gap); }
.partner-marquee{ margin-top:0; }
.partner-set{ align-items:stretch; }
.partner-logo-card{
  flex:0 0 280px; width:280px; min-height:194px; padding:18px; border:1px solid var(--grey);
  border-radius:12px; background:#fff; box-shadow:var(--shadow); text-align:center;
}
.partner-mark{ width:100%; height:92px; aspect-ratio:auto; padding:14px; margin-bottom:14px; }
/* Strip the boxed look off just the logo area — .ph-image.has-photo gives
   it its own border/background/shadow for other uses on the site, which is
   what was reading as a separate "subsection" between the logo and the
   text below it. The whole .partner-logo-card is already one white card,
   so the logo should just sit flush inside it with no border of its own. */
.ph-image.partner-mark{
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
.partner-mark img{
  width:auto; max-width:180px; height:56px; object-fit:contain;
}
.partner-mark img{
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
}
.partner-logo-card h3{ margin:0 0 6px; font:700 0.9rem/1.3 var(--sans); }
.partner-logo-card p{
  margin:0; overflow:hidden; color:var(--charcoal); font-size:0.78rem; line-height:1.4;
  text-overflow:ellipsis; white-space:nowrap;
}
.partner-testimonial{
  max-width:680px; margin-right:auto; margin-left:auto; padding:32px; border-radius:var(--radius); background:#fff;
  border:1px solid var(--grey); box-shadow:var(--shadow); text-align:center;
}
.partner-testimonial blockquote{ margin:0 0 22px; font:600 clamp(1.35rem,3vw,1.8rem)/1.45 var(--serif); }
.partner-testimonial p{ margin:0; line-height:1.55; }
.partner-testimonial span{ color:var(--charcoal); font-size:0.88rem; }
/* Step-carousel — combined testimonials from multiple programmes, 3 shown
   at a time. main.js auto-advances one card every 5s; the .testi-* classes
   below tint each card by which programme it belongs to. */
.testi-carousel{
  overflow:hidden;
}
.testi-wrap{ display:flex; align-items:center; gap:16px; }
.testi-wrap .testi-carousel{ flex:1 1 0; min-width:0; }
.testi-btn{
  width:44px; height:44px; border-radius:50%; background:var(--black); color:#fff;
  font-size:2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, color 0.2s ease; cursor:pointer; border:none;
}
.testi-btn:hover{ background:var(--gold); color:var(--black); }
.testi-track{
  display:flex;
  gap:var(--grid-gap);
  transition:transform 0.6s ease;
}
.testi-track .partner-testimonial{
  flex:0 0 calc((100% - (2 * var(--grid-gap))) / 3);
  max-width:none;
  margin:0;
  text-align:center;
  height:auto;
}
.testi-track .partner-testimonial blockquote{
  font:600 1.05rem/1.6 var(--serif);
  margin:0 0 18px;
}
.partner-testimonial.testi-schola{ background:#EAF7FF; border-top:4px solid var(--schola); }
.partner-testimonial.testi-schola strong{ color:var(--schola); }
.partner-testimonial.testi-multiply{ background:#F6ECFC; border-top:4px solid var(--multiply); }
.partner-testimonial.testi-multiply strong{ color:var(--multiply); }

/* Programme logo inside testimonial cards */
.testi-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto 18px;
}

@media (max-width:640px){
  .testi-logo { height: 28px; max-width: 110px; }
}
/* Schola logo — larger in testimonial cards */
.testi-schola .testi-logo {
  height: 72px;
}
@media (max-width: 640px) {
  .testi-schola .testi-logo { height: 60px; }
}
@media (max-width:900px){
  .testi-track .partner-testimonial{ flex:0 0 100%; }
}
@keyframes outletMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes outletMarqueeReverse{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
/* Reverse-direction marquee — applied to the India partner row so it
   scrolls the opposite way from Malaysia's. */
.outlet-marquee.reverse .outlet-track{
  animation-name:outletMarqueeReverse;
  /* India has 4 partner cards vs Malaysia's 10, so its track is a much
     shorter strip of content. The animation always travels 50% of the
     track's own width, so a shorter track needs a shorter duration to move
     at the same pixel speed as Malaysia's: 36s x (4/10) = 14.4s.
     If you add or remove partners from either row, recalculate this ratio:
     14.4 = 36 x (India partner count / Malaysia partner count). */
  animation-duration:21.6s;
}
@media (max-width:520px){
  .outlet-marquee{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .outlet-logo{ flex-basis:170px; width:170px; height:98px; padding:16px; }
  .partner-logo-card{ flex-basis:246px; width:246px; }
  .partner-testimonial{ padding:26px 22px; }
  .testi-track .partner-testimonial{ padding:24px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .outlet-marquee{
    overflow-x:auto; -webkit-mask-image:none; mask-image:none; scrollbar-width:thin;
  }
  .outlet-track{ animation:none; transform:none; will-change:auto; }
  .outlet-set[aria-hidden="true"]{ display:none; }
}

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--black); color:#fff; padding:56px 48px 28px; }
.footer-grid{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.25fr 0.9fr 1fr 1.15fr; gap:40px; }
@media (max-width:900px){
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
  footer.site-footer{ padding:48px 32px 24px; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  footer.site-footer{ padding:44px 22px 24px; }
}
footer .logo-link{ margin-bottom:16px; display:inline-flex; }
footer .logo-link img{ height:30px; }
footer h4{ font-size:0.75rem; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; margin:0 0 16px; font-family:var(--serif); font-weight:700; }
footer p, footer a{ font-size:0.88rem; line-height:1.7; opacity:0.85; }
footer a:hover{ opacity:1; color:var(--gold); }
.footer-office{ margin-bottom:18px; }
.footer-office strong{ display:block; margin-bottom:4px; font-size:0.86rem; }
.footer-office p{ margin:0; }
.footer-socials{ display:flex; gap:10px; margin-top:20px; }
footer .btn-square{
  display:inline-flex; width:42px; height:42px; padding:0; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.35); border-radius:8px; color:#fff; opacity:1;
}
footer .btn-square svg{ width:20px; height:20px; fill:currentColor; }
footer .btn-square:hover{ border-color:var(--gold); background:var(--gold); color:var(--black); }
.footer-bottom{ text-align:center; font-size:0.72rem; opacity:0.5; margin-top:44px; max-width:var(--max); margin-left:auto; margin-right:auto; }

/* ---------- Our Story page ---------- */
.story-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--grid-gap); }
@media (max-width:900px){ .story-grid{ grid-template-columns:1fr; } }
.story-copy p{ margin:0 0 20px; line-height:1.85; }
.timeline{ border-left:2px solid var(--grey); padding-left:24px; }
.timeline-item{ margin-bottom:80px; position:relative; }
.timeline-item:last-child{ margin-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-30px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--gold);
}
.timeline-year{ font-family:var(--serif); font-weight:800; font-size:1.1rem; color:var(--black); }
.timeline-note{ font-size:0.78rem; opacity:0.6; margin-top:10px; }

.approach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:0; }
@media (max-width:800px){ .approach-grid{ grid-template-columns:1fr; } }
.approach-card{ background:var(--grey); border-radius:var(--radius-sm); padding:30px; border-left:4px solid var(--gold); }
.approach-card h3{ font-size:1.15rem; margin:0 0 12px; }
.approach-card p{ line-height:1.7; margin:0; font-size:0.92rem; }

.team-group{ margin-bottom:var(--subsection-gap); }
.team-group h4{ text-transform:uppercase; letter-spacing:1.5px; font-size:0.78rem; color:var(--charcoal); font-family:var(--serif); font-weight:700; margin:0 0 var(--subsection-gap); }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:360px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{
  position:relative; display:grid; grid-template-rows:auto 76px; overflow:hidden;
  text-align:center; background:var(--white);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.team-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.team-card .team-photo .ph-image{
  width:100%; height:calc(100% + 30px); aspect-ratio:auto; margin:0; padding:0;
  border:0; border-radius:0;
  box-shadow:none;
}
.team-card .team-photo .ph-image > img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  transform:translateY(0); transition:transform .45s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.team-info{
  position:relative; z-index:2; min-height:0; height:132px; padding:12px 16px 8px;
  overflow:hidden; transform:translateY(0);
  background:var(--white);
  transition:transform .45s cubic-bezier(.22,1,.36,1); will-change:transform;
}
.team-card .t-name{ font-weight:700; color:var(--black); font-size:1.15rem; line-height:1.25; }
.team-card .t-role{ font-size:0.95rem; line-height:1.3; opacity:0.7; }
.team-social{
  display:flex; justify-content:center; gap:8px; margin-top:12px; opacity:0;
  transform:translateY(8px);
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.team-social a{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  flex:0 0 44px; border:1px solid rgba(227,190,51,.45); border-radius:50%;
  background:var(--white); color:var(--gold-dark);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.team-social svg{ width:20px; height:20px; fill:currentColor; }
.team-social a:hover, .team-social a:focus-visible{
  background:var(--gold-dark); color:var(--white); border-color:var(--gold-dark);
}
.team-social a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){
  .team-card:hover, .team-card:focus-within{ box-shadow:var(--shadow-hover); }
  .team-card:hover .team-photo .ph-image > img,
  .team-card:focus-within .team-photo .ph-image > img{ transform:translateY(-18px); }
  .team-card:hover .team-info,
  .team-card:focus-within .team-info{ transform:translateY(-33px); }
  .team-card:hover .team-social,
  .team-card:focus-within .team-social{ opacity:1; transform:translateY(-8px); }
}
@media (hover:none), (pointer:coarse){
  .team-card .team-photo .ph-image > img{ transform:none; }
  .team-card .team-info{ transform:translateY(-33px); }
  .team-card .team-social{ opacity:1; transform:translateY(-8px); }
}

/* ---------- Programmes index cards ---------- */
.pi-intro{ max-width:760px; margin:0 auto var(--subsection-gap); text-align:center; font-size:1.05rem; line-height:1.8; opacity:0.9; }
.pi-card{
  display:grid; grid-template-columns:1fr auto; gap:var(--grid-gap); align-items:center; background:#fff;
  border:1px solid var(--grey); border-radius:var(--radius); padding:32px; margin-bottom:var(--grid-gap);
  box-shadow:var(--shadow); border-top:4px solid var(--gold);
}
.pi-card:last-child{ margin-bottom:0; }
.pi-card.accent-schola{ border-top-color:var(--schola); }
.pi-card.accent-multiply{ border-top-color:var(--multiply); }
.pi-card.accent-muara{ border-top-color:var(--muara); }
/* Schola logo — larger */
.pi-card.accent-schola .pi-card-logo {
  height: 70px;
  max-width: 220px;
}
/* Muara Arts logo — larger */
.pi-card.accent-muara .pi-card-logo {
  height: 70px;
  max-width: 220px;
}
@media (max-width:760px){
  .pi-card{ grid-template-columns:1fr; padding:24px; }
  .pi-card .pi-links{ min-width:0; }
}
@media (max-width:480px){ .pi-card .pi-links .btn{ width:100%; } }
.pi-card .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pi-card h3{ font-size:1.5rem; margin:0 0 10px; }
.pi-card p.desc{ margin:0 0 14px; opacity:0.85; line-height:1.6; }
.pi-card .pi-links{ display:flex; flex-direction:column; gap:10px; text-align:center; min-width:180px; }
.pi-card .pi-stat-num{ font-family:var(--serif); font-weight:800; font-size:1.8rem; color:var(--black); }
.pi-card .pi-stat-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.8px; opacity:0.7; margin-bottom:10px; }

/* ---------- Programme detail page — "What it is" feature cards ---------- */
.feature-list{
  margin-top:var(--subsection-gap);
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--grid-gap);
}
.feature-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:26px;
  background:var(--white);
  border:1px solid var(--grey);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.feature-row:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.feature-row-full{ grid-column:1 / -1; }
.feature-num{
  flex:0 0 44px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-family:var(--serif); font-weight:800; font-size:1rem;
  background:rgba(14,14,13,0.06); color:var(--black);
}
.feature-num.accent-schola{ background:rgba(53,176,250,0.14); color:var(--schola); }
.feature-num.accent-multiply{ background:rgba(153,51,204,0.14); color:var(--multiply); }
.feature-num.accent-muara{ background:rgba(255,64,130,0.14); color:var(--muara); }
.feature-body{ flex:1 1 auto; min-width:0; }
.feature-body h4{ font-size:1.05rem; margin:0 0 6px; }
.feature-body p{ margin:0; opacity:0.85; line-height:1.65; font-size:0.94rem; }
@media (max-width:760px){
  .feature-list{ grid-template-columns:1fr; }
}

/* ---------- Editorial feature layout (Multiply India "What it is") ---------- */
.feature-editorial{
  margin-top:var(--subsection-gap);
  display:flex;
  flex-direction:column;
  gap:var(--section-gap);
}
.feature-editorial-item{ display:flex; flex-direction:column; gap:var(--subsection-gap); }
.feature-editorial-media img{ border-radius:14px; display:block; transition:transform 0.4s ease; }
.feature-editorial-item:hover .feature-editorial-media img{ transform:scale(1.015); }
/* Keep the Videos/Community photos the same modest tile size the old shot-row used —
   without this, .has-photo's aspect-ratio:auto lets the real photo render at its full
   natural size (which is what made them oversized). */
.feature-editorial-item:not(.is-split) .feature-editorial-media{ max-width:420px; }
.feature-editorial-item:not(.is-split) .feature-editorial-media img{ height:100%; object-fit:cover; }
.feature-editorial-caption{ max-width:640px; }
.feature-editorial-title{
  display:flex; align-items:center; gap:16px;
  font-size:clamp(1.8rem, 3.4vw, 2.5rem); font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
  margin:0 0 12px; color:var(--black);
}
/* Smaller heading size for the Schola sticker rows only — Multiply India's
   editorial titles (VIDEOS, MAITREE, COMMUNITY DELIVERY) keep the larger
   default size above. */
.feature-editorial-title.feature-editorial-title--sm{
  font-size:clamp(1.25rem, 2vw, 1.6rem);
}
/* Number badge as a ringed circle — the "circular bullet icon" motif from the reference. */
.feature-editorial-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex-shrink:0; border-radius:50%;
  border:2px solid currentColor; background:var(--white);
  font-family:var(--serif); font-weight:800; font-size:1.15rem;
}
.feature-editorial-num.accent-schola{ color:var(--schola); }
.feature-editorial-num.accent-multiply{ color:var(--multiply); }
.feature-editorial-num.accent-muara{ color:var(--muara); }
.feature-editorial-desc{ margin:0; opacity:0.85; line-height:1.7; max-width:520px; }
.feature-editorial-desc::before{
  content:""; display:inline-block; width:9px; height:9px; margin-right:8px;
  border-radius:50%; border:2px solid var(--gold-dark); vertical-align:middle;
}
.feature-editorial-item.is-split{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  align-items:center;
  gap:var(--grid-gap);
}
.feature-editorial-item.is-split .feature-editorial-caption{ max-width:none; }
.feature-editorial-item.is-split .feature-editorial-media{ max-width:520px; margin-left:auto; }
/* .reverse mirrors the row so the photo sits on the left and text on the right —
   used to alternate sides item-to-item, like the reference's zigzag layout. */
.feature-editorial-item.is-split.reverse{ grid-template-columns:1.2fr 1fr; }
.feature-editorial-item.is-split.reverse .feature-editorial-media{ margin-left:0; margin-right:auto; }
@media (max-width:800px){
  .feature-editorial-item.is-split,
  .feature-editorial-item.is-split.reverse{ grid-template-columns:1fr; }
  .feature-editorial-item.is-split .feature-editorial-media,
  .feature-editorial-item.is-split.reverse .feature-editorial-media{ max-width:none; margin-left:0; margin-right:0; }
}
/* Small consistent icon tile for the Schola product stickers — contains
   their die-cut shape/shadow/"click here" label at a size where it just
   reads as a badge icon, instead of floating loose at full size. */
.feature-icon{
  flex:0 0 64px;
  width:64px; height:64px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,14,13,0.06);
  padding:10px;
  overflow:hidden;
}
.feature-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.feature-icon.accent-schola{ background:rgba(53,176,250,0.10); }
.feature-icon.accent-multiply{ background:rgba(153,51,204,0.10); }
.feature-icon.accent-muara{ background:rgba(255,64,130,0.10); }

/* Stacked, centered card variant — big sticker on top, heading + text below,
   card background tinted to match that sticker's own colour. */
.feature-row.feature-row--stack{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.feature-row--stack .feature-icon{
  width:120px; height:120px; flex:0 0 120px;
  background:transparent; padding:0; border-radius:0;
}
.feature-row--stack .feature-icon img{
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.45));
}
.feature-row--stack .feature-body p{
  max-width:440px;
  margin-left:auto;
  margin-right:auto;
}
.feature-row.tint-blue{ background:#EAF7FF; border-color:#BFE6FB; }
.feature-row.tint-pink{ background:#FDEFF5; border-color:#F8CFE0; }
.feature-row.tint-green{ background:#EAF8EF; border-color:#BFE6CC; }
.feature-row.tint-gold{ background:#FFF8E6; border-color:#F6E3A8; }
.feature-row.tint-purple{ background:#F6ECFC; border-color:#E0BFF2; }
.feature-row.tint-muara{ background:#FFEEF4; border-color:#FAC2D6; }
/* Maitree WhatsApp screenshot tile — shown at a real phone-screen aspect ratio
   (9:19.5) instead of the 3:4 "tall" ratio, so the screenshot isn't cropped
   awkwardly. The selectors repeat classes on purpose for extra specificity —
   this is required to reliably win over the general .is-split media sizing and
   .has-photo img rules earlier in this file; a plain single-class override does
   NOT take effect against those (that was the bug in the previous version).
   Pick ONE size by leaving that block active and commenting out the other two. */
.feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--maitree{
  aspect-ratio:9/19.5; margin-left:auto; margin-right:auto;
}
.ph-image.has-photo.feature-editorial-media--maitree img{
  width:100%; height:100%; object-fit:cover; object-position:top;
}
.ph-image.has-photo.feature-editorial-media--video{ aspect-ratio:16/9; }
.ph-image.has-photo.feature-editorial-media--video video{
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* Size 1 — Compact phone (240px wide) */
.feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--maitree{ max-width:240px; }

/* Size 2 — Medium phone (280px wide)
.feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--maitree{ max-width:280px; }
*/

/* Size 3 — Large phone (320px wide)
.feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--maitree{ max-width:320px; }
*/

@media (max-width:800px){
  .feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--maitree{ max-width:220px; }
}

/* Schola product stickers — sized down from the 520px zigzag default so each
   row isn't dominated by a mostly-white square graphic (same override
   technique as the Maitree screenshot above: repeated classes for specificity
   so this reliably beats the general .is-split media sizing rule). */
.feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--sticker{
  max-width:240px;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.feature-editorial-media--sticker img{
  border-radius:0;
}
.feature-editorial-item.is-split.reverse .feature-editorial-media.feature-editorial-media--sticker{
  margin-left:0;
  margin-right:auto;
}
@media (max-width:800px){
  .feature-editorial-item.is-split .feature-editorial-media.feature-editorial-media--sticker{
    max-width:180px;
  }
}

/* Tighter row-to-row rhythm for the sticker rows specifically, without
   touching --section-gap (Multiply India's editorial rows use the same
   .feature-editorial class and still need the default spacing). */
.feature-editorial.feature-editorial--compact{ gap:14px; }

/* Two extra full-size screenshots shown below the sticker rows. */
.schola-shot-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--grid-gap);
  margin-top:var(--section-gap);
}
@media (max-width:700px){
  .schola-shot-pair{ grid-template-columns:1fr; }
}

.shot-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); margin-top:var(--subsection-gap); }
@media (max-width:900px){ .shot-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .shot-row{ grid-template-columns:1fr; } }

.partner-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); }
@media (max-width:640px){ .partner-cols{ grid-template-columns:1fr; } }
.partner-col h4{ text-transform:uppercase; letter-spacing:1px; font-size:0.78rem; opacity:0.6; margin:0 0 16px; font-weight:700; }
.partner-item{ margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--grey); }
.partner-item:last-child{ border-bottom:none; }
.partner-item a.p-name{ font-weight:700; color:var(--black); display:inline-block; margin-bottom:4px; }
.partner-item a.p-name:hover{ color:var(--gold-dark); }
.partner-item p{ font-size:0.85rem; opacity:0.75; margin:0; }
/* Partner logo grid — grouped rows of plain partner logos with captions (matches Public Sector / NGO reference layout) */
.partner-logos{ margin-top:12px; }
.logo-group{ margin-bottom:56px; text-align:center; }
.logo-group:last-child{ margin-bottom:0; }
.logo-group-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--black); margin:0; display:inline-block; position:relative;
}
.logo-group-title::after{
  content:''; display:block; width:64px; height:3px; background:var(--gold-dark);
  border-radius:2px; margin:12px auto 0;
}
.logo-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px 52px; margin-top:32px; }
.logo-item{ display:flex; flex-direction:column; align-items:center; width:130px; }
.logo-item img{ max-width:100%; max-height:80px; width:auto; object-fit:contain; margin-bottom:14px; }
.logo-item span{ font-size:0.82rem; line-height:1.3; color:var(--charcoal); text-align:center; }
.logo-item.placeholder img{ opacity:0.25; }
.logo-item.placeholder span{ opacity:0.5; font-style:italic; }
@media (max-width:600px){
  .logo-row{ gap:26px 30px; margin-top:26px; }
  .logo-item{ width:100px; }
  .logo-item img{ max-height:60px; margin-bottom:10px; }
}
.partner-country-block{ margin-bottom:0; }
/* Partner logo grid — grouped rows of partner logos with captions */
.partner-logos{ margin-top:8px; }
.logo-group{ margin-bottom:36px; }
.logo-group:last-child{ margin-bottom:0; }
.logo-group-title{
  text-transform:uppercase; letter-spacing:1px; font-size:0.78rem; font-weight:700;
  color:var(--black); margin:0 0 18px; padding-bottom:8px;
  border-bottom:2px solid var(--gold-dark); display:inline-block;
}
.logo-row{ display:flex; flex-wrap:wrap; gap:28px 32px; }
.logo-item{ display:flex; flex-direction:column; align-items:center; width:110px; text-align:center; }
.logo-item .logo-badge{
  width:88px; height:88px; border-radius:50%; background:#fff; border:1px solid var(--grey);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); overflow:hidden; margin-bottom:10px;
}
.logo-item .logo-badge img{ max-width:70%; max-height:70%; object-fit:contain; }
.logo-item span{ font-size:0.78rem; line-height:1.3; color:var(--charcoal); }
.logo-item.placeholder .logo-badge{ background:var(--grey); border-style:dashed; }
.logo-item.placeholder span{ opacity:0.5; font-style:italic; }
@media (max-width:600px){
  .logo-row{ gap:20px 24px; justify-content:center; }
  .logo-item{ width:90px; }
  .logo-item .logo-badge{ width:72px; height:72px; }
}
.partner-country-block h3{ font-size:0.85rem; text-transform:uppercase; letter-spacing:2px; opacity:0.5; margin:0 0 24px; font-family:var(--serif); font-weight:700; }

.close-cta{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:20px; }

/* Programme-detail testimonial cards (separate from the homepage carousel) */
.testi-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--grid-gap); margin-top:var(--subsection-gap);
}
.testi-grid .testi-card{
  display:grid; grid-template-columns:72px minmax(0, 1fr); gap:18px; align-items:center;
  width:auto; padding:24px; background:var(--white); border:1px solid var(--grey); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); text-align:left;
}
.testi-grid .ph-image.avatar{ width:72px; height:72px; padding:8px; border-radius:50%; }
.testi-grid .testi-card-body, .testi-grid blockquote{ min-width:0; }
.testi-grid blockquote{ margin:0; color:var(--charcoal); font-size:0.92rem; line-height:1.65; }
@media (max-width:980px){ .testi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:680px){
  .testi-grid{ grid-template-columns:1fr; }
  .testi-grid .testi-card{ grid-template-columns:62px minmax(0, 1fr); padding:20px; }
  .testi-grid .ph-image.avatar{ width:62px; height:62px; }
  .close-cta .btn{ flex:1 1 100%; }
}

@media (max-width:520px){
  .feature-row{ gap:12px; padding:20px; }
  .feature-num{ flex-basis:36px; width:36px; height:36px; font-size:0.9rem; }
}

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--grid-gap); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; margin-bottom:8px; color:var(--black); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--grey); border-radius:8px; font-family:var(--sans);
  font-size:0.95rem; background:#fff; color:var(--black); transition:border-color 0.2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold-dark); }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:0.8rem; opacity:0.6; margin-top:14px; }
.form-success{
  display:none; background:var(--grey); border-left:4px solid var(--gold); padding:20px 24px; border-radius:8px;
  margin-bottom:24px; font-weight:600;
}
.form-success.show{ display:block; }
.form-error{
  display:none; background:#fff4f2; border-left:4px solid #C0392B; padding:20px 24px; border-radius:8px;
  margin-bottom:24px; font-weight:600;
}
.form-error.show{ display:block; }
.application-form-wrap{ max-width:760px; margin:0 auto; }
.form-field input[type="file"]{ padding:10px; }
.form-field input[type="file"]::file-selector-button{
  margin-right:12px; padding:9px 14px; border:0; border-radius:6px; background:var(--black); color:#fff;
  font:600 0.82rem var(--sans); cursor:pointer;
}
.form-field.form-consent{
  display:grid; grid-template-columns:20px minmax(0, 1fr); gap:12px; align-items:start; margin:28px 0;
}
.form-field.form-consent input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--gold-dark); }
.form-field.form-consent label{
  margin:0; font-size:0.9rem; line-height:1.55; letter-spacing:0; text-transform:none; font-weight:500;
}
.offices-panel{ background:var(--grey); border-radius:var(--radius); padding:34px; }
.offices-panel h3{ font-size:1.1rem; margin:0 0 8px; }
.offices-panel .office{ margin-bottom:24px; }
.offices-panel .office:last-of-type{ margin-bottom:24px; }
.offices-panel address{ font-style:normal; opacity:0.85; line-height:1.7; font-size:0.92rem; }
.offices-panel .email-line{ margin-top:24px; padding-top:20px; border-top:1px solid rgba(14,14,13,0.1); }
.careers-block{ background:var(--black); color:#fff; border-radius:var(--radius); padding:40px; margin-top:0; text-align:center; }
.careers-block h2{ color:#fff; }
.careers-block p{ opacity:0.85; line-height:1.8; margin:0 auto 16px; max-width:800px; }
.careers-block .btn-row{ justify-content:center; }
@media (max-width:520px){
  .form-field input, .form-field select, .form-field textarea{ font-size:1rem; }
  .offices-panel{ padding:24px; }
  .careers-block{ padding:28px 24px; }
}

/* ---------- Note callouts (to confirm / placeholder flags) ---------- */
.note-flag{
  display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.6px; color:#C0392B; margin-top:8px;
}

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* ── Programme card — logo image replaces text name ── */
.prog-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  margin: 0 0 6px;
}

.prog-logo {
  max-height: 52px;
  max-width: 150px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Schola is a wide wordmark — let it breathe horizontally on cards */
.prog-card.card-schola .prog-logo {
  max-height: 72px;
  max-width: 200px;
}
@media (max-width:640px){
  .prog-logo { max-height: 40px; max-width: 130px; }
}

/* ── Stat cards: coloured glow shadow matching each programme ── */
.stat-grid > .stat-schola.stat-card {
  box-shadow: 0 4px 20px rgba(53, 176, 250, 0.25);
}
.stat-grid > .stat-schola.stat-card:hover {
  box-shadow: 0 10px 32px rgba(53, 176, 250, 0.45);
  transform: translateY(-4px);
}

.stat-grid > .stat-multiply.stat-card {
  box-shadow: 0 4px 20px rgba(153, 51, 204, 0.25);
}
.stat-grid > .stat-multiply.stat-card:hover {
  box-shadow: 0 10px 32px rgba(153, 51, 204, 0.45);
  transform: translateY(-4px);
}

.stat-grid > .stat-muara.stat-card {
  box-shadow: 0 4px 20px rgba(255, 64, 130, 0.25);
}
.stat-grid > .stat-muara.stat-card:hover {
  box-shadow: 0 10px 32px rgba(255, 64, 130, 0.45);
  transform: translateY(-4px);
}
/* ── Partners / Contact / Work-With-Us hero — visual only, no size changes ── */

/* Dark background + dot grid texture */
.partners-hero,
.contact-hero,
.workwithus-hero {
  background-color: var(--black);
  background-image:
    radial-gradient(ellipse 55% 75% at 0% 100%, rgba(246,210,77,0.07) 0%, transparent 65%),
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url(../img/PARTNERS.png);
  background-position: center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, cover, cover;
  border-bottom: 3px solid var(--gold);
  color: #fff;
}
@media (max-width: 640px) {
  .partners-hero {
    background-position: center center, center center, 75% 30%;
    background-size: auto, 26px 26px, cover;
  }
}
/* Contact hero — own background image */
.contact-hero {
  background-image:
    radial-gradient(ellipse 55% 75% at 0% 100%, rgba(246,210,77,0.07) 0%, transparent 65%),
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url(../img/CONTACT\ US.png);
}
@media (max-width: 640px) {
  .contact-hero {
    background-position: center center, center center, 70% center;
  }
}
/* Work With Us hero — own background image */
.workwithus-hero {
  background-image:
    radial-gradient(ellipse 55% 75% at 0% 100%, rgba(246,210,77,0.07) 0%, transparent 65%),
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url(../img/WORK\ WITH\ US.png);
}
@media (max-width: 640px) {
  .workwithus-hero {
    background-position: center center, center center, 20% center;
  }
}
/* Gold eyebrow line + text */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 18px;
  opacity: 0;
  animation: heroFadeIn 0.7s ease 0.2s both;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}

/* Two-column layout inside the partners hero */
.partners-hero { position: relative; }
.partners-hero-inner {
  display: block;
}
.partners-hero-text {
  flex: 1;
  min-width: 0;
}
.partners-hero .lede {
  max-width: 540px;
}

/* Large heading colour */
.partners-hero h1,
.contact-hero h1,
.workwithus-hero h1 {
  color: #fff;
}

/* Ghost "14+" decorative number — pinned to top-right of hero */
.partners-hero-deco {
  position: absolute;
  top: calc(var(--header-h) + 16px);
  right: 32px;
  font-size: clamp(4.5rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -4px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(246, 210, 77, 0.25);
  user-select: none;
  white-space: nowrap;
  text-align: right;
  opacity: 0;
  animation: heroFadeIn 1s ease 0.5s both;
}
.partners-hero-deco span {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 2px;
  font-weight: 600;
  -webkit-text-stroke: 0;
  color: rgba(246, 210, 77, 0.35);
  text-align: right;
  margin-top: 6px;
}

@media (max-width: 760px) {
  .partners-hero-deco {
    top: auto;
    bottom: 60px;
    right: 33px;
    font-size: clamp(2.8rem, 12vw, 3.8rem);
    letter-spacing: -2px;
    -webkit-text-stroke: 1px rgba(246, 210, 77, 0.28);
  }
  .partners-hero-deco span {
    font-size: 0.6rem;
    letter-spacing: 1px;
    margin-top: 4px;
  }
}
/* ---------- Programmes hero ---------- */
.programmes-hero {
  background-color: var(--black);
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url(../img/PROGRAMMES.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 3px solid var(--gold);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.programmes-hero h1,
.programmes-hero p { color: #fff; }
@media (max-width:680px){
  .programmes-hero{
    background-position: 75% center;
    padding-top: 40px;
    padding-bottom: 120px;
  }
}

/* ---------- Programme cards — logo + background watermark ---------- */
.pi-card { position: relative; overflow: hidden; }

.pi-card-logo {
  display: block;
  height: 50px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 16px;
}

.pi-card-bg-logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
  mask-image: linear-gradient(to right, transparent 0%, black 40%);
  z-index: 0;
}

@media (max-width: 760px) {
  .pi-card-bg-logo {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 45%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
  }
}

.pi-card > div,
.pi-card > .pi-links { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .pi-card-logo {
    height: 62px;
    display: block;
    margin: 0 auto 20px;
    object-position: center;
  }
  .pi-card.accent-schola .pi-card-logo,
  .pi-card.accent-muara .pi-card-logo {
    height: 80px;
  }
}
/* Homepage stat grid — 3 col desktop, 1 col mobile */
.stat-grid-home {
  grid-template-columns: repeat(3, 1fr);
  max-width: 700px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .stat-grid-home {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ============================================================
   MEDIA COVERAGE CARDS — "As seen on" carousel
   ============================================================ */

.media-testi-wrap{ display:flex; align-items:center; gap:16px; }
.media-testi-wrap .media-carousel-wrap{ flex:1 1 0; min-width:0; overflow:hidden; }

.media-card-grid{
  display:flex;
  gap:var(--grid-gap);
  transition:transform 0.6s ease;
  padding:8px 2px 16px;
}

.media-card{
  flex:0 0 calc(33.333% - 16px);
  display:flex; flex-direction:column;
  border-radius:var(--radius);
  border:1.5px solid rgba(14,14,13,0.08);
  background:#fff;
  overflow:hidden;
  text-decoration:none;
  color:var(--black);
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow:var(--shadow);
}
.media-card:hover{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:var(--shadow-hover);
}

.media-card-thumb{
  position:relative;
  width:100%; aspect-ratio:16/9;
  overflow:hidden;
  background:#1a1a1a;
  display:flex; align-items:center; justify-content:center;
}
.media-card-thumb .media-thumb-bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0.4;
  transition:opacity 0.3s ease, transform 0.4s ease;
}
.media-card:hover .media-thumb-bg{
  opacity:0.5;
  transform:scale(1.04);
}
.media-card-thumb img.media-center-logo{
  position:relative; z-index:1;
  max-width:160px; max-height:64px; width:auto; height:auto;
  object-fit:contain; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.65));
}
.media-card-thumb img.media-center-logo.media-logo-white-bg{
  background:#fff;
  border-radius:8px;
  padding:8px 18px;
}
.media-card-thumb::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;
}
.media-card[data-media-prog="muara"]    .media-card-thumb::after{ background:var(--muara); }
.media-card[data-media-prog="schola"]   .media-card-thumb::after{ background:var(--schola); }
.media-card[data-media-prog="multiply"] .media-card-thumb::after{ background:var(--multiply); }

.media-card-body{
  flex:1; padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.media-date{
  font-size:0.72rem; color:var(--charcoal); font-weight:500; letter-spacing:0.02em;
}
.media-headline{
  font-size:0.94rem; font-weight:700; line-height:1.38; color:var(--black);
  margin:0; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  transition:color 0.2s ease;
}
.media-card:hover .media-headline{ color:var(--gold-dark); }
.media-excerpt{
  font-size:0.81rem; color:var(--charcoal); line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.media-card-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:10px;
}
.media-prog-tag{
  font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; color:#fff; white-space:nowrap;
}
.media-tag-muara   { background:var(--muara); }
.media-tag-schola  { background:var(--schola); }
.media-tag-multiply{ background:var(--multiply); }

.media-read-more{
  font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--charcoal);
  display:inline-flex; align-items:center; gap:4px;
  transition:color 0.2s ease, gap 0.2s ease; white-space:nowrap;
}
.media-read-more .arrow{
  display:inline-block; font-size:1rem; line-height:1;
  transition:transform 0.2s ease;
}
.media-card:hover .media-read-more{ color:var(--black); gap:8px; }
.media-card:hover .media-read-more .arrow{ transform:translateX(3px); }

.media-watch-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--black); color:#fff;
  padding:4px 12px; border-radius:999px; white-space:nowrap;
  transition:background 0.2s ease, transform 0.2s ease;
}
.media-watch-btn .play-icon{
  font-size:0.75rem; line-height:1;
}
.media-card:hover .media-watch-btn{
  background:#cc0000;
  transform:scale(1.04);
}

@media (max-width:900px){
  .media-card{ flex-basis:calc(50% - 12px); }
}
@media (max-width:520px){
  .media-card{ flex-basis:85%; }
}

/* Cumulative note badge */
.reach-note {
  display: inline-block;
  background: var(--grey);
  border-radius: 20px;
  padding: 4px 14px;        /* was 6px 20px */
  font-size: 0.65rem;       /* was 0.78rem — adjust this to taste */
  letter-spacing: 0.06em;
  color: var(--charcoal);
  font-weight: 500;
}
.reach-note .reach-star {
  color: var(--gold-dark);
  font-weight: 700;
}

/* ── Explore or collaborate · video background ───────────────── */
.explore-section {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
}
.explore-section-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.explore-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: 1;
}
.explore-section .section-inner {
  position: relative;
  z-index: 2;
  padding-top: 130px;
  padding-bottom: 130px;
  width: 100%;
}
.explore-section .section-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--black);
  text-align: center;
  margin: 0;
}
.explore-section .section-title,
.explore-section .section-sub,
.explore-section .section-sub a,
.explore-section .section-sub a:hover {
  color: #fff;
}
.explore-section .section-sub {
  font-size: 1.1rem;
  margin-bottom: 36px;
}
.explore-section .close-cta {
  margin-top: 8px;
}

/* ── Explore section · mobile ───────────────── */
@media (max-width: 767px) {
  .explore-section {
    min-height: 380px;
  }
  .explore-section .section-inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .explore-section .section-title {
    font-size: 1.5rem;
  }
  .explore-section .section-sub {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }
}