@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  --navy:#061a3a; --navy-2:#0a2450; --blue:#1646d8; --blue-2:#3f70ff;
  --gold:#f5b900; --gold-2:#ffd45a; --white:#fff; --soft:#f5f7fb;
  --surface:#fff; --surface-2:#eef3fa; --text:#14213d; --muted:#66748d;
  --line:#dbe4f0; --shadow:0 22px 60px rgba(6,26,58,.12); --radius:24px;
  --cursor-x:50%; --cursor-y:50%; --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  --surface:#0b1426; --surface-2:#101d34; --soft:#081326; --text:#edf3ff; --muted:#a9b7cd;
  --line:#20324f; --shadow:0 22px 70px rgba(0,0,0,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--surface);line-height:1.7;overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(520px circle at var(--cursor-x) var(--cursor-y),rgba(22,70,216,.075),transparent 65%)}
body.modal-open{overflow:hidden}
h1,h2,h3,h4,.brand{font-family:"Plus Jakarta Sans",Inter,sans-serif}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}

/* ===== CINEMATIC AMBIENT BACKGROUND ===== */
.ambient-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#061a3a 0%,#071c42 42%,#0a2c69 100%)}
.ambient-bg::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 18% 25%,rgba(63,112,255,.30),transparent 24%),radial-gradient(circle at 80% 18%,rgba(245,185,0,.14),transparent 20%),radial-gradient(circle at 58% 80%,rgba(22,70,216,.22),transparent 28%);filter:blur(35px);animation:aurora 16s ease-in-out infinite alternate}
.ambient-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at var(--cursor-x) var(--cursor-y),rgba(255,255,255,.10),transparent 62%);mix-blend-mode:screen;opacity:.8}
.ambient-grid{position:absolute;inset:-10%;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:58px 58px;transform:perspective(700px) rotateX(62deg) scale(1.6) translateY(18%);transform-origin:center bottom;mask-image:linear-gradient(to top,black,transparent 78%);animation:gridDrift 18s linear infinite}
.ambient-noise{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35;mix-blend-mode:screen}
.orb-a{width:300px;height:300px;left:-100px;top:12%;background:radial-gradient(circle,rgba(63,112,255,.65),transparent 68%);animation:orbFloatA 13s ease-in-out infinite}
.orb-b{width:420px;height:420px;right:-170px;top:35%;background:radial-gradient(circle,rgba(245,185,0,.28),transparent 68%);animation:orbFloatB 17s ease-in-out infinite}
.orb-c{width:280px;height:280px;left:38%;bottom:-150px;background:radial-gradient(circle,rgba(22,70,216,.5),transparent 68%);animation:orbFloatC 15s ease-in-out infinite}

