/* ============================================================
   DRRA Bangladesh — Shared Design System
   Palette, type and component patterns adopted from the
   "Impact & Models" reference page: warm paper background,
   ink navy, magenta, marigold, jade and plum as the five
   working brand colors.
   ============================================================ */
:root{
  /* -- core palette (from reference template) -- */
  --ink:#131B3F; --ink-soft:#1C275A;
  --magenta-t:#D91C73; --magenta-deep-t:#AC1560;
  --marigold:#F0A93B; --marigold-deep:#CE8A22;
  --jade:#0E9C82; --jade-deep:#0B7C68;
  --plum:#6E52A8; --plum-deep:#3f2c73;
  --paper:#FBF6EF; --paper-alt:#F2EAD3;
  --body-c:#4A5063; --line:#E6DDCD; --muted:#6F6857;

  /* -- legacy variable names kept so existing markup needs no edits;
     mapped onto the new palette above -- */
  --navy:var(--ink-soft);
  --navy-deep:var(--ink);
  --sky:var(--plum);
  --emerald:var(--jade);
  --emerald-light:#12B896;
  --magenta:var(--magenta-t);
  --magenta-light:#E8639F;
  --magenta-deep:var(--magenta-deep-t);
  --warm-white:var(--paper);
  --neutral-dark:var(--ink);
  --radius-lg:22px; --radius-md:16px; --radius-sm:10px;
  --ease:cubic-bezier(.22,.85,.32,1);
  /* five-hue brand ramp for charts/cards — same order as the
     reference page's donut (grants / CSR / enterprise / micro-gifts / bonds) */
  --ramp-1:var(--ink); --ramp-2:var(--jade); --ramp-3:var(--magenta-t); --ramp-4:var(--marigold); --ramp-5:var(--plum);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter','Noto Sans Bengali',sans-serif; color:var(--body-c); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5;}
h1,h2,h3,h4,.display{font-family:'Poppins','Noto Sans Bengali',sans-serif; color:var(--ink); letter-spacing:-.01em;}
.bn{font-family:'Noto Sans Bengali','Poppins',sans-serif;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--magenta);}
.eyebrow.on-dark{color:var(--marigold);}

