#home-hero {
    padding: calc(var(--nav-h) + 140px) 5% 80px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: radial-gradient(ellipse at 85% 20%, var(--chartreuse-soft), transparent 55%),
                radial-gradient(ellipse at 15% 80%, rgba(201, 162, 75, 0.04), transparent 55%);
    position: relative;
    overflow: hidden;
}

#home-hero::before {
    content: '';
    position: absolute;
    bottom: -200px;
    inset-inline-end: -200px;
    width: 500px;
    height: 500px;
    background: var(--chartreuse);
    filter: blur(180px);
    opacity: 0.08;
    border-radius: 50%;
    pointer-events: none;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 7.5rem);
    margin-bottom: 32px;
    max-width: 1200px;
    font-weight: 900;
}

html[lang="ar"] .hero-title {
    font-size: clamp(2.5rem, 7vw, 6rem);
}

.hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    max-width: 680px;
    margin-bottom: 48px;
    color: var(--text-mute);
    font-weight: 300;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-scroll {
    position: absolute;
    bottom: 40px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-mute);
    opacity: 0.7;
}

.hero-scroll::after {
    content: '';
    width: 1px;
    height: 40px;
    background: var(--text-mute);
    animation: scrollHint 2.5s ease-in-out infinite;
}

@keyframes scrollHint {
    0%, 100% { transform: scaleY(1); transform-origin: top; }
    50% { transform: scaleY(0.3); transform-origin: top; }
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.about-grid .about-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    margin-bottom: 32px;
}

.about-grid p {
    font-size: 1.1rem;
    line-height: 1.75;
    margin-bottom: 20px;
}

.stat-block {
    background: #0a0a0a;
    color: var(--white);
    padding: 56px 52px;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.stat-block::after { display: none; }

.stat-block .stat-logo {
    font-family: var(--font-head);
    font-size: clamp(3.4rem, 6vw, 5.4rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.stat-block .stat-logo span { color: var(--chartreuse); }

.stat-block .stat-year {
    align-self: flex-start;
    margin: 22px 0 16px;
    padding: 7px 18px;
    border-radius: 100px;
    background: rgba(201, 162, 75, 0.12);
    border: 1px solid rgba(201, 162, 75, 0.32);
    color: var(--chartreuse);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.stat-block p {
    color: var(--cloud);
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
    max-width: 320px;
}

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .stat-block { padding: 40px; min-height: 240px; }
}

.services-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.services-head h2 {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
}

.news-strip {
    background: var(--bg-elev);
    border-block: 1px solid var(--border);
}

#home-contact {
    padding: var(--section-pad);
}

.page-head.with-bg {
    background: radial-gradient(circle at 20% 30%, var(--chartreuse-soft), transparent 60%);
}

.about-section {
    padding: 80px 5%;
    max-width: var(--container);
    margin: 0 auto;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 24px;
    margin-top: 40px;
}

.value-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px;
    transition: all var(--t-med) var(--ease);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.value-card:hover {
    border-color: var(--chartreuse);
    transform: translateY(-4px);
}

.value-card .num {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 900;
    color: var(--chartreuse);
    line-height: 1;
}

.value-card p {
    font-size: 1rem;
    color: var(--text);
    font-weight: 500;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

.mv-block h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 20px;
}

.mv-block p {
    font-size: 1.1rem;
    line-height: 1.75;
}

@media (max-width: 800px) {
    .mv-grid { grid-template-columns: 1fr; gap: 32px; }
}

.article-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 60px 5%;
}

.article-wrap .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-mute);
    font-size: 0.85rem;
    margin-bottom: 32px;
    transition: color var(--t-fast) var(--ease);
}

.article-wrap .back-link:hover { color: var(--chartreuse); }

.article-wrap h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 16px;
}

.article-wrap .article-date {
    color: var(--text-mute);
    font-size: 0.9rem;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

html[lang="ar"] .article-wrap .article-date {
    text-transform: none;
    letter-spacing: 0;
}

.article-cover {
    aspect-ratio: 16 / 9;
    background: var(--bg-elev) center/cover no-repeat;
    border-radius: var(--radius-md);
    margin-bottom: 48px;
    position: relative;
}

.article-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--chartreuse-soft), transparent);
    border-radius: var(--radius-md);
}

.article-body p,
.article-body li {
    font-size: 1.1rem;
    line-height: 1.85;
    margin-bottom: 20px;
}

.article-body h2 {
    font-size: 1.8rem;
    margin-top: 48px;
    margin-bottom: 20px;
}

.article-body h3 {
    font-size: 1.4rem;
    margin-top: 32px;
    margin-bottom: 16px;
}

.article-body ul,
.article-body ol {
    padding-inline-start: 24px;
    margin-bottom: 24px;
}

.case-hero {
    padding: calc(var(--nav-h) + 100px) 5% 60px;
    background: var(--bg-elev);
}

.case-hero .container { max-width: 1100px; }

