:root{
  --navy:#060B1F;
  --navy-2:#0C1836;
  --blue:#1849D6;
  --blue-deep:#0E2E96;
  --sky:#27B4EE;
  --ink:#101529;
  --slate:#5C6478;
  --bg:#F5F7FC;
  --card:#FFFFFF;
  --gold:#F2A93B;
  --gold-deep:#D1820F;
  --green:#2FAE79;
  --line:#E6E9F2;
  --radius:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Almarai', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'El Messiri', serif;
  color:var(--navy);
  line-height:1.3;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 24px;}
section{position:relative;}
section.pad{ padding:88px 0;}
.white-section{ background:#fff; }
.section-end{ padding:90px 0; }
.section-end.flush-top{ padding-top:0; }
.section-tight-top{ padding-top:30px !important; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:var(--blue);
  letter-spacing:.3px; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--gold); border-radius:2px;}
.eyebrow-center{ justify-content:center; }
.eyebrow-sky{ color:var(--sky); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:800; font-size:15px;
  border:none; cursor:pointer; transition:.25s ease; white-space:nowrap;
}
.btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff; box-shadow:0 10px 24px -8px rgba(238,159,53,.55);}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(238,159,53,.65);}
.btn-outline{ background:transparent; border:1.5px solid var(--line); color:var(--ink);}
.btn-outline:hover{ border-color:var(--blue); color:var(--blue);}
.btn-white{ background:#fff; color:var(--blue-deep);}
.btn-white:hover{ transform:translateY(-2px);}

/* ===== Header ===== */
#header-placeholder{
  min-height:var(--site-header-height, 78px);
}

