:root{
  --page-bg:#EAF6EE;
  --card:#FFFFFF;
  --card-soft:#EFF9F1;
  --line:#CFE9D5;
  --ink:#16261A;
  --ink-soft:#47594B;
  --green-deep:#0B5C34;
  --green:#0F7A3E;
  --green-mid:#2E9E58;
  --green-light:#DFF3E4;
  --gold:#C9A227;
  --gold-soft:#E4C878;
  --shadow: 0 12px 30px rgba(11,92,52,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.pa{font-family:'Noto Sans Gurmukhi',sans-serif;}
h1,h2,h3,.display{font-family:'Fraunces',serif;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.04em;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.lined{background-image: repeating-linear-gradient(180deg, transparent, transparent 38px, var(--line) 39px);}

/* ===== Masthead ===== */
.masthead{background:var(--card); border-bottom:3px solid var(--green); position:sticky; top:0; z-index:50;}
.masthead-utility{background:var(--green-deep); color:#DCEFE0; font-size:.76rem;}
.masthead-utility .wrap{display:flex; align-items:center; justify-content:space-between; padding:6px 28px; gap:12px; flex-wrap:wrap;}
.masthead-utility .pa{color:var(--gold-soft); font-weight:600;}
.masthead-utility .mu-social{display:flex; gap:14px;}
.masthead-utility .mu-social a{color:#DCEFE0; text-decoration:none; font-weight:600;}
.masthead-utility .mu-social a:hover{color:var(--gold-soft);}
.masthead-top{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding:10px 28px; max-width:1120px; margin:0 auto; border-bottom:1px solid var(--line);
}
.masthead-top img{width:56px;height:56px;border-radius:50%; border:2px solid var(--gold); background:#fff; object-fit:cover; flex-shrink:0;}
.masthead-title{text-align:center;}
.masthead-title .en{font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem; color:var(--green-deep); line-height:1.15;}
.masthead-title .pa{font-size:.86rem; color:var(--green-mid); font-weight:600; margin-top:2px;}
.masthead-inner{display:flex; align-items:center; justify-content:center; padding:8px 28px; max-width:1120px; margin:0 auto;}
.brand{display:none;} /* legacy, unused in two-logo layout */
nav{display:flex; gap:24px; align-items:center;}
nav a{
  font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em; padding-bottom:4px; border-bottom:2px solid transparent; transition:.2s;
}
nav a:hover, nav a.active{color:var(--green-deep); border-color:var(--gold);}
.nav-toggle{display:none; background:none;border:none;font-size:1.6rem;color:var(--green-deep);cursor:pointer; position:absolute; right:20px; top:14px;}

/* ===== Page hero (interior pages) ===== */
.page-hero{position:relative; padding:70px 0 54px; overflow:hidden; background:var(--green-deep); color:#fff;}
.page-hero::before{
  content:''; position:absolute; inset:0; opacity:.16;
  background:url('assets/hero-banner.jpg') center/cover;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:14px; display:inline-block;
}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem); margin:0 0 10px; font-weight:700;}
.page-hero p{color:#D9E8D3; max-width:640px; margin:0; font-size:1.02rem;}

/* ===== Home hero ===== */
.hero{position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden;}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65) saturate(1.05);}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,58,31,.25) 0%, rgba(15,28,15,.82) 100%);}
.hero-content{position:relative; z-index:2; color:#fff; padding:60px 28px 50px; max-width:1120px; margin:0 auto; width:100%;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); background:rgba(0,0,0,.28);
  border:1px solid rgba(228,200,120,.4); padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem); margin:0 0 10px; font-weight:700; max-width:760px; line-height:1.08;}
