@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@300;400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');

:root{
  --navy: #17152A;
  --navy-deep: #0D0C18;
  --purple: #6B2FA5;
  --violet-glow: #9B5FC7;
  --pink: #D85A98;
  --white: #F7F5FA;
  --gray: #ABA6BE;
  --gray-dim: #6E698A;
  --serif: 'Fraunces', 'Pretendard', serif;
  --grotesk: 'Space Grotesk', 'Pretendard', sans-serif;
  --body: 'Manrope', 'Pretendard', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--navy);
  color:var(--white);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pink);color:var(--navy-deep);}

.eyebrow{
  font-family:var(--grotesk);
  font-size:11.5px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--pink);
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:28px;height:1px;
  background:var(--pink);
  display:inline-block;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;}
h4{word-break:keep-all;overflow-wrap:break-word;}
p,li,span,a,button,label{word-break:keep-all;overflow-wrap:break-word;}

a{color:inherit;text-decoration:none;}
button{font-family:var(--grotesk);cursor:pointer;border:none;background:none;color:inherit;}

.container{max-width:1280px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.container{padding:0 24px;}}

/* ---------- Z-LINE SIGNATURE ---------- */
.z-divider{width:100%;padding:70px 0;display:flex;justify-content:center;}
.z-divider svg{width:120px;height:56px;overflow:visible;}
.z-divider path{
  fill:none;
  stroke:var(--pink);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,.84,.44,1);
}
.z-divider.in-view path{stroke-dashoffset:0;}

.z-watermark{
  position:absolute;
  pointer-events:none;
  opacity:0.07;
  z-index:0;
}
.z-watermark path{fill:none;stroke:url(#zGrad);stroke-width:2;}
.z-watermark-img{
  position:absolute;
  pointer-events:none;
  opacity:0.07;
  z-index:0;
  background-image:url('z-graphic.jpg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:screen;
}
section .container, section .hero-content, .hero-content{position:relative;z-index:2;}

/* ---------- HEADER ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:13px 0;
  transition:background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(15,13,26,0.92);
  backdrop-filter:blur(14px);
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;}
.logo{
  font-family:var(--grotesk);font-weight:700;font-size:20px;
  letter-spacing:0.14em;
}
.logo span{color:var(--pink);}
header .logo{
  position:relative;z-index:1001;
  display:inline-flex;align-items:center;
  padding:2px 0;
}
.logo-img{
  height:44px;width:auto;display:block;
  filter:
    drop-shadow(0 2px 10px rgba(0,0,0,0.35))
    brightness(1.04);
  transition:filter .4s ease, height .4s ease;
}
@media(max-width:900px){
  .logo-img{height:40px;}
}
@media(max-width:600px){
  .logo-img{height:36px;}
}
.footer-logo-img{
  height:30px;width:auto;display:block;margin-bottom:16px;
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,0.3))
    brightness(1.04);
}
.footer-hy-logo{display:block;width:135px;height:auto;margin:-16px 0 20px;}
@media(max-width:900px){.footer-hy-logo{width:115px;}}
@media(max-width:600px){.footer-hy-logo{width:100px;}}
nav.main-nav{display:flex;gap:34px;}
nav.main-nav a{
  font-family:var(--grotesk);font-size:12.5px;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--gray);
  position:relative;padding-bottom:4px;
  transition:color .3s ease;
}
nav.main-nav a:hover{color:var(--white);}
nav.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--pink);transition:width .3s ease;
}
nav.main-nav a:hover::after{width:100%;}
.lang-switch{
  display:flex;gap:10px;font-family:var(--grotesk);font-size:12px;
  letter-spacing:0.06em;color:var(--gray-dim);
}
.lang-switch button{
  font-family:var(--grotesk);font-size:12px;letter-spacing:0.06em;
  color:var(--gray-dim);background:none;border:none;padding:0;cursor:pointer;
  transition:color .3s ease;
}
.lang-switch button:hover{color:var(--white);}
.lang-switch button.active, .lang-switch a.active{color:var(--pink);}
.header-right{display:flex;align-items:center;gap:36px;}

/* ---------- HAMBURGER BUTTON ---------- */
.burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  background:none;border:none;padding:0;margin:0;
  cursor:pointer;position:relative;z-index:2001;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.burger span{
  display:block;width:22px;height:1.5px;background:var(--white);
  border-radius:2px;pointer-events:none;
  transition:transform .4s cubic-bezier(.16,.84,.44,1), opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(max-width:920px){
  nav.main-nav{display:none;}
  .header-right{gap:14px;}
  .header-right .lang-switch{display:none;}
  .burger{display:flex;}
}

/* ---------- MOBILE MENU DRAWER ---------- */
.mobile-menu-overlay{
  position:fixed;inset:0;z-index:1999;
  background:rgba(9,8,16,0.6);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease, visibility .45s ease;
}
.mobile-menu-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:2000;
  width:min(84vw,360px);
  background:linear-gradient(200deg, rgba(36,28,61,0.98) 0%, rgba(13,12,24,0.99) 60%);
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:-24px 0 60px rgba(0,0,0,0.5);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  pointer-events:none;
}
.mobile-menu.is-open{transform:translateX(0);pointer-events:auto;}
.mobile-menu-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px 22px 28px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.mobile-menu-close{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:20px;background:none;border:none;cursor:pointer;
  transition:color .3s ease, transform .3s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mobile-menu-close:hover{color:var(--pink);transform:rotate(90deg);}
.mobile-menu-links{
  display:flex;flex-direction:column;padding:18px 12px;flex:1;
}
.mobile-menu-links a{
  font-family:var(--grotesk);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);padding:16px 16px;border-radius:2px;
  display:flex;align-items:center;min-height:44px;
  position:relative;z-index:1;pointer-events:auto;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:color .3s ease, background .3s ease, padding-left .3s ease;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.mobile-menu-links a:last-child{border-bottom:none;}
.mobile-menu-links a:hover, .mobile-menu-links a:active{color:var(--white);background:rgba(216,90,152,0.07);padding-left:22px;}
.mobile-menu-links a.active{color:var(--pink);}
.mobile-menu-lang{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:26px 22px 32px;margin-top:auto;
  border-top:1px solid rgba(255,255,255,0.08);
  font-family:var(--grotesk);
}
.mobile-menu-lang button{
  font-size:13px;letter-spacing:.08em;color:var(--gray-dim);
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  transition:color .3s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mobile-menu-lang button.active{color:var(--pink);}
.mobile-menu-lang span{color:var(--gray-dim);opacity:.4;}

body.menu-open{overflow:hidden;}

@media(min-width:921px){
  .mobile-menu, .mobile-menu-overlay{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
@media(max-width:768px){
  /* Mobile browsers (iOS Safari especially) resize the visual viewport as the
     address bar shows/hides, which makes a fixed height:100vh + overflow:hidden
     hero miscalculate against actual content height and can clip everything
     that follows. Let the hero size to its content on mobile instead of
     locking to the viewport, using the modern viewport units as a safe
     minimum so it still reads as a full-height hero. */
  .hero{
    height:auto;
    min-height:100svh;
    min-height:100dvh;
    overflow:visible;
  }
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero-video-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(13,12,24,0.55) 0%, rgba(13,12,24,0.6) 45%, rgba(13,12,24,0.65) 100%);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.4), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.25), transparent 65%),
    url('ONG-146.jpg');
  background-size:cover;
  background-position:center 22%;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,12,24,0.15) 0%, rgba(13,12,24,0.55) 60%, rgba(13,12,24,0.96) 100%);
}
.hero-grain{
  position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:3px 3px;
}
.hero-content{
  position:relative;z-index:2;
  padding:0 48px 100px;
  max-width:1280px;margin:0 auto;width:100%;
}
@media(max-width:768px){
  /* The hero is a flex column with align-items:flex-end; on desktop the
     fixed 100vh height leaves empty space above the content so it settles
     near the bottom, clear of the header. On mobile the section now sizes
     to its content (see the .hero rule above), so without explicit top
     spacing hero-content starts right at the top of the section and
     collides with the fixed header/logo/hamburger menu. Push it down with
     padding-top instead, roughly header height + 70-100px of breathing
     room, so label/heading/description/buttons/scroll-indicator all move
     down together as one block. */
  .hero-content{
    padding-top:146px;
  }
}
@media(max-width:480px){
  /* Slightly smaller header (logo drops to 36px, see header .logo-img
     rule) on very small phones (iPhone SE, compact Android widths), so a
     touch less top spacing still keeps 70-100px clearance below it. */
  .hero-content{
    padding-top:132px;
  }
}
.hero h1{
  font-size:clamp(40px,6.4vw,92px);
  line-height:0.98;
  max-width:14ch;
  margin:26px 0 26px;
}
.hero h1 em{font-style:italic;color:var(--pink);font-weight:500;}
.hero p.sub{
  max-width:480px;font-size:16px;line-height:1.7;color:var(--gray);
  margin-bottom:40px;font-weight:300;
}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  font-family:var(--grotesk);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 30px;border-radius:2px;
  transition:all .35s cubic-bezier(.16,.84,.44,1);
  display:inline-flex;align-items:center;gap:10px;
}
.btn-solid{background:var(--pink);color:var(--navy-deep);font-weight:600;}
.btn-solid:hover{background:var(--white);box-shadow:0 0 34px rgba(216,90,152,0.5);}
.btn-outline{border:1px solid rgba(255,255,255,0.28);color:var(--white);}
.btn-outline:hover{border-color:var(--pink);color:var(--pink);}