/* ===== NAV ===== */
.navbar{position:fixed;z-index:1000;top:0;left:0;right:0;height:82px;padding:0 clamp(18px,5vw,72px);display:flex;align-items:center;gap:24px;color:#fff;background:rgba(5,19,43,.30);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .35s var(--ease),box-shadow .35s var(--ease),height .35s var(--ease)}
.navbar::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease)}
.navbar.scrolled{height:72px;background:rgba(5,18,40,.88);box-shadow:0 16px 45px rgba(0,0,0,.18)}.navbar.scrolled::after{transform:scaleX(1)}
.brand{display:flex;align-items:center;gap:11px;min-width:260px}.brand img{width:46px;height:46px;object-fit:contain;border-radius:10px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}.brand span{display:flex;flex-direction:column;line-height:1.25}.brand strong{font-size:13px;letter-spacing:.1px}.brand small{color:var(--gold-2);font-size:9px;letter-spacing:1px;text-transform:uppercase}
nav{display:flex;gap:clamp(10px,1.5vw,22px);align-items:center;justify-content:center;flex:1}nav a{position:relative;font-size:11px;font-weight:700;color:#eaf0fb;white-space:nowrap;padding:9px 0;transition:color .25s ease}nav a::after{content:"";position:absolute;left:50%;bottom:1px;width:0;height:2px;border-radius:99px;background:var(--gold-2);transform:translateX(-50%);transition:width .35s var(--ease)}nav a:hover,nav a.active{color:#fff}nav a:hover::after,nav a.active::after{width:100%}
.nav-tools{display:flex;align-items:center;gap:8px}.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 11px;color:#fff;background:rgba(255,255,255,.07);font-size:11px;transition:.3s var(--ease)}.theme-toggle:hover{transform:translateY(-2px);border-color:rgba(255,212,90,.5)}.menu-toggle{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;width:42px;height:42px;font-size:23px}

/* ===== GLOBAL ===== */
main,.navbar,footer{position:relative}.section{padding:clamp(76px,9vw,120px) clamp(18px,8vw,120px);position:relative;overflow:hidden}.section-light{background:var(--soft)}.section-dark{background:linear-gradient(135deg,#061a3a,#0a285e);color:#fff}.section-heading{max-width:800px;margin-bottom:48px;position:relative;z-index:2}.section-heading h2{font-size:clamp(34px,4.2vw,58px);line-height:1.06;letter-spacing:-2.2px;margin-top:13px}.section-heading h2 em{color:var(--gold);font-style:normal}.section-heading p{color:var(--muted);margin-top:14px;max-width:700px}.section-dark .section-heading p{color:#b9c8dd}.eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.6px;font-weight:800;color:var(--gold-2);border:1px solid rgba(255,212,90,.28);padding:8px 12px;border-radius:999px;overflow:hidden}.eyebrow::after{content:"";position:absolute;inset:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-150%);animation:eyebrowShine 6s ease-in-out infinite}.eyebrow.blue{color:var(--royal,#0b35a8);border-color:rgba(11,53,168,.18)}
html[data-theme="dark"] .eyebrow.blue{color:#8fb0ff;border-color:rgba(143,176,255,.2)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:13px;padding:13px 19px;font-weight:800;font-size:12px;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s ease}.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease);z-index:-1}.btn:hover{transform:translateY(-3px)}.btn:hover::after{transform:translateX(130%)}.btn-gold{background:var(--gold);color:#071a38;box-shadow:0 12px 30px rgba(245,185,0,.25)}.btn-gold:hover{box-shadow:0 18px 38px rgba(245,185,0,.35)}.btn-outline{border-color:rgba(255,255,255,.30);color:#fff;background:rgba(255,255,255,.06)}.btn-blue{background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(6,26,58,.16)}

/* ===== HERO ===== */
.hero{min-height:780px;padding:145px clamp(18px,8vw,120px) 90px;background:linear-gradient(120deg,#041329 0%,#061a3a 45%,#0a2b6c 100%);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:50px;align-items:center;position:relative;overflow:hidden;color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(650px circle at var(--cursor-x) var(--cursor-y),rgba(63,112,255,.18),transparent 65%);pointer-events:none}.hero::after{content:"";position:absolute;inset:0;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to right,black,transparent 75%);animation:starDrift 24s linear infinite}
.hero-content,.hero-visual{position:relative;z-index:3}.hero h1{font-size:clamp(44px,6vw,78px);line-height:1.02;letter-spacing:-3.5px;margin:24px 0 20px;max-width:820px}.hero h1 em{color:var(--gold);font-style:normal;text-shadow:0 0 35px rgba(245,185,0,.15)}.hero p{max-width:670px;color:#cbd7ea;font-size:15px}.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-visual{min-height:500px;display:grid;place-items:center}.hero-visual .orb{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(22,70,216,.42),transparent 66%);filter:blur(3px);animation:heroOrb 7s ease-in-out infinite}.logo-stage{position:relative;width:min(410px,74vw);aspect-ratio:1;border-radius:36%;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.20);box-shadow:0 0 90px rgba(22,70,216,.38),inset 0 0 35px rgba(255,255,255,.05);transform:rotate(-3deg);animation:logoFloat 6s ease-in-out infinite;isolation:isolate}.logo-stage::before,.logo-stage::after{content:"";position:absolute;inset:-22px;border:1px solid rgba(255,212,90,.22);border-radius:42%;transform:rotate(9deg);animation:orbitSpin 14s linear infinite}.logo-stage::after{inset:-42px;border-color:rgba(63,112,255,.18);transform:rotate(-15deg);animation-duration:20s;animation-direction:reverse}.logo-stage img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(0,0,0,.35));animation:logoBreath 4.5s ease-in-out infinite}.logo-stage .scanline{position:absolute;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,212,90,.85),transparent);box-shadow:0 0 18px rgba(255,212,90,.5);animation:scan 4.8s ease-in-out infinite}
.floating-stat{position:absolute;z-index:5;min-width:125px;background:rgba(6,22,50,.78);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,212,90,.22);padding:13px 16px;border-radius:17px;display:flex;flex-direction:column;box-shadow:0 18px 45px rgba(0,0,0,.25);animation:statFloat 5s ease-in-out infinite}.floating-stat b{font-size:21px;color:var(--gold-2)}.floating-stat span{font-size:9px;color:#dbe4f4}.stat-a{left:0;top:17%;animation-delay:-1s}.stat-b{right:0;top:29%;animation-delay:-2.5s}.stat-c{right:5%;bottom:11%;animation-delay:-4s}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:26px clamp(18px,8vw,120px);background:#061a3a;color:#fff;position:relative;overflow:hidden}.stats::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:translateX(-100%);animation:statsSweep 8s ease-in-out infinite}.stat-box{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:18px 20px;background:rgba(255,255,255,.045);display:flex;align-items:center;gap:14px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s ease,background .35s ease}.stat-box::after{content:"";position:absolute;inset:0;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,212,90,.12),transparent 70%);opacity:0;transition:opacity .35s}.stat-box:hover{transform:translateY(-4px);border-color:rgba(255,212,90,.35);background:rgba(255,255,255,.065)}.stat-box:hover::after{opacity:1}.stat-box b{font-size:29px;color:var(--gold-2);white-space:nowrap}.stat-box span{font-size:11px;color:#c7d2e5}

/* ===== ABOUT / LEADER / VISION ===== */
.about-grid{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:58px;align-items:start}.about-copy .lead{font-size:19px;font-weight:700;line-height:1.6;margin-bottom:18px}.about-copy p:not(.lead){color:var(--muted);margin-bottom:24px}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.feature-card{position:relative;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 5px 20px rgba(6,26,58,.035);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));overflow:hidden}.feature-card::before,.commission-card::before,.program-card::before,.agenda-card::before,.trans-card::before,.member-card::before,.person-card::before{content:"";position:absolute;inset:0;background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(63,112,255,.10),transparent 72%);opacity:0;transition:opacity .35s;pointer-events:none}.feature-card:hover,.commission-card:hover,.program-card:hover,.agenda-card:hover,.trans-card:hover,.member-card:hover,.person-card:hover{--lift:-7px;box-shadow:0 24px 55px rgba(6,26,58,.14);border-color:rgba(22,70,216,.25)}.feature-card:hover::before,.commission-card:hover::before,.program-card:hover::before,.agenda-card:hover::before,.trans-card:hover::before,.member-card:hover::before,.person-card:hover::before{opacity:1}.feature-card i{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#edf2ff;color:var(--blue);font-style:normal;font-weight:800;margin-bottom:14px}.feature-card h3,.feature-card p{position:relative;z-index:1}.feature-card h3{font-size:15px}.feature-card p{font-size:12px;color:var(--muted);margin-top:5px}
.leader{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:70px;align-items:center}.leader-photo{min-height:440px;border-radius:30px;background:linear-gradient(145deg,#dce6fb,#fff);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow);position:relative}.leader-photo::after{content:"";position:absolute;inset:18px;border:1px solid rgba(11,53,168,.16);border-radius:22px}.leader-photo img{width:100%;height:100%;object-fit:cover}.photo-placeholder{width:75%;height:82%;display:grid;place-items:center;text-align:center;border:1px dashed #9fb1d1;border-radius:22px;color:#7183a2;font-weight:800;letter-spacing:2px;background:rgba(255,255,255,.55)}.leader-copy h2{font-size:clamp(34px,4vw,50px);line-height:1.08;margin:18px 0 4px}.gold-text{color:#b48300;font-weight:800}.leader blockquote{font-size:24px;line-height:1.4;border-left:4px solid var(--gold);padding-left:20px;margin:28px 0;color:var(--text)}.signature{font-family:cursive;font-size:28px;margin-top:24px}
.vision{background:linear-gradient(135deg,#061a3a,#0a2b67);color:#fff}.vision-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}.vision-card{position:relative;padding:38px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));overflow:hidden}.vision-card::before{content:"";position:absolute;width:260px;height:260px;right:-100px;bottom:-130px;border-radius:50%;background:radial-gradient(circle,rgba(245,185,0,.18),transparent 68%);animation:visionPulse 7s ease-in-out infinite}.vision-card span{font-size:10px;letter-spacing:2px;color:var(--gold-2);font-weight:800}.vision-card h3{position:relative;font-size:clamp(22px,2.5vw,34px);line-height:1.35;margin-top:22px}.mission-list{display:grid;gap:12px}.mission{display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:center;padding:19px 20px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.04);transition:transform .35s var(--ease),background .35s ease}.mission:hover{transform:translateX(6px);background:rgba(255,255,255,.075)}.mission>b{font-size:20px;color:var(--gold-2)}.mission h3{font-size:15px}.mission p{font-size:11px;color:#b8c6dc}

/* ===== STRUCTURE ===== */
.org-chart{position:relative;padding:14px 0 28px;max-width:920px;margin:0 auto}.org-level{display:grid;place-items:center;width:100%}.org-level.two,.org-level.three{grid-template-columns:repeat(3,minmax(180px,220px));gap:20px;justify-content:center;align-items:stretch}.connector{width:2px;height:36px;margin:0 auto;background:linear-gradient(var(--blue),var(--gold));position:relative}.connector::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translateX(-50%);box-shadow:0 0 18px rgba(245,185,0,.6)}.person-card{position:relative;width:100%;min-height:150px;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:20px 15px;display:grid;justify-items:center;align-content:center;gap:8px;text-align:center;box-shadow:0 10px 30px rgba(6,26,58,.06);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s var(--ease),border-color .3s;transform:translate3d(0,var(--lift,0px),0);overflow:hidden}.person-card.featured{width:min(280px,100%);min-height:175px;padding:24px}.person-card:hover{transform:translate3d(0,-7px,0);box-shadow:0 24px 55px rgba(6,26,58,.14);border-color:rgba(22,70,216,.25)}.avatar{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#dce6fb,#eef3ff);color:var(--blue);font-weight:800;font-size:20px;overflow:hidden}.avatar img,.member-avatar img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}.person-card b{font-size:13px}.person-card small{font-size:10px;color:var(--muted)}.commission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}.commission-card{position:relative;border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:25px;display:grid;grid-template-columns:52px 1fr;gap:18px;text-align:left;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));overflow:hidden}.commission-letter{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy),var(--blue));color:var(--gold-2);font-weight:800;box-shadow:0 10px 25px rgba(6,26,58,.18)}.commission-card small{font-size:9px;letter-spacing:1.4px;color:var(--blue);font-weight:800}.commission-card h3{font-size:17px;margin:6px 0}.commission-card p,.commission-card li{font-size:11px;color:var(--muted)}.commission-card ul{margin:13px 0 14px;padding-left:16px}.commission-open{font-size:11px;color:var(--blue);font-weight:800}

/* ===== MEMBERS ===== */
.members{background:var(--soft)}.member-tools{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.member-search-wrap{position:relative;min-width:260px}.member-search-wrap>span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}.member-tools input{width:100%;padding:13px 16px 13px 40px;border:1px solid var(--line);border-radius:13px;outline:none;background:var(--surface);color:var(--text);transition:border-color .25s,box-shadow .25s}.member-tools input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,70,216,.09)}.filters,.commission-subfilters{display:flex;gap:7px;flex-wrap:wrap}.filters button,.commission-subfilters button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:9px 12px;border-radius:10px;font-size:10px;font-weight:700;transition:.3s var(--ease)}.filters button.active,.filters button:hover,.commission-subfilters button.active,.commission-subfilters button:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}.commission-subfilters{margin:0 0 22px}.member-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.member-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:13px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));overflow:hidden}.member-avatar{height:205px;border-radius:15px;background:linear-gradient(145deg,#dce6fb,#f9fbff);display:grid;place-items:center;color:var(--blue);font-size:30px;font-weight:800;overflow:hidden}.member-card-body{position:relative;padding:0 3px}.member-index{display:inline-block;margin-top:13px;font-size:9px;letter-spacing:1px;color:var(--blue);font-weight:800}.member-card h3{font-size:14px;margin-top:4px}.member-card p{font-size:10px;color:var(--muted)}.member-division{font-weight:700}.member-card button{border:0;background:none;color:var(--blue);font-size:10px;font-weight:800;margin-top:8px;padding:0}.empty-state{padding:28px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}

/* ===== PROGRAM / AGENDA / GALLERY / TRANSPARENCY ===== */
.programs{background:linear-gradient(135deg,#061a3a,#0a2a63);color:#fff}.program-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.program-card,.agenda-card,.trans-card{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:21px;padding:25px;background:rgba(255,255,255,.045);color:#fff;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));overflow:hidden}.program-card .tag{display:inline-block;color:var(--gold-2);font-size:9px;font-weight:800;letter-spacing:1.4px}.program-card h3{font-size:18px;margin:12px 0 7px}.program-card p{font-size:11px;color:#c3cee0}.program-card .status{margin-top:18px;display:flex;justify-content:space-between;font-size:10px;color:#b9c5d8}.mini-progress{height:6px;border-radius:10px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:8px}.mini-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 18px rgba(245,185,0,.4);transition:width 1.2s var(--ease)}.agenda-grid,.transparency-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.agenda-card{width:100%;text-align:left;display:grid;grid-template-columns:58px 1fr;gap:18px}.agenda-card>span{font-size:30px;color:var(--gold-2);font-weight:800}.agenda-card small{font-size:9px;color:#9fb1cf;letter-spacing:1px}.agenda-card h3{font-size:16px;margin:5px 0}.agenda-card p,.trans-card p{font-size:11px;color:#bac8dc}.trans-card{width:100%;text-align:left;display:block}.trans-card-body{position:relative;z-index:1;padding-right:34px}.trans-card-arrow{position:absolute;right:20px;bottom:18px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:16px;transition:transform .3s var(--ease),background .3s ease}.trans-card:hover .trans-card-arrow{transform:translate(3px,-3px);background:var(--blue-2)}.trans-modal h3{font-size:clamp(24px,4vw,34px);line-height:1.1;color:var(--ink-strong);margin:10px 0 12px}.trans-modal-lead{font-size:13px!important;font-weight:700;color:var(--ink-strong)!important;line-height:1.6}.trans-modal-copy{margin-top:16px;color:var(--muted);font-size:12px;line-height:1.75}.trans-modal .modal-section-label{margin-top:22px}.trans-modal-list{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:12px;line-height:1.8}.trans-modal-list li::marker{color:var(--blue)}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:14px}.gallery-item{border-radius:20px;overflow:hidden;position:relative;box-shadow:0 12px 35px rgba(6,26,58,.08)}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .8s var(--ease)}.gallery-item:hover img{transform:scale(1.08);filter:saturate(1.12)}.gallery-placeholder{height:100%;display:grid;place-items:center;text-align:center;color:#fff;font-weight:800;letter-spacing:2px;background:linear-gradient(135deg,#061a3a,#1646d8);position:relative;overflow:hidden}.gallery-placeholder::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,212,90,.25),transparent 25%);animation:gallerySpin 8s linear infinite}.gallery-placeholder::after{content:"";position:absolute;inset:15px;border:1px solid rgba(255,212,90,.35);border-radius:14px}.gallery-placeholder{isolation:isolate}.gallery-placeholder br,.gallery-placeholder{z-index:1}.trans-card{color:var(--text);background:var(--surface);border-color:var(--line)}.trans-card>span{font-size:11px;color:var(--blue);font-weight:800}.trans-card h3{font-size:18px;margin:12px 0 6px}.trans-card p{color:var(--muted)}

/* ===== RELATION / FAQ / FOOTER ===== */
.flow{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;padding:36px 15px;border:1px solid var(--line);border-radius:25px;background:var(--surface);box-shadow:var(--shadow)}.flow span{padding:13px 17px;border-radius:13px;background:var(--surface-2);font-size:11px;font-weight:700;text-align:center}.flow .flow-strong{background:var(--navy);color:#fff;box-shadow:0 10px 25px rgba(6,26,58,.14)}.flow i{font-style:normal;color:var(--gold);font-size:18px;animation:flowPulse 1.8s ease-in-out infinite}.faq-list{max-width:920px}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";color:var(--blue);font-size:20px;transition:transform .3s}.faq-list details[open] summary::after{transform:rotate(45deg)}.faq-list p{color:var(--muted);font-size:13px;padding-top:10px;max-width:760px}
footer{background:#04142e;color:#fff;padding:72px clamp(18px,8vw,120px) 22px}.footer-main{display:grid;grid-template-columns:1.4fr .8fr .9fr .8fr;gap:40px}.footer-brand img{width:62px;height:62px;object-fit:contain;border-radius:10px}.footer-brand h3{margin-top:15px;font-size:15px}.footer-brand p,.footer-main p,.footer-main a{color:#9eacc1;font-size:11px}.footer-main h4{font-size:12px;margin-bottom:14px;color:var(--gold-2)}.footer-main>div:not(:first-child){display:flex;flex-direction:column;gap:8px}.footer-main a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#7f8da5}.footer-bottom strong{color:#c7d1e1}

/* ===== ASPIRATION ===== */
.aspirations{background:var(--soft)}.aspiration-shell{position:relative}.aspiration-heading h2{font-size:clamp(48px,7vw,86px);line-height:.93;letter-spacing:-4px}.aspiration-heading p{max-width:650px}.aspiration-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:18px;align-items:stretch}.aspiration-info,.aspiration-form-wrap{position:relative;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.aspiration-info{padding:32px;min-height:520px}.aspiration-info::before,.aspiration-form-wrap::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.15) 48%,transparent 66%);transform:translateX(-130%);transition:transform 1.1s var(--ease);pointer-events:none}.aspiration-info:hover::before,.aspiration-form-wrap:hover::before{transform:translateX(130%)}.aspiration-topline{display:flex;align-items:center;gap:10px;margin-bottom:70px}.aspiration-mark{font-size:12px;color:var(--blue);font-weight:800}.aspiration-label{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:800}.aspiration-info h3{font-size:clamp(32px,4vw,52px);line-height:.98;letter-spacing:-2px}.aspiration-info h3 em{font-family:"Instrument Serif",Georgia,serif;color:var(--blue);font-weight:400}.aspiration-info>p{color:var(--muted);font-size:12px;margin-top:18px;max-width:430px}.aspiration-points{display:grid;gap:12px;margin-top:26px}.aspiration-points div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}.aspiration-points strong{color:var(--gold);font-size:10px}.aspiration-points span{font-size:11px;color:var(--text)}.aspiration-note{display:flex;gap:10px;align-items:flex-start;margin-top:35px;padding-top:18px;border-top:1px solid var(--line)}.aspiration-note>span{color:var(--blue);font-weight:800}.aspiration-note p{font-size:10px;color:var(--muted)}.aspiration-form-wrap{padding:0}.aspiration-form-head{padding:30px 32px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}.aspiration-form-head span:first-child{font-size:9px;letter-spacing:1.5px;color:var(--blue);font-weight:800}.aspiration-form-head h3{font-size:25px;margin-top:6px}.aspiration-private{font-size:9px!important;color:var(--muted)!important;border:1px solid var(--line);padding:7px 9px;border-radius:999px;white-space:nowrap}.aspiration-form{padding:28px 32px 32px;display:grid;gap:18px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.aspiration-form label{display:grid;gap:7px;font-size:10px;font-weight:800}.aspiration-form label small{font-size:9px;color:var(--muted);font-weight:500;margin-left:4px}.aspiration-form input,.aspiration-form select,.aspiration-form textarea{width:100%;border:1px solid var(--line);border-radius:13px;padding:12px 13px;background:var(--surface);color:var(--text);outline:none;resize:vertical;transition:border-color .25s,box-shadow .25s}.aspiration-form input:focus,.aspiration-form select:focus,.aspiration-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,70,216,.08)}.aspiration-counter{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);font-weight:500}.aspiration-counter b{color:var(--blue)}.aspiration-form-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:3px}.aspiration-form-bottom small{font-size:9px;color:var(--muted)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#46a86c;margin-right:5px;box-shadow:0 0 0 4px rgba(70,168,108,.1)}.aspiration-submit{min-width:165px}.aspiration-submit i{font-style:normal}.form-error{color:#b23b3b!important}.form-success{color:#247a4b!important}.hp-field{position:absolute!important;left:-10000px!important;opacity:0!important}

/* ===== MODAL / TOAST / BACK TOP ===== */
.modal{position:fixed;inset:0;background:rgba(0,8,20,.72);z-index:1500;display:none;place-items:center;padding:20px;backdrop-filter:blur(12px)}.modal.show{display:grid;animation:modalBg .3s ease both}.modal-card{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:26px;max-width:560px;width:100%;max-height:min(700px,90vh);overflow:auto;padding:30px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.35);animation:modalIn .55s var(--ease) both}.modal-close{position:absolute;right:15px;top:10px;border:0;background:var(--surface-2);color:var(--text);width:38px;height:38px;border-radius:50%;font-size:25px}.modal-close:hover{transform:rotate(90deg)}.modal-card h3{font-size:25px}.modal-card p{color:var(--muted);font-size:12px;margin-top:8px}.profile-modal{display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start}.profile-avatar{width:110px;height:110px}.profile-modal .eyebrow{margin-bottom:12px}.commission-modal-head{display:grid;grid-template-columns:65px 1fr;gap:18px;align-items:start}.commission-member-list{margin-top:28px}.modal-section-label{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:800;margin-bottom:10px}.commission-member{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;padding:11px;border-radius:15px;margin-top:8px}.member-avatar.small{width:44px;height:44px;font-size:13px}.commission-member small{display:block;color:var(--muted);font-size:9px}.commission-member strong{color:var(--blue)}.toast{position:fixed;right:20px;bottom:20px;background:var(--navy);color:#fff;padding:14px 18px;border-left:4px solid var(--gold);border-radius:12px;box-shadow:var(--shadow);transform:translateY(30px);opacity:0;transition:.35s var(--ease);z-index:1600;font-size:11px;pointer-events:none}.toast.show{transform:none;opacity:1}.back-top{position:fixed;right:20px;bottom:80px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:var(--gold);color:var(--navy);font-weight:900;display:grid;place-items:center;z-index:900;opacity:0;visibility:hidden;transform:translateY(12px);transition:.35s var(--ease);box-shadow:0 15px 35px rgba(0,0,0,.2)}.back-top.show{opacity:1;visibility:visible;transform:none}.back-top:hover{transform:translateY(-4px)}

/* ===== MOTION ===== */
.reveal{opacity:1;transform:none;will-change:opacity,transform}.reveal.motion-ready{opacity:0;transform:translate3d(0,18px,0) scale(.992);filter:blur(2px)}.reveal.motion-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1),filter .62s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.loader{position:fixed;inset:0;background:#061a3a;z-index:2000;display:grid;place-items:center;color:#fff;font-weight:800;gap:12px;transition:opacity .65s var(--ease),visibility .65s var(--ease)}.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-ring{width:58px;height:58px;border:2px solid rgba(255,255,255,.12);border-top-color:var(--gold);border-right-color:var(--blue-2);border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 30px rgba(22,70,216,.35)}.loader span{position:absolute;margin-top:96px;font-size:10px;letter-spacing:2.5px}.scroll-progress{position:fixed;z-index:1200;top:0;left:0;width:100%;height:2px;transform-origin:left center;background:linear-gradient(90deg,var(--gold),var(--blue-2));box-shadow:0 0 14px rgba(63,112,255,.45);transform:scaleX(0);pointer-events:none}

@keyframes spin{to{transform:rotate(360deg)}}@keyframes aurora{0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-1%,3%,0) scale(1.02)}}@keyframes gridDrift{to{background-position:58px 58px}}@keyframes orbFloatA{50%{transform:translate(70px,30px) scale(1.12)}}@keyframes orbFloatB{50%{transform:translate(-60px,-35px) scale(.9)}}@keyframes orbFloatC{50%{transform:translate(40px,-45px) scale(1.15)}}@keyframes starDrift{to{background-position:34px 34px}}@keyframes heroOrb{50%{transform:scale(1.1);opacity:.7}}@keyframes logoFloat{50%{transform:rotate(2deg) translateY(-10px)}}@keyframes logoBreath{50%{transform:scale(1.025)}}@keyframes orbitSpin{to{transform:rotate(369deg)}}@keyframes scan{0%,100%{top:18%;opacity:0}18%{opacity:1}50%{top:82%;opacity:1}68%{opacity:0}}@keyframes statFloat{50%{transform:translateY(-10px)}}@keyframes statsSweep{50%{transform:translateX(100%)}}@keyframes visionPulse{50%{transform:scale(1.25);opacity:.7}}@keyframes gallerySpin{to{transform:rotate(360deg)}}@keyframes flowPulse{50%{transform:translateY(4px);color:var(--blue)}}@keyframes eyebrowShine{0%,68%{transform:translateX(-150%)}84%,100%{transform:translateX(260%)}}@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes modalBg{from{opacity:0}to{opacity:1}}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){nav{gap:11px}.brand{min-width:225px}.member-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.commission-grid{grid-template-columns:1fr 1fr}.footer-main{grid-template-columns:1.2fr 1fr 1fr}.hero{grid-template-columns:1fr .8fr}}
@media(max-width:900px){
  .navbar{height:72px}.navbar.scrolled{height:68px}.brand{min-width:0;flex:1}.brand strong{font-size:12px}.theme-label{display:none}.menu-toggle{display:grid;place-items:center}nav{position:absolute;left:14px;right:14px;top:calc(100% + 10px);display:grid;gap:4px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(5,18,40,.95);backdrop-filter:blur(18px);transform:translateY(-10px) scale(.98);opacity:0;visibility:hidden;transition:.35s var(--ease);box-shadow:0 25px 60px rgba(0,0,0,.25)}nav.open{transform:none;opacity:1;visibility:visible}nav a{padding:11px 12px;border-radius:10px}nav a:hover{background:rgba(255,255,255,.06)}nav a::after{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:125px;text-align:center;gap:25px}.hero p{margin:auto}.hero-actions{justify-content:center}.hero-visual{min-height:420px}.floating-stat{transform:scale(.9)}.stat-a{left:2%}.stat-b{right:2%}.stat-c{right:8%;bottom:4%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.about-grid,.leader,.vision-layout,.aspiration-layout{grid-template-columns:1fr}.leader{gap:36px}.leader-photo{min-height:380px}.member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.program-grid{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-item.wide{grid-column:span 2}.footer-main{grid-template-columns:1fr 1fr}.org-level.two,.org-level.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .section{padding:72px 18px}.hero{padding-left:18px;padding-right:18px}.hero h1{font-size:clamp(39px,12vw,58px);letter-spacing:-2.5px}.hero-visual{min-height:350px}.logo-stage{width:min(310px,78vw)}.hero-visual .orb{width:310px;height:310px}.floating-stat{min-width:105px;padding:10px 12px}.floating-stat b{font-size:17px}.floating-stat span{font-size:8px}.stat-a{left:-4px;top:18%}.stat-b{right:-4px;top:27%}.stat-c{right:0;bottom:1%}
  .stats{padding:18px;gap:10px}.stat-box{padding:14px}.stat-box b{font-size:23px}.stat-box span{font-size:9px}.feature-grid,.commission-grid,.program-grid,.agenda-grid,.transparency-grid{grid-template-columns:1fr}.member-grid{grid-template-columns:1fr 1fr;gap:11px}.member-avatar{height:170px}.org-level.two,.org-level.three{grid-template-columns:1fr;width:min(300px,100%)}.connector{height:24px}.person-card.featured{width:min(260px,100%)}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:180px}.gallery-item.tall,.gallery-item.wide{grid-row:auto;grid-column:auto}.footer-main{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{flex-direction:column}.form-row{grid-template-columns:1fr}.aspiration-info{min-height:auto;padding:25px}.aspiration-topline{margin-bottom:45px}.aspiration-form-head,.aspiration-form{padding:24px}.aspiration-form-head{flex-direction:column}.aspiration-form-bottom{align-items:stretch;flex-direction:column}.aspiration-submit{width:100%}.profile-modal{grid-template-columns:1fr}.profile-avatar{width:90px;height:90px}.commission-modal-head{grid-template-columns:1fr}.flow{gap:8px}.flow span{width:100%}.flow i{transform:rotate(0)}
}
@media(max-width:390px){.brand img{width:40px;height:40px}.brand strong{font-size:10px}.brand small{display:none}.member-grid{grid-template-columns:1fr}.member-avatar{height:210px}.stats{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr}.hero h1{font-size:36px}.section-heading h2{letter-spacing:-1.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-bg::before,.ambient-grid,.ambient-orb,.hero::after,.hero-visual .orb,.logo-stage,.logo-stage::before,.logo-stage::after,.logo-stage img,.logo-stage .scanline,.floating-stat,.eyebrow::after,.gallery-placeholder::before,.flow i,.loader-ring{animation:none!important}.reveal.motion-ready,.reveal.motion-visible{opacity:1!important;transform:none!important;transition:none!important}.btn,.feature-card,.commission-card,.program-card,.agenda-card,.trans-card,.member-card,.person-card{transition:none!important}.btn:hover,.feature-card:hover,.commission-card:hover,.program-card:hover,.agenda-card:hover,.trans-card:hover,.member-card:hover,.person-card:hover{transform:none!important}}

/* ===== V4 POLISH: RESPONSIVE MOTION + MEMBER DIRECTORY ===== */
:root{--muted:#52627b;--ink-strong:#0b1b36;--card-glow:rgba(63,112,255,.16)}
html[data-theme="dark"]{--muted:#c0cce0;--ink-strong:#f4f7ff}
.section-heading p,.about-copy p:not(.lead),.feature-card p,.commission-card p,.commission-card li,.program-card p,.agenda-card p,.trans-card p,.member-card p,.modal-card p{color:var(--muted)}
.section-heading h2,.member-card h3,.commission-card h3,.feature-card h3,.program-card h3,.agenda-card h3,.trans-card h3{color:var(--ink-strong)}
.section-dark .section-heading h2,.hero h1,.hero-content p{color:#fff}.section-dark .section-heading p{color:#d3def0}

/* smoother pointer-driven cards */
.member-card,.commission-card,.feature-card,.program-card,.agenda-card,.trans-card,.person-card,.stat-box{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0);transition:transform .16s cubic-bezier(.2,.9,.25,1),box-shadow .28s ease,border-color .25s ease;background-clip:padding-box}
.member-card::after,.commission-card::after,.feature-card::after,.program-card::after,.agenda-card::after,.trans-card::after,.person-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,transparent 20%,rgba(255,212,90,.38),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}
.member-card:hover::after,.commission-card:hover::after,.feature-card:hover::after,.program-card:hover::after,.agenda-card:hover::after,.trans-card:hover::after,.person-card:hover::after{opacity:1}
.member-card,.commission-card,.feature-card,.program-card,.agenda-card,.trans-card,.person-card{will-change:transform}

/* directory filter bar */
.member-tools{position:relative;z-index:4;padding:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);border-radius:20px;box-shadow:0 14px 35px rgba(6,26,58,.06)}
.filters button,.commission-subfilters button{font-weight:800;color:var(--ink-strong);background:var(--surface-2);border-color:var(--line)}
.filters button.active,.filters button:hover,.commission-subfilters button.active,.commission-subfilters button:hover{background:linear-gradient(135deg,var(--navy),#173e86);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(6,26,58,.16)}
.commission-subfilters{padding:10px 0 2px;position:relative;z-index:3}.commission-subfilters[hidden]{display:none}

/* robust member photos with elegant fallback */
.photo-frame{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 35% 20%,#668cff 0,#193c8c 34%,#071b40 78%);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 35px rgba(255,255,255,.08),0 16px 34px rgba(6,26,58,.18)}
.photo-frame::before{content:"";position:absolute;inset:8%;border:1px solid rgba(255,212,90,.35);border-radius:24%;transform:rotate(8deg);animation:photoOrbit 8s linear infinite;pointer-events:none;z-index:2}
.photo-frame::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.24) 48%,transparent 58%);transform:translateX(-70%) rotate(8deg);animation:photoSweep 5.5s ease-in-out infinite;pointer-events:none;z-index:3}
.photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 24%;z-index:1;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.photo-frame:hover img{transform:scale(1.06);filter:saturate(1.08) contrast(1.03)}
.photo-initials{position:relative;z-index:0;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1px;text-shadow:0 5px 22px rgba(0,0,0,.28)}
.photo-frame.has-photo .photo-initials{opacity:0}
.member-photo{width:100%;height:205px;border-radius:15px}
.org-photo{width:72px;height:72px;border-radius:21px}.person-card.featured .org-photo{width:92px;height:92px;border-radius:26px}

/* member card typography and interaction */
.member-card{padding:11px}.member-card-body{padding:0 5px 5px}.member-card h3{font-size:15px;line-height:1.35;margin-top:4px}.member-card p{line-height:1.45}.member-division{color:var(--blue)!important;font-weight:800}.member-card button{position:relative;z-index:5;color:var(--blue-2);padding:7px 0;font-weight:900}.member-card button:hover{color:var(--navy);transform:translateX(4px)}

/* polished commission modal */
.modal{background:radial-gradient(circle at 50% 15%,rgba(39,89,194,.22),transparent 35%),rgba(0,8,20,.78)}
.modal-card{max-width:720px;padding:34px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 88%,#dbe8ff));border-color:color-mix(in srgb,var(--blue) 20%,var(--line));box-shadow:0 40px 120px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset}
.modal-close{z-index:5;transition:transform .4s var(--ease),background .25s,color .25s}.modal-close:hover{background:var(--navy);color:#fff}
.profile-modal{grid-template-columns:170px 1fr;gap:28px;align-items:center}.profile-photo-wrap{display:grid;place-items:center}.profile-photo{width:170px;height:205px;border-radius:30px}.profile-copy h3{font-size:clamp(24px,4vw,34px);line-height:1.08;margin:8px 0 14px;color:var(--ink-strong)}.profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px}.profile-meta span{display:grid;gap:3px;padding:10px 12px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);font-size:11px;color:var(--muted)}.profile-meta b{font-size:8px;letter-spacing:1.1px;text-transform:uppercase;color:var(--blue);font-weight:900}.profile-copy blockquote{margin-top:14px;padding:13px 15px;border-left:3px solid var(--gold);background:rgba(245,185,0,.08);border-radius:0 13px 13px 0;color:var(--ink-strong);font-size:12px;font-weight:700}
.commission-modal-head{grid-template-columns:78px 1fr;gap:20px;padding-right:36px}.commission-letter.big{width:70px;height:70px;border-radius:21px;font-size:26px}.commission-modal-head h3{font-size:clamp(22px,4vw,32px);line-height:1.1;color:var(--ink-strong);margin:7px 0}.commission-modal-head p{max-width:590px;line-height:1.65}.commission-member-list{margin-top:26px}.modal-section-label{color:var(--blue);letter-spacing:1.7px}.commission-member-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.commission-member{margin:0;padding:12px;border-radius:17px;background:linear-gradient(145deg,var(--surface),var(--surface-2));border-color:var(--line);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}.commission-member:hover{transform:translateY(-4px);border-color:rgba(22,70,216,.28);box-shadow:0 16px 34px rgba(6,26,58,.12)}.commission-photo{display:grid;place-items:center}.commission-photo-frame{width:58px;height:58px;border-radius:17px}.commission-photo-frame::before{inset:7%;border-radius:25%}.commission-photo-frame::after{animation-duration:4.2s}.commission-photo-frame .photo-initials{font-size:17px}.commission-member-copy{min-width:0}.commission-member-copy b{display:block;color:var(--ink-strong);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.commission-member-copy small{color:var(--muted)!important;margin-top:3px}.commission-member strong{color:var(--blue-2);font-size:16px}

/* mobile touch-friendly motion: no tilt, but add press depth */
@media (hover:none){.member-card:active,.commission-card:active,.person-card:active{--lift:-3px}.photo-frame:active img{transform:scale(1.04)}}
@media(max-width:700px){.member-tools{align-items:stretch}.member-search-wrap{min-width:100%}.filters{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.filters button{min-height:42px;padding:8px 6px}.commission-subfilters{display:grid;grid-template-columns:repeat(3,1fr)}.commission-subfilters button{min-height:40px}.member-photo{height:180px}.profile-modal{grid-template-columns:1fr;gap:18px}.profile-photo{width:130px;height:155px}.profile-copy{text-align:left}.profile-meta{grid-template-columns:1fr 1fr}.commission-member-grid{grid-template-columns:1fr}.commission-modal-head{grid-template-columns:62px 1fr;gap:13px}.commission-letter.big{width:58px;height:58px}.modal-card{padding:25px 18px;border-radius:22px}.commission-member{padding:10px}.commission-photo-frame{width:52px;height:52px}}
@media(max-width:420px){.filters{grid-template-columns:1fr}.commission-subfilters{grid-template-columns:1fr 1fr}.member-photo{height:210px}.profile-meta{grid-template-columns:1fr}.commission-modal-head{grid-template-columns:1fr}.modal-card{max-height:92vh}}

@keyframes photoOrbit{to{transform:rotate(368deg)}}
@keyframes photoSweep{0%,62%{transform:translateX(-75%) rotate(8deg);opacity:0}72%{opacity:1}92%,100%{transform:translateX(75%) rotate(8deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.photo-frame::before,.photo-frame::after{animation:none!important}.member-card,.commission-card,.feature-card,.program-card,.agenda-card,.trans-card,.person-card{transition:none!important}}

/* V5 MOTION + STRAIGHT ORGANIZATION */
.org-chart .person-card,.org-chart .person-card:hover{--rx:0deg!important;--ry:0deg!important}
.org-chart .person-card::after{display:none}
.org-chart .person-card{will-change:transform}
@media(max-width:900px){.org-level.two,.org-level.three{grid-template-columns:repeat(3,minmax(150px,1fr));gap:14px}}
@media(max-width:700px){.org-chart{max-width:520px}.org-level.two,.org-level.three{grid-template-columns:1fr;width:min(280px,100%);gap:12px}.org-level.two .person-card,.org-level.three .person-card{min-height:136px}.connector{height:28px}}

/* ===== V6: STRAIGHT + CENTERED ORGANIZATION ===== */
/* The organization tree must never inherit the global 3D card transform. */
.org-chart,
.org-chart *{box-sizing:border-box}
.org-chart{width:100%;max-width:980px;margin-inline:auto;padding:18px 0 36px;overflow:visible}
.org-chart > .org-level{width:100%;display:grid;place-items:center}
.org-chart > .org-level:first-child{margin-inline:auto}
.org-chart .person-card,
.org-chart .person-card:hover,
.org-chart .person-card:focus-visible,
.org-chart .person-card:active{
  transform:translate3d(0,var(--org-lift,0px),0)!important;
  rotate:none!important;
  scale:1!important;
  skew:none!important;
  perspective:none!important;
  will-change:auto;
}
.org-chart .person-card:hover{--org-lift:-4px}
.org-chart .person-card:active{--org-lift:-2px}
.org-chart .person-card.featured{width:min(320px,100%);justify-self:center}
.org-chart .org-level.two,
.org-chart .org-level.three{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,220px));
  justify-content:center;
  align-items:stretch;
  gap:22px;
}
.org-chart .org-level.two .person-card,
.org-chart .org-level.three .person-card{width:100%;min-width:0}
.org-chart .connector{margin-inline:auto}
.org-chart .person-card::before,
.org-chart .person-card::after{pointer-events:none}

@media(max-width:900px){
  .org-chart{max-width:760px;padding-inline:16px}
  .org-chart .org-level.two,
  .org-chart .org-level.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}

@media(max-width:620px){
  .org-chart{width:100%;max-width:560px;padding:16px 0 28px;margin-inline:auto}
  .org-chart > .org-level,
  .org-chart .org-level.two,
  .org-chart .org-level.three{
    width:100%;
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
  }
  .org-chart .org-level.two .person-card,
  .org-chart .org-level.three .person-card,
  .org-chart .person-card,
  .org-chart .person-card.featured{
    width:min(100%,420px);
    min-width:0;
    margin-inline:auto;
  }
  .org-chart .person-card{min-height:148px;padding:20px 18px}
  .org-chart .person-card.featured{min-height:168px;padding:22px 18px}
  .org-chart .connector{height:26px}
}

@media(max-width:390px){
  .org-chart{padding-inline:10px}
  .org-chart .person-card,
  .org-chart .person-card.featured{width:100%}
}


/* V8: transparent PNG/WebP portraits blend into the website instead of sitting on a solid photo tile. */
.photo-frame.transparent-photo{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
.photo-frame.transparent-photo img{
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.20));
}
.photo-frame.transparent-photo::before{
  inset:4%;
  border-color:rgba(255,212,90,.22);
  border-radius:28%;
}
.photo-frame.transparent-photo::after{
  opacity:.45;
}
.photo-frame.transparent-photo:hover img{
  transform:scale(1.045);
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.24)) saturate(1.04);
}
.member-card .transparent-photo{
  min-height:205px;
}
.leader-photo.transparent-photo{
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
.leader-photo.transparent-photo::after{
  inset:8%;
  border-color:rgba(255,212,90,.20);
  pointer-events:none;
}
.leader-photo.transparent-photo img{
  object-fit:contain;
  padding:8px;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.24));
}
@media(max-width:700px){
  .member-card .transparent-photo{min-height:180px}
  .leader-photo.transparent-photo{min-height:380px}
}
@media(prefers-reduced-motion:reduce){
  .photo-frame.transparent-photo::before,.photo-frame.transparent-photo::after{animation:none!important}
}

/* ===== V9: REAL PORTRAIT CUTOUT =====
   White backgrounds embedded inside uploaded photos are removed in JS.
   The resulting canvas keeps the subject while the website background shows through. */
.photo-frame.cutout-ready img{display:none!important}
.photo-frame.cutout-ready canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  z-index:1;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.20));
}
.photo-frame.cutout-ready:hover canvas{transform:scale(1.045);filter:drop-shadow(0 20px 28px rgba(0,0,0,.24)) saturate(1.04)}
.photo-frame.cutout-ready{background:transparent!important;box-shadow:none!important}
.photo-frame.cutout-ready .photo-initials{opacity:0}
.photo-frame.cutout-ready::before{z-index:2}
.photo-frame.cutout-ready::after{z-index:3}
.leader-photo.cutout-ready canvas{padding:8px;object-fit:contain}
.leader-photo.cutout-ready{
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.leader-photo.cutout-ready::after{
  border-color:rgba(255,212,90,.18);
  pointer-events:none;
  z-index:2;
}
.leader-photo.cutout-ready img{display:none!important}
.leader-photo.cutout-ready canvas{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  object-fit:contain;
  object-position:center bottom;
  z-index:1;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.24));
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.leader-photo.cutout-ready:hover canvas{
  transform:scale(1.018);
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.27)) saturate(1.03);
}
@media(hover:none){.photo-frame.cutout-ready:active canvas{transform:scale(1.025)}}