.case-cover {
    aspect-ratio: 21 / 9;
    background: var(--charcoal) center/cover no-repeat;
    border-radius: var(--radius-md);
    margin: 40px auto 60px;
    max-width: 1100px;
    position: relative;
    overflow: hidden;
}

.case-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--chartreuse-soft), transparent 40%);
}

.case-body {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 5% 80px;
}

.case-body p {
    font-size: 1.1rem;
    line-height: 1.85;
    margin-bottom: 20px;
}

.case-body h2 { font-size: 1.8rem; margin: 48px 0 20px; }

.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 40px 0;
}

.filter-chip {
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-mute);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--t-fast) var(--ease);
}

html[lang="ar"] .filter-chip {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
}

.filter-chip:hover,
.filter-chip.active {
    background: var(--chartreuse);
    color: var(--black);
    border-color: var(--chartreuse);
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-mute);
}

.empty-state svg {
    margin: 0 auto 20px;
    opacity: 0.4;
}

.legal-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 120px) 5% 80px;
}

.legal-wrap h1 { margin-bottom: 16px; }
.legal-wrap .updated {
    color: var(--text-mute);
    font-size: 0.9rem;
    margin-bottom: 40px;
}

.legal-wrap h2 {
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 16px;
}

.legal-wrap p, .legal-wrap li {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-wrap ul { padding-inline-start: 24px; }

/* ── IECC video-less animated hero (dark + drifting chartreuse glow) ───── */
#home-hero.iecc-hero{
    background:#0A0A0B; color:#fff; min-height:100vh;
    padding:calc(var(--nav-h) + 56px) 5% 90px;
    display:flex; align-items:center; position:relative; overflow:hidden;
}
#home-hero.iecc-hero::before{ display:none; }
.ih-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
        transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ih-blob{ position:absolute; border-radius:50%; filter:blur(120px); }
.ih-blob.a{ width:560px; height:560px; background:#C9A24B; opacity:.30; top:-12%; inset-inline-end:3%; animation:ihA 17s ease-in-out infinite; }
.ih-blob.b{ width:500px; height:500px; background:#52610f; opacity:.55; bottom:-14%; inset-inline-start:8%; animation:ihB 21s ease-in-out infinite; }
.ih-blob.c{ width:420px; height:420px; background:#C9A24B; opacity:.10; top:38%; inset-inline-start:44%; animation:ihC 24s ease-in-out infinite; }
@keyframes ihA{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-40px,40px) scale(1.12)} 66%{transform:translate(30px,-30px) scale(.95)} }
@keyframes ihB{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(35px,-30px) scale(1.1)} 66%{transform:translate(-25px,25px) scale(.96)} }
@keyframes ihC{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,-20px) scale(1.15)} }
.ih-grain{ position:absolute; inset:0; z-index:1; opacity:.35; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/></svg>");
    background-size:200px 200px; }
.ih-content{ position:relative; z-index:10; }

.ih-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.7);
    font-size:clamp(11px,1.1vw,13px); letter-spacing:.05em; text-transform:uppercase; margin-bottom:26px; }
