/* ==========================================================
   SOPHIYA WARRAICH — PREMIUM REDESIGN v4
   Fonts: Playfair Display (headings) + Plus Jakarta Sans (body)
   Rose: #A92D63  |  Gold: #F2C200
   ========================================================== */

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

/* ── TOKENS ── */
:root {
  --rose:      #A92D63;
  --rose-d:    #8b1f52;
  --rose-l:    #c4386e;
  --rose-xg:   linear-gradient(135deg,#A92D63,#c4386e);
  --gold:      #F2C200;
  --gold-d:    #d4a900;
  --ink:       #0a0a0a;
  --ink2:      #161616;
  --body:      #3c3c3c;
  --muted:     #777;
  --white:     #ffffff;
  --off:       #faf9f8;
  --cream:     #f5f0e8;
  --border:    #ece8e2;
  --glow-rose: 0 20px 60px rgba(169,45,99,.3);
  --glow-gold: 0 20px 60px rgba(242,194,0,.25);
  --shadow:    0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.14);
  --shadow-xl: 0 24px 80px rgba(0,0,0,.18);
  --radius:    12px;
  --radius-lg: 20px;
  --t:         all .32s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; line-height:1.7; color:var(--body); background:var(--white); overflow-x:hidden }
img  { max-width:100%; display:block }
a    { color:var(--rose); text-decoration:none; transition:var(--t) }
a:hover { color:var(--rose-d) }
button { font-family:inherit; cursor:pointer }

/* ── TYPE ── */
h1,h2,h3,h4 { font-family:'Playfair Display',serif; line-height:1.15; color:var(--ink); letter-spacing:-.01em }
h1 { font-size:clamp(2.8rem,6vw,5.2rem); font-weight:800 }
h2 { font-size:clamp(2rem,4vw,3.2rem); font-weight:700 }
h3 { font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:600 }
h4 { font-size:1.05rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700 }
p  { margin-bottom:1em }
p:last-child { margin-bottom:0 }

/* ── LAYOUT ── */
.container { max-width:1180px; margin:0 auto; padding:0 28px }
.sec { padding:96px 0 }
.sec-sm { padding:60px 0 }
.sec-lg { padding:120px 0 }