.hero .tagline{font-family:'Noto Sans Gurmukhi',sans-serif; font-size:clamp(1.02rem,2vw,1.28rem); color:var(--gold-soft); font-weight:600; margin-bottom:26px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:3px; text-decoration:none; font-weight:700; font-size:.92rem; letter-spacing:.02em; border:1.5px solid transparent; transition:.2s; cursor:pointer;}
.btn-primary{background:var(--gold); color:var(--green-deep); border-color:var(--gold);}
.btn-primary:hover{background:var(--gold-soft);}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.1);}
.btn-green{background:var(--green); color:#fff; border-color:var(--green);}
.btn-green:hover{background:var(--green-deep);}
.btn-light{background:var(--card); color:var(--green-deep); border-color:var(--card);}
.btn-light:hover{background:var(--green-light);}

/* ===== ribbon ===== */
.ribbon{background:var(--green-deep); color:var(--page-bg); padding:16px 0;}
.ribbon-inner{display:flex; gap:44px; max-width:1120px; margin:0 auto; padding:0 28px; flex-wrap:wrap; justify-content:center; text-align:center;}
.ribbon-item{font-size:.85rem; font-weight:600;}
.ribbon-item span{display:block; font-family:'Fraunces',serif; font-size:1.5rem; color:var(--gold-soft); font-weight:700;}

/* ===== Section shell ===== */
section{padding:78px 0;}
.section-head{max-width:660px; margin-bottom:44px;}
.page-no{font-family:'IBM Plex Mono',monospace; color:var(--green-mid); font-weight:600; font-size:.82rem; letter-spacing:.08em; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin:0 0 12px; color:var(--green-deep); font-weight:700;}
.section-head p.pa-sub{color:var(--green-mid); font-weight:600; font-size:1.02rem; margin:0 0 14px;}
.section-head .desc{color:var(--ink-soft); font-size:1.02rem;}
hr.rule{border:none; border-top:2px solid var(--gold-soft); width:64px; margin:18px 0;}

/* Quick links (home) */
.quick-links{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.qlink{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:24px 20px; text-decoration:none; box-shadow:var(--shadow); transition:.2s;}
.qlink:hover{transform:translateY(-4px); border-color:var(--gold);}
.qlink .ic{font-size:1.6rem;}
.qlink h4{margin:10px 0 6px; color:var(--green-deep); font-family:'Fraunces',serif; font-size:1.02rem;}
.qlink p{margin:0; font-size:.84rem; color:var(--ink-soft);}

/* ===== About / objectives grid ===== */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.about-text p{color:var(--ink-soft); margin:0 0 16px;}
.about-text .founding{background:var(--card-soft); border-left:4px solid var(--green); padding:18px 22px; margin-top:26px; font-size:.95rem; color:var(--ink); box-shadow:var(--shadow);}
.emblem-list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.emblem-card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:20px 18px; box-shadow:var(--shadow);}
.emblem-card .ic{font-size:1.7rem; margin-bottom:10px; display:block;}
.emblem-card h4{margin:0 0 6px; font-size:.98rem; color:var(--green-deep); font-family:'Fraunces',serif;}
.emblem-card p{margin:0; font-size:.82rem; color:var(--ink-soft);}

/* ===== President ===== */
.pres-wrap{background:var(--green-deep); color:var(--page-bg); border-radius:6px; display:grid; grid-template-columns:260px 1fr; overflow:hidden; box-shadow:var(--shadow);}
.pres-photo{background:var(--green-light); display:flex; align-items:center; justify-content:center; padding:28px;}
.pres-photo img{border-radius:4px; border:4px solid #fff; width:100%; filter:grayscale(1) contrast(1.05);}
.pres-body{padding:40px 44px;}
.quote-mark{font-family:'Fraunces',serif; font-size:3.4rem; color:var(--gold-soft); line-height:.5; margin-bottom:14px; display:block;}
.pres-body p{color:#E3EEDD; margin:0 0 14px; font-size:1rem;}
.pres-sign{margin-top:22px; padding-top:18px; border-top:1px solid rgba(228,200,120,.3);}
.pres-sign .name{font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; color:#fff;}
.pres-sign .role{color:var(--gold-soft); font-size:.85rem; font-weight:600;}

/* ===== Org chart ===== */
.org-chart{display:flex; flex-direction:column; align-items:center; gap:0;}
.org-box{background:var(--card); border:1.5px solid var(--green); color:var(--green-deep); padding:12px 22px; border-radius:3px; font-weight:700; font-size:.88rem; text-align:center; box-shadow:var(--shadow); white-space:nowrap;}
.org-box.top{background:var(--green-deep); color:#fff; border-color:var(--green-deep);}
.org-connector{width:2px; height:26px; background:var(--gold);}
.org-row{display:flex; gap:40px; align-items:flex-start; justify-content:center; flex-wrap:wrap;}
.org-branch{display:flex; flex-direction:column; align-items:center;}

/* ===== Timeline ===== */
.timeline{position:relative; margin-top:10px;}
.timeline::before{content:''; position:absolute; left:74px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--gold-soft), var(--green));}
.t-item{position:relative; padding-left:118px; margin-bottom:28px;}
.t-year{position:absolute; left:0; top:0; width:60px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--green); font-weight:600; padding-top:4px;}
.t-dot{position:absolute; left:70px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--green); border:2px solid var(--page-bg);}
.t-card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:12px 18px;}
.t-card .nm{font-family:'Fraunces',serif; font-weight:600; color:var(--green-deep); font-size:1.02rem;}