.ih-eyebrow svg{ width:16px; height:16px; color:#C9A24B; flex:none; }

.ih-h1{ font-weight:800; line-height:1; letter-spacing:-.01em; margin:0; }
.ih-h1 .ln{ display:block; font-size:clamp(2.6rem,8vw,6.4rem); color:#fff; }
/* Arabic diacritics (tashkeel) need breathing room — line-height:1 + negative
   letter-spacing make the harakat collide between lines and crowd each word.
   Loosen both only in Arabic. */
html[lang="ar"] .ih-h1{ letter-spacing:0; }
html[lang="ar"] .ih-h1 .ln{ line-height:1.55; padding-block:2px; }
.ih-h1 .ln.lime{ color:#C9A24B; }

.ih-sub{ margin-top:26px; max-width:480px; color:rgba(255,255,255,.72);
    font-size:clamp(15px,1.5vw,18px); line-height:1.7; font-weight:300; }
.ih-sub b{ color:#C9A24B; font-weight:700; }

.ih-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:36px; }
.ih-btn{ display:inline-flex; align-items:center; gap:10px; background:#C9A24B; color:#0A0A0B;
    padding:15px 30px; border-radius:9999px; font-weight:700; font-size:15px; text-decoration:none;
    transition:transform .15s ease, background-color .2s; }
.ih-btn:hover{ transform:translateY(-2px); background:#cfe23a; }
.ih-btn svg{ width:17px; height:17px; transition:transform .2s; }
.ih-btn:hover svg{ transform:translate(2px,-2px); }
.ih-badge{ display:inline-flex; align-items:center; gap:11px; }
.ih-badge svg{ width:30px; height:30px; color:rgba(255,255,255,.5); flex:none; }
.ih-badge div{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); line-height:1.5; }

.ih-stats{ display:flex; flex-wrap:wrap; gap:clamp(26px,5vw,60px); margin-top:48px; }
.ih-stat .v{ font-weight:700; color:#fff; font-size:clamp(1.7rem,4vw,3rem); letter-spacing:-.02em; }
.ih-stat .l{ color:rgba(255,255,255,.5); font-size:clamp(9px,1vw,12px); letter-spacing:.12em; text-transform:uppercase; margin-top:5px; }

@keyframes ihFadeUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
.iecc-hero .fu{ opacity:0; animation:ihFadeUp .8s ease-out forwards; }
.iecc-hero .d1{ animation-delay:.2s; } .iecc-hero .d2{ animation-delay:.4s; }
.iecc-hero .d3{ animation-delay:.6s; } .iecc-hero .d4{ animation-delay:.8s; }
.iecc-hero .hero-scroll{ color:rgba(255,255,255,.5); }
.iecc-hero .hero-scroll::after{ background:rgba(255,255,255,.4); }

@media (prefers-reduced-motion: reduce){
    .iecc-hero .fu{ animation:none; opacity:1; }
    .ih-blob{ animation:none; }
}

/* ── Hero with the original "IECC Guardians" image ────────────────────── */
#home-hero.iecc-hero--img{ background:#080c06; }
.ih-gwrap{
    position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0;
    animation:ihFadeIn 1.4s ease-out both;
    transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform;
}
.ih-guardians{
    width:100%; height:100%; object-fit:cover; object-position:center 26%; display:block;
    animation:ihKen 22s ease-in-out infinite; will-change:transform;
}
@keyframes ihFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ihKen{
    0%   { transform:scale(1.0)  translate(0, 0); }
    50%  { transform:scale(1.06) translate(-1.2%, -0.8%); }
    100% { transform:scale(1.0)  translate(0, 0); }
}
/* Scrim: dark on the reading-START side (where the text sits) so the figures
   stay visible on the other side. RTL → dark right; LTR → dark left. */
.ih-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(to left, rgba(8,12,6,.9) 0%, rgba(8,12,6,.55) 36%, rgba(8,12,6,.05) 68%, rgba(8,12,6,0) 100%),
      linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 38%);
}
html[dir="ltr"] .ih-scrim{
    background:
      linear-gradient(to right, rgba(8,12,6,.9) 0%, rgba(8,12,6,.55) 36%, rgba(8,12,6,.05) 68%, rgba(8,12,6,0) 100%),
      linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 38%);
}
/* Content hugs the reading-start side (over the dark scrim), not the middle. */
.iecc-hero--img .ih-content{ max-width:520px; margin-inline-start:0; margin-inline-end:auto; }
.iecc-hero--img .ih-stats{ gap:34px; }
.iecc-hero--img .ih-stat .v{ font-size:clamp(1.55rem,3vw,2.4rem); }
@media (max-width:880px){
    .ih-guardians{ object-position:center 22%; }
    .ih-scrim{ background:
      linear-gradient(to top, rgba(8,12,6,.96) 0%, rgba(8,12,6,.72) 48%, rgba(8,12,6,.32) 100%); }
    .iecc-hero--img .ih-content{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){ .ih-guardians{ transition:none; } }

/* ── Hero variant: animated particle-network background (bottom-left content) ─ */
#home-hero.iecc-hero--net{ background:#0a0a0a; align-items:center; justify-content:center; text-align:center; }
.ih-net{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.ih-netscrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%),
      radial-gradient(120% 90% at 50% 120%, rgba(201, 162, 75,.10), transparent 60%);
}
.iecc-hero--net .ih-content{ position:relative; z-index:10; }
/* Centered, larger content */
.ih-content--bl{ max-width:900px; margin:0 auto; padding-bottom:0; }
.iecc-hero--net .ih-h1 .ln{ font-size:clamp(3.2rem,9.5vw,8rem); }
.ih-sub2{ color:rgba(255,255,255,.9); font-size:clamp(1.3rem,3vw,2.2rem); font-weight:300; margin:20px 0 0; }
.ih-desc{ color:rgba(255,255,255,.62); font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:300; line-height:1.8; margin:18px auto 0; max-width:680px; }
.ih-cta--bl{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; justify-content:center; }
.ih-btn2{ font-size:16px; padding:16px 38px; }
.ih-btn2{ display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; border-radius:6px; font-weight:700; font-size:15px; text-decoration:none; transition:transform .15s ease, filter .2s ease; }
.ih-btn2:active{ transform:scale(.97); }
.ih-btn2--green{ background:#C9A24B; color:#0a0a0a; }
.ih-btn2--green:hover{ filter:brightness(1.1); }
.ih-btn2--white{ background:#fff; color:#0a0a0a; }
.ih-btn2--white:hover{ filter:brightness(.9); }
.ih-trust{ color:rgba(255,255,255,.4); font-size:12.5px; font-weight:300; margin-top:24px; letter-spacing:.02em; }
.iecc-hero .d5{ animation-delay:1s; }