/* ---------- Accessibility states ---------- */
body.reduce-motion *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
body.large-text{font-size:112.5%;}
body.high-contrast{--paper:#FFFFFF; --paper-alt:#FFFFFF; --neutral-dark:#000000;}
body.high-contrast a, body.high-contrast p, body.high-contrast li{color:#000;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; font-weight:700; z-index:999; border-radius:0 0 10px 0;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible{outline:3px solid var(--marigold); outline-offset:3px;}

/* ---------- Accessibility toolbar ---------- */
#a11y-toolbar{position:fixed; z-index:200; bottom:22px; right:22px; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
#a11y-toggle{width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(19,27,63,.35); font-size:20px;}
#a11y-panel{display:none; flex-direction:column; gap:8px; background:#fff; border-radius:16px; padding:14px; box-shadow:0 20px 50px rgba(19,27,63,.18); width:220px; border:1px solid var(--line);}
#a11y-panel.open{display:flex;}
#a11y-panel button{text-align:left; padding:9px 12px; border-radius:10px; background:var(--paper); font-size:13.5px; font-weight:600; color:var(--ink);}
#a11y-panel button[aria-pressed="true"]{background:var(--jade); color:#fff;}

/* ---------- Nav / header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:100; padding:10px 0; background:rgba(251,246,239,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(19,27,63,.08); transition:padding .3s var(--ease);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{display:flex; align-items:center; gap:10px; background:transparent; padding:0; border-radius:0; box-shadow:none;}
.logo img{height:54px; width:auto; display:block; background:transparent; transform-origin:30% 60%; transition:transform .45s var(--ease), filter .45s var(--ease); will-change:transform;}
.logo{perspective:700px;}
.logo:hover img, .logo:focus-visible img{transform:rotateY(-14deg) rotateX(6deg) translateZ(6px); filter:drop-shadow(4px 6px 6px rgba(19,27,63,.18));}
@media (prefers-reduced-motion: reduce){ .logo img{transition:none;} .logo:hover img, .logo:focus-visible img{transform:none;} }
.nav-links{display:flex; align-items:center; gap:20px; min-width:0;}
nav.wrap > .logo, nav.wrap > .nav-cta{flex-shrink:0;}
html[lang="en"] .nav-links a, html[lang="en"] .nav-dropdown-btn{white-space:nowrap;}
.nav-dropdown-btn svg{flex-shrink:0;}
@media(max-width:1320px){.nav-links{gap:15px;} .nav-links a, .nav-dropdown-btn{font-size:14px;}}
.nav-links a{font-size:14.5px; font-weight:600; opacity:.85; position:relative; padding:6px 0; color:var(--ink); transition:opacity .25s;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--marigold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}

.nav-dropdown{position:relative;}
.nav-dropdown-btn{display:flex; align-items:center; font-size:14.5px; font-weight:600; opacity:.85; padding:6px 0; color:var(--ink); background:none; border:none; cursor:pointer; transition:opacity .25s;}
.nav-dropdown-btn:hover, .nav-dropdown-btn.active{opacity:1;}
.nav-dropdown-btn svg{transition:transform .25s var(--ease);}
.nav-dropdown.open .nav-dropdown-btn svg{transform:rotate(180deg);}
.nav-dropdown-menu{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(19,27,63,.18); padding:8px; min-width:220px; display:none; flex-direction:column; gap:2px; z-index:200;}
.nav-dropdown.open .nav-dropdown-menu{display:flex;}
.nav-dropdown-menu a{display:block; text-align:left; padding:10px 14px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink); opacity:1;}
.nav-dropdown-menu a:hover{background:var(--paper);}
.nav-dropdown-menu a::after{display:none;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.hide-mobile{display:flex;}
@media(max-width:1140px){.nav-links{display:none;} .hide-mobile{display:none;}}
.lang-sel{position:relative;}
.lang-btn{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink); padding:8px 12px; border-radius:100px; border:1px solid rgba(19,27,63,.2);}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(19,27,63,.18); padding:8px; min-width:160px; display:none; flex-direction:column; gap:2px; z-index:200;}
.lang-menu.open{display:flex;}
.lang-option{text-align:left; padding:10px 14px; border-radius:9px; font-size:14px; font-weight:600; color:var(--ink); width:100%;}
.lang-option:hover{background:var(--paper);}
.lang-option[aria-current="true"]{background:var(--paper-alt); color:var(--magenta-deep);}
.cart-link{position:relative; font-size:19px; color:var(--ink); display:flex; align-items:center;}
.cart-badge{position:absolute; top:-7px; right:-9px; background:var(--magenta); color:#fff; font-size:10px; font-weight:800; font-family:'Poppins'; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:100px; font-weight:700; font-size:14.5px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; border:1.5px solid transparent;}
/* primary CTA — marigold, matching the reference template's donate/primary-action pattern */
.btn-magenta{background:var(--marigold); color:var(--ink); box-shadow:0 10px 26px rgba(240,169,59,.35);}
.btn-magenta:hover{transform:translateY(-2px); background:var(--marigold-deep); box-shadow:0 14px 32px rgba(206,138,34,.4);}
.btn-outline{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12); transform:translateY(-2px);}
.btn-outline-navy{border-color:rgba(19,27,63,.28); color:var(--ink);}
.btn-outline-navy:hover{background:rgba(19,27,63,.06);}
.btn-emerald{background:var(--jade); color:#fff; box-shadow:0 10px 26px rgba(14,156,130,.3);}
.btn-emerald:hover{transform:translateY(-2px); background:var(--jade-deep);}
.btn-navy{background:var(--ink-soft); color:#fff;}
.btn-navy:hover{transform:translateY(-2px); background:var(--ink);}
.btn-ghost-white{color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:8px;}
.btn-sm{padding:9px 18px; font-size:13px;}
.btn-block{width:100%;}

/* ---------- Page header banner (interior pages) ---------- */
.page-hero{position:relative; padding:170px 0 90px; overflow:hidden;
  background:radial-gradient(ellipse at 15% 20%, rgba(110,82,168,.32), transparent 55%),
             radial-gradient(ellipse at 85% 80%, rgba(217,28,115,.28), transparent 55%),
             linear-gradient(150deg, var(--ink) 0%, var(--ink-soft) 55%, #3A1A4E 100%);
}
.page-hero .wrap{position:relative; z-index:1;}
.crumb{display:flex; gap:8px; align-items:center; font-size:12.5px; color:rgba(255,255,255,.68); margin-bottom:20px; font-weight:600;}
.crumb a{color:rgba(255,255,255,.75);} .crumb a:hover{color:#fff;}
.page-hero h1{color:#fff; font-size:clamp(32px,4.4vw,52px); font-weight:800; line-height:1.1; letter-spacing:-.02em; max-width:760px;}
.page-hero p.lead{color:rgba(255,255,255,.82); font-size:17.5px; line-height:1.65; max-width:600px; margin-top:18px;}
.page-hero-ramps{position:absolute; inset:0; opacity:.4; z-index:0;}

.section-pad{padding:90px 0;}
@media(max-width:640px){.section-pad{padding:60px 0;}}
.section-head{max-width:640px; margin-bottom:40px;}
.section-head h2{font-size:clamp(24px,3vw,34px); font-weight:800; line-height:1.2; margin-top:10px;}
.section-head p{color:var(--body-c); font-size:15.5px; margin-top:12px; line-height:1.6;}

/* card grid */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(19,27,63,.1);}
.card h3{font-size:17px; margin-bottom:8px; line-height:1.3;}
.card p{font-size:14px; color:var(--body-c); line-height:1.6;}
.card .ico{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(217,28,115,.13), rgba(240,169,59,.20)); border:1px solid rgba(217,28,115,.14); color:var(--ink); font-size:24px; margin-bottom:18px;}
.card .ico.magenta-ico{background:linear-gradient(135deg, var(--magenta), var(--magenta-deep));}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
@media(max-width:920px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr; gap:36px;}}
@media(max-width:640px){.grid-3, .grid-4{grid-template-columns:1fr;}}

.link-arrow{font-size:13.5px; font-weight:700; color:var(--jade-deep); display:inline-flex; align-items:center; gap:6px; margin-top:12px;}
.link-arrow .arrow{transition:transform .3s var(--ease);}
.card:hover .link-arrow .arrow{transform:translateX(4px);}

/* stat blocks */
.stat-num{font-family:'Poppins'; font-weight:800; font-size:clamp(24px,3vw,34px); color:var(--ink);}
.stat-label{font-size:13px; color:var(--body-c); font-weight:600; margin-top:4px;}
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0;}
.stat-strip .s + .s{border-left:1px solid var(--line); padding-left:24px;}
@media(max-width:640px){.stat-strip{grid-template-columns:repeat(2,1fr); row-gap:24px;} .stat-strip .s:nth-child(odd){border-left:none !important; padding-left:0 !important;}}

/* dark section (impact-style) */
.dark-section{background:var(--ink); color:#fff; position:relative; overflow:hidden;}
.dark-section::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 10%, rgba(110,82,168,.24), transparent 45%), radial-gradient(circle at 10% 90%, rgba(217,28,115,.22), transparent 45%);}
.dark-section .wrap{position:relative; z-index:1;}
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4{color:#fff;}
.dark-section .section-head p{color:rgba(255,255,255,.72);}
.dark-section p{color:rgba(255,255,255,.82);}
.i-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:24px 22px; backdrop-filter:blur(6px);}
.i-card .num{font-family:'Poppins'; font-weight:800; font-size:clamp(24px,3vw,34px); color:var(--marigold);}
.i-card .label{font-size:13px; color:rgba(255,255,255,.75); margin-top:6px; font-weight:600;}

/* badges / pills */
.badge-row{display:flex; flex-wrap:wrap; gap:10px;}
.badge-pill{display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px; background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.badge-pill .dot2{width:7px; height:7px; border-radius:50%; background:var(--jade);}

/* forms */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit; background:#fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--magenta);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* pricing / donation tiles */
.amount-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.amount-pill{padding:14px; border-radius:12px; border:1.5px solid var(--line); text-align:center; font-weight:700; font-size:14.5px; color:var(--ink); transition:.25s;}
.amount-pill.active, .amount-pill:hover{border-color:var(--marigold-deep); background:#FDF1DD; color:var(--marigold-deep);}

/* timeline */
.tl{position:relative; padding-left:34px; border-left:2px solid var(--line);}
.tl-item{position:relative; padding-bottom:34px;}
.tl-item::before{content:""; position:absolute; left:-42px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--magenta); border:3px solid #fff; box-shadow:0 0 0 2px var(--line);}
.tl-item b{font-family:'Poppins'; color:var(--ink); font-size:15px;}
.tl-item p{font-size:14px; color:var(--body-c); margin-top:6px; line-height:1.6;}

/* table */
table.data-table{width:100%; border-collapse:collapse; font-size:14px;}
table.data-table th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:10px 14px; border-bottom:2px solid var(--line);}
table.data-table td{padding:14px; border-bottom:1px solid var(--line); color:var(--body-c);}
table.data-table tr:hover td{background:var(--paper-alt);}

/* faq accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--ink); font-size:15.5px;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding:0 4px 20px; color:var(--body-c); font-size:14.5px; line-height:1.65;}
.faq-item.open .faq-a{max-height:400px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-q .plus{transition:transform .3s var(--ease); font-size:20px; color:var(--magenta);}

/* newsletter cta */
.news-cta{background:var(--ink); padding:64px 0;}
.news-inner{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.news-inner h3{color:#fff; font-size:22px; font-weight:700; max-width:420px;}
.news-inner p{color:rgba(255,255,255,.7); font-size:14px; margin-top:8px;}
.news-form{display:flex; gap:10px; flex-wrap:wrap;}
.news-form input{padding:14px 18px; border-radius:100px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; min-width:240px; font-size:14px;}
.news-form input::placeholder{color:rgba(255,255,255,.55);}

/* footer */
footer{background:var(--ink); color:rgba(255,255,255,.75); padding-top:64px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);}
@media(max-width:920px){.foot-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}
footer h5{color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;}
footer li{margin-bottom:10px; font-size:14px;}
footer li a:hover{color:var(--marigold);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:24px 0; font-size:12.5px;}
.foot-social{display:flex; gap:12px;}
.foot-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;}
.foot-social a:hover{background:var(--magenta);}
.foot-logo{display:block; width:208px; max-width:100%; height:auto; margin-bottom:18px;}

/* misc */
.pill-tag{display:inline-block; padding:6px 14px; border-radius:100px; background:#FBE3EE; color:var(--magenta-deep); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.sidebar-nav{position:sticky; top:120px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:22px;}
.sidebar-nav a{display:block; padding:9px 10px; border-radius:8px; font-size:14px; font-weight:600; color:var(--body-c);}
.sidebar-nav a:hover, .sidebar-nav a.active{background:var(--paper-alt); color:var(--magenta-deep);}
.avatar-circle{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, rgba(217,28,115,.13), rgba(240,169,59,.20)); border:1px solid rgba(217,28,115,.14); display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:700; flex-shrink:0;}
.notice-box{background:#FBE9F1; border:1px solid #F0C4DA; border-radius:var(--radius-sm); padding:18px 20px; font-size:13.5px; color:#7A2159; line-height:1.6;}
.case-card{display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;}
@media(max-width:640px){.case-card{grid-template-columns:1fr;}}
.case-thumb{width:120px; height:120px; border-radius:16px; background:linear-gradient(135deg,var(--ink-soft),var(--magenta)); display:flex; align-items:center; justify-content:center; font-size:34px;}
.source-note{font-size:12px; color:var(--muted); margin-top:10px;}
.source-note a{text-decoration:underline; color:var(--muted);}
.source-note{line-height:1.6;}
.press-strip{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:22px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);}
.press-strip img{height:28px; width:auto; opacity:.85;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* YouTube video lightbox */
.video-modal-backdrop{position:fixed; inset:0; z-index:1000; background:rgba(19,27,63,.88); display:flex; align-items:center; justify-content:center; padding:24px;}
.video-modal-backdrop[hidden]{display:none;}
.video-modal{position:relative; width:100%; max-width:900px; aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5);}
.video-modal-body{width:100%; height:100%;}
.video-modal-body iframe{width:100%; height:100%; display:block; border:0;}
.video-modal-fallback{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,var(--ink),var(--ink-soft)); padding:24px;}
.video-modal-close{position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;}
.video-modal-close:hover{background:rgba(255,255,255,.28);}

/* Video teaser cards — used on Knowledge Hub / media sections */
.video-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; display:flex; align-items:flex-end; cursor:pointer; background:linear-gradient(135deg,var(--ink-soft),var(--magenta-deep)); border:none; width:100%; text-align:left;}
.video-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%);}
.video-card .play-badge{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--magenta-deep); transition:transform .25s;}
.video-card:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);}
.video-card .video-card-label{position:relative; z-index:1; padding:16px 18px; color:#fff; font-weight:700; font-size:14px; line-height:1.3; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);}

.model-card{background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 10px 30px rgba(19,27,63,.08);}
.model-head{padding:22px 24px; color:#fff;}
.model-head .num{display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:13px; letter-spacing:.08em; opacity:.85; margin-bottom:6px;}
.model-head h3{color:#fff; font-size:17px; line-height:1.3;}
.model-body{padding:20px 24px;}
.model-body .row{margin-bottom:16px;}
.model-body .row:last-child{margin-bottom:0;}
.model-body .row b{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--magenta-deep); margin-bottom:6px;}
.model-body .row p{font-size:14px; line-height:1.6; color:#4A5063;}

/* ============================================================
   RTL support (Arabic). Applied via <html dir="rtl"> and a
   companion .is-rtl class on <body>, both set by drraSetLanguage().
   Covers the highest-impact, most visible layout patterns site-wide;
   component-specific fixes can be layered in as needed.
   ============================================================ */
html[dir="rtl"] body{text-align:right;}
html[dir="rtl"] .nav-links{flex-direction:row-reverse;}
html[dir="rtl"] .nav-cta{flex-direction:row-reverse;}
html[dir="rtl"] nav.wrap{flex-direction:row-reverse;}
html[dir="rtl"] .foot-grid, html[dir="rtl"] footer .wrap{text-align:right;}
html[dir="rtl"] .crumb{direction:rtl;}
html[dir="rtl"] .tl{border-left:none; border-right:2px solid var(--line); padding-left:0; padding-right:24px;}
html[dir="rtl"] .tl-item{padding-left:0; padding-right:0;}
html[dir="rtl"] .tl::before{display:none;}
html[dir="rtl"] .arrow{display:inline-block; transform:scaleX(-1);}
html[dir="rtl"] .link-arrow{flex-direction:row-reverse;}
html[dir="rtl"] .lang-menu{right:auto; left:0;}
html[dir="rtl"] .nav-dropdown-menu{right:auto; left:0;}
html[dir="rtl"] .filter-row, html[dir="rtl"] .badge-row, html[dir="rtl"] .pill-row{flex-direction:row-reverse; justify-content:flex-end;}
html[dir="rtl"] .hero-cta, html[dir="rtl"] .grid-row{flex-direction:row-reverse;}
html[dir="rtl"] .card .ico, html[dir="rtl"] .avatar-circle{margin-left:0;}
html[dir="rtl"] .journey-step{flex-direction:row-reverse;}
html[dir="rtl"] .amount-grid, html[dir="rtl"] .form-grid{direction:rtl;}
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select{text-align:right;}
html[dir="rtl"] .model-head, html[dir="rtl"] .model-body{text-align:right;}
html[dir="rtl"] .skip-link{right:-999px; left:auto;}
html[dir="rtl"] .skip-link:focus{right:0; left:auto;}
html[dir="rtl"] .a11y-toolbar, html[dir="rtl"] #a11y-toggle{right:auto; left:20px;}
html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] p{font-family:'Noto Sans Arabic','Noto Sans Bengali','Inter',sans-serif;}

/* ============================================================
   DRRA Bangladesh — 2026 refinement layer
   Unified hero system, photo framing, icon system, mobile
   navigation and accessibility refinements. Uses the same
   brand palette and typography defined above.
   ============================================================ */

/* ---------- Header + mobile navigation ---------- */
header#site-header{padding:10px 0;}
header#site-header.scrolled{box-shadow:0 6px 24px rgba(19,27,63,.10);}
.nav-cta .btn-sm{white-space:nowrap;}
.nav-toggle{display:none; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; color:var(--ink); border:1px solid rgba(19,27,63,.16); background:#fff;}
.nav-toggle svg{width:22px; height:22px;}
.nav-toggle .close-ic{display:none;}
.nav-toggle[aria-expanded="true"] .open-ic{display:none;}
.nav-toggle[aria-expanded="true"] .close-ic{display:block;}
.mobile-nav{display:none;}
@media(max-width:1140px){
  .nav-toggle{display:inline-flex;}
  .mobile-nav{position:absolute; left:0; right:0; top:100%; height:calc(100vh - var(--hdr-h,68px)); height:calc(100dvh - var(--hdr-h,68px)); background:var(--paper); overflow-y:auto; overscroll-behavior:contain; padding:18px 22px 40px; border-top:1px solid var(--line); z-index:99;}
  .mobile-nav.open{display:block;}
  .mobile-nav a.m-link{display:flex; justify-content:space-between; align-items:center; padding:15px 4px; font-family:'Poppins',sans-serif; font-weight:600; font-size:17px; color:var(--ink); border-bottom:1px solid var(--line);}
  .mobile-nav a.m-link[aria-current="page"]{color:var(--magenta-deep);}
  .mobile-nav .m-group{padding:14px 4px 6px; border-bottom:1px solid var(--line);}
  .mobile-nav .m-group-title{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
  .mobile-nav .m-group a{display:block; padding:10px 0; font-size:15.5px; font-weight:600; color:var(--ink-soft);}
  .mobile-nav .m-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
  .mobile-nav .m-row .lang-option{width:auto; border:1px solid var(--line); background:#fff; min-height:44px;}
  .mobile-nav .m-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;}
  .mobile-nav .m-actions .btn{min-height:48px;}
  body.nav-open{overflow:hidden;}
}
@media(max-width:640px){
  .logo img{height:44px;}
  .nav-cta{gap:10px;}
  .nav-cta .btn-sm{padding:9px 14px;}
}

/* ---------- Inline icon system (replaces emoji with brand line icons) ---------- */
.ic{display:inline-flex; width:1.15em; height:1.15em; vertical-align:-.2em; flex-shrink:0;}
.ic svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.ic.ic-solid svg{fill:currentColor; stroke:none;}
.card .ico, .ico{color:var(--magenta-deep);}
.card .ico .ic, .ico .ic{width:26px; height:26px; vertical-align:0;}
.card .ico.magenta-ico, .ico.magenta-ico{color:#fff;}
.case-thumb{color:#fff;}
.case-thumb .ic{width:44px; height:44px;}
b > .ic, strong > .ic, h3 > .ic, h4 > .ic, .eyebrow > .ic{margin-right:.35em; color:inherit;}
.dark-section .ic{color:var(--marigold);}
.dark-section .i-card .ic{color:var(--marigold);}

/* ---------- Unified interior page hero ---------- */
.page-hero{padding:150px 0 84px;}
.page-hero.has-photo{padding:134px 0 76px;}
.page-hero h1{text-wrap:balance;}
.page-hero .pill-tag{margin-bottom:16px;}
.page-hero .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.ph-grid{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:60px; align-items:center;}
.ph-copy{min-width:0;}
.ph-visual{position:relative; min-width:0;}
.ph-visual::before{content:""; position:absolute; right:-18px; top:-18px; width:46%; height:52%; border-radius:26px; background:linear-gradient(135deg, var(--magenta) 0%, var(--marigold) 100%); opacity:.92; z-index:0;}
.ph-media{position:relative; z-index:1; aspect-ratio:var(--ar,4/3); border-radius:24px; overflow:hidden; background:var(--ink-soft); box-shadow:0 30px 70px rgba(5,8,26,.45);}
.ph-media img, .ph-collage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);}
.ph-collage{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; aspect-ratio:4/3;}
.ph-collage figure{position:relative; margin:0; border-radius:20px; overflow:hidden; background:var(--ink-soft); box-shadow:0 24px 50px rgba(5,8,26,.38);}
.ph-collage figure:first-child{grid-row:1 / span 2;}
.ph-caption{position:relative; z-index:1; margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.7); line-height:1.5;}
@media(max-width:960px){
  .ph-grid{grid-template-columns:1fr; gap:40px;}
  .page-hero.has-photo{padding:116px 0 56px;}
  .ph-visual{max-width:640px;}
  .ph-visual::before{right:-10px; top:-10px;}
}
@media(max-width:640px){
  .page-hero{padding:118px 0 56px;}
  .page-hero.has-photo{padding:108px 0 48px;}
  .page-hero p.lead{font-size:16px;}
  .ph-collage{gap:8px;}
  .ph-collage figure{border-radius:14px;}
  .ph-media{border-radius:18px;}
  .ph-visual::before{width:40%; height:44%; border-radius:18px; right:-8px; top:-8px;}
}
/* text-only heroes keep the brand gradient but gain the same rhythm */
.page-hero.text-only .wrap{position:relative; z-index:1;}

/* ---------- Photo grids (galleries) ---------- */
.photo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.photo-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.photo-grid figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;}
.photo-grid .ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-alt);}
.photo-grid .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 35%); transition:transform .6s var(--ease);}
.photo-grid figure:hover .ph img{transform:scale(1.04);}
.photo-grid figcaption{padding:12px 14px 14px; font-size:13px; line-height:1.45; color:var(--body-c);}
@media(max-width:920px){.photo-grid, .photo-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.photo-grid, .photo-grid.cols-3{grid-template-columns:1fr 1fr; gap:10px;} .photo-grid figcaption{font-size:12px; padding:10px 10px 12px;}}