/* V12: leader cutout / transparent portrait */
.leader-photo.cutout-ready {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.leader-photo.cutout-ready::before,
.leader-photo.cutout-ready::after { pointer-events:none; }
.leader-photo.cutout-ready canvas {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
  z-index:1 !important;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.24));
}
.leader-photo.cutout-ready::after { z-index:2 !important; }

/* ===== LEADER QUOTE POLISH ===== */
.leader-copy{
  width:100%;
  min-width:0;
}

.leader-copy blockquote{
  width:min(100%, 680px);
  max-width:680px;
  box-sizing:border-box;
  margin:30px auto 26px;
  padding:28px clamp(20px,4vw,44px);
  border:1px solid rgba(11,53,168,.14);
  border-left:4px solid var(--gold);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(22,70,216,.045),rgba(245,185,0,.035));
  text-align:center;
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.65;
  font-weight:500;
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:normal;
  box-shadow:0 14px 35px rgba(6,26,58,.055);
}

.leader-copy > p:not(.gold-text):not(.signature){
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:900px){
  .leader-copy{text-align:center}
  .leader-copy blockquote{margin-top:26px}
}

@media(max-width:620px){
  .leader-copy blockquote{
    width:100%;
    padding:22px 18px;
    border-left-width:3px;
    border-radius:18px;
    font-size:18px;
    line-height:1.6;
  }
}