/* ── OVERLINE ── */
.overline {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.overline::before { content:''; display:block; width:24px; height:2px; background:var(--rose); flex-shrink:0 }
.overline--white { color:rgba(255,255,255,.8) }
.overline--white::before { background:var(--gold) }
.overline--gold { color:var(--gold-d) }
.overline--gold::before { background:var(--gold) }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:14px 30px;
  border-radius:100px; border:2px solid transparent; transition:var(--t);
  white-space:nowrap; cursor:pointer; text-decoration:none;
}
.btn-primary { background:var(--rose); color:#fff; border-color:var(--rose); box-shadow:0 8px 28px rgba(169,45,99,.35) }
.btn-primary:hover { background:var(--rose-d); color:#fff; border-color:var(--rose-d); transform:translateY(-2px); box-shadow:var(--glow-rose) }
.btn-gold { background:var(--gold); color:var(--ink); border-color:var(--gold); box-shadow:0 8px 28px rgba(242,194,0,.3) }
.btn-gold:hover { background:var(--gold-d); border-color:var(--gold-d); transform:translateY(-2px) }
.btn-white { background:#fff; color:var(--rose); border-color:#fff }
.btn-white:hover { background:var(--rose); color:#fff; border-color:var(--rose); transform:translateY(-2px) }
.btn-outline { background:transparent; color:var(--rose); border-color:var(--rose) }
.btn-outline:hover { background:var(--rose); color:#fff; transform:translateY(-2px) }
.btn-outline-w { background:transparent; color:#fff; border-color:rgba(255,255,255,.55) }
.btn-outline-w:hover { background:#fff; color:var(--ink); transform:translateY(-2px) }
.btn i { font-size:.88em }

/* ── LINK ARROW ── */
.link-arrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--rose); transition:var(--t);
}
.link-arrow .ic {
  width:34px; height:34px; border-radius:50%; border:2px solid var(--rose);
  display:flex; align-items:center; justify-content:center; transition:var(--t); font-size:.78rem;
}
.link-arrow:hover { color:var(--rose-d); gap:13px }
.link-arrow:hover .ic { background:var(--rose); color:#fff }

/* ======================================================
   HEADER
   ====================================================== */
#hdr {
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding:6px 0; transition:var(--t);
}
#hdr.stuck {
  background:rgba(255,255,255,.96); backdrop-filter:blur(20px) saturate(200%);
  box-shadow:0 1px 0 var(--border), var(--shadow); padding:0;
}
.hdr-inner { display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px }

.logo { display:flex; flex-direction:column; gap:2px; text-decoration:none; flex-shrink:0 }
.logo-n { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:800; color:var(--rose); line-height:1; letter-spacing:-.01em }
.logo-s { font-family:'Plus Jakarta Sans',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); line-height:1 }
#hdr.hero-t:not(.stuck) .logo-n { color:#fff }
#hdr.hero-t:not(.stuck) .logo-s { color:rgba(255,255,255,.55) }

.nav-ul { display:flex; list-style:none; gap:2px; align-items:center }
.nav-ul a {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.73rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
  padding:8px 13px; border-radius:8px; transition:var(--t);
}
.nav-ul a:hover,.nav-ul a.on { color:var(--rose); background:rgba(169,45,99,.06) }
#hdr.hero-t:not(.stuck) .nav-ul a { color:rgba(255,255,255,.88) }
#hdr.hero-t:not(.stuck) .nav-ul a:hover,
#hdr.hero-t:not(.stuck) .nav-ul a.on { color:var(--gold); background:rgba(255,255,255,.1) }

.nav-cta .btn { padding:10px 22px; font-size:.7rem }
#hdr.hero-t:not(.stuck) .btn-outline { color:#fff; border-color:rgba(255,255,255,.5) }
#hdr.hero-t:not(.stuck) .btn-outline:hover { background:#fff; color:var(--rose); border-color:#fff }

/* Hamburger */
.hbg { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:1100 }
.hbg span { display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:var(--t) }
.hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hbg.open span:nth-child(2) { opacity:0 }
.hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
#hdr.hero-t:not(.stuck) .hbg span { background:#fff }

/* Mobile overlay */
.mob-nav {
  display:none; position:fixed; inset:0; background:var(--ink); z-index:1050;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; transition:opacity .3s ease;
}
.mob-nav.open { display:flex; opacity:1 }
.mob-nav a {
  font-family:'Playfair Display',serif; font-size:clamp(2rem,6vw,2.8rem);
  font-weight:700; color:#fff; padding:8px 32px; transition:var(--t);
}
.mob-nav a:hover,.mob-nav a.on { color:var(--gold) }
.mob-soc { display:flex; gap:20px; margin-top:28px }
.mob-soc a { font-family:'Plus Jakarta Sans',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:0; transition:var(--t) }
.mob-soc a:hover { color:var(--gold) }

/* ======================================================
   PAGE HERO (inner pages)
   ====================================================== */
.page-hero {
  padding:150px 0 72px; position:relative; overflow:hidden;
  background:var(--ink2);
}
/* Background image per page injected via inline style */
.page-hero .ph-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.25;
}
.page-hero .ph-grad {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(169,45,99,.75) 0%,rgba(10,10,10,.9) 55%);
}
.page-hero .ph-inner { position:relative; z-index:2 }
.page-hero h1 { color:#fff; margin-bottom:10px }
.page-hero .overline { color:var(--gold); margin-bottom:12px }
.page-hero .overline::before { background:var(--gold) }
.bc { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.45) }
.bc a { color:rgba(255,255,255,.45); transition:var(--t) }
.bc a:hover { color:var(--gold) }
.bc .sep { font-size:.55rem; color:rgba(255,255,255,.2) }
.bc .cur { color:var(--gold) }

/* ======================================================
   HOME HERO
   ====================================================== */
.home-hero {
  min-height:100vh; position:relative; display:flex; align-items:center;
  background:var(--ink); overflow:hidden;
}
.home-hero .hh-bg {
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&q=90');
  background-size:cover; background-position:center top; opacity:.18;
}
.home-hero .hh-grad {
  position:absolute; inset:0;
  background:linear-gradient(115deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.88) 45%,rgba(169,45,99,.5) 75%,rgba(169,45,99,.65) 100%);
}
/* Animated shimmer orbs */
.home-hero .orb1 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(169,45,99,.18) 0%,transparent 70%);
  top:-150px; right:-100px; animation:float1 8s ease-in-out infinite;
}
.home-hero .orb2 {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(242,194,0,.12) 0%,transparent 70%);
  bottom:-100px; left:10%; animation:float2 10s ease-in-out infinite;
}
@keyframes float1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(20px)} }