.scroll-indicator{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--grotesk);font-size:10px;letter-spacing:.2em;color:var(--gray-dim);
}
.scroll-line{width:1px;height:38px;background:linear-gradient(var(--pink),transparent);
  animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.12s;}
.reveal-delay-2{transition-delay:.24s;}

/* ---------- SECTION SHARED ---------- */
section{position:relative;padding:130px 0;}
.section-label{font-family:var(--grotesk);font-size:12px;color:var(--gray-dim);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;}
h2.section-title{font-size:clamp(30px,3.6vw,50px);margin-bottom:28px;}
h2.section-title:empty{display:none;margin:0;}
#partners .section-label{font-size:13.5px;}

/* photo credit convention used throughout for placeholder art panels */
.photo-credit{
  font-family:var(--grotesk);font-size:10.5px;letter-spacing:.06em;color:var(--gray-dim);
  margin-top:10px;font-style:italic;
}

/* ---------- WHO WE ARE ---------- */
.who-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:56px;align-items:stretch;}
@media(max-width:900px){.who-grid{grid-template-columns:1fr;gap:44px;}}
.who-image{
  aspect-ratio:4/5;min-height:100%;border-radius:2px;position:relative;overflow:hidden;
  background:
    linear-gradient(155deg, rgba(107,47,165,0.35), rgba(216,90,152,0.12) 55%, rgba(20,18,35,0.55) 100%),
    url('office-lobby.jpg');
  background-size:cover, contain;
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
}
@media(max-width:900px){.who-image{aspect-ratio:4/5;min-height:0;}}
.who-image::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:3px 3px;opacity:.35;
}
.who-image .z-mark{position:absolute;bottom:26px;left:26px;width:44px;height:44px;opacity:.55;}
.who-copy p{color:var(--gray);line-height:1.85;font-weight:300;font-size:15.5px;margin-bottom:26px;}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:34px 0 38px;}
@media(max-width:560px){.pillars{grid-template-columns:1fr;gap:22px;}}
.pillar{border-left:1px solid rgba(255,255,255,0.12);padding-left:18px;}
.pillar h4{font-family:var(--grotesk);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:6px;}
.pillar p{font-size:13.5px;color:var(--gray);line-height:1.6;margin:0;}
.link-arrow{font-family:var(--grotesk);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--white);border-bottom:1px solid var(--pink);padding-bottom:4px;display:inline-flex;gap:10px;align-items:center;}