/* ===== Executive Committee ===== */
.ec-photo{border-radius:6px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:46px;}
.ec-table-wrap{background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow);}
table.ec{width:100%; border-collapse:collapse; font-size:.9rem;}
table.ec th{background:var(--green-deep); color:var(--gold-soft); text-align:left; padding:12px 18px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;}
table.ec td{padding:12px 18px; border-top:1px solid var(--line); vertical-align:top;}
table.ec tr:nth-child(even) td{background:var(--card-soft);}
table.ec .desig{color:var(--green); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;}
table.ec .place{color:var(--ink-soft); font-size:.85rem;}
.ec-note{font-size:.82rem; color:var(--ink-soft); margin-top:16px; font-style:italic;}

/* ===== Membership ===== */
.member-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.member-card{background:var(--card); border-top:4px solid var(--gold); border-radius:2px; padding:26px 24px; box-shadow:var(--shadow);}
.member-card .fee{font-family:'Fraunces',serif; font-size:2.1rem; color:var(--green-deep); font-weight:700;}
.member-card .fee small{font-size:1rem; color:var(--ink-soft); font-weight:500;}
.member-card h4{margin:14px 0 8px; color:var(--green-deep); font-family:'Fraunces',serif;}
.member-card p{margin:0; font-size:.88rem; color:var(--ink-soft);}
.member-card ul{margin:8px 0 0; padding-left:18px; font-size:.86rem; color:var(--ink-soft);}

.form-options{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px;}
.form-opt{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:32px; text-align:center; box-shadow:var(--shadow);}
.form-opt .ic{font-size:2.4rem; margin-bottom:12px;}
.form-opt h3{margin:0 0 8px; color:var(--green-deep); font-family:'Fraunces',serif;}
.form-opt p{color:var(--ink-soft); font-size:.9rem; margin:0 0 20px;}