.hh-inner {
  position:relative; z-index:2; padding:130px 0 90px;
  display:grid; grid-template-columns:1fr 480px; gap:60px; align-items:center;
}
/* Text */
.hh-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(242,194,0,.12); border:1px solid rgba(242,194,0,.35);
  color:var(--gold); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; padding:8px 18px;
  border-radius:100px; margin-bottom:28px;
}
.hh-badge .dot { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} }
.hh-h1 {
  font-family:'Playfair Display',serif; font-size:clamp(3rem,6vw,5.5rem);
  font-weight:800; line-height:1.06; color:#fff; letter-spacing:-.02em; margin-bottom:24px;
}
.hh-h1 .accent {
  font-style:italic; display:block;
  background:linear-gradient(90deg,var(--rose-l),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hh-sub { font-size:1.05rem; color:rgba(255,255,255,.62); line-height:1.85; max-width:480px; margin-bottom:40px; font-weight:300 }
.hh-btns { display:flex; gap:14px; flex-wrap:wrap }
.hh-stats { display:flex; gap:0; margin-top:52px; padding-top:40px; border-top:1px solid rgba(255,255,255,.1) }
.hh-stat { padding-right:36px; margin-right:36px; border-right:1px solid rgba(255,255,255,.12) }
.hh-stat:last-child { border-right:none; padding-right:0; margin-right:0 }
.hh-stat-n { font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:800; color:var(--gold); line-height:1; letter-spacing:-.02em }
.hh-stat-l { font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:3px }
/* Portrait */
.hh-portrait { position:relative }
.hh-portrait-img {
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
  position:relative;
}
.hh-portrait-img img { width:100%; height:100%; object-fit:cover; object-position:top center }
.hh-portrait-img::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius-lg);
  background:linear-gradient(to top,rgba(169,45,99,.6) 0%,transparent 50%);
}
/* Floating cards */
.hh-card1 {
  position:absolute; bottom:32px; left:-44px; z-index:2;
  background:#fff; border-radius:var(--radius); padding:16px 20px;
  box-shadow:var(--shadow-xl); display:flex; gap:14px; align-items:center; min-width:210px;
}
.hh-card1 .card-icon {
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg,var(--rose),var(--rose-l));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; flex-shrink:0;
}
.hh-card1 .card-text strong { display:block; font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:800; color:var(--rose); line-height:1 }
.hh-card1 .card-text span { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.hh-card2 {
  position:absolute; top:28px; right:-32px; z-index:2;
  background:var(--rose); border-radius:var(--radius); padding:14px 18px;
  box-shadow:var(--glow-rose); min-width:160px;
}
.hh-card2 strong { display:block; color:var(--gold); font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:800; line-height:1 }
.hh-card2 span { font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75) }
/* Scroll hint */
.hh-scroll { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px }
.hh-scroll span { font-size:.6rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.35) }
.hh-scroll .sm { width:1px; height:44px; background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent); animation:scrl 2s ease infinite }
@keyframes scrl { 0%{height:0;opacity:1} 100%{height:44px;opacity:0} }

/* ======================================================
   STATS ROW
   ====================================================== */