/* ---------- MISSION & VISION ---------- */
.mv-section{padding-top:0;}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;}
@media(max-width:900px){.mv-grid{grid-template-columns:1fr;}}
.mv-card{background:var(--navy);padding:56px 48px;position:relative;}
.mv-card.vision-card{background:linear-gradient(200deg,#241c3d,var(--navy) 70%);}
.mv-card.mission-card{background:linear-gradient(200deg,#3a1f38,var(--navy) 70%);}
.mv-num{font-family:var(--grotesk);font-size:11px;letter-spacing:.14em;color:var(--pink);text-transform:uppercase;margin-bottom:18px;display:block;}
.mv-card h3{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,28px);margin-bottom:20px;line-height:1.35;color:var(--white);}
.mv-card p{color:var(--gray);font-size:14.5px;line-height:1.85;font-weight:300;}

/* ---------- BUSINESS CARDS ---------- */
#business{
  background:
    linear-gradient(180deg, rgba(13,12,24,0.46) 0%, rgba(13,12,24,0.58) 100%),
    url('office-lounge-bg.jpg');
  background-size:cover;
  background-position:center 58%;
  background-attachment:scroll;
}
.business-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media(max-width:900px){.business-grid{grid-template-columns:1fr;}}
.biz-card{
  position:relative;border-radius:2px;overflow:hidden;min-height:560px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:44px;
  transition:transform .6s cubic-bezier(.16,.84,.44,1);
  border:1px solid rgba(255,255,255,0.08);
}
.biz-card:hover{transform:translateY(-8px);}
.biz-card.academy{background:linear-gradient(200deg, rgba(42,31,74,0.55) 0%, rgba(23,21,42,0.75) 55%, rgba(13,12,24,0.96) 100%), url('academy-building.jpg');background-size:cover;background-position:center;}
.biz-card.ent{background:linear-gradient(200deg, rgba(74,31,60,0.5) 0%, rgba(23,21,42,0.75) 55%, rgba(13,12,24,0.96) 100%), url('ONG-275.jpg');background-size:cover;background-position:center 30%;}
.biz-card::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:3px 3px;
}
.biz-card::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at 50% 100%, rgba(216,90,152,0.25), transparent 65%);
}
.biz-card:hover::after{opacity:1;}
.biz-num{font-family:var(--grotesk);font-size:12px;color:var(--gray-dim);letter-spacing:.1em;position:relative;z-index:2;margin-bottom:14px;}
.biz-card h3{font-size:clamp(26px,2.6vw,36px);position:relative;z-index:2;margin-bottom:16px;}
.biz-card ul{list-style:none;position:relative;z-index:2;margin-bottom:26px;}
.biz-card li{font-size:13.5px;color:var(--gray);padding:6px 0;border-top:1px solid rgba(255,255,255,0.07);font-weight:300;}
.biz-card li:first-child{border-top:none;}

/* ---------- PROJECT 2: LARGE CARD ---------- */
.project-lg{
  border-radius:2px;overflow:hidden;position:relative;min-height:480px;
  display:flex;align-items:flex-end;
  background:
    linear-gradient(200deg, rgba(20,17,36,0.2), rgba(13,12,24,0.92) 75%),
    linear-gradient(135deg,#241c3d 0%,#3a2158 45%,#4a2a4a 100%);
}
.project-lg .feature-content{padding:52px;}
.project-lg h3{font-size:clamp(26px,3vw,42px);max-width:16ch;margin-bottom:18px;}
.project-lg p.overview{max-width:600px;}
.project-lg .photo-credit{margin-top:0;margin-bottom:22px;color:var(--gray);opacity:.75;}

/* ---------- PROJECT 3: TRIO STORYTELLING ---------- */
.project-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.project-trio{grid-template-columns:1fr;}}
#project-education .project-trio{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){#project-education .project-trio{grid-template-columns:1fr;}}

/* ---------- Academy #ecosystem: 6-card grid, fully responsive ---------- */
#ecosystem .project-trio{grid-template-columns:repeat(3,1fr);}
@media(max-width:1023px){
  #ecosystem .project-trio{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:767px){
  #ecosystem .project-trio{grid-template-columns:1fr;gap:28px;}
  #ecosystem .trio-card{width:100%;max-width:420px;margin:0 auto;}
  #ecosystem h2.section-title{font-size:40px;}
  #ecosystem .trio-card h4{font-size:28px;line-height:1.3;}
  #ecosystem .trio-card p{font-size:17px;line-height:1.7;}
}
#project-education .trio-num{min-height:24px;}
#project-education .trio-card:nth-child(4) .trio-num{letter-spacing:.05em;}
.trio-card{
  border:1px solid rgba(255,255,255,0.09);border-radius:2px;padding:38px 32px;
  background:linear-gradient(200deg, rgba(255,255,255,0.02), transparent 60%);
  transition:border-color .3s ease, transform .5s cubic-bezier(.16,.84,.44,1);
}
.trio-card:hover{border-color:rgba(216,90,152,0.35);transform:translateY(-6px);}
.trio-num{font-family:var(--grotesk);font-size:11px;letter-spacing:.14em;color:var(--pink);text-transform:uppercase;display:block;margin-bottom:20px;}
.trio-card h4{font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:14px;line-height:1.35;}
.trio-card p{font-size:13.5px;color:var(--gray);line-height:1.8;font-weight:300;}
.trio-thumb{
  display:block;width:100%;height:200px;margin-top:24px;
  border-radius:12px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  cursor:pointer;
}
.trio-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease, filter .3s ease;}
.trio-thumb-zoom{
  position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(13,12,24,0.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .trio-thumb:hover img, .trio-thumb:focus-visible img{transform:scale(1.03);filter:brightness(1.05);}
  .trio-thumb:hover .trio-thumb-zoom, .trio-thumb:focus-visible .trio-thumb-zoom{opacity:1;}
  .trio-thumb:hover, .trio-thumb:focus-visible{box-shadow:0 8px 24px rgba(0,0,0,0.28), 0 0 20px rgba(216,90,152,0.25);outline:none;}
}
@media(max-width:600px){.trio-thumb{height:190px;}}

/* ---------- PROJECT 4: EDITORIAL TIMELINE ---------- */
.project-editorial{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;}
@media(max-width:900px){.project-editorial{grid-template-columns:1fr;gap:40px;}}
.project-editorial.wide-hero{grid-template-columns:1.85fr 1fr;}
@media(max-width:900px){.project-editorial.wide-hero{grid-template-columns:1fr;}}
.editorial-image{aspect-ratio:4/3.4;border-radius:2px;overflow:hidden;position:relative;}
.editorial-image img{width:100%;height:100%;object-fit:cover;display:block;}
.editorial-image.wide{aspect-ratio:16/10;}
.editorial-image.wide img{object-position:center 40%;}

/* ---------- BRANCH CERTIFICATE THUMBNAIL + LIGHTBOX ---------- */
.gov-media-col{display:flex;flex-direction:column;gap:24px;}
.cert-thumb-wrap{text-align:center;}
.cert-thumb{
  display:inline-block;width:240px;max-width:100%;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.cert-thumb img{width:100%;height:auto;aspect-ratio:1811/2560;object-fit:cover;display:block;}
.cert-thumb:hover, .cert-thumb:focus-visible{
  transform:scale(1.03);
  box-shadow:0 10px 28px rgba(0,0,0,0.35), 0 0 22px rgba(216,90,152,0.32);
  outline:none;
}
.cert-caption{
  margin-top:10px;font-family:var(--grotesk);font-size:11px;
  letter-spacing:.03em;color:var(--gray-dim);line-height:1.6;
}
@media(max-width:600px){.cert-thumb{width:200px;}}

.cert-modal{
  position:fixed;inset:0;z-index:5000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.85);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease;
  padding:24px;
}
.cert-modal.open{opacity:1;visibility:visible;pointer-events:auto;}
.cert-modal img{
  max-width:85vw;max-height:85vh;width:auto;height:auto;
  object-fit:contain;border-radius:4px;
  transform:scale(.92);
  transition:transform .28s ease-out;
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
}
@media(max-width:900px){.cert-modal img{max-width:90vw;max-height:90vh;}}
@media(max-width:600px){.cert-modal img{max-width:95vw;max-height:95vh;}}
.cert-modal.open img{transform:scale(1);}
.cert-modal-close{
  position:absolute;top:20px;right:24px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;color:#fff;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;cursor:pointer;
  transition:background .2s ease;
}
.cert-modal-close:hover{background:rgba(255,255,255,0.2);}
.timeline-list{position:relative;padding-left:26px;}
.timeline-list::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--purple),var(--pink));}
.timeline-item{position:relative;padding-bottom:30px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:'';position:absolute;left:-26px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(216,90,152,0.15);}
.timeline-item h4{font-family:var(--grotesk);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);margin-bottom:6px;}
.timeline-item p{font-size:13.5px;color:var(--gray);font-weight:300;line-height:1.7;}