header{
  position:fixed; top:0; right:0; left:0; width:100%; z-index:100;
  background:rgba(245,247,252,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{
  height:44px; width:auto;
  filter: brightness(0) saturate(100%) invert(10%) sepia(40%) saturate(2177%) hue-rotate(214deg) brightness(94%) contrast(98%);
}
nav.main-nav{display:flex; align-items:center; gap:2px;}
nav.main-nav > ul{display:flex; align-items:center; gap:4px;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:10px; font-weight:700; font-size:14.5px; color:var(--ink);
  transition:.2s;
}
nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li > a.current{ background:#fff; color:var(--blue);}
.caret{width:9px; height:9px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-top:-4px; opacity:.6; transition:transform .2s ease;}
.dropdown{
  position:absolute; top:calc(100% + 10px); right:0; min-width:260px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 40px -16px rgba(11,23,48,.22);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.2s ease; z-index:50;
}
nav.main-nav > ul > li:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{ display:block; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:700; color:var(--slate);}
.dropdown a:hover{ background:var(--bg); color:var(--blue);}
.header-cta{display:flex; align-items:center; gap:10px;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:24px; height:2px; background:var(--ink); border-radius:2px;}

/* ===== Page banner (interior pages) ===== */
.page-banner{
  position:relative; overflow:hidden; padding:64px 0 56px;
  background:linear-gradient(180deg,#EEF2FB 0%, var(--bg) 100%);
}
.page-banner.no-bottom{ padding-bottom:0; }
.page-banner .loops{ position:absolute; inset:0; opacity:.5; pointer-events:none;}
.page-banner .inner{ position:relative; z-index:2;}
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--slate); margin-bottom:16px;}
.breadcrumb a:hover{ color:var(--blue);}
.breadcrumb .sep{ opacity:.5;}
.page-banner h1{ font-size:clamp(28px,3.6vw,44px); margin-bottom:12px;}
.page-banner p{ color:var(--slate); font-size:16px; max-width:600px;}

/* ===== Hero (home) — cinematic photo hero ===== */
.hero-photo{
  position:relative; overflow:hidden;
  min-height:640px;
  display:flex; align-items:flex-end;
  background:var(--navy);
}
.hero-photo .bg-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  opacity:.62;
}
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,11,31,.55) 0%, rgba(6,11,31,.35) 35%, rgba(6,11,31,.92) 100%),
    linear-gradient(90deg, rgba(6,11,31,.88) 0%, rgba(6,11,31,.35) 55%, rgba(6,11,31,.15) 100%);
}
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(600px 320px at 85% 0%, rgba(39,180,238,.20), transparent 70%);
}
.hero-photo .container{ position:relative; z-index:2; padding-top:64px; padding-bottom:56px; width:100%;}
.hero-photo .eyebrow{ color:#BFD4FF;}
.hero-photo .eyebrow::before{ background:var(--gold);}
.hero-photo h1{ color:#fff; font-size:clamp(32px,4.6vw,58px); font-weight:700; margin-bottom:20px; max-width:820px;}
.hero-photo h1 em{ font-style:normal; color:var(--sky);}
.hero-photo p.lead{ color:rgba(255,255,255,.82); font-size:17.5px; max-width:560px; margin-bottom:32px;}
.hero-photo .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}

.hero-stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:820px;}
.hero-stat-chip{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); border-radius:16px; padding:16px 14px;
}
.hero-stat-chip b{ display:block; font-family:'El Messiri',serif; font-size:24px; color:#fff; margin-bottom:2px;}
.hero-stat-chip span{ font-size:12px; color:rgba(255,255,255,.7); font-weight:700;}

@media (max-width:980px){
  .hero-photo{ min-height:560px;}
  .hero-stat-row{ grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .hero-photo .container{ padding-top:40px;}
  .hero-photo{ min-height:520px;}
}

.progress-track{ height:9px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:10px;}
.progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),#57CE9E); width:0%; transition:width 1.4s cubic-bezier(.2,.8,.2,1);}
.progress-meta{ display:flex; justify-content:space-between; font-size:13px; color:var(--slate); font-weight:700; margin-bottom:18px;}
.progress-meta b{ color:var(--navy); font-family:'El Messiri',serif; font-size:15px;}

/* ===== Stats band ===== */
.stats-band{ background:var(--navy); padding:46px 0; position:relative; overflow:hidden;}
.stats-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 260px at 15% 20%, rgba(39,180,238,.18), transparent), radial-gradient(500px 240px at 85% 80%, rgba(238,159,53,.14), transparent);}
.stats-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat-item{ text-align:center; color:#fff; padding:10px;}
.stat-item b{ display:block; font-family:'El Messiri',serif; font-size:38px; background:linear-gradient(135deg,#fff,#BFE3FA); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.stat-item span{ font-size:13.5px; opacity:.75; font-weight:700;}

/* ===== Section heading ===== */
.sec-head{ max-width:640px; margin-bottom:44px;}
.sec-head h2{ font-size:clamp(26px,3vw,36px); margin-bottom:14px;}
.sec-head p{ color:var(--slate); font-size:16px;}
.sec-head.center{ margin-inline:auto; text-align:center;}

/* ===== About ===== */
.about-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:center;}
.about-visual{ position:relative;}
.about-illustration{ border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 20px 50px -20px rgba(11,23,48,.18);}
.about-illustration img{ width:100%; height:100%; display:block; object-fit:cover; }
.about-badge{ position:absolute; bottom:-22px; left:-22px; background:#fff; border-radius:18px; padding:18px 22px; box-shadow:0 18px 36px -14px rgba(11,23,48,.28); display:flex; gap:14px; align-items:center;}
.about-badge .num{ font-family:'El Messiri',serif; font-size:30px; color:var(--gold-deep);}
.about-badge span{ display:block; font-size:12.5px; color:var(--slate); font-weight:700; max-width:120px;}
.about-text p{ color:var(--slate); margin-bottom:18px; font-size:16px;}
.value-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px;}
.value-item{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;}
.value-item .ic{ width:36px; height:36px; border-radius:10px; background:var(--bg); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.value-item b{ display:block; font-size:14.5px; margin-bottom:3px;}
.value-item small{ color:var(--slate); font-size:12.5px; font-weight:600;}

.pillar-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:30px;}
.pillar-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px 22px 22px; box-shadow:0 10px 30px -22px rgba(11,23,48,.18); transition:transform .3s ease, box-shadow .3s ease;}
.pillar-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(11,23,48,.3);}
.pillar-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px;}
.pillar-card h3{ margin:0; font-size:19px; font-family:'El Messiri',serif; color:var(--ink);}
.pillar-card p{ margin:0; color:var(--slate); font-size:14px; line-height:1.85;}
.pillar-ic{ width:46px; height:46px; min-width:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;}
.pillar-ic svg{ width:26px; height:26px;}
.pillar-card.tone-gold .pillar-ic{ background:linear-gradient(135deg, #f9e5b3 0%, #f4d27a 100%); color:#a4730b;}
.pillar-card.tone-blue .pillar-ic{ background:linear-gradient(135deg, #cfe2ff 0%, #a5c8fc 100%); color:#1d4ed8;}
.pillar-card.tone-green .pillar-ic{ background:linear-gradient(135deg, #d3f3d7 0%, #a4e1ad 100%); color:#15803d;}
.pillar-card.tone-violet .pillar-ic{ background:linear-gradient(135deg, #e6dcff 0%, #c7b3ff 100%); color:#6d28d9;}

/* ===== Timeline (about page) ===== */
.timeline{ position:relative; margin-top:10px; padding-inline-start:0;}
.timeline::before{ content:""; position:absolute; top:0; bottom:0; right:19px; width:2px; background:var(--line);}
.timeline-item{ position:relative; padding-right:56px; margin-bottom:34px;}
.timeline-item::before{ content:""; position:absolute; right:11px; top:2px; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--sky)); border:4px solid #fff; box-shadow:0 0 0 2px var(--line);}
.timeline-item b.year{ display:block; color:var(--gold-deep); font-family:'El Messiri',serif; font-size:15px; margin-bottom:4px;}
.timeline-item h4{ font-size:16.5px; margin-bottom:6px;}
.timeline-item p{ font-size:14px; color:var(--slate);}

/* ===== Team ===== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.team-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; text-align:center; transition:.25s;}
.team-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(11,23,48,.2);}
.team-avatar{ width:76px; height:76px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; color:#fff;}
.team-card h4{ font-size:15.5px; margin-bottom:4px;}
.team-card span{ font-size:12.5px; color:var(--slate); font-weight:700;}

/* ===== Sectors ===== */
.sectors-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.sector-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.25s ease; position:relative; overflow:hidden;}
.sector-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -20px rgba(11,23,48,.2); border-color:transparent;}
.sector-card .ic{
  width:66px; height:66px; border-radius:20px; margin-bottom:18px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, #2459e6 0%, #27b4ee 100%);
  color:#fff; overflow:hidden; position:relative;
  box-shadow:0 18px 34px -18px rgba(24,73,214,.55);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:sectorIconFloat 4.4s ease-in-out infinite;
}
.sector-card .ic::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  pointer-events:none;
}
.sector-card .ic::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  top:8px;
  left:8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,169,59,.95) 0%, rgba(242,169,59,0) 72%);
  opacity:.9;
  pointer-events:none;
}
.sector-card .ic svg{
  width:36px;
  height:36px;
  display:block;
  position:relative;
  z-index:1;
  color:#fff;
  filter:drop-shadow(0 4px 8px rgba(6,11,31,.12));
}
.sector-card .ic svg .accent{
  stroke:var(--gold);
  fill:none;
}
.sector-card .ic svg .accent-fill{
  fill:var(--gold);
  stroke:none;
}
.sector-card:hover .ic{ transform:translateY(-3px) rotate(-3deg) scale(1.04); box-shadow:0 24px 42px -20px rgba(24,73,214,.62); }
.sector-card h3{ font-size:18px; margin-bottom:8px;}
.sector-card p{ font-size:14px; color:var(--slate); margin-bottom:16px;}
.sector-card .go{ font-size:13px; font-weight:800; color:var(--blue); display:inline-flex; align-items:center; gap:6px;}
.sector-card .num{ position:absolute; top:18px; left:22px; font-family:'El Messiri',serif; font-size:34px; color:var(--line); font-weight:600;}
.home-sectors-offset{ padding-top:120px !important; }

.sectors-grid .sector-card:nth-child(2) .ic,
.sectors-grid .sector-card:nth-child(5) .ic,
.sectors-grid .sector-card:nth-child(8) .ic{ animation-delay:.6s; }

.sectors-grid .sector-card:nth-child(3) .ic,
.sectors-grid .sector-card:nth-child(6) .ic,
.sectors-grid .sector-card:nth-child(9) .ic{ animation-delay:1.2s; }

@keyframes sectorIconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

.sector-timeline-wrap{
  position:relative;
  margin-top:34px;
  padding:34px 22px 24px;
  border-radius:32px;
  background:linear-gradient(180deg, #fbfcff 0%, #f4f7fc 100%);
  border:1px solid #dce4f1;
  box-shadow:0 24px 56px -38px rgba(11,23,48,.16);
  overflow:hidden;
}

.sector-timeline-wrap::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.92);
  pointer-events:none;
}