.stats-row { background:var(--rose) }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr) }
.stat-box { padding:36px 24px; text-align:center; border-right:1px solid rgba(255,255,255,.15) }
.stat-box:last-child { border-right:none }
.stat-n { font-family:'Playfair Display',serif; font-size:2.8rem; font-weight:800; color:var(--gold); line-height:1; letter-spacing:-.02em }
.stat-l { font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:5px }

/* ======================================================
   ABOUT SECTION
   ====================================================== */
.about-sec { background:var(--off) }
.about-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:center }
.about-imgs { display:grid; grid-template-columns:3fr 2fr; gap:14px }
.ai-a { aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xl) }
.ai-col { display:flex; flex-direction:column; gap:14px }
.ai-b { aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow) }
.ai-c { aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow) }
.ai-a img,.ai-b img,.ai-c img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.ai-a:hover img,.ai-b:hover img,.ai-c:hover img { transform:scale(1.04) }
.about-text {}
.about-text h2 { margin-bottom:10px }
.quote-bar { font-family:'Playfair Display',serif; font-style:italic; font-size:1.2rem; color:var(--rose); border-left:3px solid var(--gold); padding-left:18px; line-height:1.55; margin:24px 0; font-weight:500 }
.about-text p { color:var(--muted); line-height:1.85 }
.trait-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.tc-chip { font-family:'Plus Jakarta Sans',sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:100px; border:1.5px solid var(--border); color:var(--body); background:var(--white); transition:var(--t) }
.tc-chip:hover { border-color:var(--rose); color:var(--rose) }
.tc-chip.hot { background:var(--rose); color:#fff; border-color:var(--rose) }

/* ======================================================
   INITIATIVES SECTION
   ====================================================== */
.ini-sec { background:var(--ink) }
.ini-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:52px }
.ini-header h2 { color:#fff }
.ini-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:3px }
.ini-card { position:relative; overflow:hidden; aspect-ratio:4/5; cursor:pointer }
.ini-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease,filter .5s ease; filter:brightness(.6) }
.ini-card:hover img { transform:scale(1.08); filter:brightness(.45) }
.ini-overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; padding:32px 28px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(169,45,99,.1) 50%,transparent 100%);
}
.ini-num { font-family:'Playfair Display',serif; font-size:4.5rem; font-weight:800; color:rgba(255,255,255,.05); line-height:1; letter-spacing:-.04em; margin-bottom:4px }
.ini-cat { font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px }
.ini-card h3 { font-family:'Playfair Display',serif; color:#fff; font-size:1.4rem; margin-bottom:10px; line-height:1.25 }
.ini-card .ini-desc { color:rgba(255,255,255,.62); font-size:.85rem; line-height:1.7; opacity:0; transform:translateY(14px); transition:var(--t) }
.ini-card:hover .ini-desc { opacity:1; transform:translateY(0) }
.ini-link { display:inline-flex; align-items:center; gap:8px; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:14px; opacity:0; transform:translateY(10px); transition:var(--t) .05s }
.ini-card:hover .ini-link { opacity:1; transform:translateY(0) }

/* ======================================================
   RECOGNITION MARQUEE
   ====================================================== */
.reco-sec { background:var(--cream); overflow:hidden }
.reco-track { display:flex; gap:18px; animation:mq 40s linear infinite; width:max-content }
.reco-track:hover { animation-play-state:paused }
@keyframes mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.reco-pill {
  display:flex; align-items:center; gap:14px;
  background:var(--white); border-radius:var(--radius); padding:14px 22px 14px 14px;
  border:1px solid var(--border); white-space:nowrap; flex-shrink:0;
  box-shadow:var(--shadow); transition:var(--t);
}
.reco-pill:hover { border-color:var(--rose); transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.reco-pill img { width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0 }
.reco-pill-text strong { display:block; font-family:'Playfair Display',serif; font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.3; max-width:200px }
.reco-pill-text span { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }

/* ======================================================
   GALLERY STRIP
   ====================================================== */
.gallery-strip-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4px }
.gs-item { position:relative; overflow:hidden; cursor:pointer }
.gs-item img { width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .55s ease,filter .4s ease; filter:brightness(.85) saturate(0.9) }
.gs-item.wide img { aspect-ratio:4/6 }
.gs-item:hover img { transform:scale(1.06); filter:brightness(.6) saturate(1.1) }
.gs-cap { position:absolute; inset:0; background:rgba(169,45,99,.7); opacity:0; transition:var(--t); display:flex; align-items:flex-end; padding:20px }
.gs-item:hover .gs-cap { opacity:1 }
.gs-cap span { font-family:'Playfair Display',serif; color:#fff; font-style:italic; font-size:1rem; font-weight:500 }

/* ======================================================
   MEDIA PREVIEW
   ====================================================== */
.media-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.mc {
  background:var(--white); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border); transition:var(--t);
  display:flex; flex-direction:column;
}
.mc:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:transparent }
.mc-img { aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--cream) }
.mc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.mc:hover .mc-img img { transform:scale(1.07) }
.mc-tag { position:absolute; top:14px; left:14px; background:var(--rose); color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 12px; border-radius:100px }
.mc-body { padding:22px; flex:1; display:flex; flex-direction:column }
.mc-date { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.mc h3 { font-size:1.05rem; margin-bottom:10px; line-height:1.4; flex:1 }
.mc p { font-size:.84rem; color:var(--muted); margin:0; line-height:1.65 }

/* ======================================================
   DONATE BANNER
   ====================================================== */
.donate-banner {
  position:relative; overflow:hidden;
  background:var(--ink); padding:96px 0;
  text-align:center;
}
.donate-banner .db-bg {
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=1400&q=80');
  background-size:cover; background-position:center; opacity:.1;
}
.donate-banner .db-grad {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 90% at 25% 50%,rgba(169,45,99,.35),transparent),
              radial-gradient(ellipse 70% 90% at 75% 50%,rgba(242,194,0,.15),transparent);
}
.donate-banner .db-inner { position:relative; z-index:2 }
.donate-banner h2 { color:#fff; font-size:clamp(2.2rem,5vw,3.8rem); margin-bottom:16px }
.donate-banner p { color:rgba(255,255,255,.58); max-width:520px; margin:0 auto 36px; font-size:1.05rem; font-weight:300 }
.donate-banner .db-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ======================================================
   ABOUT PAGE — FULL
   ====================================================== */
.about-full-wrap { display:grid; grid-template-columns:340px 1fr; gap:64px }
.about-sidebar { position:sticky; top:90px; align-self:start }
.as-portrait { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-xl); margin-bottom:20px }
.as-portrait img { width:100%; height:100%; object-fit:cover; object-position:top }
.as-stats { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-bottom:20px }
.as-stat { background:var(--rose); padding:16px; text-align:center }
.as-stat strong { display:block; font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:800; color:var(--gold); line-height:1 }
.as-stat span { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); display:block; margin-top:3px }
.as-links { border-top:1px solid var(--border) }
.as-links a { display:flex; align-items:center; justify-content:space-between; padding:12px 0; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); transition:var(--t) }
.as-links a:hover { color:var(--rose); padding-left:4px }
/* Main bio */
.about-main-content { padding-top:8px }
.bio-lead { font-size:1.1rem; line-height:1.88; color:var(--body); margin-bottom:0 }
.story-section { margin:44px 0; padding-top:44px; border-top:1px solid var(--border) }
.story-section h3 { font-size:1.5rem; margin-bottom:14px; display:flex; align-items:center; gap:12px }
.ss-num { width:34px; height:34px; border-radius:50%; background:var(--rose); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; flex-shrink:0 }
.pull-quote { background:var(--off); border-left:4px solid var(--rose); border-radius:0 var(--radius) var(--radius) 0; padding:28px 32px; margin:32px 0; position:relative }
.pull-quote::before { content:'\201C'; font-family:'Playfair Display',serif; font-size:6rem; color:var(--rose); opacity:.12; position:absolute; top:0; left:18px; line-height:.75 }
.pull-quote p { font-family:'Playfair Display',serif; font-style:italic; font-size:1.2rem; color:var(--ink); line-height:1.6; margin:0; position:relative; z-index:1 }
.pull-quote cite { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); margin-top:14px }
.roles-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px }
.role-card { border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:var(--t) }
.role-card:hover { border-color:var(--rose); box-shadow:var(--shadow) }
.role-card .ri { width:38px; height:38px; border-radius:10px; background:rgba(169,45,99,.08); color:var(--rose); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:.88rem }
.role-card h4 { font-size:.92rem; margin-bottom:4px }
.role-card p  { font-size:.81rem; color:var(--muted); margin:0 }
/* Timeline */
.timeline { position:relative; padding-left:26px }
.timeline::before { content:''; position:absolute; left:5px; top:0; bottom:0; width:1px; background:var(--border) }
.tl-item { position:relative; padding-bottom:28px }
.tl-item::before { content:''; position:absolute; left:-23px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--rose); border:2px solid #fff; box-shadow:0 0 0 2px var(--rose) }
.tl-yr { font-family:'Plus Jakarta Sans',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); margin-bottom:4px }
.tl-item h4 { font-size:1rem; margin-bottom:3px }
.tl-item p { font-size:.83rem; color:var(--muted); margin:0 }
/* Testimonials */
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.testi { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; transition:var(--t) }
.testi:hover { box-shadow:var(--shadow-lg); border-color:transparent }
.testi .stars { color:var(--gold); margin-bottom:12px; font-size:.85rem }
.testi p { font-family:'Playfair Display',serif; font-style:italic; font-size:.92rem; color:var(--ink); line-height:1.65 }
.ta { display:flex; align-items:center; gap:12px; margin-top:16px }
.ta-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--rose-l)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Playfair Display',serif; font-weight:700; font-size:.88rem; flex-shrink:0 }
.ta-info strong { display:block; font-size:.84rem; font-weight:600; color:var(--ink) }
.ta-info span   { font-size:.73rem; color:var(--muted) }