/* ===== PHOTO BOUNDARY HARD FIX =====
   Uploaded portraits must NEVER escape their frame. The image is fitted
   inside the existing box without cropping or scaling outside the box. */
.photo-frame,
.photo-frame.transparent-photo,
.photo-frame.cutout-ready,
.leader-photo,
.leader-photo.transparent-photo,
.leader-photo.cutout-ready {
  overflow: hidden !important;
  contain: paint;
}

.photo-frame img,
.photo-frame.transparent-photo img,
.photo-frame.cutout-ready canvas,
.leader-photo img,
.leader-photo.transparent-photo img,
.leader-photo.cutout-ready canvas {
  box-sizing: border-box !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.photo-frame:hover img,
.photo-frame.transparent-photo:hover img,
.photo-frame.cutout-ready:hover canvas,
.leader-photo:hover img,
.leader-photo.transparent-photo:hover img,
.leader-photo.cutout-ready:hover canvas,
.photo-frame:active img,
.photo-frame.cutout-ready:active canvas {
  transform: none !important;
}

/* Keep the decorative border inside the same clipping area. */
.photo-frame::before,
.photo-frame::after,
.leader-photo::before,
.leader-photo::after {
  pointer-events: none;
}

/* ===== FINAL PHOTO CONTAINMENT v10 =====
   Strictly contain every uploaded portrait inside its assigned frame.
   Never crop, enlarge outside the frame, or allow transparent cutouts to overflow. */
.photo-frame,
.member-photo,
.org-photo,
.profile-photo,
.commission-photo-frame,
.leader-photo {
  overflow: hidden !important;
  clip-path: inset(0 round 15px);
  isolation: isolate;
  box-sizing: border-box !important;
}

.photo-frame > img,
.photo-frame > canvas,
.member-avatar > img,
.member-avatar > canvas,
.leader-photo > img,
.leader-photo > canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.photo-frame:hover > img,
.photo-frame:hover > canvas,
.photo-frame:active > img,
.photo-frame:active > canvas,
.leader-photo:hover > img,
.leader-photo:hover > canvas,
.leader-photo:active > img,
.leader-photo:active > canvas {
  transform: none !important;
}

/* Keep the large Ketua Umum portrait strictly inside its card. */
.leader-photo {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 18px !important;
}
.leader-photo > img,
.leader-photo > canvas {
  position: relative !important;
  inset: auto !important;
  flex: 0 1 auto !important;
}

/* Member and structure portraits use the same strict containment rule. */
.member-avatar,
.photo-frame.org-photo,
.photo-frame.member-photo,
.photo-frame.profile-photo {
  overflow: hidden !important;
  clip-path: inset(0 round 15px);
}

.photo-frame.transparent-photo,
.photo-frame.cutout-ready {
  overflow: hidden !important;
  clip-path: inset(0 round 15px);
  contain: paint !important;
}

.photo-frame.transparent-photo > img,
.photo-frame.cutout-ready > canvas {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  transform: none !important;
}

/* ===== PHOTO SYSTEM v16 — HARD FRAME + AUTO CROP =====
   Satu aturan untuk semua foto profil: foto selalu dipotong/fitted di dalam frame.
   Default = cover, sehingga gambar yang melewati rasio frame otomatis ter-crop.
   Mode dapat diubah dari Admin tanpa mengubah ukuran frame. */
.photo-frame,
.leader-photo,
.member-avatar,
.photo-preview {
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  isolation: isolate;
}

.photo-frame > img,
.photo-frame > canvas,
.leader-photo > img,
.leader-photo > canvas,
.member-avatar > img,
.member-avatar > canvas,
.photo-preview > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

/* Profile modes */
.photo-frame.photo-mode-contain > img,
.photo-frame.photo-mode-contain > canvas,
.leader-photo.photo-mode-contain > img,
.leader-photo.photo-mode-contain > canvas,
.photo-preview.photo-preview-contain > img { object-fit: contain !important; }
.photo-frame.photo-mode-top > img,
.photo-frame.photo-mode-top > canvas,
.leader-photo.photo-mode-top > img,
.leader-photo.photo-mode-top > canvas,
.photo-preview.photo-preview-top > img { object-position: center 18% !important; }
.photo-frame.photo-mode-center > img,
.photo-frame.photo-mode-center > canvas,
.leader-photo.photo-mode-center > img,
.leader-photo.photo-mode-center > canvas,
.photo-preview.photo-preview-center > img { object-position: center center !important; }
.photo-frame.photo-mode-bottom > img,
.photo-frame.photo-mode-bottom > canvas,
.leader-photo.photo-mode-bottom > img,
.leader-photo.photo-mode-bottom > canvas,
.photo-preview.photo-preview-bottom > img { object-position: center 82% !important; }

/* Fixed, predictable frame ratios */
.leader-photo { aspect-ratio: 4 / 5 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; }
.member-avatar { aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; }
.photo-frame.org-photo { width: 62px !important; height: 62px !important; }
.photo-frame.member-photo { width: 100% !important; height: 205px !important; }
.photo-frame.profile-photo { width: 170px !important; height: 205px !important; }
.photo-frame.commission-photo-frame { width: 58px !important; height: 58px !important; }

/* Never let hover animations enlarge a portrait beyond the frame. */
.photo-frame:hover > img,
.photo-frame:hover > canvas,
.leader-photo:hover > img,
.leader-photo:hover > canvas,
.photo-frame:active > img,
.photo-frame:active > canvas,
.leader-photo:active > img,
.leader-photo:active > canvas { transform: none !important; }

@media (max-width:700px){
  .leader-photo { aspect-ratio: 4 / 5 !important; min-height: 0 !important; }
  .photo-frame.member-photo { height: 180px !important; }
  .photo-frame.profile-photo { width: 130px !important; height: 155px !important; }
}

/* ===== PHOTO SYSTEM — RESPONSIVE HARD FRAME + AUTO CROP ===== */
/* Semua foto mengikuti ukuran container yang sudah responsif. Tidak ada lagi
   height/width desktop-mobile yang terpisah untuk foto. */
.photo-frame,.leader-photo,.member-avatar,.photo-preview{
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  isolation:isolate;
}

.photo-frame>img,.photo-frame>canvas,.leader-photo>img,.leader-photo>canvas,
.member-avatar>img,.member-avatar>canvas,.photo-preview>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

/* Cover adalah default: foto selalu terkunci di dalam frame dan otomatis crop. */
.photo-frame.photo-mode-contain>img,.photo-frame.photo-mode-contain>canvas,
.leader-photo.photo-mode-contain>img,.leader-photo.photo-mode-contain>canvas,
.photo-preview.photo-preview-contain>img{object-fit:contain!important}
.photo-frame.photo-mode-top>img,.photo-frame.photo-mode-top>canvas,
.leader-photo.photo-mode-top>img,.leader-photo.photo-mode-top>canvas,
.photo-preview.photo-preview-top>img{object-position:center 18%!important}
.photo-frame.photo-mode-center>img,.photo-frame.photo-mode-center>canvas,
.leader-photo.photo-mode-center>img,.leader-photo.photo-mode-center>canvas,
.photo-preview.photo-preview-center>img{object-position:center center!important}
.photo-frame.photo-mode-bottom>img,.photo-frame.photo-mode-bottom>canvas,
.leader-photo.photo-mode-bottom>img,.leader-photo.photo-mode-bottom>canvas,
.photo-preview.photo-preview-bottom>img{object-position:center 82%!important}

/* Ukuran berasal dari layout/container, bukan breakpoint terpisah. */
.leader-photo{
  width:100%!important;
  aspect-ratio:4 / 5!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
}
.member-avatar{
  width:100%!important;
  aspect-ratio:4 / 5!important;
  height:auto!important;
  min-height:0!important;
}
.photo-frame.org-photo{width:100%!important;aspect-ratio:1 / 1!important;height:auto!important}
.photo-frame.member-photo{width:100%!important;aspect-ratio:4 / 5!important;height:auto!important}
.photo-frame.profile-photo{width:min(170px,100%)!important;aspect-ratio:4 / 5!important;height:auto!important}
.photo-frame.commission-photo-frame{width:100%!important;aspect-ratio:1 / 1!important;height:auto!important}

/* Tidak boleh ada zoom yang membuat konten tampak melewati boundary. */
.photo-frame:hover>img,.photo-frame:hover>canvas,.leader-photo:hover>img,.leader-photo:hover>canvas,
.photo-frame:active>img,.photo-frame:active>canvas,.leader-photo:active>img,.leader-photo:active>canvas{transform:none!important}

/* Mobile hanya mengubah layout kartu; frame foto tetap mengikuti rasio yang sama. */
@media(max-width:700px){
  .leader-photo{width:100%!important;aspect-ratio:4 / 5!important}
  .photo-frame.member-photo{width:100%!important;aspect-ratio:4 / 5!important}
  .photo-frame.profile-photo{width:min(130px,100%)!important;aspect-ratio:4 / 5!important}
}


/* ================================================================
   FINAL PHOTO BOUNDARY — SINGLE SOURCE OF TRUTH
   Foto tidak pernah boleh keluar dari frame.
   Default: COVER + AUTO CROP. Semua ukuran tetap responsif.
   ================================================================ */
.photo-frame,
.leader-photo,
.member-avatar,
.photo-preview {
  position: relative !important;
  overflow: hidden !important;
  clip-path: inset(0 round 15px) !important;
  contain: paint !important;
  box-sizing: border-box !important;
}

.photo-frame > img,
.photo-frame > canvas,
.leader-photo > img,
.leader-photo > canvas,
.member-avatar > img,
.member-avatar > canvas,
.photo-preview > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

/* Fokus crop tetap berada DI DALAM frame. */
.photo-frame.photo-mode-top > img,
.photo-frame.photo-mode-top > canvas,
.leader-photo.photo-mode-top > img,
.leader-photo.photo-mode-top > canvas,
.photo-preview.photo-preview-top > img { object-position: center 18% !important; }

.photo-frame.photo-mode-center > img,
.photo-frame.photo-mode-center > canvas,
.leader-photo.photo-mode-center > img,
.leader-photo.photo-mode-center > canvas,
.photo-preview.photo-preview-center > img { object-position: center 50% !important; }

.photo-frame.photo-mode-bottom > img,
.photo-frame.photo-mode-bottom > canvas,
.leader-photo.photo-mode-bottom > img,
.leader-photo.photo-mode-bottom > canvas,
.photo-preview.photo-preview-bottom > img { object-position: center 82% !important; }

.photo-frame.photo-mode-contain > img,
.photo-frame.photo-mode-contain > canvas,
.leader-photo.photo-mode-contain > img,
.leader-photo.photo-mode-contain > canvas,
.photo-preview.photo-preview-contain > img { object-fit: contain !important; }

/* Frame responsif: tidak ada pixel height desktop/mobile untuk foto. */
.leader-photo {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.member-avatar,
.photo-frame.member-photo {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
}

.photo-frame.org-photo,
.photo-frame.commission-photo-frame {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

.photo-frame.profile-photo {
  width: min(170px, 100%) !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
}

/* Animasi/hover TIDAK BOLEH mengubah batas foto. */
.photo-frame > img:hover,
.photo-frame > canvas:hover,
.photo-frame:hover > img,
.photo-frame:hover > canvas,
.leader-photo:hover > img,
.leader-photo:hover > canvas,
.member-avatar:hover > img,
.member-avatar:hover > canvas,
.photo-frame:active > img,
.photo-frame:active > canvas,
.leader-photo:active > img,
.leader-photo:active > canvas {
  transform: none !important;
}

@media (max-width: 700px) {
  .leader-photo,
  .member-avatar,
  .photo-frame.member-photo {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
  }
  .photo-frame.profile-photo {
    width: min(130px, 100%) !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
  }
}

/* ========================================================================
   UNIFIED PROFILE PHOTO SYSTEM v20
   One boundary system for EVERY portrait: leader, members, org chart,
   commission cards, profile modal and admin preview.
   The responsive layout owns the frame size; the media can never escape it.
   ======================================================================== */

/* Every portrait container is the actual clipping boundary. */
.leader-photo,
.photo-frame,
.member-avatar,
.photo-preview,
.commission-photo-frame {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  box-sizing: border-box !important;
  transform: translateZ(0) !important;
}

/* Inner viewport. Keeping a separate viewport prevents image/canvas rules
   from accidentally sizing themselves against the surrounding card. */
.leader-photo > .photo-media,
.photo-frame > .photo-media,
.member-avatar > .photo-media,
.photo-preview > .photo-media,
.commission-photo-frame > .photo-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  border-radius: inherit !important;
}

/* Legacy/direct children are also locked, so old markup cannot bypass it. */
.leader-photo > img,
.leader-photo > canvas,
.photo-frame > img,
.photo-frame > canvas,
.member-avatar > img,
.member-avatar > canvas,
.photo-preview > img,
.photo-preview > canvas,
.photo-media > img,
.photo-media > canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  object-fit: cover !important;
  object-position: center 50% !important;
  transform: none !important;
  overflow: hidden !important;
}

/* Crop presets are shared by every portrait type. */
.photo-mode-top > .photo-media > img,
.photo-mode-top > .photo-media > canvas,
.photo-mode-top > img,
.photo-mode-top > canvas { object-position: center 18% !important; }

.photo-mode-center > .photo-media > img,
.photo-mode-center > .photo-media > canvas,
.photo-mode-center > img,
.photo-mode-center > canvas { object-position: center 50% !important; }

.photo-mode-bottom > .photo-media > img,
.photo-mode-bottom > .photo-media > canvas,
.photo-mode-bottom > img,
.photo-mode-bottom > canvas { object-position: center 82% !important; }

.photo-mode-contain > .photo-media > img,
.photo-mode-contain > .photo-media > canvas,
.photo-mode-contain > img,
.photo-mode-contain > canvas { object-fit: contain !important; }

/* Responsive frame ratios — no desktop/mobile pixel heights. */
.leader-photo,
.photo-frame.member-photo,
.member-avatar,
.photo-frame.profile-photo {
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

.photo-frame.org-photo {
  aspect-ratio: 1 / 1 !important;
  width: 62px !important;
  height: 62px !important;
}
.photo-frame.commission-photo-frame {
  aspect-ratio: 1 / 1 !important;
  width: 58px !important;
  height: 58px !important;
}

.photo-frame.profile-photo { width: min(170px, 100%) !important; }

/* The leader uses a real inner photo viewport with breathing room. */
.leader-photo {
  padding: clamp(12px, 2vw, 18px) !important;
  border-radius: 30px !important;
}
.leader-photo > .photo-media {
  inset: clamp(12px, 2vw, 18px) !important;
  width: calc(100% - clamp(24px, 4vw, 36px)) !important;
  height: calc(100% - clamp(24px, 4vw, 36px)) !important;
  border-radius: 22px !important;
}
.leader-photo > .photo-media > img,
.leader-photo > .photo-media > canvas {
  border-radius: inherit !important;
}

/* Member cards inherit their existing responsive grid width. */
.photo-frame.member-photo { border-radius: 15px !important; }
.member-avatar { border-radius: 15px !important; }
.photo-frame.org-photo { border-radius: 18px !important; }
.photo-frame.commission-photo-frame { border-radius: 14px !important; }

/* Profile modal photo stays responsive instead of fixed desktop/mobile sizes. */
.profile-photo-wrap .photo-frame.profile-photo {
  width: min(170px, 42vw) !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
}

/* Decorative borders stay above the media, never act as the clipping system. */
.leader-photo::after,
.photo-frame::after {
  pointer-events: none !important;
  z-index: 5 !important;
}

/* No hover/active transform is allowed on the media itself. */
.leader-photo img:hover,
.leader-photo canvas:hover,
.photo-frame img:hover,
.photo-frame canvas:hover,
.leader-photo:hover img,
.leader-photo:hover canvas,
.photo-frame:hover img,
.photo-frame:hover canvas,
.leader-photo:active img,
.leader-photo:active canvas,
.photo-frame:active img,
.photo-frame:active canvas {
  transform: none !important;
}

/* Fallback initials remain centered inside the same viewport. */
.photo-media > .photo-initials {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1 !important;
}
.photo-frame.has-photo > .photo-media > .photo-initials { display: none !important; }

/* Admin preview uses exactly the same crop behavior as the live website. */
.photo-preview {
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  height: auto !important;
}
.photo-preview > img,
.photo-preview > canvas { object-fit: cover !important; }
.photo-preview.photo-preview-contain > img,
.photo-preview.photo-preview-contain > canvas { object-fit: contain !important; }
.photo-preview.photo-preview-top > img,
.photo-preview.photo-preview-top > canvas { object-position: center 18% !important; }
.photo-preview.photo-preview-center > img,
.photo-preview.photo-preview-center > canvas { object-position: center 50% !important; }
.photo-preview.photo-preview-bottom > img,
.photo-preview.photo-preview-bottom > canvas { object-position: center 82% !important; }

@media (max-width: 700px) {
  .profile-photo-wrap .photo-frame.profile-photo { width: min(140px, 42vw) !important; }
}

/* ===== LEADER PORTRAIT CLEAN FRAME =====
   The portrait boundary is functional only. Remove decorative frame lines
   so the cutout blends naturally into the section background. */
.leader-photo::before,
.leader-photo::after,
.leader-photo.transparent-photo::before,
.leader-photo.transparent-photo::after,
.leader-photo.cutout-ready::before,
.leader-photo.cutout-ready::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Keep the actual image/canvas clipped by the real photo container. */
.leader-photo,
.leader-photo.transparent-photo,
.leader-photo.cutout-ready {
  overflow: hidden !important;
  contain: paint !important;
}

/* ===== PROFILE PHOTO CLEANUP — NO DECORATIVE LINES =====
   The photo boundary is structural only. Do not draw orbit/sweep graphics over
   transparent portrait cutouts; otherwise they can look like leftover background. */
.photo-frame.transparent-photo::before,
.photo-frame.transparent-photo::after,
.photo-frame.cutout-ready::before,
.photo-frame.cutout-ready::after,
.leader-photo.transparent-photo::before,
.leader-photo.transparent-photo::after,
.leader-photo.cutout-ready::before,
.leader-photo.cutout-ready::after,
.profile-photo::before,
.profile-photo::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  border: 0 !important;
  background: none !important;
}

/* Never expose the original transparent asset outside its viewport. */
.photo-frame.transparent-photo,
.photo-frame.cutout-ready,
.leader-photo.transparent-photo,
.leader-photo.cutout-ready,
.profile-photo {
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
}

.photo-frame.cutout-ready canvas,
.leader-photo.cutout-ready canvas {
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   MPK UI/UX REWORK — subtle, premium, low-distraction motion
   ========================================================= */
:root{
  --ui-ease:cubic-bezier(.2,.8,.2,1);
  --ui-ease-soft:cubic-bezier(.16,1,.3,1);
  --ui-glass:rgba(255,255,255,.075);
  --ui-glass-line:rgba(255,255,255,.13);
  --ui-focus:rgba(245,185,0,.34);
}

/* Softer global rhythm */
::selection{background:rgba(245,185,0,.28);color:inherit}
html{scroll-behavior:smooth}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Premium scroll progress */
.scroll-progress{
  height:3px !important;
  transform-origin:left center !important;
  background:linear-gradient(90deg,#3f70ff,#ffd45a,#fff0a8) !important;
  box-shadow:0 0 18px rgba(255,212,90,.45) !important;
  z-index:3000 !important;
}

/* Navigation: clearer hierarchy + softer active state */
.navbar{
  transition:
    background .45s var(--ui-ease),
    box-shadow .45s var(--ui-ease),
    height .45s var(--ui-ease),
    transform .45s var(--ui-ease);
}
.navbar:not(.scrolled){
  background:linear-gradient(180deg,rgba(5,19,43,.55),rgba(5,19,43,.18));
}
.navbar.scrolled{
  border-bottom-color:rgba(255,255,255,.08);
}
nav a{
  border-radius:999px;
  padding:9px 11px;
  transition:color .25s ease,background .3s var(--ui-ease),transform .3s var(--ui-ease);
}
nav a::after{bottom:3px}
nav a:hover{
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
nav a.active{
  background:rgba(255,255,255,.08);
}
.theme-toggle,.menu-toggle{
  transition:transform .35s var(--ui-ease),background .35s var(--ui-ease),border-color .35s var(--ui-ease),box-shadow .35s var(--ui-ease);
}
.theme-toggle:hover,.menu-toggle:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* Hero: more depth without adding visual noise */
.hero-content,.hero-visual{
  will-change:transform,opacity;
}
.hero-glow{
  filter:blur(4px);
  opacity:.7;
}
.hero-content .eyebrow,
.hero-content .badge{
  animation:uiFloatIn .8s var(--ui-ease-soft) both;
}
.hero-content h1{
  letter-spacing:-.035em;
}
.hero-content .accent,
.hero-content .hero-accent{
  position:relative;
}
.hero-content .accent::after,
.hero-content .hero-accent::after{
  content:"";
  position:absolute;
  left:0;
  right:10%;
  bottom:-3px;
  height:1px;
  transform:scaleX(.35);
  transform-origin:left;
  background:linear-gradient(90deg,rgba(255,212,90,.9),transparent);
  animation:uiLineReveal 1s .45s var(--ui-ease-soft) forwards;
}

/* Buttons: tactile but restrained */
.btn,.hero-actions a,.primary-btn,.secondary-btn{
  transition:
    transform .35s var(--ui-ease),
    box-shadow .35s var(--ui-ease),
    background .35s ease,
    border-color .35s ease;
}
.btn:hover,.hero-actions a:hover,.primary-btn:hover,.secondary-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(6,26,58,.18);
}
.btn:active,.hero-actions a:active,.primary-btn:active,.secondary-btn:active{
  transform:translateY(-1px) scale(.985);
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ui-focus);
  outline-offset:3px;
}

/* Sections: elegant separators */
.section{
  isolation:isolate;
}
.section::before{
  content:"";
  position:absolute;
  top:0;
  left:clamp(18px,8vw,120px);
  right:clamp(18px,8vw,120px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,70,216,.14),transparent);
  pointer-events:none;
}
.section-dark::before{
  background:linear-gradient(90deg,transparent,rgba(255,212,90,.22),transparent);
}

/* Cards: consistent depth + hover lift */
.card,.program-card,.member-card,.commission-card,.faq-item,.feature-card,.agenda-card,.gallery-card,.relation-card{
  transition:
    transform .45s var(--ui-ease),
    box-shadow .45s var(--ui-ease),
    border-color .35s ease,
    background .35s ease;
}
.card:hover,.program-card:hover,.member-card:hover,.commission-card:hover,.faq-item:hover,.feature-card:hover,.agenda-card:hover,.gallery-card:hover,.relation-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(6,26,58,.12);
}