.sector-timeline-line{
  position:absolute;
  inset-inline:52px;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(224,161,44,.16), rgba(138,99,255,.18), rgba(0,209,189,.18), rgba(96,112,255,.18), rgba(22,190,246,.16));
}

.sector-timeline-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(9, minmax(0, 1fr));
  align-items:center;
  gap:0;
}

.sector-timeline-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  color:var(--navy);
  padding-inline:4px;
  transition:transform .24s ease;
}

.sector-timeline-item.top{ padding-bottom:58px; }
.sector-timeline-item.bottom{ padding-top:58px; }
.sector-timeline-item:hover{ transform:translateY(-4px); }

.sector-timeline-item::before{
  content:"";
  position:absolute;
  left:50%;
  width:2px;
  height:34px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, color-mix(in srgb, currentColor 36%, white), rgba(255,255,255,0));
}

.sector-timeline-item.top::before{ top:90px; }
.sector-timeline-item.bottom::before{
  bottom:90px;
  background:linear-gradient(0deg, color-mix(in srgb, currentColor 36%, white), rgba(255,255,255,0));
}

.sector-timeline-item::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:78px;
  height:18px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 22%, white), rgba(255,255,255,0));
  filter:blur(8px);
  opacity:.95;
}

.sector-timeline-item.top::after{ bottom:42px; }
.sector-timeline-item.bottom::after{ top:42px; }