/* ---------- FEATURED PROJECT ---------- */
.feature-wrap{
  border-radius:2px;overflow:hidden;position:relative;min-height:800px;
  display:flex;align-items:flex-end;
  background:
    linear-gradient(190deg, rgba(20,17,36,0.35), rgba(13,12,24,0.94) 78%),
    url('ONG-7.jpg');
  background-size:cover;background-position:center;
}
@media(max-width:700px){.feature-wrap{min-height:520px;}}
/* On mobile, .feature-wrap's height is driven by stacked text content rather than
   the 800px min-height, which can make the box far taller/narrower than the
   1600x1067 source photo's aspect ratio. background-size:cover then reveals only
   a thin vertical sliver of the image around its horizontal center (50%), which
   sits in the empty gap between this photo's subjects and crops faces at the
   frame edge. Shifting the focal point to ~40% (where the portrait subject sits)
   keeps the subject fully in frame without changing size, layout, or zoom level.
   This only targets the bare .feature-wrap (index.html); .feature-wrap.ent-bg and
   .feature-wrap.timeline-bg keep their own background rules via higher specificity. */
@media(max-width:480px){
  .feature-wrap{background-position:40% center;}
}
.feature-content{position:relative;z-index:2;padding:52px;width:100%;}
.feature-eyebrow{font-family:var(--grotesk);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:14px;}
.feature-content h3{font-size:clamp(26px,3vw,42px);max-width:18ch;margin-bottom:18px;}
.feature-content p.overview{max-width:560px;color:var(--gray);font-size:14.5px;line-height:1.85;font-weight:300;margin-bottom:30px;}
.stat-row{display:flex;gap:48px;margin:0 0 34px;flex-wrap:wrap;}
.stat{}
.stat .num{font-family:var(--serif);font-size:30px;color:var(--pink);}
.stat .lbl{font-family:var(--grotesk);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);}
.feature-highlights{display:flex;gap:14px;margin-bottom:34px;flex-wrap:wrap;}
.fh-item{width:110px;height:140px;border-radius:2px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,0.15);}
@media(max-width:600px){.fh-item{width:80px;height:104px;}}

/* ---------- VISION ---------- */
.vision{text-align:center;padding:170px 0;}
.vision h2{font-size:clamp(30px,4.4vw,58px);line-height:1.25;max-width:16ch;margin:0 auto;font-style:italic;}
.vision .z-watermark-img{top:50%;left:50%;transform:translate(-50%,-50%);width:520px;height:320px;}

/* ---------- GALLERY ---------- */
#gallery{
  background:
    linear-gradient(180deg, rgba(13,12,24,0.32) 0%, rgba(13,12,24,0.5) 100%),
    url('ONG-275.jpg');
  background-size:cover;
  background-position:center 25%;
}
.masonry{
  column-count:3;column-gap:20px;
}
@media(max-width:900px){.masonry{column-count:2;}}
@media(max-width:560px){.masonry{column-count:1;}}
.masonry-item{
  break-inside:avoid;margin-bottom:20px;border-radius:2px;overflow:hidden;position:relative;
}
.masonry-item .frame{
  width:100%;display:flex;align-items:flex-end;padding:18px;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:3px 3px;
}
.masonry-item .tag{font-family:var(--grotesk);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--white);position:relative;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,0.5);}
.masonry-item{background-size:cover;background-position:center;}
.masonry-item .frame{background:linear-gradient(0deg, rgba(13,12,24,0.75), transparent 55%);height:100%;}
.m1{height:340px;background-image:url('ONG-146.jpg');}
.m2{height:220px;background-image:url('academy-building.jpg');}
.m3{height:280px;background-image:url('ONG-275.jpg');}
.m4{height:200px;background-image:url('ONG-7.jpg');}
.m5{height:300px;background-image:url('ONG-124.jpg');}
.m6{height:240px;background-image:url('office-lobby.jpg');}
.m7{height:260px;background-image:url('ONG-298.jpg');}
.m8{height:220px;background-image:url('ONG-353.jpg');}

/* ---------- PARTNERS ---------- */
.partner-group{margin-bottom:44px;}
.partner-group h4{font-family:var(--grotesk);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:20px;}
.partner-row{display:flex;flex-wrap:wrap;gap:14px;}
.partner-chip{
  font-family:var(--grotesk);font-size:12.5px;letter-spacing:.03em;color:var(--gray);
  border:1px solid rgba(255,255,255,0.1);padding:12px 20px;border-radius:2px;
  transition:all .3s ease;
}
.partner-chip:hover{color:var(--white);border-color:var(--pink);background:rgba(216,90,152,0.06);}