/* Prevent profile media from inheriting card hover transforms */
.photo-frame,.leader-photo,.profile-photo{
  transition:box-shadow .35s ease,filter .35s ease !important;
}
.photo-frame:hover,.leader-photo:hover,.profile-photo:hover{
  transform:none !important;
}

/* Image treatment: subtle zoom on the media, never on the cutout itself */
.photo-frame img,.leader-photo img,.gallery-card img{
  transition:transform .7s var(--ui-ease-soft),filter .5s ease !important;
}
.member-card:hover .photo-frame img,
.gallery-card:hover img{
  transform:scale(1.025) !important;
}

/* Stat numbers feel alive once revealed */
.stat-item,.stat-card{
  transition:transform .45s var(--ui-ease),opacity .45s ease;
}
.stat-item:hover,.stat-card:hover{
  transform:translateY(-4px);
}

/* Reveal motion: shorter and more natural */
.reveal.motion-ready{
  opacity:0;
  transform:translateY(16px);
}
.reveal.motion-ready.motion-visible{
  opacity:1;
  transform:none;
  transition:
    opacity .7s var(--ui-ease-soft),
    transform .7s var(--ui-ease-soft);
  transition-delay:var(--reveal-delay,0ms);
}

/* Toast/modal polish */
.modal{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.modal-card{
  animation:uiModalIn .45s var(--ui-ease-soft) both;
}
.toast{
  box-shadow:0 18px 50px rgba(0,0,0,.2);
}

/* Back-to-top: unobtrusive floating control */
.back-top{
  transition:opacity .35s ease,transform .45s var(--ui-ease),box-shadow .35s ease !important;
}
.back-top:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 14px 34px rgba(6,26,58,.22);
}