.sector-timeline-media{
  width:86px;
  height:86px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid currentColor;
  box-shadow:0 0 0 6px rgba(255,255,255,.94), 0 16px 28px -18px rgba(11,23,48,.2);
  position:relative;
  z-index:1;
  background:#fff;
}

.sector-timeline-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sector-timeline-card{
  min-height:48px;
  max-width:122px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.84);
  border:1px solid color-mix(in srgb, currentColor 18%, white);
  box-shadow:0 14px 28px -24px rgba(11,23,48,.16);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

.sector-timeline-card strong{
  font-family:'El Messiri',serif;
  font-size:15px;
  line-height:1.25;
  color:color-mix(in srgb, currentColor 78%, var(--navy));
}

.sector-timeline-card small{
  font-size:11.5px;
  line-height:1.35;
  color:var(--slate);
  font-weight:700;
}

.sector-timeline-cta{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  margin-top:12px;
}

.tone-cyan{ color:#16bef6; }
.tone-amber{ color:#f59d10; }
.tone-indigo{ color:#6070ff; }
.tone-fuchsia{ color:#d34bff; }
.tone-teal{ color:#00d1bd; }
.tone-lime{ color:#8ad93b; }
.tone-green{ color:#24b259; }
.tone-violet{ color:#8a63ff; }
.tone-gold{ color:#e0a12c; }

/* ===== Sector detail page ===== */
.sector-hero{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-bottom:70px;}
.sector-hero .illus{ border-radius:24px; overflow:hidden; box-shadow:0 20px 50px -20px rgba(11,23,48,.18); background:#fff;}
.sector-hero h1{ font-size:clamp(26px,3.4vw,38px); margin-bottom:16px;}
.sector-hero p{ color:var(--slate); font-size:16px; margin-bottom:24px;}
.mini-stats{ display:flex; gap:26px; margin-bottom:26px; flex-wrap:wrap;}
.mini-stats div b{ display:block; font-family:'El Messiri',serif; font-size:22px; color:var(--navy);}
.mini-stats div span{ font-size:12.5px; color:var(--slate); font-weight:700;}
.sector-detail-body{ display:grid; grid-template-columns:2fr 1fr; gap:50px;}
.sector-detail-body h3{ font-size:20px; margin:26px 0 14px;}
.sector-detail-body p{ color:var(--slate); font-size:15.5px; margin-bottom:14px;}
.check-list li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:15px; color:var(--slate);}
.check-list li .ic{ width:22px; height:22px; border-radius:50%; background:rgba(47,174,121,.12); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;}
.sidebar-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; margin-bottom:20px;}
.sidebar-card h4{ font-size:15.5px; margin-bottom:14px;}
.sidebar-list a{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; color:var(--slate);}
.sidebar-list a:last-child{ border-bottom:none;}
.sidebar-list a:hover, .sidebar-list a.current{ color:var(--blue);}
.sidebar-card.cta{ background:linear-gradient(140deg,var(--blue-deep),var(--sky)); color:#fff; text-align:center;}
.sidebar-card.cta h4{ color:#fff;}
.sidebar-card.cta p{ font-size:13.5px; color:rgba(255,255,255,.85); margin-bottom:16px;}

/* ===== Campaigns ===== */
.campaigns-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:34px; gap:20px; flex-wrap:wrap;}
.campaigns-head .sec-head{ margin-bottom:0; }
.split-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.stack-center{ max-width:720px; margin:0 auto; }
.media-cover{ width:100%; height:100%; object-fit:cover; }
.field-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.field-gallery-grid .campaign-cover{ height:220px; }
.field-gallery-grid .campaign-cover img{ object-position:top; }
.field-gallery-grid .campaign-body h4{ min-height:auto; }
.campaign-scroller{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.campaign-card{ background:#fff; border:1px solid #d7dfef; border-radius:22px; padding:14px; overflow:hidden; transition:.25s; box-shadow:0 18px 34px -28px rgba(11,23,48,.28);}
.campaign-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -22px rgba(11,23,48,.24); border-color:#c8d5ef;}
.campaign-cover{ height:136px; position:relative; background:#eef2fb; border-radius:16px; overflow:hidden; margin-bottom:14px;}
.campaign-cover img{ width:100%; height:100%; object-fit:cover; object-position:top center;}
.campaign-cover .badge{ display:none; }
.campaign-body{ padding:0;}
.campaign-body .org{ font-size:11.5px; color:var(--slate); font-weight:800; margin-bottom:8px;}
.campaign-body h4{ font-size:16.5px; margin-bottom:16px; min-height:52px; line-height:1.45;}
.campaign-body .btn{ width:100%; margin-top:8px; padding:13px 18px; border-radius:999px; box-shadow:none; background:linear-gradient(135deg,#E9A12C,#DD8E10);}
.campaign-body .btn:hover{ box-shadow:none; }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:800; font-size:13px; color:var(--slate); cursor:pointer; transition:.2s;}
.filter-btn.active{ background:var(--blue); border-color:var(--blue); color:#fff;}
.campaign-card .progress-track{ height:7px; margin-bottom:10px; background:#e8ecf4; }
.campaign-card .progress-fill{ background:#46b874; }
.campaign-card .progress-meta{ margin-bottom:10px; font-size:12px; color:var(--slate); }
.campaign-card .progress-meta span{ display:flex; align-items:center; gap:3px; }
.campaign-card .progress-meta b{ font-size:14px; color:var(--navy); }

/* ===== Process ===== */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.process-item{ position:relative; padding-top:8px;}
.process-item .idx{ font-family:'El Messiri',serif; font-size:52px; color:var(--line); font-weight:700; margin-bottom:6px;}
.process-item h4{ font-size:18px; margin-bottom:10px;}
.process-item p{ color:var(--slate); font-size:14.5px;}
.process-centered .process-item{ text-align:center;}
.process-centered .idx,
.process-centered h4,
.process-centered p{ margin-inline:auto;}

/* ===== Blog ===== */
.blog-tabs{ display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap;}
.tab-btn{ padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:800; font-size:13.5px; color:var(--slate); cursor:pointer; transition:.2s;}
.tab-btn.active{ background:var(--blue); border-color:var(--blue); color:#fff;}
.blog-panel{ display:none;}
.blog-panel.active{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.blog-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.25s;}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -20px rgba(11,23,48,.2);}
.blog-cover{ height:150px; background:linear-gradient(135deg,#EEF2FB,#DDE6F8); display:flex; align-items:center; justify-content:center; color:var(--blue); overflow:hidden;}
.blog-cover img{ width:100%; height:100%; object-fit:cover;}
.blog-body{ padding:18px 20px;}
.blog-body .date{ font-size:12px; color:var(--gold-deep); font-weight:800; margin-bottom:8px;}
.blog-body h4{ font-size:15.5px; margin-bottom:10px;}
.cta-band-section{ padding:90px 0; }
.blog-body p{ font-size:13.5px; color:var(--slate);}

/* ===== CTA band ===== */
.cta-band{ margin:0 24px; max-width:1152px; margin-inline:auto; background:linear-gradient(120deg,var(--blue-deep),var(--blue) 55%,var(--sky)); border-radius:28px; padding:56px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden;}
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(420px 220px at 90% 10%, rgba(255,255,255,.18), transparent); pointer-events:none;}
.cta-band > *{ position:relative; z-index:1; }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:50px;}
.contact-info-card{ background:var(--navy); color:#fff; border-radius:24px; padding:34px; position:relative; overflow:hidden;}
.contact-info-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(360px 200px at 100% 0%, rgba(39,180,238,.25), transparent);}
.contact-info-card h3{ color:#fff; font-size:22px; margin-bottom:8px; position:relative;}
.contact-info-card p{ color:rgba(255,255,255,.65); font-size:14.5px; margin-bottom:26px; position:relative;}
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; position:relative;}
.info-row .ic{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-row b{ display:block; font-size:14px; margin-bottom:2px;}
.info-row span{ font-size:13px; color:rgba(255,255,255,.6);}
.social-row{ display:flex; gap:10px; margin-top:26px; position:relative;}
.social-row a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:.2s;}
.social-row a:hover{ background:var(--sky);}
.contact-form{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px;}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{ display:flex; flex-direction:column; gap:8px;}
.field label{ font-size:13.5px; font-weight:800; color:var(--ink);}
.field input, .field select, .field textarea{ border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--bg); outline:none; transition:.2s;}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); background:#fff;}
.field textarea{ resize:vertical; min-height:120px;}
.contact-form .btn{ width:100%; padding:15px; margin-top:6px;}
.map-strip{ margin-top:60px; border-radius:24px; overflow:hidden; height:260px; position:relative; background:linear-gradient(135deg,#dfe6f6,#eef2fb);}
.map-strip svg{ width:100%; height:100%;}
.map-pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); text-align:center;}

/* FAQ */
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:14px; cursor:pointer;}
.faq-item .q{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:15px;}
.faq-item .q .plus{ width:22px; height:22px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.2s;}
.faq-item .a{ max-height:0; overflow:hidden; transition:.3s ease; font-size:14.5px; color:var(--slate);}
.faq-item.open .a{ max-height:200px; margin-top:12px;}
.faq-item.open .plus{ transform:rotate(45deg); background:var(--blue); color:#fff;}

/* ===== Footer ===== */
footer{ background:var(--navy); color:#fff; padding-top:70px;}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand img{
  height:42px;
  margin-bottom:16px;
  background:transparent;
  padding:0;
  border-radius:0;
  display:inline-block;
  filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(299deg) brightness(106%) contrast(101%);
}
.footer-brand p{ color:rgba(255,255,255,.6); font-size:14px; max-width:280px; margin-bottom:20px;}
footer h5{ font-size:15px; margin-bottom:18px; color:#fff;}
footer ul li{ margin-bottom:12px;}
footer ul li a{ color:rgba(255,255,255,.6); font-size:14px; transition:.2s;}
footer ul li a:hover{ color:var(--sky);}
.newsletter-box{ display:flex; gap:0; margin-top:6px;}
.newsletter-box input{ flex:1; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; padding:13px 16px; border-radius:12px 0 0 12px; outline:none; font-family:inherit;}
.newsletter-box button{ border:none; background:var(--gold); color:#fff; padding:0 20px; border-radius:0 12px 12px 0; cursor:pointer; font-weight:800;}
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:12px; color:rgba(255,255,255,.45); font-size:13px;}

/* ===== Responsive ===== */
@media (max-width:980px){
  nav.main-nav{ display:none;}
  nav.main-nav.is-open{
    display:block;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    background:#fff;
    padding:10px 20px;
    border-top:1px solid var(--line);
  }
  nav.main-nav.is-open > ul{
    flex-direction:column;
    align-items:stretch;
  }
  .burger{ display:flex;}
  .about-grid{ grid-template-columns:1fr;}
  .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:28px;}
  .sectors-grid{ grid-template-columns:repeat(2,1fr);}
  .campaign-scroller{ grid-template-columns:repeat(2,1fr);}
  .process-grid{ grid-template-columns:1fr;}
  .blog-panel.active{ grid-template-columns:repeat(2,1fr);}
  .contact-grid{ grid-template-columns:1fr;}
  .footer-grid{ grid-template-columns:1fr 1fr;}
  .sector-hero{ grid-template-columns:1fr;}
  .sector-detail-body{ grid-template-columns:1fr;}
  .team-grid{ grid-template-columns:repeat(2,1fr);}
  .field-gallery-grid{ grid-template-columns:repeat(2,1fr); }

  .sector-timeline-wrap{ padding:28px 16px 22px; }
  .sector-timeline-grid{ grid-template-columns:repeat(5, 1fr); row-gap:20px; }
  .sector-timeline-line{ display:none; }
  .sector-timeline-item.top{ padding-bottom:26px; }
  .sector-timeline-item.bottom{ padding-top:26px; }
  .sector-timeline-item.top::before,
  .sector-timeline-item.bottom::before,
  .sector-timeline-item.top::after,
  .sector-timeline-item.bottom::after{ display:none; }
}
@media (max-width:640px){
  .hero-actions .btn{ width:100%;}
  .sectors-grid, .campaign-scroller, .blog-panel.active{ grid-template-columns:1fr;}
  .form-row{ grid-template-columns:1fr;}
  .section-end{ padding:60px 0; }
  .cta-band-section{ padding:60px 0; }
  .cta-band{ padding:34px 24px; flex-direction:column; align-items:flex-start;}
  .footer-grid{ grid-template-columns:1fr;}
  .hero-stat-row{ grid-template-columns:repeat(2,1fr);}
  section.pad{ padding:60px 0;}
  .home-sectors-offset{ padding-top:76px !important; }
  .team-grid{ grid-template-columns:1fr 1fr;}
  .value-list{ grid-template-columns:1fr;}
  .pillar-grid{ grid-template-columns:1fr; gap:14px;}
  .pillar-card{ padding:20px 18px; border-radius:18px;}
  .field-gallery-grid{ grid-template-columns:1fr; }

  .sector-timeline-wrap{ padding:22px 12px 18px; border-radius:26px; }
  .sector-timeline-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px 12px;
    margin-inline:-2px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .sector-timeline-grid::-webkit-scrollbar{ display:none; }
  .sector-timeline-item{
    min-width:132px;
    flex:0 0 132px;
    scroll-snap-align:center;
    gap:10px;
    padding:0;
  }
  .sector-timeline-item::before,
  .sector-timeline-item::after{ display:none; }
  .sector-timeline-media{ width:82px; height:82px; }
  .sector-timeline-card{ max-width:118px; min-height:44px; padding:9px 10px; }
  .sector-timeline-card strong{ font-size:14px; }
  .sector-timeline-card small{ font-size:11px; }
  .sector-timeline-cta{ margin-top:4px; }
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */
.lang-switch{ position:relative; }
.lang-trigger{
  display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--line);
  color:var(--ink); padding:9px 12px; border-radius:999px; font-weight:800; font-size:12.5px; cursor:pointer; transition:.2s;
}
.lang-trigger:hover{ border-color:var(--blue); color:var(--blue);}
.lang-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:150px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 20px 40px -16px rgba(11,23,48,.22); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.2s ease; z-index:120;
}
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0);}
.lang-option{
  display:block; width:100%; text-align:right; background:none; border:none; padding:9px 12px; border-radius:9px;
  font-size:13.5px; font-weight:700; color:var(--slate); cursor:pointer; font-family:inherit;
}
.lang-option:hover{ background:var(--bg); color:var(--blue);}
.lang-option.active{ background:var(--blue); color:#fff;}
body.lang-ltr .lang-option{ text-align:left; }

/* =========================================================
   LTR (EN / TR) layout mirroring for the handful of
   direction-specific rules used across the site
   ========================================================= */
html[dir="ltr"] body{ font-family:'Inter','Almarai',sans-serif; }
html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3, html[dir="ltr"] h4, html[dir="ltr"] .display{ font-family:'Poppins','El Messiri',serif; }
html[dir="ltr"] .caret{ border-left:2px solid currentColor; border-right:none; transform:rotate(-45deg); }
html[dir="ltr"] .dropdown{ right:auto; left:0; }
html[dir="ltr"] .about-badge{ left:auto; right:-22px; }
html[dir="ltr"] nav.main-nav.is-open{ right:0; left:0; }
html[dir="ltr"] .timeline::before{ right:auto; left:19px; }
html[dir="ltr"] .timeline-item{ padding-right:0; padding-left:56px; }
html[dir="ltr"] .timeline-item::before{ right:auto; left:11px; }
html[dir="ltr"] .sector-card .num{ left:auto; right:22px; }
html[dir="ltr"] .campaign-cover .badge{ right:auto; left:14px; }
html[dir="ltr"] .map-pin{ left:50%; }
html[dir="ltr"] .lang-menu{ left:auto; right:0; }
html[dir="ltr"] .newsletter-box input{ border-radius:0 12px 12px 0; }
html[dir="ltr"] .newsletter-box button{ border-radius:12px 0 0 12px; }

/* =========================================================
   HOMEPAGE ENRICHMENT — trust chip, features, partners,
   testimonials (fills previously empty visual space and
   takes cues from reference NGO platforms without copying)
   ========================================================= */
.hero-trust-chip{
  position:absolute; z-index:3; bottom:34px; left:24px; display:flex; align-items:center; gap:12px;
  background:rgba(6,11,31,.55); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.18);
  border-radius:18px; padding:14px 18px;
}
body.lang-ltr .hero-trust-chip{ left:auto; right:24px; }
.hero-trust-chip .avatars{ display:flex; }
.hero-trust-chip .avatars span{
  width:34px; height:34px; border-radius:50%; border:2px solid rgba(6,11,31,.55); margin-inline-start:-12px;
  background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:800;
}
.hero-trust-chip .avatars span:first-child{ margin-inline-start:0; }
.hero-trust-chip b{ display:block; color:#fff; font-family:'El Messiri',serif; font-size:17px; }
.hero-trust-chip span.lbl{ display:block; color:rgba(255,255,255,.7); font-size:11.5px; font-weight:700; }
@media (max-width:640px){ .hero-trust-chip{ display:none; } }

.features-strip{ background:#fff; }
.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card{ display:flex; gap:16px; align-items:flex-start; padding:26px; border:1px solid var(--line); border-radius:var(--radius); transition:.25s; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -20px rgba(11,23,48,.18); }
.feature-card .ic{ width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff; }
.feature-card h4{ font-size:16px; margin-bottom:6px; }
.feature-card p{ font-size:13.5px; color:var(--slate); }

.partners-strip{
  padding:44px 0;
  background:linear-gradient(180deg, #f7f9fd 0%, #f3f6fb 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.partners-strip .lbl{
  text-align:center;
  font-size:18px;
  font-family:'El Messiri',serif;
  font-weight:700;
  color:var(--navy);
  margin-bottom:20px;
}
.partners-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
}
.partners-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
  animation:partnersMarquee 30s linear infinite;
}
.partners-marquee:hover .partners-track{
  animation-play-state:paused;
}
.partners-group{
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
  padding-inline-end:18px;
}
.partner-logo-card{
  width:148px;
  height:92px;
  padding:14px 16px;
  border-radius:22px;
  background:#fff;
  border:1px solid #e4e9f2;
  box-shadow:0 14px 30px -24px rgba(11,23,48,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.partner-logo-card img{
  max-width:100%;
  max-height:50px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

@keyframes partnersMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.testimonials-strip{ background:var(--navy); position:relative; overflow:hidden; }
.testimonials-strip::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 10% 10%, rgba(39,180,238,.16), transparent), radial-gradient(500px 260px at 90% 90%, rgba(238,159,53,.12), transparent); }
.testi-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:26px; }
.testi-card .quote-mark{ color:var(--gold); font-family:'El Messiri',serif; font-size:38px; line-height:1; margin-bottom:10px; display:block; }
.testi-card p{ color:rgba(255,255,255,.85); font-size:14.5px; margin-bottom:18px; }
.testi-person{ display:flex; align-items:center; gap:10px; }
.testi-person .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; }
.testi-person b{ display:block; color:#fff; font-size:13.5px; }
.testi-person span{ display:block; color:rgba(255,255,255,.55); font-size:11.5px; }

@media (max-width:980px){
  .features-grid{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .partner-logo-card{ width:136px; height:86px; }
}

/* =========================================================
   CAMPAIGN DETAILS PAGE
   ========================================================= */
.cd-topbar{ background:linear-gradient(180deg,#EEF2FB 0%, var(--bg) 100%); padding:26px 0; }
.cd-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:44px; align-items:start; padding:44px 0 90px; }
.cd-category{ display:inline-flex; align-items:center; gap:8px; background:rgba(24,73,214,.08); color:var(--blue); font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:999px; margin-bottom:16px; }
.cd-title{ font-size:clamp(24px,3vw,36px); margin-bottom:18px; }
.cd-cover{ border-radius:22px; overflow:hidden; margin-bottom:22px; box-shadow:0 24px 50px -22px rgba(11,23,48,.25); position:relative; }
.cd-cover img{ width:100%; height:420px; object-fit:cover; }
.cd-meta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.cd-meta-chip{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 16px; font-size:13px; font-weight:700; color:var(--ink); }
.cd-meta-chip .ic{ color:var(--gold-deep); display:flex; }
.cd-body h3{ font-size:20px; margin:26px 0 12px; }
.cd-body p{ color:var(--slate); font-size:15.5px; margin-bottom:16px; }
.cd-body strong{ color:var(--navy); }
.cd-summary{ font-weight:800; color:var(--navy) !important; }
.cd-share{ display:flex; align-items:center; gap:10px; margin:30px 0; padding-top:24px; border-top:1px solid var(--line); }
.cd-share span{ font-size:13.5px; font-weight:800; color:var(--slate); }
.cd-share a{ width:38px; height:38px; border-radius:10px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--navy); transition:.2s; }
.cd-share a:hover{ background:var(--blue); color:#fff; }
.cd-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
.cd-gallery img{ width:100%; height:120px; object-fit:cover; border-radius:12px; transition:.2s; }
.cd-gallery img:hover{ transform:scale(1.03); }

.cd-donate-card{ position:sticky; top:92px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:0 24px 50px -26px rgba(11,23,48,.22); }
.cd-donate-card h4{ font-size:17px; margin-bottom:6px; }
.cd-donate-card > p{ font-size:13.5px; color:var(--slate); margin-bottom:20px; }
.cd-stats-list{ margin-bottom:14px; }
.cd-stats-list div{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--slate); font-weight:700; padding:8px 0; border-bottom:1px dashed var(--line); }
.cd-stats-list div b{ color:var(--navy); font-family:'El Messiri',serif; font-size:16px; }
.cd-stats-list div:last-child{ border-bottom:none; }
.cd-progress-pct{ text-align:center; font-family:'El Messiri',serif; font-size:15px; color:var(--green); font-weight:700; margin-bottom:6px; }
.cd-amounts{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0; }
.cd-amount-btn{ padding:11px 4px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg); font-weight:800; font-size:13px; color:var(--ink); cursor:pointer; transition:.2s; }
.cd-amount-btn:hover, .cd-amount-btn.active{ border-color:var(--gold); background:rgba(238,159,53,.1); color:var(--gold-deep); }
.cd-donate-card .btn{ width:100%; padding:15px; }
.cd-supporters{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:16px; font-size:12.5px; color:var(--slate); font-weight:700; }
.cd-related{ margin-top:26px; }
.cd-related h5{ font-size:14px; margin-bottom:14px; color:var(--navy); }
.cd-related a{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; color:var(--slate); }
.cd-related a:last-child{ border-bottom:none; }
.cd-related a:hover{ color:var(--blue); }
.cd-related img{ width:44px; height:44px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.breadcrumb-cd{ max-width:640px; }

.related-campaigns{ background:#fff; }

@media (max-width:980px){
  .cd-layout{ grid-template-columns:1fr; }
  .cd-donate-card{ position:static; }
  .cd-cover img{ height:280px; }
  .cd-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .cd-amounts{ grid-template-columns:repeat(2,1fr); }
}