/* ======================================================
   RECOGNITION PAGE
   ====================================================== */
.reco-masonry { columns:3; column-gap:20px }
.reco-card { break-inside:avoid; margin-bottom:20px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--white); transition:var(--t) }
.reco-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:transparent }
.reco-card img { width:100%; display:block; background:var(--cream) }
.reco-body { padding:18px 20px 22px }
.reco-badge { display:inline-block; background:rgba(169,45,99,.08); color:var(--rose); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:4px 12px; border-radius:100px; margin-bottom:10px }
.reco-body h3 { font-size:1rem; margin-bottom:7px; line-height:1.35 }
.reco-body p  { font-size:.81rem; color:var(--muted); margin:0; line-height:1.6 }

/* ======================================================
   INITIATIVES PAGE
   ====================================================== */
.ini-row { display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid var(--border) }
.ini-row:last-child { border-bottom:none }
.ini-row.alt { direction:rtl }
.ini-row.alt > * { direction:ltr }
.ini-row-img { position:relative; overflow:hidden; min-height:480px }
.ini-row-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.ini-row:hover .ini-row-img img { transform:scale(1.03) }
.ini-row-overlay { position:absolute; inset:0; background:rgba(169,45,99,.08); transition:var(--t) }
.ini-row:hover .ini-row-overlay { background:rgba(169,45,99,.0) }
.ini-row-badge { position:absolute; top:0; left:0; background:var(--rose); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:8px 18px }
.ini-row-num { position:absolute; bottom:16px; right:20px; font-family:'Playfair Display',serif; font-size:6rem; font-weight:800; color:rgba(255,255,255,.1); line-height:1; letter-spacing:-.04em }
.ini-row-body { padding:56px 60px; background:var(--white); display:flex; flex-direction:column; justify-content:center }
.ini-row.alt .ini-row-body { padding:56px 60px 56px 56px }
.ini-row-body .big-n { font-family:'Playfair Display',serif; font-size:5.5rem; font-weight:800; color:rgba(169,45,99,.07); line-height:1; letter-spacing:-.04em; margin-bottom:-10px }
.ini-row-body h2 { font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:14px }
.ini-row-body p { color:var(--muted); line-height:1.82 }
.ini-feats { list-style:none; margin-top:20px; display:grid; gap:9px }
.ini-feats li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--body) }
.ini-feats li i { color:var(--rose); flex-shrink:0; margin-top:3px; font-size:.8rem }