/* Ambient background moves very slowly so it reads as atmosphere, not animation */
.ambient-bg::before{animation-duration:24s !important}
.ambient-grid{animation-duration:28s !important}
.orb-a{animation-duration:19s !important}
.orb-b{animation-duration:23s !important}
.orb-c{animation-duration:21s !important}

/* Mobile navigation */
@media (max-width:900px){
  .navbar{height:70px;padding-inline:16px}
  .brand{min-width:0;flex:1}
  .brand span{display:none}
  .brand img{width:42px;height:42px}
  .nav-tools{margin-left:auto}
  nav{
    position:absolute;
    top:calc(100% + 10px);
    left:12px;
    right:12px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    background:rgba(5,18,40,.9);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 24px 60px rgba(0,0,0,.25);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.98);
    transform-origin:top center;
    transition:opacity .3s ease,transform .35s var(--ui-ease),visibility .3s ease;
  }
  nav.open{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  nav a{padding:11px 13px}
  .menu-toggle{display:inline-grid;place-items:center}
  .theme-label{display:none}
}
@media (max-width:560px){
  .section{padding-top:72px;padding-bottom:72px}
  .hero-content h1{font-size:clamp(38px,11vw,58px)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions a{width:100%;text-align:center}
  .ambient-grid{opacity:.09}
  .ambient-orb{opacity:.22}
}

/* Accessibility: respect OS motion preference */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Keyframes intentionally small/slow */
@keyframes uiFloatIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes uiLineReveal{
  to{transform:scaleX(1)}
}
@keyframes uiModalIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}


