/* ============================================================
   VADALO VENTURES — CSR POLICY CSS
   csr.css
   ============================================================ */

/* ── PAGE BACKGROUND ── */
header { border-bottom: none !important; }
html, body { background: #ffffff; }

/* ── HERO ── */
.csr-hero { background: transparent; background-image:url("../images/csr/csr-hero-banner.webp"); background-size:cover; background-position:center; background-repeat:no-repeat; padding:4.5rem 0 3.5rem; position:relative; overflow:hidden; }
.csr-hero::before { content:''; position:absolute; inset:0; background:transparent; }
.csr-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity: 1; z-index:0; }
.csr-hero__overlay { position:absolute; inset:0; background:transparent; z-index:1; }
.csr-hero .container { position:relative; z-index:2; }
.csr-hero__tag { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--clr-gold); display:block; margin-bottom:.75rem; }
.csr-hero__title { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:700; color:var(--clr-cream); line-height:1.1; margin-bottom:1rem; }
.csr-hero__sub { font-size:1rem; color:rgba(248,244,236,.65); line-height:1.75; max-width:600px; margin-bottom:1.5rem; }
.csr-hero__breadcrumb { display:flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-size:.68rem; color:rgba(248,244,236,.4); margin-top:1rem; }
.csr-hero__breadcrumb a { color:rgba(248,244,236,.5); text-decoration:none; }
.csr-hero__breadcrumb a:hover { color:var(--clr-gold); }
.csr-hero__breadcrumb .cur { color:var(--clr-gold); }
.hero-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.hb { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:100px; padding:.3rem .9rem; font-family:var(--font-ui); font-size:.65rem; font-weight:600; color:rgba(248,244,236,.8); }

/* ── QUICK NAV ── */
.quick-nav { background:white; border-bottom:none; position:sticky; top:var(--header-h); z-index:80; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.qn-inner { display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; gap:.4rem; padding:.75rem 0; }
.qn-inner::-webkit-scrollbar { display:none; }
.qn-inner a { display:flex; align-items:center; padding:.3rem .65rem; border:1.5px solid var(--clr-border); border-radius:100px; font-family:var(--font-ui); font-size:.62rem; font-weight:600; color:var(--clr-text-muted); text-decoration:none; white-space:nowrap; transition:all .22s; flex-shrink:0; }
.qn-inner a:hover, .qn-inner a.is-active { background:var(--clr-forest); border-color:var(--clr-forest); color:white; }

/* ── CONTENT ── */
.content-wrap { max-width:960px; margin:0 auto; padding:3rem 0; }
.sec-label { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--clr-gold); display:block; margin-bottom:.5rem; }
.sec-h { font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:700; color:var(--clr-forest); margin-bottom:1rem; }
.prose { font-size:.95rem; line-height:1.82; color:var(--clr-text-muted); margin-bottom:1rem; }
.divider { border:none; border-top:1px solid var(--clr-border-light); margin:2.5rem 0; }

/* ── INFO BOX ── */
.info-box { display:flex; gap:1rem; background:rgba(46,102,71,.07); border:1px solid rgba(46,102,71,.18); border-left:4px solid var(--clr-forest); border-radius:var(--radius-md); padding:1.1rem 1.25rem; margin:1.25rem 0; font-size:.88rem; color:var(--clr-text); line-height:1.7; }
.ib-icon { font-size:1.3rem; flex-shrink:0; }
.ib-text strong { color:var(--clr-forest); }

/* ── STATS ── */
.stat-row { display:flex; background:var(--clr-forest); border-radius:var(--radius-lg); overflow:hidden; margin:1.5rem 0; }
.sr-b { flex:1; text-align:center; padding:1.25rem .75rem; border-right:1px solid rgba(255,255,255,.1); }
.sr-b:last-child { border-right:none; }
.sr-n { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--clr-gold); line-height:1; margin-bottom:.3rem; }
.sr-l { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(248,244,236,.5); line-height:1.4; }

/* ── QUOTE ── */
.csr-q { border-left:4px solid var(--clr-gold); padding:1.25rem 1.5rem; margin:1.75rem 0; background:rgba(201,168,76,.06); border-radius:0 var(--radius-md) var(--radius-md) 0; font-family:var(--font-display); font-size:1.05rem; font-style:italic; color:var(--clr-forest); line-height:1.75; }
.csr-q cite { display:block; margin-top:.75rem; font-family:var(--font-ui); font-size:.72rem; font-weight:700; font-style:normal; letter-spacing:.1em; color:var(--clr-gold); }