/* ======================================================
   GALLERY
   ====================================================== */
.gal-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px }
.gf { font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:10px 20px; border-radius:100px; border:1.5px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:var(--t) }
.gf.on,.gf:hover { background:var(--rose); color:#fff; border-color:var(--rose) }
.gal-mason { columns:3; column-gap:14px }
.gi { break-inside:avoid; margin-bottom:14px; border-radius:var(--radius); overflow:hidden; cursor:pointer; position:relative }
.gi img { width:100%; display:block; transition:transform .5s ease,filter .4s ease; filter:saturate(.9) }
.gi:hover img { transform:scale(1.04); filter:saturate(1.1) }
.gi-hover { position:absolute; inset:0; background:linear-gradient(to top,rgba(169,45,99,.78),transparent); opacity:0; transition:var(--t); display:flex; align-items:flex-end; padding:16px }
.gi:hover .gi-hover { opacity:1 }
.gi-hover span { font-family:'Playfair Display',serif; font-style:italic; color:#fff; font-size:.92rem }

/* ======================================================
   MEDIA PAGE
   ====================================================== */
.media-feat { border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1.3fr 1fr; margin-bottom:60px; box-shadow:var(--shadow-xl) }
.mf-img { overflow:hidden }
.mf-img img { width:100%; height:100%; object-fit:cover; min-height:320px }
.mf-body { padding:48px 44px; background:var(--off); display:flex; flex-direction:column; justify-content:center }
.mf-body h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:12px }
.mf-body p { color:var(--muted); line-height:1.8; margin-bottom:24px }
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }

