@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%;
}
.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('academy-building-night.jpg');
  background-size:cover;
  background-position:center 30%;
}
.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;}}
.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;}
}