/* ---------- NEWS ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:900px){.news-grid{grid-template-columns:1fr;}}
.news-card{border:1px solid rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;transition:border-color .3s ease;}
.news-card:hover{border-color:rgba(216,90,152,0.4);}
.news-thumb{height:180px;background:linear-gradient(200deg,#2c1f4a,#17152A);position:relative;}
.news-thumb::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);background-size:3px 3px;}
.news-body{padding:26px;}
.news-cat{font-family:var(--grotesk);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;}
.news-body h4{font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:10px;line-height:1.3;}
.news-date{font-family:var(--grotesk);font-size:11px;color:var(--gray-dim);}

/* ---------- FINAL CTA ---------- */
.final-cta{
  text-align:center;padding:150px 0;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 100%, rgba(107,47,165,0.45), transparent 70%);
}
.final-cta h2{font-size:clamp(30px,4.4vw,54px);max-width:16ch;margin:0 auto 40px;}
.final-cta .cta-row{justify-content:center;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.contact-item{display:flex;gap:18px;padding:24px 0;border-top:1px solid rgba(255,255,255,0.08);}
.contact-item > div:last-child{min-width:0;}
.contact-item:first-child{border-top:none;}
.contact-icon{
  width:42px;height:42px;flex:none;border-radius:50%;
  border:1px solid rgba(216,90,152,0.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--pink);
}
.contact-item h4{font-family:var(--grotesk);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-dim);margin-bottom:8px;}
.contact-item p, .contact-item a{font-size:15px;color:var(--white);font-weight:300;line-height:1.6;display:block;overflow-wrap:anywhere;word-break:break-word;}
.contact-item a:hover{color:var(--pink);}
.map-frame{border-radius:2px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);aspect-ratio:4/3.4;filter:grayscale(0.3) contrast(1.05);}
.map-frame iframe{width:100%;height:100%;border:0;display:block;}
.social-row{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:26px;margin-top:28px;margin-bottom:28px;}
.social-row a{display:flex;align-items:center;justify-content:center;color:var(--white);transition:transform .3s ease, filter .3s ease;}
.social-row svg{width:23px;height:23px;display:block;}
@media(hover:hover) and (pointer:fine){
  .social-row a:hover{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(216,90,152,0.55));}
  .social-row a.icon-stroke:hover svg{stroke:url(#zGrad);}
  .social-row a.icon-fill:hover svg{fill:url(#zGrad);}
}
@media(max-width:900px){.social-row svg{width:22px;height:22px;}}
@media(max-width:600px){.social-row{gap:26px;margin-top:26px;margin-bottom:26px;}.social-row svg{width:29px;height:29px;}}

/* ---------- LOGO SHOWCASE (Partners page) ---------- */
.logo-section{margin-bottom:64px;}
.logo-section:last-child{margin-bottom:0;}
.logo-section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.logo-section-head h4{
  font-family:var(--grotesk);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink);
}
.logo-section-count{font-family:var(--grotesk);font-size:11px;letter-spacing:.06em;color:var(--gray-dim);white-space:nowrap;}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;}
.logo-tile{
  position:relative;height:96px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.015);
  display:flex;align-items:center;justify-content:center;padding:16px 18px;
  transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.16,.84,.44,1);
}
.logo-tile:hover{
  border-color:rgba(216,90,152,0.45);
  background:rgba(216,90,152,0.045);
  transform:translateY(-3px);
}
.logo-tile::after{
  content:'';position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 130%, rgba(216,90,152,0.22), transparent 70%);
  transition:opacity .4s ease;
}
.logo-tile:hover::after{opacity:1;}
.logo-tile img{
  position:relative;z-index:1;max-width:100%;max-height:56px;object-fit:contain;
  filter:grayscale(100%) brightness(1.7) contrast(0.85) opacity(0.5);
  transition:filter .45s ease, transform .45s cubic-bezier(.16,.84,.44,1);
}
.logo-tile:hover img{
  filter:grayscale(0%) brightness(1) contrast(1) opacity(1);
  transform:scale(1.08);
}
.logo-fallback{
  position:relative;z-index:1;display:none;align-items:center;justify-content:center;text-align:center;
  font-family:var(--grotesk);font-weight:600;font-size:13.5px;letter-spacing:.02em;line-height:1.3;
  color:var(--gray-dim);
  transition:color .4s ease, transform .4s cubic-bezier(.16,.84,.44,1);
}
.logo-tile:hover .logo-fallback{color:var(--white);transform:scale(1.05);}
footer{padding:80px 0 40px;border-top:1px solid rgba(255,255,255,0.06);position:relative;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:70px;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h5{font-family:var(--grotesk);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-dim);margin-bottom:18px;}
.footer-grid a, .footer-grid p{display:block;font-size:14px;color:var(--gray);margin-bottom:10px;font-weight:300;overflow-wrap:anywhere;word-break:break-word;}
.footer-grid a:hover{color:var(--pink);}
.footer-social{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:2px;}
.footer-social a{display:flex;align-items:center;justify-content:center;color:var(--gray);margin-bottom:0;transition:transform .3s ease, filter .3s ease, color .3s ease;}
.footer-social svg{width:18px;height:18px;display:block;}
@media(hover:hover) and (pointer:fine){
  .footer-social a:hover{transform:scale(1.08);filter:drop-shadow(0 0 8px rgba(216,90,152,0.5));color:var(--white);}
  .footer-social a.icon-stroke:hover svg{stroke:url(#zGrad);}
  .footer-social a.icon-fill:hover svg{fill:url(#zGrad);}
}
@media(max-width:600px){.footer-social{gap:14px;}.footer-social svg{width:20px;height:20px;}}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--grotesk);font-size:11.5px;color:var(--gray-dim);letter-spacing:.04em;}
.footer-line-wrap{width:100%;overflow:hidden;margin-bottom:50px;}
.footer-line-wrap svg{width:100%;height:60px;display:block;}
.footer-line-wrap path{fill:none;stroke:url(#footerGrad);stroke-width:1.4;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s cubic-bezier(.16,.84,.44,1);}
.footer-line-wrap.in-view path{stroke-dashoffset:0;}

/* ---------- ACADEMY PAGE ADDITIONS ---------- */
nav.main-nav a.active{color:var(--pink);}
.hero-bg.academy-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.4), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.25), transparent 65%),
    url('academy-building-2.jpg');
  background-size:cover;
  background-position:center 30%;
}
.img-panel{
  aspect-ratio:4/5;border-radius:2px;position:relative;overflow:hidden;
  background:
    linear-gradient(155deg, rgba(107,47,165,0.5), rgba(216,90,152,0.18) 55%, rgba(20,18,35,0.6) 100%),
    linear-gradient(200deg,#241d3a,#0D0C18);
}
.img-panel::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:3px 3px;opacity:.4;
}
.img-panel.wide{aspect-ratio:4/3.2;}
.img-panel.tall{aspect-ratio:3/4;}