.member-cta{margin-top:36px; background:var(--green); color:#fff; border-radius:6px; padding:32px 36px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.member-cta h3{margin:0 0 6px; font-family:'Fraunces',serif;}
.member-cta p{margin:0; color:#DCEBD2; font-size:.92rem;}

/* ===== Online form page ===== */
.form-shell{background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); overflow:hidden;}
.form-head{background:var(--green-deep); color:#fff; padding:26px 34px;}
.form-head h3{margin:0 0 4px; font-family:'Fraunces',serif;}
.form-head p{margin:0; color:var(--gold-soft); font-size:.86rem;}
.form-body{padding:34px;}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.f-field{display:flex; flex-direction:column; gap:6px;}
.f-field.full{grid-column:1/-1;}
.f-field label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green-deep);}
.f-field input, .f-field select, .f-field textarea{
  padding:11px 14px; border:1.5px solid var(--line); border-radius:5px; font-family:'Inter',sans-serif; font-size:.94rem;
  background:var(--card-soft); color:var(--ink); outline:none; transition:.2s;
}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{border-color:var(--green);}
.f-note{grid-column:1/-1; font-size:.8rem; color:var(--ink-soft); margin-top:-6px;}
.f-actions{grid-column:1/-1; display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
.f-confirm{display:none; grid-column:1/-1; background:var(--green-light); border:1px solid var(--green-mid); border-radius:6px; padding:16px 20px; color:var(--green-deep); font-weight:600; font-size:.9rem;}
.f-confirm.show{display:block;}

/* ===== Gallery ===== */
.gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.gallery-grid img{border-radius:6px; box-shadow:var(--shadow); width:100%; height:100%; object-fit:cover;}
.gallery-grid .full{grid-column:1/-1;}

/* ===== Contact ===== */
.contact-section{background:var(--green-deep); color:var(--page-bg);}
.contact-section .section-head h2{color:#fff;}
.contact-section .section-head .desc{color:#C7D9C0;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:34px;}
.contact-card h4{font-family:'Fraunces',serif; color:var(--gold-soft); margin:0 0 12px; font-size:1rem;}
.contact-card p, .contact-card a{color:#E3EEDD; font-size:.92rem; text-decoration:none; display:block; margin-bottom:6px;}
.contact-card a:hover{color:var(--gold-soft);}
.social-row{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap;}
.social-btn{display:flex; align-items:center; gap:8px; background:rgba(228,200,120,.12); border:1px solid rgba(228,200,120,.4); padding:9px 16px; border-radius:999px; font-size:.84rem; font-weight:600; text-decoration:none; color:var(--gold-soft);}
.social-btn:hover{background:var(--gold-soft); color:var(--green-deep);}
.map-embed{border-radius:6px; overflow:hidden; box-shadow:var(--shadow); margin-top:36px; border:3px solid var(--green-mid);}

footer{background:#122417; color:#9FB79A; text-align:center; padding:26px 20px; font-size:.8rem;}
footer a{color:var(--gold-soft); text-decoration:none;}

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:48px; height:48px; border-radius:50%;
  background:var(--green-deep); color:var(--gold-soft);
  border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; text-decoration:none; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  cursor:pointer;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--gold); color:var(--green-deep);}

/* ===== Instagram embed section ===== */
.insta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.insta-embed-wrap{background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); min-height:420px;}
.insta-cta{text-align:center; margin-top:30px;}

/* ===== Gallery tabs ===== */
.gallery-tabs{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.gallery-tab-btn{
  background:var(--card); border:1.5px solid var(--line); color:var(--ink-soft);
  padding:11px 24px; border-radius:999px; font-weight:700; font-size:.88rem; cursor:pointer;
  transition:.2s; display:flex; align-items:center; gap:8px;
}
.gallery-tab-btn.active{background:var(--green-deep); border-color:var(--green-deep); color:#fff;}
.gallery-tab-btn:hover:not(.active){border-color:var(--gold);}
.gallery-panel{display:none;}
.gallery-panel.active{display:block;}
.video-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.video-card{background:var(--card); border-radius:8px; overflow:hidden; box-shadow:var(--shadow);}
.video-card .video-frame{position:relative; padding-top:56.25%; background:#000;}
.video-card .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-card .video-cap{padding:14px 18px; font-size:.88rem; color:var(--ink-soft); font-weight:600;}

/* ===== Mobile app-style bottom nav ===== */
.mobile-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--card); border-top:1.5px solid var(--line);
  box-shadow:0 -6px 20px rgba(23,58,31,.14);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-tabbar-inner{display:flex; justify-content:space-around; align-items:center;}
.mobile-tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--ink-soft); font-size:.64rem; font-weight:700;
  padding:4px 6px; flex:1; text-transform:uppercase; letter-spacing:.02em;
}
.mobile-tab .ti{font-size:1.32rem; line-height:1;}
.mobile-tab.active{color:var(--green-deep);}
.mobile-tab.active .ti{color:var(--green);}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:860px){
  body{padding-bottom:64px;}
  .mobile-tabbar{display:block;}
  .back-to-top{bottom:76px; right:16px; width:44px; height:44px; font-size:1.15rem;}
  .masthead-utility{font-size:.68rem;}
  .masthead-utility .wrap{padding:5px 16px; justify-content:center; text-align:center;}
  .masthead-utility .pa{display:none;}
  .masthead-utility .mu-social a:last-child{display:none;}
  .masthead-top{position:relative; padding-right:60px;}
  .masthead-top img{width:44px;height:44px;}
  .masthead-title .en{font-size:1.02rem;}
  .masthead-title .pa{font-size:.74rem;}
  nav{position:fixed; top:98px; left:0; right:0; background:var(--card); flex-direction:column; padding:18px 28px; border-bottom:2px solid var(--green); display:none; gap:14px; z-index:60;}
  nav.open{display:flex;}
  .nav-toggle{display:block;}
  .about-grid, .pres-wrap, .contact-grid, .gallery-grid, .form-options, .f-grid, .quick-links, .insta-grid, .video-grid{grid-template-columns:1fr;}
  .member-grid{grid-template-columns:1fr;}
  .pres-photo{padding:24px;}
  .pres-photo img{max-width:180px; margin:0 auto;}
  .org-row{gap:18px;}
  .emblem-list{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
}

@media print{
  .masthead, footer, .f-actions, .no-print, .back-to-top, .mobile-tabbar{display:none !important;}
  body{background:#fff;}
  .form-shell{box-shadow:none; border:none;}
}