/* ── CSR PILLARS ── */
.csr-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0; }
.csr-card { background:white; border:1px solid var(--clr-border-light); border-radius:var(--radius-lg); padding:1.5rem; transition:all .3s; }
.csr-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.csr-ico { font-size:2rem; margin-bottom:.75rem; }
.csr-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--clr-forest); margin-bottom:.5rem; }
.csr-card p { font-size:.85rem; color:var(--clr-text-muted); line-height:1.7; }

/* ── PILLAR SECTIONS ── */
.pillar { background:var(--clr-ivory); border:1px solid var(--clr-border-light); border-radius:var(--radius-lg); padding:1.5rem; margin:1.25rem 0; }
.pillar h3 { font-family:var(--font-ui); font-size:.88rem; font-weight:700; color:var(--clr-forest); margin-bottom:.25rem; }
.pillar-sub { font-size:.78rem; color:var(--clr-text-muted); margin-bottom:1rem; font-style:italic; }
.pillar ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.pillar ul li { display:flex; align-items:flex-start; gap:.65rem; font-size:.88rem; color:var(--clr-text-muted); line-height:1.65; }
.pillar ul li::before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--clr-forest); font-size:.7rem; margin-top:.2rem; flex-shrink:0; }
.pillar ul li strong { color:var(--clr-forest); }

/* ── HIGHLIGHT BOXES ── */
.hl-box { border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin:1.25rem 0; }
.hl-green { background:rgba(46,102,71,.08); border:1px solid rgba(46,102,71,.2); }
.hl-gold { background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.25); }
.hl-box h4 { font-family:var(--font-ui); font-size:.82rem; font-weight:700; color:var(--clr-forest); margin-bottom:.75rem; }
.hl-box ul { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.hl-box ul li { display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--clr-text-muted); line-height:1.6; }
.hl-box ul li::before { content:'›'; color:var(--clr-gold); font-weight:700; font-size:1rem; line-height:1.3; flex-shrink:0; }
.hl-box ul li strong { color:var(--clr-forest); }