/* Academy intro image using the real training center photo */
.intro-image{
  aspect-ratio:4/5;border-radius:2px;position:relative;overflow:hidden;
  background:
    linear-gradient(155deg, rgba(107,47,165,0.35), rgba(216,90,152,0.12) 55%, rgba(20,18,35,0.55) 100%),
    url('academy-building.jpg');
  background-size:cover;background-position:center;
}
.intro-image::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:3px 3px;opacity:.35;
}

/* Academy gallery tiles */
.ag1{height:340px;background-image:url('academy-training-hall.jpg');background-size:cover;background-position:center;}
.ag2{height:220px;background-image:url('training-studio.jpg');background-size:cover;background-position:center;}
.ag3{height:280px;background-image:url('kpop-camp-flyer.jpg');background-size:cover;background-position:center;}
.ag4{height:200px;background-image:url('office-lobby.jpg');background-size:cover;background-position:center;}
.ag5{height:300px;background-image:url('dormitory-hallway.jpg');background-size:cover;background-position:center;}
.ag6{height:240px;background-image:url('zco-audition-poster.jpg');background-size:cover;background-position:center;}
.ag7{height:260px;background-image:url('academy-lounge-1.jpg');background-size:cover;background-position:center;}
.ag8{height:220px;background-image:url('academy-lounge-2.jpg');background-size:cover;background-position:center;}
.ag9{height:320px;background-image:url('academy-dorm-room.jpg');background-size:cover;background-position:center;}
.ag10{height:240px;background-image:url('kpop-camp-session.jpg');background-size:cover;background-position:center;}
.ag11{height:280px;background-image:url('academy-classroom-2.jpg');background-size:cover;background-position:center;}
.ag12{height:220px;background-image:url('academy-dining-hall.jpg');background-size:cover;background-position:center;}
.ag13{height:260px;background-image:url('zenith-cafe-1.jpg');background-size:cover;background-position:center;}
.ag14{height:300px;background-image:url('academy-vip-room.jpg');background-size:cover;background-position:center;}
.ag15{height:220px;background-image:url('academy-classroom-1.jpg');background-size:cover;background-position:center;}
.ag16{height:260px;background-image:url('academy-lecture-hall.jpg');background-size:cover;background-position:center;}
/* ---------- ENTERTAINMENT PAGE ADDITIONS ---------- */
.hero-bg.entertainment-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.4), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.3), transparent 65%),
    url('ONG-353.jpg');
  background-size:cover;
  background-position:center 30%;
}
.ent-image{
  aspect-ratio:4/5;border-radius:2px;position:relative;overflow:hidden;
  background:
    linear-gradient(155deg, rgba(107,47,165,0.35), rgba(216,90,152,0.12) 55%, rgba(20,18,35,0.55) 100%),
    url('ONG-124.jpg');
  background-size:cover;background-position:center 20%;
}
.ent-image::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:3px 3px;opacity:.35;
}
.feature-wrap.ent-bg{
  background:
    linear-gradient(190deg, rgba(20,17,36,0.3), rgba(13,12,24,0.94) 78%),
    url('ONG-275.jpg');
  background-size:cover;background-position:center 25%;
}
.feature-wrap.timeline-bg{
  background:
    linear-gradient(190deg, rgba(20,17,36,0.35), rgba(13,12,24,0.95) 80%),
    url('ONG-7.jpg');
  background-size:cover;background-position:center;
}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:1000px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr;}}

/* Entertainment gallery tiles — all real event photography */
.eg1{height:340px;background-image:url('ONG-146.jpg');}
.eg2{height:220px;background-image:url('ONG-124.jpg');}
.eg3{height:280px;background-image:url('ONG-275.jpg');}
.eg4{height:200px;background-image:url('ONG-7.jpg');}
.eg5{height:300px;background-image:url('ONG-298.jpg');}
.eg6{height:240px;background-image:url('ONG-353.jpg');}
.eg1,.eg2,.eg3,.eg4,.eg5,.eg6{background-size:cover;background-position:center;}
.eg7{height:260px;background-image:url('ONG-342.jpg');}
.eg8{height:230px;background-image:url('DSC03687.jpg');}
.eg9{height:300px;background-image:url('ONG-157.jpg');}
.eg10{height:210px;background-image:url('DSC03155.jpg');}
.eg7,.eg8,.eg9,.eg10{background-size:cover;background-position:center;}

.m9{height:260px;background-image:url('ONG-276.jpg');}
.m10{height:220px;background-image:url('DSC02928.jpg');}
.m11{height:290px;background-image:url('DSC03031.jpg');}
.m12{height:230px;background-image:url('ONG-89.jpg');}
.m9,.m10,.m11,.m12{background-size:cover;background-position:center;}

/* ---------- PARTNERS PAGE ADDITIONS ---------- */
.hero-bg.partners-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.45), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.3), transparent 65%),
    linear-gradient(160deg, #1c1930 0%, #0D0C18 75%);
}
.partner-page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 40px;}
@media(max-width:800px){.partner-page-grid{grid-template-columns:1fr;gap:40px;}}