/* ===== FINAL PORTRAIT BACKGROUND FIX ===== */
.photo-frame,
.leader-photo,
.profile-photo,
.commission-photo-frame {
  background: transparent !important;
  box-shadow: none !important;
}
.photo-frame.is-fallback,
.leader-photo:has(.photo-placeholder) {
  background: radial-gradient(circle at 35% 20%,#668cff 0,#193c8c 34%,#071b40 78%) !important;
}
.photo-frame.has-photo,
.leader-photo:not(:has(.photo-placeholder)) {
  background: transparent !important;
}
.photo-frame::before,
.photo-frame::after,
.leader-photo::before,
.leader-photo::after,
.photo-frame.transparent-photo::before,
.photo-frame.transparent-photo::after,
.leader-photo.transparent-photo::before,
.leader-photo.transparent-photo::after {
  display:none !important;
  content:none !important;
}
.photo-frame > .photo-media,
.leader-photo > .photo-media {
  background: transparent !important;
}
.photo-frame > .photo-media > img,
.photo-frame > .photo-media > canvas,
.leader-photo > .photo-media > img,
.leader-photo > .photo-media > canvas {
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* FINAL: transparent portraits must never inherit a white/colored frame */
.photo-frame.has-photo,.leader-photo:not(:has(.photo-placeholder)),.profile-photo,.commission-photo-frame{background:transparent!important;box-shadow:none!important}
.photo-frame.has-photo::before,.photo-frame.has-photo::after,.leader-photo:not(:has(.photo-placeholder))::before,.leader-photo:not(:has(.photo-placeholder))::after{display:none!important;content:none!important;background:none!important;border:0!important}
.photo-frame.has-photo>.photo-media,.leader-photo>.photo-media{background:transparent!important}
.photo-frame.has-photo>.photo-media>img,.photo-frame.has-photo>.photo-media>canvas,.leader-photo>.photo-media>img,.leader-photo>.photo-media>canvas{background:transparent!important;mix-blend-mode:normal!important}

/* ===== NATIVE TRANSPARENT PORTRAIT FIX =====
   A real PNG/WebP alpha channel must remain alpha all the way to the page. */
.photo-frame.transparent-photo,
.photo-frame.transparent-photo.cutout-ready,
.leader-photo.transparent-photo,
.leader-photo.transparent-photo.cutout-ready {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.photo-frame.transparent-photo::before,
.photo-frame.transparent-photo::after,
.leader-photo.transparent-photo::before,
.leader-photo.transparent-photo::after {
  display:none !important;
}
.photo-frame.transparent-photo > .photo-media,
.leader-photo.transparent-photo > .photo-media {
  position:absolute !important;
  inset:0 !important;
  background:transparent !important;
}
.photo-frame.transparent-photo img.native-transparent-photo,
.leader-photo.transparent-photo img.native-transparent-photo {
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.16)) !important;
}
.photo-frame.transparent-photo img.native-transparent-photo:hover,
.leader-photo.transparent-photo img.native-transparent-photo:hover {
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.19)) !important;
}
.photo-frame.cutout-ready,
.leader-photo.cutout-ready {
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.photo-frame.cutout-ready::before,
.photo-frame.cutout-ready::after,
.leader-photo.cutout-ready::before,
.leader-photo.cutout-ready::after { display:none !important; }

/* ===== FINAL MOBILE MENU FIX ===== */
@media (max-width:900px){
  .navbar{z-index:5000!important}
  .nav-tools{position:relative;z-index:5003!important;pointer-events:auto!important}
  #menuToggle{display:grid!important;place-items:center!important;position:relative!important;z-index:5004!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
  #navMenu{z-index:5002!important;pointer-events:none!important}
  #navMenu.open{pointer-events:auto!important}
  #navMenu.open a{pointer-events:auto!important}
}


/* Performance optimization: keep the visual style, reduce expensive paint work on phones/tablets */
@media (max-width: 900px), (pointer: coarse) {
  .ambient-bg::before,.ambient-grid,.ambient-orb{animation:none!important}
  .ambient-bg::before{filter:none;opacity:.72}
  .ambient-noise{display:none}
  .hero::after{animation:none!important;opacity:.08}
  .navbar,nav,.member-tools,.modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .photo-frame::before,.photo-frame::after{animation:none!important}
  .eyebrow::after{animation:none!important}
  .loader-ring{box-shadow:none}
}
@media (max-width: 700px){
  .section{content-visibility:auto;contain-intrinsic-size:700px}
  .feature-card,.commission-card,.program-card,.agenda-card,.trans-card,.member-card,.person-card{will-change:auto}
}