/* ── CERTIFICATIONS ── */
.cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0; }
.cert-card { background:white; border:1px solid var(--clr-border-light); border-radius:var(--radius-lg); padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; transition:all .3s; }
.cert-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.cert-badge { font-size:1.8rem; }
.cert-full { font-family:var(--font-ui); font-size:.55rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--clr-gold); margin-bottom:.15rem; }
.cert-info h4 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--clr-forest); margin-bottom:.4rem; }
.cert-info p { font-size:.8rem; color:var(--clr-text-muted); line-height:1.65; margin-bottom:.6rem; }
.cert-status { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .65rem; border-radius:100px; font-family:var(--font-ui); font-size:.6rem; font-weight:700; }
.cert-status.active { background:rgba(46,102,71,.1); color:var(--clr-forest); }
.cert-status.certifiable { background:rgba(201,168,76,.12); color:#7a6010; }

/* ── TABLES ── */
.impact-table,.cmp-table { width:100%; border-collapse:collapse; font-size:.85rem; margin:1rem 0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.impact-table thead tr,.cmp-table thead tr { background:var(--clr-forest); color:var(--clr-cream); }
.impact-table thead th,.cmp-table thead th { padding:.75rem 1rem; text-align:left; font-family:var(--font-ui); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.impact-table tbody td,.cmp-table tbody td { padding:.65rem 1rem; border-bottom:1px solid var(--clr-border-light); vertical-align:top; color:var(--clr-text-muted); }
.impact-table tbody tr:last-child td,.cmp-table tbody tr:last-child td { border-bottom:none; }
.impact-table tbody tr:hover,.cmp-table tbody tr:hover { background:var(--clr-ivory); }
.impact-table .val { font-weight:600; color:var(--clr-forest); }
.cmp-table .yes { color:var(--clr-forest); font-weight:600; }
.cmp-table .no  { color:#8b1a1a; }

/* ── SDG GRID ── */
.sdg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin:1.5rem 0; }
.sdg-item { border-radius:var(--radius-lg); padding:1.75rem 1.5rem; background:white; border:2px solid; text-align:center; transition:transform .3s, box-shadow .3s; }
.sdg-item:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.1); }
.sdg-1 { border-color:#e5243b; }
.sdg-2 { border-color:#dda63a; }
.sdg-3 { border-color:#4c9f38; }
.sdg-4 { border-color:#bf8b2e; }
.sdg-5 { border-color:#e5243b; }
.sdg-6 { border-color:#26bde2; }
.sdg-num { font-family:var(--font-display); font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:.4rem; }
.sdg-1 .sdg-num { color:#e5243b; }
.sdg-2 .sdg-num { color:#dda63a; }
.sdg-3 .sdg-num { color:#4c9f38; }
.sdg-4 .sdg-num { color:#bf8b2e; }
.sdg-5 .sdg-num { color:#e5243b; }
.sdg-6 .sdg-num { color:#26bde2; }
.sdg-title { font-family:var(--font-ui); font-size:.65rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.75rem; }
.sdg-1 .sdg-title { color:#e5243b; }
.sdg-2 .sdg-title { color:#dda63a; }
.sdg-3 .sdg-title { color:#4c9f38; }
.sdg-4 .sdg-title { color:#bf8b2e; }
.sdg-5 .sdg-title { color:#e5243b; }
.sdg-6 .sdg-title { color:#26bde2; }
.sdg-desc { font-size:.85rem; color:var(--clr-text-muted); line-height:1.65; }

/* ── PROCESS STEPS ── */
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; margin:1.5rem 0; counter-reset:step; }
.ps-item { background:white; border:1px solid var(--clr-border-light); border-radius:var(--radius-lg); padding:1.25rem; text-align:center; position:relative; counter-increment:step; transition:all .3s; }
.ps-item:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.ps-item::before { content:counter(step); width:32px; height:32px; background:var(--clr-forest); color:var(--clr-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:.8rem; font-weight:800; margin:0 auto .75rem; }
.ps-item h4 { font-family:var(--font-ui); font-size:.78rem; font-weight:700; color:var(--clr-forest); margin-bottom:.4rem; }
.ps-item p { font-size:.78rem; color:var(--clr-text-muted); line-height:1.6; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:.6rem; margin:1rem 0; }
.faq-item { background:white; border:1px solid var(--clr-border-light); border-radius:var(--radius-md); overflow:hidden; transition:border-color .25s; }
.faq-item:hover { border-color:rgba(46,102,71,.25); }
.faq-item.open { border-color:rgba(201,168,76,.35); }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.25rem; cursor:pointer; font-family:var(--font-ui); font-size:.85rem; font-weight:700; color:var(--clr-forest); background:white; border:none; text-align:left; transition:background .2s; }
.faq-item.open .faq-q { background:var(--clr-ivory); }
.faq-icon { width:28px; height:28px; border-radius:50%; background:var(--clr-ivory); border:1px solid var(--clr-border-light); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--clr-forest); flex-shrink:0; transition:all .25s; line-height:1; }
.faq-item.open .faq-icon { background:var(--clr-forest); color:var(--clr-gold); transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; font-size:.88rem; color:var(--clr-text-muted); line-height:1.8; }
.faq-item.open .faq-a { max-height:500px; padding:.5rem 1.25rem 1.25rem; border-top:1px solid var(--clr-border-light); }
.faq-a strong { color:var(--clr-forest); }
.faq-a ul { list-style:none; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.3rem; }
.faq-a ul li { padding-left:1rem; position:relative; font-size:.85rem; line-height:1.6; }
.faq-a ul li::before { content:'›'; position:absolute; left:0; color:var(--clr-gold); font-weight:700; }

/* ── CTA ── */
.cta-box { background:linear-gradient(135deg,var(--clr-forest),var(--clr-forest-mid)); border-radius:var(--radius-xl); padding:2.5rem; text-align:center; margin-top:2rem; position:relative; overflow:hidden; }
.cta-box::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px); }
.cta-box__inner { position:relative; z-index:1; }
.cta-box h3 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--clr-cream); margin-bottom:.5rem; }
.cta-box p { font-size:.9rem; color:rgba(248,244,236,.65); max-width:500px; margin:0 auto 1.5rem; line-height:1.7; }
.cta-contacts { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.cc { font-size:.85rem; color:rgba(248,244,236,.75); display:flex; align-items:center; gap:.4rem; }
.cc span { color:rgba(248,244,236,.5); }
.cta-box .btns { display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) { .cert-grid { grid-template-columns:repeat(2,1fr); } .process-steps { grid-template-columns:repeat(3,1fr); } .sdg-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) { .csr-hero { padding:2.5rem 0 2rem; } .csr-hero__title { font-size:clamp(1.5rem,6vw,2.2rem); } .csr-grid,.cert-grid,.sdg-grid { grid-template-columns:1fr; } .process-steps { grid-template-columns:repeat(2,1fr); } .stat-row { flex-wrap:wrap; } .sr-b { min-width:calc(50% - 1px); border-bottom:1px solid rgba(255,255,255,.1); } .content-wrap { padding:2rem 0; } .cta-box { padding:1.75rem 1.25rem; } }