/* ---------- CONTACT PAGE ADDITIONS ---------- */
.hero-bg.contact-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.45), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.3), transparent 65%),
    linear-gradient(160deg, #1c1930 0%, #0D0C18 75%);
}
.inquiry-form{display:flex;flex-direction:column;gap:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
.field label{
  display:block;font-family:var(--grotesk);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-dim);margin-bottom:10px;
}
.field input, .field select, .field textarea{
  width:100%;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.14);border-radius:2px;
  padding:14px 16px;color:var(--white);font-family:var(--body);font-size:14.5px;
  font-weight:300;transition:border-color .3s ease, background .3s ease;
}
.field textarea{resize:vertical;min-height:120px;font-family:var(--body);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--pink);background:rgba(216,90,152,0.05);
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA6BE' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.field select option{background:var(--navy);color:var(--white);}
.form-submit{align-self:flex-start;margin-top:6px;}
.form-note{font-size:12.5px;color:var(--gray-dim);font-style:italic;margin-top:4px;}

/* ---------- SHARED: FILTER CHIPS ---------- */
.filter-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:50px;}
.filter-chip{
  font-family:var(--grotesk);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);border:1px solid rgba(255,255,255,0.14);padding:10px 20px;border-radius:2px;
  transition:all .3s ease;background:none;cursor:pointer;
}
.filter-chip:hover{color:var(--white);border-color:rgba(216,90,152,0.4);}
.filter-chip.active{color:var(--navy-deep);background:var(--pink);border-color:var(--pink);font-weight:600;}
.filterable{transition:opacity .35s ease;}
.filterable.hidden{display:none;}

/* ---------- PROJECTS PAGE ---------- */
.hero-bg.projects-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.45), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.3), transparent 65%),
    linear-gradient(160deg, #1c1930 0%, #0D0C18 75%);
}
.project-full{border:1px solid rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-bottom:56px;}
.project-full-media{aspect-ratio:16/8;position:relative;background-size:cover;background-position:center;}
.project-full-media::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(13,12,24,0.5), transparent 60%);}
.project-full-tag{
  position:absolute;top:24px;left:24px;font-family:var(--grotesk);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--white);background:rgba(13,12,24,0.55);border:1px solid rgba(255,255,255,0.2);
  padding:8px 16px;border-radius:2px;backdrop-filter:blur(6px);
}
.project-full-body{padding:44px;}
.project-full-body h3{font-size:clamp(22px,2.4vw,32px);margin-bottom:16px;}
.project-full-body p.overview{color:var(--gray);font-weight:300;font-size:14.5px;line-height:1.85;max-width:720px;margin-bottom:32px;}
.project-detail-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;margin-bottom:32px;}
@media(max-width:800px){.project-detail-grid{grid-template-columns:1fr;}}
.obj-list{list-style:none;}
.obj-list li{position:relative;padding-left:20px;margin-bottom:12px;font-size:13.5px;color:var(--gray);font-weight:300;line-height:1.7;}
.obj-list li::before{content:'—';position:absolute;left:0;color:var(--pink);}
.result-box{border-left:1px solid rgba(255,255,255,0.12);padding-left:20px;}
.result-box .result-label{font-family:var(--grotesk);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-dim);margin-bottom:8px;}
.result-box p{font-size:14px;color:var(--white);font-weight:300;line-height:1.7;}
.project-full-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);}
.mini-partners{display:flex;gap:10px;flex-wrap:wrap;}
.mini-partners span{font-family:var(--grotesk);font-size:11px;letter-spacing:.04em;color:var(--gray-dim);border:1px solid rgba(255,255,255,0.1);padding:6px 12px;border-radius:2px;}

/* ---------- STATUS BADGE (glowing pill) ---------- */
.status-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--grotesk);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--white);background:linear-gradient(120deg, rgba(107,47,165,0.35), rgba(216,90,152,0.35));
  border:1px solid rgba(216,90,152,0.55);padding:9px 18px;border-radius:100px;
  box-shadow:0 0 0 1px rgba(216,90,152,0.08) inset, 0 0 22px rgba(216,90,152,0.35);
  animation:badgePulse 2.6s ease-in-out infinite;
}
.status-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 8px 2px rgba(216,90,152,0.85);flex:none;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 1px rgba(216,90,152,0.08) inset, 0 0 18px rgba(216,90,152,0.28);}
  50%{box-shadow:0 0 0 1px rgba(216,90,152,0.14) inset, 0 0 30px rgba(216,90,152,0.5);}
}

/* ---------- PROJECT SUPPORT IMAGE STRIP (3 supporting images) ---------- */
.project-support-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:14px;}
@media(max-width:700px){.project-support-strip{grid-template-columns:1fr;}}
.support-item{
  aspect-ratio:4/3;border-radius:2px;overflow:hidden;position:relative;
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,0.1);
  transition:transform .5s cubic-bezier(.16,.84,.44,1), border-color .3s ease;
}
.support-item::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(13,12,24,0.35), transparent 55%);
  background-size:3px 3px, cover;
}
.support-item:hover{transform:translateY(-4px);border-color:rgba(216,90,152,0.4);}

/* ---------- SUBSECTION LABEL (Timeline / Future Vision headers within a project) ---------- */
.project-subsection-label{
  font-family:var(--grotesk);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);margin:36px 0 20px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.08);
}

/* ---------- FUTURE VISION CALLOUT BOX ---------- */
.future-vision-box{
  position:relative;padding:26px 28px;border-radius:2px;overflow:hidden;
  background:linear-gradient(200deg, rgba(107,47,165,0.16), rgba(216,90,152,0.08) 70%);
  border:1px solid rgba(216,90,152,0.25);
}
.future-vision-box p{color:var(--white);font-size:14px;font-weight:300;line-height:1.85;opacity:.92;}

/* ---------- FUTURE PROJECTS ROADMAP ---------- */
#future-projects{padding-top:0;}
.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.roadmap-grid{grid-template-columns:1fr;}}
.roadmap-card{
  border:1px solid rgba(255,255,255,0.09);border-radius:2px;overflow:hidden;position:relative;
  background:linear-gradient(200deg, rgba(255,255,255,0.02), transparent 60%);
  transition:border-color .4s ease, transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease;
}
.roadmap-card:hover{transform:translateY(-8px);border-color:rgba(216,90,152,0.45);box-shadow:0 18px 46px rgba(107,47,165,0.28), 0 0 40px rgba(216,90,152,0.18);}
.roadmap-media{
  aspect-ratio:4/3;position:relative;background-size:cover;background-position:center;
  display:flex;align-items:flex-start;justify-content:flex-start;padding:20px;
  background:linear-gradient(200deg, rgba(42,31,74,0.7) 0%, rgba(23,21,42,0.85) 55%, rgba(13,12,24,0.96) 100%);
}
.roadmap-media::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:3px 3px;
}
.roadmap-card .status-badge{position:relative;z-index:2;font-size:10px;padding:7px 14px;animation:none;box-shadow:0 0 18px rgba(216,90,152,0.4);}
.roadmap-body{padding:28px 26px 30px;}
.roadmap-body h4{font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:12px;line-height:1.35;}
.roadmap-body p{font-size:13.5px;color:var(--gray);line-height:1.75;font-weight:300;margin-bottom:22px;}
.btn-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
.btn-disabled:hover{border-color:rgba(255,255,255,0.28);color:var(--white);}