/* ======================================================
   CONTACT
   ====================================================== */
.contact-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start }
.c-side h2 { margin-bottom:10px }
.c-side > p { color:var(--muted); line-height:1.82; margin-bottom:32px }
.c-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:22px }
.c-icon { width:42px; height:42px; border-radius:10px; background:rgba(169,45,99,.08); color:var(--rose); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.88rem }
.c-item-body strong { display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); margin-bottom:2px }
.c-item-body p { margin:0; font-size:.9rem; color:var(--body) }
.c-soc { display:flex; gap:10px; margin-top:24px }
.c-soc a { width:40px; height:40px; border-radius:10px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.82rem; transition:var(--t) }
.c-soc a:hover { background:var(--rose); border-color:var(--rose); color:#fff }
.c-form-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:42px; box-shadow:var(--shadow-xl) }
.c-form-wrap h3 { margin-bottom:6px }
.form-sub { font-size:.87rem; color:var(--muted); margin-bottom:24px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.fg { margin-bottom:16px }
label { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:7px }
input[type=text],input[type=email],input[type=tel],select,textarea {
  width:100%; padding:12px 14px; border:1.5px solid var(--border);
  border-radius:10px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.93rem; color:var(--ink); background:var(--white);
  outline:none; transition:var(--t); -webkit-appearance:none;
}
input:focus,select:focus,textarea:focus { border-color:var(--rose); box-shadow:0 0 0 4px rgba(169,45,99,.08) }
textarea { resize:vertical; min-height:130px }
.req { color:var(--rose) }
.form-status { padding:12px 16px; border-radius:10px; font-size:.87rem; font-weight:500; margin-bottom:14px; display:none }
.form-status.ok  { background:#f0faf0; color:#166316; border:1px solid #b7dbb7; display:block }
.form-status.err { background:#fdf0f0; color:#8a1a1a; border:1px solid #d8b0b0; display:block }

/* ======================================================
   FOOTER
   ====================================================== */
#ftr { background:var(--ink2); border-top:3px solid var(--rose) }
.ftr-main { padding:72px 0 48px }
.ftr-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:44px }
.fb .logo-n { color:#fff; font-size:1.35rem }
.fb .logo-s { color:rgba(255,255,255,.35) }
.fb p { font-size:.86rem; color:rgba(255,255,255,.42); line-height:1.78; margin:16px 0 20px }
.f-soc { display:flex; gap:9px }
.f-soc a { width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.38); font-size:.78rem; transition:var(--t) }
.f-soc a:hover { background:var(--rose); border-color:var(--rose); color:#fff }
.fc h5 { font-family:'Plus Jakarta Sans',sans-serif; font-size:.63rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.88); margin-bottom:18px }
.fl { list-style:none }
.fl li { margin-bottom:10px }
.fl a { font-size:.86rem; color:rgba(255,255,255,.38); transition:var(--t); display:inline-flex; align-items:center; gap:5px }
.fl a:hover { color:var(--gold); padding-left:3px }
.fc-c p { font-size:.84rem; color:rgba(255,255,255,.38); display:flex; gap:10px; margin-bottom:10px }
.fc-c p i { color:var(--rose); flex-shrink:0; margin-top:2px }
.ftr-bottom { border-top:1px solid rgba(255,255,255,.06); padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-size:.73rem; color:rgba(255,255,255,.26) }
.ftr-bottom a { color:rgba(255,255,255,.26) }
.ftr-bottom a:hover { color:var(--gold) }
.ftr-bottom .gl { color:var(--gold) }

/* ======================================================
   ANIMATIONS
   ====================================================== */
.rev { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease }
.rev.in { opacity:1; transform:translateY(0) }
.rev-l { opacity:0; transform:translateX(-30px); transition:opacity .7s ease,transform .7s ease }
.rev-l.in { opacity:1; transform:translateX(0) }
.rev-r { opacity:0; transform:translateX(30px); transition:opacity .7s ease,transform .7s ease }
.rev-r.in { opacity:1; transform:translateX(0) }
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media(max-width:1100px){
  .ftr-grid{grid-template-columns:1fr 1fr}
  .reco-masonry{columns:2}
  .hh-inner{grid-template-columns:1fr;padding:130px 0 80px}
  .hh-portrait{display:none}
  .about-full-wrap{grid-template-columns:1fr}
  .about-sidebar{display:none}
  .about-grid{grid-template-columns:1fr}
  .about-imgs{display:none}
}
@media(max-width:900px){
  .ini-row{grid-template-columns:1fr}
  .ini-row.alt{direction:ltr}
  .ini-row-img{min-height:280px}
  .ini-row-body{padding:40px 32px}
  .ini-row.alt .ini-row-body{padding:40px 32px}
  .media-feat{grid-template-columns:1fr}
  .mf-img{display:none}
  .mf-body{border-radius:var(--radius-lg)}
  .contact-wrap{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr 1fr}
  .ini-cards{grid-template-columns:1fr 1fr}
  .gallery-strip-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr}
  .roles-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-ul,.nav-cta{display:none}
  .hbg{display:flex}
  .sec{padding:64px 0}.sec-lg{padding:80px 0}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-box:nth-child(2){border-right:none}
  .media-grid{grid-template-columns:1fr}
  .reco-masonry{columns:1}
  .gal-mason{columns:2}
  .ftr-grid{grid-template-columns:1fr;gap:28px}
  .ftr-bottom{flex-direction:column;gap:6px;text-align:center}
  .ini-cards{grid-template-columns:1fr}
}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .hh-btns{flex-direction:column}
  .hh-stats{gap:0;flex-wrap:wrap}
  .hh-stat{flex:1 1 45%;border-right:none;padding-right:0;margin-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:16px;margin-bottom:16px}
  .gallery-strip-grid{grid-template-columns:1fr 1fr}
  .gal-mason{columns:1}
  .donate-banner .db-btns{flex-direction:column;align-items:center}
  .c-form-wrap{padding:24px}
}