/* ---------- Footer refinements ---------- */
.foot-social a{width:40px; height:40px; color:#fff;}
.foot-social a svg{width:18px; height:18px; fill:currentColor;}
footer li a{display:inline-block; padding:2px 0;}
footer .foot-contact li{color:rgba(255,255,255,.72);}
footer .foot-contact a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px;}
footer .foot-contact a:hover{color:var(--marigold);}

/* ---------- Accessibility toolbar icons ---------- */
#a11y-toggle svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#a11y-panel button{display:flex; align-items:center; gap:10px; min-height:44px;}
#a11y-panel button .ic{width:18px; height:18px;}
.cart-link svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- Notes / callouts (replaces dev-style warning boxes) ---------- */
.note-quiet{border-left:3px solid var(--marigold); background:#fff; border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:16px 20px; font-size:14px; line-height:1.65; color:var(--body-c);}

/* ---------- Tables: scroll instead of squeeze on small screens ---------- */
.table-scroll{position:relative; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:560px;}

/* ---------- Generic responsive safety ---------- */
img{height:auto;}
.reveal img{max-width:100%;}
@media(max-width:640px){
  .wrap{padding:0 18px;}
  .section-head{margin-bottom:28px;}
  .card{padding:22px;}
  .btn{padding:13px 22px;}
  .stat-strip .s + .s{padding-left:16px;}
  .grid-2{gap:28px;}
  .news-form input{min-width:0; flex:1 1 200px;}
  .news-form{width:100%;}
}
/* touch targets */
@media(pointer:coarse){
  .link-arrow{min-height:40px;}
  .faq-q{min-height:52px;}
}
/* keyboard focus for cards rendered as links */
a.card:focus-visible, .photo-grid figure:focus-within{outline:3px solid var(--marigold); outline-offset:3px;}
.ramp-divider{line-height:0; margin:0 0 -1px;}
.ramp-divider svg{display:block; width:100%; height:56px;}
@media(max-width:640px){.ramp-divider svg{height:32px;}}
@media(max-width:1140px){ .cart-link.hide-mobile, .lang-sel.hide-mobile{display:none;} }
@media(max-width:640px){ #a11y-toolbar{bottom:16px; right:14px;} #a11y-toggle{width:46px; height:46px;} }
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Facebook feed frame with branded fallback ---------- */
.fb-frame{position:relative; width:100%; max-width:500px; min-height:520px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 20px 50px rgba(19,27,63,.1); background:linear-gradient(150deg, var(--ink) 0%, var(--ink-soft) 60%, #3A1A4E 100%);}
.fb-frame .fb-fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; color:#fff;}
.fb-frame .fb-fallback .ic{width:42px; height:42px; color:var(--marigold); margin-bottom:14px;}
.fb-frame iframe{position:relative; z-index:1; display:block; width:100%; height:520px; border:none; background:transparent; margin:0 auto;}
.fb-frame .fb-fallback{justify-content:flex-end; padding-bottom:46px;}
.fb-col{display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0;}
.fb-col .fb-frame{margin:0 auto;}
.fb-note{max-width:500px; font-size:12.5px; line-height:1.6; color:#6F6857; text-align:center; margin:0;}
.fb-note a{color:var(--magenta-deep, #AC1560); text-decoration:underline; font-weight:600;}

/* ---------- Filter pills (research, shop) ---------- */
.filter-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.filter-pill{padding:10px 16px; min-height:42px; border-radius:100px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:13.5px; font-weight:700; transition:background .2s, border-color .2s, color .2s;}
.filter-pill:hover{border-color:var(--ink);}
.filter-pill.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.duo-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:480px){.duo-grid{grid-template-columns:1fr;}}
.legal-layout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:50px;}
@media(max-width:860px){.legal-layout{grid-template-columns:1fr; gap:24px;} .legal-layout .sidebar-nav{position:static; display:flex; flex-wrap:wrap; gap:4px;}}
.video-card .video-card-label{width:100%;}
@media(max-width:960px){ .ph-visual[style*="justify-self:end"]{justify-self:start !important;} }
@media(max-width:640px){ .grid-4.compact{grid-template-columns:repeat(2,1fr); gap:12px;} .grid-4.compact .card{padding:18px 14px;} }

html[dir="rtl"] .tl-item::before{left:auto; right:-35px;}

/* Inline text links inside body copy (e.g. Shokkhom) */
a.inline-link{color:var(--magenta-deep, #AC1560); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
a.inline-link:hover{color:var(--magenta, #D91C73);}

/* Native numerals for CSS-generated step numbers in Bangla and Arabic */
html[lang="bn"] .cj-recs li::before{content:counter(r, bengali);}
html[lang="bn"] .we-steps li::before{content:counter(st, bengali);}
html[lang="ar"] .cj-recs li::before{content:counter(r, arabic-indic);}
html[lang="ar"] .we-steps li::before{content:counter(st, arabic-indic);}