/* ---------- NEWS PAGE (MAGAZINE) ---------- */
.hero-bg.news-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.45), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.3), transparent 65%),
    linear-gradient(160deg, #1c1930 0%, #0D0C18 75%);
}
.featured-article{
  display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;
  border:1px solid rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-bottom:70px;
}
@media(max-width:800px){.featured-article{grid-template-columns:1fr;}}
.featured-article .fa-media{aspect-ratio:4/3;background-size:cover;background-position:center;}
.featured-article .fa-body{padding:44px;}
.featured-article .fa-body h3{font-size:clamp(22px,2.6vw,34px);margin:14px 0 16px;line-height:1.3;}
.news-grid-full{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:900px){.news-grid-full{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.news-grid-full{grid-template-columns:1fr;}}

/* ---------- GALLERY PAGE (FULL MASONRY) ---------- */
.hero-bg.gallery-bg{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(107,47,165,0.45), transparent 60%),
    radial-gradient(ellipse 55% 60% at 80% 70%, rgba(216,90,152,0.3), transparent 65%),
    linear-gradient(160deg, #1c1930 0%, #0D0C18 75%);
}
.gg{background-size:cover;background-position:center;}
.gg-placeholder{background:linear-gradient(0deg, rgba(13,12,24,0.75), transparent 55%), linear-gradient(200deg,#2c2148,#17152A);}
.gg14{background-image:url('ONG-342.jpg');}
.gg15{background-image:url('DSC02928.jpg');}
.gg16{background-image:url('DSC02894.jpg');}
.gg17{background-image:url('ONG-355.jpg');}
.gg18{background-image:url('DSC03155.jpg');}
.gg19{background-image:url('ONG-89.jpg');}
.gg20{background-image:url('DSC03031.jpg');}
.gg21{background-image:url('ONG-31.jpg');}

/* ---------- BRAND INTRO / SPLASH SCREEN (homepage only) ---------- */
#brandIntro{
  position:fixed;inset:0;z-index:3000;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-deep);
  overflow:hidden;
  transition:opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s;
}
#brandIntro.intro-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.intro-bg{
  position:absolute;inset:-10%;
  background:
    radial-gradient(ellipse 55% 45% at 25% 30%, rgba(107,47,165,0.4), transparent 60%),
    radial-gradient(ellipse 50% 45% at 78% 72%, rgba(216,90,152,0.28), transparent 62%),
    var(--navy-deep);
  animation:introDrift 9s ease-in-out infinite alternate;
}
@keyframes introDrift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-2%,2%) scale(1.06);}
}
.intro-particles{position:absolute;inset:0;pointer-events:none;}
.intro-particles span{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, rgba(216,90,152,0.55), transparent 70%);
  filter:blur(1px);opacity:0;
  animation:introParticle 4.5s ease-in-out infinite;
}
@keyframes introParticle{
  0%{opacity:0;transform:translateY(14px) scale(0.7);}
  35%{opacity:.5;}
  70%{opacity:.22;}
  100%{opacity:0;transform:translateY(-18px) scale(1.1);}
}
.intro-diagonal{
  position:absolute;top:50%;left:50%;width:150vmax;height:150vmax;
  transform:translate(-50%,-50%) rotate(-18deg);
  opacity:0;pointer-events:none;
}
.intro-diagonal path{
  fill:none;stroke:url(#zGrad);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;
  filter:drop-shadow(0 0 18px rgba(216,90,152,0.35));
}
#brandIntro.intro-play .intro-diagonal{
  opacity:.14;
  animation:introDiagonalIn 1.6s cubic-bezier(.16,.84,.44,1) .1s forwards;
}
#brandIntro.intro-play .intro-diagonal path{
  animation:introDiagonalDraw 1.6s cubic-bezier(.16,.84,.44,1) .1s forwards;
}
@keyframes introDiagonalIn{from{opacity:0;}to{opacity:.14;}}
@keyframes introDiagonalDraw{to{stroke-dashoffset:0;}}

.intro-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;}
.intro-logo{width:108px;height:108px;opacity:0;transform:scale(0.82);}
#brandIntro.intro-play .intro-logo{
  animation:introLogoIn 1s cubic-bezier(.16,.84,.44,1) .3s forwards;
}
.intro-logo path{
  fill:none;stroke:url(#zGrad);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
}
@keyframes introLogoIn{
  0%{opacity:0;transform:scale(0.82);filter:drop-shadow(0 0 0 rgba(216,90,152,0));}
  60%{opacity:1;transform:scale(1.04);filter:drop-shadow(0 0 26px rgba(216,90,152,0.55));}
  100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 16px rgba(216,90,152,0.4));}
}
.intro-company{
  margin-top:28px;font-family:var(--grotesk);font-weight:700;color:var(--white);
  font-size:clamp(17px,2.4vw,26px);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);
}
#brandIntro.intro-play .intro-company{
  animation:introFadeUp .7s cubic-bezier(.16,.84,.44,1) 1s forwards;
}
.intro-tagline{
  margin-top:14px;font-family:var(--body);font-weight:300;color:var(--gray);
  font-size:clamp(12px,1.3vw,14.5px);letter-spacing:.02em;max-width:440px;line-height:1.6;
  opacity:0;transform:translateY(8px);
}
#brandIntro.intro-play .intro-tagline{
  animation:introFadeUp .7s cubic-bezier(.16,.84,.44,1) 1.5s forwards;
}
@keyframes introFadeUp{to{opacity:1;transform:translateY(0);}}

body.intro-locked{overflow:hidden;}

@media(max-width:600px){
  .intro-logo{width:76px;height:76px;}
  .intro-company{font-size:15px;letter-spacing:.12em;margin-top:22px;}
  .intro-tagline{font-size:12px;margin-top:10px;max-width:300px;}
}